/* ============ SCHRIFTEN (lokal eingebunden, keine Verbindung zu Google) ============
   Quelle: Fontsource (npm), Lizenz: SIL Open Font License 1.1 */

/* bricolage-grotesque-latin-ext-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* public-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/public-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* public-sans-latin-400-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/public-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* public-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/public-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* public-sans-latin-500-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/public-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* public-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/public-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* public-sans-latin-600-normal */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/public-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-mono-latin-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-mono-latin-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-mono-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ TOKENS ============
   Deliberately single-theme (dark, underwater world) — the identity
   depends on it, so both prefers-color-scheme and [data-theme] are
   pinned to the same dark palette rather than inverted to a bright
   "light mode" that would erase the cinematic underwater feeling. */
:root{
  --abyss:#050d13;
  --navy:#0b1c26;
  --navy-2:#102836;
  --surface:#16323f;
  --surface-2:#1c3d4c;
  --aqua:#6fe3cf;
  --aqua-strong:#8ff0de;
  --aqua-deep:#2f8f82;
  --foam:#eef4f1;
  --foam-dim:#a7bcc1;
  --stone:#cdb98d;
  --line:rgba(238,244,241,0.14);
  --line-strong:rgba(238,244,241,0.28);
  --shadow:0 30px 80px -30px rgba(0,0,0,0.6);
  --font-display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --container: 1240px;
  --edge: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme: dark; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--abyss);
  color:var(--foam);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:1000;
  background:var(--aqua); color:var(--abyss); padding:10px 16px;
  border-radius:6px; font-weight:600; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--edge); }

.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em;
  color:var(--aqua); text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--aqua); display:inline-block; }

.section{ position:relative; padding-block: clamp(64px, 10vw, 120px); }
.section--alt{ background:var(--navy); }
.section--deep{ background:var(--navy-2); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  padding:14px 24px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--aqua); color:#04211d; }
.btn--menu{ border-color:var(--aqua); color:#04211d; }
.btn--primary:hover{ background:var(--aqua-strong); }
.btn--ghost{ border-color:var(--line-strong); color:var(--foam); background:transparent; }
.btn--ghost:hover{ border-color:var(--aqua); color:var(--aqua); }
.btn--sm{ padding:10px 18px; font-size:0.85rem; }

.arrow{ transition:transform .25s ease; }
.btn:hover .arrow, .card:hover .arrow{ transform:translateX(4px); }

/* ============ DIVE RAIL (depth-gauge scroll motif) ============ */
.dive-rail{
  position:fixed; left:14px; top:0; bottom:0; width:34px; z-index:60;
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.dive-rail__track{
  position:relative; width:1px; flex:1; margin-top:90px; margin-bottom:90px;
  background:linear-gradient(to bottom, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent);
}
.dive-rail__marker{
  position:absolute; left:50%; top:0; width:9px; height:9px; margin-left:-4.5px; margin-top:-4.5px;
  border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(111,227,207,0.18);
  transition: top .4s cubic-bezier(.2,.7,.2,1);
}
.dive-rail__readout{
  font-family:var(--font-mono); font-size:0.66rem; color:var(--foam-dim);
  writing-mode:vertical-rl; letter-spacing:0.05em; margin-bottom:14px;
}
.dive-rail__readout strong{ color:var(--aqua); font-weight:500; }
@media (max-width:900px){ .dive-rail{ display:none; } }
@media (prefers-reduced-motion: reduce){ .dive-rail__marker{ transition:none; } }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  padding:18px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(to bottom, rgba(5,13,19,0.75), transparent);
  backdrop-filter:blur(2px);
}
.nav.is-scrolled{ background:rgba(5,13,19,0.85); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand{ gap:12px; }
.brand__mark{
  width:44px; height:44px; flex:none; display:block;
  filter:drop-shadow(0 0 10px rgba(111,227,207,0.22));
  transition:transform .25s ease, filter .25s ease;
}
.brand:hover .brand__mark{ transform:translateY(-2px); filter:drop-shadow(0 0 14px rgba(111,227,207,0.4)); }
@media (max-width:600px){ .brand__mark{ width:38px; height:38px; } }
@media (prefers-reduced-motion: reduce){ .brand__mark{ transition:none; } .brand:hover .brand__mark{ transform:none; } }
.brand__word{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; }
.brand__word span{ display:block; font-family:var(--font-mono); font-weight:400; font-size:0.62rem; letter-spacing:0.1em; color:var(--foam-dim); text-transform:uppercase; }

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ text-decoration:none; font-size:0.92rem; color:var(--foam-dim); transition:color .2s ease; }
.nav__links a:hover{ color:var(--foam); }
.nav__cta{ display:flex; align-items:center; gap:14px; }

.nav__toggle{
  display:none; position:relative; z-index:80; background:none; border:1px solid var(--line-strong); color:var(--foam);
  width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center;
}
.nav__toggle svg{ width:18px; height:18px; }

@media (max-width:920px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh;
    background:var(--navy); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:32px var(--edge);
    transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--line);
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:1.15rem; color:var(--foam); }
  .nav__cta .btn--ghost{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:#050d13;
  padding-top:120px;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  background:#050d13;
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(3,9,13,0.55) 0%, rgba(3,9,13,0.18) 30%, rgba(3,9,13,0.45) 62%, rgba(3,9,13,0.94) 100%),
    radial-gradient(120% 70% at 50% 100%, rgba(3,9,13,0.5), transparent 60%);
}

#hero-bubbles{ position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:.5; }

.hero__content{ position:relative; z-index:5; padding-bottom:clamp(56px,8vw,96px); }
.hero__kicker{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--aqua); margin-bottom:18px; display:block;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.04; max-width:16ch;
  background:linear-gradient(180deg, #fff, #cfe9e3 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin-top:22px; max-width:46ch; font-size:1.08rem; color:var(--foam-dim);
}
.hero__sub strong{ color:var(--foam); font-weight:600; }
.hero__actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:16px; }

.hero__scroll{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.1em; color:var(--foam-dim);
  text-transform:uppercase;
}
.hero__scroll i{
  width:1px; height:34px; background:linear-gradient(var(--aqua), transparent);
  display:block; animation:dropline 2.2s ease-in-out infinite;
}
@keyframes dropline{ 0%{opacity:.2; transform:scaleY(.4); transform-origin:top;} 50%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:.2; transform:scaleY(.4); transform-origin:top;} }

@media (prefers-reduced-motion: reduce){
  .hero__scroll i{ animation:none; }
}
@media (max-width:700px){ .hero__scroll{ display:none; } }

/* ============ INTRO ============ */
.intro{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,80px); align-items:end; }
.intro__lead{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-family:var(--font-display); font-weight:600; line-height:1.3; margin-top:18px; }
.intro__lead em{ font-style:normal; color:var(--aqua); }
.intro__aside{ border-left:1px solid var(--line-strong); padding-left:28px; }
.intro__aside p + p{ margin-top:16px; }
.intro__aside p{ color:var(--foam-dim); }
.intro__badge{
  display:inline-flex; align-items:baseline; gap:8px; font-family:var(--font-mono);
  color:var(--stone); font-size:0.8rem; letter-spacing:0.05em; margin-bottom:14px;
}
.intro__badge b{ font-size:1.4rem; color:var(--foam); font-family:var(--font-display); }
@media (max-width:820px){ .intro{ grid-template-columns:1fr; } .intro__aside{ border-left:none; border-top:1px solid var(--line-strong); padding-left:0; padding-top:24px; } }

/* ============ ACTIVITIES (bento) ============ */
.section-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.8rem); margin-top:14px; max-width:16ch; }
.section-head p{ max-width:42ch; color:var(--foam-dim); }

.bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(120px,auto);
}
.card{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line);
  padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:220px; text-decoration:none; color:var(--foam);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.card__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__photo{ transform:scale(1.045); }
.card__scene{ position:absolute; inset:0; z-index:1; opacity:.4; mix-blend-mode:multiply; }
.card__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,13,19,0) 30%, rgba(5,13,19,0.88) 100%); z-index:2; }
.card__body{ position:relative; z-index:3; }
.card__tag{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--aqua-strong); display:block; margin-bottom:10px; }
.card h3{ font-size:1.5rem; margin-bottom:8px; }
.card p{ color:var(--foam-dim); font-size:0.92rem; max-width:34ch; }
.card .arrow-link{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--aqua-strong); }

.card--geraet{ grid-column:span 3; grid-row:span 2; min-height:420px; }
.card--apnoe{ grid-column:span 3; grid-row:span 1; }
.card--frei{ grid-column:span 3; grid-row:span 1; }
.card--schnupper{ grid-column:span 2; grid-row:span 1; }
.card--jugend{ grid-column:span 2; grid-row:span 1; }
.card--training{ grid-column:span 2; grid-row:span 1; }

@media (max-width:960px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card--geraet{ grid-column:span 2; min-height:320px; }
  .card--apnoe,.card--frei,.card--schnupper,.card--jugend,.card--training{ grid-column:span 1; }
}
@media (max-width:600px){
  .bento{ grid-template-columns:1fr; }
  .card--geraet,.card--apnoe,.card--frei,.card--schnupper,.card--jugend,.card--training{ grid-column:span 1; min-height:260px; }
}

