/* ==========================================================================
   Fahrschule Selim - Stylesheet der oeffentlichen Seite.

   Aufbau:
   1. Design-Tokens        - nur fuer neu geschriebenes CSS, siehe Hinweis
   2. Basis                - uebernommen aus dem <helmet> des Prototyps
   3. Keyframes            - unveraendert
   4. Bewegung reduzieren  - neu
   5. Hover- und Fokus-Klassen - Ersatz fuer style-hover/style-focus
   6. Bildflaechen         - Ersatz fuer den 10x wiederholten Inline-Block
   7. Formular             - Klassenwahl ohne JavaScript
   ========================================================================== */

/* --- 1. Design-Tokens ----------------------------------------------------
   Uebernommen aus _ds/modernist-.../styles.css. Bewusst NICHT auf die
   bestehenden Inline-Styles angewandt: das Designsystem war von keiner
   Prototyp-Seite je verlinkt, und es nachtraeglich einzuhaengen wuerde
   jedes Element ohne Inline-Override verschieben. Die Tokens gelten fuer
   das hier neu geschriebene CSS und schaffen einen Weg fuer eine spaetere,
   abschnittsweise Migration.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;

  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-500: #ff563c;
  --color-accent-100: #fff2ef;
  --color-accent-300: #ffc4b8;

  --color-neutral-300: #d7d3d3;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-ink-soft: #bab6b6;
  --color-placeholder: #e2e0e0;

  /* Schrift auf rotem oder dunklem Grund. Fehlte bisher als Token,
     obwohl #fff siebenmal im Markup stand. */
  --color-on-accent: #fff;

  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --radius-md: 0px;

  /* Breite des Inhaltsbandes und sein seitlicher Abstand - an zwoelf
     Stellen identisch. */
  --wrap-max: 1560px;
  --wrap-pad: clamp(16px, 4vw, 32px);

  /* Staerke der durchgehenden Trennlinien. */
  --rule-width: 2px;
}

/* --- 2. Basis (aus dem <helmet> des Prototyps) --------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #f3f2f2;
  color: #201e1d;
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: #ae1800; text-decoration: none; }
a:hover { color: #ec3013; }

/* Das Browser-Stylesheet setzt fuer [hidden] nur display:none ohne
   Gewicht. Das Mobilmenue traegt seine Anzeigeart inzwischen ueber die
   Klasse .mobile-menu - bei gleicher Spezifitaet entschiede sonst die
   Reihenfolge, und die Klasse steht weiter unten. Deshalb bleibt hier
   !important: es ist die Ausnahme, die [hidden] verlaesslich macht. */
[hidden] { display: none !important; }

::selection { background: #ffc4b8; }
:focus-visible { outline: 2px solid #ec3013; outline-offset: 2px; }

/* Sichtbar erst bei Tastaturfokus - im Prototyp gab es das nicht. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #201e1d;
  color: #f3f2f2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 16px 20px;
}
.skip-link:focus {
  left: 0;
  color: #f3f2f2;
}

/* --- 3. Keyframes -------------------------------------------------------
   selimRise war im Prototyp definiert, aber nirgends benutzt - entfaellt.
   -------------------------------------------------------------------------- */
@keyframes selimDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-80px,0,0); }
}
@keyframes selimMarquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@keyframes selimSweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes selimBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: .15; }
}

/* Der Umschaltpunkt steht jetzt bei der Kopfzeile, auf Klassen statt auf
   data-Attributen und ohne !important - siehe Abschnitt 12. */

/* --- 4. Bewegung reduzieren ---------------------------------------------
   Der Prototyp laesst drei Endlos-Animationen dauerhaft laufen. Wer in
   seinem System reduzierte Bewegung eingestellt hat, bekommt sie hier
   abgeschaltet - Layout und Farben bleiben unveraendert.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Das Laufband haelt sichtbar an, statt auf halber Strecke zu springen. */
  [data-marquee] { animation: none !important; transform: none !important; }
}

