/* Ruderverein Bad Ems e.V. | Stylesheet
   Aufbau: 1. Bootstrap 5.3 Grid (nur Raster, auf benutzte Klassen reduziert)
           2. Schriften, 3. Design-Tokens (Farben, Typografie, Abstände), 4. Basis, 5. Layout,
           6. Komponenten, 7. Sektionen, 8. Motive, 9. Seitenspezifisches, 10. Bewegung.
   Farben und Schriften werden ausschließlich in Abschnitt 3 (Design-Tokens) festgelegt. */

/* ===== 1. Bootstrap 5.3 Grid (MIT-Lizenz, getsbootstrap.com) ===== */
.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}
}
@media (min-width:768px){.container{max-width:720px}
}
@media (min-width:992px){.container{max-width:960px}
}
@media (min-width:1200px){.container{max-width:1140px}
}
@media (min-width:1400px){.container{max-width:1320px}
}
:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}
.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}
.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}
.col-6{flex:0 0 auto;width:50%}
.gy-4{--bs-gutter-y:1.5rem}
.gy-5{--bs-gutter-y:3rem}
@media (min-width:992px){.col-lg-2{flex:0 0 auto;width:16.66666667%}
.col-lg-4{flex:0 0 auto;width:33.33333333%}
.col-lg-5{flex:0 0 auto;width:41.66666667%}
.col-lg-6{flex:0 0 auto;width:50%}
.col-lg-7{flex:0 0 auto;width:58.33333333%}
.col-lg-8{flex:0 0 auto;width:66.66666667%}
.col-lg-9{flex:0 0 auto;width:75%}
.col-lg-10{flex:0 0 auto;width:83.33333333%}
.offset-lg-0{margin-left:0}
.offset-lg-1{margin-left:8.33333333%}
}
.d-flex{display:flex!important}
.align-items-end{align-items:flex-end!important}
.align-items-center{align-items:center!important}
.mt-0{margin-top:0!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}
@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}
.order-lg-1{order:1!important}
.order-lg-2{order:2!important}
}


/* ===== 2. Schriften (00-fonts.css) ===== */
/* Schriften, lokal gehostet (SIL OFL, siehe src/vendor/fonts/LICENSE-*.txt).
   EB Garamond: historische Überschriften. Barlow: Fließtext. Barlow Condensed: Navigation, Zahlen, Etiketten. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* Metrik-angepasste Ersatzschriften gegen Layoutsprünge beim Nachladen */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Garamond Fallback"; src: local("Georgia"); size-adjust: 93%; ascent-override: 90%; descent-override: 28%; line-gap-override: 0%; }

/* ===== 3. Design-Tokens (10-tokens.css) ===== */
/* Designsystem: Tokens.
   Marke: Nassauer Farben Blau und Orange (Satzung § 4, Vereinsflagge). Das Blau wird zu einem tiefen Lahn-Blau
   mit Navy-Abstufungen ausgebaut, das Orange bleibt die einzige Akzentfarbe. Neutrale Flächen sind kühl, nicht beige. */
:root {
  color-scheme: light dark;

  /* Primärfarben: Lahn-Blau */
  --navy-950: oklch(0.18 0.045 248);
  --navy-900: oklch(0.23 0.06 247);
  --navy-800: oklch(0.29 0.075 245);
  --navy-700: oklch(0.36 0.09 242);
  --blue-600: oklch(0.46 0.12 238);
  --blue-500: oklch(0.55 0.125 235);
  --blue-300: oklch(0.78 0.07 228);
  --blue-200: oklch(0.88 0.04 228);
  --blue-100: oklch(0.945 0.02 228);
  --blue-50:  oklch(0.975 0.01 228);

  /* Sekundär: Flaggen-Orange (einziger Akzent) */
  --orange-300: oklch(0.85 0.11 62);
  --orange-500: oklch(0.75 0.165 58);
  --orange-600: oklch(0.68 0.175 54);
  --orange-800: oklch(0.47 0.125 48);

  /* Silber für das Kaiserregatta-Kapitel */
  --silver-300: oklch(0.84 0.014 240);
  --silver-500: oklch(0.66 0.02 240);

  /* Semantische Rollen (hell) */
  --bg: oklch(0.992 0.004 228);
  --surface: var(--blue-50);
  --surface-2: var(--blue-100);
  --surface-dark: var(--navy-900);
  --ink: oklch(0.22 0.04 247);
  --ink-muted: oklch(0.42 0.035 247);
  --on-dark: oklch(0.985 0.005 228);
  --on-dark-muted: oklch(0.82 0.03 232);
  --line: oklch(0.88 0.02 232);
  --line-dark: oklch(1 0 0 / 0.16);
  --link: var(--blue-600);
  --link-hover: var(--orange-800);
  --accent: var(--orange-500);
  --accent-ink: var(--orange-800);   /* Orange als Textfarbe auf hellem Grund (Kontrast >= 4.5:1) */
  --focus: var(--orange-600);

  /* Typografie */
  --font-display: "EB Garamond", "Garamond Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label: "Barlow Condensed", "Barlow Fallback", "Arial Narrow", sans-serif;

  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --fs-lead: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.75rem + 3.6vw, 5rem);
  --fs-display: clamp(3rem, 1.9rem + 5.4vw, 6rem);

  /* Abstände (4/8-Raster) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* Form */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-blade: clamp(4rem, 12vw, 11rem);   /* große Rundung, erinnert an ein Ruderblatt */
  --measure: 66ch;
  --header-h: 4.5rem;

  /* Tiefe */
  --shadow-s: 0 1px 2px oklch(0.2 0.06 248 / 0.1);
  --shadow-m: 0 2px 6px oklch(0.2 0.06 248 / 0.08), 0 18px 40px oklch(0.2 0.06 248 / 0.14);
  --shadow-l: 0 4px 10px oklch(0.15 0.06 248 / 0.12), 0 30px 70px oklch(0.15 0.06 248 / 0.22);

  /* Bewegung (ease-out, keine Bounces) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 700ms;

  /* Ebenen */
  --z-menu: 40;      /* Vollbild-Menü liegt unter dem Header, damit der Schließen-Button erreichbar bleibt */
  --z-header: 50;
  --z-skip: 100;

  /* Raster */
  --gutter-x: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.2 0.03 248);
    --surface: oklch(0.245 0.04 247);
    --surface-2: oklch(0.285 0.05 246);
    --surface-dark: oklch(0.15 0.04 248);
    --ink: oklch(0.95 0.01 230);
    --ink-muted: oklch(0.78 0.03 232);
    --line: oklch(0.36 0.04 245);
    --link: oklch(0.82 0.09 228);
    --link-hover: var(--orange-300);
    --accent-ink: var(--orange-300);
    --navy-950: oklch(0.14 0.04 248);
    --navy-900: oklch(0.17 0.045 248);
  }
}

