/* ==========================================================================
   Fahrschule Grunwald — Streckenheft
   Ein digitales Fahrschul-Handbuch: Beschilderungs-Typografie, Kartenpapier,
   Karteikarten-Module. Dunkelmodus = "Nachtfahrt" (echte Pflichtstunde).
   ========================================================================== */

/* -------------------- Fonts (self-hosted, latin subset) -------------------
   Bewusst NICHT über Google Fonts CDN eingebunden: das spart einen externen
   Request beim Seitenaufruf und vermeidet die in Deutschland rechtlich
   heikle Übermittlung der Besucher-IP an Google (LG München I, 3 O 17493/20).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'FGOswald';
  src: url('fonts/oswald-variable.woff2') format('woff2-variations'),
       url('fonts/oswald-variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FGLiterata';
  src: url('fonts/literata-variable.woff2') format('woff2-variations'),
       url('fonts/literata-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FGRecursive';
  src: url('fonts/recursive-variable.woff2') format('woff2-variations'),
       url('fonts/recursive-variable.woff2') format('woff2');
  font-weight: 300 1000;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------- Tokens -------------------------------- */
:root{
  color-scheme: light;

  /* Landkartenpapier — Licht */
  --paper: #EAE2CC;
  --paper-raised: #E1D5B2;
  --paper-deep: #D5C69B;
  --ink: #241F16;
  --ink-soft: #6A6046;
  --ink-faint: #8E8567;
  --line: #B7A97D;
  --line-strong: #9C8E63;

  --sign-yellow: #BD8A1E;
  --sign-yellow-ink: #2E2408;
  --sign-green: #3C5A3E;
  --sign-green-ink: #F4EFD9;
  --sign-red: #A22C1F;

  --shadow: 2px 3px 0 rgba(36,31,22,.14);
  --shadow-lift: 4px 6px 0 rgba(36,31,22,.16);
  --grain-blend: multiply;
  --grain-opacity: .5;

  --font-display: 'FGOswald', 'Arial Narrow', Oswald, sans-serif;
  --font-body: 'FGLiterata', Literata, Georgia, 'Times New Roman', serif;
  --font-mono: 'FGRecursive', Recursive, 'IBM Plex Mono', 'Courier New', monospace;

  --container: 74rem;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 5px;

  --fs-eyebrow: .74rem;
  --fs-small: .88rem;
  --fs-body: 1.06rem;
  --fs-lead: 1.28rem;
  --fs-h4: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-h1: clamp(2.7rem, 1.7rem + 5vw, 5.4rem);

  --ease-out: cubic-bezier(.16,.8,.3,1);
  --dur-s: .22s;
  --dur-m: .5s;
  --dur-l: .9s;

  /* Spacing-Skala für vertikale Abstände zwischen Modulen innerhalb eines
     Kapitels — ersetzt verstreute Inline margin-top Werte. */
  --space-1: .6rem;
  --space-2: 1rem;
  --space-3: 1.6rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;

  /* Zwei bewusst unterschiedliche Breakpoints: kompakte Karten-Raster
     (Team/Info/Footer) brauchen weniger Breite als lesbare Fließtext-
     Spalten (Opener/Über-uns/Kontakt) — daher zwei Stufen statt einer. */
  --bp-cards: 46rem;
  --bp-prose: 61rem;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    /* Nachtfahrt — Asphalt bei Nacht, Amber-Scheinwerfer */
    --paper: #16130D;
    --paper-raised: #201A11;
    --paper-deep: #0F0D08;
    --ink: #ECE2C6;
    --ink-soft: #B2A483;
    --ink-faint: #7C7156;
    --line: #423823;
    --line-strong: #574A2C;

    --sign-yellow: #E7B23F;
    --sign-yellow-ink: #241C08;
    --sign-green: #7CA57E;
    --sign-green-ink: #10190F;
    --sign-red: #DD6248;

    --shadow: 2px 3px 0 rgba(0,0,0,.45);
    --shadow-lift: 4px 6px 0 rgba(0,0,0,.5);
    --grain-blend: screen;
    --grain-opacity: .35;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper: #16130D;
  --paper-raised: #201A11;
  --paper-deep: #0F0D08;
  --ink: #ECE2C6;
  --ink-soft: #B2A483;
  --ink-faint: #7C7156;
  --line: #423823;
  --line-strong: #574A2C;
  --sign-yellow: #E7B23F;
  --sign-yellow-ink: #241C08;
  --sign-green: #7CA57E;
  --sign-green-ink: #10190F;
  --sign-red: #DD6248;
  --shadow: 2px 3px 0 rgba(0,0,0,.45);
  --shadow-lift: 4px 6px 0 rgba(0,0,0,.5);
  --grain-blend: screen;
  --grain-opacity: .35;
}
:root[data-theme="light"]{
  color-scheme: light;
  --paper: #EAE2CC;
  --paper-raised: #E1D5B2;
  --paper-deep: #D5C69B;
  --ink: #241F16;
  --ink-soft: #6A6046;
  --ink-faint: #8E8567;
  --line: #B7A97D;
  --line-strong: #9C8E63;
  --sign-yellow: #BD8A1E;
  --sign-yellow-ink: #2E2408;
  --sign-green: #3C5A3E;
  --sign-green-ink: #F4EFD9;
  --sign-red: #A22C1F;
  --shadow: 2px 3px 0 rgba(36,31,22,.14);
  --shadow-lift: 4px 6px 0 rgba(36,31,22,.16);
  --grain-blend: multiply;
  --grain-opacity: .5;
}

