:root{
  --bg:#07131f;
  --surface:#0d1d2c;
  --surface-2:#122638;
  --text:#f4f7fa;
  --muted:#a8b8c6;
  --line:#25445c;
  --accent:#69d4ff;
  --accent-ink:#04101a;
  --glow:rgba(105,212,255,.18);
  --glass:rgba(10,27,42,.78);
  --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Der Seitenkopf klebt oben. Ohne Abstand landen Sprungziele (Menü, „Damit rechnen“)
   genau darunter – der Rechner sieht dann aus, als hätte sich nichts getan. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
section[id],[id^="kite-abc"],main [id]{scroll-margin-top:96px}
@media (max-width:820px){
  html{scroll-padding-top:150px}
  section[id],main [id]{scroll-margin-top:150px}
}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:
    radial-gradient(circle at 12% 24%,rgba(40,119,151,.08),transparent 30rem),
    var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:inherit;text-decoration:none}
nav a:hover,.footer a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip{
  position:absolute;left:-9999px;top:8px;
  background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:10px;font-weight:700;z-index:20
}
.skip:focus{left:16px}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(90deg,rgba(5,16,27,.92),rgba(7,26,40,.86));
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;flex:none;line-height:0}
/* Höhe steuert die Größe, Breite ergibt sich – so bleibt das Seitenverhältnis
 * auf jedem Gerät gleich. width/height stehen zusätzlich im HTML, damit der
 * Platz schon vor dem Laden reserviert ist und der Kopf nicht springt. */