/* ===== 4. Basis (20-base.css) ===== */
/* Basis: Reset-Ergänzungen, Typografie, Fokus, Hilfsklassen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1.5rem); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65;
  font-kerning: normal; text-rendering: optimizeLegibility; hyphens: manual;
}
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
picture { display: block; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0 0 var(--s-4);
  text-wrap: balance; letter-spacing: -0.012em; hyphens: manual; overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.2; }
p, ul, ol, dl, table { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }
strong { font-weight: 600; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--link-hover); } }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--orange-500); color: var(--navy-950); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -5rem; z-index: var(--z-skip); background: var(--orange-500); color: var(--navy-950); font-weight: 600; padding: var(--s-3) var(--s-5); border-radius: var(--radius-s); text-decoration: none; transition: top var(--t-fast) var(--ease-out); }
.skip-link:focus { top: var(--s-3); }

/* Fließtext in Lesebreite */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-8); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s-2); }
.prose a { font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-muted); }
.on-dark, .section--dark { --link: var(--on-dark); --link-hover: var(--orange-300); }
.on-dark .lead, .on-dark p { color: var(--on-dark-muted); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.label { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.9375rem; color: var(--accent-ink); }
.on-dark .label { color: var(--orange-300); }
.num { font-family: var(--font-label); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }

.todo-mark { background: oklch(0.9 0.14 90); color: oklch(0.25 0.05 80); padding: 0 0.3em; border-radius: 3px; }

.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 12px; pointer-events: none; }

/* Hilfsklassen (statt Inline-Styles, wegen strenger Content-Security-Policy) */
.mt-0 { margin-top: 0 !important; } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; } .mb-7 { margin-bottom: var(--s-7); } .h-sm { font-size: var(--fs-h4); }
.flag-img { width: 100%; max-width: 20rem; height: auto; border-radius: 2px; box-shadow: var(--shadow-m); margin-bottom: var(--s-4); }
[data-d="1"] { --d: 1; } [data-d="2"] { --d: 2; } [data-d="3"] { --d: 3; }

/* ===== 5. Layout (30-layout.css) ===== */
/* Layout: Container, Sektionen, Wellenkanten, Bildrahmen.
   Das Bootstrap-Grid (.container, .row, .col-*) liefert nur die Spalten, alles Weitere ist eigenes CSS. */
.container, .row, .container-narrow { --bs-gutter-x: var(--gutter-x); }
.container { max-width: 1240px; }
.row.gy-6 { --bs-gutter-y: 4rem; } .row.gy-7 { --bs-gutter-y: 5rem; }
.container-narrow { max-width: 880px; margin-inline: auto; padding-inline: calc(var(--bs-gutter-x) * 0.5); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--surface-dark); color: var(--on-dark); }
.section--deep { background: var(--navy-950); color: var(--on-dark); }
.section--deep a:not(.btn) { color: var(--on-dark); }
.section--dark a:not(.btn) { color: var(--on-dark); }
.section-head { max-width: 46rem; margin-bottom: var(--s-7); }
.section-head > :last-child { margin-bottom: 0; }

/* Wellenkante: SVG-Pfad füllt mit der Farbe der folgenden Fläche */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(2.5rem, 6vw, 5.5rem); fill: var(--bg); pointer-events: none; }
.wave--surface { fill: var(--surface); }
.wave--dark { fill: var(--surface-dark); }
.wave--deep { fill: var(--navy-950); }
.wave--top { top: -1px; bottom: auto; transform: scaleY(-1); }

/* Bildrahmen */
.frame { position: relative; overflow: hidden; background: var(--surface-2); }
.frame picture { width: 100%; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--blade { border-radius: var(--radius-blade) var(--radius-s) var(--radius-s) var(--radius-s); }
.frame--blade-r { border-radius: var(--radius-s) var(--radius-blade) var(--radius-s) var(--radius-s); }
.frame--soft { border-radius: var(--radius-m); box-shadow: var(--shadow-m); }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--land { aspect-ratio: 4 / 3; }
.frame--square { aspect-ratio: 1; }
.caption { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--s-3); }
.on-dark .caption { color: var(--on-dark-muted); }

/* Zwei Bilder, leicht versetzt */
.pair { position: relative; padding-bottom: 12%; }
.pair .frame:first-child { width: 78%; }
.pair .frame:last-child { position: absolute; right: 0; bottom: 0; width: 50%; border: 6px solid var(--bg); box-shadow: var(--shadow-m); }
.section--surface .pair .frame:last-child { border-color: var(--surface); }

.stack > * + * { margin-top: var(--s-4); }
.divider { border: 0; height: 1px; background: var(--line); margin: var(--s-7) 0; }

