/* Aikido Pfullendorf: Leitsystem
   Schilder in Anthrazit auf Kreide, Gold nur für Handlungen.
   Werte, die im Regler-Panel verschiebbar sein sollen, stehen als Variablen auf :root. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --anthrazit: #24262a;
  --anthrazit-hell: #2f3237;
  --linie-dunkel: #464950;
  --gold: #e3a51b;
  --gold-hell: #f0b733;
  --kreide: #f6f4ef;
  --kreide-tief: #ebe7de;
  --kreide-gedimmt: #d6d4ce;
  --stein: #8d9096;
  --schiefer: #55585e;
  --ocker: #8a6300;
  --fehler: #a3261b;
  --fokus: var(--ocker);

  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schmal: 78%;

  --fs-schild: clamp(3rem, 1.3rem + 6.8vw, 7rem);
  --fs-h2: clamp(2.25rem, 1.55rem + 2.9vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 1.22rem + .6vw, 1.75rem);
  --fs-gross: clamp(1.1875rem, 1.06rem + .5vw, 1.5rem);
  --fs-text: clamp(1.0625rem, 1.01rem + .22vw, 1.1875rem);
  --fs-klein: .9375rem;

  --rand: clamp(1rem, .25rem + 3.2vw, 4rem);
  --breite: 82rem;
  --abschnitt: clamp(4.5rem, 2.8rem + 6.4vw, 8.5rem);
  --radius: 14px;
  --radius-klein: 8px;
  --linie: 2px;
  --kopf-hoehe: 4.5rem;

  /* Regler für Phase 6 */
  --einstieg-abstand: clamp(1rem, .4rem + 2.2vw, 2.25rem);
  --schild-innen: clamp(1.5rem, .8rem + 2.4vw, 2.75rem);
  --abfahrt-abstand: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  --pfeil-breite: clamp(7rem, 4rem + 11vw, 12rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
  scrollbar-color: var(--stein) var(--kreide);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--kreide);
  color: var(--anthrazit);
  font-family: var(--schrift);
  font-size: var(--fs-text);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--ocker);
  overflow-x: clip;
}

::selection { background: var(--gold); color: var(--anthrazit); }

img, svg { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sprite { display: none; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-weight: 800;
  font-stretch: var(--schmal);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); margin-bottom: clamp(1rem, .7rem + 1vw, 1.5rem); }
h3 { font-size: var(--fs-h3); line-height: 1.12; }
p { max-width: 65ch; text-wrap: pretty; }
p + p { margin-top: .9em; }

.klein { font-size: var(--fs-klein); }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--anthrazit); color: var(--kreide);
  padding: .75rem 1.25rem; border-radius: var(--radius-klein); font-weight: 700;
}
.sprung:focus { top: 1rem; }

.innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt:not(.dunkel) + .abschnitt:not(.dunkel) { padding-top: 0; }

/* Kreide ist die Wand. Dunkle Abschnitte hängen als emailliertes Schild daran, bündig mit dem großen Schild oben. */
.dunkel { --fokus: var(--gold); padding-inline: var(--rand); }
.dunkel.abschnitt { padding-block: 0; }
.dunkel > .innen {
  max-width: calc(var(--breite) - 2 * var(--rand));
  padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.25rem, .4rem + 3.6vw, 4.5rem);
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius);
}
.dunkel ::selection { background: var(--gold); color: var(--anthrazit); }
.einleitung { font-size: var(--fs-gross); line-height: 1.45; max-width: 52ch; }
.dunkel .einleitung, .dunkel p { color: var(--kreide-gedimmt); }
.dunkel h2, .dunkel h3 { color: var(--kreide); }

/* Pillen, Knöpfe, Pfeil-Links */

.pille {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: .32em .85em;
  font-size: var(--fs-klein); font-weight: 700; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
}
.pille--gold { background: var(--gold); color: var(--anthrazit); }
.pille--hell { border: 1.5px solid currentColor; }
.dunkel .pille--hell { color: var(--kreide); }

