/* ==========================================================
   start.css: nur Startseite
   Erkennungsfrage, Rundgang, Fünf Wege.
   ========================================================== */

/* --- Erkennungsfrage --- */
.erkennungsfrage{border-left:4px solid #365F91;padding:22px 0 22px 26px;margin:34px 0 30px}
.erkennungsfrage p{font-size:1.32rem;line-height:1.5;color:#365F91;margin:0}
@media(max-width:700px){.erkennungsfrage p{font-size:1.12rem}}
/* --- V6.2 Vorschlag: Rundgang statt vollständiger Beispiel-Auswertung --- */
.rundgang{background:#fff;border:1px solid var(--linie);border-radius:3px;margin-top:26px;overflow:hidden}
.rg-kopf{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--linie);background:#FAFCFE}
.rg-kopf b{color:var(--blau);font-size:16px}
.rg-kopf span{font-size:13px;color:var(--grau);letter-spacing:.04em}
.rg-buehne{position:relative;min-height:390px}
.rg-folie{display:none;grid-template-columns:1fr 1.15fr;gap:30px;padding:28px 28px 22px;align-items:start}
.rg-folie.aktiv{display:grid;animation:rgein .35s ease}
@keyframes rgein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.rg-folie .nr{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:bold;display:block;margin-bottom:8px}
.rg-folie h4{font-size:21px;color:var(--blau);line-height:1.3;margin-bottom:12px}
.rg-folie p{font-size:15.5px;margin-bottom:10px}
.rg-bild{background:var(--bg-hell);border:1px solid var(--linie);border-radius:3px;padding:18px;font-size:13.5px}
.rg-fuss{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-top:1px solid var(--linie)}
.rg-punkte{display:flex;gap:8px}
.rg-punkte button{width:10px;height:10px;border-radius:50%;border:none;background:#C9D6E2;cursor:pointer;padding:0}
.rg-punkte button.aktiv{background:var(--blau);width:26px;border-radius:5px}
.rg-nav button{background:#fff;border:2px solid var(--linie);color:var(--blau);font-weight:bold;font-size:14px;padding:8px 16px;border-radius:3px;cursor:pointer;margin-left:8px;font-family:inherit}
.rg-nav button:hover{border-color:var(--cyan);color:var(--cyan)}
.rg-nav button:disabled{opacity:.35;cursor:default}
/* Schwärzung: sichtbar zurückgehalten, nicht versteckt */
.zensur{display:inline-block;height:.78em;border-radius:2px;vertical-align:middle;
  background:repeating-linear-gradient(90deg,#8FA3B5 0 6px,#9DB0C1 6px 10px);opacity:.75}
.zensur-zeile{height:9px;border-radius:2px;margin:7px 0;background:repeating-linear-gradient(90deg,#B9C7D4 0 7px,#C6D2DD 7px 11px)}
.schloss{font-size:11.5px;color:var(--grau);margin-top:10px;display:flex;gap:6px;align-items:center}
.schloss:before{content:"";width:9px;height:9px;border:2px solid #8FA3B5;border-radius:2px;display:inline-block}
.profil div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #DCE5EE}
.profil div:last-child{border-bottom:none}
.profil span{color:var(--grau)} .profil b{color:var(--blau)}
.heat{display:grid;grid-template-columns:54px repeat(8,1fr);gap:3px;align-items:center}
.heat i{aspect-ratio:1;border-radius:2px;display:block}
.heat em{font-style:normal;font-size:11px;color:var(--grau)}
.befund .seite{background:#fff;border:1px solid var(--linie);border-radius:3px;padding:11px 13px;margin-bottom:8px}
.befund .seite small{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--grau);display:block;margin-bottom:4px}
.chip{display:inline-block;font-size:11.5px;font-weight:bold;padding:3px 9px;border-radius:2px;margin-top:4px}
.chip.rot{background:#F6E3D6;color:#A04A12} .chip.blau{background:#DCEBF7;color:var(--blau)}
.uebergang{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.uebergang div{background:#fff;border:1px solid var(--linie);border-radius:3px;padding:10px 4px;font-size:12px;color:var(--blau);font-weight:bold}
.uebergang .naht{grid-column:span 4;height:26px;position:relative}
.hebel div{background:#fff;border:1px solid var(--linie);border-radius:3px;padding:10px 12px;margin-bottom:8px;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center}
.hebel b{color:#fff;background:var(--blau);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px}
.hebel small{font-size:11.5px;color:var(--grau);white-space:nowrap}
.paket div{background:#fff;border:1px solid var(--linie);border-left:3px solid var(--cyan);padding:10px 13px;margin-bottom:8px}
.paket div b{color:var(--blau);display:block;font-size:14.5px}
@media(max-width:860px){.rg-folie{grid-template-columns:1fr;gap:16px;padding:22px 18px}.rg-buehne{min-height:0}.rg-kopf,.rg-fuss{padding:12px 16px}.rg-fuss{flex-wrap:wrap;gap:12px}.rg-nav{display:flex;gap:6px;margin-left:auto}.rg-nav button{padding:7px 12px;margin-left:0}}
/* --- Aufklappen: Ergänzung Startseite --- */
.danach{margin-top:40px}
.danach h3{color:var(--blau);font-size:19px;margin-bottom:4px}
/* --- V6.4: Fünf Wege klickbar --- */
.wege-hinweis{font-size:14.5px;color:var(--grau);margin:22px 0 0}
.wege{margin-top:10px;font-size:16px}
.wege .kz,.wege summary{display:grid;grid-template-columns:1.05fr 1.5fr 1.9fr 34px}
.wege .kz{background:var(--blau);color:#fff;font-weight:bold;font-size:15px}
.wege .kz span{padding:13px 16px}
details.weg{border-bottom:1px solid var(--linie)}
details.weg>summary{list-style:none;cursor:pointer}
details.weg>summary::-webkit-details-marker{display:none}
details.weg>summary span{padding:15px 16px}
details.weg>summary span:first-child{font-weight:bold;color:var(--blau)}
details.weg>summary .pl{color:var(--cyan);font-size:24px;font-weight:bold;padding:9px 6px;text-align:center}
details.weg>summary .pl:before{content:"+"} details.weg[open]>summary .pl:before{content:"\2013"}
details.weg>summary:hover{background:#F6FAFD}
details.weg[open]>summary{background:var(--bg-hell)}
details.weg .wenn{margin:18px 16px;padding:12px 18px;border-left:3px solid var(--cyan);background:#fff;animation:rgein .3s ease}
details.weg .wenn b{color:var(--blau)}
@media(max-width:700px){
  .wege .kz{display:none}
  .wege summary{grid-template-columns:1fr;position:relative;padding-right:30px}
  details.weg>summary span{padding:6px 14px}
  details.weg>summary span:first-child{padding-top:14px;font-size:17px}
  details.weg>summary span[data-l]:before{content:attr(data-l);display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);margin-bottom:1px}
  details.weg>summary span[data-l]:last-of-type{padding-bottom:14px}
  details.weg>summary .pl{position:absolute;right:4px;top:6px}
}
/* --- V6.5: Brücke, Unterschied-Satz, Einstiege, Über mich --- */
.bruecke{font-size:17px;color:var(--blau);font-style:italic;margin-bottom:14px}
.unterschied{margin-top:30px;padding:22px 26px;background:var(--bg-hell);border-left:4px solid var(--blau);
             font-size:18.5px;color:var(--navy);max-width:760px}
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:start}
.ueber img{width:100%;height:auto;display:block;border-radius:3px}
.ueber .retro{margin-top:6px}
@media(max-width:860px){.ueber{grid-template-columns:1fr;gap:26px}.ueber picture{max-width:420px}}
.stationen{list-style:none;margin:18px 0 0}
.stationen li{padding:14px 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:220px 1fr;gap:18px}
.stationen b{color:var(--blau)}
@media(max-width:700px){.stationen li{grid-template-columns:1fr;gap:4px}}
.haltung{font-size:19px;font-style:italic;color:var(--navy);border-left:4px solid var(--blau);padding:6px 0 6px 20px;margin:24px 0}
.preis{margin-top:22px}
.rg-muster{display:inline-block;background:var(--blau);color:#fff;font-size:11.5px!important;letter-spacing:.06em!important;text-transform:uppercase;padding:4px 9px;border-radius:3px;margin-left:auto}
.rg-hinweis{padding:0 24px 16px;margin:0;font-size:15px;color:var(--navy)}
/* Hero: Foto vollflächig: Fluss von links nach rechts (ruhig, Engstelle mit Stromschnelle, ruhig).
   Der Text steht im dunklen Auslauf oben, der Fluss bleibt darunter frei sichtbar. */
.hero[data-v="voll"]{--bh:clamp(300px,38vw,680px);position:relative;overflow:hidden;background:var(--navy);
  padding-bottom:calc(var(--bh)*.68 + 24px)}
.hero[data-v="voll"]::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--bh);
  background:url(../img/hero-fluss-foto-voll.webp) 50% 50%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
.hero[data-v="voll"] .hero-grid{position:relative;z-index:1}
.hero[data-v="voll"] h1{color:#fff}
.hero[data-v="voll"] .sub{color:#E3ECF4}
.hero[data-v="voll"] .btn-1{background:var(--cyan);border-color:var(--cyan);color:#0F2233}
.hero[data-v="voll"] .btn-1:hover{background:#4FB8E3;border-color:#4FB8E3}
.hero[data-v="voll"] .btn-2{color:#fff;border-color:rgba(255,255,255,.7)}
.hero[data-v="voll"] .btn-2:hover{background:#fff;color:var(--navy)}
@media(max-width:700px){.hero[data-v="voll"]::before{background-position:28% 50%}}
/* Schaubild "Fluss mit Verlust" im Bereich unter dem Hero */
.schaubild{margin:34px 0 8px}
.schaubild img{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--linie);border-radius:3px;padding:18px}
@media(min-width:900px){.schaubild{margin-left:-56px;margin-right:-56px}}
.schaubild figcaption{font-size:13.5px;color:var(--grau);margin-top:10px;text-align:center;font-style:italic}