/* duotone "scene" gradients standing in for photography — swap for real club photos via .card__scene backgrounds */
.scene-geraet{ background:
    radial-gradient(120% 90% at 20% 0%, rgba(111,227,207,0.35), transparent 60%),
    linear-gradient(200deg, #0e2b36, #08161d 70%); }
.scene-apnoe{ background:
    radial-gradient(100% 100% at 80% 100%, rgba(111,227,207,0.28), transparent 60%),
    linear-gradient(160deg, #0c2530, #061117 70%); }
.scene-frei{ background:
    radial-gradient(90% 90% at 10% 100%, rgba(205,185,141,0.22), transparent 60%),
    linear-gradient(190deg, #10303d, #08161d 70%); }
.scene-schnupper{ background:
    radial-gradient(100% 100% at 90% 0%, rgba(111,227,207,0.3), transparent 55%),
    linear-gradient(210deg, #123241, #08161d 70%); }
.scene-jugend{ background:
    radial-gradient(100% 100% at 20% 20%, rgba(255,214,140,0.14), transparent 55%),
    linear-gradient(200deg, #0f2c38, #08161d 70%); }
.scene-training{ background:
    radial-gradient(100% 100% at 80% 80%, rgba(111,227,207,0.22), transparent 55%),
    linear-gradient(200deg, #0e2933, #08161d 70%); }

.scene-lines{ position:absolute; inset:0; opacity:.5; mix-blend-mode:screen; }

/* ============ AUSBILDUNG (education) ============ */
.edu{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.edu__steps{ display:flex; flex-direction:column; }
.edu__step{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding-block:22px; border-top:1px solid var(--line); }
.edu__step:last-child{ border-bottom:1px solid var(--line); }
.edu__step b.n{ font-family:var(--font-mono); color:var(--aqua); font-size:0.95rem; }
.edu__step h4{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:6px; }
.edu__step p{ color:var(--foam-dim); font-size:0.92rem; max-width:46ch; }
.edu__panel{
  border-radius:22px; border:1px solid var(--line); padding:clamp(28px,4vw,44px);
  background:linear-gradient(200deg, rgba(111,227,207,0.09), rgba(111,227,207,0) 55%), var(--surface);
}
.edu__panel h3{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:14px; }
.edu__panel p{ color:var(--foam-dim); margin-bottom:26px; }
@media (max-width:900px){ .edu{ grid-template-columns:1fr; } }

/* ============ COMMUNITY ============ */
.community{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-items:stretch; }
.community__copy{ grid-column:span 5; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.community__copy p{ color:var(--foam-dim); }
.community__media{ grid-column:span 7; position:relative; border-radius:22px; overflow:hidden; min-height:420px; border:1px solid var(--line); }
.community__media .card__scene{ background:
    radial-gradient(120% 80% at 70% 10%, rgba(255,196,120,0.18), transparent 60%),
    radial-gradient(80% 80% at 0% 100%, rgba(111,227,207,0.2), transparent 55%),
    linear-gradient(200deg, #123542, #050d13 75%); }
.community__quote{ position:relative; z-index:2; padding:32px; align-self:flex-end; }
.community__quote p{ font-family:var(--font-display); font-size:1.3rem; max-width:26ch; }
.community__quote span{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:0.75rem; color:var(--foam-dim); }
@media (max-width:900px){ .community{ grid-template-columns:1fr; } .community__copy,.community__media{ grid-column:1/-1; } .community__media{ min-height:320px; } }

/* ============ FACTS ============ */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.fact{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,28px); }
.fact__num{ font-family:var(--font-mono); font-size:clamp(1.7rem,3.2vw,2.5rem); color:var(--aqua-strong); font-variant-numeric:tabular-nums; }
.fact__label{ margin-top:8px; color:var(--foam-dim); font-size:0.9rem; }
@media (max-width:760px){ .facts{ grid-template-columns:repeat(2,1fr); } }

/* ============ GALLERY ============ */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.gallery__item{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); min-height:180px; }
.gallery__item:nth-child(1){ grid-column:span 3; grid-row:span 2; min-height:380px; }
.gallery__item:nth-child(2){ grid-column:span 3; }
.gallery__item:nth-child(3){ grid-column:span 2; }
.gallery__item:nth-child(4){ grid-column:span 2; }
.gallery__item:nth-child(5){ grid-column:span 2; }
.gallery__item:nth-child(6){ grid-column:span 3; }
.gallery__item:nth-child(7){ grid-column:span 3; }
.gallery__item:nth-child(8){ grid-column:span 3; }
.gallery__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  font-size:0.82rem; color:var(--foam-dim); background:linear-gradient(to top, rgba(5,13,19,0.85), transparent);
}
.gallery__cap b{ color:var(--foam); display:block; font-family:var(--font-display); font-size:0.98rem; font-weight:600; }
@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery__item, .gallery__item:nth-child(1){ grid-column:span 1 !important; min-height:220px; }
}

/* colour-wash tints over the real photos, kept from the original generative palette for brand cohesion */
.gallery__tint{ position:absolute; inset:0; z-index:1; opacity:.32; mix-blend-mode:multiply; }
.g1{ background:radial-gradient(110% 90% at 30% 10%,#1c4553,transparent 60%),linear-gradient(200deg,#0e2b36,#060f14 75%); }
.g2{ background:radial-gradient(100% 100% at 80% 90%,#2f8f82,transparent 55%),linear-gradient(190deg,#0c2530,#060f14 75%); }
.g3{ background:radial-gradient(100% 100% at 20% 100%,#cdb98d55,transparent 55%),linear-gradient(200deg,#132f3a,#060f14 75%); }
.g4{ background:radial-gradient(100% 100% at 90% 10%,#6fe3cf44,transparent 55%),linear-gradient(210deg,#0f2c38,#060f14 75%); }
.g5{ background:radial-gradient(100% 100% at 10% 10%,#ffd68c33,transparent 55%),linear-gradient(200deg,#0e2933,#060f14 75%); }
.g6{ background:radial-gradient(100% 100% at 70% 100%,#6fe3cf33,transparent 55%),linear-gradient(190deg,#123241,#060f14 75%); }
.g7{ background:radial-gradient(100% 100% at 30% 0%,#cdb98d33,transparent 55%),linear-gradient(200deg,#102836,#060f14 75%); }
.g8{ background:radial-gradient(100% 100% at 60% 100%,#ffd68c2e,transparent 55%),linear-gradient(200deg,#12303a,#060f14 75%); }

/* ============ GEWÄSSERSCHUTZ ============ */
.env{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.env__art{ position:relative; border-radius:22px; overflow:hidden; min-height:360px; border:1px solid var(--line); }
.env__art .card__scene{ background:
    radial-gradient(90% 90% at 20% 20%, rgba(205,185,141,0.28), transparent 60%),
    radial-gradient(80% 80% at 90% 90%, rgba(111,227,207,0.2), transparent 55%),
    linear-gradient(200deg, #14302a, #050d13 75%); }
.env ul{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.env li{ display:grid; grid-template-columns:22px 1fr; gap:14px; color:var(--foam-dim); font-size:0.95rem; }
.env li::before{ content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--stone); }
@media (max-width:900px){ .env{ grid-template-columns:1fr; } .env__art{ order:-1; min-height:280px; } }

/* ============ FINAL CTA ============ */
.final{
  position:relative; overflow:hidden; text-align:center; padding-block:clamp(90px,14vw,150px);
  background:radial-gradient(120% 100% at 50% 120%, #123b47, #050d13 65%);
}
.final h2{ font-size:clamp(2.2rem,5.5vw,3.8rem); max-width:18ch; margin:0 auto; }
.final p{ margin:20px auto 0; max-width:44ch; color:var(--foam-dim); }
.final__actions{ margin-top:38px; display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--abyss); border-top:1px solid var(--line); padding-block:56px 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
.footer-grid h5{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--foam-dim); margin-bottom:16px; }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ text-decoration:none; color:var(--foam); font-size:0.92rem; }
.footer-grid a:hover{ color:var(--aqua); }
.footer-brand p{ color:var(--foam-dim); font-size:0.9rem; max-width:34ch; margin-top:14px; }
.footer-donate{ margin-top:18px; }
.footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  font-size:0.82rem; color:var(--foam-dim);
}
.footer-bottom ul{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom a{ color:var(--foam-dim); text-decoration:none; }
.footer-bottom a:hover{ color:var(--aqua); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============ TRAINING (Zeiten + Karte) ============ */
.train{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,6vw,72px); align-items:stretch; }
.train__info{ display:flex; flex-direction:column; justify-content:center; gap:26px; }
.train__info h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:14ch; margin-top:14px; }

.schedule li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 24px; align-items:baseline;
  padding-block:22px; border-top:1px solid var(--line);
}
.schedule li:last-child{ border-bottom:1px solid var(--line); }
.schedule__day{ font-family:var(--font-mono); font-size:0.95rem; color:var(--aqua); text-transform:uppercase; letter-spacing:0.06em; }
.schedule__time{ font-family:var(--font-mono); font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--aqua-strong); font-variant-numeric:tabular-nums; }
.schedule__what{ grid-column:2; color:var(--foam-dim); font-size:0.92rem; }

.venue{ display:grid; grid-template-columns:22px 1fr; gap:14px; font-style:normal; color:var(--foam-dim); }
.venue svg{ width:20px; height:20px; margin-top:3px; color:var(--stone); }
.venue strong{ display:block; color:var(--foam); font-weight:600; }
.train__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.map{
  position:relative; overflow:hidden; min-height:440px;
  border-radius:22px; border:1px solid var(--line);
  background:
    radial-gradient(90% 90% at 20% 20%, rgba(111,227,207,0.16), transparent 60%),
    radial-gradient(80% 80% at 90% 90%, rgba(205,185,141,0.14), transparent 55%),
    linear-gradient(200deg, #12303a, #050d13 75%);
}
.map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  /* dunkle Karte passend zum Seitenstil; Zeile entfernen für die normale Google-Optik */
  filter:invert(.92) hue-rotate(180deg) saturate(.7) contrast(.95);
}
.map__art{ position:absolute; inset:0; width:100%; height:100%; }
.map__consent{
  position:absolute; inset:0; z-index:2; padding:32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.map__pin{ width:44px; height:44px; color:var(--aqua); filter:drop-shadow(0 0 14px rgba(111,227,207,0.45)); }
.map__addr{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.map__note{ max-width:40ch; font-size:0.82rem; color:var(--foam-dim); }
.map__note a{ color:var(--aqua); }
.map__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }

@media (max-width:900px){ .train{ grid-template-columns:1fr; } .map{ min-height:360px; } }

/* ============ MITGLIEDSBEITRÄGE ============ */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.plan{
  display:flex; flex-direction:column;
  border-radius:22px; border:1px solid var(--line); padding:clamp(26px,3.5vw,40px);
  background:linear-gradient(200deg, rgba(111,227,207,0.09), rgba(111,227,207,0) 55%), var(--surface);
}
.plan--family{ background:linear-gradient(200deg, rgba(205,185,141,0.13), rgba(205,185,141,0) 55%), var(--surface); }
.plan--family .eyebrow{ color:var(--stone); }
.plan--family .eyebrow::before{ background:var(--stone); }
.plan h3{ font-size:clamp(1.6rem,3vw,2.1rem); margin:14px 0 10px; }
.plan__lead{ color:var(--foam-dim); margin-bottom:28px; }

.tiers{ margin-top:auto; }
.tier{
  display:grid; grid-template-columns:1fr auto; gap:4px 20px; align-items:baseline;
  padding-block:20px; border-top:1px solid var(--line);
}
.tier:last-child{ border-bottom:1px solid var(--line); }
.tier__name{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; }
.tier__age{ display:block; margin-top:2px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; color:var(--foam-dim); }
.tier__price{ font-family:var(--font-mono); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--aqua-strong); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.plan--family .tier__price{ color:var(--stone); }
.tier__price small{ font-size:0.8rem; color:var(--foam-dim); }
.tier__fee{ grid-column:1 / -1; font-size:0.85rem; color:var(--foam-dim); }
.tier__fee b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); }

.plans-foot{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.plans-foot p{ max-width:56ch; color:var(--foam-dim); font-size:0.92rem; }
.plans-foot__actions{ display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }

/* ============ VORSTAND & AUSBILDER · Variante B: Roster-Liste ============ */
.portrait-ph{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='50' cy='48' r='17' fill='%236fe3cf' fill-opacity='.22'/%3E%3Cpath d='M14 125c2-28 17-44 36-44s34 16 36 44z' fill='%236fe3cf' fill-opacity='.22'/%3E%3C/svg%3E") center/cover no-repeat,
    radial-gradient(100% 100% at 30% 0%, rgba(111,227,207,0.25), transparent 60%),
    linear-gradient(200deg, #123241, #08161d 75%);
}

.team-lists{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,72px); align-items:start; }
.team-list h3{ font-size:clamp(1.4rem,2.4vw,1.8rem); margin:14px 0 24px; }
.member{
  display:grid; grid-template-columns:88px 1fr; gap:20px; align-items:start;
  padding-block:22px; border-top:1px solid var(--line);
}
.member:last-child{ border-bottom:1px solid var(--line); }
.member__photo{
  position:relative; width:88px; height:88px; border-radius:50%; overflow:hidden; flex:none;
  border:1px solid var(--line-strong); box-shadow:0 0 0 4px rgba(111,227,207,0.10);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.member:hover .member__photo{ border-color:var(--aqua); box-shadow:0 0 0 5px rgba(111,227,207,0.18); }
.member__photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85); transition:filter .4s ease;
}
.member:hover .member__photo img{ filter:none; }
.member__role{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--aqua); display:block; margin-bottom:4px;
}
.member h4{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:6px; }
.member p{ color:var(--foam-dim); font-size:0.92rem; max-width:46ch; }

@media (max-width:900px){ .team-lists{ grid-template-columns:1fr; } }
@media (max-width:420px){ .member{ grid-template-columns:64px 1fr; gap:16px; } .member__photo{ width:64px; height:64px; } }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============ UNTERSEITEN (Impressum, Datenschutz, Satzung) ============ */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(150px,20vw,210px) 0 clamp(56px,8vw,88px);
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(111,227,207,0.13), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(205,185,141,0.08), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--abyss) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero__waves{
  position:absolute; left:0; right:0; bottom:18px; width:100%; height:60px;
  color:var(--aqua); opacity:.16; pointer-events:none;
}
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--foam-dim); margin-bottom:28px; }
.crumbs a{ text-decoration:none; color:var(--foam-dim); transition:color .2s ease; }
.crumbs a:hover{ color:var(--aqua); }
.crumbs span[aria-hidden]{ opacity:.5; }
.page-hero h1{ font-size:clamp(2.6rem,7vw,5rem); line-height:1.02; letter-spacing:-0.025em; margin-top:18px; max-width:14ch; }
.page-hero__lead{ margin-top:22px; max-width:56ch; font-size:clamp(1.02rem,1.5vw,1.15rem); color:var(--foam-dim); }
.page-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.page-hero__meta span{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; color:var(--foam);
  border:1px solid var(--line-strong); border-radius:999px; padding:6px 14px; background:rgba(5,13,19,0.35);
}

.legal{ padding-block:clamp(48px,7vw,96px) clamp(72px,10vw,128px); }
.legal__grid{ display:grid; grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:start; }

/* Inhaltsverzeichnis */
.toc{ position:sticky; top:104px; max-height:calc(100vh - 128px); overflow:auto; scrollbar-width:thin; }
.toc summary{ list-style:none; cursor:default; margin-bottom:18px; }
.toc summary::-webkit-details-marker{ display:none; }
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc li a{
  display:flex; gap:10px; padding:7px 0 7px 16px; margin-left:-1px;
  border-left:1px solid transparent; text-decoration:none;
  font-size:0.86rem; line-height:1.4; color:var(--foam-dim);
  transition:color .2s ease, border-color .2s ease;
}
.toc li a:hover{ color:var(--foam); }
.toc li a.is-active{ color:var(--aqua); border-left-color:var(--aqua); }
.toc__no{ font-family:var(--font-mono); font-size:0.78rem; color:var(--aqua); min-width:2.6em; }

/* Fließtext */
.prose{ max-width:72ch; color:var(--foam-dim); font-size:1rem; line-height:1.75; }
.prose > * + *{ margin-top:16px; }
.prose h2{
  display:flex; align-items:baseline; gap:14px;
  font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.25; color:var(--foam);
  margin-top:clamp(48px,6vw,64px); padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line);
  scroll-margin-top:110px;
}
.prose > h2:first-child, .prose > .info-cards:first-child{ margin-top:0; }
.prose > h2:first-child{ border-top:none; padding-top:0; }
.prose h2 + *{ margin-top:18px; }
.para-no{
  flex:none; font-family:var(--font-mono); font-size:0.8rem; font-weight:500; letter-spacing:0.04em;
  color:var(--aqua); border:1px solid rgba(111,227,207,0.35); border-radius:999px; padding:3px 11px;
  transform:translateY(-3px);
}
.prose strong{ color:var(--foam); font-weight:600; }
.prose a{ color:var(--aqua); text-underline-offset:3px; }
.prose a:hover{ color:var(--aqua-strong); }
.prose address{ font-style:normal; color:var(--foam); }
.prose ul{ display:flex; flex-direction:column; gap:8px; }
.prose ul li{ position:relative; padding-left:22px; }
.prose ul li::before{ content:""; position:absolute; left:2px; top:.8em; width:8px; height:1px; background:var(--aqua); }

/* nummerierte Absätze (Satzung) */
.clause{ display:grid; grid-template-columns:2.6em 1fr; gap:0 6px; }
.clause__no{ font-family:var(--font-mono); font-size:0.85rem; color:var(--aqua); padding-top:.15em; }
.clause--sub{ margin-left:2.6em; }
.clause--sub .clause__no{ color:var(--stone); }
.prose .clause + .clause{ margin-top:12px; }
.prose .subhead{ color:var(--foam); font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin-top:26px; }

/* Infokarten (Impressum) */
.info-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:560px){ .info-cards{ grid-template-columns:1fr; } }
.info-card{
  border:1px solid var(--line); border-radius:18px; padding:22px 24px;
  background:linear-gradient(200deg, rgba(111,227,207,0.07), rgba(111,227,207,0) 55%), var(--navy);
}
.prose .info-card h2{
  display:block; margin:0 0 12px; padding:0; border:0;
  font-family:var(--font-mono); font-size:0.74rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--aqua);
}
.info-card address{ line-height:1.65; }

/* Hinweisbox */
.notice{
  border:1px solid rgba(205,185,141,0.35); border-left:3px solid var(--stone); border-radius:14px;
  padding:18px 22px; background:rgba(205,185,141,0.06); color:var(--foam);
}
.notice p + p{ margin-top:8px; }

@media (max-width:900px){
  .legal__grid{ grid-template-columns:1fr; gap:28px; }
  .toc{ position:static; max-height:none; border:1px solid var(--line); border-radius:16px; padding:16px 20px; background:var(--navy); }
  .toc summary{ cursor:pointer; margin:0; display:flex; justify-content:space-between; align-items:center; }
  .toc summary::after{ content:"+"; font-family:var(--font-mono); color:var(--aqua); font-size:1.1rem; }
  .toc[open] summary::after{ content:"–"; }
  .toc[open] summary{ margin-bottom:14px; }
  .clause--sub{ margin-left:1.2em; }
}
@media print{
  .nav, .dive-rail, .toc, .site-footer, .page-hero__waves{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page-hero{ background:none; padding:0 0 24px; }
  .prose, .prose h2, .prose strong, .prose address{ color:#000; }
  .legal__grid{ display:block; }
}
@media (max-width:600px){ .page-hero__waves{ bottom:4px; height:36px; } .page-hero{ padding-bottom:64px; } }

/* ============ RECHTSTEXTE ALS OVERLAY (Impressum, Datenschutz, Satzung) ============ */
.legal-dialog{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--foam);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.legal-dialog::backdrop{ background:rgba(3,9,13,0.72); backdrop-filter:blur(6px); }
.legal-dialog__panel{
  position:relative; min-height:100%;
  width:min(1180px, 100%); margin-left:auto;
  background:
    radial-gradient(70% 40% at 90% 0%, rgba(111,227,207,0.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--abyss) 420px);
  border-left:1px solid var(--line);
  box-shadow:-40px 0 120px -40px rgba(0,0,0,0.8);
  padding:0 clamp(20px,5vw,64px) clamp(56px,8vw,96px);
}
.legal-dialog[open] .legal-dialog__panel{ animation:legalIn .38s cubic-bezier(.2,.7,.2,1); }
.legal-dialog[open]::backdrop{ animation:legalFade .3s ease; }
@keyframes legalIn{ from{ transform:translateX(48px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes legalFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .legal-dialog[open] .legal-dialog__panel, .legal-dialog[open]::backdrop{ animation:none; } }

.legal-dialog__bar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-inline:calc(-1 * clamp(20px,5vw,64px)); padding:18px clamp(20px,5vw,64px);
  background:rgba(8,20,28,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.legal-dialog__close{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--foam);
  cursor:pointer; transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.legal-dialog__close svg{ width:20px; height:20px; }
.legal-dialog__close:hover{ border-color:var(--aqua); color:var(--aqua); transform:rotate(90deg); }
.legal-dialog__intro{ padding:clamp(36px,6vw,64px) 0 clamp(32px,5vw,48px); border-bottom:1px solid var(--line); margin-bottom:clamp(32px,5vw,56px); }
.legal-dialog__title{ font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.02; letter-spacing:-0.025em; max-width:14ch; }
.legal-dialog .toc{ top:100px; max-height:calc(100vh - 124px); }
.legal-dialog .prose h2{ scroll-margin-top:100px; }
body:has(.legal-dialog[open]){ overflow:hidden; }

/* Ohne JavaScript: Rechtstexte offen am Seitenende anzeigen */
.no-js .legal-dialog{ display:block; position:static; height:auto; overflow:visible; }
.no-js .legal-dialog__close{ display:none; }

@media (max-width:900px){
  .legal-dialog__panel{ border-left:0; }
  .legal-dialog .toc{ position:static; max-height:none; }
}
@media print{
  body:has(.legal-dialog[open]) > *:not(.legal-dialog[open]){ display:none !important; }
  .legal-dialog[open]{ position:static; overflow:visible; height:auto; }
  .legal-dialog__panel{ background:none; box-shadow:none; border:0; width:auto; padding:0; animation:none !important; }
  .legal-dialog__bar, .legal-dialog .toc{ display:none !important; }
  .legal-dialog__title{ color:#000; }
}

/* ============ HILFSKLASSEN (ersetzen frühere style-Attribute, CSP-freundlich) ============ */
.u-h2{ font-size:clamp(1.9rem,3.6vw,2.6rem) !important; }
.u-h2s{ font-size:clamp(1.9rem,3.6vw,2.5rem) !important; }
.u-mt14{ margin-top:14px !important; }
.u-mt16{ margin-top:16px !important; }
.u-mt28{ margin-top:28px !important; }
.u-mb4{ margin-bottom:4px !important; }
.u-mw14{ max-width:14ch !important; }
.u-dim{ color:var(--foam-dim) !important; }
.u-center{ justify-content:center !important; }
.u-pb0{ padding-block:0 !important; }
.u-pbfacts{ padding-block:clamp(48px,7vw,80px) !important; }

/* ============ 404 ============ */
.notfound{ min-height:100vh; display:flex; align-items:center; padding-block:80px; border-bottom:0; }
.notfound .brand{ margin-bottom:48px; }
.notfound .eyebrow{ display:flex; }

/* ============ TAUCHWISSEN: Teaser-Sektion ============ */
.learn-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
.learn-note{ grid-column:1 / -1; }
.learn-tile{
  display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:clamp(20px,3vw,36px); align-items:center;
  padding:clamp(20px,3vw,28px); border-radius:22px; border:1px solid var(--line); text-decoration:none; color:var(--foam);
  background:linear-gradient(200deg, rgba(111,227,207,0.09), rgba(111,227,207,0) 55%), var(--surface);
  transition:border-color .25s ease, transform .25s ease;
}
.learn-tile:hover{ border-color:var(--aqua); transform:translateY(-2px); }
.learn-tile__art{ width:100%; height:auto; display:block; }
.learn-tile h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); margin:10px 0 10px; }
.learn-tile p{ color:var(--foam-dim); font-size:0.95rem; }
.learn-tile__cta{ display:inline-flex; gap:8px; margin-top:16px; color:var(--aqua); font-weight:600; font-size:0.92rem; }
.learn-tile:hover .arrow{ transform:translateX(4px); }
.learn-note{ border:1px dashed var(--line-strong); border-radius:22px; padding:18px clamp(20px,3vw,28px); display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.learn-note p{ color:var(--foam-dim); font-size:0.95rem; }
@media (max-width:900px){ .learn-tiles{ grid-template-columns:1fr; } }
@media (max-width:560px){ .learn-tile{ grid-template-columns:1fr; } }

/* ============ TAUCHWISSEN: Simulator ============ */
.sim{
  display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(20px,3vw,36px);
  grid-template-areas:"water colors" "water panel" "water charts"; grid-template-rows:auto auto 1fr;
  margin-bottom:clamp(40px,6vw,72px);
}
.sim__water{
  grid-area:water; position:relative; height:clamp(520px,72vh,680px); border-radius:22px; overflow:hidden;
  border:1px solid var(--line); touch-action:none; cursor:ns-resize; user-select:none;
  background:linear-gradient(180deg, #9fd3dc 0, #6bb6c2 56px, #2a8a93 56px, #17606c 18%, #0d3c49 40%, #07212c 66%, #030b11 100%);
}
.sim__sky{ position:absolute; left:0; right:0; top:0; height:56px; background:linear-gradient(180deg,#9fd3dc,#6bb6c2); opacity:.35; }
.sim__sky::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:rgba(238,244,241,.7); }
.sim__rays{
  position:absolute; inset:56px 0 0 0; pointer-events:none; opacity:.35;
  background:
    linear-gradient(100deg, transparent 20%, rgba(207,238,231,.12) 26%, transparent 32%),
    linear-gradient(80deg, transparent 50%, rgba(207,238,231,.09) 56%, transparent 62%),
    linear-gradient(95deg, transparent 70%, rgba(207,238,231,.07) 74%, transparent 79%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%); mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
}
.sim__scale{ position:absolute; left:0; top:0; bottom:0; width:100%; margin:0; padding:0; list-style:none; pointer-events:none; }
.sim__scale li{
  position:absolute; left:0; right:0; height:0; border-top:1px dashed rgba(238,244,241,.12);
  font-family:var(--font-mono); font-size:0.7rem; color:rgba(238,244,241,.6);
}
.sim__scale li span{ position:absolute; left:10px; top:-0.75em; background:transparent; }
.sim__scale li.is-surface{ border-top-color:transparent; }
.sim__scale li.is-surface span{ top:6px; }
.sim__scale li.is-major{ border-top-style:solid; border-top-color:rgba(238,244,241,.2); }
.sim__balloon{
  position:absolute; left:58%; top:0; width:92px; transform:translate(-50%,-36%); z-index:2;
  outline:none; cursor:grab; touch-action:none; will-change:top;
}
.sim__balloon svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); transform-origin:50% 36%; }
.sim__balloon:focus-visible svg{ filter:drop-shadow(0 0 0 2px var(--aqua)) drop-shadow(0 0 10px rgba(111,227,207,.6)); }
.sim__water.is-dragging, .sim__water.is-dragging .sim__balloon{ cursor:grabbing; }
.sim__hint{
  position:absolute; right:12px; bottom:12px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--foam-dim); background:rgba(5,13,19,.55); border:1px solid var(--line); border-radius:999px; padding:5px 10px; transition:opacity .4s ease;
}
.sim__hint.is-hidden{ opacity:0; }

.sim__panel{ grid-area:panel; display:flex; flex-direction:column; gap:22px; }
.sim__colors{ grid-area:colors; border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.sim__colors legend{ margin-bottom:12px; padding:0; }
.swatch{
  position:relative; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 16px 9px 10px; border-radius:999px; border:1px solid var(--line-strong); font-size:0.9rem; color:var(--foam);
  transition:border-color .2s ease, background .2s ease;
}
.swatch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.swatch__dot{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 -3px 4px rgba(0,0,0,.25); }
.swatch__dot--red{ background:#e5383b; } .swatch__dot--yellow{ background:#f4d03f; } .swatch__dot--green{ background:#2fb36a; } .swatch__dot--blue{ background:#2f6fe0; }
.swatch:has(input:checked){ border-color:var(--aqua); background:rgba(111,227,207,.1); }
.swatch:has(input:focus-visible){ outline:2px solid var(--aqua); outline-offset:3px; }

.sim__readouts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
.readout{ border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--navy); }
.readout dt{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--foam-dim); }
.readout dd{ margin:6px 0 0; font-family:var(--font-mono); font-size:0.85rem; color:var(--foam-dim); white-space:nowrap; }
.readout dd b{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--foam); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.readout--hero{ border-color:rgba(111,227,207,.45); background:linear-gradient(200deg, rgba(111,227,207,0.12), rgba(111,227,207,0) 60%), var(--navy); }
.readout--hero dd b{ color:var(--aqua); }

.sim__meters{ display:flex; flex-direction:column; gap:14px; }
.meter__head{ display:flex; justify-content:space-between; gap:12px; font-size:0.86rem; color:var(--foam-dim); margin-bottom:7px; }
.meter__head b{ white-space:nowrap; font-family:var(--font-mono); font-weight:500; color:var(--foam); font-variant-numeric:tabular-nums; }
.meter__track{ height:8px; border-radius:999px; background:rgba(238,244,241,.08); overflow:hidden; }
.meter__fill{ height:100%; width:100%; border-radius:999px; background:var(--foam); transition:width .15s linear, background-color .15s linear; }
.meter__fill--aqua{ background:var(--aqua); }
.sim__compare{ display:flex; flex-wrap:wrap; gap:18px; font-size:0.86rem; color:var(--foam-dim); }
.compare{ display:inline-flex; align-items:center; gap:9px; }
.compare i{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); display:inline-block; }
.compare b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); }

.sim__jump{ display:flex; flex-wrap:wrap; gap:8px; }
.sim__jump button{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--foam); background:transparent; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 13px; transition:border-color .2s ease, color .2s ease;
}
.sim__jump button:hover{ border-color:var(--aqua); color:var(--aqua); }

.sim__charts{ grid-area:charts; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-self:end; }
.minichart{ margin:0; border:1px solid var(--line); border-radius:18px; padding:16px 18px 14px; background:var(--navy); }
.minichart figcaption{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.minichart__sub{ font-size:0.78rem; color:var(--foam-dim); }
.minichart__plot{ position:relative; }
.minichart svg{ width:100%; height:auto; display:block; overflow:visible; }
.minichart__tip{
  position:absolute; pointer-events:none; transform:translate(-50%, calc(-100% - 12px));
  background:var(--abyss); border:1px solid var(--line-strong); border-radius:10px; padding:6px 10px;
  font-family:var(--font-mono); font-size:0.74rem; color:var(--foam); white-space:nowrap; box-shadow:var(--shadow);
}
.pv-grid{ stroke:rgba(238,244,241,.08); stroke-width:1; }
.pv-axis{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:10px; }
.pv-line{ fill:none; stroke:var(--aqua); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pv-area{ fill:rgba(111,227,207,.08); }
.pv-guide{ stroke:rgba(238,244,241,.35); stroke-width:1; stroke-dasharray:3 3; }
.pv-dot{ fill:var(--aqua); stroke:var(--navy); stroke-width:2; }
.pv-hover{ fill:var(--foam); stroke:var(--navy); stroke-width:2; }

.spectrum{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.spectrum li{ display:grid; grid-template-columns:56px 1fr 44px; align-items:center; gap:10px; font-size:0.8rem; color:var(--foam-dim); }
.spectrum__track{ height:8px; border-radius:999px; background:rgba(238,244,241,.08); overflow:hidden; }
.spectrum__fill{ height:100%; border-radius:0 4px 4px 0; transition:width .15s linear; }
.spectrum b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); text-align:right; font-variant-numeric:tabular-nums; }

/* Lerntext */
.learn-text .prose{ max-width:78ch; }
.prose .formula{
  font-family:var(--font-mono); font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--aqua);
  padding:14px 20px; border:1px solid rgba(111,227,207,.3); border-radius:14px; background:rgba(111,227,207,.05); display:inline-block;
}
.learn-table{ overflow-x:auto; }
.prose table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.prose th{ text-align:left; font-family:var(--font-mono); font-weight:500; font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--foam-dim); padding:10px 12px; border-bottom:1px solid var(--line-strong); }
.prose td{ padding:10px 12px; border-bottom:1px solid var(--line); color:var(--foam); font-variant-numeric:tabular-nums; }
.learn-table--inline{ max-width:480px; }

@media (max-width:1000px){
  .sim{ grid-template-columns:minmax(180px,240px) minmax(0,1fr); }
  .sim__readouts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sim__charts{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .sim{ grid-template-columns:minmax(0,44fr) minmax(0,56fr); grid-template-areas:"colors colors" "water panel" "charts charts"; gap:14px; }
  .sim__water{ height:auto; min-height:480px; }
  .sim__panel{ gap:14px; }
  .sim__readouts{ grid-template-columns:1fr; gap:8px; }
  .readout{ padding:10px 12px; }
  .readout dd b{ font-size:1.35rem; }
  .sim__balloon{ width:72px; left:60%; }
  .sim__compare{ flex-direction:column; gap:8px; }
  .swatch{ padding:7px 12px 7px 8px; }
}
@media (prefers-reduced-motion: reduce){ .meter__fill, .spectrum__fill{ transition:none; } }

@media (max-width:1100px){ .learn-tile{ grid-template-columns:1fr; } .learn-tile__art{ max-width:260px; } }

/* ============ TAUCHWISSEN: Dekompression ============ */
.deco{ grid-template-columns:minmax(200px,260px) minmax(0,1fr); }
.deco__water{ transition:border-color .2s ease, box-shadow .2s ease; }
.deco__diver{
  position:absolute; left:52%; top:0; width:46px; transform:translate(-50%,-30%); z-index:2;
  outline:none; cursor:grab; touch-action:none;
}
.deco__diver svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.deco__diver:focus-visible svg{ filter:drop-shadow(0 0 0 2px var(--aqua)) drop-shadow(0 0 10px rgba(111,227,207,.6)); }
.deco__bubbles{ position:absolute; left:50%; top:-6px; width:20px; height:40px; transform:translateX(-10%); pointer-events:none; }
.deco__bubbles i{ position:absolute; bottom:0; width:6px; height:6px; border-radius:50%; border:1px solid rgba(207,238,231,.7); opacity:0; animation:decoBubble 2.4s ease-in infinite; }
.deco__bubbles i:nth-child(2){ left:8px; width:4px; height:4px; animation-delay:.8s; }
.deco__bubbles i:nth-child(3){ left:3px; width:5px; height:5px; animation-delay:1.6s; }
.deco__water.is-surface .deco__bubbles{ display:none; }
@keyframes decoBubble{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.9; } 100%{ transform:translateY(-46px) translateX(4px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .deco__bubbles{ display:none; } }

.deco__ceiling{
  position:absolute; left:0; right:0; height:0; border-top:2px dashed #e66767; z-index:1; pointer-events:none;
}
.deco__ceiling > span{
  position:absolute; right:10px; top:4px; font-family:var(--font-mono); font-size:0.7rem; color:#ffd9d9;
  background:rgba(120,20,24,.75); border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.deco__ceiling::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:600px; background:linear-gradient(0deg, rgba(230,103,103,.10), rgba(230,103,103,0) 70%); transform:translateY(-100%); }

.deco__alarm{
  position:absolute; left:10px; right:10px; top:66px; z-index:3; text-align:center;
  font-weight:600; font-size:0.86rem; line-height:1.35; color:#fff; background:#b3261e; border-radius:12px; padding:10px 12px;
  box-shadow:0 10px 30px -10px rgba(179,38,30,.8);
  animation:decoBlink .7s steps(2, jump-none) infinite;
}
.deco__alarm small{ display:block; font-weight:400; font-family:var(--font-mono); font-size:0.72rem; opacity:.9; margin-top:2px; }
.deco__water.is-alarm{ border-color:#e66767; animation:decoFrame .7s steps(2, jump-none) infinite; }
@keyframes decoBlink{ 0%{ background:#b3261e; } 100%{ background:#e5484d; } }
@keyframes decoFrame{ 0%{ box-shadow:0 0 0 2px rgba(230,103,103,.9), inset 0 0 40px rgba(230,72,77,.35); } 100%{ box-shadow:0 0 0 2px rgba(230,103,103,.2), inset 0 0 0 rgba(230,72,77,0); } }
@media (prefers-reduced-motion: reduce){ .deco__alarm, .deco__water.is-alarm{ animation:none; } .deco__water.is-alarm{ box-shadow:0 0 0 3px #e66767; } }

.deco__controls{ align-items:flex-end; gap:14px 18px; }
.deco__field{ display:flex; flex-direction:column; gap:8px; }
.deco__field label{ margin:0; }
.deco__num{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); border-radius:12px; padding:0 12px; background:var(--navy); }
.deco__num input{
  width:3.4em; background:transparent; border:0; color:var(--foam); font-family:var(--font-mono); font-size:1.05rem; padding:9px 0; text-align:right;
  -moz-appearance:textfield;
}
.deco__num input::-webkit-outer-spin-button, .deco__num input::-webkit-inner-spin-button{ margin:0; }
.deco__num:focus-within{ border-color:var(--aqua); }
.deco__num span{ color:var(--foam-dim); font-family:var(--font-mono); font-size:0.85rem; }
.deco__field--speed{ min-width:170px; flex:1; max-width:260px; }
.deco__field--speed b{ color:var(--foam); font-weight:500; margin-left:6px; }
.deco__field--speed input[type=range]{ width:100%; accent-color:var(--aqua); }
.deco__buttons{ display:flex; gap:8px; }
.deco__btn{
  font-family:var(--font-body); font-size:0.86rem; font-weight:600; color:var(--foam); background:transparent; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px; transition:border-color .2s ease, color .2s ease;
}
.deco__btn:hover{ border-color:var(--aqua); color:var(--aqua); }
.deco__btn[aria-pressed="true"]{ border-color:var(--aqua); color:var(--abyss); background:var(--aqua); }

#dNdlBox.is-deco{ border-color:rgba(230,103,103,.6); background:linear-gradient(200deg, rgba(230,103,103,0.16), rgba(230,103,103,0) 60%), var(--navy); }
#dNdlBox.is-deco dd b{ color:#ff9b9b; }
#dNdlBox.is-deco dt::before{ content:"⚠ "; }

.deco__status{ display:flex; flex-direction:column; gap:12px; }
.deco__rate{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:0.86rem; color:var(--foam-dim); }
.deco__rate b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); font-variant-numeric:tabular-nums; }
.deco__rate.is-fast b{ color:#ff9b9b; }
.deco__rate-max{ font-family:var(--font-mono); font-size:0.74rem; }
.deco__plan{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:40px; }
.deco__plan-empty{ font-size:0.88rem; color:var(--foam-dim); }
.deco__plan-title{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:#ff9b9b; margin-right:4px; }
.stop{ display:inline-flex; align-items:baseline; gap:6px; border:1px solid rgba(230,103,103,.45); border-radius:999px; padding:6px 12px; font-family:var(--font-mono); font-size:0.82rem; color:var(--foam); background:rgba(230,103,103,.08); }
.stop b{ font-weight:500; color:#ffb3b3; }
.stop.is-current{ border-color:#e66767; background:rgba(230,103,103,.2); }

.deco__charts{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.deco__legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:0.74rem; color:var(--foam-dim); }
.deco__legend span{ display:inline-flex; align-items:center; gap:6px; }
.deco__legend em{ font-style:normal; color:var(--foam-dim); }
.lg{ display:inline-block; width:18px; height:0; border-top:2px solid; }
.lg--amb{ border-color:rgba(238,244,241,.55); border-top-width:1px; }
.lg--m{ border-color:#e66767; }
.lg--gf{ border-color:#e6a667; border-top-style:dashed; }
.lg--insp{ border-color:rgba(111,227,207,.6); border-top-style:dotted; }
.dc-grid{ stroke:rgba(238,244,241,.07); stroke-width:1; }
.dc-axis{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:10px; }
.dc-title{ fill:var(--foam-dim); font-family:var(--font-body); font-size:10px; }
.dc-amb{ stroke:rgba(238,244,241,.55); stroke-width:1; fill:none; }
.dc-surface{ stroke:rgba(238,244,241,.3); stroke-width:1; stroke-dasharray:4 4; }
.dc-m{ stroke:#e66767; stroke-width:2; fill:none; }
.dc-gf{ stroke:#e6a667; stroke-width:1.5; stroke-dasharray:5 4; fill:none; }
.dc-insp{ stroke:rgba(111,227,207,.6); stroke-width:1.2; stroke-dasharray:2 3; fill:none; }
.dc-zone{ fill:rgba(230,103,103,.06); }
.dc-trail{ fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; opacity:.75; }
.dc-dot{ stroke:var(--navy); stroke-width:2; }
.dc-lbl{ font-family:var(--font-mono); font-size:9px; fill:var(--foam); }

.tissues li{ grid-template-columns:78px 1fr 58px; }
.tissues .t-name{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tissues .t-name i{ width:10px; height:10px; border-radius:50%; flex:none; }
.tissues .spectrum__track{ position:relative; overflow:visible; }
.tissues .spectrum__fill{ max-width:100%; }
.tissues .t-gf{ position:absolute; top:-4px; bottom:-4px; width:2px; background:#e6a667; border-radius:1px; }
.tissues .t-val{ display:inline-flex; justify-content:flex-end; gap:4px; }
.tissues .t-dir{ font-size:0.7rem; color:var(--foam-dim); width:1em; text-align:center; }
.tissues li.is-over .t-val{ color:#ff9b9b; }
.tissues li.is-over .spectrum__fill{ background:#e66767 !important; }

@media (max-width:1000px){
  .deco{ grid-template-columns:minmax(170px,220px) minmax(0,1fr); }
  .deco__charts{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .deco{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
  .deco__diver{ width:40px; }
  .deco__controls{ gap:12px; }
  .deco__field--speed{ min-width:0; max-width:none; flex-basis:100%; }
  .deco__alarm{ font-size:0.78rem; top:62px; }
}

/* Dekostopps: feste Tiefen + Marken in der Wassersäule */
.stops{ display:flex; flex-wrap:wrap; gap:8px; }
.stop{ flex-direction:column; align-items:flex-start; gap:2px; border-radius:12px; padding:7px 12px; min-width:70px; }
.stop span{ font-size:0.95rem; color:var(--foam); }
.stop.is-none{ border-color:var(--line); background:transparent; }
.stop.is-none b, .stop.is-none span{ color:var(--foam-dim); opacity:.7; }
.stop.is-current{ box-shadow:0 0 0 2px rgba(230,103,103,.35); }
.deco__plan{ flex-direction:column; align-items:flex-start; }
.deco__stops{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.deco__mark{
  position:absolute; left:48px; transform:translateY(-50%); font-family:var(--font-mono); font-size:0.66rem; white-space:nowrap;
  color:#ffd9d9; border:1px solid rgba(230,103,103,.55); background:rgba(40,10,14,.55); border-radius:999px; padding:2px 8px;
}
.deco__mark::after{ content:""; position:absolute; left:100%; top:50%; width:400px; border-top:1px dotted rgba(230,103,103,.45); }
.deco__mark.is-current{ background:rgba(179,38,30,.8); color:#fff; }
.deco__water{ overflow:hidden; }

/* Gewebe-Toggles im Druckdiagramm */
.deco__toggles{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.deco__toggles-label{ font-size:0.76rem; color:var(--foam-dim); margin-right:4px; }
.tog{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:var(--font-mono); font-size:0.72rem; color:var(--foam-dim);
  background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:5px 10px; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.tog i{ width:9px; height:9px; border-radius:50%; opacity:.45; }
.tog[aria-pressed="true"]{ color:var(--foam); border-color:var(--aqua); background:rgba(111,227,207,.08); }
.tog[aria-pressed="true"] i{ opacity:1; }
.tog.is-lead{ cursor:default; border-color:#e66767; background:rgba(230,103,103,.1); }
.tog.is-lead::after{ content:"kritisch"; font-size:0.62rem; color:#ffb3b3; text-transform:uppercase; letter-spacing:.06em; }

/* Gewebebalken: leichte Animation bei Auf- und Entsättigung */
.tissues .t-dir{ display:inline-block; width:1.1em; font-size:0.72rem; }
.tissues li.is-up .t-dir{ color:var(--aqua); animation:tUp 1.4s ease-in-out infinite; }
.tissues li.is-down .t-dir{ color:#9cc2ff; animation:tDown 1.4s ease-in-out infinite; }
.tissues li.is-up .spectrum__fill, .tissues li.is-down .spectrum__fill{ animation:tPulse 1.6s ease-in-out infinite; }
.tissues li.is-fastflow .t-dir, .tissues li.is-fastflow .spectrum__fill{ animation-duration:.8s; }
.tissues li.is-up .spectrum__fill{ box-shadow:0 0 8px rgba(111,227,207,.45); }
.tissues li.is-down .spectrum__fill{ box-shadow:0 0 8px rgba(156,194,255,.4); }
@keyframes tUp{ 0%,100%{ transform:translateY(1px); opacity:.55; } 50%{ transform:translateY(-2px); opacity:1; } }
@keyframes tDown{ 0%,100%{ transform:translateY(-1px); opacity:.55; } 50%{ transform:translateY(2px); opacity:1; } }
@keyframes tPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
@media (prefers-reduced-motion: reduce){ .tissues li .t-dir, .tissues li .spectrum__fill{ animation:none !important; } }
@media (max-width:640px){
  .deco__mark{ left:auto; right:6px; padding:1px 6px; }
  .deco__mark-d{ display:none; }
  .deco__mark::after{ left:auto; right:100%; }
  .deco__ceiling > span{ right:auto; left:6px; padding:2px 7px; }
  .deco__ceil-w{ display:none; }
}
.stop small{ font-family:var(--font-body); font-size:0.66rem; color:#ffb3b3; opacity:.85; margin-top:2px; }
.stop.has-safety{ border-style:solid; }

/* ============ AUSBILDUNGSWEGE (Diagramm) ============ */
.certmap{ position:relative; display:flex; flex-direction:column; gap:84px; padding:8px 0 4px; }
.certmap__edges{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:0; }
.certmap__track{ position:relative; z-index:1; display:grid; grid-template-columns:170px repeat(3, minmax(0,1fr)); gap:56px; align-items:stretch; }
.certmap__label{ display:flex; flex-direction:column; justify-content:center; gap:8px; }
.certmap__label small{ color:var(--foam-dim); font-size:0.82rem; }
.certmap__track--junior .certmap__label .eyebrow{ color:var(--stone); }
.certmap__track--junior .certmap__label .eyebrow::before{ background:var(--stone); }

.cert{
  position:relative; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--foam);
  border:1px solid rgba(111,227,207,.4); border-radius:18px; padding:16px 18px 14px;
  background:linear-gradient(200deg, rgba(111,227,207,0.12), rgba(111,227,207,0) 60%), var(--navy);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cert:hover, .cert:focus-visible{ transform:translateY(-2px); border-color:var(--aqua); box-shadow:0 12px 30px -16px rgba(111,227,207,.5); }
.cert--junior{ border-color:rgba(205,185,141,.45); background:linear-gradient(200deg, rgba(205,185,141,0.14), rgba(205,185,141,0) 60%), var(--navy); }
.cert--junior:hover, .cert--junior:focus-visible{ border-color:var(--stone); box-shadow:0 12px 30px -16px rgba(205,185,141,.5); }
.cert__stars{ font-size:0.8rem; letter-spacing:.12em; color:var(--aqua); }
.cert--junior .cert__stars, .certcard--junior .cert__stars{ color:var(--stone); }
.cert__name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.25; }
.cert__alt{ font-family:var(--font-mono); font-size:0.74rem; color:var(--foam-dim); letter-spacing:.03em; }
.cert__facts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.cert__facts i{ font-style:normal; font-family:var(--font-mono); font-size:0.7rem; color:var(--foam); border:1px solid var(--line-strong); border-radius:999px; padding:2px 8px; white-space:nowrap; }

.ce{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ce--req{ stroke:var(--aqua); }
.ce--rec{ stroke:rgba(205,185,141,.85); stroke-dasharray:6 6; }
.ce--age{ stroke:rgba(238,244,241,.55); stroke-dasharray:2 6; }
.ce-label{ font-family:var(--font-mono); font-size:11px; fill:var(--foam); }
.ce-label-bg{ fill:var(--abyss); stroke:var(--line-strong); stroke-width:1; }

.certmap__legend{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:-40px; font-size:0.8rem; color:var(--foam-dim); }
.certmap__legend span{ display:inline-flex; align-items:center; gap:8px; }
.cl{ display:inline-block; width:26px; height:0; border-top:2px solid; }
.cl--req{ border-color:var(--aqua); }
.cl--rec{ border-color:rgba(205,185,141,.85); border-top-style:dashed; }
.cl--age{ border-color:rgba(238,244,241,.55); border-top-style:dotted; }
.certmap__note{ margin:28px 0 0; padding:14px 18px; border:1px solid var(--line); border-radius:14px; color:var(--foam-dim); font-size:0.9rem; max-width:none; }
.certmap__note strong{ color:var(--foam); }

.certlist{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:clamp(32px,5vw,48px); }
.certcard{
  border:1px solid var(--line); border-radius:18px; padding:20px 22px; background:var(--navy);
  scroll-margin-top:110px; transition:border-color .3s ease, box-shadow .3s ease;
}
.certcard header{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.certcard header .cert__stars{ font-size:0.9rem; padding-top:4px; min-width:3.2em; }
.certcard h3{ font-size:1.12rem; line-height:1.25; }
.certcard header span:not(.cert__stars){ font-family:var(--font-mono); font-size:0.74rem; color:var(--foam-dim); }
.certcard dl{ margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.certcard dl div{ display:grid; grid-template-columns:120px 1fr; gap:10px; font-size:0.88rem; }
.certcard dt{ color:var(--foam-dim); }
.certcard dd{ margin:0; color:var(--foam); }
.certcard ul{ display:flex; flex-direction:column; gap:7px; font-size:0.86rem; color:var(--foam); border-top:1px solid var(--line); padding-top:12px; }
.certcard li{ position:relative; padding-left:20px; line-height:1.45; }
.certcard li::before{ content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--aqua); }
.certcard li.is-rec{ color:var(--foam-dim); }
.certcard li.is-rec::before{ background:transparent; border:1.5px dashed var(--stone); }
.certcard.is-flash{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(111,227,207,.25); }
.certcard--junior.is-flash{ border-color:var(--stone); box-shadow:0 0 0 3px rgba(205,185,141,.25); }

.certcta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:clamp(32px,5vw,48px); padding:22px 24px; border-radius:18px; border:1px solid rgba(111,227,207,.35); background:linear-gradient(200deg, rgba(111,227,207,0.10), rgba(111,227,207,0) 60%), var(--surface); }
.certcta p{ color:var(--foam-dim); margin-top:8px; max-width:60ch; }

@media (max-width:1100px){
  .certmap__track{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; }
  .certmap__label{ grid-column:1 / -1; flex-direction:row; justify-content:flex-start; align-items:baseline; gap:14px; }
  .certlist{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  .certmap{ gap:44px; }
  .certmap__track{ grid-template-columns:1fr; gap:34px; }
  .certmap__label{ flex-direction:column; gap:4px; }
  .certmap__legend{ margin-top:0; }
  .certlist{ grid-template-columns:1fr; }
  .certcard dl div{ grid-template-columns:110px 1fr; }
}

/* Teaser: drei Lernthemen nebeneinander */
.learn-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.learn-tile{ grid-template-columns:1fr; align-content:start; }
.learn-tile__art{ max-width:none; aspect-ratio:220/160; }
@media (max-width:1000px){ .learn-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .learn-tiles{ grid-template-columns:1fr; } }

/* ============ TAUCHWISSEN: Auftrieb & Tarierung ============ */
.buoy{ grid-template-columns:minmax(220px,280px) minmax(0,1fr); }
.buoy__water{ cursor:default; touch-action:auto; }
.buoy__seabed{ position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1; pointer-events:none; }
.buoy__seabed svg{ width:100%; height:100%; display:block; }
.buoy__diver{ position:absolute; left:50%; top:0; width:70px; transform:translate(-50%,-22%); z-index:2; transition:filter .2s ease; }
.buoy__diver svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.buoy__diver.is-drop svg{ filter:drop-shadow(0 0 0 2px #cdb98d) drop-shadow(0 0 16px rgba(205,185,141,.7)); }
.buoy__bcd{ transform-box:fill-box; transform-origin:50% 60%; transition:transform .25s ease; }
.buoy__chest{ transform-box:fill-box; transform-origin:50% 50%; transition:transform .8s ease; }
.buoy__water.is-surface .deco__bubbles{ display:none; }
.buoy__belt{ position:absolute; left:50%; top:52%; transform:translateX(-50%); width:88px; display:flex; flex-wrap:wrap; justify-content:center; gap:2px; }
.buoy__belt .lead{ cursor:pointer; }
.buoy__force{ position:absolute; left:calc(100% + 10px); top:38%; width:24px; height:0; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.buoy__force-shaft{ position:absolute; left:50%; width:4px; margin-left:-2px; border-radius:2px; background:var(--aqua); }
.buoy__force-shaft::after{ content:""; position:absolute; left:50%; margin-left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; }
.buoy__force.is-up .buoy__force-shaft{ bottom:0; }
.buoy__force.is-up .buoy__force-shaft::after{ top:-10px; border-bottom:12px solid var(--aqua); }
.buoy__force.is-down .buoy__force-shaft{ top:0; background:#e6a667; }
.buoy__force.is-down .buoy__force-shaft::after{ bottom:-10px; border-top:12px solid #e6a667; }
.buoy__force.is-zero .buoy__force-shaft{ display:none; }
.buoy__force b{ position:absolute; left:16px; top:-9px; white-space:nowrap; font-family:var(--font-mono); font-size:0.7rem; font-weight:500; color:var(--foam); background:rgba(5,13,19,.6); border-radius:999px; padding:1px 7px; }
.buoy__state{ position:absolute; left:10px; bottom:72px; z-index:3; font-family:var(--font-mono); font-size:0.7rem; color:var(--foam); background:rgba(5,13,19,.6); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.buoy__alarm{ top:66px; }

.buoy__controls{ flex-direction:column; align-items:stretch; gap:16px; }
.bgroup{ display:flex; flex-direction:column; gap:9px; }
.bgroup .eyebrow small{ text-transform:none; letter-spacing:0; font-family:var(--font-body); color:var(--foam-dim); font-size:0.76rem; margin-left:6px; }
.bgroup__row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.bgroup__val{ font-size:0.86rem; color:var(--foam-dim); margin-left:4px; }
.bgroup__val b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); font-variant-numeric:tabular-nums; }
.deco__btn[aria-pressed="true"]{ border-color:var(--aqua); color:var(--abyss); background:var(--aqua); }
.deco__btn--sm{ padding:6px 12px; font-size:0.78rem; font-weight:500; }
.bhold{ user-select:none; touch-action:none; }
.bhold.is-active{ border-color:var(--aqua); background:rgba(111,227,207,.15); color:var(--aqua); }
.leadtray{ display:flex; gap:8px; padding:6px 10px; border:1px dashed var(--line-strong); border-radius:12px; }
.lead{
  display:inline-grid; place-items:center; font-family:var(--font-mono); font-size:0.66rem; font-weight:600; color:#1b2327;
  background:linear-gradient(180deg,#b9c3c7,#7f8a8f); border:1px solid #5d676b; border-radius:4px; cursor:grab; touch-action:none; user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.35); padding:0;
}
.leadtray .lead{ height:30px; }
.leadtray .lead--1{ width:40px; }
.leadtray .lead--2{ width:62px; }
.buoy__belt .lead{ height:11px; font-size:0; border-radius:2px; }
.buoy__belt .lead--1{ width:12px; }
.buoy__belt .lead--2{ width:20px; }
.lead-ghost{ position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%) scale(1.1); opacity:.92; }
.bgroup--salt input[type=range]{ width:100%; accent-color:var(--aqua); }
.bgroup--salt label b{ color:var(--foam); font-weight:500; margin-left:6px; }
.bsalt__presets{ display:flex; flex-wrap:wrap; gap:6px; }
.bsalt__presets button{ font-family:var(--font-mono); font-size:0.72rem; color:var(--foam-dim); background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:4px 10px; cursor:pointer; }
.bsalt__presets button:hover, .bsalt__presets button.is-on{ color:var(--foam); border-color:var(--aqua); }
#bReset{ align-self:flex-start; }

.buoy__readouts{ grid-template-columns:repeat(3, minmax(0,1fr)); }
#rbNetBox.is-down{ border-color:rgba(230,166,103,.6); background:linear-gradient(200deg, rgba(230,166,103,0.14), rgba(230,166,103,0) 60%), var(--navy); }
#rbNetBox.is-down dd b{ color:#f0bf8a; }
#rbNetBox.is-neutral{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(111,227,207,.18); }

.forces{ display:flex; flex-direction:column; gap:10px; }
.forces__row{ display:grid; grid-template-columns:104px 1fr 64px; gap:10px; align-items:center; font-size:0.82rem; color:var(--foam-dim); }
.forces__row b{ font-family:var(--font-mono); font-weight:500; color:var(--foam); text-align:right; font-variant-numeric:tabular-nums; }
.forces__track{ height:10px; border-radius:999px; background:rgba(238,244,241,.08); overflow:hidden; }
.forces__fill{ height:100%; border-radius:0 4px 4px 0; transition:width .15s linear; }
.forces__fill--g{ background:#e6a667; }
.forces__fill--a{ background:var(--aqua); }
.netbar{ margin-top:18px; }
.netbar__track{ position:relative; height:14px; border-radius:999px; background:rgba(238,244,241,.08); }
.netbar__mid{ position:absolute; left:50%; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--foam-dim); }
.netbar__fill{ position:absolute; top:2px; bottom:2px; border-radius:4px; transition:all .15s linear; }
.netbar__scale{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--font-mono); font-size:0.68rem; color:var(--foam-dim); }
.volparts li{ grid-template-columns:168px 1fr 54px; }
.volparts .vp-name{ white-space:nowrap; }
.volparts .vp-name em{ font-style:normal; font-size:0.66rem; color:var(--aqua); margin-left:4px; }

@media (max-width:1000px){ .buoy{ grid-template-columns:minmax(190px,230px) minmax(0,1fr); } .buoy__readouts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .buoy{ grid-template-columns:minmax(0,42fr) minmax(0,58fr); grid-template-areas:"water colors" "panel panel" "charts charts"; grid-template-rows:auto auto auto; gap:12px; }
  .buoy__water{ height:520px; min-height:0; align-self:start; }
  .buoy__controls{ gap:12px; }
  .buoy__controls .bgroup__row{ gap:6px; }
  .buoy__controls .deco__btn{ padding:8px 10px; font-size:0.78rem; }
  .bgroup .eyebrow small{ display:block; margin:4px 0 0; }
  .leadtray{ padding:5px 7px; }
  .bgroup__val{ margin-left:0; font-size:0.78rem; }
  .bsalt__presets button{ font-size:0.66rem; padding:3px 8px; }
  .buoy__readouts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .buoy__diver{ width:52px; }
  .buoy__force{ left:calc(100% + 2px); }
  .buoy__force b{ display:none; }
  .buoy__state{ font-size:0.62rem; right:6px; top:6px; }
}
.buoy__water .sim__scale{ z-index:2; }
.sim__scale li.is-bottom{ border-top-color:transparent; }
.sim__scale li.is-bottom span{ top:-20px; }
.buoy__state{ bottom:auto; top:10px; left:auto; right:10px; }

/* Auftrieb: Lungenkurve */
.buoy__charts .lungchart{ grid-column:1 / -1; }
#bLungChart{ width:100%; height:150px; display:block; }
.lc-grid{ stroke:rgba(238,244,241,.07); stroke-width:1; }
.lc-grid--lim{ stroke:rgba(238,244,241,.22); stroke-dasharray:4 4; }
.lc-axis{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:10px; }
.lc-band{ fill:rgba(111,227,207,.07); }
.lc-line{ fill:none; stroke:var(--aqua); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lc-dot{ fill:var(--aqua); stroke:var(--navy); stroke-width:2; }

/* Auftrieb: Wassersäule reicht bis zum Ende der Grafiken */
@media (min-width:641px){
  .buoy__water{ height:auto; min-height:520px; align-self:stretch; }
}

/* Teaser: vier Lernthemen */
@media (min-width:1201px){ .learn-tiles{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:1200px) and (min-width:641px){ .learn-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ============ TAUCHWISSEN: Atemregler ============ */
.reg{ grid-template-columns:minmax(200px,250px) minmax(0,1fr); }
@media (min-width:641px){ .reg__water{ height:auto; min-height:520px; align-self:stretch; } }
.reg__diver{ width:46px; }
.reg__bubbles{ position:absolute; left:58%; top:-4px; width:30px; height:60px; pointer-events:none; }
.reg__bubbles i{ position:absolute; bottom:0; left:0; border-radius:50%; border:1px solid rgba(207,238,231,.8); animation:regBubble 2.2s ease-in forwards; }
@keyframes regBubble{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:.95; } 100%{ transform:translate(var(--dx,4px),-70px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .reg__bubbles i{ animation:none; display:none; } }

.reg__controls{ flex-direction:column; align-items:stretch; gap:16px; }
.reg__controls .deco__field--speed{ max-width:none; }
.reg__hint{ display:flex; justify-content:space-between; gap:8px; font-family:var(--font-mono); font-size:0.68rem; color:var(--foam-dim); }
.reg__controls .deco__buttons{ flex-wrap:wrap; }

.reg__panel{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; align-items:center; }
.reg__gaugewrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.finimeter{ width:180px; height:180px; }
.fin-rim{ fill:#0b1c26; stroke:var(--line-strong); stroke-width:3; }
.fin-red{ fill:none; stroke:#e5484d; stroke-width:10; }
.fin-tick{ stroke:rgba(238,244,241,.55); stroke-width:1.5; }
.fin-tick--major{ stroke:var(--foam); stroke-width:2.5; }
.fin-num{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:11px; }
.fin-needle{ stroke:var(--aqua); stroke-width:3.5; stroke-linecap:round; }
.fin-hub{ fill:var(--aqua); }
.fin-val{ fill:var(--foam); font-family:var(--font-display); font-weight:700; font-size:24px; }
.fin-unit{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:11px; }
.finimeter.is-reserve .fin-needle, .finimeter.is-reserve .fin-hub{ stroke:#e5484d; fill:#e5484d; }
.reg__tank{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.reg__tank b{ font-family:var(--font-mono); font-weight:500; font-size:0.82rem; }
.reg__tank small{ color:var(--foam-dim); font-size:0.74rem; }
.reg__readouts{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.readout__sub{ display:block; margin-top:4px; font-size:0.72rem; color:var(--foam-dim); }
#rrLeftBox.is-reserve{ border-color:rgba(230,103,103,.6); background:linear-gradient(200deg, rgba(230,103,103,0.16), rgba(230,103,103,0) 60%), var(--navy); }
#rrLeftBox.is-reserve dd b{ color:#ff9b9b; }

.reg__charts{ grid-template-columns:1fr; align-self:stretch; }
.mech__svg{ width:100%; height:auto; display:block; }
.mech-body{ fill:#16323f; stroke:rgba(238,244,241,.35); stroke-width:1.5; }
.mech-hp{ fill:rgba(230,166,103,.55); }
.mech-ip{ fill:rgba(111,227,207,.38); }
.mech-low{ fill:rgba(207,238,231,.13); stroke:rgba(238,244,241,.2); stroke-width:1; }
.mech-amb{ fill:url(#mWater); }
.mech-seat{ fill:#cdb98d; }
.mech-part{ fill:#b9c3c7; stroke:#5d676b; stroke-width:1; }
.mech-bore{ fill:rgba(111,227,207,.5); }
.mech-spring{ fill:none; stroke:#e6d7a8; stroke-width:2; stroke-linejoin:round; }
.mech-diaphragm{ fill:none; stroke:#eef4f1; stroke-width:4; stroke-linecap:round; }
.mech-lever{ fill:none; stroke:#cdb98d; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.mech-pivot{ fill:var(--abyss); stroke:#cdb98d; stroke-width:2; }
.mech-flow{ fill:none; stroke:#ffffff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 12; opacity:0; }
.mech-flow--out{ stroke:#cfeee7; }
.mech-lbl{ fill:var(--foam); font-family:var(--font-mono); font-size:11px; }
.mech-lbl--dim{ fill:var(--foam-dim); font-size:10px; }
.mech-lbl--dark{ fill:#1b2327; font-weight:600; }
.mech-guide{ stroke:rgba(238,244,241,.3); stroke-width:1; stroke-dasharray:2 3; }
.mech-bubble{ fill:none; stroke:#cfeee7; stroke-width:1.2; }
.mech__legend{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:0.8rem; color:var(--foam-dim); }
.mech__legend span{ display:inline-flex; align-items:center; gap:7px; }
.mk{ width:14px; height:10px; border-radius:3px; display:inline-block; }
.mk--hp{ background:rgba(230,166,103,.75); } .mk--ip{ background:rgba(111,227,207,.6); } .mk--low{ background:rgba(207,238,231,.3); border:1px solid rgba(238,244,241,.3); }
.mk--amb{ background:repeating-linear-gradient(135deg, rgba(47,143,130,.35) 0 3px, rgba(111,227,207,.25) 3px 5px); }
.mech__phase{ margin-left:auto; font-family:var(--font-mono); font-size:0.78rem; color:var(--abyss) !important; background:var(--aqua); border-radius:999px; padding:4px 12px; min-width:96px; justify-content:center; }
.mech__phase.is-out{ background:rgba(238,244,241,.2); color:var(--foam) !important; }
.reg__usechart{ grid-column:1 / -1; }
.usebars li{ grid-template-columns:110px 1fr 150px; }
.usebars li.is-now{ color:var(--foam); }
.usebars li.is-now span:first-child::before{ content:"▸ "; color:var(--aqua); }
.usebars .spectrum__fill{ background:rgba(111,227,207,.55); }
.usebars li.is-now .spectrum__fill{ background:var(--aqua); }
.usebars b{ white-space:nowrap; }

@media (max-width:1100px){ .reg__charts{ grid-template-columns:1fr; } .reg__panel{ grid-template-columns:1fr; } .reg__readouts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .reg{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); grid-template-areas:"water colors" "panel panel" "charts charts"; gap:12px; }
  .reg__water{ height:440px; }
  .finimeter{ width:150px; height:150px; }
  .usebars li{ grid-template-columns:64px 1fr 108px; font-size:0.74rem; }
  .mech__phase{ margin-left:0; }
}
@media (max-width:640px){
  .reg__charts .mech{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .reg__charts .mech__svg{ min-width:560px; }
  .reg__charts .mech figcaption::after{ content:"← seitlich wischen →"; font-family:var(--font-mono); font-size:0.66rem; color:var(--foam-dim); }
}

/* Ausbildungswege: Abkürzungen */
div.certmap__note p{ margin:0; }
.certabbr{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:10px 0 0; }
.certabbr div{ display:flex; gap:8px; align-items:baseline; }
.certabbr dt{ font-family:var(--font-mono); font-size:0.78rem; color:var(--abyss); background:var(--aqua); border-radius:6px; padding:1px 7px; }
.certabbr dd{ margin:0; font-size:0.86rem; }

/* Teaser: beliebig viele Lernthemen */
@media (min-width:641px){ .learn-tiles{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); } }

/* ============ FAQ ============ */
.faq{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,4vw,48px); }
.faq__group{ display:flex; flex-direction:column; gap:8px; }
.faq__head{ margin:0 0 6px; font-size:inherit; }
.faq__item{ border:1px solid var(--line); border-radius:16px; background:var(--navy); transition:border-color .2s ease; }
.faq__item[open]{ border-color:rgba(111,227,207,.45); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 20px; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--foam);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); font-family:var(--font-mono); color:var(--aqua); transition:transform .2s ease; }
.faq__item[open] summary::after{ content:"–"; }
.faq__item summary:hover{ color:var(--aqua-strong); }
.faq__body{ padding:0 20px 18px; color:var(--foam-dim); line-height:1.7; }
.faq__body p + p{ margin-top:10px; }
.faq__body a{ color:var(--aqua); }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } }

/* ============ TAUCHWISSEN: Sicht & Licht ============ */
.lab{ border:1px solid var(--line); border-radius:22px; padding:clamp(18px,3vw,28px); margin-bottom:18px; background:linear-gradient(200deg, rgba(111,227,207,0.05), rgba(111,227,207,0) 50%); }
.lab__head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.lab__head h3{ font-size:clamp(1.2rem,2vw,1.45rem); }
.lab__head p{ color:var(--foam-dim); margin-top:6px; max-width:80ch; }
.lab__no{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--aqua); color:var(--abyss); font-family:var(--font-mono); font-weight:600; }
.lab__body{ display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:clamp(16px,3vw,28px); align-items:start; }
.lab__controls{ display:flex; flex-direction:column; gap:12px; }
.lab__controls input[type=range]{ width:100%; accent-color:var(--aqua); }
.lab__controls label b{ color:var(--foam); font-weight:500; margin-left:6px; }
.lab__toggle{ display:flex; gap:8px; flex-wrap:wrap; }
.lab__readouts{ grid-template-columns:1fr; gap:8px; margin-top:4px; }
.lab__readouts .readout{ padding:10px 14px; }
.lab__readouts .readout dd b{ font-size:1.5rem; }
#lsStateBox.is-mirror{ border-color:rgba(230,166,103,.6); background:linear-gradient(200deg, rgba(230,166,103,0.14), rgba(230,166,103,0) 60%), var(--navy); }
#lsStateBox.is-mirror dd b{ color:#f0bf8a; }
#lsStateBox dd b{ font-size:1.2rem !important; }
.lab__fig{ margin:0; }
.lab__fig svg{ width:100%; height:auto; display:block; }
.lab__legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:0.78rem; color:var(--foam-dim); }
.lab__legend span{ display:inline-flex; align-items:center; gap:7px; }
.lk{ display:inline-block; width:22px; height:0; border-top:2px solid; }
.lk--real{ border-color:#eef4f1; }
.lk--virt{ border-color:var(--aqua); border-top-style:dashed; }
.lk--ghost{ height:10px; border:1px dashed var(--aqua); border-radius:3px; background:rgba(111,227,207,.15); }
.lk--window{ height:10px; border:0; background:rgba(207,238,231,.25); border-radius:3px; }
.lk--mirror{ border-color:#e6a667; border-top-style:dashed; }
.lab__note{ font-size:0.84rem; color:var(--foam-dim); }
.lx-air{ fill:rgba(207,238,231,.10); }
.lx-water{ fill:rgba(47,143,130,.16); }
.lx-glass{ fill:rgba(207,238,231,.55); }
.lx-axis{ stroke:rgba(238,244,241,.18); stroke-dasharray:3 5; }
.lx-real{ fill:none; stroke:#eef4f1; stroke-width:2; }
.lx-virt{ fill:none; stroke:var(--aqua); stroke-width:2; stroke-dasharray:6 5; }
.lx-mirror{ fill:none; stroke:#e6a667; stroke-width:2; stroke-dasharray:6 5; }
.lx-lbl{ fill:var(--foam-dim); font-family:var(--font-mono); font-size:11px; }
.lx-lbl--hi{ fill:var(--foam); }
.lx-window{ fill:rgba(207,238,231,.13); }
.lx-surface{ stroke:#8ff0de; stroke-width:2; }
.lx-eye{ fill:#16323f; stroke:#eef4f1; stroke-width:2; }
.lx-fish{ fill:#f28c28; }
.lx-ghost{ fill:rgba(111,227,207,.14); stroke:var(--aqua); stroke-width:1.5; stroke-dasharray:4 3; }
@media (max-width:900px){ .lab__body{ grid-template-columns:1fr; } .lab__readouts{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:560px){ .lab__readouts{ grid-template-columns:1fr; } }
.lab__fig svg{ overflow:hidden; border-radius:12px; }
@media (max-width:560px){
  .lab__readouts{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:6px; }
  .lab__readouts .readout{ padding:8px 10px; }
  .lab__readouts .readout dt{ font-size:0.58rem; }
  .lab__readouts .readout dd b{ font-size:1.05rem !important; }
  .lab__head{ gap:10px; }
}

/* ============ Tauchwissen: horizontal scrollbare Themen ============ */
.learn-carousel{ position:relative; }
.learn-carousel__nav{ position:absolute; right:0; top:-52px; display:flex; gap:8px; }
.learn-carousel__btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--navy); color:var(--foam); transition:border-color .2s ease, color .2s ease, opacity .2s ease;
}
.learn-carousel__btn svg{ width:18px; height:18px; }
.learn-carousel__btn:hover:not(:disabled){ border-color:var(--aqua); color:var(--aqua); }
.learn-carousel__btn:disabled{ opacity:.3; cursor:default; }
.learn-carousel .learn-tiles{
  display:flex !important; grid-template-columns:none !important; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:4px 2px 6px;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.learn-carousel .learn-tiles.is-end{ -webkit-mask-image:none; mask-image:none; }
.learn-carousel .learn-tiles::-webkit-scrollbar{ display:none; }
.learn-carousel .learn-tile{ flex:0 0 clamp(250px, 28%, 320px); scroll-snap-align:start; }
.learn-carousel .learn-tile:hover{ transform:none; }
.learn-carousel .learn-note{ margin-top:16px; }
@media (max-width:640px){
  .learn-carousel__nav{ position:static; justify-content:flex-end; margin-bottom:10px; }
  .learn-carousel .learn-tile{ flex-basis:82%; }
}
@media (prefers-reduced-motion: reduce){ .learn-carousel .learn-tiles{ scroll-behavior:auto; } }