/* -------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html:focus-within{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variation-settings: 'opsz' 12;
  transition: background var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out);
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: none; cursor: pointer; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.04;
}
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
.font-numeric, .stat-value, .timetable td, .price, .chapter-index, nav .num{
  font-variant-numeric: tabular-nums;
}

::selection{ background: var(--sign-yellow); color: var(--sign-yellow-ink); }

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

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

/* --------------------------- Texture: paper grain ------------------------ */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(36,31,22,.06) .5px, transparent .5px),
    radial-gradient(rgba(36,31,22,.045) .5px, transparent .5px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1.5px 3px;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
}

/* ------------------------------- Layout ----------------------------------*/
.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}
main{ position: relative; z-index: 1; }
section{ position: relative; }
.chapter{
  padding-block: clamp(3.5rem, 4vw + 1rem, 7rem);
  border-top: 1px dashed var(--line);
}
.chapter-head{
  display: grid;
  grid-template-columns: minmax(0,7rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.chapter-index{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 500;
  font-size: clamp(2.4rem, 2rem + 2vw, 4rem);
  color: var(--sign-yellow);
  line-height: .9;
}
.chapter-head h2{ font-size: var(--fs-h2); }
.chapter-kicker{
  display:block;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin-bottom: .6em;
}

/* ------------------------------ Top bar ----------------------------------*/
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .9rem;
  gap: 1rem;
}
.brand{
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-decoration: none;
}
.brand .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1.7rem; height: 1.7rem;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 700;
  font-size: .82rem;
  transform: rotate(-3deg);
  flex: none;
}
.brand small{
  display:block;
  font-family: var(--font-mono);
  text-transform: none;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  font-weight: 400;
}
.topbar-right{ display:flex; align-items:center; gap: 1.1rem; }
.topbar-nav{ display:flex; align-items:center; gap: .5rem; }
.nav-btn{
  display: none;
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  padding: .45rem .85rem;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.nav-btn:hover{ background: var(--paper-raised); color: var(--ink); }
.cta-contact{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  padding: .45rem .85rem;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  text-decoration: none;
  border: 1px solid var(--sign-yellow);
  transition: background var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
.cta-contact:hover{ background: var(--sign-yellow-ink); color: var(--sign-yellow); }
.toc-btn{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .2rem;
}
.theme-toggle{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.theme-toggle:hover{ background: var(--paper-raised); color: var(--ink); }
.theme-toggle[aria-pressed="true"]{ background: var(--sign-yellow); color: var(--sign-yellow-ink); border-color: var(--sign-yellow); }
.toc-btn .bars{
  display:flex; flex-direction: column; gap: 3px; width: 18px;
}
.toc-btn .bars span{
  height: 2px; background: currentColor; width: 100%;
  transition: transform var(--dur-s) var(--ease-out), width var(--dur-s) var(--ease-out);
}
.toc-btn .bars span:nth-child(2){ width: 65%; }
.toc-btn:hover .bars span:nth-child(2){ width: 100%; }

/* ------------------------------ TOC overlay -------------------------------*/
dialog#toc{
  border: none;
  padding: 0;
  max-width: min(46rem, 92vw);
  width: 100%;
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
dialog#toc::backdrop{
  background: color-mix(in srgb, var(--paper-deep) 70%, black 30%);
  backdrop-filter: blur(2px);
}
.toc-inner{ padding: clamp(1.5rem,4vw,3rem); }
.toc-inner > .toc-top{
  display:flex; justify-content: space-between; align-items:baseline;
  margin-bottom: 1.5rem; border-bottom: 1px dashed var(--line); padding-bottom: 1rem;
}
.toc-inner h3{ font-size: 1.3rem; }
.toc-close{
  font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
}
.toc-list a{
  display:grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
  text-decoration: none;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line);
}
.toc-list a .n{
  font-family: var(--font-mono); font-variation-settings: 'MONO' 1, 'wght' 600;
  color: var(--sign-yellow);
}
.toc-list a .t{ font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; }
.toc-list a .d{ display:block; font-family: var(--font-body); text-transform:none; font-size:.86rem; color: var(--ink-soft); margin-top:.2rem; }
.toc-list a:hover .t, .toc-list a:focus-visible .t{ text-decoration: underline wavy var(--sign-yellow); text-underline-offset: .2em; }

/* ------------------------------ Scroll progress ---------------------------*/
.route-progress{
  position: fixed;
  left: 0; top: 0;
  width: 3px; height: 100%;
  z-index: 39;
  background: var(--line);
  opacity: .5;
}
.route-progress i{
  display:block; width: 100%; height: 0%;
  background: var(--sign-yellow);
  transition: height .08s linear;
}

/* -------------------------------- Opener ---------------------------------*/
.opener{
  padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 6vw, 7rem);
}
.opener-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 61rem){
  .opener-grid{ grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: end; }
}
.opener-kicker{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.opener-kicker::before{
  content: ""; width: 1.6rem; height: 1px; background: var(--line-strong);
}
.opener h1{
  font-size: var(--fs-h1);
  max-width: 15ch;
}
.opener h1 em{
  font-style: normal;
  color: var(--sign-yellow);
  position: relative;
}
.opener-lead{
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  max-width: 42ch;
  margin-top: 1.4rem;
  color: var(--ink-soft);
}
.opener-cue{
  margin-top: 2.2rem;
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  text-decoration:none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .2rem;
}
.opener-cue svg{ width: 1rem; height:1rem; transition: transform var(--dur-s) var(--ease-out); }
.opener-cue:hover svg{ transform: translateY(3px); }

.route-figure{ position: relative; max-width: 17rem; margin-inline: auto; }
.route-figure svg{ width: 100%; height: auto; }
@media (min-width: 61rem){
  .route-figure{ max-width: none; margin-inline: 0; }
}
.route-figure .route-path{
  fill:none; stroke: var(--sign-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.route-figure.in-view .route-path{
  animation: draw 2.4s var(--ease-out) forwards .2s;
}
.route-figure .waypoint{ fill: var(--ink); }
.route-figure .waypoint.start{ fill: var(--sign-green); }
.route-figure .waypoint.end{ fill: var(--sign-red); }
@keyframes draw{ to{ stroke-dashoffset: 0; } }

.margin-stats{
  margin-top: clamp(2rem,4vw,3.5rem);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.margin-stats > div{
  background: var(--paper);
  padding: 1rem 1.1rem;
}
.margin-stats .stat-value{
  font-family: var(--font-mono);
  font-variation-settings: 'MONO' 1, 'wght' 700;
  font-size: 1.9rem;
  color: var(--sign-yellow);
  display:block;
}
.margin-stats .stat-label{
  font-size: .78rem;
  color: var(--ink-soft);
  display:block;
  margin-top:.2rem;
}

/* ------------------------------ Reveal on scroll --------------------------*/
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-l) var(--ease-out), transform var(--dur-l) var(--ease-out);
}
.reveal.in-view{ opacity: 1; transform: none; }
.reveal-group > *{ transition-delay: calc(var(--i,0) * 70ms); }

/* -------------------------------- Prose -----------------------------------*/
.prose{ max-width: 62ch; }
.prose p + p{ margin-top: 1.1em; }
.lead{ font-size: var(--fs-lead); color: var(--ink-soft); }

.pull-quote{
  border-left: 3px solid var(--sign-yellow);
  padding-left: 1.4rem;
  margin: var(--space-5) 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.35rem;
  font-variation-settings: 'opsz' 30;
  line-height: 1.4;
}
.pull-quote cite{
  display:block;
  margin-top: .8rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* -------------------------------- Section 01: Über uns --------------------*/
.about-grid{
  display: grid;
  gap: clamp(2rem,4vw,3.5rem);
}
@media (min-width: 61rem){
  .about-grid{ grid-template-columns: 1fr 1fr; }
}
.stamp-list{ margin-top: 2rem; display:grid; gap: .1rem; }
.stamp-list li{
  display:grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--line);
  align-items:start;
}
.stamp-list li::before{
  content: "✓";
  font-family: var(--font-mono);
  color: var(--sign-green);
  font-weight: 700;
  border: 1px solid var(--sign-green);
  width: 1.5rem; height: 1.5rem;
  display:flex; align-items:center; justify-content:center;
  font-size: .8rem;
  transform: rotate(-4deg);
}

/* -------------------------------- Section 02: Klassen ----------------------*/
.class-groups{ display: grid; gap: 2.5rem; }
.class-group-title{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  display:flex; align-items:center; gap: .7rem;
}
.class-group-title::after{ content:""; height:1px; flex:1; background: var(--line); }
.class-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.class-grid.single{
  grid-template-columns: minmax(13.5rem, 18rem);
}
.class-card{
  background: var(--paper);
  padding: 1.3rem 1.2rem;
}
.class-card .code{
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--sign-yellow);
  line-height: 1;
}
.class-card .age{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  display:block;
  margin-top: .5rem;
}
.class-card p{ font-size: .92rem; margin-top: .6rem; color: var(--ink-soft); }

/* -------------------------------- Section 03: Fuhrpark ---------------------*/
.fleet-list{ display:grid; gap: 0; border-top: 1px dashed var(--line); }
.fleet-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.fleet-row .name{ font-family: var(--font-display); text-transform:uppercase; font-size: 1.05rem; }
.fleet-row .name.electric{ color: var(--sign-green); }
.fleet-row .spec{ display:block; font-size: .88rem; color: var(--ink-soft); margin-top:.15rem; }
.fleet-row .tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .55rem;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  justify-self: end;
}
.fleet-row .tag.electric{ border-color: var(--sign-green); color: var(--sign-green); }
.fleet-row .count{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap;
  justify-self: end;
}
.fleet-note{
  margin-top: 1.6rem;
  font-size: .9rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--line-strong);
  padding-left: 1rem;
}