.knopf {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s cubic-bezier(.16, 1, .3, 1);
}
.knopf svg { width: 1.25em; height: 1.25em; stroke-width: 2.4; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.knopf--gold { background: var(--gold); color: var(--anthrazit); }
.knopf--gold:hover { background: var(--gold-hell); }
.knopf:hover svg { transform: translateX(4px); }
.knopf:disabled { opacity: .6; cursor: progress; }

.pfeillink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--ocker);
  text-decoration-line: underline;
}
.pfeillink svg { width: 1.15em; height: 1.15em; stroke-width: 2.4; flex: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.pfeillink:hover svg { transform: translateX(3px); }
.dunkel .pfeillink { color: var(--gold); }

/* Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--kreide) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--stein) 35%, transparent);
}
.kopf__innen {
  max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
  min-height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2.25rem);
}
.kopf__logo img { height: clamp(36px, 30px + 1vw, 44px); width: auto; }
.kopf__nav { margin-left: auto; }
.kopf__liste { display: flex; gap: clamp(1rem, 2vw, 1.9rem); list-style: none; padding: 0; }
.kopf__liste a { font-weight: 600; font-size: 1rem; text-decoration: none; padding-block: .5rem; }
.kopf__liste a:hover { text-decoration: underline; }
.kopf__menue { display: none; }
.kopf__probe { padding: .7em 1.25em; font-size: 1rem; }

@media (max-width: 62rem) {
  .kopf__menue {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding: .5rem 1rem; border: var(--linie) solid var(--anthrazit); border-radius: 999px;
    background: transparent; color: var(--anthrazit); font: inherit; font-weight: 700; cursor: pointer;
  }
  .kopf__liste {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--kreide); border-bottom: var(--linie) solid var(--anthrazit);
    padding: .5rem var(--rand) 1rem;
  }
  .kopf__liste.ist-offen { display: flex; }
  .kopf__liste a { display: block; padding: .85rem 0; font-size: 1.125rem; border-bottom: 1px solid color-mix(in srgb, var(--stein) 40%, transparent); }
}
@media (max-width: 22rem) {
  .kopf__probe { display: none; }
}

/* Einstieg: das große Schild */

.start { padding-top: var(--einstieg-abstand); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.schild {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius);
  padding: var(--schild-innen);
  box-shadow: 0 1px 0 rgba(36, 38, 42, .08), 0 18px 40px -24px rgba(36, 38, 42, .55);
}
.schild h1 {
  grid-column: 1 / -1;
  font-size: var(--fs-schild);
  font-stretch: 76%;
  line-height: .94;
  letter-spacing: -.02em;
}
.schild__unter {
  font-size: var(--fs-gross); line-height: 1.42; color: var(--kreide-gedimmt);
  max-width: 50ch;
}
.schild__ziel {
  display: flex; align-items: center; gap: .55rem;
  margin-top: clamp(1.25rem, .8rem + 1.4vw, 2rem);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); font-weight: 600;
  color: var(--stein);
}
.schild__ziel svg { width: 1.4em; height: 1.4em; stroke-width: 2; flex: none; }
.schild__pfeil {
  display: grid; justify-items: end; gap: .75rem;
  color: var(--kreide); text-decoration: none; font-weight: 700; font-size: var(--fs-gross);
}
.schild__pfeil span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.pfeil-gross {
  width: var(--pfeil-breite); height: auto;
  fill: var(--gold); stroke: none;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.schild__pfeil:hover .pfeil-gross { transform: translateX(10px); }

.zusatz {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.zusatz li {
  border: var(--linie) solid var(--anthrazit); border-radius: var(--radius-klein);
  padding: .4rem .9rem; font-weight: 600; font-size: var(--fs-klein);
}

/* Abfahrtstafel */

.abfahrt { margin-top: var(--abfahrt-abstand); --abfahrt-spalten: 7.5rem 5.5rem 6rem minmax(0, 1fr) 11rem auto; }
.abfahrt__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  padding-bottom: .75rem;
}
.abfahrt__kopf h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
/* Die Zeilen teilen sich ein Spaltenraster (subgrid), damit Ort und Pillen in allen Zeilen
   bündig stehen, auch wenn die Pillen verschieden lang sind. */
.abfahrt__liste {
  list-style: none; padding: 0; border-top: var(--linie) solid var(--anthrazit);
  display: grid; grid-template-columns: var(--abfahrt-spalten); column-gap: 1rem;
}
.abfahrt__liste > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.abfahrt__zeile {
  display: grid; grid-column: 1 / -1;
  grid-template-columns: var(--abfahrt-spalten);
  grid-template-columns: subgrid;
  align-items: center; gap: 1rem;
  min-height: 4.5rem; padding: .6rem .75rem;
  border-bottom: var(--linie) solid var(--anthrazit);
  color: var(--anthrazit); text-decoration: none;
  font-size: 1.25rem; font-weight: 600;
  perspective: 600px;
  transition: background-color .2s cubic-bezier(.16, 1, .3, 1);
}
.abfahrt__zeile:hover { background: var(--kreide-tief); }
.abfahrt__zeile:hover .pille--gold { background: var(--gold-hell); }
.abfahrt__tag { font-weight: 700; }
.abfahrt__datum, .abfahrt__zeit { font-variant-numeric: tabular-nums; display: inline-block; }
.abfahrt__zeit { font-size: 1.75rem; font-weight: 800; font-stretch: 85%; }
.abfahrt__ort { color: var(--schiefer); font-weight: 500; }
.abfahrt__zeile .pille { justify-self: end; }
.abfahrt__ferien, .abfahrt__sonder {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .9rem .75rem; font-weight: 600;
}
.abfahrt__ferien { border-top: var(--linie) solid var(--anthrazit); margin-bottom: -2px; }
.abfahrt__ferien .pille { border: 1.5px solid var(--anthrazit); }
.abfahrt__ferien span:not(.pille) { margin-right: .75rem; }
@media (max-width: 52rem) {
  .abfahrt__ferien { padding: .6rem .25rem; gap: .35rem .5rem; font-size: var(--fs-klein); }
}
.abfahrt__sonder a { color: var(--ocker); }
/* Mittlere Breiten: ohne Ort-Spalte, sonst wird die Gruppe zu schmal (der Raum ist in jeder Zeile derselbe) */
@media (max-width: 64rem) {
  .abfahrt { --abfahrt-spalten: 4.5rem 5.5rem 6rem minmax(0, 1fr) auto; }
  .abfahrt__ort { display: none; }
}

/* Fallblatt: die Zeilen klappen beim ersten Laden einmal auf */
@media (prefers-reduced-motion: no-preference) {
  .abfahrt.ist-neu .abfahrt__datum,
  .abfahrt.ist-neu .abfahrt__zeit {
    animation: klappen .62s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--n, 0) * 90ms + 120ms);
    transform-origin: 50% 0;
    backface-visibility: hidden;
  }
  .abfahrt.ist-neu .abfahrt__zeit { animation-delay: calc(var(--n, 0) * 90ms + 200ms); }
}
@keyframes klappen {
  0% { transform: rotateX(-88deg); filter: brightness(.6); }
  70% { transform: rotateX(6deg); }
  100% { transform: none; filter: none; }
}