.brand img{height:40px;width:auto;display:block}
nav{display:flex;gap:24px;color:var(--muted);font-size:14px}
nav a{position:relative;padding:8px 0;transition:color .18s ease}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--accent);border-radius:99px;transition:right .18s ease}
nav a:hover::after{right:0}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:680px;padding:118px 0 104px;display:flex;align-items:center;
  background-image:
    linear-gradient(90deg,rgba(3,13,23,.97) 0%,rgba(5,19,32,.9) 34%,rgba(5,19,32,.54) 67%,rgba(4,15,25,.74) 100%),
    linear-gradient(180deg,rgba(3,12,21,.16) 0%,rgba(3,12,21,.08) 55%,var(--bg) 100%),
    url("hero-kitesurf.webp");
  background-size:cover;background-position:center 47%;
}
.hero::before{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55
}
.hero::after{
  content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-180px;top:-210px;
  background:rgba(105,212,255,.12);filter:blur(80px);z-index:-1
}
.hero-grid{display:grid;grid-template-columns:1.18fr .64fr;gap:72px;align-items:center}
.hero-copy{position:relative;max-width:760px}
.hero-copy::after{
  content:"";position:absolute;left:-42px;top:-42px;width:136px;height:136px;z-index:-1;
  border:1px solid rgba(105,212,255,.2);border-radius:50%;
  box-shadow:0 0 0 24px rgba(105,212,255,.035),0 0 0 48px rgba(105,212,255,.018)
}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);letter-spacing:.14em;font-size:12px;font-weight:800}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;box-shadow:10px 0 20px var(--accent)}
h1{font-size:clamp(48px,7vw,92px);line-height:.93;margin:14px 0 26px;letter-spacing:-.055em;text-shadow:0 12px 42px rgba(0,0,0,.42)}
h2{font-size:clamp(30px,4vw,52px);margin:8px 0 28px;letter-spacing:-.035em}
h3{margin-top:0}
.lead{font-size:20px;color:#b9c8d4;max-width:700px}
.hero .lead{max-width:620px;color:#d1dce5;text-shadow:0 2px 22px rgba(0,0,0,.4)}
.narrow{max-width:760px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:18px;padding:14px 22px;border-radius:999px;border:0;
  background:var(--accent);color:var(--accent-ink);font-weight:800;cursor:pointer;
  box-shadow:0 10px 28px rgba(29,159,208,.22);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease
}
.button::after{content:"→";font-size:18px;margin-left:10px;transition:transform .18s ease}
.button:hover{filter:brightness(1.08);box-shadow:0 14px 36px rgba(29,159,208,.32)}
.button:hover::after{transform:translateX(3px)}
.button:active{transform:translateY(1px)}
.hero-card,.calculator,.card,.result-box{background:var(--surface);border:1px solid var(--line);border-radius:22px}
.hero-card{
  position:relative;overflow:hidden;padding:28px;
  background:linear-gradient(145deg,rgba(17,45,66,.88),rgba(6,20,33,.78));
  border-color:rgba(137,219,249,.35);backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 26px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)
}
.hero-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.metric{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.metric strong{font-size:18px}
.metric span,.result-demo span,.result-box>span{color:var(--muted)}
.result-demo{padding-top:24px}
.result-demo strong,.result-box>strong{display:block;font-size:32px;margin:5px 0;line-height:1.15}
.result-demo small,.result-box>small{display:block;color:var(--muted)}

/* ---------- Abschnitte ---------- */
.section{position:relative;padding:96px 0}
.alt{background:linear-gradient(180deg,#091724,#081521)}
#rechner::before,#boards::before,#feedback::before{
  content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.34
}
#rechner::before{width:420px;height:420px;right:-190px;top:160px;background:#134c69}
#boards::before{width:380px;height:380px;left:-220px;top:240px;background:#123d55}
#feedback::before{width:360px;height:360px;right:-210px;top:120px;background:#123d55}

/* ---------- Rechner ---------- */
.calculator{
  position:relative;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;
  background:linear-gradient(145deg,rgba(14,35,52,.96),rgba(9,25,39,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035)
}
.field{display:flex;flex-direction:column;gap:10px;min-width:0}
.field.span{grid-column:1/-1}
.field label,.field .label{font-weight:700}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.input-line{
  display:flex;align-items:center;background:rgba(18,38,56,.86);
  border:1px solid var(--line);border-radius:10px;padding-right:14px
}
.input-line:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(105,212,255,.08)}
.input-line input{width:100%;padding:14px;background:transparent;color:var(--text);border:0;outline:0;font-size:18px;min-width:0}
.input-line span{color:var(--muted)}
.slider{width:100%;accent-color:var(--accent);height:24px;cursor:pointer}

.segmented{position:relative;display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.segmented.wide{width:100%}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{
  flex:1;text-align:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:700;
  color:var(--muted);cursor:pointer;white-space:nowrap
}
.segmented input:checked + label{background:var(--accent);color:var(--accent-ink)}
.segmented input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

.board-dims{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.board-dims .dim{display:flex;flex-direction:column;gap:10px;min-width:0}
.board-dims label{font-weight:600;font-size:14px;color:var(--muted)}
.hint{margin:0;font-size:14px;color:var(--muted)}
[hidden]{display:none !important}

.result-box{
  grid-column:1/-1;padding:24px;
  background:linear-gradient(135deg,rgba(18,54,75,.88),rgba(12,31,47,.96));
  border-color:rgba(105,212,255,.34);box-shadow:inset 4px 0 0 var(--accent)
}

/* Empfehlungen: Kite-Typ und Board */
.rec-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.rec-box{
  padding:20px 22px;
  background:linear-gradient(145deg,rgba(18,38,56,.98),rgba(13,31,47,.98));border:1px solid var(--line);border-radius:18px
}
.rec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rec-box strong{display:block;font-size:22px;margin:8px 0 6px;line-height:1.2}
.rec-box small{display:block;color:var(--muted)}
.rec-shape{margin-bottom:8px;color:var(--text) !important;font-size:14px}
.ghost{
  padding:8px 14px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--accent);border:1px solid var(--line);
  transition:border-color .15s ease,background .15s ease;white-space:nowrap
}
.ghost:hover{border-color:var(--accent);background:rgba(105,212,255,.08)}
.ghost:active{transform:translateY(1px)}
.live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}

/* Windfenster */
.window{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.window-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-bottom:10px}
#window-range{color:var(--text)}
.window-bar{position:relative;height:12px;background:var(--surface-2);border-radius:99px;border:1px solid var(--line)}
.window-band{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.35;border-radius:99px}
.window-mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--text);border-radius:2px}
.window-mark span{
  position:absolute;top:-6px;left:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--text)
}
.window-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}

.note{color:var(--muted);font-size:14px;max-width:900px}

/* Redaktionelle Bildstrecken: bewusst nur an den Stellen, an denen ein Foto
 * die Materialunterschiede verständlicher macht. */
