/* =========================================================================
   SCHULBEGLEITER PRO NRW — site.css
   Richtung: "Sechs Bögen, abgewickelt"
   Das Logo besteht aus sechs farbigen Bögen auf einem Kreis. Die Seite rollt
   diesen Kreis ab: jeder Abschnitt bekommt einen Bogen als geraden Farbbalken
   in der linken Spalte, und die sechs Logofarben besetzen ganze Seitenflächen
   statt als Akzente verstreut zu sein. Die innere Grammatik kommt vom
   Stundenplan: hartes Raster, Haarlinien, Farbe als Information.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* Logofarben — 1:1 aus dem Original */
  --c-black:  #000000;
  --c-orange: #fcac1a;
  --c-red:    #e42334;
  --c-purple: #874791;
  --c-blue:   #3295d0;
  --c-green:  #04904b;
  /* Textfuehrende Flaechen: Gruen und Hellblau tragen weisse Schrift und
     verfehlen als Markenton den WCAG-AA-Kontrast (4.12 bzw. 3.31 statt 4.5).
     Diese abgedunkelten Varianten gelten NUR fuer Flaechen mit Text -
     Schienen, Punkte, Logo und Fussleiste behalten die Originalfarben. */
  --c-green-solid:#048244; --c-blue-solid:#2877a6;

  /* Abgedunkelte Varianten für weißen Text (WCAG AA geprüft)
     green-deep  auf weiß  6.72:1   blue-deep auf weiß 5.54:1
     orange-ink  Text auf Papier 5.14:1 */
  --c-green-deep: #036b39;
  --c-blue-deep:  #1e6fa0;
  --c-orange-ink: #8f5b00;

  /* Grundflächen */
  --paper: #ffffff;
  --ash:   #ecedef;
  --ash-2: #dcdee2;
  --ink:   #0e0e0e;
  --ink-2: #4a4d52;

  /* Haarlinien */
  --rule:      rgba(14, 14, 14, 0.16);
  --rule-soft: rgba(14, 14, 14, 0.08);
  --rule-on-dark: rgba(255, 255, 255, 0.22);

  /* Typografie */
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.05vw, 2.125rem);
  --step-3:  clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --step-4:  clamp(2.5rem, 1.6rem + 4vw, 5.25rem);

  /* Maße */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max:    82rem;
  --label-col: clamp(3.5rem, 8vw, 8.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. RESET / BASIS
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 112;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* Fokus — durchgehend, sichtbar, in Logo-Rot */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.band--black :focus-visible,
.band--green :focus-visible,
.band--purple :focus-visible,
.band--red :focus-visible {
  outline-color: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 2000;
  transform: translateY(-120%);
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

/* -------------------------------------------------------------------------
   3. LOGO — ORIGINAL-CSS, UNVERÄNDERT ÜBERNOMMEN
   Aus logo-original.html. Nicht anfassen.
   ---------------------------------------------------------------------- */
.shplogo { display: inline-block; line-height: 0; }
.shplogo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.shplogo .shp-rot {
  transform-box: view-box;
  transform-origin: center;
  animation: shp-spin 24s linear infinite;
  animation-delay: 1.3s;
}
.shplogo .shp-arc {
  fill: none;
  stroke-width: 30.6px;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: shp-draw .7s ease forwards;
}
.shplogo .shp-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: shp-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

.shplogo .shp-arc:nth-of-type(1){animation-delay:0s}
.shplogo .shp-dot:nth-of-type(1){animation-delay:.45s}
.shplogo .shp-arc:nth-of-type(2){animation-delay:.1s}
.shplogo .shp-dot:nth-of-type(2){animation-delay:.55s}
.shplogo .shp-arc:nth-of-type(3){animation-delay:.2s}
.shplogo .shp-dot:nth-of-type(3){animation-delay:.65s}
.shplogo .shp-arc:nth-of-type(4){animation-delay:.3s}
.shplogo .shp-dot:nth-of-type(4){animation-delay:.75s}
.shplogo .shp-arc:nth-of-type(5){animation-delay:.4s}
.shplogo .shp-dot:nth-of-type(5){animation-delay:.85s}
.shplogo .shp-arc:nth-of-type(6){animation-delay:.5s}
.shplogo .shp-dot:nth-of-type(6){animation-delay:.95s}

@keyframes shp-draw{to{stroke-dashoffset:0}}
@keyframes shp-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes shp-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce) {
  .shplogo .shp-arc { stroke-dashoffset: 0; animation: none; }
  .shplogo .shp-dot { transform: scale(1); animation: none; }
  .shplogo .shp-rot { animation: none; }
}
/* --- Ende Original-CSS --- */

/* Größenvarianten (Original nennt 19px klein / 30.6px groß) */
.shplogo--sm .shp-arc { stroke-width: 19px; }

/* Zeichnen, Pop und Rotation bleiben beim Original-CSS oben. GSAP fasst sie
   NICHT an — es bewegt nur den Rahmen des Logos.
   Grund, teuer gelernt: die Punkte poppen im Original 0,25 s bevor ihr Bogen
   fertig ist, also genau wenn die Zeichenspitze an ihnen vorbeiläuft. Eigene
   Dauern und Beschleunigungskurven in GSAP zerstören diese Kopplung, und die
   Punkte erscheinen sichtbar neben ihrem Bogen. Ebenso wichtig: die Rotation
   hat 1,3 s Verzögerung, das Logo steht also still, solange es sich zeichnet.

   Nur beim Seitenwechsel entfällt das Zeichnen — dort ist das Logo sofort
   vollständig, hält kurz und tritt zurück. */
.page-logo--nodraw .shp-arc { stroke-dashoffset: 0; animation: none; }
.page-logo--nodraw .shp-dot { transform: scale(1); animation: none; }
.page-logo--nodraw .shp-rot { animation-delay: 0s; }

/* -------------------------------------------------------------------------
   4. LADE-ANIMATION
   ---------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  background:
    radial-gradient(120% 90% at 50% 45%, var(--paper) 0%, var(--paper) 55%, var(--ash) 100%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
/* Beim Laden sofort deckend (vor dem ersten Paint gesetzt), beim Verlassen
   fährt GSAP die Deckkraft hoch. */
html.js-loading .loader { opacity: 1; visibility: visible; }
html.is-leaving .loader { visibility: visible; }
html.is-leaving { cursor: progress; }
.loader::after {
  /* feines Raster — der Stundenplan, bevor etwas eingetragen ist */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.9;
}

/* Während des Ladens nur die Seite ruhig halten. Der Inhalt wird NICHT per CSS
   ausgeblendet — die deckende Overlay-Fläche verdeckt ihn ohnehin, und ein
   opacity:0 aus dem Stylesheet würde GSAPs from()-Tweens ihren Zielwert
   wegnehmen (from() liest den aktuellen Wert als Endwert). */
html.js-loading, html.js-loading body { overflow: hidden; }

/* -------------------------------------------------------------------------
   5. KOPFZEILE
   ---------------------------------------------------------------------- */
.demo-bar {
  background: var(--ink);
  color: var(--c-orange);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem var(--gutter);
  text-align: center;
}
.demo-bar b { color: var(--paper); font-weight: 700; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.75rem var(--gutter);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
.brand .shplogo { width: 40px; height: 40px; flex: none; }
.brand__name {
  font-weight: 800;
  font-size: var(--step--1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 108;
  text-transform: uppercase;
}
.brand__name span { display: block; font-weight: 500; color: var(--ink-2); }

.nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--step--1);
  font-weight: 600;
}
.nav a {
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s;
}
.nav a:hover { border-bottom-color: var(--ink); }

.header-actions { display: flex; gap: 0.5rem; }

/* Beide Handlungen bleiben auf jeder Breite erreichbar — nur die Navigation
   entfällt, weil die Zielgruppenfelder direkt darunter dasselbe leisten. */
@media (max-width: 900px) {
  .nav { display: none; }
  .header-actions .btn { padding: 0.7rem 0.95rem; }
}

/* Unter 620px trägt die Bildmarke allein; der Schriftzug würde dreizeilig
   umbrechen und die Kopfzeile auf 110px aufblähen. Für Screenreader bleibt er. */
@media (max-width: 620px) {
  .site-header { gap: 0.6rem; padding-inline: 1rem; }
  .brand .shplogo { width: 34px; height: 34px; }
  .brand__name {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
}

/* -------------------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out),
              background-color 0.18s, color 0.18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(14,14,14,0.5); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--step-0); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6); }

.btn__arrow { transition: transform 0.22s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   7. ABSCHNITTS-GRAMMATIK — das abgewickelte Raster
   ---------------------------------------------------------------------- */
.band { position: relative; isolation: isolate; overflow: clip; }

.band__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7.5rem) var(--gutter);
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Der abgewickelte Bogen: ein gerader Farbbalken in der Randspalte */
.band__arc {
  height: clamp(4rem, 9vw, 8rem);
  width: clamp(0.75rem, 1.6vw, 1.25rem);
  border-radius: 999px;
  background: currentColor;
  align-self: start;
}

@media (max-width: 720px) {
  .band__inner { grid-template-columns: 1fr; }
  .band__arc { width: clamp(3rem, 22vw, 6rem); height: 0.75rem; }
}

/* Farbflächen */
.band--green  { background: var(--c-green-deep); color: var(--paper); }
.band--black  { background: var(--ink); color: var(--paper); }
.band--purple { background: var(--c-purple); color: var(--paper); }
.band--ash    { background: var(--ash); color: var(--ink); }

.band--green .band__arc  { color: var(--c-green); }
.band--black .band__arc  { color: var(--c-purple); }
.band--purple .band__arc { color: var(--c-orange); }
.band--ash .band__arc    { color: var(--c-red); }

.band-title {
  font-size: var(--step-3);
  max-width: 20ch;
}
.band-lead {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  max-width: 58ch;
  line-height: 1.5;
}
.band--green .band-lead,
.band--black .band-lead,
.band--purple .band-lead { color: rgba(255,255,255,0.86); }
.band--ash .band-lead { color: var(--ink-2); }

/* -------------------------------------------------------------------------
   8. SEITENSCHIENE (sechs Marken = sechs Bögen)
   ---------------------------------------------------------------------- */
.rail {
  position: fixed;
  left: clamp(0.75rem, 1.6vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.rail__tick {
  width: 0.5rem;
  height: 1.6rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.32;
  transition: opacity 0.25s, height 0.25s var(--ease-out);
}
.rail a:hover .rail__tick,
.rail a:focus-visible .rail__tick,
.rail a[aria-current="true"] .rail__tick { opacity: 1; height: 2.6rem; }

.rail__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.2rem 0.5rem;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}
.rail a:hover .rail__label,
.rail a:focus-visible .rail__label { opacity: 1; transform: translateX(0); }

.rail__tick--black  { color: var(--c-black); }
.rail__tick--orange { color: var(--c-orange-ink); }
.rail__tick--blue   { color: var(--c-blue-deep); }
.rail__tick--green  { color: var(--c-green-deep); }
.rail__tick--purple { color: var(--c-purple); }
.rail__tick--red    { color: var(--c-red); }

@media (max-width: 1180px) { .rail { display: none; } }

/* -------------------------------------------------------------------------
   9. HERO
   ---------------------------------------------------------------------- */
/* KEIN isolation: isolate. Ein eigener Stapelkontext würde das Logo darin
   einsperren — es könnte während der Ladeanimation nicht über die Loader-Fläche
   steigen und die ganze Animation liefe unsichtbar dahinter ab. Stattdessen
   liegt das Logo auf z-index 0 und der Text auf 1. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  /* Das Logo ragt bewusst über den rechten Rand hinaus — ohne clip erzeugt es
     eine waagerechte Bildlaufleiste. Während der Ladeanimation muss es dagegen
     bis zur Bildschirmmitte wachsen dürfen, deshalb dann kein Beschnitt. */
  overflow: clip;
}
html.js-loading .hero { overflow: visible; }

/* Die Ruhelage des Logos. Jede Seite hat genau eine davon — sie ist das Ziel
   der Ladeanimation und der Ausgangspunkt beim Verlassen der Seite.
   Kein translateY(-50%): die Mitte wird über margin-top gesetzt, damit die
   transform-Eigenschaft frei bleibt. GSAP besitzt sie während der Animation
   allein und muss keinen CSS-Versatz mitschleppen. */
.page-logo {
  /* Die Ruhegröße muss deutlich unter der Auftrittsgröße liegen, sonst
     schrumpft das Logo beim Erscheinen statt zu wachsen. Vgl. den Faktor in
     site.js → measure(). */
  --logo-size: clamp(13rem, 34vw, 30rem);
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-6rem, -4vw, -2rem);
  width: var(--logo-size);
  height: var(--logo-size);
  margin-top: calc(var(--logo-size) / -2);
  opacity: 0.16;
  filter: blur(7px);
  pointer-events: none;
  line-height: 0;
}
/* Bögen, Punkte, Rotation und Strichstärke kommen ausschließlich aus dem
   Original-CSS weiter oben — das Element trägt dafür zusätzlich die Klasse
   .shplogo. Hier steht bewusst KEINE Wiederholung dieser Regeln: jede eigene
   Dauer oder Verzögerung würde die Kopplung zwischen Zeichenspitze und
   Punkt zerstören. */