/* --- 5. Hover- und Fokus-Zustaende ---------------------------------------
   ENTFAELLT SEIT P11.

   Hier standen elf Klassen mit Namen wie .hv-cta, die aus den
   style-hover-Attributen der dc-runtime stammten. Jede ihrer
   Deklarationen trug !important, weil sie sonst gegen das Inline-style
   des Elements verloren haette.

   Seit die Grundzustaende in Klassen stehen, sind daraus gewoehnliche
   :hover-Regeln geworden, die bei ihrer jeweiligen Komponente stehen -
   .btn--primary:hover, .nav-link:hover, .link-on-dark:hover und so
   weiter. Siehe die Abschnitte 10 und 12.
   -------------------------------------------------------------------------- */

/* --- 6. Bildflaechen -----------------------------------------------------
   Im Prototyp stand dieser Block zehnmal wortgleich als Inline-Style. Da
   die Flaeche kuenftig vom image-Partial erzeugt wird, gehoert sie in eine
   Klasse - sonst wuerde PHP Style-Strings zusammenbauen.

   Das Rautenmuster ist der Platzhalter. Liegt ein Bild vor, setzt das
   Partial background-image per Inline-Style und ueberschreibt es damit.
   -------------------------------------------------------------------------- */
.photo {
  /* Als Variable, damit das Titelbild seinen zusaetzlichen Kontrast
     behaelt und die farbige Fassung trotzdem an einer Stelle
     umgeschaltet wird. Der Grundzustand rechnet weiterhin auf exakt
     grayscale(1) - die bestehende Seite aendert sich dadurch nicht. */
  --photo-filter: grayscale(1);

  background-color: #eae9e9;
  background-size: cover;
  background-position: center;
  filter: var(--photo-filter);
  display: flex;
  align-items: flex-end;
}

.photo--placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    #e2e0e0 0 12px,
    #eae9e9 12px 24px
  );
}

/*
 * Die sechs Verwendungen. Frueher stand die Groesse als $box-Parameter im
 * Aufruf und landete inline im Markup; jetzt sagt der Aufrufer nur noch,
 * um welche Art Bild es sich handelt.
 *
 * Der Innenabstand gilt der Platzhalter-Beschriftung und weicht je
 * Verwendung ab - deshalb steht er hier und nicht in .photo.
 */
.photo--hero {
  flex: 1;
  min-height: clamp(300px, 46vh, 560px);
  padding: 24px;
  /* Das Titelbild hat zusaetzlich leichten Kontrast. */
  --photo-filter: grayscale(1) contrast(1.05);
}
.photo--room     { margin-top: 36px; height: 280px; padding: 18px; }
.photo--card     { height: 300px; padding: 16px; }
.photo--portrait { height: 340px; }
.photo--spot     { margin-top: 32px; height: 240px; padding: 16px; }
.photo--map      { flex: 1; min-height: 360px; padding: 16px; }

/*
 * Farbig. Der Kontrast des Titelbilds bleibt erhalten - er ist eine
 * eigene Behandlung, nicht Teil der Entsaettigung.
 *
 * Die zweite Regel wiegt (0,2,0) und schlaegt .photo--hero damit
 * unabhaengig von der Reihenfolge im Stylesheet.
 */
.photo--color { --photo-filter: none; }
.photo--color.photo--hero { --photo-filter: contrast(1.05); }

.photo__caption {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: #605d5d;
  background: #f3f2f2;
  padding: 6px 10px;
}
.photo__caption--hero { letter-spacing: .1em; }

/* --- 7. Formular ---------------------------------------------------------
   Die Klassenwahl war im Prototyp eine Reihe von Schaltflaechen mit
   React-State. Hier sind es echte Radiobuttons: die Auswahl funktioniert
   damit ohne JavaScript und wird beim Absenden mitgeschickt.
   -------------------------------------------------------------------------- */
.class-option {
  border: 2px solid #201e1d;
  background: transparent;
  color: #201e1d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
}
.class-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.class-option:hover { border-color: #ec3013; }
.class-option:has(input:checked),
.class-option.is-selected {
  border-color: #ec3013;
  background: #ec3013;
  color: #fff;
}
.class-option:has(input:focus-visible) {
  outline: 2px solid #ec3013;
  outline-offset: 2px;
}

/* Fehlerzustaende des Formulars */
.field-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #ae1800;
}

