/* ========== Tourwerk – zentrales Stylesheet ========== */
:root{
  --bg-cream:#f5eee0;
  --bg-section:#ece2cc;
  --bg-dark:#211a13;
  --accent:#e08a3e;
  --accent-dark:#7a4b1c;
  --text-dark:#241c12;
  --text-muted:#6b6153;
  --line:rgba(120,100,70,0.20);
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg-cream);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text-dark);
  line-height:1.65;
  font-size:16px;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ---------- Kopfbereich ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg-cream);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
  padding:26px 40px;
  max-width:var(--maxw);margin:0 auto;
}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;letter-spacing:-0.3px;}
.logo svg{width:23px;height:23px;color:var(--accent);flex-shrink:0;}
nav{display:flex;gap:34px;font-size:15px;flex-wrap:wrap;}
nav a{padding:4px 0;border-bottom:2px solid transparent;}
nav a:hover{color:var(--accent-dark);}
nav a.active{color:var(--accent-dark);font-weight:700;border-bottom-color:var(--accent);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:#f6ecdb;
  background:#211a13 url("/img/fotos/hero.jpg") center/cover no-repeat;
}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:120px 40px 116px;
}
.pagehero{
  color:#f6ecdb;
  background:#211a13 url("/img/fotos/hero.jpg") center 35%/cover no-repeat;
}
.pagehero-inner{max-width:var(--maxw);margin:0 auto;padding:88px 40px 82px;}

.eyebrow{
  color:var(--accent);
  font-size:13px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:20px;
}
h1{
  font-size:clamp(40px,6.4vw,76px);
  line-height:1.03;font-weight:800;
  margin:0 0 26px;letter-spacing:-1.5px;
}
.hero h1{font-size:clamp(46px,7.2vw,88px);line-height:0.99;margin-bottom:30px;}
.hero p, .pagehero p{
  font-size:18px;max-width:520px;
  color:#e8dcc6;line-height:1.7;margin:0;
}
.hero p{margin-bottom:38px;}

.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:#241405;}
.btn-secondary{background:rgba(246,236,219,0.10);border-color:rgba(246,236,219,0.55);color:#f6ecdb;}

/* ---------- Sektionen ---------- */
section{padding:96px 0;}
section.bg-section{background:var(--bg-section);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;flex-wrap:wrap;gap:20px;
}
.section-head h2{
  font-size:clamp(28px,4vw,42px);font-weight:800;
  margin:0;letter-spacing:-0.8px;line-height:1.15;
}
.section-head .eyebrow{margin-bottom:10px;}
.all-link{font-weight:700;font-size:15px;color:var(--accent-dark);white-space:nowrap;}
.all-link:hover{text-decoration:underline;}

/* ---------- Karten ---------- */
.grid3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:34px;
}
.card{
  background:#fbf6ea;
  border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(60,44,24,0.12);}
.card-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
.card-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1;}
.card-meta{
  display:flex;justify-content:space-between;gap:12px;
  font-size:11.5px;font-weight:700;letter-spacing:0.9px;
  color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;
}
.card h3{font-size:21px;font-weight:800;margin:0 0 12px;line-height:1.3;letter-spacing:-0.3px;}
.card p{font-size:15px;color:var(--text-muted);line-height:1.65;margin:0 0 22px;}
.card-km{
  font-size:14px;font-weight:700;
  border-top:1px solid var(--line);
  padding-top:16px;margin-top:auto;margin-bottom:10px;
}
.stops{font-size:13px;color:var(--text-muted);line-height:1.6;}
.blog-read{font-size:13px;color:var(--text-muted);margin-top:auto;}