/* Kleine Originale nicht über ihre Pixelbreite hinaus vergrößern */
.frame--native { max-width: 20rem; }

/* ===== 6. Komponenten (40-components.css) ===== */
/* Komponenten: Header, Navigation, Buttons, Footer, Hinweise, Tabellen */

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); color: var(--on-dark); transition: background-color var(--t-med) ease, box-shadow var(--t-med) ease, transform var(--t-med) var(--ease-out); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-dark); opacity: 0; transition: opacity var(--t-med) ease; }
.site-header.is-scrolled { background: var(--navy-950); box-shadow: 0 8px 30px oklch(0.1 0.05 248 / 0.35); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; line-height: 1; }
.brand__mark { width: 3.25rem; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.25); }
.brand__mark img { width: 100%; height: auto; aspect-ratio: 275 / 183; object-fit: cover; }
.brand__text { display: grid; gap: 0.2rem; }
.brand__name { font-family: var(--font-label); font-weight: 700; font-size: 1.3125rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.brand__sub { font-size: 0.8125rem; color: var(--on-dark-muted); letter-spacing: 0.03em; }
@media (max-width: 30rem) { .brand { min-width: 0; gap: var(--s-2); } .brand__name { font-size: 1.125rem; letter-spacing: 0.05em; } .brand__mark { width: 2.75rem; } .menu-btn { padding: 0 var(--s-3); gap: var(--s-2); } }
@media (max-width: 24rem) { .brand__sub { display: none; } .brand__name { font-size: 1.0625rem; } }
@media (max-width: 22.5rem) { .brand__name { font-size: 0.9375rem; letter-spacing: 0.03em; } .brand__mark { width: 2.25rem; } .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .menu-btn { padding: 0 var(--s-3); } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-3); color: inherit; text-decoration: none; font-family: var(--font-label); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nav__link::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0.45rem; height: 2px; background: var(--orange-500); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-med) var(--ease-out); }
.nav__link[aria-current="page"]::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); } .site-header a.nav__link:hover { color: inherit; } }

.menu-btn { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding: 0 var(--s-4); background: transparent; color: inherit; border: 1px solid var(--line-dark); border-radius: var(--radius-s); font: 600 1.0625rem/1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.menu-btn:active { transform: scale(0.97); }
.menu-btn__bars { position: relative; width: 1.25rem; height: 0.875rem; }
.menu-btn__bars::before, .menu-btn__bars::after, .menu-btn__bars i { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast) ease, top var(--t-med) var(--ease-out); }
.menu-btn__bars::before { top: 0; } .menu-btn__bars i { top: 6px; } .menu-btn__bars::after { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 6px; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: oklch(1 0 0 / 0.08); } }

.btn.header-cta { display: none; }
@media (min-width: 68.75rem) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .btn.header-cta { display: inline-flex; }
  .site-header__bar { gap: var(--s-6); }
}

/* Mobiles Menü (Vollbild). Ohne JavaScript bleibt die Navigation als einfache Liste unter dem Header erhalten. */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--navy-950); color: var(--on-dark); display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--s-4)) var(--gutter-x) var(--s-6); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-1.5rem); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); }
.mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-menu__link { display: flex; align-items: baseline; justify-content: space-between; min-height: 3.5rem; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem); line-height: 1.1; }
.mobile-menu__link[aria-current="page"] { color: var(--orange-300); }
.mobile-menu__sub { font-family: var(--font-label); font-size: 0.9375rem; color: var(--on-dark-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.mobile-menu__foot { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-4); color: var(--on-dark-muted); font-size: var(--fs-sm); }
.mobile-menu__foot a { color: var(--on-dark); }
.mobile-menu__header-fill { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu .mobile-menu__list li { opacity: 0; transform: translateY(0.75rem); }
  .mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(60ms + var(--i, 0) * 45ms); }
}
@media (min-width: 68.75rem) { .mobile-menu { display: none; } }
html.menu-open { overflow: hidden; }
html:not(.js) .mobile-menu { position: static; visibility: visible; opacity: 1; transform: none; padding: var(--s-4) var(--gutter-x); background: var(--navy-950); }
html:not(.js) .site-header { position: static; background: var(--navy-950); }
html:not(.js) .menu-btn { display: none; }

/* ---------- Buttons ---------- */
.btn { --_bg: var(--orange-500); --_fg: var(--navy-950); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3.25rem; padding: 0 var(--s-6); border: 2px solid var(--_bg); border-radius: var(--radius-s); background: var(--_bg); color: var(--_fg); font-family: var(--font-label); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), color var(--t-med) ease, border-color var(--t-med) ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--on-dark); transform: translateY(101%); transition: transform var(--t-med) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn__arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--navy-950); } .btn:hover::before { transform: none; } .btn:hover .btn__arrow { transform: translateX(0.3rem); }
}
.btn--ghost { --_bg: transparent; --_fg: currentColor; border-color: oklch(1 0 0 / 0.55); }
.btn--ghost::before { background: var(--orange-500); }
.btn--outline { --_bg: transparent; --_fg: var(--ink); border-color: var(--ink); }
.btn--outline::before { background: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { .btn--outline:hover { color: var(--on-dark); } .btn--ghost:hover { border-color: var(--orange-500); } }
.btn--sm { min-height: 2.75rem; padding: 0 var(--s-5); font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
@media (max-width: 30rem) { .btn { white-space: normal; text-align: center; } .btn-row .btn { flex: 1 1 100%; } }

.link-more { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-label); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; color: var(--link); padding-block: 0.25rem; }
.link-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0.28); transform-origin: left; transition: transform var(--t-med) var(--ease-out); }
.link-more svg { width: 1.05em; height: 1.05em; transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-more:hover::after { transform: scaleX(1); } .link-more:hover svg { transform: translateX(0.25rem); } }
.on-dark .link-more, .section--dark .link-more { color: var(--on-dark); }