/* -------------------------------- Section 04: Team --------------------------*/
.team-featured{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display:flex;
  gap: 1.4rem;
  align-items:flex-start;
}
.team-featured .badge{
  flex:none;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  overflow: hidden;
}
.team-featured .badge img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.team-featured .role{
  display:block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--sign-green);
  margin-bottom: .35rem;
}
.team-featured h3{ text-transform:none; font-family: var(--font-body); font-weight:600; letter-spacing:0; }
.team-featured p{ font-size: .95rem; color: var(--ink-soft); margin-top:.6rem; max-width: 58ch; }
.team-photo{
  margin-top: 1.2rem;
  max-width: 22rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: .5rem;
}
.team-photo img{
  display: block;
  width: 100%;
  height: auto;
}
.team-photo figcaption{
  margin-top: .5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

/* -------------------------------- Section 05: Zeittabelle -------------------*/
.timetable-wrap{ overflow-x: auto; border: 1px solid var(--line); }
table.timetable{
  border-collapse: collapse;
  width: 100%;
  min-width: 24rem;
  font-family: var(--font-mono);
}
table.timetable caption{
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .95rem;
  padding: .9rem 1.1rem;
  background: var(--paper-deep);
}
table.timetable th, table.timetable td{
  text-align: left;
  padding: .8rem 1.1rem;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
}
table.timetable thead th{
  border-top: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
}
table.timetable td.time{ font-variation-settings: 'MONO' 1, 'wght' 600; white-space: nowrap; }
.fee-row{ display:flex; justify-content:space-between; gap:1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-family: var(--font-mono); font-size: .92rem; }
.fee-row:last-child{ border-bottom:none; }
.notice-box{
  margin-top: 1.6rem;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  padding: 1.1rem 1.3rem;
  font-size: .92rem;
  border-left: 4px solid var(--sign-yellow-ink);
  box-shadow: var(--shadow);
}
.notice-box strong{ display:block; font-family: var(--font-display); text-transform:uppercase; font-size: .85rem; margin-bottom:.3rem; letter-spacing:.03em; }

/* -------------------------------- Section 06: Anmeldung ---------------------*/
.steps{ counter-reset: step; display:grid; gap: 1px; background: var(--line); border:1px solid var(--line); }
.step{ background: var(--paper); padding: 1.4rem 1.4rem 1.4rem 4.2rem; position: relative; }
.step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position:absolute; left: 1.2rem; top: 1.3rem;
  font-family: var(--font-mono);
  font-variation-settings:'MONO' 1,'wght' 700;
  color: var(--sign-yellow);
  font-size: 1.1rem;
}
.step h3{ text-transform:none; font-family: var(--font-body); font-weight:600; font-size: 1.15rem; margin-bottom:0; }
.step p{ font-size: .92rem; color: var(--ink-soft); margin-top: .35rem; }
.doc-list{ margin-top: .6rem; display:grid; gap: .3rem; }
.doc-list li{ font-size: .88rem; display:flex; gap:.5rem; }
.doc-list li::before{ content:"·"; color: var(--ink-faint); flex:none; }