/* Honigtopf gegen Spam-Roboter: fuer Menschen unsichtbar, aber nicht per
   display:none - manche Roboter ignorieren ausgeblendete Felder. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   8. Layout-Grundformen
   Ab hier beginnt die Trennung von CSS und Markup. Die Klassen ersetzen
   Inline-Styles, die im Markup mehrfach wortgleich vorkamen.
   ========================================================================== */

/* Das Inhaltsband - zwoelfmal identisch im Markup. */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* Die Kopfzeile hat einen eigenen, engeren Seitenabstand. */
.wrap--tight { padding: 10px clamp(14px, 3vw, 24px); }

/* Fusszeile: eigener Abstand oben und unten. */
.wrap--footer { padding: clamp(44px, 6vw, 64px) var(--wrap-pad) 40px; }
.wrap--footer-bar { padding: 20px var(--wrap-pad); }

/* Die durchgehenden 2px-Linien. Dreissig Fundstellen, drei Farben. */
.rule-b { border-bottom: var(--rule-width) solid var(--color-text); }
.rule-t { border-top: var(--rule-width) solid var(--color-text); }
.rule-b--soft { border-bottom: var(--rule-width) solid var(--color-neutral-300); }
.rule-t--soft { border-top: var(--rule-width) solid var(--color-neutral-300); }
.rule-b--dark { border-bottom: var(--rule-width) solid var(--color-neutral-800); }
.rule-t--dark { border-top: var(--rule-width) solid var(--color-neutral-800); }
.rule-t--dim  { border-top: var(--rule-width) solid var(--color-neutral-700); }

/* ==========================================================================
   9. Typografie
   ========================================================================== */

/* Die rote Abschnittsnummer ueber jeder Ueberschrift. */
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}
/* Auf dunklem Grund - der Kalender. */
.kicker--light { color: var(--color-accent-500); }
/* Im Hero, wo die Zeile nur den Ort nennt. */
.kicker--muted { color: var(--color-neutral-700); margin-bottom: 0; }
/* Auf dem roten MPU-Block: keine Farbe, nur zurueckgenommen. */
.kicker--on-accent { color: inherit; opacity: .85; margin-bottom: 20px; }

/*
 * Die grossen Ueberschriften.
 *
 * Acht Groessenstufen, weil das Markup acht verschiedene clamp()-Werte
 * fuehrt. Ein Teil davon sieht nach Fluechtigkeit aus - siehe die Notiz
 * am Ende dieser Datei. Sie werden hier bewusst 1:1 uebernommen, damit
 * dieser Umbau nichts am Aussehen aendert.
 */
.display {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(26px, 5.2vw, 62px);
  line-height: .97;
  letter-spacing: -0.04em;
}
.display--hero    { font-size: clamp(34px, 6.4vw, 112px); line-height: .92; letter-spacing: -0.045em; }
.display--mpu     { font-size: clamp(26px, 4.4vw, 86px);  line-height: .94; letter-spacing: -0.045em; }
.display--error   { font-size: clamp(32px, 6vw, 86px);    line-height: .94; letter-spacing: -0.045em; }
.display--classes { font-size: clamp(27px, 5.6vw, 68px);  line-height: .97; }
.display--legal   { font-size: clamp(30px, 5.6vw, 68px);  line-height: .97; }
.display--signup  { font-size: clamp(26px, 5vw, 58px);    line-height: .98; }
.display--process { font-size: clamp(26px, 5vw, 58px);    line-height: 1; }