.hero__text {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-inline: auto;
  /* Knapp gehalten, damit die beiden Zielgruppenfelder schon im ersten
     Bildausschnitt anschneiden — der Split gehört zum Hero, nicht dahinter. */
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.045em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--c-orange-ink);
}

.hero__lead {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink-2);
}

.hero__meta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  max-width: 46ch;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__meta i {
  width: 0.6rem; height: 0.6rem; border-radius: 999px;
  background: currentColor; flex: none;
}

/* -------------------------------------------------------------------------
   10. ZIELGRUPPEN-SPLIT — zwei Bögen nebeneinander
   ---------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  min-height: clamp(26rem, 46vw, 34rem);
  isolation: isolate;
  overflow: hidden;
}
.split__panel + .split__panel { border-left: 1px solid rgba(14,14,14,0.22); }
@media (max-width: 860px) {
  .split__panel + .split__panel { border-left: 0; border-top: 1px solid rgba(14,14,14,0.22); }
}

.split__panel--eltern    { background: var(--c-orange); color: var(--ink); }
.split__panel--bewerbung { background: var(--c-blue);   color: var(--ink); }

/* Der Bogen des Panels als große, beschnittene Grafik im Hintergrund */
.split__mark {
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -34%;
  width: 62%;
  aspect-ratio: 1;
  opacity: 0.28;
  pointer-events: none;
}
.split__mark svg { width: 100%; height: 100%; }