/* ---------- Brotkrumen, Bereichsnavigation ---------- */
.crumbs { margin: 0 0 var(--s-5); font-size: var(--fs-sm); color: var(--on-dark-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); opacity: 0.6; }
.crumbs a { color: var(--on-dark); text-underline-offset: 0.2em; }

.subnav { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 2; }
.subnav ul { display: flex; gap: var(--s-1) var(--s-5); list-style: none; margin: 0; padding: var(--s-3) 0; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 2.75rem; white-space: nowrap; font-family: var(--font-label); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange-500); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { color: var(--ink); border-bottom-color: var(--blue-300); } }

/* ---------- Hinweise, Fakten, Tabellen ---------- */
.note { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); padding: var(--s-5) var(--s-5); }
.note > :last-child { margin-bottom: 0; }
.note__title { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; margin-bottom: var(--s-2); color: var(--accent-ink); }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 1rem; color: var(--ink-muted); padding-top: 0.15rem; }
.facts dd { margin: 0; }
@media (max-width: 36rem) { .facts > div { grid-template-columns: 1fr; gap: var(--s-1); } }

.table-wrap { overflow-x: auto; margin-block: var(--s-4); -webkit-overflow-scrolling: touch; }
.table-simple { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-simple caption { text-align: left; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); padding-bottom: var(--s-2); }
.table-simple th, .table-simple td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-simple thead th { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9375rem; color: var(--ink-muted); }

/* Schritte (echte Reihenfolge: Kontakt, Termin, erste Einheit) */
.steps { list-style: none; counter-reset: step; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.steps li { counter-increment: step; position: relative; padding-left: 4.5rem; min-height: 3.5rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -0.35rem; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 3.5rem; line-height: 1; color: var(--orange-500); }
.steps h3 { font-size: var(--fs-h4); margin-bottom: var(--s-1); }
.steps p { margin: 0; color: var(--ink-muted); }
.on-dark .steps p { color: var(--on-dark-muted); }
.on-dark .steps h3 { color: var(--on-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--on-dark-muted); position: relative; }
.site-footer__flag { display: block; height: 6px; background: linear-gradient(to bottom, var(--blue-600) 0 50%, var(--orange-500) 50% 100%); }
.site-footer__main { padding-block: var(--s-9) var(--s-7); }
.site-footer h2 { font-family: var(--font-label); font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.site-footer a { color: var(--on-dark); text-decoration: none; display: inline-block; padding-block: 0.2rem; min-height: 2rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { background-size: 100% 1px; color: var(--on-dark); } }
.site-footer address { font-style: normal; }
.site-footer__brand { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.site-footer__brand img { width: 6.5rem; border-radius: 2px; }
.site-footer__brand span { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; color: var(--on-dark); }
.site-footer__legal { border-top: 1px solid var(--line-dark); padding-block: var(--s-5); font-size: var(--fs-sm); }
.site-footer__legal .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); }

/* ===== 7. Sektionen (50-sections.css) ===== */
/* Sektionen der Startseite und gemeinsame Seitenbausteine */

/* ---------- Hero (Startseite) ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--navy-900); color: var(--on-dark); padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(7rem, 14vw, 11rem); min-height: min(100dvh, 60rem); display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 130%; z-index: -1; opacity: 0.55; pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 85% 20%, oklch(0.46 0.12 238 / 0.55), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, oklch(0.3 0.08 245 / 0.8), transparent 70%); }
.hero__waves { position: absolute; inset: 0; z-index: -1; opacity: 0.16; pointer-events: none; overflow: hidden; }
.hero__waves svg { position: absolute; left: 0; width: 200%; height: 14rem; }
.hero__waves svg:nth-child(1) { top: 12%; } .hero__waves svg:nth-child(2) { top: 34%; opacity: 0.7; } .hero__waves svg:nth-child(3) { top: 58%; opacity: 0.5; }
.hero__waves path { fill: none; stroke: var(--blue-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.hero__title { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; margin-bottom: var(--s-5); color: var(--on-dark); }
.hero__title em { font-style: italic; font-weight: 500; color: var(--orange-300); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-dark-muted); max-width: 32rem; margin-bottom: var(--s-6); }
.hero__media { position: relative; }
.hero__media .frame { aspect-ratio: 4 / 3; box-shadow: var(--shadow-l); }
@media (min-width: 62rem) { .hero__media .frame { aspect-ratio: 4 / 5; } }
.hero__media .frame img { object-position: 38% center; }
.hero__badge { position: absolute; left: -1rem; bottom: -1.5rem; display: grid; gap: 0.1rem; padding: var(--s-4) var(--s-5); background: var(--orange-500); color: var(--navy-950); border-radius: var(--radius-s); box-shadow: var(--shadow-m); line-height: 1; }
.hero__badge .num { font-size: 2.5rem; letter-spacing: 0.02em; }
.hero__badge span:last-child { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.9375rem; }
@media (min-width: 62rem) { .hero__badge { left: -2.5rem; } }
.hero__cue { position: absolute; left: max(var(--gutter-x), calc((100vw - 1240px) / 2 + var(--gutter-x) * 0.5)); bottom: clamp(3.5rem, 7vw, 6rem); z-index: 2; display: none; flex-direction: column; align-items: flex-start; gap: var(--s-2); color: var(--on-dark-muted); font-family: var(--font-label); font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.hero__cue i { display: block; width: 1px; height: 2.75rem; background: linear-gradient(var(--orange-500), transparent); transform-origin: top; }
@media (min-width: 62rem) and (min-height: 44rem) { .hero__cue { display: flex; } }

/* ---------- Seitenkopf der Unterseiten ---------- */
.page-hero { position: relative; isolation: isolate; overflow: clip; background: var(--navy-900); color: var(--on-dark); padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)); padding-bottom: clamp(5rem, 9vw, 8rem); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48rem 26rem at 90% 0%, oklch(0.46 0.12 238 / 0.5), transparent 70%); }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--s-4); color: var(--on-dark); max-width: 16ch; }
.page-hero--wide h1 { max-width: 22ch; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 36rem; margin-bottom: 0; }
.page-hero__media .frame { aspect-ratio: 4 / 3; box-shadow: var(--shadow-l); }
.page-hero__media { margin-top: var(--s-6); }
@media (min-width: 62rem) { .page-hero__media { margin-top: 0; } }