/* Fliesstext in den Sektionen. */
.copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}
.copy--lead   { font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.copy--sm     { font-size: 15px; line-height: 1.6; }
.copy--on-dark { color: var(--color-ink-soft); font-size: 15px; line-height: 1.6; }
.copy--on-accent { color: inherit; font-size: 18px; line-height: 1.55; }

/* Die Wortmarke, dreimal in verschiedenen Groessen. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 22px;
  height: 22px;
  background: var(--color-accent);
  display: block;
}
.brand__name {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* ==========================================================================
   10. Schaltflaechen
   Elf Fundstellen, drei Familien. Die Hover-Zustaende stehen hier direkt
   bei der Grundform, statt wie bisher in einer eigenen .hv-*-Klasse.
   ========================================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 18px 26px;
  cursor: pointer;
  font-family: inherit;
}

/* Rot gefuellt - die Hauptaktion. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-600);
  color: var(--color-on-accent);
}

/* Umrandet auf hellem Grund, kehrt sich beim Ueberfahren um. */
.btn--outline {
  border: var(--rule-width) solid var(--color-text);
  color: var(--color-text);
  background: transparent;
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Umrandet auf dunklem Grund. */
.btn--ghost-dark {
  border: var(--rule-width) solid var(--color-neutral-700);
  color: var(--color-bg);
  background: transparent;
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-500);
}

/* Dunkel gefuellt auf rotem Grund - nur im MPU-Block. */
.btn--on-accent {
  background: var(--color-text);
  color: var(--color-on-accent);
  border: none;
}
.btn--on-accent:hover,
.btn--on-accent:focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Groessenabweichungen einzelner Fundstellen. */
/* Ein Textknopf, kein Flex-Container - deshalb die Flex-Eigenschaften
   der Sammelklasse zuruecknehmen statt sie mitzuschleppen. */
.btn--sm     { font-size: 12px; letter-spacing: .16em; padding: 12px 18px;
               display: inline-block; gap: normal; justify-content: normal;
               align-items: normal; background: transparent; }
/* Die Kopfzeilen-Schaltflaeche verteilt nicht, sie reiht nur auf -
   deshalb justify-content zuruecknehmen statt ueberschreiben. */
.btn--header { font-size: 13px; padding: 14px 20px; gap: 10px; justify-content: normal; white-space: nowrap; }
.btn--menu   { font-size: 15px; padding: 20px 22px; }
/* Absenden: volle Breite, kein gap - das Original hat keins. */
.btn--block  { width: 100%; padding: 20px 26px; margin-top: 28px; gap: normal; }
.btn--w260   { min-width: 260px; }
.btn--w240   { min-width: 240px; }
.btn--w220   { min-width: 220px; }
.btn--w320   { max-width: 320px; }

/* Reihe aus zwei Schaltflaechen, im Hero und auf der Fehlerseite. */
.btn-row {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ==========================================================================
   11. Kachelraster
   Die Karten liegen auf einem grauen Grund, den 2px Luecke durchscheinen
   lassen - so entstehen die Haarlinien zwischen den Kacheln.
   ========================================================================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min, 280px)), 1fr));
  gap: 2px;
  background: var(--color-neutral-300);
}
.tile { background: var(--color-bg); padding: 32px 24px; }
.tile--flush { padding: 0 0 24px; }
.tile--person { padding: 28px 24px; }
.tile--location { padding: 32px clamp(20px, 3vw, 36px); }

/* Zweispalter ohne Haarlinien. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 400px)), 1fr));
}

/*
 * Zwei Arten von Sektionskopf. Bewusst getrennt statt einer Klasse mit
 * Ausnahme: wer .section-head nimmt und display:block nachschiebt, laesst
 * align-items, gap und flex-wrap im berechneten Stil stehen. Ohne
 * sichtbare Wirkung, aber es beschreibt das Element falsch.
 */

/* Zweispaltig: Ueberschrift links, Erlaeuterung rechts. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(48px, 6vw, 80px) 0 36px;
}
.section-head--wide { padding-bottom: 40px; }

/* Einspaltig: nur Kicker und Ueberschrift untereinander. */
.section-intro { padding: clamp(48px, 6vw, 80px) 0 36px; }

/* ==========================================================================
   12. Sektionen
   Ab hier steht je Sektion ein Block mit ihren eigenen Regeln. Was nur an
   einer Stelle vorkommt, gehoert hierher statt in eine Komponentenklasse -
   139 der 158 Style-Werte im Markup waren Einzelfaelle.
   ========================================================================== */