/* Bewegte Fläche hinter dem Handlungsbereich.
   Zwei Vorkehrungen schützen die Lesbarkeit: die Maske lässt das Video erst
   unterhalb des Fließtextes einsetzen, und soft-light bei gedrosselter
   Deckkraft verschiebt die Helligkeit der Grundfarbe nur leicht. Schwarz auf
   Orange hat 10,98:1 Reserve, auf Blau 6,35:1 — beides bleibt weit über der
   Schwelle, auch wenn das Video die Fläche moduliert. */
.mediafield {
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 62%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}
.mediafield--full {
  inset: 0;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
}
.mediafield__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.split__panel--bewerbung .mediafield__video { opacity: 0.45; }
.band--purple .mediafield__video { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .mediafield { display: none; }
}

.split__panel h2 {
  font-size: var(--step-2);
  max-width: 15ch;
}
.split__panel p {
  margin-top: 1.1rem;
  max-width: 42ch;
  font-size: var(--step-0);
  line-height: 1.55;
}
.split__foot { margin-top: auto; padding-top: clamp(1.75rem, 4vw, 2.75rem); }

.split__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 1.25rem;
  padding-top: 0.9rem;
  border-top: 2px solid rgba(14,14,14,0.28);
  font-size: var(--step--1);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   11. ABLAUF — Stundenplan-Raster, zwei Zeilen, drei Spalten
   ---------------------------------------------------------------------- */