/* ---------- Einstieg: Rudern auf der Lahn ---------- */
.intro__text { max-width: 36rem; }
.intro__text .dropcap::first-letter { font-family: var(--font-display); font-weight: 500; float: left; font-size: 4.6em; line-height: 0.8; padding: 0.06em 0.12em 0 0; color: var(--blue-600); }
@media (prefers-color-scheme: dark) { .intro__text .dropcap::first-letter { color: var(--orange-300); } }

/* ---------- Drei Wege (Bildpaneele) ---------- */
.paths { display: grid; gap: var(--s-4); }
.path:hover, .path:focus-visible { color: var(--on-dark); }
.path { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 24rem; border-radius: var(--radius-m); color: var(--on-dark); text-decoration: none; background: var(--navy-800); }
.path picture, .path img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.path img { object-fit: cover; transition: transform 900ms var(--ease-out); }
.path::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.16 0.05 248 / 0.94) 0%, oklch(0.16 0.05 248 / 0.7) 38%, oklch(0.16 0.05 248 / 0.05) 72%); }
.path__body { padding: var(--s-6) var(--s-5) var(--s-5); max-width: 28rem; }
.path h3 { color: var(--on-dark); margin-bottom: var(--s-2); }
.path p { color: var(--on-dark); opacity: 0.92; margin-bottom: var(--s-3); }
.path .link-more { color: var(--on-dark); }
@media (min-width: 62rem) {
  .paths { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); height: 34rem; }
  .path { min-height: 0; transition: flex-grow 600ms var(--ease-out); }
}
@media (min-width: 62rem) and (hover: hover) and (pointer: fine) {
  .paths { display: flex; }
  .path { flex: 1 1 0; }
  .paths:hover .path, .paths:focus-within .path { flex-grow: 0.8; }
  .paths .path:hover, .paths .path:focus-within { flex-grow: 1.7; }
  .path:hover img { transform: scale(1.04); }
}

/* ---------- Training (Plan) ---------- */
.schedule { display: grid; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.slot { border-top: 3px solid var(--orange-500); padding-top: var(--s-3); }
.slot__day { display: block; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.05; }
.slot__time { display: block; margin-top: var(--s-1); font-family: var(--font-label); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--on-dark-muted); }
.section:not(.section--dark):not(.section--deep) .slot__time { color: var(--ink-muted); }
@media (min-width: 36rem) { .schedule { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.next-training { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-dark); border-radius: var(--radius-s); font-size: var(--fs-sm); color: var(--on-dark-muted); }
.next-training strong { color: var(--on-dark); font-weight: 600; }
.next-training[hidden] { display: none; }
.section:not(.section--dark):not(.section--deep) .next-training { border-color: var(--line); color: var(--ink-muted); }
.section:not(.section--dark):not(.section--deep) .next-training strong { color: var(--ink); }

/* ---------- Kaiserregatta ---------- */
.kaiser { position: relative; isolation: isolate; overflow: clip; }
.kaiser__year { position: absolute; z-index: -1; right: -2%; top: 50%; transform: translateY(-50%); font-family: var(--font-label); font-weight: 700; font-size: clamp(9rem, 28vw, 26rem); line-height: 0.8; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px oklch(1 0 0 / 0.12); user-select: none; pointer-events: none; }
@media (max-width: 47.99rem) { .kaiser__year { display: none; } }
.kaiser__trophy { position: relative; display: grid; place-items: center; min-height: 22rem; }
.kaiser__trophy::before { content: ""; position: absolute; width: min(100%, 26rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(0.55 0.1 235 / 0.7), oklch(0.3 0.08 245 / 0) 68%); }
.kaiser__trophy img { position: relative; width: clamp(12rem, 24vw, 16.2rem); border-radius: var(--radius-s); box-shadow: var(--shadow-l); }
.kaiser__facts { list-style: none; margin: var(--s-6) 0; padding: 0; display: grid; gap: 0; }
.kaiser__facts li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--line-dark); }
.kaiser__facts li:last-child { border-bottom: 1px solid var(--line-dark); }
.kaiser__facts .num { font-size: 1.75rem; color: var(--orange-300); }

/* ---------- Chronik (horizontal) ---------- */
.chron-wrap { position: relative; }
.chron-wrap { display: block; overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-3) var(--gutter-x) var(--s-5); margin-inline: calc(var(--gutter-x) * -0.5); scrollbar-width: thin; scrollbar-color: var(--blue-300) transparent; overscroll-behavior-x: contain; }
.chron-wrap:focus-visible { outline-offset: -3px; }
.chron { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-5); width: max-content; min-width: 100%; }
.chron__item { flex: 0 0 min(78vw, 18rem); scroll-snap-align: start; position: relative; padding-top: var(--s-5); border-top: 2px solid var(--line); }
.chron__item::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 4px var(--bg); }
.section--surface .chron__item::before { box-shadow: 0 0 0 4px var(--surface); }
.chron__year { display: block; font-family: var(--font-label); font-weight: 700; font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); line-height: 1; color: var(--blue-600); font-variant-numeric: tabular-nums lining-nums; margin-bottom: var(--s-3); }
@media (prefers-color-scheme: dark) { .chron__year { color: var(--orange-300); } }
.chron__item p { margin: 0; color: var(--ink-muted); }
.chron-controls { display: none; gap: var(--s-2); }
html.js .chron-controls { display: flex; }
.round-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, color var(--t-fast) ease; }
.round-btn:active { transform: scale(0.94); }
.round-btn svg { width: 1.25rem; height: 1.25rem; }
.round-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .round-btn:not(:disabled):hover { background: var(--navy-900); color: var(--on-dark); } }