/* --- Zahlenband ---------------------------------------------------------- */
.stats { background: var(--color-bg); }
.stats__grid { --tile-min: 200px; }
.stats__value {
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stats__suffix { color: var(--color-accent); }
.stats__label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  overflow-wrap: break-word;
}

/* --- Laufband ------------------------------------------------------------ */
.marquee {
  background: var(--color-text);
  color: var(--color-bg);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: selimMarquee 26s linear infinite;
  padding: 14px 0;
}
.marquee__group {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__sep { color: var(--color-accent); }

/* --- Ausbildungsklassen (01) --------------------------------------------- */
.classes__sub { max-width: 420px; }
.classes__grid { --tile-min: 230px; }
.classes__code {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.classes__kicker {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.classes__body {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Fuhrpark (04) ------------------------------------------------------- */
.fleet__grid { --tile-min: 280px; }
.fleet__text { padding: 22px 24px 0; }
.fleet__title { font-size: 22px; font-weight: 800; }
.fleet__body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Team (05) ----------------------------------------------------------- */
.team__grid { --tile-min: 280px; }
.team__name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 20px;
}
.team__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 8px;
}
.team__phone {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--color-neutral-800);
}

/* --- MPU-Block ----------------------------------------------------------- */
.mpu {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.mpu__inner {
  --split-min: 470px;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: 360px;
}
.mpu__col { padding: clamp(44px, 6vw, 72px) 0; }
.mpu__body { max-width: 460px; }
/* Weicht als einzige Schaltflaeche im Innenabstand ab: 24px statt 26px. */
.mpu__cta { margin-top: 32px; padding: 18px 24px; }

/* --- Ablauf (02) --------------------------------------------------------- */
.process__inner {
  --split-min: 400px;
  gap: 0 clamp(24px, 4vw, 48px);
}
.process__intro { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 80px); }
.process__sub { margin: 24px 0 0; max-width: 420px; line-height: 1.6; }
.process__steps {
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
}
.process__step {
  display: flex;
  gap: 28px;
  padding: 26px 0;
}
.process__num {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-accent);
  min-width: 44px;
}
.process__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.process__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Theoriekalender (03) ------------------------------------------------ */
.calendar {
  background: var(--color-text);
  color: var(--color-bg);
}
.calendar__note { max-width: 400px; }
.calendar__list { padding-bottom: 80px; }
.calendar__empty {
  margin: 0;
  padding: 24px 0;
  font-size: 16px;
  color: var(--color-ink-soft);
}
.calendar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  padding: 20px 0;
}
.calendar__row:hover { background: var(--color-neutral-900); }
.calendar__date {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: 0 0 130px;
}
.calendar__time {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-500);
  flex: 0 0 70px;
}
.calendar__topic {
  font-size: 17px;
  font-weight: 600;
  flex: 1 1 240px;
  min-width: 0;
}
.calendar__place {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  flex: 0 0 auto;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(243, 242, 242, .92);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 72px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  flex: 0 0 auto;
}
.site-header__tag {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding-left: 10px;
  border-left: var(--rule-width) solid var(--color-neutral-300);
}
.site-header__nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex: 1 1 620px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-link {
  color: var(--color-text);
  padding: 6px 0;
  border-bottom: var(--rule-width) solid transparent;
  flex: 0 0 auto;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.site-header__burger {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  background: var(--color-text);
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-header__burger:hover,
.site-header__burger:focus-visible { background: var(--color-accent); }
.site-header__burger-bar {
  width: 22px;
  height: 2px;
  background: var(--color-bg);
  display: block;
}
.site-header__cta { flex: 0 0 auto; }
.site-header__arrow { font-size: 15px; }

/*
 * Der Umschaltpunkt. Die Regeln zielen jetzt auf Klassen statt auf
 * data-Attribute - die bleiben dem JavaScript vorbehalten. Und sie
 * brauchen kein !important mehr, weil die Grundzustaende nicht mehr
 * inline stehen.
 */
@media (max-width: 880px) {
  .site-header__nav,
  .site-header__cta { display: none; }
  .site-header__burger { display: flex; }
}

/* --- Fusszeile ----------------------------------------------------------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 36px;
}
.site-footer__brand-name { font-size: 22px; }
.site-footer__claim {
  margin: 18px 0 0;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.site-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 6px;
}
.site-footer__copy {
  font-size: 12px;
  color: var(--color-neutral-600);
  letter-spacing: .08em;
}

/* Links auf dunklem Grund - Fusszeile und Mobilmenue. */
.link-on-dark { color: var(--color-bg); }
.link-on-dark:hover,
.link-on-dark:focus-visible { color: var(--color-accent-500); }

/* --- Mobilmenue ---------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 14px clamp(16px, 4vw, 32px) 32px;
  overflow-y: auto;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
}
.mobile-menu__mark { width: 20px; height: 20px; }
.mobile-menu__name { font-size: 19px; }
.mobile-menu__close {
  width: 52px;
  height: 52px;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  gap: normal;
  justify-content: center;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 20px 0;
}
.mobile-menu__cta { margin-top: 28px; }
.mobile-menu__phone { margin-top: 16px; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

/* Zwei Rasterbaender hinter dem Inhalt. Das senkrechte driftet. */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__grid--drift {
  opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(32,30,29,.12) 0 1px, transparent 1px 80px);
  animation: selimDrift 6s linear infinite;
}
.hero__grid--static {
  background-image: repeating-linear-gradient(180deg, rgba(32,30,29,.06) 0 1px, transparent 1px 80px);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 clamp(24px, 4vw, 56px);
}
.hero__copy {
  flex: 2.5 1 620px;
  min-width: 0;
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.hero__pulse {
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  display: block;
  animation: selimBlink 1.4s steps(1, end) infinite;
}
.hero__sub {
  margin: 32px 0 0;
  max-width: 560px;
  color: var(--color-neutral-800);
}
.hero__media {
  position: relative;
  flex: 1 1 330px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero__badge {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hero__badge-text,
.hero__badge-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__badge-link { color: var(--color-accent-700); }

/* Der rote Balken unter der Ueberschrift. */
.sweep {
  height: 6px;
  background: var(--color-accent);
  width: 100%;
}
.sweep--hero {
  max-width: 520px;
  margin: 36px 0 0;
  animation: selimSweep 4.5s ease-in-out infinite;
}
/* Auf der Fehlerseite ohne Animation und schmaler. */
.sweep--error { max-width: 340px; margin: 32px 0 0; }

/* --- Fehlerseite --------------------------------------------------------- */
.error-page__inner { padding: clamp(64px, 9vw, 140px) 0; max-width: 640px; }
.error-page__text {
  margin: 32px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* --- Rechtstexte --------------------------------------------------------- */
.legal-page__head { padding: clamp(48px, 6vw, 80px) 0 36px; }
.legal-body {
  padding: 40px 0 clamp(56px, 7vw, 96px);
  max-width: 720px;
}

/* --- Rahmen -------------------------------------------------------------- */
.page {
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
}

/*
 * Die Elemente, die render_markdown() aus dem Rechtstext erzeugt.
 * Standen bis P11 als eigener <style>-Block in legal.php - jetzt hier,
 * wo das uebrige CSS auch steht.
 */
.legal-body h2 {
  margin: 40px 0 14px;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.legal-body p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
}
.legal-body ul { margin: 0 0 18px; padding-left: 22px; }
.legal-body li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  margin-bottom: 8px;
}
.legal-body strong { color: var(--color-text); }

/* --- Preise (06) ---------------------------------------------------------
   Die einzige Stelle, an der PHP frueher Style-Strings zusammengebaut hat
   (leere Zelle, hervorgehobene Spalte, letzte Spalte). Daraus sind
   Zustandsklassen geworden.
   -------------------------------------------------------------------------- */
.pricing { background: var(--color-surface); }
.pricing__note { max-width: 420px; }

.pricing__scroll {
  overflow-x: auto;
  background: var(--color-bg);
}
.pricing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 900px;
}
.pricing__th-label {
  text-align: left;
  padding: 16px 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  font-weight: 700;
}
.pricing__th {
  text-align: right;
  padding: 16px 14px;
  font-weight: 900;
  font-size: 16px;
}
/* padding:16px 18px im Original - beide Seiten, nicht nur rechts.
   Ein 4px-Unterschied links verschiebt die automatische
   Spaltenverteilung der gesamten Tabelle. */
.pricing__th--last { padding: 16px 18px; }
.pricing__th--highlight { color: var(--color-accent); }

.pricing__row:hover { background: var(--color-accent-100); }

.pricing__row-label {
  text-align: left;
  padding: 14px 18px;
  font-weight: 700;
}
.pricing__cell {
  padding: 14px;
  text-align: right;
}
.pricing__cell--last { padding: 14px 18px; }
.pricing__cell--empty { color: var(--color-neutral-500); }
.pricing__cell--highlight { font-weight: 700; }

.pricing__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding: 28px 0 clamp(48px, 6vw, 80px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}
.pricing__marker { color: var(--color-text); }

/* --- Standorte (07) ------------------------------------------------------ */
.locations__grid { --tile-min: 380px; }
.locations__city {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.locations__address {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-800);
  font-style: normal;
}
.locations__facts {
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 16px;
}
.locations__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding-top: 4px;
}
.locations__map-col { display: flex; flex-direction: column; }
.locations__note {
  margin-top: 24px;
  padding-top: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-800);
  max-width: 420px;
}

/* --- Anmeldung (08) ------------------------------------------------------ */
.signup__inner {
  --split-min: 360px;
  gap: 0 clamp(24px, 4vw, 48px);
}
.signup__intro { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 80px); }
.signup__sub { margin: 24px 0 0; max-width: 400px; line-height: 1.6; }
.signup__direct {
  margin-top: 36px;
  padding-top: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-800);
}
.signup__form-col { padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 80px); }

