/* USC Kassel — Basis-Stylesheet, portiert aus dem abgenommenen Klick-Prototyp (Phase B).
   Prototyp-spezifische Teile (.protobar, .view-Routing) werden beim Template-Bau entfernt.
   Quelle/Referenz: https://claude.ai/code/artifact/4775f873-5a5c-427f-a6f2-e79aab318f23 */
:root{
    --tief:#1B2D3E;
    --tief-2:#15222E;
    --petrol:#2E6E8E;
    --petrol-deep:#1F4E66;
    --vereinsblau:#005CA9;
    --vb-deep:#00477F;
    --signal:#E05A28;
    --signal-dark:#C74A1E;
    --nebel:#F4F6F7;
    --card:#FFFFFF;
    --line:#D8DEE2;
    --ink:#182633;
    --slate:#4A5B69;
    --hell:#EDF2F4;
    --disp:"Avenir Next Condensed","AvenirNextCondensed-DemiBold","Helvetica Neue Condensed","Arial Narrow",sans-serif;
    --body:"Avenir Next","Avenir",Seravek,"Segoe UI",system-ui,sans-serif;
  }
  html{background:var(--nebel);scroll-behavior:smooth;}
  body{margin:0;font-family:var(--body);color:var(--ink);line-height:1.55;background:var(--nebel);-webkit-font-smoothing:antialiased;}
  *,*::before,*::after{box-sizing:border-box;}
  img{max-width:100%;}
  a{color:var(--vereinsblau);}
  h1,h2,h3{text-wrap:balance;}

  .wrap{max-width:1080px;margin:0 auto;padding:0 22px;}

  /* ---------- Prototyp-Leiste ---------- */
  .protobar{background:var(--tief-2);color:#8FA6B2;font-size:12px;letter-spacing:.06em;padding:6px 0;}
  .protobar .wrap{display:flex;gap:18px;flex-wrap:wrap;}
  .protobar b{color:#D5E2E8;font-weight:600;}

  /* ---------- Header ---------- */
  header.site{position:sticky;top:0;z-index:50;background:rgba(244,246,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  header.site .wrap{display:flex;align-items:center;gap:26px;height:64px;}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto;}
  .logo svg{display:block;}
  .usclogo{fill:currentColor;}
  .usclogo .cls-1{fill:none;}
  nav.main{display:flex;gap:4px;}
  nav.main a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:4px;}
  nav.main a:hover{background:#E4EAED;}
  nav.main a.active{color:var(--vb-deep);box-shadow:inset 0 -2px 0 var(--vereinsblau);border-radius:4px 4px 0 0;}
  .navcta{font-size:14px;font-weight:700;background:var(--signal);color:#fff !important;padding:9px 16px;border-radius:4px;text-decoration:none;}
  .navcta:hover{background:var(--signal-dark);}
  .burger{display:none;}

  /* ---------- Hero ---------- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(168deg,#16283C 0%,#1B416B 48%,#0B5B9E 100%);color:var(--hell);}
  .hero .water{position:absolute;inset:0;pointer-events:none;}
  .hero .water i{position:absolute;left:-30%;right:-30%;height:46%;bottom:-6%;
    background:
      radial-gradient(60% 120% at 30% 0%,rgba(127,182,210,.16) 0%,rgba(127,182,210,0) 60%),
      repeating-linear-gradient(96deg,rgba(159,199,220,0) 0 120px,rgba(159,199,220,.10) 160px 210px,rgba(159,199,220,0) 260px 420px);
    transform:skewY(-2.2deg);
    animation:drift 26s linear infinite;}
  .hero .water i:nth-child(2){bottom:-18%;opacity:.6;animation-duration:38s;animation-direction:reverse;
    background:repeating-linear-gradient(84deg,rgba(224,90,40,0) 0 260px,rgba(224,122,80,.05) 300px 340px,rgba(224,90,40,0) 400px 700px),
      repeating-linear-gradient(94deg,rgba(159,199,220,0) 0 90px,rgba(159,199,220,.07) 120px 150px,rgba(159,199,220,0) 210px 330px);}
  .hero .water i:nth-child(3){height:2px;bottom:46%;opacity:.35;transform:none;
    background:linear-gradient(90deg,transparent,rgba(197,224,236,.5) 30% 70%,transparent);animation:none;}
  @keyframes drift{from{background-position:0 0;}to{background-position:1200px 0;}}

  .hero .wrap{position:relative;padding:88px 22px 64px;max-width:1080px;}
  .hero .eyebrow{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9FC0D2;margin:0 0 14px;}
  .hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6.4vw,68px);line-height:1.02;margin:0 0 18px;max-width:14ch;}
  .hero p.sub{font-size:clamp(16px,2vw,19px);color:#C9D9E2;max-width:52ch;margin:0 0 28px;}
  .btnrow{display:flex;gap:12px;flex-wrap:wrap;}
  .btn{display:inline-block;font-weight:700;font-size:16px;padding:13px 24px;border-radius:5px;text-decoration:none;border:0;cursor:pointer;font-family:var(--body);}
  .btn.prim{background:var(--signal);color:#fff;}
  .btn.prim:hover{background:var(--signal-dark);}
  .btn.ghost{background:transparent;color:var(--hell);border:1.5px solid #7FA3B8;}
  .btn.ghost:hover{border-color:#C5E0EC;}
  .btn.sec{background:transparent;color:var(--tief);border:1.5px solid var(--tief);}
  .btn.sec:hover{background:#E4EAED;}
  .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--vereinsblau);outline-offset:2px;}

  /* Revierdaten-Zeile */
  .revierdaten{background:var(--tief-2);color:#9FB8C6;font-size:13.5px;}
  .revierdaten .wrap{display:flex;gap:8px 30px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;align-items:baseline;}
  .revierdaten b{color:#D5E2E8;font-weight:600;font-variant-numeric:tabular-nums;}
  .revierdaten .lab{letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700;color:#6E8797;}
  .revierdaten small{display:block;font-size:11px;color:#6E8797;font-variant-numeric:tabular-nums;}
  /* Dezent unterstrichen statt Pfeil — ein ↗ neben Windrichtung oder Pegel
     liest sich sonst wie eine Richtungs- oder Trendangabe. */
  .revierdaten a{color:#B9CDD9;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:rgba(185,205,217,.35);}
  .revierdaten a:hover{text-decoration-color:currentColor;}
  .revierdaten .quelle{margin-left:auto;font-size:11px;color:#5D7484;}
  @media (max-width:620px){
    .revierdaten .wrap{gap:6px 20px;}
    .revierdaten .quelle{margin-left:0;flex-basis:100%;}
  }

  /* ---------- Sections ---------- */
  section.band{padding:58px 0 30px;}
  section.band.tint{background:#E4ECF3;}
  .band h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,36px);margin:0 0 6px;color:var(--tief);}
  .band .lede{color:var(--slate);margin:0 0 26px;max-width:62ch;font-size:16.5px;}
  .kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vb-deep);margin:0 0 8px;}

  /* Kurskarten */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:10px;}
  .kcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;}
  .kcard .typ{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-deep);}
  .kcard h3{font-family:var(--disp);font-size:23px;font-weight:700;margin:0;color:var(--tief);}
  .kcard .meta{font-size:14px;color:var(--slate);display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums;}
  .kcard .platz{font-size:13px;font-weight:600;color:#3E7A52;}
  .kcard .platz.knapp{color:var(--signal-dark);}
  .kcard a.klink{margin-top:auto;font-weight:700;font-size:15px;text-decoration:none;color:var(--signal-dark);}
  .kcard a.klink:hover{text-decoration:underline;}
  .fussnote{font-size:12.5px;color:var(--slate);margin:6px 0 0;}

  /* Drei Einstiege */
  .paths{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;}
  .path{border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:8px;text-decoration:none;}
  .path h3{font-family:var(--disp);font-size:24px;font-weight:700;margin:0;}
  .path p{margin:0;font-size:15px;}
  .path .go{margin-top:auto;font-weight:700;font-size:15px;}
  .path.a{background:var(--tief);color:var(--hell);}
  .path.a p{color:#BFD2DC;}
  .path.a .go{color:#F0A583;}
  .path.b{background:var(--card);border:1px solid var(--line);color:var(--ink);}
  .path.b p{color:var(--slate);}
  .path.b .go{color:var(--vereinsblau);}
  .path:hover{transform:translateY(-2px);transition:transform .15s ease;}

  /* Reviere */
  .reviere{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
  .revier{position:relative;border-radius:8px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:var(--hell);text-decoration:none;}
  .revier .ph{position:absolute;inset:0;}
  .revier h3{font-family:var(--disp);font-size:28px;font-weight:700;margin:0 0 4px;position:relative;}
  .revier p{margin:0;font-size:15px;color:#D3E1E8;position:relative;max-width:44ch;}
  .revier .tag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(21,34,46,.55);color:#C9D9E2;padding:4px 9px;border-radius:3px;}
  .ph{background:linear-gradient(160deg,#27506B 0%,#2E6E8E 55%,#3B7E9E 100%);}
  .ph.ostsee{background:linear-gradient(160deg,#1B2D3E 0%,#24455C 60%,#2E5E7A 100%);}
  .ph::after{content:"";position:absolute;inset:0;background:
    radial-gradient(120% 60% at 70% 15%,rgba(237,242,244,.14) 0%,transparent 60%),
    repeating-linear-gradient(92deg,transparent 0 140px,rgba(237,242,244,.05) 170px 200px,transparent 240px 420px);}

  /* Zahlen */
  .fakten{background:#EDF4FA;border-top:1px solid #D5E3EE;border-bottom:1px solid #D5E3EE;padding:26px 0;}
  .faktenleiste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);}
  .faktenleiste li{padding:6px 28px 6px 0;margin-right:28px;border-right:1px solid #C9DAE7;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:baseline;}
  .faktenleiste li:last-child{border-right:0;margin-right:0;padding-right:0;}
  .faktenleiste b{grid-row:1/3;font-family:var(--disp);font-weight:700;font-size:clamp(34px,3.4vw,46px);color:var(--vereinsblau);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .faktenleiste span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tief);}
  .faktenleiste small{font-size:13px;color:var(--slate);line-height:1.4;}
  @media (max-width:900px){.faktenleiste{grid-template-columns:1fr 1fr;row-gap:18px;}.faktenleiste li:nth-child(2){border-right:0;margin-right:0;}}
  @media (max-width:520px){.faktenleiste{grid-template-columns:1fr;}.faktenleiste li{border-right:0;margin-right:0;padding-right:0;}}

  /* Mosaik */
  .mosaik{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:10px;margin-bottom:14px;}
  .mo{position:relative;border-radius:6px;overflow:hidden;display:flex;align-items:flex-end;padding:10px;}
  .mo span{position:relative;font-size:12px;font-weight:600;color:#E6EEF2;text-shadow:0 1px 4px rgba(21,34,46,.6);}
  .mo:nth-child(1){grid-row:span 2;}
  .mo:nth-child(4){grid-row:span 2;}
  .mo .ph{position:absolute;inset:0;}
  .mo:nth-child(2) .ph{background:linear-gradient(150deg,#2B5871,#3B7E9E);}
  .mo:nth-child(3) .ph{background:linear-gradient(150deg,#22415A,#2E6E8E);}
  .mo:nth-child(5) .ph{background:linear-gradient(150deg,#274F68,#356F8C);}
  .mo:nth-child(6) .ph{background:linear-gradient(150deg,#1E3A50,#2A5E7C);}

  /* Termine */
  .termine{display:flex;flex-direction:column;gap:0;margin-bottom:8px;max-width:720px;}
  .termin{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--line);}
  .termin:last-child{border-bottom:0;}
  .termin .dat{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--vereinsblau);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere;hyphens:auto;}
  .termin .was{font-weight:600;}
  .termin .was small{display:block;font-weight:400;color:var(--slate);font-size:13.5px;}
  .termin .gast{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#3E7A52;background:#E4EFE8;padding:3px 8px;border-radius:3px;white-space:nowrap;}

  /* Abschluss / Footer */
  .abschluss{background:var(--vereinsblau);color:#fff;padding:54px 0 46px;}
  .abschluss h2{font-family:var(--disp);font-size:clamp(26px,3.4vw,34px);margin:0 0 8px;}
  .abschluss p{color:#D6E7F5;max-width:56ch;margin:0 0 20px;}
  footer.site{background:var(--tief-2);color:#8FA6B2;font-size:13.5px;padding:26px 0 40px;}
  footer.site .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:baseline;}
  footer.site a{color:#B9CDD9;text-decoration:none;}
  footer.site a:hover{text-decoration:underline;}
  footer.site .uni{width:100%;font-size:12.5px;color:#6E8797;}
  footer.site .quellen{width:100%;font-size:12px;color:#5D7484;max-width:88ch;}
  footer.site .quellen a{color:#7E97A6;}

  /* ---------- Kursseite ---------- */
  .crumb{font-size:13.5px;color:var(--slate);padding:18px 0 0;}
  .crumb a{color:var(--slate);}
  .kurskopf{display:grid;grid-template-columns:1.7fr 1fr;gap:34px;padding:22px 0 40px;align-items:start;}
  .kurskopf h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4.6vw,50px);line-height:1.05;margin:6px 0 14px;color:var(--tief);}
  .kurskopf .lede{font-size:17px;color:var(--slate);margin:0 0 16px;max-width:58ch;}
  .kurskopf .fuerwen{font-size:15.5px;margin:0 0 14px;max-width:58ch;}
  .buchbox{position:sticky;top:84px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--vereinsblau);border-radius:8px;padding:20px;}
  .buchbox .reihe{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;padding:7px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
  .buchbox .reihe:last-of-type{border-bottom:0;}
  .buchbox .reihe b{font-weight:600;}
  .buchbox .btn{width:100%;text-align:center;margin-top:12px;}
  .buchbox .frage{display:block;text-align:center;font-size:14px;margin-top:10px;}
  .eck{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0 30px;}
  .eck div{background:var(--card);padding:14px 16px;}
  .eck .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-deep);margin-bottom:3px;}
  .eck .v{font-size:14.5px;}
  .ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 30px;}
  .ab{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;}
  .ab .n{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--vb-deep);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
  .ab p{margin:0;font-size:14px;color:var(--slate);}
  details.faq{background:var(--card);border:1px solid var(--line);border-radius:6px;margin-bottom:8px;max-width:720px;}
  details.faq summary{cursor:pointer;font-weight:600;padding:13px 16px;list-style:none;display:flex;justify-content:space-between;gap:12px;}
  details.faq summary::after{content:"+";font-family:var(--disp);font-size:20px;color:var(--vereinsblau);}
  details.faq[open] summary::after{content:"–";}
  details.faq p{margin:0;padding:0 16px 14px;color:var(--slate);font-size:14.5px;max-width:64ch;}
  .kontaktkarte{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px;max-width:480px;margin:8px 0 40px;}
  .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(140deg,#2E6E8E,#1F4E66);flex:none;display:flex;align-items:center;justify-content:center;color:#DCE9EF;font-family:var(--disp);font-weight:700;font-size:22px;}
  .kontaktkarte b{display:block;}
  .kontaktkarte small{color:var(--slate);}
  .ctabar{display:none;}

  /* ---------- Anmeldung ---------- */
  .anmeldung{max-width:640px;margin:0 auto;padding:34px 22px 80px;}
  .stepperkopf{margin-bottom:22px;}
  .stepperkopf .kurs{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-deep);}
  .stepperkopf h1{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,38px);margin:4px 0 14px;color:var(--tief);}
  .steps{display:flex;gap:6px;}
  .steps i{flex:1;height:5px;border-radius:3px;background:var(--line);}
  .steps i.done{background:var(--vereinsblau);}
  .steps i.now{background:var(--signal);}
  .steplabel{font-size:13.5px;color:var(--slate);margin-top:8px;font-variant-numeric:tabular-nums;}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:18px;}
  .panel h2{font-family:var(--disp);font-size:24px;margin:0 0 14px;color:var(--tief);}
  .feld{margin-bottom:16px;}
  .feld label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;}
  .feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld input[type=date],.feld select{
    width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid #B9C7CF;border-radius:6px;background:#FBFCFC;color:var(--ink);}
  .feld input:focus,.feld select:focus{border-color:var(--vereinsblau);}
  .feld .hint{font-size:12.5px;color:var(--slate);margin-top:4px;}
  .feld .err{display:none;font-size:13px;color:var(--signal-dark);margin-top:4px;font-weight:600;}
  .feld.invalid input{border-color:var(--signal-dark);}
  .feld.invalid .err{display:block;}
  .feld.ok input{border-color:#3E7A52;}
  .feld .pflicht,.checkzeile .pflicht,.pflichthinweis .pflicht{color:var(--signal-dark);font-weight:700;}
  .pflichthinweis{font-size:13px;color:var(--slate);margin:-6px 0 14px;}
  .checkzeile.invalid{border-color:var(--signal-dark);background:#FDF6F1;}
  .am-fehler{border-left:4px solid var(--signal-dark);background:#FDF6F1;color:var(--ink);font-weight:600;font-size:14px;padding:10px 14px;border-radius:0 8px 8px 0;margin:0 0 16px;}
  .am-fehler[hidden]{display:none;}
  .radio,.checkzeile{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--line);border-radius:8px;margin-bottom:10px;cursor:pointer;background:#FBFCFC;}
  .radio input,.checkzeile input{margin-top:3px;accent-color:var(--vereinsblau);width:18px;height:18px;flex:none;}
  .radio.sel{border-color:var(--vereinsblau);background:#EDF4FA;}
  .radio.aus{opacity:.6;cursor:not-allowed;}
  .radio.gesperrt{opacity:.55;cursor:not-allowed;background:#F3F5F7;}
  .radio.fehlt{border-color:#C74A1E;}
  .radio.fehlt .am-enthalten{color:#C74A1E;}
  .radio .am-enthalten{display:inline;font-weight:400;color:var(--slate);}
  .radio b{display:block;font-size:15px;}
  .radio small{color:var(--slate);font-size:13px;}
  .radio .warte{font-size:13px;font-weight:600;color:var(--vb-deep);}
  .zeile2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .mandat{background:#EFF3F5;border-radius:8px;padding:14px 16px;font-size:13.5px;color:var(--slate);margin:14px 0;}
  .mandat.testbetrieb{background:#FFF6DE;border-left:4px solid #D99A1E;color:#3B2F0E;}
  .mandat b{color:var(--ink);}
  .minderj{display:none;background:#FDF6F1;border:1px solid #EFCDB9;border-radius:8px;padding:14px 16px;margin-bottom:16px;}
  .minderj.zeig{display:block;}
  .minderj h3{margin:0 0 10px;font-size:15px;}
  .sum{font-size:14.5px;}
  .sum dl{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:0 0 16px;}
  .sum dt{color:var(--slate);}
  .sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;}
  .navzeile{display:flex;justify-content:space-between;gap:12px;margin-top:22px;}
  .btn.weiter{background:var(--tief);color:#fff;}
  .btn.weiter:hover{background:#24405A;}
  .btn.zurueck{background:transparent;border:1.5px solid var(--line);color:var(--slate);}
  .bestaetigung{text-align:left;}
  .bestaetigung .haken{width:64px;height:64px;border-radius:50%;background:#3E7A52;color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
  .bestaetigung h2{font-family:var(--disp);font-size:32px;margin:0 0 10px;color:var(--tief);}
  .mono{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:.92em;}

  /* Logo-Entwurf-Kachel */
  .logoschau{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px;}
  .lv{border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;min-height:130px;padding:18px;}
  .lv.hell{background:var(--card);}
  .lv.dunkel{background:var(--tief);}
  .lv.blau{background:var(--vereinsblau);}

  /* Toast */
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--tief-2);color:#DCE9EF;font-size:14px;padding:11px 20px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:99;max-width:90vw;text-align:center;}
  .toast.zeig{opacity:1;transform:translateX(-50%) translateY(0);}

  .view{display:none;}
  .view.aktiv{display:block;}

  @media (prefers-reduced-motion:reduce){
    .hero .water i{animation:none;}
    .path:hover{transform:none;}
    html{scroll-behavior:auto;}
  }
  @media (max-width:860px){
    .cards,.paths,.reviere,.ablauf,.logoschau{grid-template-columns:1fr;}
    .mosaik{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;}
    .kurskopf{grid-template-columns:1fr;}
    .buchbox{position:static;}
    .eck{grid-template-columns:1fr;}
    nav.main{display:none;}
    .navcta{margin-left:auto;}
    .zeile2{grid-template-columns:1fr;}
    .termin{grid-template-columns:78px 1fr;}
    .termin .gast{grid-column:2;}
    .ctabar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 16px;gap:12px;align-items:center;z-index:60;}
    .ctabar .p{font-size:13.5px;color:var(--slate);}
    .ctabar .btn{margin-left:auto;padding:11px 18px;}
    #view-kurs{padding-bottom:74px;}
  }

/* ---------- WordPress-spezifische Anpassungen ---------- */
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;}
nav.main li{margin:0;}
nav.main li.current-menu-item > a{color:var(--vb-deep);box-shadow:inset 0 -2px 0 var(--vereinsblau);border-radius:4px 4px 0 0;}
.kursinhalt > p:first-child{font-size:17px;color:var(--slate);max-width:58ch;}
.kursinhalt p{max-width:58ch;}
.crumb a{color:var(--slate);}

/* Überschriften auf dunklen Flächen — explizit, da theme.json global Tiefwasser setzt */
.hero h1{color:var(--hell);}
.abschluss h2{color:#fff;}
.path.a h3{color:var(--hell);}
.revier h3{color:var(--hell);}

/* ---------- Hero-Video & echte Bildflächen ---------- */
.hero .herovideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .heroscrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,30,46,.84) 0%,rgba(14,30,46,.58) 46%,rgba(16,42,66,.22) 100%);}
@media (prefers-reduced-motion:reduce){.hero .herovideo{display:none;}}
.ph.foto{background-size:cover;background-position:center;}
.ph.foto::after{background:linear-gradient(180deg,rgba(21,34,46,0) 40%,rgba(21,34,46,.55) 100%);}

/* ---------- Kursübersicht ---------- */
.archivkopf{padding:14px 0 0;}
.archivkopf h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4.6vw,48px);margin:4px 0 10px;color:var(--tief);}
.filterleiste{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 26px;}
.fbtn{border:1.5px solid var(--line);background:var(--card);padding:8px 18px;border-radius:99px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink);}
.fbtn:hover{border-color:var(--vereinsblau);color:var(--vb-deep);}
.fbtn.aktiv{background:var(--vereinsblau);border-color:var(--vereinsblau);color:#fff;}
.archivgrid{margin-bottom:14px;}
.mitsegelkarte{background:var(--tief);border-color:var(--tief);}
.mitsegelkarte .typ{color:#9FC0D2;}
.mitsegelkarte h3{color:var(--hell);}
.mitsegelkarte .meta span{color:#BFD2DC;}
.mitsegelkarte .klink{color:#F0A583;}
.archivgrid .kcard[hidden]{display:none;}
.kursgruppe{margin:34px 0 8px;}
.kursgruppe h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,30px);color:var(--tief);margin:0 0 4px;}
.kursgruppe .gruppenlede{color:var(--slate);font-size:15px;margin:0 0 16px;max-width:62ch;}

/* ---------- Mobiles Menü (Issue #22) ---------- */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border:0;background:none;cursor:pointer;}
.burger i{display:block;height:2.5px;border-radius:2px;background:var(--tief);transition:transform .2s,opacity .2s;}
.nav-offen .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-offen .burger i:nth-child(2){opacity:0;}
.nav-offen .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
@media (max-width:860px){
  .burger{display:flex;}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(21,34,46,.14);padding:8px 22px 14px;}
  header.site.nav-offen nav.main{display:flex;flex-direction:column;gap:0;}
  nav.main ul{flex-direction:column;gap:0;}
  nav.main a{display:block;padding:13px 4px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0;}
  nav.main li:last-child a,nav.main > a:last-child{border-bottom:0;}
  nav.main a:hover{background:none;color:var(--vb-deep);}
}

/* ---------- Karten mit Bild ---------- */
.kcard.mitbild{padding:0;overflow:hidden;}
.kcard.mitbild > *:not(.kbild){margin-left:20px;margin-right:20px;}
.kcard.mitbild > .typ{margin-top:16px;}
.kcard.mitbild > .klink{margin-bottom:18px;}
.kbild{display:block;margin:0;line-height:0;background:linear-gradient(160deg,#27506B,#3B7E9E);}
.kbild img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 55%;display:block;height:auto;}
.kbild .ph{display:block;aspect-ratio:4/3;position:relative;}
/* Hochformat-Motive: Boot sitzt weiter unten im Bild */
.kbild img.hochformat{object-position:center 62%;}
.bootbild{width:100%;max-width:720px;border-radius:8px;margin:14px 0;display:block;height:auto;}

/* ---------- Download-Liste ---------- */
.downloads{list-style:none;padding:0;margin:0 0 10px;max-width:640px;}
.downloads li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 12px;}
.downloads li:last-child{border-bottom:0;}
.downloads a{font-weight:600;font-size:16px;text-decoration:none;}
.downloads a::before{content:"↓ ";color:var(--vereinsblau);}
.downloads a:hover{text-decoration:underline;}
.downloads .dmeta{font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap;}
.downloads .dtext{grid-column:1/-1;font-size:13.5px;color:var(--slate);}

/* ---------- Galerien in Inhalten (z. B. Bootsanleitungen) ---------- */
.kursinhalt .wp-block-gallery{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;list-style:none;padding:0;margin:14px 0 26px;max-width:none;}
.kursinhalt .wp-block-gallery.has-nested-images figure.wp-block-image{height:auto !important;}
.kursinhalt .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:auto !important;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;}
.kursinhalt .wp-block-gallery.has-nested-images figure.wp-block-image{width:auto !important;max-width:none;flex:none;margin:0;display:block;}
.kursinhalt .wp-block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;height:auto;}
.kursinhalt .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before{display:none;}
.kursinhalt .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{position:static;background:none;text-shadow:none;overflow:visible;white-space:normal;padding:6px 2px 0;margin:0;font-size:14px;color:var(--tief);line-height:1.4;text-align:left;max-width:none;}
.kursinhalt h2{font-family:var(--disp);font-size:26px;color:var(--tief);margin:28px 0 6px;}

/* ---------- Lesemodus für Anleitungs-Galerien ---------- */
.kursinhalt .wp-block-gallery figure.anklickbar{cursor:zoom-in;position:relative;}
.kursinhalt .wp-block-gallery figure.anklickbar img{transition:filter .15s;}
.kursinhalt .wp-block-gallery figure.anklickbar:hover img,
.kursinhalt .wp-block-gallery figure.anklickbar:focus-visible img{filter:brightness(.9);}
.kursinhalt .wp-block-gallery figure.anklickbar:focus-visible{outline:3px solid var(--vereinsblau);outline-offset:3px;}

body.lm-offen{overflow:hidden;}
.lesemodus{position:fixed;inset:0;z-index:200;background:rgba(12,22,32,.94);display:flex;align-items:center;justify-content:center;padding:56px 16px 92px;}
.lesemodus[hidden]{display:none;}
.lm-buehne{margin:0;max-width:1100px;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;}
.lm-buehne img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:6px;background:#0d1720;}
.lm-buehne figcaption{text-align:center;max-width:60ch;}
.lm-zaehler{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FB4CB;margin-bottom:4px;font-variant-numeric:tabular-nums;}
.lm-titel{display:block;color:#EDF2F4;font-size:17px;line-height:1.4;}
.lm-schliessen{position:absolute;top:12px;right:14px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(237,242,244,.12);color:#EDF2F4;font-size:28px;line-height:1;cursor:pointer;}
.lm-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(237,242,244,.12);color:#EDF2F4;font-size:32px;line-height:1;cursor:pointer;}
.lm-zurueck{left:12px;} .lm-vor{right:12px;}
.lm-schliessen:hover,.lm-nav:hover{background:var(--vereinsblau);}
.lm-schliessen:focus-visible,.lm-nav:focus-visible{outline:3px solid #fff;outline-offset:2px;}
@media (max-width:600px){
  .lesemodus{padding:52px 8px 76px;}
  .lm-nav{top:auto;bottom:16px;transform:none;}
  .lm-buehne img{max-height:62vh;}
}
.revierloop{width:100%;max-height:340px;object-fit:cover;border-radius:8px;display:block;margin:0 0 16px;}
@media (prefers-reduced-motion:reduce){.revierloop{display:none;}}

/* ---------- Vereinsleben-Raster ---------- */
.lebengrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 8px;}
.lebengrid figure{margin:0;position:relative;border-radius:8px;overflow:hidden;background:#0d1720;}
.lebengrid img,.lebengrid video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;}
.lebengrid .gross{grid-column:span 2;grid-row:span 2;}
.lebengrid .gross img{aspect-ratio:auto;height:100%;min-height:280px;}
.lebengrid .video video{aspect-ratio:4/3;}
.lebengrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(21,34,46,0),rgba(21,34,46,.78));}
@media (max-width:860px){
  .lebengrid{grid-template-columns:repeat(2,1fr);}
  .lebengrid .gross{grid-column:span 2;grid-row:auto;}
  .lebengrid .gross img{min-height:0;aspect-ratio:16/10;}
}
@media (prefers-reduced-motion:reduce){.lebengrid video{display:none;}}
.path .wann{font-size:13px;font-weight:600;padding:6px 10px;border-radius:4px;margin-top:10px;display:inline-block;}
.path.a .wann{background:rgba(159,192,210,.16);color:#C9D9E2;}
.path.b .wann{background:#EDF4FA;color:var(--vb-deep);}

/* Instagram-Raster: eigene Kopien, kein Meta-Request im Browser */
.instagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 4px;}
.instapost{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;}
.instabild{position:relative;display:block;border-radius:8px;overflow:hidden;background:#0d1720;}
.instabild img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .35s ease;}
.instapost:hover .instabild img,.instapost:focus-visible .instabild img{transform:scale(1.04);}
/* Unten links, damit der Titeltext der Reels frei bleibt */
.instaplay{position:absolute;left:10px;bottom:10px;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;background:rgba(21,34,46,.6);backdrop-filter:blur(2px);
  box-shadow:0 2px 10px rgba(0,0,0,.3);transition:background .2s ease;}
.instaplay::after{content:"";width:0;height:0;margin-left:3px;
  border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.instapost:hover .instaplay,.instapost:focus-visible .instaplay{background:var(--signal);}
.instatext{font-size:14px;line-height:1.45;color:var(--slate);}
.instadatum{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol);}
@media (max-width:860px){.instagrid{grid-template-columns:repeat(2,1fr);gap:13px;}}
@media (max-width:520px){.instagrid{grid-template-columns:1fr;}}

.instaovl{position:fixed;inset:0;z-index:80;display:none;padding:24px;
  grid-template-rows:minmax(0,1fr);justify-items:center;align-items:center;
  background:rgba(12,21,29,.92);}
.instaovl.auf{display:grid;}
body.ovloffen{overflow:hidden;}
.instaovl figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center;
  width:min(460px,100%);min-height:0;max-height:100%;}
.instaovl video{max-width:100%;min-height:0;flex:0 1 auto;border-radius:10px;background:#000;display:block;}
.instaovl figcaption{flex:0 0 auto;color:#DCE6EC;font-size:14px;line-height:1.5;
  max-height:22vh;overflow-y:auto;width:100%;}
.instaovltext{margin:0 0 8px;white-space:pre-line;}
.instaovllink{color:#9FC0D2;font-weight:600;}
.instazu{position:absolute;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.instazu:hover{background:rgba(255,255,255,.22);}

/* Bootsprofile: Obleute-Nachfolge */
.buchbox .nachfolge{margin-top:12px;padding:12px 14px;border-radius:8px;background:#FFF4E5;border:1px solid #F3D6A6;display:flex;flex-direction:column;gap:4px;font-size:14px;}
.buchbox .nachfolge b{color:#8A4B00;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.buchbox .nachfolge a{color:var(--vereinsblau);font-weight:700;text-decoration:none;margin-top:4px;}
.kcard .typ .such{font-style:normal;color:#8A4B00;font-weight:700;}
.buchbox .hinweis{margin:10px 0 0;font-size:13px;color:var(--slate);line-height:1.5;}

/* Linkliste (Revier & Flotte) */
.linkliste{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.linkspalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 32px;}
.linkspalten h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin:0 0 8px;}
.linkspalten ul{list-style:none;margin:0;padding:0;}
.linkspalten li{margin:0 0 6px;font-size:15px;}
.linkspalten a{color:var(--vereinsblau);text-decoration:none;font-weight:600;}
.linkspalten a:hover{text-decoration:underline;}

/* Hervorgehobener Absatz im Seiteninhalt */
.kursinhalt .kasten,.seiteninhalt .kasten,.entry-content .kasten,.kasten{background:#EDF4FA;border-left:4px solid var(--vereinsblau);padding:12px 16px;border-radius:0 8px 8px 0;}

/* Logbuch (Berichte und Galerien der alten Website, Theme 0.6.0) */
.seitenkopf{padding:22px 0 10px;max-width:760px;}
.seitenkopf h1,.logbuch-beitrag h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4.6vw,50px);line-height:1.05;margin:6px 0 14px;color:var(--tief);}
.seitenkopf .lede{font-size:17px;color:var(--slate);margin:0 0 16px;}
.jahresleiste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
.jahresleiste a{font-size:14px;font-weight:700;color:var(--vb-deep);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-decoration:none;}
.jahresleiste a:hover{border-color:var(--vereinsblau);}
.logbuch-jahr{padding:22px 0 10px;}
.logbuch-jahr h2{font-family:var(--disp);font-weight:700;font-size:28px;margin:0 0 14px;color:var(--tief);border-bottom:1px solid var(--line);padding-bottom:6px;}
.logbuch-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:12px;}
.logbuch-karte{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--tief);}
.logbuch-karte img,.logbuch-karte .ph{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;height:auto;}
.logbuch-karte .ph{position:relative;background:#DCE6EC;}
.logbuch-karte .ph::after{display:none;}
.logbuch-karte .text{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;}
.logbuch-karte .typ{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-deep);}
.logbuch-karte strong{font-family:var(--disp);font-size:20px;line-height:1.2;font-weight:700;}
.logbuch-karte:hover{border-color:var(--vereinsblau);}
.logbuch-beitrag{max-width:760px;padding:16px 0 40px;}
.logbuch-beitrag .kursinhalt .logbuch-datum{font-weight:700;color:var(--slate);font-size:15.5px;margin:0 0 14px;}
.logbuch-beitrag .kursinhalt > p:first-child{font-size:16.5px;color:var(--tief);}
.logbuch-beitrag .kursinhalt figure.wp-block-image{margin:0 0 22px;max-width:none;}
.logbuch-beitrag .kursinhalt .logbuch-film{margin:0 0 24px;}
.logbuch-beitrag .kursinhalt .logbuch-film video{display:block;width:100%;max-width:420px;aspect-ratio:9/16;background:#0d1720;border-radius:10px;}
.logbuch-beitrag .kursinhalt figure.wp-block-image img{width:100%;height:auto;border-radius:8px;display:block;}
.logbuch-beitrag .kursinhalt figure.wp-block-image figcaption{font-size:14px;color:var(--slate);margin:6px 2px 0;line-height:1.4;text-align:left;}
.logbuch-beitrag .kursinhalt h3{font-size:19px;margin:22px 0 4px;color:var(--tief);}
.logbuch-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
.logbuch-blaettern a{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--tief);font-weight:700;line-height:1.25;}
.logbuch-blaettern a span{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vb-deep);}
.logbuch-blaettern a.zur{text-align:right;}
@media (max-width:860px){
  .logbuch-liste{grid-template-columns:1fr 1fr;}
  .logbuch-blaettern{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .logbuch-liste{grid-template-columns:1fr;}
}

/* Fallorientierte FAQ „Welchen Führerschein brauche ich?" (Theme 0.7.0) */
.faq-seite details.faq{border:1px solid var(--line);border-radius:8px;background:var(--card);margin:0 0 10px;padding:0 18px;max-width:none;}
.faq-seite details.faq summary{cursor:pointer;font-family:var(--disp);font-size:20px;font-weight:700;color:var(--tief);padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:14px;}
.faq-seite details.faq summary::-webkit-details-marker{display:none;}
.faq-seite details.faq summary::after{content:"+";color:var(--vereinsblau);font-size:24px;flex:none;}
.faq-seite details.faq[open] summary::after{content:"–";}
.faq-seite details.faq p{margin:0 0 16px;max-width:none;}