/* Vertikale Chronik (Unterseite Geschichte) */
.timeline { --rail: 7.5rem; list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: calc(var(--rail) + var(--s-5) * 0.5); top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--s-5); padding: var(--s-3) 0 var(--s-4); position: relative; }
.timeline li::after { content: ""; position: absolute; left: calc(var(--rail) + var(--s-5) * 0.5 - 4px); top: 1.2rem; width: 9px; height: 9px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 4px var(--bg); }
.timeline .num { font-size: 1.5rem; line-height: 1.3; color: var(--blue-600); text-align: right; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .timeline .num { color: var(--orange-300); } }
.timeline p { margin: 0; padding-left: var(--s-4); }
.timeline li.is-major p { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; }
@media (max-width: 30rem) { .timeline { --rail: 6.25rem; } .timeline .num { font-size: 1.25rem; } }

/* ---------- Abschluss: Schnuppern ---------- */
.join { position: relative; background: var(--navy-800); color: var(--on-dark); overflow: clip; }
.join__strip { background: var(--orange-500); color: var(--navy-950); }
.join__strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); }
.join__strip a, .on-dark .join__strip a, .on-dark .join__strip p, .join__strip p { color: var(--navy-950); }
.join__strip a { font-weight: 600; }
.join__strip p { margin: 0; }
.join__flag { width: min(100%, 17rem); border-radius: 2px; box-shadow: var(--shadow-l); }

/* ---------- Personen / Kontakt ---------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.person { padding-top: var(--s-4); border-top: 3px solid var(--orange-500); }
.person__role { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; color: var(--ink-muted); }
.person__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; margin: var(--s-1) 0 var(--s-3); }
.person p { margin: 0; }
.person a { word-break: break-word; }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }

/* ---------- Bildstreifen / Galerie (mit Lightbox) ---------- */
.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.gallery a { position: relative; display: block; overflow: hidden; border-radius: var(--radius-s); }
.gallery .frame { aspect-ratio: 4 / 3; border-radius: 0; }
.gallery img { transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gallery a:hover img { transform: scale(1.05); } }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; color: var(--on-dark); }
.lightbox::backdrop { background: oklch(0.12 0.04 248 / 0.94); }
.lightbox__inner { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: var(--s-4); }
.lightbox__img { min-height: 0; display: grid; place-items: center; }
.lightbox__img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-s); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); }
.lightbox__bar p { margin: 0; color: var(--on-dark-muted); font-size: var(--fs-sm); }
.lightbox .round-btn { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }
.lightbox__close { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2; }

.kaiser--home { padding-top: calc(var(--section-y) * 0.75); }
.on-dark .hero__badge, .on-dark .hero__badge span { color: var(--navy-950); }
.section-head--full { max-width: none; }

/* ---------- Verweisliste (Weiterlesen) ---------- */
.link-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.link-rows a { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.link-rows__t { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; transition: color var(--t-fast) ease; }
.link-rows__d { grid-column: 1; color: var(--ink-muted); }
.link-rows svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.75rem; height: 1.75rem; color: var(--accent-ink); transition: transform var(--t-med) var(--ease-out); }
@media (min-width: 48rem) { .link-rows a { grid-template-columns: minmax(12rem, 0.8fr) 1.4fr auto; } .link-rows__d { grid-column: 2; } .link-rows svg { grid-column: 3; grid-row: 1; } }
@media (hover: hover) and (pointer: fine) { .link-rows a:hover .link-rows__t { color: var(--link); } .link-rows a:hover svg { transform: translateX(0.4rem); } }

/* ---------- Häufige Fragen ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; padding: var(--s-4) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s-4); margin: 0; color: var(--ink-muted); max-width: 52ch; }

.schedule + .next-training, .schedule + p.next-training { margin-top: var(--s-5); }
.next-training { margin-bottom: var(--s-5); }

/* ===== 8. Motive (55-motifs.css) ===== */
/* Gestalterische Motive der Unterseiten: Aussagebänder, Trainingsplan, Bootsklassen, Revierstrecke, Haus im Schnitt */

/* ---------- Aussageband ---------- */
.statement { padding-block: var(--section-y); }
.statement p { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.012em; max-width: 24ch; margin: 0; color: var(--on-dark); text-wrap: balance; }
.statement em { font-style: italic; color: var(--orange-300); }
.statement .caption { margin-top: var(--s-5); max-width: 46ch; }

/* ---------- Großer Trainingsplan ---------- */
.big-schedule { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.big-schedule li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-dark); }
.big-schedule__day { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; color: var(--on-dark); }
.big-schedule__time { font-family: var(--font-label); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--orange-300); }
@media (min-width: 48rem) { .big-schedule li { grid-template-columns: 1fr auto; gap: var(--s-6); } }
.big-schedule + .next-training { margin-top: var(--s-6); }