/* Dankeschoen nach dem Absenden. */
.signup__thanks {
  border: var(--rule-width) solid var(--color-accent);
  padding: 40px;
  background: var(--color-accent-100);
}
.signup__thanks-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.signup__thanks-text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.signup__again { margin-top: 24px; }

.signup__alert {
  margin: 0 0 20px;
  border: var(--rule-width) solid var(--color-accent-700);
  background: var(--color-accent-100);
  padding: 16px;
  font-size: 15px;
  color: var(--color-accent-700);
  font-weight: 700;
}

.signup__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 20px;
}

/* Feld und Beschriftung. Die beiden Werte standen bis P11 als
   PHP-Variablen im Partial und wurden elfmal ausgegeben. */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--spaced { margin-top: 28px; }
.field__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.input {
  border: var(--rule-width) solid var(--color-text);
  background: var(--color-bg);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
}
.input:focus {
  border-color: var(--color-accent);
  outline: none;
}
.input--area { resize: vertical; }

/* Steht bewusst NACH .input: beide haben dieselbe Spezifitaet, also
   entscheidet die Reihenfolge - und damit braucht es kein !important. */
[aria-invalid="true"] { border-color: var(--color-accent-700); }

/* Die Klassenwahl. */
.signup__classes { margin: 28px 0 0; padding: 0; border: 0; }
.signup__legend { margin-bottom: 12px; padding: 0; }
.signup__class-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup__consent {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-neutral-700);
}