.section-photo{
  position:relative;isolation:isolate;overflow:hidden;margin:38px 0 48px;
  min-height:clamp(300px,43vw,500px);border:1px solid rgba(105,212,255,.24);border-radius:28px;
  background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.3)
}
.section-photo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,13,23,.9) 0%,rgba(3,13,23,.42) 46%,rgba(3,13,23,.08) 78%),
             linear-gradient(180deg,transparent 48%,rgba(3,13,23,.72) 100%)
}
.section-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .7s ease}
.section-photo:hover img{transform:scale(1.025);filter:saturate(1.08)}
.section-photo figcaption{
  position:absolute;z-index:1;left:clamp(24px,5vw,58px);bottom:clamp(24px,5vw,52px);
  display:flex;flex-direction:column;align-items:flex-start;max-width:500px;text-shadow:0 4px 28px rgba(0,0,0,.7)
}
.section-photo figcaption::before{content:"";width:42px;height:2px;margin-bottom:18px;background:var(--accent);box-shadow:12px 0 26px var(--accent)}
.section-photo figcaption strong{font-size:clamp(25px,3.5vw,42px);line-height:1.05;letter-spacing:-.035em}
.section-photo figcaption small{max-width:460px;margin-top:12px;color:#d4e0e7;font-size:15px;line-height:1.55}
.photo-index{margin-bottom:8px;color:var(--accent);font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
.section-photo-board::after{
  background:linear-gradient(270deg,rgba(3,13,23,.9) 0%,rgba(3,13,23,.38) 50%,rgba(3,13,23,.06) 78%),
             linear-gradient(180deg,transparent 48%,rgba(3,13,23,.76) 100%)
}
.section-photo-board figcaption{left:auto;right:clamp(24px,5vw,58px);text-align:right;align-items:flex-end}

/* ---------- Kite-ABC ---------- */

.glossary-section{
  isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 94% 8%,rgba(105,212,255,.09),transparent 28rem),
    radial-gradient(circle at 6% 86%,rgba(24,91,122,.12),transparent 30rem),
    #081521
}
.glossary-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(105,212,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(105,212,255,.035) 1px,transparent 1px);
  background-size:72px 72px;mask-image:linear-gradient(180deg,black,transparent 76%)
}
.glossary-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:end;margin-bottom:42px}
.glossary-intro h2{margin-bottom:0}
.glossary-intro .lead{margin:0}