.plan {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--rule-on-dark);
}
.plan__row {
  display: grid;
  grid-template-columns: clamp(6rem, 12vw, 11rem) repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule-on-dark);
}
.plan__rowhead {
  padding: clamp(1.5rem, 3vw, 2.25rem) 1rem clamp(1.5rem, 3vw, 2.25rem) 0;
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 108;
  border-right: 1px solid var(--rule-on-dark);
}
.plan__cell {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--rule-on-dark);
}
.plan__cell:last-child { border-right: 0; }

.plan__num {
  display: block;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 0.85;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.05em;
  margin-bottom: 0.9rem;
}
.plan__row:nth-child(1) .plan__cell:nth-child(2) .plan__num { color: var(--c-orange); }
.plan__row:nth-child(1) .plan__cell:nth-child(3) .plan__num { color: var(--c-orange); }
.plan__row:nth-child(1) .plan__cell:nth-child(4) .plan__num { color: var(--c-orange); }
.plan__row:nth-child(2) .plan__cell .plan__num { color: var(--c-blue); }

.plan__cell h4 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
.plan__cell p {
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}

@media (max-width: 860px) {
  .plan__row { grid-template-columns: 1fr; }
  .plan__rowhead {
    border-right: 0;
    border-bottom: 1px solid var(--rule-on-dark);
    padding: 1.1rem 0;
  }
  .plan__cell {
    border-right: 0;
    border-bottom: 1px solid var(--rule-on-dark);
    padding-inline: 0;
  }
  .plan__row:last-child .plan__cell:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   12. ZWISCHENRUF — schmales rotes Band
   ---------------------------------------------------------------------- */
.shout {
  background: var(--c-red);
  color: var(--paper);
}
.shout__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2rem, 4.5vw, 3.25rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.shout p {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 112;
  line-height: 1.1;
  max-width: 24ch;
}

/* -------------------------------------------------------------------------
   13. WARUM WIR
   ---------------------------------------------------------------------- */
.reasons {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-on-dark);
}
.reasons > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 26ch) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule-on-dark);
}
.reasons i {
  width: 1.1rem; height: 1.1rem;
  border-radius: 999px;
  background: currentColor;
  margin-top: 0.45rem;
}
.reasons h3 { font-size: var(--step-1); }
.reasons p { font-size: var(--step-0); color: rgba(255,255,255,0.82); line-height: 1.55; }