@media (max-width: 52rem) {
  .schild { grid-template-columns: 1fr; }
  .schild__pfeil { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; }
  .pfeil-gross { width: 3.25rem; transform: rotate(90deg); }
  .schild__pfeil:hover .pfeil-gross { transform: rotate(90deg) translateX(6px); }
  .abfahrt__liste, .abfahrt__liste > li { display: block; }
  .abfahrt__zeile {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "tag datum zeit" "gruppe gruppe pille";
    gap: .35rem .75rem; padding: .85rem .25rem; font-size: 1.125rem;
  }
  .abfahrt__tag { grid-area: tag; }
  .abfahrt__datum { grid-area: datum; }
  .abfahrt__zeit { grid-area: zeit; justify-self: end; font-size: 1.6rem; }
  .abfahrt__gruppe { grid-area: gruppe; }
  .abfahrt__ort { display: none; }
  .abfahrt__zeile .pille { grid-area: pille; }
  .abfahrt__liste li:nth-child(n + 3) { display: none; }
}

/* Was ist Aikido? */

.aikido {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: stretch;
}
.infosaeule {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-height: 26rem;
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.infosaeule__i { width: clamp(5rem, 3rem + 6vw, 9rem); height: auto; aspect-ratio: 1; stroke-width: 1.6; }
.infosaeule__kreis { width: min(100%, 15rem); height: auto; aspect-ratio: 1; color: var(--kreide); align-self: center; }
.aikido__text { align-self: center; }
.aikido__kern {
  font-size: var(--fs-gross); line-height: 1.42; font-weight: 600;
  padding-block: .9rem; margin-block: 1.1rem;
  border-block: var(--linie) solid var(--anthrazit);
}

@media (max-width: 52rem) {
  .aikido { grid-template-columns: 1fr; }
  .infosaeule { min-height: 0; flex-direction: row; align-items: center; }
  .infosaeule__i { width: 4.5rem; }
  .infosaeule { justify-content: space-between; }
  .infosaeule__kreis { width: 6.5rem; align-self: auto; }
}

/* Dein erstes Training: die Strecke */

.strecke {
  --nr: 4rem;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none; padding: 0; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
/* Die Linie endet am letzten Halt. main.js misst ihn und setzt --linie-ende. */
.strecke::before {
  content: ""; position: absolute; left: 0; width: var(--linie-ende, 100%); top: calc(var(--nr) / 2 - 2px);
  height: 4px; border-radius: 2px; background: var(--gold);
}
.strecke__etappe { position: relative; }
.strecke__nr {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--nr); height: var(--nr); border-radius: 50%;
  background: var(--anthrazit); border: 4px solid var(--kreide);
  color: var(--kreide); font-size: 1.75rem; font-weight: 800; font-stretch: 80%;
}
.strecke__bild { width: 2.5rem; height: 2.5rem; color: var(--stein); stroke-width: 1.6; margin: 1.5rem 0 .9rem; }
.strecke h3 { margin-bottom: .6rem; }
.strecke p { font-size: 1.0625rem; }
.strecke a { color: var(--gold); }

/* Beim Scrollen läuft die Linie mit, und jede Etappe leuchtet auf, sobald die Linie sie erreicht.
   main.js setzt --weg (0 bis 1) und .ist-erreicht. Ohne JS oder bei reduzierter Bewegung bleibt alles sichtbar. */
.strecke.ist-animiert::before { clip-path: inset(0 calc((1 - var(--weg, 0)) * 100%) 0 0 round 2px); }
.strecke.ist-animiert .strecke__nr { border-color: var(--linie-dunkel); color: var(--stein); transform: scale(.84); }
.strecke.ist-animiert .strecke__etappe > :not(.strecke__nr) { opacity: .75; transform: translateY(.6rem); }
.strecke.ist-animiert .strecke__etappe > .strecke__bild { opacity: .35; }
.strecke.ist-animiert .ist-erreicht .strecke__nr { border-color: var(--kreide); color: var(--kreide); transform: none; }
.strecke.ist-animiert .ist-erreicht > :not(.strecke__nr) { opacity: 1; transform: none; }
.strecke.ist-bereit::before { transition: clip-path .7s cubic-bezier(.16, 1, .3, 1); }
.strecke.ist-bereit .strecke__nr {
  transition: border-color .25s ease-out, color .25s ease-out, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.strecke.ist-bereit .strecke__etappe > :not(.strecke__nr) {
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.strecke.ist-bereit .strecke__etappe > h3 { transition-delay: 70ms; }
.strecke.ist-bereit .strecke__etappe > p { transition-delay: 140ms; }

.bescheid-tafel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: var(--linie) solid var(--linie-dunkel);
}
.bescheid-tafel h3 { grid-column: 1; }
.bescheid-tafel p { grid-column: 1; margin-top: .4rem; }
.bescheid-tafel .knopf { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 62rem) {
  .strecke { grid-template-columns: 1fr; gap: 2rem; padding-left: calc(var(--nr) + 1.25rem); }
  .strecke::before { left: calc(var(--nr) / 2 - 2px); top: 0; width: 4px; height: var(--linie-ende, 100%); }
  .strecke__nr { position: absolute; left: calc((var(--nr) + 1.25rem) * -1); top: 0; }
  .strecke__bild { margin-top: .75rem; }
  .bescheid-tafel { grid-template-columns: 1fr; }
  .bescheid-tafel .knopf { grid-column: 1; grid-row: auto; justify-self: start; }
  .strecke.ist-animiert::before { clip-path: inset(0 0 calc((1 - var(--weg, 0)) * 100%) 0 round 2px); }
}
@media (max-width: 40rem) {
  .strecke { --nr: 3rem; padding-left: calc(var(--nr) + 1rem); }
  .strecke__nr { left: calc((var(--nr) + 1rem) * -1); font-size: 1.375rem; border-width: 3px; }
}

/* Trainingszeiten: der Fahrplan */

.zeiten {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.zeiten__text { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
.zeiten__text p { margin-bottom: 1rem; }
.zeiten__ferien { font-weight: 700; }
.fahrplan {
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius); padding: clamp(1rem, .5rem + 2vw, 2.25rem);
  --fokus: var(--gold);
}
.fahrplan table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fahrplan thead th {
  text-align: left; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stein); padding: 0 1rem .9rem;
}
.fahrplan tbody th, .fahrplan td {
  text-align: left; vertical-align: middle;
  padding: 1.1rem 1rem; border-top: 1px solid var(--linie-dunkel);
}
.fahrplan tbody th { font-weight: 700; font-size: 1.1875rem; }
.fahrplan__zeit { font-size: 1.5rem; font-weight: 800; font-stretch: 82%; white-space: nowrap; }
.fahrplan__training { color: var(--kreide-gedimmt); font-size: 1.125rem; }
.fahrplan__training .pille { margin-left: .5rem; color: var(--kreide); }
.fahrplan tr.ist-heute th, .fahrplan tr.ist-heute td { background: var(--anthrazit-hell); }
.pille--heute { background: var(--kreide); color: var(--anthrazit); margin-left: .5rem; }

@media (max-width: 62rem) {
  .zeiten { grid-template-columns: 1fr; }
  .zeiten__text { position: static; }
}
@media (max-width: 34rem) {
  .fahrplan thead { display: none; }
  .fahrplan tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: 1rem .25rem; border-top: 1px solid var(--linie-dunkel); }
  .fahrplan tbody th, .fahrplan td { padding: 0; border: 0; }
  .fahrplan__zeit { justify-self: end; font-size: 1.35rem; }
  .fahrplan__training { grid-column: 1 / -1; }
  .fahrplan__training .pille { margin: .4rem 0 0; }
}

/* Kinder: der Abzweig */

.kinder {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: center;
}
.tafel {
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --fokus: var(--gold);
}
.tafel__abzweig { width: 4.5rem; height: 4.5rem; color: var(--gold); stroke-width: 2.2; }
.tafel__titel { margin-top: 1rem; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; font-stretch: 78%; line-height: 1; color: var(--kreide); }
.tafel__zeiten { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; border-top: 1px solid var(--linie-dunkel); }
.tafel__zeiten li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--linie-dunkel);
  font-weight: 600; font-size: 1.125rem;
}
.tafel__zeit { font-weight: 800; font-size: 1.375rem; font-stretch: 82%; font-variant-numeric: tabular-nums; }