.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:32px}
.concept-card{
  position:relative;overflow:hidden;padding:28px;border:1px solid rgba(105,212,255,.26);border-radius:26px;
  background:linear-gradient(145deg,rgba(16,41,60,.96),rgba(7,23,36,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)
}
.concept-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.concept-head{min-height:92px}
.concept-head h3{margin:8px 0 0;font-size:clamp(23px,2.4vw,32px);line-height:1.08;letter-spacing:-.025em}
.concept-number,.glossary-group-head span{
  color:var(--accent);font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em
}
.concept-diagram{
  margin:18px 0 20px;padding:14px;border:1px solid rgba(105,212,255,.12);border-radius:18px;
  background:radial-gradient(circle at 50% 70%,rgba(105,212,255,.08),transparent 62%),rgba(5,19,31,.72)
}
.concept-diagram svg{display:block;width:100%;height:auto;max-height:300px}
.diagram-zone{fill:none;stroke:#69d4ff;stroke-width:3;stroke-linecap:round}
.diagram-ray{fill:none;stroke:#35566d;stroke-width:1.5;stroke-dasharray:6 7}
.diagram-power{fill:url(#power-fill);stroke:rgba(105,212,255,.42);stroke-width:1.5}
.diagram-kite{fill:#f4f7fa;stroke:#69d4ff;stroke-width:2}
.diagram-person{fill:none;stroke:#f4f7fa;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
circle.diagram-person{fill:#f4f7fa;stroke:none}
.diagram-horizon{fill:none;stroke:#35566d;stroke-width:2}
.diagram-wind{fill:none;stroke:#69d4ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.diagram-label,.diagram-side{fill:#f4f7fa;font:700 15px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em}
.diagram-side{font-size:22px;letter-spacing:.13em}
.diagram-sub{fill:#9db0bf;font:500 12px/1 ui-sans-serif,system-ui,sans-serif}
.diagram-label.accent,.diagram-side.accent{fill:#69d4ff}

.concept-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.concept-terms.two{grid-template-columns:1fr 1fr}
.concept-terms>div{padding:14px;border:1px solid rgba(105,212,255,.11);border-radius:14px;background:rgba(18,38,56,.62)}
.concept-terms dt{font-weight:800;color:var(--text)}
.concept-terms dd{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.glossary-example{
  margin:16px 0 0;padding:14px 16px;border-left:2px solid var(--accent);border-radius:0 12px 12px 0;
  background:rgba(105,212,255,.06);color:#c8d6df;font-size:14px;line-height:1.55
}
.glossary-example span{display:block;margin-bottom:4px;color:var(--accent);font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;text-transform:uppercase}

.glossary-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.glossary-group{
  overflow:hidden;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(145deg,rgba(13,31,47,.96),rgba(8,24,38,.98))
}
.glossary-group-head{padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.glossary-group-head h3{margin:7px 0 0;font-size:21px}
.glossary-group details{border-bottom:1px solid rgba(37,68,92,.72)}
.glossary-group details:last-child{border-bottom:0}
.glossary-group summary{
  position:relative;display:flex;align-items:center;min-height:58px;padding:16px 52px 16px 20px;
  color:var(--text);font-weight:750;cursor:pointer;list-style:none;transition:background .18s ease,color .18s ease
}
.glossary-group summary::-webkit-details-marker{display:none}
.glossary-group summary::after{
  content:"+";position:absolute;right:20px;top:50%;width:25px;height:25px;display:grid;place-items:center;
  transform:translateY(-50%);border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:18px;font-weight:400;
  transition:transform .18s ease,background .18s ease,border-color .18s ease
}
.glossary-group summary:hover{background:rgba(105,212,255,.045);color:var(--accent)}
.glossary-group details[open] summary{background:rgba(105,212,255,.07);color:var(--accent)}
.glossary-group details[open] summary::after{content:"−";border-color:var(--accent);background:rgba(105,212,255,.08);transform:translateY(-50%) rotate(180deg)}
.glossary-body{padding:0 20px 20px;animation:glossary-open .2s ease}
.glossary-body>p:first-child{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.glossary-body .glossary-example{margin-top:14px;font-size:13px}
.glossary-note{margin:24px 0 0}
@keyframes glossary-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* Inhaltstabelle */
.sub{font-size:24px;margin:44px 0 10px;letter-spacing:-.02em}
.table-scroll{
  overflow-x:auto;margin:30px 0;padding:0 10px;-webkit-overflow-scrolling:touch;
  background:linear-gradient(145deg,rgba(12,31,47,.92),rgba(8,24,38,.94));
  border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.16)
}
table.data{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
table.data caption{
  text-align:left;color:var(--muted);font-size:14px;padding-bottom:12px
}
table.data th,table.data td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top
}
table.data thead th{
  color:var(--accent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--accent)
}
table.data tbody td{color:var(--muted)}
table.data tbody td:first-child{color:var(--text);white-space:nowrap}
table.data tbody tr{transition:background .16s ease}
table.data tbody tr:hover{background:rgba(105,212,255,.035)}
table.data tbody tr:last-child td{border-bottom:0}
.muted{color:var(--muted);font-size:13px;font-weight:400}

/* ---------- Karten & Footer ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;overflow:hidden;padding:26px;
  background:linear-gradient(145deg,rgba(15,38,56,.98),rgba(9,25,39,.98));
  box-shadow:0 18px 50px rgba(0,0,0,.16);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
.cards{counter-reset:feature-card}
.card{counter-increment:feature-card;padding-top:66px}
.card::after{
  content:"0" counter(feature-card);position:absolute;top:24px;right:24px;
  color:rgba(105,212,255,.5);font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),transparent)}
.card:hover{transform:translateY(-4px);border-color:rgba(105,212,255,.45);box-shadow:0 24px 60px rgba(0,0,0,.24)}
.card p{color:var(--muted)}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted)}
.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer div{display:flex;gap:20px}

/* Rechtsseiten */
.legal{max-width:760px}
.legal h1{font-size:clamp(34px,5vw,52px);margin-top:40px}
.legal h2{font-size:24px;margin:36px 0 10px}
.legal p,.legal li{color:var(--muted)}
.legal ul{padding-left:20px}
.placeholder{
  display:inline-block;background:var(--surface-2);border:1px dashed var(--line);
  border-radius:6px;padding:1px 8px;color:var(--text)
}

@media (max-width:820px){
  .hero-grid,.cards,.calculator{grid-template-columns:1fr}
  .hero{
    min-height:auto;padding:76px 0 64px;
    background-image:
      linear-gradient(180deg,rgba(3,13,23,.9) 0%,rgba(5,19,32,.82) 52%,rgba(4,15,25,.96) 100%),
      url("hero-kitesurf.webp");
    background-position:68% center
  }
  .hero-grid{gap:42px}
  .hero-card{max-width:460px}
  .section{padding:56px 0}
  .section-photo{min-height:390px;margin:28px 0 38px;border-radius:22px}
  .section-photo::after,.section-photo-board::after{
    background:linear-gradient(180deg,rgba(3,13,23,.08) 20%,rgba(3,13,23,.92) 100%)
  }
  .section-photo-board figcaption{left:24px;right:24px;text-align:left;align-items:flex-start}
  .section-photo figcaption{left:24px;right:24px;bottom:24px}
  .glossary-intro{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .concept-grid,.glossary-groups{grid-template-columns:1fr}
  .concept-card{padding:20px;border-radius:20px}
  .concept-card::before{left:20px;right:20px}
  .concept-head{min-height:0}
  .concept-diagram{margin-top:22px;padding:8px}
  .concept-terms{grid-template-columns:1fr}
  .concept-terms.two{grid-template-columns:1fr 1fr}
  .glossary-group{border-radius:18px}

  /* Logo, Sprachumschalter und Navigation passen nebeneinander nicht mehr
   * ohne Gedränge. Deshalb: erste Reihe Logo + DE/EN, zweite Reihe Menü.
   * Dadurch bleibt das Logo auf dem Handy genauso groß wie am Rechner. */
  .nav{height:auto;flex-wrap:wrap;gap:10px 16px;padding:12px 0}
  .nav nav{order:3;flex:1 0 100%;gap:20px;padding-bottom:2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  /* Ohne nowrap bricht „Kite-ABC“ mitten im Wort um, das Menü wird zweizeilig
     und der klebende Kopf entsprechend höher. Einzeilig und seitlich schiebbar
     war ohnehin die Absicht. */
  .nav nav a{white-space:nowrap}
  nav::-webkit-scrollbar{display:none}
  .brand img{height:34px}

  .calculator{padding:20px}
  .board-dims{grid-template-columns:1fr}
  .rec-grid{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:12px}

  /* Lange Auswahlleisten (z. B. „zu klein / hat gepasst / zu groß / noch nicht
   * gefahren“) passen schmal nicht in eine Zeile. Statt über den Rand zu laufen,
   * rutschen einzelne Knöpfe in die nächste Zeile. */
  .segmented.wide{flex-wrap:wrap}
  .segmented.wide label{flex:1 1 auto}

  /* Suche und Regionsfilter untereinander statt nebeneinander gequetscht */
  .filter-line{gap:14px}
  .filter-field{flex:1 1 100%}
  .filter-line .input-line{min-width:0}
}

/* Kleine Handys: nur noch Feinheiten, das Layout steht schon */
@media (max-width:480px){
  .brand img{height:30px}
  .nav nav{gap:16px;font-size:13px}
  .segmented label{padding:8px 9px;font-size:13px}
  .calculator{padding:16px}
  .card,.rec-box{padding:18px}
  .lead{font-size:18px}
  h1{font-size:clamp(44px,15vw,62px)}
  .section-photo{min-height:350px;border-radius:18px}
  .section-photo figcaption small{font-size:14px}
  .concept-terms.two{grid-template-columns:1fr}
  .concept-card{padding:16px}
  .concept-head h3{font-size:23px}
  .concept-diagram{margin-left:-4px;margin-right:-4px}
  .glossary-group summary{padding-left:17px;padding-right:48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- Reviere ---------- */

#reviere{isolation:isolate;overflow:hidden;background:#081521}
#reviere::before{
  content:"";position:absolute;z-index:0;inset:0 0 auto;height:760px;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(4,16,27,.95) 0%,rgba(5,22,35,.76) 52%,rgba(5,18,29,.86) 100%),
    linear-gradient(180deg,rgba(5,19,31,.26) 0%,rgba(8,21,33,.66) 56%,#081521 100%),
    url("coast-spots.webp");
  background-size:cover;background-position:center 46%
}
#reviere>.wrap{position:relative;z-index:1}
#reviere h2{text-shadow:0 10px 34px rgba(0,0,0,.5)}
#reviere>.wrap>.lead:first-of-type{color:#d2dde5;text-shadow:0 2px 20px rgba(0,0,0,.45)}

.select-line select{
  width:100%;padding:14px;background:transparent;color:var(--text);border:0;outline:0;
  font-size:16px;min-width:0;appearance:none;cursor:pointer
}
.select-line select:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Die aufgeklappte Optionsliste ist Browser-gerendert und übernimmt teils eigene
 * Hintergrundfarben. Ohne explizite Farben hier wird heller Text (--text) auf dem
 * meist hellen System-Hintergrund unsichtbar. Optionen deshalb fest einfärben. */
.select-line select option,
.select-line select optgroup{
  background:var(--surface-2);color:var(--text)
}

.ghost.small{padding:6px 10px;font-size:13px}
table.spots td .ghost.small{margin-top:10px}
.linky{
  background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px
}
.linky:hover{opacity:.8}

.spot-profile{
  padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;gap:8px
}
.spot-profile-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.spot-profile-head strong{font-size:1.05rem}

.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0;color:var(--text)}

.warn{margin:0;font-size:14px;color:#e2746a}
.warn-inline{color:#e2746a}

.segmented.locked{opacity:.75}
.segmented.locked label{cursor:default}

.filter-line{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.filter-line label{font-weight:700;display:block;margin-bottom:6px}
.filter-line .input-line{min-width:260px}
.filter-field{display:flex;flex-direction:column}
.filter-line #spot-count{margin-bottom:14px;font-size:14px}
.input-line input[type="search"]{appearance:none}
.input-line input[type="search"]::-webkit-search-cancel-button{cursor:pointer}

table.data.spots{min-width:860px}
table.data.spots td:first-child{white-space:normal;min-width:160px}

/* ---------- Feedback ---------- */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.feedback-form{margin-top:28px}
.feedback-form .field label,
.feedback-form .field .label{font-weight:700}
a.inline{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Sterne: umgekehrte Reihenfolge im Quelltext, damit rein per CSS alle Sterne
 * links vom gewählten mitleuchten. row-reverse dreht die Anzeige wieder auf 1–5. */
.stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{
  font-size:34px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:8px;
  color:var(--line);transition:color .12s ease
}
.stars input:checked ~ label{color:var(--accent)}
/* Beim Überfahren zeigt die Leiste die Zahl unter dem Finger, nicht die gespeicherte. */
.stars:hover input:checked ~ label{color:var(--line)}
.stars:hover label:hover,
.stars:hover label:hover ~ label{color:var(--accent)}
.stars input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

.input-line.area{padding:0;align-items:stretch}
.input-line textarea{
  width:100%;padding:14px;background:transparent;color:var(--text);border:0;outline:0;
  font:inherit;font-size:16px;resize:vertical;min-height:110px
}
.input-line textarea::placeholder{color:var(--muted)}

.check{display:flex;align-items:flex-start;gap:12px;font-weight:400 !important;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent);cursor:pointer}

.fb-send{align-self:end;gap:14px}
.fb-send .button{justify-self:start}

@media (max-width:820px){
  .stars label{font-size:30px}
}

/* ---------- Sprachumschalter ---------- */

.lang-switch{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;flex:none}
.lang-switch button{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:6px 10px;border-radius:8px;cursor:pointer
}
.lang-switch button:hover{color:var(--text)}
.lang-switch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

@media (max-width:820px){
  .lang-switch button{padding:6px 8px}
}

/* ---------- Illustrationen ---------- */

/* Eigene Vektorgrafiken statt Fotos: sie erklären etwas, skalieren scharf auf
 * jedem Display und kosten fast kein Ladegewicht. Farben kommen aus den
 * Variablen oben, damit sie sich nie vom Rest der Seite lösen. */
.illu{
  margin:34px 0 0;padding:26px 26px 20px;
  background:linear-gradient(145deg,rgba(14,35,52,.92),rgba(9,25,39,.96));
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.16)
}
.illu svg{display:block;width:100%;height:auto}
.illu figcaption{margin-top:16px;color:var(--muted);font-size:14px;max-width:760px}
.illu .il-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.illu .il-line.dim{stroke:#5f7d95;stroke-width:2}
.illu .il-fill{fill:rgba(105,212,255,.12)}
.illu .il-fill.dim{fill:rgba(150,180,200,.07)}
.illu .il-axis{stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 6}
.illu .il-label{fill:var(--text);font-size:14px;font-weight:700;font-family:inherit}
.illu .il-sub{fill:var(--muted);font-size:12.5px;font-family:inherit}

@media (max-width:820px){
  .illu{padding:18px 16px 14px}
}