/* ---------- Bootsklassen ---------- */
.boats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.boats li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); align-items: center; }
.boats__name { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.0625rem; }
.boats__name small { display: block; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); color: var(--ink-muted); }
.boats__hull { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; padding: 0.55rem 1.1rem 0.55rem 0.9rem; border-radius: 999px 1.5rem 1.5rem 999px; background: var(--surface-2); border: 1px solid var(--line); }
.boats__seat { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue-600); }
.boats__cox { width: 1.5rem; height: 1.5rem; background: var(--orange-500); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (prefers-color-scheme: dark) { .boats__seat { background: var(--blue-300); } }
.boats-note { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--s-4); max-width: 46ch; }

/* ---------- Revierstrecke ---------- */
.route { position: relative; margin-block: var(--s-7) var(--s-5); padding-inline: 0.75rem; }
.route__line { position: relative; height: 0.5rem; border-radius: 999px; background: var(--blue-200); }
.route__regatta { position: absolute; top: -0.25rem; bottom: -0.25rem; right: 6%; width: 16%; border-radius: 999px; background: var(--orange-500); }
.route__stop { position: absolute; top: 50%; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--navy-900); border: 3px solid var(--bg); transform: translateY(-50%); }
.route__stop--a { left: -0.6rem; } .route__stop--b { right: -0.6rem; }
.route__labels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); }
.route__labels > div:last-child { text-align: right; }
.route__labels strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.15; }
.route__labels span { color: var(--ink-muted); font-size: var(--fs-sm); }
.route__len { position: absolute; left: 50%; top: -2.4rem; transform: translateX(-50%); font-family: var(--font-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.route__legend { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-muted); }
.route__legend i { width: 1.5rem; height: 0.5rem; border-radius: 999px; background: var(--orange-500); flex: none; }

/* ---------- Haus im Schnitt ---------- */
.house { max-width: 34rem; }
.house__roof { height: 3.25rem; background: var(--navy-800); clip-path: polygon(0 100%, 50% 0, 100% 100%); margin-inline: 4%; }
.house__floor { display: grid; gap: 0.5rem; padding: var(--s-4); background: var(--surface-2); border: 1px solid var(--line); }
.house__floor + .house__floor { border-top: 0; }
.house__label { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9375rem; color: var(--accent-ink); }
.house__rooms { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.house__rooms li { padding: 0.45rem 0.8rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: var(--fs-sm); line-height: 1.3; }
.house__rooms li.is-big { flex: 1 1 8rem; text-align: center; padding-block: 1rem; font-family: var(--font-display); font-size: 1.1875rem; }
.house__ground { height: 0.5rem; background: var(--navy-800); border-radius: 0 0 var(--radius-s) var(--radius-s); }
.house-note { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--s-3); }

/* ---------- Horizontale Schritte ---------- */
.steps--row { grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 62rem) { .steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } .steps--row li { padding-left: 0; padding-top: 4.5rem; } .steps--row li::before { top: -0.5rem; font-size: 5rem; } }

/* ---------- Große Einzelzahl ---------- */
.bignum { display: flex; align-items: baseline; gap: var(--s-4); }
.bignum .num { font-size: clamp(5rem, 4rem + 8vw, 10rem); line-height: 0.85; color: var(--orange-300); }
.bignum span:last-child { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; color: var(--on-dark); }

.join__strip { --link: var(--navy-950); --link-hover: var(--navy-800); }

@media (max-width: 36rem) {
  .boats li { grid-template-columns: 5.25rem 1fr; gap: var(--s-3); }
  .boats__hull { gap: 0.25rem; padding: 0.45rem 0.8rem 0.45rem 0.65rem; }
  .boats__seat, .boats__cox { width: 1.1rem; height: 1.1rem; }
}
@media (max-width: 22.5rem) { .boats li { grid-template-columns: 4.5rem 1fr; } .boats__seat, .boats__cox { width: 1rem; height: 1rem; } .boats__name { font-size: 1rem; } }

/* ===== 56 (56-forms.css) ===== */
/* Formulare: Label über dem Feld, klare Fokuszustände, Fehler- und Statusmeldungen */
.form { display: grid; gap: var(--s-5); max-width: 40rem; }
.form__row { display: grid; gap: var(--s-2); }
.form label, .form legend { font-weight: 600; }
.form .opt { font-weight: 400; color: var(--ink-muted); }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem var(--s-4); font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--ink-muted); border-radius: var(--radius-s); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.form [aria-invalid="true"] { border-color: oklch(0.5 0.2 27); }
.form__hint { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; }
.form__error { font-size: var(--fs-sm); color: oklch(0.45 0.18 27); margin: 0; }
@media (prefers-color-scheme: dark) { .form__error { color: oklch(0.8 0.12 27); } .form [aria-invalid="true"] { border-color: oklch(0.75 0.15 27); } }
.form__check { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); align-items: start; }
.form__check input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--blue-600); }
.form__check label { font-weight: 400; }
.form__status { margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.form__status[hidden] { display: none; }
.form-wrap { display: grid; gap: var(--s-5); }

/* ===== 9. Seitenspezifisches (60-pages.css) ===== */
/* Seitenspezifisches: Siegerliste, Satzung, Rechtstexte, 404 */

/* ---------- Siegerliste ---------- */
.decades { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-7); padding: 0; }
.decades a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) { .decades a:hover { background: var(--navy-900); color: var(--on-dark); border-color: var(--navy-900); } }
.winners-group { margin-bottom: var(--s-8); }
.winners-group h2 { font-size: var(--fs-h3); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); margin-bottom: 0; }
.winners { list-style: none; margin: 0; padding: 0; }
.winners li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.winners .num { font-size: 1.375rem; color: var(--blue-600); }
@media (prefers-color-scheme: dark) { .winners .num { color: var(--orange-300); } }
.winners .is-void { color: var(--ink-muted); font-style: italic; }
.winners .is-void .num { color: var(--ink-muted); }
@media (min-width: 62rem) { .winners { columns: 2; column-gap: var(--s-8); } .winners li { break-inside: avoid; } }