@media (max-width: 52rem) {
  .kinder { grid-template-columns: 1fr; }
}

/* Kosten: die Tariftafel */

.tarif {
  width: 100%; max-width: 62rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-collapse: collapse; font-variant-numeric: tabular-nums;
}
.tarif thead th {
  text-align: right; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--schiefer); padding: 0 1rem .8rem;
}
.tarif thead th:first-child { text-align: left; }
.tarif tbody th, .tarif td { padding: 1.15rem 1rem; border-top: var(--linie) solid var(--anthrazit); }
.tarif tbody tr:last-child th, .tarif tbody tr:last-child td { border-bottom: var(--linie) solid var(--anthrazit); }
.tarif tbody th { text-align: left; font-weight: 700; font-size: 1.125rem; }
.tarif td { text-align: right; font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.tarif__summe { font-weight: 800; font-stretch: 82%; font-size: 1.6rem; }
.tarif__haupt th, .tarif__haupt td { background: var(--anthrazit); color: var(--kreide); border-color: var(--anthrazit); }
.tarif__haupt th { border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.tarif__haupt td:last-child { border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.tarif__haupt .tarif__summe { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.kosten__fuss { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.kosten__monat { font-size: var(--fs-gross); font-weight: 700; }
.kosten__fuss .klein { color: var(--schiefer); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.75rem; }

@media (max-width: 40rem) {
  .tarif thead { display: none; }
  .tarif, .tarif tbody, .tarif tr { display: block; }
  .tarif tr { padding: 1rem .25rem; border-top: var(--linie) solid var(--anthrazit); }
  .tarif tbody tr:last-child { border-bottom: var(--linie) solid var(--anthrazit); }
  .tarif tbody th, .tarif td { display: flex; justify-content: space-between; padding: .2rem 0; border: 0 !important; }
  .tarif tbody th { margin-bottom: .35rem; }
  .tarif td::before { content: attr(data-spalte); font-size: var(--fs-klein); font-weight: 600; }
  .tarif__haupt { background: var(--anthrazit); color: var(--kreide); border-radius: var(--radius-klein); padding-inline: 1rem !important; }
  .tarif__haupt th, .tarif__haupt td { background: none; border-radius: 0 !important; }
}

/* Lehrer: die Personaltafel */

.personal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem);
  list-style: none; padding: 0; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.personal li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
  padding: 1.5rem 0; border-top: 1px solid var(--linie-dunkel);
}
.personal li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--linie-dunkel); }
.personal__name { flex-basis: 100%; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; font-stretch: 78%; line-height: 1.05; }
.personal__dan { font-weight: 700; color: var(--kreide); }
.personal__gruppe { color: var(--kreide-gedimmt); }
.personal .pille { margin-left: auto; }
#lehrer .klein { margin-top: 1.5rem; }

@media (max-width: 46rem) {
  .personal { grid-template-columns: 1fr; }
  .personal li:nth-last-child(2) { border-bottom: 0; }
  .personal .pille { margin-left: 0; }
}

/* Termine: Sonderfahrten */

.sonder { list-style: none; padding: 0; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sonder:empty { display: none; }
.sonder__eintrag {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.5rem; border-top: var(--linie) solid var(--anthrazit);
}
.sonder__eintrag:last-child { border-bottom: var(--linie) solid var(--anthrazit); }
.sonder__blatt {
  display: grid; align-content: center; justify-items: center; text-align: center;
  aspect-ratio: 1; background: var(--anthrazit); color: var(--kreide); border-radius: var(--radius-klein);
  padding: .5rem;
}
.sonder__tage { font-size: 1.75rem; font-weight: 800; font-stretch: 78%; line-height: 1; }
.sonder__monat { font-size: .875rem; font-weight: 600; margin-top: .35rem; }
.sonder__inhalt h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.sonder__inhalt h3 .pille { font-stretch: 100%; letter-spacing: 0; }
.sonder__wann { margin-top: .5rem; font-weight: 600; }
.sonder__inhalt .pfeillink { margin-top: .75rem; }
.sonder-leer {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 52rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: var(--linie) solid var(--anthrazit); border-radius: var(--radius);
  font-size: var(--fs-gross); line-height: 1.42; font-weight: 600;
}
.sonder-leer::before {
  content: ""; flex: none; width: 3rem; height: 3rem;
  background: var(--anthrazit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sonder-leer[hidden] { display: none; }

@media (max-width: 40rem) {
  .sonder__eintrag { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .sonder__tage { font-size: 1.3rem; }
  .sonder__monat { font-size: .75rem; }
}

/* Fragen: der Info-Punkt */

.fragen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4.5rem); }
.fragen__liste { border-top: var(--linie) solid var(--anthrazit); }
.frage { border-bottom: var(--linie) solid var(--anthrazit); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); font-weight: 700; line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background:
    linear-gradient(var(--anthrazit), var(--anthrazit)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--anthrazit), var(--anthrazit)) center / 2.5px 14px no-repeat;
  border: var(--linie) solid var(--anthrazit);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.antwort { padding: 0 3.5rem 1.6rem 0; }

@media (max-width: 52rem) {
  .fragen { grid-template-columns: 1fr; }
  .antwort { padding-right: 0; }
}

/* Kontakt: das Zielschild und das Formular */

.kontakt {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start;
}
.zielschild {
  --fokus: var(--gold);
  background: var(--anthrazit); color: var(--kreide);
  border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin: .5rem 0 2rem;
}
.zielschild ::selection { background: var(--gold); color: var(--anthrazit); }
.zielschild p { color: var(--kreide-gedimmt); }
.zielschild .zielschild__raum {
  display: flex; align-items: center; gap: .45em;
  color: var(--kreide); font-size: clamp(2rem, 1rem + 2vw, 3.25rem); font-weight: 800; font-stretch: 76%; line-height: .95; margin-bottom: 1rem;
}
.zielschild__raum svg { width: .8em; height: .8em; stroke-width: 1.7; flex: none; }
.zielschild .pfeillink { color: var(--gold); margin-top: 1.25rem; }
.kontakt__daten { margin-top: 1.5rem; }
.kontakt__daten div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--stein); }
.kontakt__daten dt { color: var(--schiefer); font-weight: 600; }
.kontakt__daten a { color: var(--ocker); }