/* ==========================================================================
   Anhang: uneinheitliche Werte aus dem Prototyp

   Beim Umbau in P11 aufgefallen und BEWUSST 1:1 uebernommen, damit dieser
   Umbau nichts am Aussehen aendert. Sie zu glaetten waere eine eigene
   Entscheidung mit sichtbarer Wirkung.

   1. Ueberschriften: acht clamp()-Stufen statt drei oder vier.
      .display--classes hat clamp(27px,...), sonst ueberall 26px.
      .display--signup hat line-height .98, .display--process hat 1,
      alle uebrigen .97. Vermutlich Tippfehler beim Bauen des Prototyps.

   2. Fliesstext: fuenfzehn Kombinationen aus font-size 15/16/17/18/19px
      und line-height 1.5/1.55/1.6/1.65/1.7 fuer denselben Zweck.
      Zusammengefasst in .copy und vier Varianten, aber die Streuung
      selbst ist geblieben.

   3. Schaltflaechen: der Innenabstand ist fast ueberall 18px 26px -
      ausser im MPU-Block, wo er 24px betraegt (.mpu__cta).

   Wer das vereinheitlichen will: die Werte in den genannten Klassen
   angleichen und den Fingerabdruck-Vergleich aus P11 laufen lassen. Er
   zeigt dann genau, welche Elemente sich bewegen.
   ========================================================================== */