/* ---------- Satzung ---------- */
.satzung-layout { display: grid; gap: var(--s-7); }
@media (min-width: 62rem) { .satzung-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-9); } }
.toc { align-self: start; font-size: var(--fs-sm); }
@media (min-width: 62rem) { .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100dvh - var(--header-h) - 3rem); overflow-y: auto; padding-right: var(--s-3); } }
.toc h2 { font-family: var(--font-label); font-size: 1rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--s-3); color: var(--ink-muted); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 0.35rem 0; color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.toc a span { font-family: var(--font-label); font-weight: 700; margin-right: 0.5rem; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--link); } }
@media (max-width: 61.99rem) { .toc ol { columns: 2; column-gap: var(--s-5); } }
@media (max-width: 36rem) { .toc ol { columns: 1; } }
.satzung-text { max-width: 44rem; }
.satzung-text section { padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.satzung-text section:first-of-type { padding-top: 0; }
.satzung-text h2 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.satzung-text h2 .par { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; color: var(--accent-ink); margin-right: 0.35rem; }
.satzung-text p { text-align: left; hyphens: manual; }
.satzung-text ul { padding-left: 1.25rem; margin-bottom: var(--s-4); }
.satzung-text li + li { margin-top: var(--s-1); }

/* ---------- Rechtstexte ---------- */
.legal h2 { font-size: var(--fs-h4); margin-top: var(--s-7); }
.legal h3 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-top: var(--s-5); }
.legal dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--s-2) var(--s-5); }
.legal dt { font-weight: 600; } .legal dd { margin: 0; }
@media (max-width: 36rem) { .legal dl { grid-template-columns: 1fr; gap: 0; } .legal dd { margin-bottom: var(--s-3); } }

/* ---------- Karte (nur Verweis, kein Drittanbieter-Embed) ---------- */
.place { position: relative; display: grid; align-content: end; min-height: 18rem; padding: var(--s-6); border-radius: var(--radius-m); overflow: hidden; background: var(--navy-800); color: var(--on-dark); isolation: isolate; }
.place::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background: radial-gradient(30rem 20rem at 80% 10%, oklch(0.5 0.12 235 / 0.7), transparent 70%); }
.place svg { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: 0.25; }
.place svg path { fill: none; stroke: var(--blue-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.place address { font-style: normal; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; margin-bottom: var(--s-4); }
.place .coords { font-family: var(--font-label); letter-spacing: 0.06em; color: var(--on-dark-muted); font-size: 1rem; margin-bottom: var(--s-4); }

/* ---------- 404 ---------- */
.not-found { text-align: left; }
.not-found .num { display: block; font-size: clamp(7rem, 24vw, 16rem); line-height: 0.85; color: transparent; -webkit-text-stroke: 2px var(--orange-500); }

/* ===== 10. Bewegung (90-motion.css) ===== */
/* Bewegung. Grundsatz: Inhalte sind ohne Animation vollständig sichtbar (Progressive Enhancement).
   Alles Dekorative läuft nur bei prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {

  /* Einblenden beim Scrollen: erst ab dem Moment, in dem JS .reveal-ready gesetzt hat */
  html.js .reveal-ready [data-reveal] { opacity: 0; transform: translateY(1.5rem); }
  html.js .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
  html.js .reveal-ready [data-reveal="fade"] { transform: none; }
  html.js .reveal-ready [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  html.js .reveal-ready [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
  html.js .reveal-ready [data-reveal="clip"] img { transform: scale(1.12); }
  html.js .reveal-ready [data-reveal="clip"].is-in img { transform: none; transition: transform 1400ms var(--ease-out); }

  /* Hero: Zeilen fahren ein */
  .hero__title .line > span { display: block; animation: line-up 800ms var(--ease-out) both; animation-delay: calc(40ms + var(--i, 0) * 90ms); }
  .hero__lead, .hero .btn-row { animation: fade-up 900ms var(--ease-out) both; animation-delay: 560ms; }
  .hero .btn-row { animation-delay: 680ms; }
  @keyframes line-up { from { transform: translateY(105%); } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(1.25rem); } }

  /* Wasserlinien: sehr langsame Dünung */
  .hero__waves svg { animation: drift 70s linear infinite; }
  .hero__waves svg:nth-child(2) { animation-duration: 95s; animation-direction: reverse; }
  .hero__waves svg:nth-child(3) { animation-duration: 120s; }
  @keyframes drift { to { transform: translateX(-50%); } }

  /* Scroll-Hinweis */
  .hero__cue i { animation: cue 2.4s var(--ease-in-out) infinite; }
  @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

  /* Parallax per Scroll-Timeline, nur wo unterstützt */
  @supports (animation-timeline: view()) {
    .parallax { animation: parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .parallax--slow { --shift: 2rem; }
    .parallax--fast { --shift: 4.5rem; }
    @keyframes parallax { from { transform: translateY(var(--shift, 3rem)); } to { transform: translateY(calc(var(--shift, 3rem) * -1)); } }
    .kaiser__year { animation: year-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes year-drift { from { transform: translate(6%, -50%); } to { transform: translate(-4%, -50%); } }
    .page-hero .frame img, .hero__media .frame img { animation: media-drift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; transform-origin: center; }
    @keyframes media-drift { to { transform: scale(1.08) translateY(1.5rem); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Versatz für gestaffelte Animationen ohne Inline-Styles */
.hero__title .line:nth-child(2) > span { --i: 1; }
.mobile-menu__list li:nth-child(2) { --i: 1; } .mobile-menu__list li:nth-child(3) { --i: 2; } .mobile-menu__list li:nth-child(4) { --i: 3; }
.mobile-menu__list li:nth-child(5) { --i: 4; } .mobile-menu__list li:nth-child(6) { --i: 5; }