/* ---------- Tipp-Karten ---------- */
.tip-card .card-body{padding:32px 28px;}
.tip-card h3{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
.tip-icon{width:22px;height:22px;color:var(--accent-dark);flex-shrink:0;margin-top:3px;}
.tip-card p{margin-bottom:0;}

/* ---------- Über mich ---------- */
.about-inner{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;}
.avatar{
  width:220px;height:220px;border-radius:50%;
  background:linear-gradient(135deg,#4a3520,#c9812f);
  flex-shrink:0;object-fit:cover;border:3px solid #fff;
  box-shadow:0 8px 22px rgba(60,44,24,0.18);
}

/* ---------- Fließtext ---------- */
.prose{font-size:16.5px;color:var(--text-muted);line-height:1.8;max-width:680px;}
.prose h2{
  font-size:22px;font-weight:800;
  margin:40px 0 14px;color:var(--text-dark);line-height:1.3;
}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 20px;}
.prose ul{margin:0 0 20px;padding-left:22px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--accent-dark);text-decoration:underline;}
.legal-note{
  font-size:14px;line-height:1.7;
  background:rgba(224,138,62,0.10);
  border-left:3px solid var(--accent);
  padding:18px 22px;border-radius:0 10px 10px 0;
  margin:32px 0 0;
}
.placeholder{
  background:rgba(224,138,62,0.18);
  padding:1px 7px;border-radius:4px;
  font-weight:600;color:var(--accent-dark);
}