.info-cards{ display:grid; gap: 1.2rem; margin-top: 1rem; }
@media (min-width: 46rem){ .info-cards{ grid-template-columns: repeat(2,1fr);} }
.info-card{ border: 1px solid var(--line); padding: 1.2rem 1.3rem; }
.info-card h4{ font-size: 1rem; margin-bottom:.5rem; }
.info-card p{ font-size: .88rem; color: var(--ink-soft); }
.info-card a{ text-decoration-color: var(--line-strong); }

/* -------------------------------- Section 07: FAQ ---------------------------*/
.faq-list{ border-top: 1px dashed var(--line); }
.faq-item{ border-bottom: 1px dashed var(--line); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.15rem .2rem;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 1rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .01em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{
  font-family: var(--font-mono);
  font-size: 1.3rem;
  flex: none;
  transition: transform var(--dur-s) var(--ease-out);
  color: var(--sign-yellow);
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-a{
  padding: 0 .2rem 1.3rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: .96rem;
}

/* -------------------------------- Section 08: Kontakt ------------------------*/
.contact-grid{ display:grid; gap: 2.5rem; }
@media (min-width: 61rem){ .contact-grid{ grid-template-columns: 1fr 1.15fr; } }
.contact-card{ border: 1px solid var(--line); padding: 1.6rem; background: var(--paper-raised); }
.contact-card dl{ display:grid; gap: .7rem; margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: .9rem; }
.contact-card dl > div{
  display:grid;
  grid-template-columns: 6.5rem 1fr;
  gap: .8rem;
  align-items: start;
  padding-block: .3rem;
  border-bottom: 1px dashed var(--line);
}
.contact-card dl > div:last-child{ border-bottom: none; }
.contact-card dt{ font-family: var(--font-mono); text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: var(--ink-soft); }
.contact-card dd{ margin: 0; font-size: 1rem; }
.contact-card dd small{ display:block; font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }
.contact-card a{ text-decoration-color: var(--line-strong); }
.transit-note{ margin-top:1.2rem; font-size: .86rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top:1rem; }

form.contact-form{ display:grid; gap: 1.1rem; }
/* Spamschutz-Feld: aus dem Sichtfeld geschoben statt display:none, weil manche Bots das erkennen */
.hp-field{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-row{ display:grid; gap: .4rem; }
.form-row.two{ grid-template-columns: 1fr 1fr; gap: 1.1rem; }
label{ font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
input, textarea, select{
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  font-size: .96rem;
  color: var(--ink);
  width: 100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--sign-green); outline-offset: 1px; }
textarea{ resize: vertical; min-height: 7rem; }
.btn{
  justify-self: start;
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  padding: .85rem 1.4rem;
  border: 1px solid var(--ink);
  transition: transform var(--dur-s) var(--ease-out), background var(--dur-s) var(--ease-out);
}
.btn:hover{ background: transparent; color: var(--ink); transform: translate(-2px,-2px); box-shadow: var(--shadow); }
.form-status{ font-size: .84rem; color: var(--sign-green); min-height: 1.2em; }

/* -------------------------------- Footer -------------------------------------*/
footer{
  border-top: 1px solid var(--line);
  padding-block: 2.6rem 2rem;
  background: var(--paper-deep);
}
.footer-grid{
  display:grid; gap: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem){ .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; } }
footer address{ font-style: normal; font-size: .92rem; line-height: 1.7; }
footer h5{ font-family: var(--font-mono); text-transform:uppercase; font-size:.74rem; letter-spacing:.08em; color: var(--ink-soft); margin-bottom:.7rem; }
footer ul{ display:grid; gap:.5rem; font-size: .92rem; }
footer a{ text-decoration-color: var(--line-strong); }
.footer-bottom{
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line);
  display:flex; flex-wrap:wrap; gap: .8rem 1.4rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em;
}
.footer-bottom button{ text-decoration: underline; text-underline-offset: .2em; text-transform:uppercase; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.05em; color: var(--ink-faint); }

/* -------------------------------- Impressum dialog ----------------------------*/
dialog#impressum{
  border:none; padding:0; max-width: 40rem; width: 100%;
  background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-lift);
  max-height: 85vh;
}
dialog#impressum::backdrop{ background: color-mix(in srgb, var(--paper-deep) 70%, black 30%); backdrop-filter: blur(2px); }
.dialog-inner{ padding: clamp(1.4rem,4vw,2.4rem); overflow-y:auto; max-height: 85vh; }
.dialog-inner h3{ font-size: 1.3rem; margin-bottom: 1rem; }
.dialog-inner p{ font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.dialog-inner .close-x{ float:right; font-family: var(--font-mono); text-transform:uppercase; font-size:.75rem; }


/* ------------------- Impressum / Datenschutz im Dialog ---------------------*/
.dialog-inner h4{
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .92rem; color: var(--ink); margin: 1.4rem 0 .5rem;
}
.dialog-inner h3 + h4{ margin-top: .8rem; }
.dialog-inner a{ color: var(--ink); text-decoration: underline; text-underline-offset: .15em; }
.dialog-inner .close-x{
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-raised); padding: .25rem .1rem .5rem .7rem;
}
/* Noch offene Angaben, die vor dem Livegang gefüllt werden müssen. Bewusst
   auffällig: ein vergessener Platzhalter soll sofort ins Auge springen. */