@media (max-width: 720px) {
  .reasons > div { grid-template-columns: 1.1rem minmax(0, 1fr); gap: 1rem; }
  .reasons p { grid-column: 2; }
}

/* Bildplatzhalter — bewusst als Element gestaltet, nicht als Lücke */
.photo-slot {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  aspect-ratio: 16 / 7;
  border: 2px dashed var(--rule-on-dark);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.5rem;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px);
}
.photo-slot strong {
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.photo-slot span { font-size: var(--step--1); color: rgba(255,255,255,0.7); }

/* -------------------------------------------------------------------------
   14. FRAGEN
   ---------------------------------------------------------------------- */
.faq-group:first-of-type { margin-top: clamp(2rem, 4.5vw, 3.25rem); }
.faq-group + .faq-group { margin-top: clamp(2.5rem, 6vw, 4rem); }
.faq-group h3 {
  font-size: var(--step-1);
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.faq-group h3 i {
  width: 0.85rem; height: 0.85rem; border-radius: 999px; background: currentColor;
}
.faq-group--eltern h3 i    { color: var(--c-orange-ink); }
.faq-group--bewerbung h3 i { color: var(--c-blue-deep); }

.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.35rem;
  background: currentColor;
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--c-red); }
.faq details p {
  padding: 0 0 1.4rem;
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   14b. EINFACHE INHALTSSEITEN (Recht, Hinweise)
   ---------------------------------------------------------------------- */
/* Wie beim Hero: kein eigener Stapelkontext, sonst bleibt das Logo unter der
   Loader-Fläche gefangen. */
.page-head {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--rule);
}
html.js-loading .page-head { overflow: visible; }
.page-head .page-logo { --logo-size: clamp(11rem, 28vw, 22rem); }
.page-head__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}
.page-head h1 {
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.04em;
  max-width: 18ch;
}
.page-head__lead {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 54ch;
  line-height: 1.5;
}

.prose {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: var(--step-2);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ink);
}
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose p, .prose li { max-width: 70ch; line-height: 1.65; color: var(--ink-2); }
.prose ul { padding-left: 1.2rem; }
.prose address { font-style: normal; line-height: 1.8; color: var(--ink); }
.prose dl { display: grid; grid-template-columns: minmax(0, 16ch) minmax(0, 1fr); gap: 0.6rem 1.5rem; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose dd { margin: 0; color: var(--ink-2); }
@media (max-width: 620px) {
  .prose dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .prose dd { margin-bottom: 0.7rem; }
}

/* Platzhalter für Inhalte, die vom Kunden bzw. der Rechtsberatung kommen.
   Bewusst auffällig — in der Demo darf nichts davon für fertig gehalten werden. */
.stub {
  border: 2px dashed rgba(228, 35, 52, 0.5);
  background-image:
    repeating-linear-gradient(135deg, rgba(228,35,52,0.06) 0 12px, transparent 12px 24px);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-top: 1.5rem;
}
.stub strong {
  display: block;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-red);
  margin-bottom: 0.5rem;
}
.stub p { color: var(--ink); max-width: 66ch; }

/* -------------------------------------------------------------------------
   15. ABSCHLUSS + FUSSZEILE
   ---------------------------------------------------------------------- */
.close-cta .btn-row {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  font-size: var(--step--1);
}
.footer__arcs { display: flex; height: 0.5rem; }
.footer__arcs span { flex: 1; }

.footer__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.footer__inner h2, .footer__inner h3 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 100;
  color: var(--paper);
  margin-bottom: 1rem;
}
.footer__inner address { font-style: normal; line-height: 1.75; }
.footer__inner ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.footer__inner a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.footer__inner a:hover { border-bottom-color: var(--paper); }

.footer__note {
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.25rem var(--gutter) 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
}

.placeholder {
  color: var(--c-orange);
  border-bottom: 1px dashed currentColor;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   16. BEWEGUNG AUS
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .loader { display: none !important; }
  html.js-loading, html.js-loading body { overflow: visible; }
}