/* ---------- Fußbereich ---------- */
footer{background:var(--bg-dark);color:#e8dcc6;padding:72px 0 40px;margin-top:0;}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 40px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;
}
footer .logo{color:#f6ecdb;}
footer p{max-width:400px;font-size:14.5px;color:#bcae92;line-height:1.7;margin:16px 0 0;}
.foot-links{display:flex;gap:28px;font-size:14.5px;color:#d3c5a6;align-self:flex-end;flex-wrap:wrap;}
.foot-links a:hover{color:var(--accent);}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .about-inner{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center;}
  .prose{text-align:left;}
}
@media (max-width:680px){
  .wrap{padding:0 22px;}
  .header-inner{flex-direction:column;gap:18px;padding:20px 22px;}
  nav{gap:20px;font-size:14.5px;justify-content:center;}
  .hero-inner{padding:76px 22px 72px;}
  .pagehero-inner{padding:60px 22px 56px;}
  section{padding:64px 0;}
  .section-head{margin-bottom:34px;}
  .grid3{gap:26px;}
  .footer-inner{flex-direction:column;padding:0 22px;}
  .foot-links{align-self:flex-start;}
  .kontakt-karte{padding:24px 20px;border-radius:16px;}
  .kommentar-form{padding:22px 20px;}
  .kommentar-liste li{padding:15px 16px;}
  .status-zeile{font-size:13px;padding:10px 14px;}
  nav{gap:16px 20px;}
}

/* ===== Ergänzungen für die dynamische Version ===== */
.card h3 a{color:inherit;}
.card h3 a:hover{color:var(--accent-dark);}

.filter-reihe{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.filter{
  padding:9px 20px;border-radius:999px;
  border:1px solid var(--line);font-size:14.5px;font-weight:600;
  background:#fbf6ea;
}
.filter:hover{border-color:var(--accent);}
.filter.aktiv{background:var(--accent);border-color:var(--accent);color:#241405;}

.beitragsbild{
  width:100%;height:auto;border-radius:16px;
  margin-bottom:32px;border:1px solid var(--line);
}

.fakten{
  display:flex;gap:40px;flex-wrap:wrap;
  padding:22px 0;margin-bottom:28px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.fakten div{display:flex;flex-direction:column;gap:3px;}
.fakten span{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);}
.fakten strong{font-size:18px;}

.beitrag-meta{
  font-size:14px;color:var(--text-muted);
  margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);
}
.admin-hilfe{font-size:14.5px;color:var(--text-muted);}

/* ===== Kommentare (öffentlich) ===== */
.kommentare{margin-top:56px;padding-top:44px;border-top:1px solid var(--line);}
.kommentare h2{font-size:24px;font-weight:800;margin:0 0 24px;display:flex;align-items:center;gap:10px;}
.kommentar-anzahl{
  font-size:13px;font-weight:700;background:var(--bg-section);
  color:var(--text-muted);padding:2px 10px;border-radius:999px;
}
.kommentar-liste{list-style:none;margin:0 0 36px;padding:0;display:flex;flex-direction:column;gap:20px;}
.kommentar-liste li{background:#fbf6ea;border:1px solid var(--line);border-radius:14px;padding:18px 22px;}
.kommentar-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.kommentar-kopf strong{font-size:15px;}
.kommentar-kopf time{font-size:12.5px;color:var(--text-muted);}
.kommentar-liste p{margin:0;font-size:15px;line-height:1.65;color:var(--text-dark);}

.kommentar-form{
  background:var(--bg-section);border-radius:16px;
  padding:28px;display:flex;flex-direction:column;gap:18px;
  max-width:640px;
}
.kommentar-form h3{margin:0;font-size:18px;}
.kommentar-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14.5px;}
.kommentar-form input[type="text"],
.kommentar-form input[type="email"],
.kommentar-form textarea{
  font:inherit;padding:11px 13px;border:1px solid #cfc3aa;border-radius:9px;
  background:#fff;width:100%;color:var(--text-dark);
}
.kommentar-form textarea{resize:vertical;line-height:1.55;}
.kommentar-form input:focus,.kommentar-form textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}

/* Honeypot: für Menschen unsichtbar, für Bots im Quelltext vorhanden */
.hp-feld{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== Kontaktformular (öffentlich) – Entwurf A: Warm & aufgeräumt ===== */
.kontakt-karte{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:38px;box-shadow:0 18px 40px -18px rgba(60,44,24,0.18);
  margin:8px 0 60px;
}
.status-zeile{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-section);border-radius:12px;
  padding:12px 16px;margin-bottom:28px;font-size:14px;color:var(--text-muted);
}
.status-zeile .punkt{width:8px;height:8px;border-radius:50%;background:#3f8a4a;flex-shrink:0;}

.kontakt-form{display:flex;flex-direction:column;gap:20px;}
.kontakt-form label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px;color:var(--text-dark);}
.kontakt-form .hilfe{font-weight:400;color:var(--text-muted);font-size:12.5px;}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form select,
.kontakt-form textarea{
  font:inherit;font-size:15px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:10px;
  background:var(--bg-cream);width:100%;color:var(--text-dark);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(224,138,62,0.18);
}
.kontakt-form textarea{resize:vertical;line-height:1.6;min-height:130px;}
.kontakt-form select{
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b6153" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.btn-senden{
  margin-top:8px;padding:15px 30px;border-radius:999px;border:none;
  background:var(--accent);color:#241405;font-weight:700;font-size:15.5px;
  cursor:pointer;align-self:flex-start;transition:transform .15s ease;
}
.btn-senden:hover{transform:translateY(-1px);}

/* ===== Fix: feld-reihe fehlte auf der öffentlichen Seite (Kontaktformular) ===== */
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){
  .feld-reihe{grid-template-columns:1fr;}
}

/* ===== Fix: Hinweis-Boxen (Erfolg/Fehler) fehlten auf der öffentlichen Seite ===== */
.hinweis{padding:14px 18px;border-radius:10px;margin-bottom:22px;font-size:14.5px;line-height:1.6;}
.hinweis.ok{background:#dff0d8;color:#2e5c17;border-left:3px solid #6aa832;}
.hinweis.fehler{background:#f8d7d5;color:#7d2620;border-left:3px solid #b03a2e;}
.hinweis.warn{background:rgba(224,138,62,0.16);color:#7a4b1c;border-left:3px solid var(--accent);}

/* ===== Such-Icon im Header ===== */
.such-link{display:inline-flex;align-items:center;padding:4px 0 4px 4px !important;border:none !important;}
.such-link svg{width:19px;height:19px;color:var(--text-dark);}
.such-link:hover svg{color:var(--accent-dark);}

/* ===== Instagram-Link im Footer ===== */
.insta-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;font-size:14px;color:#e8dcc6;font-weight:600;
}
.insta-link svg{width:18px;height:18px;flex-shrink:0;}
.insta-link:hover{color:var(--accent);}

/* ===== Symbole: Sterne & Kurven (Anzeige) ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sym-leiste{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;}
.sym{display:block;}

/* ===== Symbole zum Anklicken (Formulare) ===== */
.symbol-wahl-wrap{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;}
.symbol-wahl{display:inline-flex;flex-direction:row-reverse;gap:2px;}
.symbol-wahl input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.symbol-wahl label{
  cursor:pointer;padding:5px;border-radius:9px;display:inline-flex;line-height:0;
  transition:transform .12s ease, background .12s ease;
}
.symbol-wahl label:hover{transform:scale(1.12);background:rgba(224,138,62,0.10);}
.symbol-wahl input:focus-visible + label{outline:2px solid var(--accent);outline-offset:1px;}

/* Sterne: Füllung */
.symbol-wahl-stern label svg path{fill:#d6ccb8;transition:fill .12s ease;}
.symbol-wahl-stern input:checked ~ label svg path{fill:#e08a3e;}
.symbol-wahl.symbol-wahl-stern:hover label svg path{fill:#d6ccb8;}
.symbol-wahl.symbol-wahl-stern label:hover svg path,
.symbol-wahl.symbol-wahl-stern label:hover ~ label svg path{fill:#e08a3e;}

/* Kurven: Linienfarbe */
.symbol-wahl-kurve label svg path{stroke:#d6ccb8;transition:stroke .12s ease;}
.symbol-wahl-kurve input:checked ~ label svg path{stroke:#e08a3e;}
.symbol-wahl.symbol-wahl-kurve:hover label svg path{stroke:#d6ccb8;}
.symbol-wahl.symbol-wahl-kurve label:hover svg path,
.symbol-wahl.symbol-wahl-kurve label:hover ~ label svg path{stroke:#e08a3e;}

.symbol-wahl-text{font-size:14px;font-weight:600;color:var(--text-muted);min-width:110px;}
.symbol-wahl-reset{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13px;color:var(--text-muted);font-weight:400;
}
.symbol-wahl-reset input{margin:0;}

/* ===== Einschätzung der Redaktion (Routenseite) ===== */
.einschaetzung-anzeige{
  background:#fbf6ea;border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;margin:-8px 0 28px;
}
.einschaetzung-kopf{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;
}
.einschaetzung-werte{display:flex;flex-wrap:wrap;gap:14px 40px;}
.einschaetzung-wert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.einschaetzung-wert > span:first-child{font-size:14px;color:var(--text-muted);min-width:92px;}
.einschaetzung-wert strong{font-size:14.5px;}

/* ===== Karten: Länge + Leserbewertung, Einschätzung ===== */
.card-km{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.card-einschaetzung{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;}
.ce-item{display:inline-flex;align-items:center;gap:7px;}
.ce-item small{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);}
.blog-read{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}

.leser-kurz{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--text-dark);white-space:nowrap;}
.leser-kurz strong{font-weight:700;}
.leser-kurz-anzahl{color:var(--text-muted);font-weight:400;}

/* ===== Bewertungsbereich (Routen & Berichte) ===== */
.bewertung-box{
  display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:28px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;margin:0 0 8px;
  box-shadow:0 14px 34px -20px rgba(60,44,24,0.20);
}
.bewertung-stand{display:flex;flex-direction:column;gap:6px;padding-right:28px;border-right:1px solid var(--line);}
.bewertung-label{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-muted);}
.bewertung-schnitt{display:flex;align-items:center;gap:10px;}
.bewertung-schnitt strong{font-size:34px;font-weight:800;line-height:1;letter-spacing:-1px;}
.bewertung-anzahl{font-size:13.5px;color:var(--text-muted);}
.bewertung-form{display:flex;flex-direction:column;gap:10px;justify-content:center;}
.bewertung-frage{font-weight:700;font-size:16px;}
.bewertung-form.wird-gesendet{opacity:.6;pointer-events:none;}

/* ===== Tipps: „War hilfreich" ===== */
.hilfreich-form{margin-top:18px;}
.hilfreich-btn{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;font-weight:600;color:var(--text-dark);
  background:var(--bg-cream);border:1.5px solid var(--line);border-radius:999px;
  padding:8px 16px;cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
button.hilfreich-btn:hover{border-color:var(--accent);background:#fff;}
.hilfreich-btn svg path{fill:#b3a78f;}
button.hilfreich-btn:hover svg path{fill:#e08a3e;}
.hilfreich-btn.ist-markiert{cursor:default;border-color:rgba(224,138,62,0.45);background:rgba(224,138,62,0.10);}
.hilfreich-btn.ist-markiert svg path{fill:#e08a3e;}

/* ===== Routenübersicht: Filter + Sortierung ===== */
.routen-werkzeuge{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px 24px;flex-wrap:wrap;margin-bottom:14px;
}
.sortier-form{display:flex;align-items:center;gap:10px;}
.sortier-form label{font-size:14px;font-weight:600;color:var(--text-muted);}
.sortier-form select{
  font:inherit;font-size:14.5px;padding:9px 38px 9px 14px;
  border:1.5px solid var(--line);border-radius:999px;background-color:#fbf6ea;color:var(--text-dark);
  appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b6153" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat;background-position:right 13px center;
}
.sortier-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,138,62,0.18);}
.routen-anzahl{font-size:14px;color:var(--text-muted);margin:0 0 30px;}

/* ===== Handy ===== */
@media (max-width:680px){
  .bewertung-box{grid-template-columns:1fr;gap:20px;padding:22px 20px;}
  .bewertung-stand{padding-right:0;padding-bottom:18px;border-right:none;border-bottom:1px solid var(--line);}
  .einschaetzung-anzeige{padding:16px 18px;}
  .einschaetzung-werte{flex-direction:column;gap:12px;}
  .routen-werkzeuge{flex-direction:column;align-items:stretch;}
  .sortier-form{justify-content:space-between;}
  .sortier-form select{flex:1;max-width:260px;}
}

/* ===== Feinschliff Handy ===== */
@media (max-width:680px){
  /* Einschätzung: Beschriftung, Symbole und Text sauber in einer Zeile */
  .einschaetzung-wert{gap:8px;flex-wrap:nowrap;}
  .einschaetzung-wert > span:first-child{min-width:80px;font-size:13.5px;}
  .einschaetzung-wert strong{font-size:13.5px;white-space:nowrap;}
  /* Filter-Knöpfe kompakter, bei Bedarf seitlich wischbar statt Umbruch */
  .filter-reihe{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:4px;scrollbar-width:none;}
  .filter-reihe::-webkit-scrollbar{display:none;}
  .filter{padding:8px 14px;font-size:14px;white-space:nowrap;flex-shrink:0;}
}

/* =====================================================================
   Update 3: schlanke Karten, Blättern, aufklappbare Tipps, formatierter Text
   ===================================================================== */

/* ---- Karten: festes 16:9-Bild (passt exakt zum Zuschnitt) ---- */
.card-bild-link{position:relative;display:block;overflow:hidden;}
.card-photo{transition:transform .35s ease;}
.card:hover .card-photo{transform:scale(1.03);}
.card-marke{
  position:absolute;left:14px;bottom:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#f6ecdb;background:rgba(33,26,19,0.72);padding:5px 10px;border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.karte-kompakt .card-body{padding:22px 24px 22px;gap:0;}
.karte-kompakt h3{font-size:20px;margin:0 0 8px;}
.card-anriss{
  font-size:15px !important;color:var(--text-muted);line-height:1.6;margin:0 0 16px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-infozeile{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-size:13.5px;color:var(--text-muted);
  padding-top:14px;border-top:1px solid var(--line);margin-top:auto;
}
.card-infozeile > span:first-child{color:var(--text-dark);font-weight:700;}
.info-symbol{display:inline-flex;align-items:center;gap:4px;}
.card-infozeile .leser-kurz{margin-left:auto;}

/* Aufklappbare Details */
.card-details{margin-top:12px;font-size:14px;}
.card-details summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--text-muted);padding:2px 0;user-select:none;
}
.card-details summary::-webkit-details-marker{display:none;}
.card-details summary::after{
  content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.card-details[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.card-details summary:hover{color:var(--accent-dark);}
.card-details-inhalt{display:flex;flex-direction:column;gap:8px;padding:12px 0 2px;}
.dz{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dz > span:first-child{min-width:86px;color:var(--text-muted);font-size:13px;}
.dz em{font-style:normal;font-weight:600;color:var(--text-dark);font-size:13.5px;}
.dz-stopps{align-items:flex-start;}
.dz-stopps em{font-weight:400;line-height:1.5;flex:1;min-width:0;}

.card-mehr{
  align-self:flex-start;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--accent-dark);
  display:inline-flex;align-items:center;gap:6px;
}
.card-mehr span{transition:transform .15s ease;}
.card-mehr:hover span{transform:translateX(3px);}

/* ---- Tipps als aufklappbare Einträge ---- */
.tipps-raster{align-items:start;}
.tip-card{padding:0;}
.tipp-details summary{list-style:none;cursor:pointer;display:block;padding:24px 24px 18px;}
.tipp-details summary::-webkit-details-marker{display:none;}
.tipp-kopf{display:flex;align-items:flex-start;gap:12px;}
.tipp-kopf .tip-icon{margin-top:4px;}
.tipp-titel-block{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.tipp-kategorie{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);}
.tipp-titel{font-size:18px;font-weight:800;line-height:1.3;color:var(--text-dark);}
.tipp-pfeil{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease, border-color .15s ease;
}
.tipp-pfeil::after{
  content:'';width:7px;height:7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;
}
.tipp-details[open] .tipp-pfeil::after{transform:rotate(-135deg) translate(-1px,-1px);}
.tipp-details summary:hover .tipp-pfeil{border-color:var(--accent);background:rgba(224,138,62,0.10);}
.tipp-anriss{display:block;margin-top:12px;font-size:15px;line-height:1.6;color:var(--text-muted);}
.tipp-details[open] .tipp-anriss{display:none;}
.tipp-inhalt{padding:0 24px 8px;font-size:15.5px;}
.tip-card .hilfreich-form{margin:0;padding:0 24px 22px;}

/* ---- Seitenzahlen ---- */
.seiten-nav{display:flex;justify-content:center;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:44px;}
.seiten-zahlen{display:flex;align-items:center;gap:6px;}
.seiten-zahl{
  min-width:40px;height:40px;padding:0 10px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;border:1.5px solid var(--line);background:#fbf6ea;
}
a.seiten-zahl:hover{border-color:var(--accent);}
.seiten-zahl.aktiv{background:var(--accent);border-color:var(--accent);color:#241405;}
.seiten-luecke{color:var(--text-muted);padding:0 2px;}
.seiten-pfeil{font-weight:700;font-size:15px;color:var(--accent-dark);padding:8px 4px;}
.seiten-pfeil.inaktiv{color:#c4b8a2;cursor:default;}

/* ---- Vorschau-Balken für die Redaktion ---- */
.vorschau-banner{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;
  background:var(--bg-dark);color:#f6ecdb;padding:12px 40px;font-size:14px;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.vorschau-banner strong{color:var(--accent);}
.vorschau-banner a{color:#f6ecdb;font-weight:700;border-bottom:1px solid rgba(246,236,219,0.4);white-space:nowrap;}

/* ---- Titelbild auf Route/Bericht: gleiches 16:9 wie der Zuschnitt ---- */
.beitragsbild{aspect-ratio:16/9;object-fit:cover;height:auto;}

/* ---- Formatierter Fließtext ---- */
.prose h2{font-size:26px;line-height:1.25;margin:44px 0 14px;letter-spacing:-.3px;}
.prose h3{font-size:20px;line-height:1.3;margin:32px 0 10px;color:var(--text-dark);font-weight:800;}
.prose > :first-child{margin-top:0;}
.prose strong{color:var(--text-dark);}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px;}
.prose li{margin-bottom:8px;padding-left:4px;}
.prose ul li::marker{color:var(--accent);}
.prose ol li::marker{color:var(--accent-dark);font-weight:700;}
.prose blockquote{
  margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--accent);
  font-size:19px;line-height:1.6;font-style:italic;color:var(--text-dark);
}
.prose .hinweis-box{
  background:rgba(224,138,62,0.11);border-left:4px solid var(--accent);
  padding:14px 18px;border-radius:0 12px 12px 0;color:var(--text-dark);margin:0 0 20px;
}
.prose .hinweis-box + .hinweis-box{margin-top:-20px;padding-top:0;border-radius:0 0 12px 0;}
.prose hr{border:none;height:2px;background:var(--line);margin:40px auto;width:60%;}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;}

@media (max-width:680px){
  .karte-kompakt .card-body{padding:18px 18px 18px;}
  .tipp-details summary{padding:20px 18px 14px;}
  .tipp-inhalt{padding:0 18px 6px;}
  .tip-card .hilfreich-form{padding:0 18px 18px;}
  .seiten-nav{gap:10px;}
  .seiten-pfeil{font-size:14px;}
  .seiten-zahl{min-width:36px;height:36px;font-size:14px;}
  .vorschau-banner{padding:10px 18px;font-size:13px;}
  .prose h2{font-size:22px;}
  .prose blockquote{font-size:17px;}
}

/* Aufgeklappte Details strecken nicht die Nachbarkarten; geschlossene Karten bleiben gleich hoch */
.grid3:has(.karte-kompakt){align-items:start;}
.card-anriss{min-height:3.2em;}

/* =====================================================================
   Update 4: GPS-Track, Verknüpfungen, ähnliche Routen
   ===================================================================== */

/* ---- Streckenverlauf ---- */
.strecke{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px 26px 20px;margin:0 0 36px;box-shadow:0 14px 34px -22px rgba(60,44,24,0.22);
}
.strecke-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.strecke-kopf h2{font-size:20px;margin:0;}
.strecke-legende{display:flex;gap:16px;font-size:13px;color:var(--text-muted);}
.strecke-legende span{display:inline-flex;align-items:center;gap:6px;}
.strecke-legende i{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);}
.pkt-start{background:#3f8a4a;}
.pkt-ziel{background:#211a13;}
.strecke-bild{background:#fbf6ea;border-radius:12px;overflow:hidden;}
.gpx-verlauf{display:block;width:100%;height:auto;max-height:340px;}
.strecke-profil{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:18px;align-items:stretch;}
.profil-achse{display:flex;flex-direction:column;justify-content:space-between;font-size:11.5px;color:var(--text-muted);text-align:right;padding:2px 0;}
.profil-grafik{height:110px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);}
.gpx-profil{display:block;width:100%;height:100%;}
.profil-fuss{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);margin:6px 0 0 44px;}
.strecke-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.strecke-knoepfe .btn{padding:12px 22px;font-size:14.5px;}
.btn-ghost-hell{background:#fbf6ea;border-color:var(--line);color:var(--text-dark);}
.btn-ghost-hell:hover{border-color:var(--accent);}
.strecke-hinweis{font-size:12.5px;line-height:1.6;color:var(--text-muted);margin:14px 0 0;}

/* ---- GPX-Kennzeichen auf Karten ---- */
.gpx-marke{
  font-size:10.5px !important;font-weight:800 !important;letter-spacing:.8px;color:var(--accent-dark) !important;
  border:1.5px solid rgba(224,138,62,0.5);border-radius:5px;padding:1px 5px;line-height:1.4;
}

/* ---- Verknüpfungen Bericht ↔ Route ---- */
.zugehoerig{margin:36px 0 8px;display:flex;flex-direction:column;gap:10px;}
.zugehoerig-kopf{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-muted);}
.zugehoerig-link{
  display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-radius:12px;
  background:#fbf6ea;border:1px solid var(--line);transition:border-color .15s ease;
}
.zugehoerig-link:hover{border-color:var(--accent);}
.zugehoerig-link strong{color:var(--text-dark);}
.zugehoerig-link span{font-size:14px;color:var(--text-muted);}
.verweis{
  display:flex;align-items:center;gap:18px;padding:12px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -20px rgba(60,44,24,0.3);
  transition:border-color .15s ease, transform .15s ease;
}
.verweis:hover{border-color:var(--accent);transform:translateY(-1px);}
.verweis img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex-shrink:0;}
.verweis-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.verweis-kopf{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--accent-dark);}
.verweis-text strong{font-size:17px;color:var(--text-dark);}
.verweis-info{font-size:13.5px;color:var(--text-muted);}
.verweis-pfeil{font-size:22px;color:var(--accent-dark);padding-right:8px;}

/* ---- Ähnliche Routen ---- */
.aehnliche .section-head{margin-bottom:34px;}

@media (max-width:680px){
  .strecke{padding:18px 16px 16px;}
  .strecke-knoepfe .btn{flex:1 1 100%;justify-content:center;}
  .profil-grafik{height:90px;}
  .verweis{gap:12px;padding:10px;}
  .verweis img{width:96px;}
  .verweis-text strong{font-size:15.5px;}
  .verweis-pfeil{display:none;}
}

/* ---- Fehlerseite 404 ---- */
.suche-404{display:flex;flex-direction:column;gap:10px;}
.suche-404 label{font-weight:700;}
.suche-404 div{display:flex;gap:10px;flex-wrap:wrap;}
.suche-404 input{
  flex:1;min-width:200px;font:inherit;padding:12px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--text-dark);
}
.suche-404 input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,138,62,0.18);}