.platzhalter{
  background: color-mix(in srgb, var(--sign-red) 14%, transparent);
  outline: 1px dashed var(--sign-red); padding: 0 .25em;
  font-family: var(--font-mono); font-size: .85em; color: var(--sign-red);
}
/* Datenschutzhinweis direkt über dem Absenden-Knopf */
.form-note{ font-size: .82rem; color: var(--ink-faint); margin: 0 0 1rem; max-width: 46ch; }
.form-note .linklike{
  font: inherit; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: .15em; cursor: pointer;
}
/* Impressum und Datenschutz klein am Fuß des Inhaltsverzeichnisses */
.toc-legal{
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint);
}
.toc-legal button{
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: .25em;
  text-decoration-color: var(--line-strong);
}
.toc-legal button:hover, .toc-legal button:focus-visible{
  color: var(--ink); text-decoration-color: var(--sign-yellow);
}

/* -------------------------------- Utility --------------------------------------*/
.mt-1{ margin-top: var(--space-1); }
.mt-2{ margin-top: var(--space-2); }
.mt-3{ margin-top: var(--space-3); }
.mt-4{ margin-top: var(--space-4); }
.mt-5{ margin-top: var(--space-5); }
.mt-6{ margin-top: var(--space-6); }
.text-tight{ font-size: .9rem; color: var(--ink-soft); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a.visually-hidden:focus{
  position: fixed;
  top: .8rem; left: .8rem;
  width: auto; height: auto;
  margin: 0; padding: .7rem 1.1rem;
  overflow: visible; clip: auto; white-space: normal;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  text-decoration: none;
  z-index: 100;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 52rem){
  .nav-btn{ display:inline-block; }
}

/* Aktuelles: Meldungen aus dem Admin-Bereich direkt unter dem Opener */
.aktuelles{ display: grid; gap: 1rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.aktuelles .notice-box{ margin-top: 0; font-size: 1rem; max-width: 52rem; }
.aktuelles .notice-box a{ color: inherit; }