/* --- Hinweis (Urlaub, kurzfristige Schliessung) ---------------------------
   Zwei Formen desselben Inhalts. Das Band steht im Fluss und ist immer
   da, sobald der Hinweis aktiv ist; das Modal legt allein app.js
   darueber. Faellt das Skript aus, bleibt das Band - die Seite kann
   sich also nie selbst aussperren.
   -------------------------------------------------------------------------- */

.notice-band {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-bottom: var(--rule-width) solid var(--color-text);
}

/* flex-wrap ist hier die ganze Responsivitaet: auf schmalen Geraeten
   rutscht die Schaltflaeche unter den Text, statt ihn zu quetschen. */
.notice-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 14px 0;
}

/* min-width:0 laesst den Textblock unter seine inhaltliche Mindestbreite
   schrumpfen; ohne das sprengt eine lange Adresse die Zeile. */
.notice-band__text {
  flex: 1 1 320px;
  min-width: 0;
  overflow-wrap: break-word;
}

.notice-band__title {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}

.notice-band__body { font-size: 15px; line-height: 1.5; }
.notice-band__body p { margin: 4px 0 0; }
.notice-band__body p:first-child { margin-top: 2px; }
.notice-band__body a { color: var(--color-on-accent); text-decoration: underline; }

/* .btn--sm ist durchsichtig - auf dem roten Band braucht sie eigene
   Farben, sonst steht dunkler Text auf dunklem Rot. */
.notice-band__more {
  flex: 0 0 auto;
  border: var(--rule-width) solid var(--color-on-accent);
  color: var(--color-on-accent);
}
.notice-band__more:hover {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

/* --- Das Modal --- */

.notice-modal {
  position: fixed;
  inset: 0;
  /* Kopfzeile 80, Mobilmenue 120, hier 140, Sprunglink 200. */
  z-index: 140;
  background: rgba(32, 30, 29, .72);
  padding: clamp(16px, 4vw, 40px);

  /* Spalten-Flexbox mit margin:auto am Kind.
     flex-direction: column ist hier nicht Geschmack, sondern der Kern:
     nur so liegt die senkrechte Achse auf der HAUPTachse, und dort
     loest ein auto-Rand bei Platzmangel zu null auf - die Karte wird
     oben buendig und bleibt vollstaendig scrollbar. In der
     voreingestellten Zeilenrichtung waere es ein Rand auf der
     QUERachse; der laeuft nach beiden Seiten ueber und schneidet den
     Anfang eines langen Textes unerreichbar ab. Nachgemessen bei
     320 x 568. */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.notice-modal__card {
  margin: auto;
  width: min(100%, 560px);
  background: var(--color-bg);
  border: var(--rule-width) solid var(--color-text);
  padding: clamp(24px, 5vw, 40px);
  animation: noticeIn .22s ease-out;
}

.notice-modal__title {
  margin: 0 0 16px;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.notice-modal__body { font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.notice-modal__body p { margin: 0 0 12px; }
.notice-modal__body p:last-child { margin-bottom: 0; }
.notice-modal__body ul { margin: 0 0 12px; padding-left: 20px; }
.notice-modal__close { margin-top: 28px; }

@keyframes noticeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}