.formular {
  --fokus: var(--ocker);
  border: var(--linie) solid var(--anthrazit);
  border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
}
.formular h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.formular__einleitung { margin: .75rem 0 1.5rem; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; margin-bottom: .4rem; }
.optional { font-weight: 400; color: var(--schiefer); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--anthrazit);
  background: #fff; border: var(--linie) solid var(--anthrazit); border-radius: var(--radius-klein);
  padding: .75rem .9rem; min-height: 3.1rem;
}
.field select { appearance: none; padding-right: 2.75rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center / 1.2rem no-repeat;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field-hint { font-size: var(--fs-klein); color: var(--schiefer); margin-top: .35rem; }
.field-error { display: none; color: var(--fehler); font-weight: 700; font-size: var(--fs-klein); margin-top: .35rem; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select { border-color: var(--fehler); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formular .knopf { margin-top: .5rem; }
.formular__datenschutz { margin-top: 1rem; }
.formular a { color: var(--ocker); }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status.is-error { color: var(--fehler); }
#form-wrap.is-sent form, #form-wrap.is-sent > h3 { display: none; }
#form-success h3 { margin-bottom: .75rem; }
#form-success:focus { outline: none; }

@media (max-width: 62rem) {
  .kontakt { grid-template-columns: 1fr; }
}

/* Fußzeile */

.fuss { padding-block: 2.5rem; font-size: var(--fs-klein); }
.fuss__innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.fuss__innen::before { content: ""; flex-basis: 100%; border-top: var(--linie) solid var(--anthrazit); margin-bottom: .75rem; }
.fuss p { max-width: none; }

/* Unterseiten (Impressum, Datenschutz) */

.unterseite { padding-block: var(--abschnitt); }
.unterseite h1 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.unterseite h2 { font-size: var(--fs-h3); margin: 2rem 0 .75rem; }
.unterseite h3 { font-size: var(--fs-text); margin: 1.5rem 0 .5rem; }
.unterseite ul { max-width: 65ch; padding-left: 1.25em; }
.unterseite li + li { margin-top: .4em; }
.unterseite * + ul, .unterseite ul + p { margin-top: .9em; }
.zurueck { margin-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}