/* ===== Tokens ===== */
:root {
  /* Offizielle MTG-CD-Farben (Design-Guide, Stand 11/2025) */
  --blau: #27348B;
  --blau-lt: #e8eaf4;
  --rot: #E5006D;
  --rot-lt: #FCE5F1;   /* offizielles CD-Rosa */
  --ocker: #CEA100;
  --ocker-lt: #f7eecb;
  --gruen: #009098;
  --gruen-lt: #d4ecee;
  --rosa: #FCE5F1;
  --grau: #E8E8E8;

  --ink: #2B2B33;      /* CD-Textschwarz — damit sich Blau davon abhebt */
  --navy: #0E2841;     /* CD-Dunkelblau — für Flächen wie Footer und Hero */
  --ink-2: #2f3b4d;   /* Fliesstext — Ueberschriften tragen --ink, Text --ink-2 */
  --ink-3: #7a8da5;
  --mist: #f4f1ec;
  --white: #ffffff;
  --border: var(--border);

  --radius: 8px;
  --font-serif: Arial, Helvetica, sans-serif;   /* Überschriften — CD: Arial */
  --font-sans:  Arial, Helvetica, sans-serif;   /* Fließtext   — CD: Arial */
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;  /* Kleinzeilen — CD */

  /* ── Schriftskala ─────────────────────────────────────────────────────
     Sieben Stufen, sonst nichts. Vorher waren es 65 Werte, davon 14 allein
     fuer Fliesstext — der Rang war rechnerisch da und optisch unsichtbar.
     Neue Groessen gehoeren in diese Liste, nicht in die Regel.  (12.09.2026) */
  --fs-marke:   11px;                       /* Marke, Tag, Versal-Mono       */
  --fs-klein:   13px;                       /* Bildzeile, Legende, Meta      */
  --fs-kompakt: 15px;                       /* Text in Karten und Tafeln     */
  --fs-text:    17px;                       /* Fliesstext                    */
  --fs-h3:      21px;                       /* Zwischenkopf                  */
  --fs-aussage: clamp(22px, 2.6vw, 31px);   /* freistehende Aussage, Zitat   */
  --fs-h2:      clamp(26px, 3vw, 38px);     /* Abschnittskopf                */
  --fs-hero:    clamp(30px, 3.3vw, 46px);   /* Hero der Startseite           */
  --fs-seite:   clamp(40px, 5.5vw, 64px);   /* Kopf einer Kapitelseite       */
  --fs-zier:    64px;                       /* Zierziffer, Anfuehrungszeichen */

  /* ── Laufweite ────────────────────────────────────────────────────────
     Zwei Werte. Gesperrt wird nur, was in Versalien steht — dort kleben
     die Grossbuchstaben sonst. Vorher waren es neunzehn Werte. (12.09.2026) */
  --ls-versal: .08em;                       /* Versal-Marke                  */
  --ls-eng:   -.02em;                       /* grosse Ueberschrift, Ausgleich */

  /* ── Schatten ─────────────────────────────────────────────────────────
     Zwei Werte. Flach fuer das, was aufliegt; hoch fuer das, was ueber der
     Seite schwebt (Menue, Suche). Vorher waren es 37 Werte, 33 davon je
     genau einmal benutzt — pro Bauteil neu erfunden. (12.09.2026) */
  --schatten-flach: 0 8px 24px rgba(18,35,58,.10);
  --schatten-hoch:  0 16px 40px rgba(18,35,58,.18);
  --max-w: 1040px;
  --pill: 999px;

  /* Der Takt der Seite: senkrechter Abstand und seitlicher Rand eines
     Abschnitts. Eine Stelle für alle Rubriken — wer den Atem der Seiten
     ändern will, ändert diese zwei Zeilen. */
  --takt: 72px;
  --takt-seite: 48px;
}

@media (max-width: 1024px) {
  :root { --takt: 56px; --takt-seite: 24px; }
}

/* Kleine Auszeichnungen in der Monospace des CD — sie ersetzen den Kontrast,
   den früher die Serifenschrift geliefert hat. */
.prog-stage, .pf-stage, .tl-year, .wp-name, .schritt-num, .zk-name,
.pt-jg, .lk-num, .fk-jg {
  
  letter-spacing: 0;
}

/* Kleinzeilen in der Schreibmaschinenschrift des CD */
.exp-eyebrow, .section-label, .news-tag, .wsi-k, .kennung, .verz-titel {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
sup, sub { font-size: var(--fs-klein); }

body {
  /* Die Grundlinie liegt auf der Skala. Ohne diese Zeile fielen Elemente
     ohne eigene Regel auf den Browser-Wert 16 px zurueck — daneben. (12.09.2026) */
  font-size: var(--fs-text);
  font-family: var(--font-sans); color: var(--ink);
  background: var(--white); overflow-x: hidden;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
address { font-style: normal; }
.container { max-width: var(--max-w); margin: 0 auto; }

/* ===== Nav ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 68px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(30,50,112,.08);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: var(--schatten-flach); }
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 54px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: var(--fs-klein); font-weight: 500; color: var(--ink-2); opacity: .7; transition: .2s; }
.nav-links a:hover { opacity: 1; color: var(--blau); }
.nav-cta {
  background: var(--blau); color: #fff; padding: 9px 20px;
  border-radius: var(--radius); font-size: var(--fs-klein); font-weight: 600; transition: .2s;
}
.nav-cta:hover { background: #162a5e; transform: translateY(-1px); }
.nav-burger {
  display: none; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 1px; }

/* ===== Service-Leiste oben (zweistufige Navigation) ===== */
.nav-utility {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  height: 34px; padding: 0 48px;
  background: var(--blau);
}
.nav-utility a {
  font-size: var(--fs-klein); font-weight: 500;
  color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.nav-utility a:hover { color: #fff; }
.nav-utility .nu-sep { width: 1px; height: 13px; background: rgba(255,255,255,.28); }

/* Aktuelles im Hauptmenü hervorheben (Doppelverankerung) — dezente Pille */
.nav-news {
  display: inline-flex; align-items: center;
  color: var(--blau) !important; opacity: 1 !important; font-weight: 600 !important;
  background: var(--blau-lt); padding: 7px 16px; border-radius: var(--pill);
  transition: background .15s, color .15s;
}
.nav-news:hover { background: var(--blau); color: #fff !important; }
.nav-news .news-dot { display: none; }
.has-topbar #main-nav { top: 34px; }
.has-topbar .page-hero { margin-top: 102px; }
@media (max-width: 1024px) {
  .nav-utility { display: none; }
  .has-topbar #main-nav { top: 0; }
  .has-topbar .page-hero { margin-top: 68px; }
}

/* ===== Hero ===== */
.hero {
  min-height: 72vh; display: grid; grid-template-columns: 1fr 1fr;
  padding-top: 68px;
}
.hero-left {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 64px 80px 80px; background: var(--mist);
}
.hero-left-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}

/* Leitbild-Balken Dekoration */
.hero-lb-deco { position: absolute; inset: 0; pointer-events: none; }
.lb-pill {
  position: absolute;
  border-radius: var(--pill);
  opacity: 0.13;
}
.lb--blau  { background: var(--blau); }
.lb--gruen { background: var(--gruen); }
.lb--ocker { background: var(--ocker); }
.lb--rot   { background: var(--rot); }

/* Individuelle Positionen — verteilt über die gesamte Fläche */
.lb-a { width: 180px; height: 22px; top: 8%;    left: -30px;  transform: rotate(-6deg); }
.lb-b { width: 80px;  height: 18px; top: 18%;   left: 42%;    transform: rotate(14deg); }
.lb-c { width: 110px; height: 18px; top: 50%;   right: 8%;    transform: rotate(8deg); }
.lb-d { width: 110px; height: 16px; top: 38%;   right: 8%;    transform: rotate(-12deg); }
.lb-e { width: 120px; height: 20px; bottom: 15%; right: 28%;  transform: rotate(-5deg); }
.lb-f { width: 70px;  height: 18px; bottom: 10%; right: 12%;  transform: rotate(18deg); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gruen-lt); border-radius: var(--radius);
  padding: 5px 14px; margin-bottom: 24px; width: fit-content;
  font-size: var(--fs-marke); font-weight: 700; color: var(--gruen);
  letter-spacing: var(--ls-versal); text-transform: uppercase;
}
.hero-eyebrow {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--blau); opacity: .65;
  margin-bottom: 16px;
}
.hero h1 {
  font-family: var(--font-serif); font-size: var(--fs-hero);
  line-height: 1.12; color: var(--ink); margin-bottom: 20px; margin-top: 0;
}
.accent-blau  { color: var(--blau); }
.accent-ocker { color: var(--ocker); }
.accent-gruen { color: var(--gruen); }
.accent-rot   { color: var(--rot); }
.hero-sub {
  font-size: var(--fs-text); line-height: 1.75; color: var(--ink-2);
  max-width: 460px; margin-bottom: 32px; font-weight: 400;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hover-Erweiterung im Hero */
.hero-more-toggle {
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; margin-top: 14px;
  border-radius: var(--pill); border: 1.5px solid rgba(30,50,112,.2);
  color: var(--blau); font-size: var(--fs-klein); font-weight: 600;
  transition: border-color .2s, background .2s;
}
.hero-more-toggle:hover { border-color: var(--blau); background: var(--blau-lt); }
.hmt-arrow { width: 18px; height: 18px; transition: transform .3s ease; }
.hero-more-toggle[aria-expanded="true"] .hmt-arrow { transform: rotate(180deg); }

.hero-more {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s ease, opacity .4s ease;
  margin-top: 0;
}
.hero-more.open {
  max-height: 240px; opacity: 1; margin-top: 20px;
}
.hero-more p {
  font-size: var(--fs-kompakt); line-height: 1.8; color: var(--ink-2);
  font-weight: 400; margin-bottom: 10px;
}
.hero-more-link {
  font-size: var(--fs-klein); font-weight: 600; color: var(--blau);
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap .15s;
}
.hero-more-link:hover { gap: 8px; }

.hero-right {
  position: relative; overflow: hidden;
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% center;
  position: absolute; inset: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to left, transparent 60%, rgba(244,241,236,.18) 100%);
}
.hero-right-content {
  position: relative; z-index: 2;
  padding: 60px; display: flex; flex-direction: column;
  justify-content: center; height: 100%;
}
.leitspruch {
  font-family: var(--font-serif); font-size: var(--fs-aussage);
  color: #fff; line-height: 1.45; margin-bottom: 32px;
}
.leitspruch em { font-style: normal; }
.em-ocker { color: #f0d070; }
.em-gruen { color: #7eccc0; }
.em-rot   { color: #f0a0c0; }
.hero-stats { display: flex; gap: 14px; }
.stat {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 14px 16px; text-align: center; flex: 1;
  backdrop-filter: blur(4px);
}
.stat strong {
  display: block; font-family: var(--font-serif);
  font-size: var(--fs-h3); color: #f0d070; line-height: 1;
}
.stat span { font-size: var(--fs-marke); color: rgba(255,255,255,.5); font-weight: 500; }
.hero-info-groups { display: flex; flex-direction: column; gap: 10px; }
.hig-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 16px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,.07);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hig-label {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: rgba(255,255,255,.55); min-width: 88px; flex-shrink: 0;
}
.hig-items { font-size: var(--fs-klein); color: rgba(255,255,255,.88); font-weight: 400; line-height: 1.4; }
.hig--ocker { border-left-color: #f0d070; }
.hig--gruen { border-left-color: #7eccc0; }
.hig--blau  { border-left-color: rgba(160,185,240,.8); }

/* Decorative pills on hero */
.deco-pill {
  position: absolute; border-radius: var(--pill); z-index: 3; opacity: .15;
}
.dp-1 { width: 160px; height: 20px; background: var(--ocker); top: 28%; right: 6%; transform: rotate(-8deg); z-index: 0; opacity: .13; }
.dp-2 { width: 16px; height: 100px; background: var(--rot); bottom: 20%; left: -6px; transform: rotate(12deg); }
.dp-3 { width: 120px; height: 16px; background: var(--gruen); bottom: 8%; right: 40px; transform: rotate(5deg); }

/* ===== Profil-Leiste ===== */
.profil-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0; background: var(--mist); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 48px;
}
.pb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  font-size: var(--fs-klein); font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.pb-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.pb--ocker { background: var(--ocker); }
.pb--blau  { background: var(--blau); }
.pb--gruen { background: var(--gruen); }
.pb--rot   { background: var(--rot); }
.pb-divider { width: 1px; height: 18px; background: rgba(255,255,255,.12); flex-shrink: 0; }

/* ===== Geschichte ===== */
.geschichte-section { padding: var(--takt) var(--takt-seite); background: var(--white); }
.timeline { position: relative; padding-left: 28px; max-width: 720px; margin-top: 48px; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; margin-bottom: 36px; }
.tl-item::before {
  content: ''; position: absolute; left: -34px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--blau);
  box-shadow: 0 0 0 3px var(--white);
}
.tl-item--highlight::before { background: var(--blau); }
.tl-year { display: block; font-size: var(--fs-klein); font-weight: 700; color: var(--blau); margin-bottom: 4px; letter-spacing: 0; }
.tl-text { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.7; font-weight: 400; }

/* ===== Namensgeberin ===== */
/* ===== 125 Jahre Jubiläum ===== */
.jubil-section { padding: var(--takt) var(--takt-seite); background: var(--white); }
.jubil-hero { border-radius: var(--radius); overflow: hidden; margin-bottom: 40px; }
.jubil-hero img { width: 100%; height: 420px; object-fit: cover; object-position: center; display: block; }
.jubil-intro { max-width: 780px; margin: 0 auto 48px; }
.jubil-intro p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.85; font-weight: 400; }
.jubil-highlights {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 48px;
}
.jubil-hl {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--off-white); border-radius: var(--radius);
  padding: 20px; border: 1px solid var(--border);
}
.jubil-hl-icon { flex-shrink: 0; width: 36px; height: 36px; background: var(--blau-lt); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.jubil-hl-icon svg { width: 18px; height: 18px; stroke: var(--blau); }
.jubil-hl strong { display: block; font-size: var(--fs-klein); font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.jubil-hl span { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.5; }
.jubil-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
  grid-template-rows: auto;
  gap: 8px;
}
.jubil-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; transition: opacity .2s; }
.jubil-gallery img:hover { opacity: .88; }
.jg-wide { grid-column: span 4; }

/* Handy: vier Spalten sprengen die Seite. Die Marken stehen untereinander,
   die Galerie in zwei Reihen. */
@media (max-width: 900px) {
  .jubil-highlights { grid-template-columns: 1fr 1fr; gap: 14px; }
  .jubil-gallery { grid-template-columns: 1fr 1fr; }
  .jg-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .jubil-highlights { grid-template-columns: 1fr; gap: 12px; }
  .jubil-hero img { height: 240px; }
}
.jg-wide img { aspect-ratio: 16/6; }
.jg-stack { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; }
.jg-stack img { aspect-ratio: 4/3; flex: 1; }
.jg-third { grid-column: span 2; }
.jg-third img { aspect-ratio: 4/3; }

.namensgeberin-section { padding: var(--takt) var(--takt-seite); background: var(--mist); }
.ng-inner { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
@media (max-width: 860px) {
  /* Das Porträt der Namensgeberin rückt unter den Text. */
  .ng-inner { grid-template-columns: 1fr; gap: 32px; }
}
.ng-text p { font-size: var(--fs-text); color: var(--ink-2); line-height: 1.75; font-weight: 400; margin-top: 18px; }
.ng-fact-box {
  background: var(--white); border-radius: var(--radius); border: 1px solid var(--border);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.ng-fact { display: flex; flex-direction: column; gap: 2px; }
.ng-fact-label { font-size: var(--fs-marke); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-versal); color: var(--ink-3); }
.ng-fact-val { font-size: var(--fs-kompakt); color: var(--ink-2); font-weight: 500; }
.ng-portrait {
  width: 100%; border-radius: var(--radius);
  object-fit: cover; object-position: center top;
  margin-bottom: 20px;
  box-shadow: var(--schatten-flach);
}

/* ===== Schulprofil ===== */
.schulprofil-section { padding: var(--takt) var(--takt-seite); background: var(--mist); }
.sp-facts {
  display: flex; align-items: center; justify-content: center;
  gap: 0; background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 56px; flex-wrap: wrap;
}
.sp-fact {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 40px; text-align: center;
}
.sp-fact strong {
  font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--blau); line-height: 1;
  margin-bottom: 6px;
}
.sp-fact span { font-size: var(--fs-marke); color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-versal); }
.sp-fact-divider { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; }
.sp-subheading {
  font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink);
  margin-bottom: 20px; margin-top: 48px;
}
.sp-grid { margin-bottom: 0; }

/* ===== Buttons ===== */
.btn-primary {
  background: var(--blau); color: #fff; padding: 13px 26px; border-radius: var(--radius);
  font-size: var(--fs-klein); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  transition: .2s; box-shadow: var(--schatten-flach);
}
.btn-primary:hover { background: #162a5e; transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.btn-secondary {
  color: var(--blau); padding: 13px 26px; border-radius: var(--radius);
  font-size: var(--fs-klein); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--blau); transition: .2s;
}
.btn-secondary:hover { background: var(--blau-lt); transform: translateY(-2px); }

/* Der Boden fuer kleine Auszeichnungen liegt auf dem Handy hoeher — eine
   Stelle statt 227 Einzelwerte wie vor dem 3. September. (12.09.2026) */
@media (max-width: 760px) {
  :root { --fs-marke: 11.5px; --fs-klein: 13.5px; }
}

/* ── Rangordnung ──────────────────────────────────────────────────────
   Die Groesse folgt dem Rang, nicht dem Bauteil. Vorher war ein h2 je
   nach Umgebung 38 oder 31 px gross, weil mehrere Regeln h2 und h3
   gemeinsam setzten — der Leser konnte den Anfang eines Abschnitts
   nicht mehr vom Zwischentitel unterscheiden.  (12.09.2026) */
.exp-body h2, .exp-subhead h2 { font-size: var(--fs-h2); line-height: 1.15; }

/* ===== Section Utilities ===== */
.section-label {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--gruen); margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-serif); font-size: var(--fs-h2);
  color: var(--ink); line-height: 1.25;
}

/* ===== Leitbild ===== */
.leitbild { padding: var(--takt) var(--takt-seite); background: var(--white); }
.leitbild-intro { margin-bottom: 56px; }
.intro-text { max-width: 680px; margin-top: 18px; font-size: var(--fs-text); line-height: 1.8; color: var(--ink-2); font-weight: 400; }
.saeulen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.saeule {
  border-radius: var(--radius); padding: 40px 32px; position: relative;
  overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.saeule:hover { transform: translateY(-5px); }
.saeule--ocker { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--ocker); }
.saeule--gruen { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gruen); }
.saeule--rot   { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--rot); }
.saeule--ocker:hover { box-shadow: var(--schatten-hoch); }
.saeule--gruen:hover { box-shadow: var(--schatten-hoch); }
.saeule--rot:hover   { box-shadow: var(--schatten-hoch); }
.saeule-nr {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-serif); font-size: var(--fs-zier); font-weight: 700;
  opacity: .06; line-height: 1; color: var(--ink);
}
.saeule-tag {
  display: inline-block; border-radius: var(--radius); padding: 3px 10px;
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; margin-bottom: 18px;
  border: 1.5px solid currentColor; background: transparent;
}
.saeule--ocker .saeule-tag { color: var(--ocker); }
.saeule--gruen .saeule-tag { color: var(--gruen); }
.saeule--rot   .saeule-tag { color: var(--rot); }
.saeule h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: 14px; color: var(--ink); }
.saeule p { font-size: var(--fs-kompakt); line-height: 1.8; color: var(--ink-2); font-weight: 400; }
.saeule p + p { margin-top: 10px; }
.saeule-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: auto; padding-top: 20px; font-size: var(--fs-klein); font-weight: 600; transition: gap .2s;
}
.saeule--ocker .saeule-link { color: var(--ocker); }
.saeule--gruen .saeule-link { color: var(--gruen); }
.saeule--rot   .saeule-link { color: var(--rot); }
.saeule-link:hover { gap: 10px; }

/* ===== Ziel-Banner ===== */
.ziel-banner {
  background: linear-gradient(135deg, var(--blau) 0%, #0d2050 55%, #0a4545 100%);
  padding: 80px 48px; text-align: center; position: relative; overflow: hidden;
}
.ziel-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 2; }
.ziel-inner blockquote {
  font-family: var(--font-serif); font-size: var(--fs-aussage);
  color: #fff; line-height: 1.65; font-style: italic; margin-bottom: 20px;
}
.ziel-inner blockquote strong { font-style: normal; color: #f0d070; font-weight: 600; }
.ziel-source { font-size: var(--fs-klein); color: rgba(255,255,255,.4); font-weight: 400; }
.ziel-pills { position: absolute; inset: 0; pointer-events: none; }
.zp { position: absolute; border-radius: var(--pill); background: #fff; opacity: .04; }
.zp-1 { width: 220px; height: 28px; top: 20%; left: -40px; transform: rotate(-6deg); }
.zp-2 { width: 160px; height: 22px; bottom: 18%; right: -30px; transform: rotate(8deg); }

/* ===== Grußwort ===== */
.grussword { padding: var(--takt) var(--takt-seite); background: var(--mist); }




.gw-sig strong { font-weight: 600; color: var(--blau); }

/* ===== Schulleben ===== */
.schulleben { padding: var(--takt) var(--takt-seite); background: var(--mist); }
.schulleben-header { margin-bottom: 48px; }
.sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sl-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); display: flex;
  transition: transform .25s, box-shadow .25s;
}
.sl-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.sl-accent { width: 5px; flex-shrink: 0; }
.sl--blau .sl-accent { background: var(--blau); }
.sl--gruen .sl-accent { background: var(--gruen); }
.sl--rot .sl-accent { background: var(--rot); }
.sl--ocker .sl-accent { background: var(--ocker); }
.sl-body { padding: 26px 26px 26px 20px; flex: 1; }
.sl-cat { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; margin-bottom: 8px; }
.sl--blau .sl-cat { color: var(--blau); }
.sl--gruen .sl-cat { color: var(--gruen); }
.sl--rot .sl-cat { color: var(--rot); }
.sl--ocker .sl-cat { color: var(--ocker); }
.sl-card h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: 8px; line-height: 1.35; }
.sl-card p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.7; font-weight: 400; }

/* Schulleben-Karten mit Foto (Startseite) */
.schulleben .sl-grid { grid-template-columns: repeat(4, 1fr); }
.schulleben .sl-card { flex-direction: column; padding: 0; text-align: left; background: var(--white); }
.schulleben .sl-media { aspect-ratio: 4 / 3; overflow: hidden; }
.schulleben .sl-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; }
.schulleben .sl-card:hover .sl-media img { transform: scale(1.05); }
.schulleben .sl-accent { width: 100%; height: 4px; }
.schulleben .sl-body { padding: 20px 22px 24px; }
@media (max-width: 980px) { .schulleben .sl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .schulleben .sl-grid { grid-template-columns: 1fr; } }

/* Lade-/Leer-/Fehlermeldung der dynamischen Beitrags-Feeds */
.feed-state { color: var(--ink-2); font-size: var(--fs-kompakt); font-weight: 400; padding: 8px 2px; margin: 0; }

/* ===== Aktuelles ===== */
/* Die Nachrichten sitzen bewusst näher am Kopfbild — oben 48 px statt Takt,
   Seiten und Fuß folgen dem Takt. Einzige Ausnahme, mit Absicht. */
.aktuelles { padding: 48px var(--takt-seite) var(--takt); background: var(--white); }
.aktuelles-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 44px; flex-wrap: wrap; gap: 16px;
}
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .25s, box-shadow .25s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.news-media { position: relative; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; }
.news-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-media img { transform: scale(1.04); }
.news-media--empty { display: flex; align-items: center; justify-content: center; }
.news-media--empty span { font-size: var(--fs-marke); color: var(--ink-2); letter-spacing: var(--ls-versal); text-transform: uppercase; }
.news-bar { height: 4px; width: 100%; flex-shrink: 0; }
.nb--rot { background: var(--rot); }
.nb--blau { background: var(--blau); }
.nb--gruen { background: var(--gruen); }
.nb--ocker { background: var(--ocker); }
.news-body { padding: 24px 22px; }
.news-tag {
  display: inline-block; font-size: var(--fs-marke); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius); letter-spacing: var(--ls-versal);
  text-transform: uppercase; margin-bottom: 8px;
}
.nt--rot { background: var(--rot); color: #fff; }
.nt--blau { background: var(--blau); color: #fff; }
.nt--gruen { background: var(--gruen); color: #fff; }
.nt--ocker { background: var(--ocker); color: #fff; }
.news-body time { display: block; font-size: var(--fs-marke); color: var(--gruen); font-weight: 600; margin-bottom: 8px; }
.news-card h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: 8px; line-height: 1.4; }
.news-card p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.65; font-weight: 400; }

/* ===== Service / Quicklinks ===== */
.service { padding: var(--takt) var(--takt-seite); background: var(--white); }
.ql-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.ql-item {
  background: var(--white); border-radius: var(--radius); padding: 22px 16px;
  text-align: center; border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
}
.ql-item:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.ql-icon {
  width: 44px; height: 44px; border-radius: var(--radius); margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.ql-item:hover .ql-icon { transform: scale(1.08); }
.ql-icon svg { width: 20px; height: 20px; }
.qi--blau { background: var(--blau-lt); color: var(--blau); }
.qi--gruen { background: var(--gruen-lt); color: var(--gruen); }
.qi--rot { background: var(--rot-lt); color: var(--rot); }
.qi--ocker { background: var(--ocker-lt); color: var(--ocker); }
.ql-item strong { display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--blau); margin-bottom: 3px; }
.ql-item span { font-size: var(--fs-marke); color: var(--ink-3); }

/* ===== Footer ===== */
footer { background: var(--navy); color: rgba(255,255,255,.55); padding: 64px 48px 32px; }
.footer-top { max-width: 1200px;   /* Fußzeile bleibt breit, unabhängig von der Textspalte */ margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 48px; }
.fb-row { display: flex; align-items: center; margin-bottom: 14px; }
.fb-logo-img { height: 64px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .85; }
.footer-brand p { font-size: var(--fs-klein); line-height: 1.75; max-width: 260px; }
.footer-col h4 { font-size: var(--fs-marke); font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: var(--ls-versal); text-transform: uppercase; }
.footer-col a { display: block; font-size: var(--fs-klein); color: rgba(255,255,255,.45); margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: rgba(255,255,255,.85); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 20px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: var(--fs-marke); }
.footer-motto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-klein); color: rgba(255,255,255,.25); }
/* CD-Leitwörter (farbig) */
.footer-motto.leitwoerter { font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: var(--fs-klein); letter-spacing: 0; color: rgba(255,255,255,.4); }
.footer-motto.leitwoerter .lw { color: #fff; }
.footer-motto.leitwoerter .lw--ocker { color: var(--ocker); }
.footer-motto.leitwoerter .lw--gruen { color: var(--gruen); }
.footer-motto.leitwoerter .lw--rot { color: var(--rot); }

/* CD-Schülerfenster-Reihe (Duotone in Seitenfarbe), flächig wie im Briefkopf */
.sf-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.sf-strip img { width: 100%; height: 132px; object-fit: cover; display: block; }
@media (max-width: 760px) { .sf-strip img { height: 92px; } }

/* ===== CD: bewegte Logo-Linie (Hero → Inhalt) — je Seite andere Polyline ===== */
.hero-line { position: relative; height: 88px; background: var(--white); }
.hero-line svg { display: block; width: 100%; height: 88px; }
.hero-line polyline { fill: none; stroke: var(--c, var(--blau)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hero-line .hl-letter { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); color: var(--c, var(--blau)); background: var(--white); padding: 0 7px; }
@media (max-width: 760px) { .hero-line, .hero-line svg { height: 64px; } .hero-line .hl-letter { font-size: var(--fs-text); } }

/* Variante „integriert": die Linie ist die Unterkante des Hero-Fotos (organisch) */
.hero-cut { position: relative; height: 72px; margin-top: -72px; z-index: 4; pointer-events: none; }
.hero-cut svg { display: block; width: 100%; height: 72px; }
.hero-cut .hc-fill { fill: var(--white); }
.hero-cut .hc-line { fill: none; stroke: var(--c, var(--blau)); stroke-width: 4; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) { .hero-cut, .hero-cut svg { height: 52px; } .hero-cut { margin-top: -52px; } }

/* Der Footer ist oben zackig ausgeschnitten — in der Zacke scheint der Seiten-
   hintergrund durch. Endet eine Seite mit einem getönten Abschnitt, entstünde
   dort ein heller Streifen. Deshalb verlängern getönte Schlussabschnitte ihren
   Hintergrund um die Zackenhöhe. */
main > section:last-of-type { position: relative; }
main > section:last-of-type.page-content-mist::after,
main > section:last-of-type.wir-section--alt::after,
main > section:last-of-type.exp-section--alt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -48px;
  height: 48px; background: var(--mist); pointer-events: none;
}

/* ===== CD: Schülerfenster dezent in den Footer gewaschen (Logo-Linie als Oberkante) ===== */
.footer-sf { position: relative; height: 132px; overflow: hidden; margin-bottom: -1px;
  clip-path: polygon(0 30px, 16.7% 12px, 50% 44px, 83.3% 10px, 100% 32px, 100% 100%, 0 100%); }
.footer-sf .fsf-windows { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.footer-sf .fsf-windows img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Verlauf: oben durchscheinend, nach unten vollständig ins Footer-Navy ausgeblendet */
.footer-sf::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,40,65,.4) 0%, rgba(14,40,65,.82) 58%, var(--navy) 100%); }
@media (max-width: 760px) { .footer-sf { height: 96px; clip-path: polygon(0 22px, 16.7% 10px, 50% 32px, 83.3% 8px, 100% 24px, 100% 100%, 0 100%); } }

/* ===== CD: Briefkopf-/Sign-off-Device (Schülerfenster + Logo + Leitwörter) ===== */
.brandband { background: var(--white); border-top: 1px solid var(--border); padding: 40px 48px 10px; }
.brandband-row { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brandband-windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; max-width: 560px; }
.brandband-windows img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius); display: block; }
.brandband-logo { height: 58px; width: auto; }
.brandband-lw { max-width: var(--max-w); margin: 18px auto 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-kompakt); letter-spacing: 0; color: var(--ink-3); }
.brandband-lw .lw { color: var(--blau); }
.brandband-lw .lw--ocker { color: var(--ocker); }
.brandband-lw .lw--gruen { color: var(--gruen); }
.brandband-lw .lw--rot { color: var(--rot); }
@media (max-width: 760px) {
  .brandband { padding: 30px 24px 8px; }
  .brandband-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .brandband-windows { max-width: none; width: 100%; }
}

/* ===== Animations ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Barrierefreiheit + schwache Hardware: keine Bewegung, Inhalt sofort da */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 130px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: var(--schatten-hoch);
    padding: 10px 24px 28px; z-index: 99;
  }
  .nav-links.open > li > a {
    display: block; padding: 13px 2px; font-size: var(--fs-kompakt); opacity: 1;
    border-bottom: 1px solid var(--border);
  }
  .hero { grid-template-columns: 1fr; }
  .hero-left { padding: 48px 24px 40px; }
  .lb-pill { opacity: 0.09; }
  .lb-a { width: 120px; left: -15px; }
  .lb-c { width: 100px; }
  .lb-e { width: 110px; }
  .hero-right { min-height: 400px; }
  .hero-right-content { padding: 32px 24px; }
  .ziel-banner { padding: 60px 24px; }


  .saeulen-grid { grid-template-columns: 1fr; }
  .sl-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .ql-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  footer { padding: 40px 24px 20px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: var(--fs-h2); }
  .hero-actions { flex-direction: column; }
  .hb-row { gap: 5px; }
  .hero-badge { font-size: var(--fs-marke); padding: 4px 10px; }
  .ql-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ===== Dropdown Navigation ===== */
.nav-links { gap: 22px; }
.has-drop { position: relative; }
/* Der Aufklapp-Knopf des Handy-Menüs — auf dem Desktop öffnet das Menü
   beim Überfahren, dort ist er nicht nötig. */
.drop-schalter { display: none; }
.has-drop > a::after {
  content: '▾'; font-size: var(--fs-marke); margin-left: 3px;
  opacity: .45; vertical-align: middle; display: inline-block;
}
.drop {
  position: absolute; top: calc(100% + 10px); left: -14px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 0; min-width: 210px;
  box-shadow: var(--schatten-hoch);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 200; list-style: none;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop li a {
  display: block; padding: 7px 16px;
  font-size: var(--fs-klein); color: var(--ink-2); opacity: 1; font-weight: 400;
  transition: background .12s, color .12s; white-space: nowrap;
}
.drop li a:hover { background: var(--mist); color: var(--blau); }
.drop li + li { border-top: 1px solid var(--border); }
.drop li.drop-group { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }

/* Active nav indicator */
.nav-links a.nav-active { color: var(--blau); opacity: 1; font-weight: 600; }

/* ===== Subpage Layout ===== */
.page-hero {
  padding: 72px 48px 92px; margin-top: 68px;
  position: relative; overflow: hidden;
}
.ph--blau  { background: var(--blau); }
.ph--ocker { background: var(--ocker); }
.ph--gruen { background: var(--gruen); }
.ph--rot   { background: var(--rot); }
.ph--ink   { background: var(--navy); }
.page-hero .container { position: relative; z-index: 2; }
.ph-breadcrumb {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  color: rgba(255,255,255,.45); text-transform: uppercase; margin-bottom: 14px;
}
.ph-breadcrumb a { color: rgba(255,255,255,.45); transition: color .2s; }
.ph-breadcrumb a:hover { color: rgba(255,255,255,.75); }
.ph-gemeinsam {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px;
}
.ph-title {
  font-family: var(--font-serif); font-size: var(--fs-seite);
  color: #fff; line-height: 1.05; margin-bottom: 16px;
}
.ph-sub {
  font-size: var(--fs-text); color: rgba(255,255,255,.65); max-width: 560px;
  line-height: 1.75; font-weight: 400;
}
/* Decorative pill in page-hero */
.ph-deco {
  position: absolute; inset: 0; pointer-events: none;
}
.ph-deco span {
  position: absolute; border-radius: var(--pill);
  background: rgba(255,255,255,.06);
}
.ph-deco .pd-1 { width: 240px; height: 28px; bottom: 20%; right: 5%; transform: rotate(-8deg); }
.ph-deco .pd-2 { width: 120px; height: 20px; top: 15%; right: 15%; transform: rotate(12deg); }
.ph-deco .pd-3 { width: 80px;  height: 16px; bottom: 10%; left: 5%;  transform: rotate(5deg); }

/* ===== Hero-Variante A: Foto mit Hausfarben-Schleier ===== */
.ph-has-photo { min-height: clamp(360px, 32vw, 720px); display: flex; align-items: center; }
.ph-has-photo .container { width: 100%; text-align: left; }
.ph-has-photo .ph-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ph-has-photo .ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
/* Der Verlauf bleibt links bei 94 % — dort stehen Titel und Unterzeile —
   und oeffnet sich nach rechts auf rund 18 %, damit das Foto zu sehen ist.
   Bis zum 13. September 2026 lag er bei 96/82/55 und machte aus jedem
   Kopf eine Farbflaeche: sechzehn Seiten, ein Anblick. */
.ph-has-photo .ph-media::after { content: ''; position: absolute; inset: 0; }
.ph--blau.ph-has-photo  .ph-media::after { background: linear-gradient(112deg, rgba(39,52,139,.94) 0%, rgba(39,52,139,.62) 42%, rgba(39,52,139,.18) 100%); }
.ph--gruen.ph-has-photo .ph-media::after { background: linear-gradient(112deg, rgba(0,144,152,.94) 0%, rgba(0,144,152,.60) 42%, rgba(0,144,152,.16) 100%); }
/* Auf dem hellen Ocker verschwindet die Unterzeile bei 65 % Weiß.
   Nur dort steht sie deshalb kräftiger und mit einem feinen Schatten. */
.ph--ocker .ph-sub { color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(60,40,0,.35); }
.ph--ocker.ph-has-photo .ph-media::after { background: linear-gradient(112deg, rgba(206,161,0,.94) 0%, rgba(206,161,0,.62) 42%, rgba(206,161,0,.20) 100%); }
.ph--rot.ph-has-photo   .ph-media::after { background: linear-gradient(112deg, rgba(229,0,109,.94) 0%, rgba(229,0,109,.62) 42%, rgba(229,0,109,.18) 100%); }
.ph--ink.ph-has-photo   .ph-media::after { background: linear-gradient(112deg, rgba(14,40,65,.96) 0%, rgba(14,40,65,.78) 42%, rgba(14,40,65,.40) 100%); }

/* ===== Hero-Variante C: schmaler Fotostreifen unter dem Hero ===== */
.ph-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: clamp(200px, 18vw, 420px); background: var(--white); }
.ph-strip figure { margin: 0; overflow: hidden; position: relative; }
.ph-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ph-strip figure:hover img { transform: scale(1.05); }
@media (max-width: 720px) {
  .ph-strip { grid-template-columns: 1fr 1fr; height: 150px; }
  .ph-strip figure:nth-child(3) { display: none; }
}

/* Feature-Bild, das nicht beschnitten werden darf (Plakate, Hochformate) */
.exp-media--frei img { height: auto; max-height: 520px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; border-radius: var(--radius); }

/* Unterlagen zum Abhaken */
.unterlagen { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; margin-top: 22px; }
.unterlagen-spalte h4 { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--blau); margin: 0 0 12px; }
.unterlagen-spalte ul { margin: 0; padding: 0; list-style: none; }
.unterlagen-spalte li { position: relative; padding: 0 0 10px 26px; font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.unterlagen-spalte li:last-child { border-bottom: none; }
.unterlagen-spalte li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border: 1.5px solid var(--blau); border-radius: 3px; }
@media (max-width: 760px) { .unterlagen { grid-template-columns: 1fr; gap: 28px; } }

/* Liste der Schulhausführungen */
.fuehrungen { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); max-width: 720px; }
.fuehrung { display: grid; grid-template-columns: 190px 1fr auto; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border); }
.fuehrung-datum { font-weight: 700; font-size: var(--fs-kompakt); color: var(--ink-2); }
.fuehrung-zeit { font-size: var(--fs-kompakt); color: var(--ink-2); }
.fuehrung-was { font-size: var(--fs-kompakt); color: var(--ink-2); }
.fuehrung-link { font-size: var(--fs-kompakt); font-weight: 600; color: var(--blau); white-space: nowrap; }
@media (max-width: 640px) { .fuehrung { grid-template-columns: 1fr auto; } .fuehrung-zeit { grid-column: 1 / -1; } }

/* Persönliche Ansprache auf der Aufnahmeseite */
.gruss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.gruss h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.3; color: var(--ink); margin: 0 0 14px; }
.gruss p { font-size: var(--fs-text); line-height: 1.85; color: var(--ink-2); margin: 0 0 14px; }
.gruss p:last-child { margin-bottom: 0; }
.gruss-sig { margin-top: 26px; font-style: normal; font-size: var(--fs-text); color: var(--ink-2); }
@media (max-width: 860px) { .gruss-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Ein Plakat neben dem Absatz, zu dem es gehört */
.plakat-neben { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; margin: 30px 0; }
.plakat-neben--rev { grid-template-columns: 1fr 300px; }
.plakat-neben--rev figure { order: 2; }
.plakat-neben figure { margin: 0; }
.plakat-neben img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.plakat-neben figcaption { margin-top: 10px; font-size: var(--fs-klein); line-height: 1.55; color: var(--ink-2); }
.plakat-neben p { margin: 0 0 16px; font-size: var(--fs-text); line-height: 1.85; color: var(--ink-2); }
.plakat-text p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
  .plakat-neben, .plakat-neben--rev { grid-template-columns: 1fr; gap: 22px; }
  .plakat-neben--rev figure { order: 0; }
  .plakat-neben figure { max-width: 320px; }
}

/* Zwei Plakate nebeneinander, jedes mit eigener Zeile */
.plakat-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 34px auto 0; }
.plakat-paar figure { margin: 0; }
.plakat-paar img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.plakat-paar figcaption { margin-top: 10px; font-size: var(--fs-klein); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 720px) { .plakat-paar { grid-template-columns: 1fr; max-width: 380px; } }

/* Platzhalter, solange ein Foto fehlt — bewusst schlicht, damit er auffällt */
.bild-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  aspect-ratio: 4 / 3; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--mist); color: var(--ink-3, var(--ink-2)); }
.bild-ph svg { width: 34px; height: 34px; opacity: .5; }
.bild-ph span { font-size: var(--fs-klein); letter-spacing: 0; }

/* Breiter Teamstreifen — Personen nebeneinander, passend zur Namensliste darunter */
.team-band { margin: 0 0 26px; }
.team-band img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.team-band figcaption { margin-top: 10px; font-size: var(--fs-klein); line-height: 1.55; color: var(--ink-2); }

/* Eine Bildaussage: ein Bild allein, ein Satz darunter. Nie in Reihe. */
.bildaussage { max-width: 820px; margin: 56px auto; padding: 0 22px; }
.bildaussage img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.bildaussage figcaption { margin-top: 12px; font-size: var(--fs-kompakt); line-height: 1.6; color: var(--ink-2); }

/* Zwei Muster, die bisher überall im Text wiederholt standen:
   ein Bild mit Rundung und Schatten, und die Zeile darunter. */
.bild-gerahmt { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schatten-flach); display: block; }
.bildzeile { margin-top: 8px; font-size: var(--fs-klein); color: var(--ink-2); }
.bildzeile--mitte { text-align: center; }
/* Drei Breiten derselben Form: breit für ein Bild, das die Seite trägt,
   Standard für die Regel, klein für Plakate und Nebenbilder. */
.bildaussage--breit { max-width: 1040px; }
.bildaussage--breit img { box-shadow: var(--schatten-flach); }
.bildaussage--klein { max-width: 560px; }
@media (max-width: 720px) { .bildaussage { margin: 40px auto; } }

/* Einleitung und Bildaussage nebeneinander (Entfalten) */
.intro-mit-bild { display: grid; grid-template-columns: 1fr 430px; gap: 48px; align-items: center; margin-bottom: 8px; }
.intro-mit-bild .topic-intro { margin: 0; }
@media (max-width: 900px) { .intro-mit-bild { grid-template-columns: 1fr; gap: 34px; } .intro-mit-bild .ph-montage { max-width: 320px; } }

/* ===== Hero-Variante D: eine Bildaussage im Hochformat statt des Streifens ===== */
.ph-montage { max-width: 430px; margin: 0 auto; }
.ph-montage img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.ph-montage figcaption { margin-top: 12px; text-align: center; font-size: var(--fs-klein); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 720px) { .ph-montage { max-width: 340px; margin-top: 38px; } }

/* Vollbreites Banner-Foto unter dem Hero (z. B. Luftbild Gemeinschaft) */
.ph-banner { margin: 0; overflow: hidden; height: clamp(300px, 34vw, 680px); background: var(--white); }
.ph-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
@media (max-width: 720px) { .ph-banner { height: clamp(200px, 56vw, 300px); } }

/* ===== Atmosphärische Vollbreit-Bänder (themenunabhängig, zur Auflockerung) ===== */
.atmo-band { margin: 0; overflow: hidden; height: clamp(240px, 26vw, 460px); position: relative; display: block; }
.atmo-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
.atmo-band figcaption {
  position: absolute; left: 0; bottom: 0; padding: 14px 22px;
  color: #fff; font-size: var(--fs-kompakt); letter-spacing: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
  width: 100%;
}
/* Platzhalter-Variante: markiert eine Stelle für ein späteres Stimmungsbild */
/* Dasselbe Band, aber im Textfluss statt über die volle Breite: es sitzt
   jetzt im Schulprofil zwischen dem Gemeinsamen und den zwei Wegen. */
.atmo-band--innen { margin: 44px 0 0; height: clamp(200px, 20vw, 330px); border-radius: var(--radius); }

/* Der Film in den Schülerstimmen. */
.stimmen-film { margin: 0 0 34px; }
.stimmen-film video {
  display: block; width: 100%; height: auto; background: #0d1530;
  border-radius: var(--radius);
}
.stimmen-film figcaption {
  margin-top: 10px; font-size: var(--fs-klein); line-height: 1.6; color: var(--ink-3);
}

.atmo-band.atmo-ph { display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--mist) 0 22px, #e8edf3 22px 44px); color: var(--ink-60, #5a6678); }
.atmo-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; }
.atmo-ph-inner svg { width: 38px; height: 38px; opacity: .5; }
.atmo-ph-inner strong { font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; font-size: var(--fs-marke); }
.atmo-ph-inner small { opacity: .75; max-width: 30ch; }
/* Kleines, verspieltes Spot-Bild (z. B. Stoff-Wesen in der Schülerzeitung) */
.zeitung-spot { float: right; width: clamp(130px, 17vw, 210px); margin: 4px 0 18px 30px; transform: rotate(3deg); text-align: center; }
.zeitung-spot img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--schatten-flach); }
.zeitung-spot figcaption { margin-top: 8px; font-size: var(--fs-klein); color: var(--ink-60, #5a6678); transform: rotate(-3deg); }
@media (max-width: 720px) { .zeitung-spot { width: 118px; margin-left: 16px; } }

/* Topic cards grid */
.page-content { padding: var(--takt) var(--takt-seite); background: var(--white); }
.page-content-mist { background: var(--mist); }
.topic-intro { margin-bottom: 48px; }
.topic-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.topic-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.tc-icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.tc-icon svg { width: 20px; height: 20px; }
.tc--blau  .tc-icon { background: var(--blau-lt);  color: var(--blau); }
.tc--ocker .tc-icon { background: var(--ocker-lt); color: var(--ocker); }
.tc--gruen .tc-icon { background: var(--gruen-lt); color: var(--gruen); }
.tc--rot   .tc-icon { background: var(--rot-lt);   color: var(--rot); }
.topic-card h3 {
  font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: 8px;
  color: var(--ink); line-height: 1.3;
}
.topic-card p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.75; font-weight: 400; flex: 1; }
.tc-link {
  margin-top: 16px; font-size: var(--fs-klein); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; transition: gap .15s;
}
.tc--blau  .tc-link { color: var(--blau); }
.tc--ocker .tc-link { color: var(--ocker); }
.tc--gruen .tc-link { color: var(--gruen); }
.tc--rot   .tc-link { color: var(--rot); }
.topic-card:hover .tc-link { gap: 8px; }

/* ===== Wir / Gemeinschaft sections ===== */
.wir-section {
  padding: var(--takt) var(--takt-seite);
}
.wir-section--alt {
  background: var(--mist);
}
.section-sub {
  font-size: var(--fs-text); color: var(--ink-2); line-height: 1.8;
  max-width: 700px; margin-top: 12px;
}
.wir-subheading {
  font-size: var(--fs-klein); color: var(--ink-3); line-height: 1.6;
  margin-top: 36px; margin-bottom: 4px;
  padding-top: 28px; border-top: 1px solid var(--border);
}
.wir-persons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; margin-top: 40px;
}
.wir-person {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
}
.wir-person--inline {
  background: transparent; border: none; padding: 0; margin-top: 12px;
}
.wir-person--small {
  background: transparent; border: none; padding: 0; margin-top: 16px;
}
.wp-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blau-lt); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wp-icon svg { width: 20px; height: 20px; stroke: var(--blau); }
.wp-name { font-weight: 600; font-size: var(--fs-kompakt); color: var(--ink-2); }
.wir-person .wp-name { white-space: nowrap; }
/* Fließtext-Seite (z. B. Ansprechpartner Angst/Depression) */
.ad-content { max-width: 780px; }
.ad-content p { margin: 0 0 14px; line-height: 1.75; font-size: var(--fs-text); color: var(--ink-2); }
.ad-content p strong { color: var(--ink-2); font-size: var(--fs-text); }
.ad-content ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.ad-content ul ul { margin: 6px 0 10px; }
.ad-content li { margin: 5px 0; line-height: 1.65; color: var(--ink-2); }
.ad-content a { color: var(--gruen); text-decoration: underline; text-underline-offset: 2px; }
.ad-content a:hover { opacity: .8; }
.wp-role { font-size: var(--fs-klein); color: var(--ink-3); margin-top: 2px; }
.wp-tasks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wp-pill {
  font-size: var(--fs-marke); font-weight: 500; color: var(--blau);
  background: var(--blau-lt); border-radius: var(--pill);
  padding: 2px 9px; white-space: nowrap;
}
.wir-persons-2col {
  display: flex; flex-direction: column; gap: 2px; margin-top: 40px;
}
.wir-person-2col {
  display: grid; grid-template-columns: 44px 1fr 1fr;
  align-items: start; gap: 16px 24px;
  padding: 20px 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--white);
}
.wir-person-2col + .wir-person-2col { margin-top: 8px; }
.wp-left { display: flex; flex-direction: column; gap: 3px; }
.wp-tasks-list {
  list-style: none; display: flex; flex-direction: column; gap: 4px;
}
.wp-tasks-list li {
  font-size: var(--fs-klein); color: var(--ink-2); padding-left: 14px; position: relative;
}
.wp-tasks-list li::before {
  content: '·'; position: absolute; left: 0; color: var(--blau); font-weight: 700;
}
@media (max-width: 640px) {
  .wir-person-2col { grid-template-columns: 44px 1fr; }
  .wir-person-2col .wp-tasks-list { grid-column: 1 / -1; padding-left: 44px; }
}

.wir-text {
  margin-top: 40px; display: flex; flex-direction: column; gap: 16px;
  max-width: 800px;
}
.wir-text p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }

/* Info box */
.wir-info-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 40px;
  margin-top: 40px;
}
.wir-info-box--cta {
  background: var(--blau-lt); border-color: transparent;
}
.wib-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.wib-heading {
  font-family: var(--font-serif); font-size: var(--fs-h3);
  color: var(--ink); margin-bottom: 16px;
}
.wib-address { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.9; }
.wib-address a { color: var(--blau); }
.wib-text { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }
.wib-table { border-collapse: collapse; margin-top: 8px; font-size: var(--fs-klein); color: var(--ink-2); }
.wib-table td { padding: 2px 16px 2px 0; vertical-align: top; }
.wib-table td:first-child { color: var(--ink-3); white-space: nowrap; min-width: 64px; }
.wib-table-sep td { padding-top: 10px; border-top: 1px solid var(--border); }
.wib-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.wib-list li {
  font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.6;
  padding-left: 20px; position: relative;
}
.wib-list li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--blau); font-size: var(--fs-klein);
}
.wib-note {
  font-size: var(--fs-klein); color: var(--ink-3);
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.wir-info-box--cta p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }
.wir-info-box--cta .tc-link { color: var(--blau); margin-top: 16px; display: inline-flex; }

/* Lehrkräfte quotes & stats */
.lk-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px;
}
.lk-quote {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--blau);
  border-radius: var(--radius); padding: 28px 28px 24px;
}
.lk-quote p {
  font-family: var(--font-serif); font-size: var(--fs-kompakt);
  font-style: italic; color: var(--ink-2); line-height: 1.75;
}
.lk-stats {
  display: flex; align-items: center; gap: 48px;
  margin-top: 48px; padding: 36px 40px;
  background: var(--blau-lt); border-radius: var(--radius);
}
.lk-stat { text-align: center; flex: 1; }
.lk-num {
  font-family: var(--font-serif); font-size: var(--fs-zier); font-weight: 700;
  color: var(--blau); line-height: 1;
}
.lk-label { font-size: var(--fs-kompakt); color: var(--ink-2); margin-top: 8px; line-height: 1.4; }
.lk-divider {
  width: 1px; height: 60px; background: rgba(30,50,112,.2); flex-shrink: 0;
}
@media (max-width: 768px) {
  .lk-quotes { grid-template-columns: 1fr; }
  .lk-stats { flex-direction: column; gap: 24px; }
  .lk-divider { width: 60px; height: 1px; }
}

/* Beratung cards */
.wir-beratung-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px;
}
.wib-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--white);
}
.wibc-head {
  padding: 24px 28px; display: flex; align-items: center; gap: 14px;
}
.wibc-head h3 {
  font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--white);
}
.wibc-head .tc-icon {
  width: 40px; height: 40px; background: rgba(255,255,255,.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.wibc-head .tc-icon svg { width: 20px; height: 20px; stroke: var(--white); }
.wibc-head--blau { background: var(--blau); }
.wibc-head--gruen { background: var(--gruen); }
.wibc-head--ocker { background: var(--ocker); }
.wibc-body {
  padding: 24px 28px;
}
.wibc-body p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }
.wibc-contact {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.8;
}
.wibc-contact a { color: var(--blau); word-break: break-all; }
.wir-links { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; }
.wir-extlink {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-kompakt); color: var(--blau); padding: 14px 18px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, background .15s;
}
.wir-extlink:hover { background: var(--blau-lt); border-color: var(--blau); }
.wir-extlink svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--blau); }
.wibc-downloads { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wibc-dl {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-klein); font-weight: 500; color: var(--ocker);
  padding: 8px 10px; background: var(--ocker-lt);
  border-radius: var(--radius); transition: background .15s;
}
.wibc-dl:hover { background: #f0e4b0; }
/* Dieselbe Schaltfläche auf dunkler Fläche (Elternbeirat, Förderverein) */
.wibc-dl--hell { background: rgba(255,255,255,.15); color: var(--white); }
.wibc-dl svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--ocker); }
.wibc-note {
  margin-top: 8px; font-size: var(--fs-klein); color: var(--ink-3);
  padding: 8px 10px; background: var(--ocker-lt);
  border-radius: var(--radius); line-height: 1.6;
}
.wibc-note a { color: var(--ocker); word-break: break-all; }

/* Stat cards for Lehrkräfte */
.sl-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin: 40px 0 0;
}
.sl-card {
  border-radius: var(--radius); padding: 28px 24px; text-align: center;
}
.sl-card--blau { background: var(--blau-lt); }
.sl-card--ocker { background: var(--ocker-lt); }
.sl-card--gruen { background: var(--gruen-lt); }
.sl-card--rot { background: var(--rot-lt); }
.sl-num {
  font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700;
  color: var(--ink); line-height: 1;
}
.sl-card--blau .sl-num { color: var(--blau); }
.sl-card--ocker .sl-num { color: var(--ocker); }
.sl-card--gruen .sl-num { color: var(--gruen); }
.sl-card--rot .sl-num { color: var(--rot); }
.sl-label { font-size: var(--fs-klein); color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* ===== SMV ===== */
.smv-aufgaben {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 48px;
}
.smv-aufgabe {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
}
.smva-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blau-lt); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.smva-icon svg { width: 20px; height: 20px; stroke: var(--blau); }
.smv-aufgabe h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: 8px; }
.smv-aufgabe p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.7; }

.smv-team {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 24px; margin-top: 32px;
  background: var(--blau); border-radius: var(--radius);
  padding: 36px 40px;
}
.smvt-label {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}
.smvt-persons { display: flex; flex-direction: column; gap: 10px; }
.smvt-person {
  display: flex; align-items: baseline; gap: 8px;
}
.smvt-name { font-size: var(--fs-kompakt); color: var(--white); font-weight: 500; }
.smvt-klasse {
  font-size: var(--fs-marke); color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.15); border-radius: var(--radius);
  padding: 1px 6px;
}
/* Mitgliederliste des Elternbeirats: zweispaltig, Rolle als schlichte Zeile
   statt als Pille — dafür gab es bisher 31 Anweisungen im Text. */
.smvt-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.smvt-eintrag { display: flex; align-items: center; gap: 8px; }
.smvt-eintrag .smvt-name { font-size: var(--fs-klein); }
.smvt-rolle { font-size: var(--fs-marke); color: rgba(255,255,255,.7); line-height: 1.4; }
/* Datenblock auf dunkler Fläche (Treffen, Spendenkonto) und der Abstand,
   den ein solcher Block zur Kleinzeile darüber braucht. */
.smvt-daten { font-size: var(--fs-klein); color: rgba(255,255,255,.85); line-height: 2; }
.smvt-block { margin-top: 32px; }
@media (max-width: 760px) { .smvt-liste { grid-template-columns: 1fr; } }

.smvt-person--lead .smvt-name { font-size: var(--fs-text); font-family: var(--font-serif); }
.smvt-person--lead .smvt-klasse { font-size: var(--fs-klein); }
.eb-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 2px solid rgba(255,255,255,.3); flex-shrink: 0; }
.eb-foto-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; }

.smv-treffen {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px; padding: 20px 28px;
  background: var(--blau-lt); border-radius: var(--radius);
  font-size: var(--fs-kompakt); color: var(--ink-2);
}
.smv-treffen svg { width: 20px; height: 20px; stroke: var(--blau); flex-shrink: 0; }

@media (max-width: 1024px) {
  .smv-aufgaben { grid-template-columns: 1fr 1fr; }
  .smv-team { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 640px) {
  .smv-aufgaben { grid-template-columns: 1fr; }
}

/* ===== Grünes Theme (Erleben) – färbt die wiederverwendeten Bausteine grün ===== */
.theme-gruen .smva-icon { background: var(--gruen-lt); }
.theme-gruen .smva-icon svg { stroke: var(--gruen); }
.theme-gruen .smv-treffen { background: var(--gruen-lt); }
.theme-gruen .smv-treffen svg { stroke: var(--gruen); }
.theme-gruen .smv-team { background: var(--gruen); }
.theme-gruen .lk-quote { border-top-color: var(--gruen); }
.theme-gruen .lk-stats { background: var(--gruen-lt); }
.theme-gruen .lk-num { color: var(--gruen); }
.theme-gruen .lk-divider { background: rgba(14,114,114,.2); }
.theme-gruen .wp-icon { background: var(--gruen-lt); }
.theme-gruen .wp-icon svg { stroke: var(--gruen); }
.theme-gruen .wp-tasks-list li::before { color: var(--gruen); }
.theme-gruen .wib-address a { color: var(--gruen); }
.theme-gruen .wib-list li::before { color: var(--gruen); }
.theme-gruen .wir-extlink { color: var(--gruen); }
.theme-gruen .wir-extlink svg { stroke: var(--gruen); }
.theme-gruen .wir-extlink:hover { background: var(--gruen-lt); border-color: var(--gruen); }

/* Responsive subpages */
@media (max-width: 1024px) {
  .page-hero { padding: 56px 24px 72px; }
  .topic-grid { grid-template-columns: 1fr 1fr; }
  .drop { display: none; } /* hide desktop dropdowns on mobile */
  .wir-beratung-grid { grid-template-columns: 1fr 1fr; }
  .wib-row { grid-template-columns: 1fr; gap: 32px; }
  .sl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .topic-grid { grid-template-columns: 1fr; }
  .wir-beratung-grid { grid-template-columns: 1fr; }
  .sl-grid { grid-template-columns: 1fr 1fr; }
  .wir-persons { grid-template-columns: 1fr; }
}

/* Mobile nav accordion */
@media (max-width: 1024px) {
  .nav-links.open .drop {
    display: block; position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    border-left: 3px solid var(--border); padding: 4px 0 4px 12px;
    margin: 4px 0 8px; min-width: unset;
  }
  .nav-links.open .has-drop.drop-open .drop { display: block; }
  .nav-links.open .has-drop:not(.drop-open) .drop { display: none; }
  .drop li a { padding: 10px 10px; font-size: var(--fs-klein); }

  /* Name und Aufklappen nebeneinander: der Name führt auf die Kapitelseite,
     der Knopf öffnet die Abschnitte. Die Trennlinie sitzt an der Zeile,
     damit sie über die ganze Breite läuft. */
  .nav-links.open > li.has-drop {
    display: grid; grid-template-columns: 1fr 44px;
    align-items: center; column-gap: 4px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open > li.has-drop > a { border-bottom: 0; }
  .nav-links.open > li.has-drop > .drop-schalter {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s ease, color .22s ease;
  }
  .nav-links.open > li.has-drop.drop-open > .drop-schalter {
    transform: rotate(180deg); color: var(--blau);
  }
  .nav-links.open > li.has-drop > .drop { grid-column: 1 / -1; }
  /* Der 8-px-Pfeil des Desktops hat im Handy-Menü keine Aufgabe mehr. */
  .nav-links.open .has-drop > a::after { content: none; }
}

/* Masthead „Der Maulwurf digital" — Logo auf weißer Karte im grünen Hero */
.zeitung-mast {
  display: inline-block; background: #fff; border-radius: var(--radius);
  padding: 22px 30px; margin-bottom: 18px; max-width: min(520px, 100%);
  box-shadow: var(--schatten-flach); line-height: 0;
}
.zeitung-mast img { width: 100%; height: auto; display: block; }

/* Temporärer Hinweis „Seite im Aufbau" (Startseite) — bei Bedarf wieder entfernen */
.aufbau-hinweis {
  background: var(--ocker-lt); border-left: 3px solid var(--ocker);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 24px;
  font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.6; max-width: 460px;
}
.aufbau-hinweis strong { display: block; color: var(--ink); margin-bottom: 2px; }
.aufbau-hinweis a { color: var(--blau); font-weight: 600; }

/* ===== Sehr breite Monitore (Ultrawide ≥ 1800px): Inhalt mittig begrenzen,
   damit Hero/Bildstreifen nicht zu flachen Streifen werden ===== */
@media (min-width: 1800px) {
  main { max-width: 2560px; margin-inline: auto; }
  #main-nav,
  .nav-utility { padding-inline: max(48px, calc((100% - 2560px) / 2)); }
}

/* ===== Erleben – bild-getriebene, bunte Sektionen ===== */
.exp-section { padding: var(--takt) var(--takt-seite); }
.exp-section--alt { background: var(--mist); }

/* Feature: Bild + Text nebeneinander, abwechselnd */
.exp-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.exp-feature--rev .exp-media { order: 2; }

.exp-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--mist);
}
.exp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Breites Gruppenfoto (z. B. Mediatoren): gestapelt + natürliches Breitformat, kein Gesichts-Anschnitt */
.exp-feature--stack { grid-template-columns: 1fr; gap: 28px; }
.exp-feature--stack .exp-media { aspect-ratio: 845 / 321; }
.exp-feature--stack .exp-body { max-width: 760px; }
.exp-media--ph { display: flex; align-items: center; justify-content: center; }
.exp-media--logo { background: #fff; display: flex; align-items: center; justify-content: center; padding: 26px; }
.exp-media--logo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.exp-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; }
.exp-ph svg { width: 38px; height: 38px; opacity: .92; }
.exp-ph span { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; opacity: .92; }

.exp-eyebrow {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.exp-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; display: inline-block; }
/* Der Titel des Bild-Text-Auftakts: h2, wenn er den Abschnitt eröffnet,
   h3 als Zwischenkopf weiter unten — dieselbe Optik. */
.exp-body h3 { font-family: var(--font-serif); font-size: var(--fs-aussage); line-height: 1.15; color: var(--ink); margin: 14px 0; }
.exp-body p { font-size: var(--fs-text); color: var(--ink-2); line-height: 1.75; font-weight: 400; }
.exp-link { margin-top: 20px; font-size: var(--fs-klein); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap .15s; }
.exp-feature:hover .exp-link { gap: 9px; }

/* Akzentfarben pro Thema */
.exp--blau  .exp-eyebrow, .exp--blau  .exp-link { color: var(--blau); }
.exp--gruen .exp-eyebrow, .exp--gruen .exp-link { color: var(--gruen); }
.exp--ocker .exp-eyebrow, .exp--ocker .exp-link { color: var(--ocker); }
.exp--rot   .exp-eyebrow, .exp--rot   .exp-link { color: var(--rot); }
.exp--blau  .exp-media--ph { background: linear-gradient(135deg, #2a4699, var(--blau)); }
.exp--gruen .exp-media--ph { background: linear-gradient(135deg, #129090, var(--gruen)); }
.exp--ocker .exp-media--ph { background: linear-gradient(135deg, #e0ad4e, var(--ocker)); }
.exp--rot   .exp-media--ph { background: linear-gradient(135deg, #e0468f, var(--rot)); }

/* Kultur & Bühne – Foto-Mosaik */
.exp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; margin-top: 40px; }
@media (min-width: 721px) { .exp-gallery--tall { grid-auto-rows: 240px; } }
.exp-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--mist); }
.exp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.exp-gallery figure:hover img { transform: scale(1.06); }
.exp-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 11px; font-size: var(--fs-klein); font-weight: 500; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.g-big  { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
/* ── Bildreihen nach Seitenverhältnis (13.09.2026) ─────────────────────
   Löst das Mosaik ab. Es zwang jedes Bild in eine feste Kachel: der Flur
   (1:2 hoch) und der breite Werther (2,2:1) mussten dieselbe Kachel füllen,
   und acht Bilder ließen zwangsläufig Lücken. Hier bekommt jedes Bild
   stattdessen die Breite seines eigenen Formats: flex-grow trägt das
   Seitenverhältnis, aspect-ratio gibt ihm dieselbe Höhe wie seinen
   Nachbarn. Jede Reihe geht dadurch exakt auf — ohne Lücke und ohne dass
   ein Motiv gegen seine Richtung beschnitten wird. */
.bildreihen { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.br-reihe { display: flex; gap: 14px; }
.br-reihe figure {
  flex: var(--v) 1 0; aspect-ratio: var(--v); margin: 0;
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--mist);
}
.br-reihe img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.br-reihe figure:hover img { transform: scale(1.06); }
.br-reihe figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 11px; font-size: var(--fs-klein); font-weight: 500; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
/* Auf schmalen Schirmen bricht jede Reihe in eine Spalte um; die Bilder
   behalten ihr Format, nur die Höhe richtet sich dann nach der Breite. */
@media (max-width: 720px) {
  .br-reihe { flex-direction: column; }
  .br-reihe figure { flex: none; width: 100%; }
}

/* Platzhalter-Kacheln im Mosaik, bis echte Fotos kommen */
.exp-gallery figure.gph { background: linear-gradient(135deg, #e0468f, var(--rot)); }
.exp-gallery figure.gph figcaption { background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }

/* Fließtext, Listen & Linklisten in der Designlinie (z. B. Förderklassen) */
.topic-text { max-width: 820px; margin: 28px 0 0; }
.topic-text p { font-size: var(--fs-text); color: var(--ink-2); line-height: 1.75; font-weight: 400; margin-bottom: 16px; }
.topic-text p:last-child { margin-bottom: 0; }
.topic-text strong { font-weight: 600; color: var(--ink); }
.topic-text em { font-style: italic; }
.topic-text a { color: var(--c, var(--blau)); text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color .15s; }
.topic-text a:hover { border-bottom-color: currentColor; }

.topic-list { max-width: 820px; margin: 14px 0 0; padding-left: 0; list-style: none; }
.topic-list li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.75; font-weight: 400; }
.topic-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--blau)); }
.topic-list strong { font-weight: 600; color: var(--ink); }
.topic-list a { color: var(--c, var(--blau)); text-decoration: none; border-bottom: 1px solid var(--border); }
.topic-list a:hover { border-bottom-color: currentColor; }
.topic-list--num { counter-reset: tl; }
.topic-list--num li { padding-left: 38px; margin-bottom: 14px; }
.topic-list--num li::before {
  counter-increment: tl; content: counter(tl);
  left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c, var(--blau)); color: #fff;
  font-size: var(--fs-klein); font-weight: 600; line-height: 24px; text-align: center;
}

.link-list { max-width: 820px; margin: 16px 0 0; padding: 0; list-style: none; }
.link-list li { border-top: 1px solid var(--border); }
.link-list li:last-child { border-bottom: 1px solid var(--border); }
.link-list a { display: block; padding: 13px 4px; font-size: var(--fs-kompakt); font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .15s, padding .15s; }
.link-list a:hover { color: var(--c, var(--blau)); padding-left: 10px; }

/* Förderklassen – Lehrplan-Landkarte (Visualisierung aus dem Infoabend) */
.fk-mapwrap { margin-top: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.fk-map { display: grid; grid-template-columns: 112px repeat(6, minmax(82px, 1fr)); gap: 8px; min-width: 660px; }
.fk-h { display: flex; align-items: flex-end; justify-content: center; font-size: var(--fs-klein); font-weight: 700; color: var(--ink-3); padding-bottom: 6px; border-bottom: 3px solid var(--border); }
.fk-rl { display: flex; align-items: center; font-size: var(--fs-klein); font-weight: 600; color: var(--ink-2); padding-right: 6px; }
.fk-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: var(--radius); padding: 12px 10px; font-size: var(--fs-klein); font-weight: 600; color: #fff; line-height: 1.25; }
.fk-seg small { font-weight: 400; font-size: var(--fs-marke); opacity: .9; margin-top: 3px; }
.fk--blau { background: var(--blau); } .fk--gruen { background: var(--gruen); }
.fk--ocker { background: var(--ocker); } .fk--rot { background: var(--rot); }
.fk-seg.fk--soft { background: var(--blau-lt); color: var(--blau); font-weight: 600; }
.fk-seg.fk--soft small { opacity: .8; }
.fk-note { max-width: 820px; margin-top: 16px; font-size: var(--fs-klein); line-height: 1.7; color: var(--ink-3); }

/* Profilwahl-Verzweigung */
.fk-fork { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.fk-fork-lead { grid-column: 1 / -1; text-align: center; background: var(--blau); color: #fff; border-radius: var(--radius); padding: 16px 22px; font-weight: 600; font-size: var(--fs-kompakt); line-height: 1.45; }
.fk-branch { border: 1px solid var(--border); border-top: 3px solid var(--c, var(--blau)); border-radius: var(--radius); padding: 18px 20px; background: var(--white); }
.fk-branch h4 { font-size: var(--fs-kompakt); color: var(--ink-2); margin-bottom: 6px; }
.fk-branch p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.6; font-weight: 400; }
.fk-branch--blau { --c: var(--blau); } .fk-branch--gruen { --c: var(--gruen); } .fk-branch--ocker { --c: var(--ocker); }
@media (max-width: 720px) { .fk-fork { grid-template-columns: 1fr; } }

/* Ist mein Kind hochbegabt? – Kennzahlen, Merkmal-Chips, Underachiever-Hinweis */
.mk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 22px; max-width: 900px; }
.mk-col { padding-left: 20px; border-left: 3px solid var(--c, var(--blau)); }
.mk-col--blau { --c: var(--blau); } .mk-col--gruen { --c: var(--gruen); }
.mk-h { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.mk-col ul { list-style: none; padding: 0; margin: 0; }
.mk-col li { font-size: var(--fs-kompakt); color: var(--ink-2); font-weight: 400; line-height: 1.4; padding: 11px 0; border-bottom: 1px solid var(--border); }
.mk-col li:last-child { border-bottom: none; }
@media (max-width: 680px) { .mk-cols { grid-template-columns: 1fr; gap: 28px; } }
.mk-aside { max-width: 820px; margin-top: 28px; padding: 20px 24px; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--rot); border-radius: var(--radius); }
.mk-aside h4 { font-size: var(--fs-kompakt); color: var(--ink-2); margin-bottom: 8px; }
.mk-aside p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.7; font-weight: 400; }

/* Schule als Staat – farbiges Banner */
.exp-staat {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--blau), var(--rot) 68%, var(--ocker));
  color: #fff; padding: 72px 56px; text-align: center;
}
.exp-staat-emblem { width: 52px; height: 52px; margin: 0 auto 22px; opacity: .95; }
.exp-staat-emblem svg { width: 100%; height: 100%; stroke: #fff; }
.exp-staat h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 16px; }
.exp-staat p { max-width: 620px; margin: 0 auto; font-size: var(--fs-text); line-height: 1.8; color: rgba(255,255,255,.92); }
.exp-staat-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 28px;
  background: #fff; color: var(--blau); font-weight: 600; font-size: var(--fs-kompakt);
  padding: 12px 24px; border-radius: var(--pill); transition: transform .15s;
}
.exp-staat-cta:hover { transform: translateY(-2px); }

@media (max-width: 1024px) {
  .exp-feature { grid-template-columns: 1fr; gap: 24px; }
  .exp-feature--rev .exp-media { order: 0; }
  .exp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .g-big { grid-column: span 2; grid-row: span 1; }
  .exp-staat { padding: 56px 28px; }
  .exp-staat h2 { font-size: var(--fs-h2); }
}
@media (max-width: 560px) {
  .exp-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .g-big, .g-wide { grid-column: span 1; }
}

/* ===== Spritzig & gymnasial: nummernfreie Overview-Varianten ===== */
/* 1 — Editorial, zweispaltig, mit feinem Farb-Akzentstrich (Farbe rotiert) */
.ovx-cols { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 56px; }
.ovx-cols a { display: block; padding: 24px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.ovx-cols a:nth-child(4n+1) { --acc: var(--blau); }
.ovx-cols a:nth-child(4n+2) { --acc: var(--gruen); }
.ovx-cols a:nth-child(4n+3) { --acc: var(--ocker); }
.ovx-cols a:nth-child(4n+4) { --acc: var(--rot); }
.ovx-cols .ovx-rule { display: block; width: 28px; height: 3px; background: var(--acc); border-radius: 2px; transition: width .25s ease; }
.ovx-cols a:hover .ovx-rule { width: 52px; }
.ovx-cols h3 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 12px 0 5px; transition: color .15s; }
.ovx-cols a:hover h3 { color: var(--acc); }
.ovx-cols p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.65; }

/* 2 — Serifen-Liste mit animiertem Unterstrich */
.ovx-underline { margin-top: 32px; }
.ovx-underline a { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.ovu-title { font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--ink); position: relative; flex-shrink: 0; }
.ovu-title::after { content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0; background: var(--blau); transition: width .28s ease; }
.ovx-underline a:hover .ovu-title { color: var(--blau); }
.ovx-underline a:hover .ovu-title::after { width: 100%; }
.ovu-desc { font-size: var(--fs-klein); color: var(--ink-3); line-height: 1.6; text-align: right; max-width: 360px; }

/* 3 — Soft getönte Karten in der Hausfarben-Palette */
.ovx-soft { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ovx-soft a { border-radius: var(--radius); padding: 24px 26px; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.ovx-soft a:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.ovx-soft h3 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 6px; }
.ovx-soft p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.65; }
.ovx-soft a:nth-child(4n+1) { background: var(--blau-lt); }
.ovx-soft a:nth-child(4n+2) { background: var(--gruen-lt); }
.ovx-soft a:nth-child(4n+3) { background: var(--ocker-lt); }
.ovx-soft a:nth-child(4n+4) { background: var(--rot-lt); }

@media (max-width: 720px) {
  .ovx-cols { grid-template-columns: 1fr; }
  .ovx-soft { grid-template-columns: 1fr; }
  .ovu-title { font-size: var(--fs-h3); }
  .ovu-desc { display: none; }
}

/* Gruppierte Übersicht: Gruppenlabel über je einer ovx-cols-Liste */
.ovx-grouplabel { margin: 44px 0 4px; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--c, var(--blau)); display: flex; align-items: center; gap: 10px; }
.ovx-grouplabel::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.ovx-group .ovx-cols { margin-top: 10px; }

/* Gruppen als eigene Blöcke: getönt, nummeriert, ohne Farbcode */
.ovx-group {
  background: var(--mist); border-radius: var(--radius);
  padding: 30px 34px 22px; margin-top: 22px;
}
.ovx-group:first-of-type { margin-top: 34px; }
.ovx-grouphead { margin: 0; padding: 0; border-top: none; }
.ovx-grouptitle { font-family: var(--font-serif); font-size: var(--fs-aussage); line-height: 1.25; color: var(--ink); margin: 0; }
.ovx-grouplead { margin: 8px 0 0; font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); max-width: 640px; }
.ovx-group .ovx-cols { margin-top: 14px; }
.ovx-group .ovx-cols a { border-bottom-color: var(--border); }
.ovx-group .ovx-cols a:last-child { border-bottom: none; }
.ovx-cols--breit { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .ovx-group { padding: 24px 22px 16px; }
  .ovx-grouptitle { font-size: var(--fs-h3); }
}

/* ===== Design-Linie: ruhige Abschnitts-Köpfe + Icon-Reduktion ===== */
.acc--blau  { --c: var(--blau); }
.acc--gruen { --c: var(--gruen); }
.acc--ocker { --c: var(--ocker); }
.acc--rot   { --c: var(--rot); }

/* Abschnitts-Kopf mit feinem Akzentstrich, Kicker in Akzentfarbe */
.linie .topic-intro { position: relative; padding-top: 24px; }
.linie .topic-intro::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--c, var(--blau));
}
.linie .section-label { color: var(--c, var(--blau)); }

/* Aufgaben-/SMV-Karten: Icon-Kreis raus, feiner Akzentstrich rein */
.linie .smva-icon { display: none; }
.linie .smv-aufgabe { position: relative; padding-top: 30px; }
.linie .smv-aufgabe::before {
  content: ''; position: absolute; top: 24px; left: 24px;
  width: 26px; height: 3px; border-radius: 2px; background: var(--c, var(--blau));
}

/* Beratungs-Karten: farbige Köpfe beruhigen (kein Icon, keine Vollfläche) */
.linie .wibc-head { background: transparent !important; padding: 22px 28px 0; }
.linie .wibc-head h3 { color: var(--ink) !important; }
.linie .wibc-head .tc-icon { display: none; }
.linie .wib-card { border: 1px solid var(--border); border-top: 3px solid var(--c, var(--blau)); }
.linie .wib-card:has(.wibc-head--blau)  { border-top-color: var(--blau); }
.linie .wib-card:has(.wibc-head--gruen) { border-top-color: var(--gruen); }
.linie .wib-card:has(.wibc-head--ocker) { border-top-color: var(--ocker); }

/* Lehrkräfte-Zitate/Zahlen auf die Abschnittsfarbe abstimmen */
.linie .lk-quote { border-top-color: var(--c, var(--blau)); }
.linie .lk-stats { background: var(--mist); }
.linie .lk-num { color: var(--c, var(--blau)); }

/* Personen-Icons dezenter (Umriss statt gefüllter Kreis) */
.linie .wp-icon { background: transparent; border: 1px solid var(--border); }
.linie .wp-icon svg { stroke: var(--c, var(--blau)); opacity: .75; }

/* Lesbarkeit: kleine Texte etwas größer & luftiger */
.linie .ovx-cols p { font-size: var(--fs-kompakt); }
.linie .ovx-cols h3 { font-size: var(--fs-h3); }
.linie .section-sub { font-size: var(--fs-text); }
.linie .smv-aufgabe p { font-size: var(--fs-kompakt); line-height: 1.75; }
.linie .smv-aufgabe h3 { font-size: var(--fs-h3); }
.linie .wibc-body p { font-size: var(--fs-kompakt); }
.linie .wibc-contact { font-size: var(--fs-kompakt); }
.linie .wib-address { font-size: var(--fs-kompakt); }
.linie .wp-name { font-size: var(--fs-kompakt); }
.linie .wp-role { font-size: var(--fs-klein); }
.linie .wp-tasks-list li { font-size: var(--fs-kompakt); }
.linie .lk-quote p { font-size: var(--fs-text); }

/* ===== Baukasten für Rubrik-Inhalte (eigener Charakter, gleiche Optik) ===== */
/* Sub-Überschrift innerhalb eines Abschnitts */
.exp-subhead { margin: 64px 0 24px; }
.exp-subhead h3 { font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--ink); margin-top: 10px; line-height: 1.15; }

/* Grundsätze – kurze Statements ohne Icons */
/* Folgt ein Baustein direkt auf einen anderen, fehlt der Abstand, den sonst
   die Zwischenüberschrift mitbringt. 44 px ist dafür das Maß.
   Hier stehen alle Paare beisammen, damit es eine Stelle dafür gibt. */
.exp-feature + .principles,
.exp-feature + .wo-tafel,
.exp-feature + .prog-flow,
.exp-feature + .prog-timeline,
.exp-feature + .os-box,
.topic-text + .principles,
.topic-text + .os-box,
.topic-text + .prog-flow,
.topic-text + .prog-timeline,
.fk-note + .principles,
.mk-aside + .pw-rows { margin-top: 44px; }
.uo-statement + .principles { margin-top: 50px; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.principle .pr-rule { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--c, var(--blau)); margin-bottom: 14px; }
.principle h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 7px; }
.principle p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.7; }
@media (min-width: 761px) { .principles--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

/* Große Fassung — für ein Herzstück, das Gewicht tragen soll.
   Die Farbe je Karte kommt über die vorhandenen acc--Klassen. */
.principles--gross { gap: 40px; }
.principles--gross .pr-rule { width: 100%; margin-bottom: 20px; }
.principles--gross .principle h4 { font-size: var(--fs-aussage); line-height: 1.1; margin-bottom: 14px; color: var(--c, var(--ink)); }

/* Einleitender Hinweis-/Lauftext unter einem exp-subhead */
.exp-note { max-width: 760px; font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); margin: 0 0 26px; }

/* Kurze Ein-/Ausblicke je Land unter der Galerie (farbige Strichmarke) */

/* Bebilderte Fahrten-Liste (Fotos als Teil der Liste, Zickzack) */
.trip-list { margin-top: 10px; border-top: 1px solid var(--border); }
.trip-row { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); }
.trip-row--rev { grid-template-columns: 1fr 280px; }
.trip-row--rev .tr-media { order: 2; }
.tr-media { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.tr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.trip-row:hover .tr-media img { transform: scale(1.04); }
.tr-stage { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--c, var(--blau)); }
.tr-body h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 3px 0 6px; }
.tr-body p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.65; max-width: 520px; }
.trip-row--link { grid-template-columns: 1fr; text-decoration: none; color: inherit; }
.trip-row--link .tr-arrow { display: inline-block; margin-left: 4px; color: var(--c, var(--blau)); transition: transform .3s ease; }
.trip-row--link:hover .tr-arrow { transform: translateX(5px); }
.trip-list .trip-row:nth-child(1) { --c: var(--gruen); }
.trip-list .trip-row:nth-child(2) { --c: var(--ocker); }
.trip-list .trip-row:nth-child(3) { --c: var(--blau); }
.trip-list .trip-row:nth-child(4) { --c: var(--rot); }
.trip-list .trip-row:nth-child(5) { --c: var(--gruen); }
.trip-list .trip-row:nth-child(6) { --c: var(--ocker); }
.trip-list .trip-row:nth-child(7) { --c: var(--blau); }
@media (max-width: 760px) {
  .trip-row, .trip-row--rev { grid-template-columns: 1fr; gap: 14px; }
  .trip-row--rev .tr-media { order: 0; }
}

/* Kurzer O-Ton-/Pull-Quote unter einer Galerie */
.intl-pull { max-width: 720px; margin: 30px auto 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.55; color: var(--ink); }
.intl-pull span { display: block; margin-top: 10px; font-family: var(--font-sans); font-style: normal; font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0; color: var(--blau); }

/* Internationales: kompaktes Bildpaar + helle Info-Karte (hebt Teil 2 ab) */
.intl-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 600px; margin: 0 auto 44px; }
.intl-shots figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--mist); }
.intl-shots img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.intl-shots figure:hover img { transform: scale(1.05); }
.intl-shots figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-size: var(--fs-klein); font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.62), transparent); }

.intl-aside { margin-top: 54px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blau); border-radius: var(--radius); padding: 34px 38px; }
.intl-aside > .exp-eyebrow { color: var(--blau); }
.intl-aside h3 { font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--ink); margin: 7px 0 12px; }
.intl-aside > p { max-width: 720px; font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); margin: 0 0 24px; }
.intl-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 26px; }
.intl-fact h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 6px; }
.intl-fact p { font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); }
/* Schülerstimmen von Auslandsrückkehrern (leicht, Masonry über Spaltenfluss) */
.intl-voices { columns: 2; column-gap: 44px; margin-top: 26px; }
.voice-card { break-inside: avoid; border-left: 3px solid var(--vc, var(--blau)); background: color-mix(in srgb, var(--vc, var(--blau)) 7%, #fff); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 22px 14px 18px; margin: 0 0 22px; }
.voice-card p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); margin: 0 0 9px; }
.voice-card cite { font-style: normal; font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0; color: var(--vc, var(--blau)); }
/* Spalte 1 (Karten 1–4) und Spalte 2 (5–8) versetzt, damit keine Farbe neben sich selbst steht */
.voice-card:nth-child(1) { --vc: var(--blau); }
.voice-card:nth-child(2) { --vc: var(--ocker); }
.voice-card:nth-child(3) { --vc: var(--gruen); }
.voice-card:nth-child(4) { --vc: var(--rot); }
.voice-card:nth-child(5) { --vc: var(--gruen); }
.voice-card:nth-child(6) { --vc: var(--rot); }
.voice-card:nth-child(7) { --vc: var(--blau); }
.voice-card:nth-child(8) { --vc: var(--ocker); }

@media (max-width: 760px) {
  .intl-shots { max-width: 380px; }
  .intl-facts { grid-template-columns: 1fr; gap: 18px; }
  .intl-aside { padding: 26px 22px; }
  .intl-voices { grid-template-columns: 1fr; }
}

/* Programm als Zeitleiste (z. B. Fahrtenprogramm) */
.prog-timeline { border-top: 1px solid var(--border); }
.prog-item { display: grid; grid-template-columns: 130px 1fr; gap: 28px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--border); }
.prog-stage { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h3); color: var(--c, var(--blau)); }
.prog-body h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 5px; }
.prog-body p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.65; }
.prog-body h4 a { color: inherit; text-decoration: none; }
.prog-body h4 a:hover { color: var(--c, var(--blau)); }
.prog-pfeil { display: inline-block; margin-left: 4px; color: var(--c, var(--blau)); transition: transform .3s ease; }
.prog-body h4 a:hover .prog-pfeil { transform: translateX(5px); }

/* Schülerstimme – sparsam einsetzen */
.pquote { max-width: 760px; margin: 60px auto 8px; text-align: center; }
.pquote .pq-mark { display: block; font-family: var(--font-serif); font-size: var(--fs-zier); line-height: 1; color: var(--c, var(--blau)); margin-bottom: 6px; }
.pquote p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-aussage); line-height: 1.5; color: var(--ink); }
.pquote cite { display: block; margin-top: 18px; font-style: normal; font-size: var(--fs-klein); letter-spacing: 0; color: var(--ink-3); }

@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; gap: 22px; }
  .principles--gross { gap: 26px; }
  .principles--gross .principle h4 { font-size: var(--fs-h2); }
  .exp-subhead h3, .exp-subhead h2 { font-size: var(--fs-h3); }
  .pquote p { font-size: var(--fs-h3); }
}
@media (max-width: 600px) {
  .prog-item { grid-template-columns: 1fr; gap: 4px; }
}

/* Konditionen-/Info-Tabelle in der Designlinie */
.exp-table { width: 100%; max-width: 620px; border-collapse: collapse; margin: 8px 0 0; }
.exp-table caption { text-align: left; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--c, var(--blau)); padding-bottom: 12px; }
.exp-table th, .exp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.exp-table thead th { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); }
.exp-table tbody th { font-family: var(--font-serif); font-size: var(--fs-text); font-weight: 600; color: var(--ink-2); }
.exp-table tbody td { font-size: var(--fs-kompakt); color: var(--ink-2); font-weight: 400; }
.exp-table .et-num { text-align: right; font-variant-numeric: tabular-nums; }
.exp-table tbody tr:last-child th, .exp-table tbody tr:last-child td { border-bottom: none; }

/* Leitsatz / Spruch – getöntes Band, leichter als exp-staat */
.exp-motto { max-width: 820px; margin: 48px 0 0; padding: 30px 38px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--c, var(--blau)); }
.exp-motto p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.5; color: var(--ink); }
.exp-motto cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--fs-klein); letter-spacing: 0; color: var(--ink-3); }

/* Drei Karten nebeneinander wie an eine Wand geheftet — jede anders geneigt,
   jede in der Farbe ihres Bereichs. */
.stimmen-wand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 52px 0 46px; align-items: start; }
.stimmen-wand .exp-motto--stimme { max-width: none; margin: 0; }
.stimmen-wand .exp-motto--stimme:nth-child(1) { transform: rotate(-1.4deg); }
.stimmen-wand .exp-motto--stimme:nth-child(2) { transform: rotate(.8deg); margin-top: 16px; }
.stimmen-wand .exp-motto--stimme:nth-child(3) { transform: rotate(-.6deg); margin-top: 5px; }
.stimmen-wand .exp-motto--stimme p { font-size: var(--fs-text); }
.stimme--ocker { --c: var(--ocker); }
.stimme--gruen { --c: var(--gruen); }
.stimme--rot   { --c: var(--rot); }
.stimme--blau  { --c: var(--blau); }
@media (max-width: 860px) {
  .stimmen-wand { grid-template-columns: 1fr; gap: 22px; }
  .stimmen-wand .exp-motto--stimme { margin-top: 0 !important; }
}

/* Die Stimme als Karte: wie an die Pinnwand geheftet. Weisses Blatt,
   Klebestreifen in der Abschnittsfarbe, leicht aus der Achse. Das Motiv
   kennt die Seite schon — Klassenbaum, Plakate, Klebepunkte. */
.exp-motto--stimme {
  border: none; background: none; padding: 0;
  max-width: 430px; margin: 52px 0 46px; position: relative;
  transform: rotate(-1.2deg);
}
.exp-motto--stimme > * { position: relative; }
.exp-motto--stimme {
  background: #fff; padding: 28px 30px 24px; border-radius: 2px;
  box-shadow: var(--schatten-flach);
}
.exp-motto--stimme::before {
  content: ''; position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%) rotate(1.4deg);
  width: 64px; height: 18px; border-radius: 2px;
  background: color-mix(in srgb, var(--c, var(--rot)) 34%, transparent);
}
.exp-motto--stimme p {
  font-family: var(--font-serif); font-style: normal;
  font-size: var(--fs-h3); line-height: 1.5; color: var(--ink); margin: 0;
}
.exp-motto--stimme cite {
  display: block; margin-top: 14px; 
  font-size: var(--fs-marke); letter-spacing: 0; color: var(--c, var(--rot));
  font-style: normal;
}
/* Zwei Karten nacheinander haengen andersherum. */
.exp-motto--stimme + .exp-motto--stimme { transform: rotate(1deg); }
.exp-motto--stimme + .exp-motto--stimme::before { transform: translateX(-50%) rotate(-1.2deg); }
@media (max-width: 760px) {
  .exp-motto--stimme { max-width: none; padding: 24px 22px 20px; transform: rotate(-.8deg); }
  .exp-motto--stimme p { font-size: var(--fs-text); }
}

/* Luft vor einem Zitat, das direkt auf einen Textblock folgt. */
.topic-text + .pquote, .principles + .pquote, .prog-flow + .pquote,
.chips + .pquote, .exp-feature + .pquote { margin-top: 54px; }

@media (max-width: 600px) {
  .exp-table th, .exp-table td { padding: 11px 12px; }
  .exp-motto { padding: 24px 22px; }
  .exp-motto p { font-size: var(--fs-text); }
}

/* Kooperationen – Logo-Wand */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 8px; }
.logo-tile {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
  color: var(--ink-3); font-size: var(--fs-klein); letter-spacing: 0; text-align: center; padding: 16px;
  transition: border-color .15s, box-shadow .15s;
}
a.logo-tile:hover { border-color: var(--c, var(--blau)); box-shadow: var(--schatten-hoch); }
.logo-tile img { max-width: 100%; max-height: 60px; object-fit: contain; }
.logo-note { font-size: var(--fs-klein); color: var(--ink-3); margin-top: 18px; }

/* Schülerzeitung – Beitrags-Kacheln (Blog) */
.zeitung-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.zeitung-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
  text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s;
}
.zeitung-card:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.zc-media {
  position: relative; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(135deg, #129090, var(--gruen)); color: #fff; padding: 12px 14px;
}
.zc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zc-media span { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; opacity: .9; }
.zc-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.zc-date { font-size: var(--fs-klein); font-weight: 600; color: var(--c, var(--gruen)); }
.zc-body h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); margin: 6px 0 8px; }
.zc-body p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.6; flex: 1; }
.zc-more { margin-top: 14px; font-size: var(--fs-klein); font-weight: 600; color: var(--gruen); }
@media (max-width: 900px) { .zeitung-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .zeitung-grid { grid-template-columns: 1fr; } }

/* Fußzeile: Kontaktspalte & Rechtslinks */
.footer-contact p { font-size: var(--fs-klein); line-height: 1.7; color: rgba(255,255,255,.45); margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,.45); transition: color .2s; }
.footer-links a:hover { color: rgba(255,255,255,.85); }

/* Fächer-Übersicht (nach Gruppen geordnet) */
/* Rückweg am Fuß einer Fachseite — die Farbe kommt vom Akzent der Seite */
.zurueck { margin-top: 40px; }
.zurueck a { font-size: var(--fs-klein); font-weight: 600; color: var(--c, var(--blau)); }

/* Fach-Detailseite: übernommener Artikel-Inhalt */
.fach-article { max-width: 820px; margin-top: 8px; }
.fach-article h2, .fach-article h3 { font-family: var(--font-serif); color: var(--ink); line-height: 1.2; margin: 42px 0 14px; }
.fach-article h2 { font-size: var(--fs-h2); }
.fach-article h3 { font-size: var(--fs-h3); }
.fach-article p { font-size: var(--fs-text); line-height: 1.8; color: var(--ink-2); margin: 0 0 16px; }
.fach-article ul, .fach-article ol { margin: 0 0 18px; padding-left: 22px; }
.fach-article li { font-size: var(--fs-text); line-height: 1.7; color: var(--ink-2); margin-bottom: 6px; }
.fach-article a { color: var(--c, var(--blau)); text-decoration: underline; }
.fach-article strong, .fach-article b { color: var(--ink); }
.fach-figure { margin: 26px 0; }
.fach-figure img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; border-radius: var(--radius); }
.fach-figure figcaption { font-size: var(--fs-klein); color: var(--ink-3); margin-top: 8px; }
/* Mehrere Bilder hintereinander -> aufgeräumtes Raster */
.fach-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 28px 0; }
.fach-gallery .fach-figure { margin: 0; }
.fach-gallery .fach-figure img { max-height: none; aspect-ratio: 4 / 3; }
.fach-gallery .fach-figure figcaption { font-size: var(--fs-klein); }
.fach-article td, .fach-article th { border: 1px solid var(--border); padding: 8px 12px; text-align: left; color: var(--ink-2); vertical-align: top; }

/* ===== Schulprofil: Zwei Wege (Regel- vs. Förderklasse) ===== */
.wege-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 28px; }
.wege-tab { padding: 10px 22px; font-size: var(--fs-klein); font-weight: 500; background: var(--white); color: var(--ink-2); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: background .15s, color .15s; }
.wege-tab:last-child { border-right: none; }
.wege-tab.is-active { background: var(--blau); color: #fff; }

.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; align-items: start; }
.path-grid[data-view="regel"], .path-grid[data-view="foerder"] { grid-template-columns: 1fr; max-width: 720px; }
.path-grid[data-view="regel"] [data-path="foerder"], .path-grid[data-view="foerder"] [data-path="regel"] { display: none; }

.path-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.path-img { aspect-ratio: 16 / 9; min-height: 180px; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(135deg, #2a4699, var(--blau)); color: rgba(255,255,255,.9); }
.path-img .label { font-size: var(--fs-klein); }
.path-body { padding: 26px 26px 24px; display: flex; flex-direction: column; }
.path-tag { align-self: flex-start; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; padding: 4px 11px; border-radius: var(--pill); background: var(--blau-lt); color: var(--blau); margin-bottom: 14px; }
.path-title { font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--ink); margin-bottom: 10px; }
.path-sub { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.65; margin-bottom: 22px; }
/* Nach Bedarf verteilt statt in Drittel: „Klassen/Jahrgang" ist die
   längste Marke, „Pluskurse" die kürzeste. */
.path-stats { display: grid; grid-template-columns: 1.2fr 1fr .8fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.path-stat { padding: 10px 0; border-right: 1px solid var(--border); }
.path-stat:last-child { border-right: none; }
/* Enger gesperrt und eine Spur kleiner: die drei Marken müssen einzeilig
   bleiben, sonst kippt die Zahlenreihe auseinander. */
.path-stat-k { display: block; font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; }
.path-stat-v { font-size: var(--fs-kompakt); color: var(--ink-2); }
.path-tafel { margin-bottom: 22px; }
.path-tafel-label { font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.path-tafel-row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.path-tafel-row:first-of-type { border-top: none; }
.ptr-k { font-size: var(--fs-klein); font-weight: 600; color: var(--blau); }
.ptr-v { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.45; }
.path-hl { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 14px; }
.path-hl h4 { font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.path-hl p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.55; }
.path-quote { margin: 8px 0 0; padding: 16px 0 0 18px; border-left: 3px solid var(--blau); border-top: 1px solid var(--border); }
.path-quote p { font-family: var(--font-serif); font-size: var(--fs-text); font-style: italic; color: var(--ink-2); line-height: 1.4; }
.path-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); }

.path-card--dark { background: var(--blau); border-color: var(--blau); }
.path-card--dark .path-img { background: linear-gradient(135deg, #16224d, #0d1530); }
.path-card--dark .path-tag { background: rgba(255,255,255,.16); color: #fff; }
.path-card--dark .path-title, .path-card--dark .path-stat-v, .path-card--dark .path-hl h4, .path-card--dark .path-quote p { color: #fff; }
.path-card--dark .path-sub, .path-card--dark .path-hl p, .path-card--dark .ptr-v { color: rgba(255,255,255,.8); }
.path-card--dark .path-stats, .path-card--dark .path-stat, .path-card--dark .path-tafel-row, .path-card--dark .path-hl, .path-card--dark .path-quote { border-color: rgba(255,255,255,.18); }
.path-card--dark .path-stat-k, .path-card--dark .path-tafel-label, .path-card--dark .path-quote cite { color: rgba(255,255,255,.55); }
.path-card--dark .ptr-k { color: var(--ocker); }
.path-card--dark .path-quote { border-left-color: var(--ocker); }

.wege-shared { margin-top: 44px; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; background: var(--mist); }
.wege-shared .section-label { color: var(--blau); }
.wege-shared-grid { display: grid; grid-template-columns: 1.1fr 2fr; gap: 44px; align-items: start; margin-top: 14px; }
.wege-shared h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); margin-bottom: 12px; }
.wege-shared p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.6; }
.wege-share-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wege-share-item { border-top: 1px solid var(--border); padding-top: 14px; }
.wsi-k { font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.wsi-v { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.5; }

@media (max-width: 880px) {
  .path-grid, .path-grid[data-view="regel"], .path-grid[data-view="foerder"] { grid-template-columns: 1fr; max-width: none; }
  .wege-shared-grid { grid-template-columns: 1fr; gap: 24px; }
  .wege-share-items { grid-template-columns: 1fr; }
}

/* Gabelung im Stundentafel-Schaubild */
.fk-rl--oder { font-style: italic; color: var(--ink-3); text-transform: none; letter-spacing: 0; }

/* Präventionsthemen nach Jahrgangsstufe */
.praev-tabelle { margin-top: 18px; border-top: 1px solid var(--border); }
.pt-row { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pt-jg { font-size: var(--fs-kompakt); font-weight: 700; color: var(--blau); }
.pt-th { font-size: var(--fs-kompakt); line-height: 1.6; color: var(--ink-2); }
@media (max-width: 640px) { .pt-row { grid-template-columns: 1fr; gap: 3px; } }
/* Gleiche Tabelle, aber mit Fachnamen statt Jahrgangsstufen in der linken Spalte */
.praev-tabelle--felder .pt-row { grid-template-columns: 190px 1fr; }
.praev-tabelle--felder .pt-jg { color: var(--ocker); }
@media (max-width: 640px) { .praev-tabelle--felder .pt-row { grid-template-columns: 1fr; } }

/* Zielplakat einer Klasse als Beispiel */
.ziel-karte { margin-top: 24px; max-width: 620px; padding: 22px 26px; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gruen, #2f7d5d); border-radius: var(--radius); }
.zk-label { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.zk-ziel { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); margin: 0; }
.zk-sichtbar { margin: 10px 0 0; font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); }

/* Zwei Hochformat-Motive aus dem Klassenatelier */
.atelier-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; max-width: 720px; }
.atelier-galerie figure { margin: 0; }
.atelier-galerie img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); display: block; }
.atelier-galerie figcaption { margin-top: 8px; font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.5; }
@media (max-width: 720px) { .atelier-galerie { grid-template-columns: 1fr; max-width: 340px; } }
/* Einzelnes Querformat statt zweier Hochformate */
/* Plakate muessen ganz zu sehen sein — anders als Fotos vertragen sie
   keinen Zuschnitt. Gleiche Hoehe, damit das Paar ruhig steht. */
.atelier-galerie--plakate { max-width: 660px; gap: 26px; }
.atelier-galerie--plakate img { height: 340px; object-fit: contain; background: var(--mist); padding: 10px; }
@media (max-width: 720px) { .atelier-galerie--plakate img { height: 300px; } }
figure.atelier-galerie--solo { display: block; max-width: 820px; margin: 26px 0 0; }
.atelier-galerie--solo img { height: auto; aspect-ratio: 16 / 8; }

/* ===== Verweis auf die Aufnahmeseite ===== */
.aufnahme-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.aufnahme-cta p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.65; max-width: 640px; margin: 0; }
.btn-gross { display: inline-block; padding: 14px 28px; border-radius: var(--pill); background: var(--blau); color: #fff; font-size: var(--fs-kompakt); font-weight: 600; text-decoration: none; transition: background .15s; }
.btn-gross:hover { background: #1c2f6b; }

/* Anfahrt als zweite Zeile im Kontaktkasten */
.wib-row--anfahrt { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Zuständigkeiten beim Auslandsaufenthalt */
.intl-kontakt { margin-top: 18px; font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); }

/* ===== Aufnahmeverfahren: Termin als Karte ===== */
.termin-karte { margin-top: 20px; padding: 24px 28px 22px; border: 1px solid var(--border); border-left: 3px solid var(--blau); border-radius: var(--radius); background: var(--white); }
.tk-label { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.tk-datum { font-family: var(--font-serif); font-size: var(--fs-aussage); line-height: 1.2; color: var(--ink); }
.tk-ort { font-size: var(--fs-kompakt); color: var(--ink-2); margin-top: 6px; }
.termin-karte p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.65; margin: 16px 0 0; }
@media (max-width: 720px) { .termin-karte { padding: 20px 22px; } .tk-datum { font-size: var(--fs-h3); } }

/* ===== Aufnahmeverfahren: Frist hervorgehoben ===== */
.frist-hinweis { margin-top: 10px; padding: 14px 18px; border-left: 3px solid var(--rot, #b3123c); background: #fdf2f4; border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); }

/* ===== Förderklassen: STEP-Übersicht und leichteres Zitat ===== */
/* Das Zitat als Band: farbige Fläche, linksbündig, das Anführungszeichen
   groß im Hintergrund. Für Sätze, die den Abschnitt tragen sollen. */
.pquote--band {
  max-width: none; margin: 46px 0 6px; text-align: left; position: relative;
  background: color-mix(in srgb, var(--c, var(--ocker)) 9%, #fff);
  border-left: 3px solid var(--c, var(--ocker));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 30px 38px 26px 40px; overflow: hidden;
}
.pquote--band .pq-mark {
  position: absolute; right: 22px; top: -14px; font-size: var(--fs-zier);
  color: var(--c, var(--ocker)); opacity: .16; margin: 0; pointer-events: none;
}
.pquote--band p { font-size: var(--fs-h3); font-style: normal; line-height: 1.45; position: relative; }
.pquote--band cite { margin-top: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .pquote--band { padding: 24px 22px 20px 24px; }
  .pquote--band p { font-size: var(--fs-text); }
  .pquote--band .pq-mark { font-size: var(--fs-zier); right: 10px; }
}

/* Ein Hauch Farbe im Grund — so wird aus der Liste ein Farbfeld. */
.chips .chip[class*="chip--"] { background: color-mix(in srgb, var(--c) 7%, #fff); }

/* Die Einladung am Schluss ist die Pointe, keine Fußnote. */
.pk-einladung { margin-top: 30px; font-size: var(--fs-h3); line-height: 1.55; color: var(--ink); }
.pk-einladung strong { font-weight: 400; color: var(--ocker); }
@media (max-width: 760px) { .pk-einladung { font-size: var(--fs-text); margin-top: 24px; } }

.pquote--leicht { margin-top: -8px; }
.pquote--leicht p { font-size: var(--fs-h3); font-style: italic; color: var(--ink); }
.pquote--leicht .pq-mark { opacity: .45; }

.step-table { display: grid; grid-template-columns: 68px 1fr 1fr; gap: 1px; margin-top: 22px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.step-head { background: var(--mist); padding: 11px 16px; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); }
.step-jg { background: var(--white); padding: 14px 16px; font-size: var(--fs-kompakt); font-weight: 700; color: var(--blau); }
.step-c { background: var(--white); padding: 14px 16px; font-size: var(--fs-kompakt); line-height: 1.5; color: var(--ink-2); }
.step-c--leer { color: var(--ink-3); }
@media (max-width: 720px) {
  .step-table { grid-template-columns: 60px 1fr; }
  .step-head:nth-child(3) { display: none; }
  .step-jg { grid-row: span 2; display: flex; align-items: center; }
}

/* ===== Schulprofil: Zwei Wege, überarbeitete Fassung (Aug 2026) ===== */
/* Beide Karten gleichrangig — Unterschied nur über eine feine Akzentkante */
#schulprofil .path-grid { align-items: stretch; }
#schulprofil .path-card { border-top: 3px solid var(--blau); background: var(--white); }
/* Schmaler Streifen Kartenhintergrund, damit die Akzentkante nicht im Bild versinkt */
#schulprofil .path-img { margin-top: 5px; }
#schulprofil .path-img { padding: 0; }
#schulprofil .path-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#schulprofil .path-body { flex: 1; }
#schulprofil .path-quote { margin-top: auto; }
/* Beide Wege tragen Blau — eine Schule. Unterschieden wird über die
   Helligkeit, nicht über die Farbe: die Regelklasse steht in Weiß, die
   Förderklasse in einem hellen Blaugrau. Auf dem beigen Grund der Sektion
   waren die beiden Weißtöne von vorher ununterscheidbar. */
#schulprofil .path-card[data-path="foerder"] { border-top-color: var(--blau); background: var(--blau-lt); }
#schulprofil .path-card[data-path="foerder"] .path-img { background: linear-gradient(135deg, #16224d, var(--blau)); }
#schulprofil .path-card[data-path="foerder"] .path-tag { background: var(--blau-lt); color: var(--blau); }

/* Nebeneinander sollen die Zahlenzeilen beider Karten auf gleicher Höhe sitzen,
   auch wenn die Untertitel unterschiedlich lang sind. Platz für vier Zeilen. */
@media (min-width: 881px) {
  #schulprofil .path-sub { min-height: 6.6em; }
}

/* Aufnahme-Zeile unter der Tafel */
.pw-rows { margin-top: 4px; }
.pw-row { display: grid; grid-template-columns: 106px 1fr; gap: 14px; border-top: 1px solid var(--border); padding: 13px 0; }
.pw-row:last-child { padding-bottom: 0; }
.pw-k { font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--blau); padding-top: 3px; }
#schulprofil [data-path="foerder"] .pw-k { color: var(--blau); }
.pw-v { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.6; }

/* Die Jahrgangsstufen-Tafeln stehen unter dem Gemeinsam-Block, wieder nebeneinander */
/* Beide Karten hängen in denselben Zeilenlinien: acht Zeilen im Elterngrid
   (Marke, Zwischentitel, sechs Stufen), die jede Karte per subgrid erbt.
   Damit steht die 8. Klasse links auf derselben Höhe wie rechts, auch wenn
   der eine Text doppelt so lang ist wie der andere. */
.tafel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 36px;
  grid-template-rows: auto auto repeat(6, auto); }
.tafel-card { grid-row: span 8; display: grid; grid-template-rows: subgrid; row-gap: 0;
  border: 1px solid var(--border); border-top: 3px solid var(--blau); border-radius: var(--radius); background: var(--white); padding: 24px 26px 22px; }
/* Dieselbe Unterscheidung wie bei den Wege-Karten: gleiche Kante, gleiches
   Blau, der Unterschied liegt allein in der Helligkeit der Fläche. */
#schulprofil .tafel-card[data-path="foerder"] { background: var(--blau-lt); }
.tafel-card .path-tafel { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 0; }
.tafel-card .path-tag { display: inline-block; margin-bottom: 16px; }
#schulprofil .tafel-card[data-path="foerder"] .path-tag { background: var(--blau-lt); color: var(--blau); }

/* Wahlmöglichkeiten innerhalb einer Tafelzeile – je Option eine eigene Zeile */
.ptr-opt { display: block; margin-top: 7px; padding-left: 12px; border-left: 3px solid var(--border); }
.ptr-nach { display: block; margin-top: 9px; }

/* Der Kernsatz steht als Marke vor der Gabelung — dieselbe Grammatik wie
   die 15.000 Euro auf erleben. Das Intro darüber bringt seinen Abstand mit. */
#schulprofil .marke { margin: 4px 0 44px; }

/* Was in jeder Klasse gilt */
/* Die Klammer über beiden Wegen. Kein Kasten: Fläche, Rahmen und
   Kopfstreifen machten den schwersten Block der Seite aus obendrein
   den, der das Leichteste zu sagen hat. Jetzt halten ihn zwei feine
   Linien — er liest sich als Mitte, nicht als Einschub. */
.wege-alle { margin-top: 46px; padding: 34px 0 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wege-titel { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.35; color: var(--ink); text-align: center; margin-bottom: 4px; }
/* Sechs Rubriken in einer Reihe — das ist die leichteste Form, die der
   Block annehmen kann: eine Zeile Merkposten unter dem Titel, mehr nicht. */
.wege-alle .wege-share-items { grid-template-columns: repeat(6, 1fr); gap: 26px 20px; margin-top: 26px; }
.wege-alle .wege-share-item { border-top-color: var(--border); padding-top: 15px; }
/* Das Stichwort trägt den Block, das Angebot steht klein darunter — fünf
   Merkposten statt fünf gleich schwerer Textfelder. */
.wege-alle .wsi-k {
  font-family: var(--font-serif); font-size: var(--fs-kompakt); line-height: 1.28;
  letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-bottom: 8px;
}
.wege-alle .wsi-v { font-size: var(--fs-marke); line-height: 1.55; color: var(--ink-3); }
.wege-alle .wsi-v span { display: block; }
.wege-alle .wsi-v span + span { margin-top: 4px; }
/* Die allgemeine Umbruchregel greift hier nicht — sie ist schwächer als
   .wege-alle .wege-share-items. Darum eigens gestaffelt. */
@media (max-width: 1000px) { .wege-alle .wege-share-items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .wege-alle .wege-share-items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .wege-alle .wege-share-items { grid-template-columns: 1fr; } }
.wege-auswahl { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
.wege-auswahl p { margin: 0 0 12px; font-size: var(--fs-klein); line-height: 1.8; color: var(--ink-3); }
.wa-k { display: block; font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.wa-note { font-size: var(--fs-klein); color: var(--ink-3); margin-bottom: 0 !important; }

/* Die zwei Karten münden in ein Band: ab der Kursphase ein Weg. Hell
   statt vollblau — es soll die zwei Karten zusammenführen, nicht sie
   übertönen; nach dem entkasteten Gemeinsamkeits-Block wäre eine volle
   Blaufläche der schwerste Klotz des Abschnitts. */
/* Zwischen Vollblau und Hellblau: auf beigem Grund verschwand die helle
   Fassung, die volle erschlug den Abschnitt. Eine getragene Mitte —
   Blaufläche in halber Sättigung, weiße Schrift, flaches Polster. */
.wege-band { margin-top: 26px; background: #3d4a9e; color: #fff;
  padding: 17px 26px; text-align: center; font-size: var(--fs-kompakt); font-weight: 600;
  letter-spacing: 0; line-height: 1.55; border-radius: var(--radius); }
@media (max-width: 760px) { .wege-band { font-size: var(--fs-klein); padding: 14px 18px; } }

.wege-lernen p + p { margin-top: 14px; }

/* Schlusstext des Abschnitts – gesetzt wie die Zwischenüberschriften */
/* Der Ausklang: drei zentrierte Absätze in gleicher Größe lasen sich als
   grauer Block. Der Schlusssatz steht jetzt deutlich größer, weiter weg
   und über einer kurzen Farbmarke — er ist die Pointe, kein Nachsatz. */
.wege-schluss { max-width: 760px; margin: 40px auto 0; text-align: center; }
.wege-schluss p { font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-3); }
.wege-schluss p:last-child {
  position: relative; font-family: var(--font-serif);
  font-size: var(--fs-aussage); line-height: 1.35; color: var(--ink);
  margin-top: 34px; padding-top: 30px;
}
.wege-schluss p:last-child::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 54px; height: 3px; background: var(--blau);
}

/* Einleitung so breit wie der Leitsatz im Selbstverständnis darüber */
#schulprofil .section-sub { max-width: 880px; font-size: var(--fs-h3); }

/* Schließt die beiden Tafeln ab – gleicher Verlauf wie das Band darüber */
/* Wie der Gemeinsamkeits-Block: keine Fläche, kein Rahmen, kein
   Kopfstreifen — der letzte Kasten des Abschnitts ist entfallen. */
.wege-lernen { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); text-align: center; }
.wege-lernen p { max-width: 730px; margin: 10px auto 0; font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); }

@media (max-width: 880px) {
  .pw-row { grid-template-columns: 1fr; gap: 3px; }
  .wege-lernen { padding-top: 24px; }
  .tafel-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 22px; }
  .tafel-card { grid-row: auto; display: block; padding: 22px; }
  .tafel-card .path-tafel { display: block; }
}

/* ===== Schülerstimmen ===== */
.stimmen-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.stimmen-filter button { padding: 8px 16px; font-size: var(--fs-klein); font-weight: 500; border: 1px solid var(--border); border-radius: var(--pill); background: var(--white); color: var(--ink-2); cursor: pointer; transition: .15s; }
.stimmen-filter button.is-active { background: var(--blau); color: #fff; border-color: var(--blau); }
.stimmen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.stimme-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.stimme-video { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2a4699, var(--blau)); display: flex; align-items: center; justify-content: center; }
.stimme-video .play { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; }
.stimme-video .play::after { content: ''; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.stimme-video .vlabel { position: absolute; left: 12px; bottom: 10px; font-size: var(--fs-marke); color: rgba(255,255,255,.9); }
.stimme-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px; }
.stimme-quote { font-family: var(--font-serif); font-size: var(--fs-kompakt); font-style: italic; color: var(--ink-2); line-height: 1.5; flex: 1; }
.stimme-name { margin-top: 16px; font-weight: 600; font-size: var(--fs-kompakt); color: var(--ink-2); }
.stimme-meta { font-size: var(--fs-klein); color: var(--ink-3); margin-top: 3px; }
@media (max-width: 900px) { .stimmen-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .stimmen-grid { grid-template-columns: 1fr; } }

/* ===== Q&A-Register ===== */
.qa-filters { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.qa-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-flabel { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3); margin-right: 4px; min-width: 64px; }
.qa-chip { padding: 7px 14px; font-size: var(--fs-klein); border: 1px solid var(--border); border-radius: var(--pill); background: var(--white); color: var(--ink-2); cursor: pointer; transition: .15s; }
.qa-chip.is-active { background: var(--blau); color: #fff; border-color: var(--blau); }
.qa-list { margin-top: 28px; border-top: 1px solid var(--border); }
/* Aufklappbare Bloecke im Fliesstext — anders als das FAQ der Aufnahmeseite
   stehen sie hier mitten im Abschnitt und brauchen Luft nach oben.
   Der Inhalt bleibt vollstaendig in der Seite, nur zugeklappt. */
.qa-liste { margin: 34px 0 8px; }
.qa-liste .qa-item {
  border: 1px solid color-mix(in srgb, var(--c, var(--blau)) 26%, transparent);
  border-radius: var(--radius); background: var(--white);
  transition: border-color .18s ease, background .18s ease;
}
.qa-liste .qa-item:hover { border-color: var(--c, var(--blau)); }
.qa-liste .qa-q {
  font-family: var(--font-sans); font-size: var(--fs-kompakt); font-weight: 500;
  padding: 15px 20px; color: var(--ink-2); gap: 20px;
}
/* Rechts steht, was der Klick tut — ein Plus allein sagt es nicht. */
.qa-liste .qa-q::after {
  content: 'Aufklappen ›'; font-size: var(--fs-marke);
  letter-spacing: 0; color: var(--c, var(--blau)); white-space: nowrap;
}
.qa-liste .qa-item.open .qa-q::after { content: 'Zuklappen ‹'; }
.qa-liste .qa-item.open .qa-q { border-bottom: 1px solid var(--border); }
.qa-liste .qa-a > * { margin-top: 0; padding: 0 20px; }
.qa-liste .qa-a > *:first-child { padding-top: 20px; }
.qa-liste .qa-a > *:last-child { padding-bottom: 22px; margin-bottom: 0; }
@media (max-width: 760px) {
  .qa-liste .qa-q { font-size: var(--fs-kompakt); padding: 14px 16px; gap: 12px; }
  .qa-liste .qa-q::after { content: '+'; font-size: var(--fs-h3); }
  .qa-liste .qa-item.open .qa-q::after { content: '–'; }
  .qa-liste .qa-a > * { padding: 0 16px; }
}
.qa-item { border-bottom: 1px solid var(--border); }
.qa-liste .qa-item { border-bottom-width: 1px; }
.qa-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 4px; font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qa-q::after { content: '+'; color: var(--blau); font-size: var(--fs-h3); line-height: 1; flex-shrink: 0; }
.qa-item.open .qa-q::after { content: '–'; }
.qa-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.qa-item.open .qa-a { max-height: 1400px; }
/* Verweise in den Antworten sollen als Verweise erkennbar sein — global gilt
   a { color: inherit; text-decoration: none }, sonst blieben sie unsichtbar. */
.qa-a a { color: var(--c, var(--blau)); border-bottom: 1px solid var(--border); transition: border-color .15s; }
/* Dieselbe Erkennbarkeit in Hinweiskästen, Ablaufschritten und Fußzeilen */
.mk-aside a, .schritt-body a, .ut-foot a, .gruss a { color: var(--c, var(--blau)); border-bottom: 1px solid var(--border); transition: border-color .15s; }
.mk-aside a:hover, .schritt-body a:hover, .ut-foot a:hover, .gruss a:hover { border-bottom-color: currentColor; }
.qa-a a:hover { border-bottom-color: currentColor; }
.qa-a p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.7; padding: 0 4px 22px; margin: 0; }
.qa-note { margin-top: 20px; font-size: var(--fs-klein); color: var(--ink-3); background: var(--mist); border-radius: var(--radius); padding: 16px 20px; }

/* ===== Selbstverständnis / Leitbild ===== */
.sv-pills { display: flex; gap: 8px; margin: 6px 0 30px; }
.sv-pills span { height: 6px; border-radius: 3px; }
.sv-pills .p1 { width: 60px; background: var(--blau); }
.sv-pills .p2 { width: 36px; background: var(--ocker); }
.sv-pills .p3 { width: 52px; background: var(--gruen); }
.sv-pills .p4 { width: 28px; background: var(--rot); }
.leitsatz { max-width: 880px; margin: 0; padding: 0; border: none; }
.leitsatz p { font-size: var(--fs-h3); line-height: 1.8; color: var(--ink); font-weight: 400; }
.leitsatz p + p { margin-top: 16px; }
.leitsatz .lead-accent { color: var(--blau); font-weight: 600; }
.sv-band { position: relative; aspect-ratio: 24 / 7; min-height: 160px; border-radius: var(--radius); overflow: hidden; margin: 44px 0; background: var(--mist); }
.sv-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.sv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 8px; }
.sv-pillar { border-top: 3px solid var(--acc, var(--blau)); padding-top: 22px; }
.sv-pillar.sv--ocker { --acc: var(--ocker); }
.sv-pillar.sv--gruen { --acc: var(--gruen); }
.sv-pillar.sv--rot { --acc: var(--rot); }
.sv-eyebrow { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--acc, var(--blau)); }
.sv-word { font-family: var(--font-serif); font-size: var(--fs-aussage); color: var(--ink); margin: 6px 0 14px; line-height: 1.1; }
.sv-pillar p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }
.sv-download { margin-top: 48px; }
.sv-download a { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-klein); font-weight: 600; color: var(--blau); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; transition: border-color .15s, background .15s; }
.sv-download a:hover { border-color: var(--blau); background: var(--blau-lt); }
.sv-download svg { width: 17px; height: 17px; }
@media (max-width: 880px) { .sv-pillars { grid-template-columns: 1fr; gap: 34px; } }

/* ===== Studienseminar: Handlungsfelder ===== */
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.hf-card { border-radius: var(--radius); padding: 26px 28px; color: #fff; }
.hf-card.hf--gruen { background: var(--gruen); }
.hf-card.hf--ocker { background: var(--ocker); }
.hf-card.hf--rot { background: var(--rot); }
.hf-card.hf--blau { background: var(--blau); }
.hf-card h4 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; margin-bottom: 8px; color: #fff; }
.hf-card p { font-size: var(--fs-kompakt); line-height: 1.6; color: rgba(255,255,255,.85); }
@media (max-width: 700px) { .hf-grid { grid-template-columns: 1fr; } }

/* ===== Startseite: Schnellzugang ohne Icon-Kästen ===== */
.ql-link { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ql-link strong { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); }
.ql-link span { font-size: var(--fs-klein); color: var(--ink-3); }
.ql-link::after { content: '→'; position: absolute; top: 16px; right: 18px; color: var(--blau); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.ql-link:hover { border-color: var(--blau); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.ql-link:hover::after { opacity: 1; transform: translateX(0); }

/* ===== Aktuelles: Beitrags-Feed (leicht erweiterbar, Bild optional) ===== */
.feed-mehr { text-align: center; margin-top: 30px; }
.post-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 8px; }
.post { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); transition: transform .18s, box-shadow .18s; --c: var(--blau); }
.post:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.post--rot { --c: var(--rot); } .post--blau { --c: var(--blau); } .post--gruen { --c: var(--gruen); } .post--ocker { --c: var(--ocker); }
.post-media { position: relative; aspect-ratio: 16 / 9; background: var(--mist); }
.post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.post-tag { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; padding: 3px 11px; border-radius: var(--pill); color: #fff; background: var(--c); }
.post-date { font-size: var(--fs-klein); font-weight: 600; color: var(--ink-3); }
.post h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.28; color: var(--ink); margin-bottom: 8px; }
.post p { font-size: var(--fs-klein); color: var(--ink-2); line-height: 1.6; font-weight: 400; flex: 1; margin: 0; }
.post-more { display: inline-block; margin-top: 14px; font-size: var(--fs-klein); font-weight: 600; color: var(--c); text-decoration: none; }
.post-more:hover { text-decoration: underline; }

/* ===== Termine: kompakte, scanbare Liste ===== */
.termin-list { list-style: none; padding: 0; margin: 8px 0 0; max-width: 860px; border-top: 1px solid var(--border); }
.termin { display: flex; gap: 18px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--border); --c: var(--blau); }
.termin--rot { --c: var(--rot); } .termin--blau { --c: var(--blau); } .termin--gruen { --c: var(--gruen); } .termin--ocker { --c: var(--ocker); }
.termin-date { flex-shrink: 0; width: 60px; text-align: center; border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: var(--radius); padding: 7px 0 8px; line-height: 1; }
.td-day { display: block; font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); }
.td-mon { display: block; font-size: var(--fs-marke); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-versal); color: var(--c); margin-top: 5px; }
.termin-info { flex: 1; }
.termin-info h3 { font-size: var(--fs-kompakt); font-weight: 600; color: var(--ink-2); margin: 0 0 3px; }
.termin-meta { font-size: var(--fs-klein); color: var(--ink-3); }
.termin-foot { margin-top: 18px; font-size: var(--fs-klein); color: var(--ink-3); }
@media (max-width: 480px) { .termin-date { width: 52px; } .td-day { font-size: var(--fs-h3); } }

/* Sprung-Links im dunklen Seiten-Hero (Aktuelles & Termine) */
.ph-jump { display: flex; gap: 12px; margin-top: 24px; }
.ph-jump a { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--pill); background: rgba(255,255,255,.12); color: #fff; font-size: var(--fs-klein); font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.22); transition: background .15s; }
.ph-jump a:hover { background: rgba(255,255,255,.24); }

/* Aufklappbarer Rechtstext (vollständige Datenschutzerklärung) */
.legal { margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.legal > summary {
  list-style: none; cursor: pointer; padding: 18px 24px;
  font-size: var(--fs-kompakt); font-weight: 600; color: var(--c, var(--blau));
  display: flex; align-items: center; gap: 10px;
}
.legal > summary::-webkit-details-marker { display: none; }
.legal > summary::before {
  content: '+'; font-size: var(--fs-h3); line-height: 1; font-weight: 700;
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.legal[open] > summary::before { content: '–'; }
.legal[open] > summary { border-bottom: 1px solid var(--border); }
.legal-text { padding: 8px 28px 28px; max-width: 860px; }
.legal-text h3 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 22px 0 10px; }
.legal-text h5 { font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--c, var(--blau)); margin: 28px 0 10px; }
.legal-text h6 { font-size: var(--fs-kompakt); font-weight: 700; color: var(--ink-2); margin: 22px 0 8px; }
.legal-text p { font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); font-weight: 400; margin-bottom: 12px; }
.legal-text strong { font-weight: 600; color: var(--ink); }
.legal-text ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.legal-text li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; }
.legal-text li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--blau)); }
.legal-text a { color: var(--c, var(--blau)); text-decoration: none; border-bottom: 1px solid var(--border); word-break: break-word; }
.legal-text a:hover { border-bottom-color: currentColor; }
.legal-text table { border-collapse: collapse; margin: 6px 0 16px; font-size: var(--fs-klein); width: 100%; }
.legal-text td { border: 1px solid var(--border); padding: 9px 12px; vertical-align: top; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 600px) { .legal > summary { padding: 16px 18px; } .legal-text { padding: 8px 18px 22px; } }

/* =====================================================================
   Entdecken-Seite — visueller Rhythmus & Sonderelemente
   Alles unter .entdecken-page gescopt, damit erleben.html / entfalten.html
   und die geteilten Komponenten (.exp-section, .prog-timeline, .principles)
   unberührt bleiben.
   ===================================================================== */

/* --- Unterricht: „Unser Unterrichtsverständnis" als Herzstück --- */
.uo-photo { margin: 0 0 48px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; background: var(--mist); }
.uo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.entdecken-page .uo-lead { max-width: 880px; }
.entdecken-page .uo-title { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.25; margin: 12px 0 22px; }
.entdecken-page .uo-intro { font-size: var(--fs-h3); line-height: 1.8; color: var(--ink); font-weight: 400; }
.entdecken-page .uo-intro + .uo-intro { margin-top: 16px; }

/* Leitsatz: der visuelle Anker (Held) im kräftigen MTG-Blau */
.entdecken-page .uo-statement {
  position: relative; max-width: 960px; margin: 56px auto; text-align: center;
  padding: 72px 64px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--blau) 0%, #0d2050 55%, #0a4545 100%);
  box-shadow: var(--schatten-flach);
}
.entdecken-page .uo-mark {
  display: block; font-family: var(--font-serif); font-size: var(--fs-zier); line-height: .4;
  color: var(--ocker); margin-bottom: 20px;
}
.entdecken-page .uo-statement blockquote {
  margin: 0 auto; max-width: 760px;
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-aussage); line-height: 1.42; color: #fff;
}

/* Schluss-Absatz — im Leitsatz-Stil des Selbstverständnisses, mit Label-Rahmen */
.entdecken-page .uo-schluss-block { margin-top: 48px; }
.entdecken-page .uo-schluss-block .exp-eyebrow { margin-bottom: 14px; }
.entdecken-page .uo-schluss { max-width: 880px; margin: 0; font-size: var(--fs-h3); line-height: 1.8; color: var(--ink); font-weight: 400; }
.entdecken-page .uo-schluss .lead-accent { color: var(--blau); font-weight: 600; }

/* PuLSt — selbstbewusst zeigen, was möglich ist */
/* Phasen-Label: dezent im Sans-Stil, trennt PuLSt (Q12/Q13) von Jgst. 11 */
.entdecken-page .phase-label { display: flex; align-items: center; gap: 16px; margin: 48px 0 20px; }
.entdecken-page .phase-label span {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--c, var(--blau)); white-space: nowrap;
}
.entdecken-page .phase-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }


.entdecken-page .lf-show { margin-top: 24px; }
.entdecken-page .lf-show-lead { max-width: 820px; }
.entdecken-page .lf-life { margin-top: 18px; max-width: 820px; font-size: var(--fs-kompakt); line-height: 1.8; color: var(--ink-2); font-weight: 400; }
/* Kern-Phase betonen: kräftige Akzentlinie */
.entdecken-page .phase-label--core::after { height: 2px; background: var(--c, var(--blau)); opacity: .55; }
.entdecken-page .lf-life a { color: var(--c, var(--blau)); text-decoration: none; border-bottom: 1px solid var(--border); }
.entdecken-page .lf-life a:hover { border-bottom-color: currentColor; }
.entdecken-page .lf-show-lead { font-size: var(--fs-text); line-height: 1.8; color: var(--ink-2); font-weight: 400; }
.entdecken-page .lf-show-lead strong { color: var(--ink); font-weight: 600; }

/* Aushängeschild — hell hervorgehobene Akzent-Karte (dezent, dominiert nicht) */
.entdecken-page .pulst-flag {
  margin-top: 8px; max-width: 720px; padding: 26px 30px; border-radius: var(--radius);
  background: var(--blau-lt); border-left: 3px solid var(--blau);
}
.entdecken-page .pulst-flag .exp-eyebrow { color: var(--blau); }
.entdecken-page .pulst-flag h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 8px 0; line-height: 1.2; }
.entdecken-page .pulst-flag p { font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; max-width: 640px; margin: 0; }

/* Weitere Bausteine — kompakt mit Akzentkante */
.entdecken-page .pulst-extras { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.entdecken-page .pulst-extras > div { padding-top: 16px; border-top: 3px solid var(--c, var(--blau)); }
.entdecken-page .pulst-extras h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 7px; }
.entdecken-page .pulst-extras p { font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; margin: 0; }

@media (max-width: 760px) {
  .entdecken-page .pulst-flag { padding: 22px 20px; }
  .entdecken-page .pulst-flag h4 { font-size: var(--fs-text); }
  .entdecken-page .pulst-extras { grid-template-columns: 1fr; gap: 20px; }
}

/* Inline-Platzhalter — dezent als „noch zu füllen" markiert */
.entdecken-page .ph-inline {
  color: var(--ink-3); font-style: italic;
  background: var(--mist); border-radius: var(--radius); padding: 1px 7px;
}

/* Oberstufen-Angebote: katalogartige Liste, Label links, Beispiele rechts */
.entdecken-page .offer-list { margin-top: 16px; }
.entdecken-page .offer-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.entdecken-page .offer-row:last-child { border-bottom: 1px solid var(--border); }
.entdecken-page .offer-row > .exp-eyebrow { margin: 4px 0 0; color: var(--c, var(--blau)); }
.entdecken-page .offer-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.entdecken-page .offer-tag {
  font-size: var(--fs-klein); font-weight: 500; color: var(--ink-2);
  padding: 8px 15px; border-radius: var(--pill);
  background: var(--mist); border: 1px solid var(--border);
}
.entdecken-page .offer-tag--star { background: var(--blau); color: #fff; border-color: var(--blau); font-weight: 600; }
.entdecken-page .offer-tag.ph-tag { background: transparent; color: var(--ink-3); font-style: italic; border-style: dashed; }
.entdecken-page .offer-note { margin-top: 12px; font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; max-width: 640px; }
.entdecken-page .offer-row .offer-note:only-child { margin-top: 0; }

@media (max-width: 760px) {
  .entdecken-page .offer-row { grid-template-columns: 1fr; gap: 12px; }
}

/* Oberstufen-Spotlight: eine kühne Aussage als strahlender Held */
.entdecken-page .os-spotlight {
  margin-top: 8px; padding: 52px 54px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--blau) 0%, #0d2050 55%, #0a4545 100%);
  box-shadow: var(--schatten-flach);
}
.entdecken-page .os-spotlight .exp-eyebrow { color: var(--ocker); }
.entdecken-page .os-claim {
  font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.12; color: #fff;
  margin: 16px 0 20px; max-width: 880px;
}
.entdecken-page .os-claim-sub { font-size: var(--fs-text); line-height: 1.75; color: rgba(255,255,255,.92); font-weight: 400; max-width: 760px; margin: 0; }
.entdecken-page .os-claim-sub strong { color: #fff; font-weight: 700; }
.entdecken-page .os-lf {
  font-size: var(--fs-kompakt); line-height: 1.75; color: rgba(255,255,255,.78); font-weight: 400;
  max-width: 760px; margin: 26px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18);
}
.entdecken-page .os-more { display: flex; flex-wrap: wrap; gap: 11px 28px; margin-top: 26px; }
.entdecken-page .os-more span { font-size: var(--fs-kompakt); font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.entdecken-page .os-more span::before { content: '✦'; color: var(--ocker); font-size: var(--fs-klein); }

@media (max-width: 760px) {
  .entdecken-page .os-spotlight { padding: 34px 24px; }
  .entdecken-page .os-claim { font-size: var(--fs-h2); }
  .entdecken-page .os-claim-sub { font-size: var(--fs-kompakt); }
}

/* ===== Oberstufe — Zwei-Phasen-Struktur (Jgst 11 / PuLSt) ===== */
.entdecken-page .os-phase { margin-top: 64px; }
.entdecken-page .os-phase-head { margin-bottom: 28px; }
.entdecken-page .os-phase-tag {
  display: inline-block; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--c, var(--blau)); margin-bottom: 10px;
}
.entdecken-page .os-phase-head h3 { font-family: var(--font-serif); font-size: var(--fs-aussage); line-height: 1.15; color: var(--ink); margin: 0 0 10px; }
.entdecken-page .os-phase-intro { font-size: var(--fs-text); line-height: 1.75; color: var(--ink-2); font-weight: 400; max-width: 820px; margin: 0; }

.entdecken-page .os-sub { margin-top: 28px; }
.entdecken-page .os-sub > .exp-eyebrow { color: var(--c, var(--blau)); margin-bottom: 10px; }
/* Dieselbe Satzbreite wie .topic-text und .os-phase-intro — vorher waren die
   Texte der Oberstufe 80 px schmaler als alle anderen der Seite. */
.entdecken-page .os-sub-text { font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); font-weight: 400; max-width: 820px; margin: 0 0 14px; }

/* Beispiel-Karten (P-Seminar, W-Seminar) */
.entdecken-page .ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
/* Steht die Kartenreihe für sich im Abschnitt, braucht sie denselben Abstand
   zur Einleitung wie die Bildreihe darunter. In der os-sub-Box bleibt es eng. */
.entdecken-page .container > .os-sub-text + .ex-cards { margin-top: 40px; }
.entdecken-page .ex-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--c, var(--blau)); border-radius: var(--radius); padding: 22px 24px; }
.entdecken-page .ex-card .ex-fach { display: block; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--c, var(--blau)); margin-bottom: 8px; }
.entdecken-page .ex-card h4 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); margin: 0; }
.entdecken-page .ex-card p { font-size: var(--fs-klein); line-height: 1.65; color: var(--ink-2); font-weight: 400; margin: 9px 0 0; }

/* Hervorgehobene Boxen: P-Seminar Plus & Wissenschaftswoche */
.entdecken-page .os-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.entdecken-page .os-box { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--blau); border-radius: var(--radius); padding: 24px 28px; }
.entdecken-page .os-box .exp-eyebrow { color: var(--blau); margin-bottom: 10px; }
.entdecken-page .os-box h4 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
.entdecken-page .os-box p { font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; margin: 0; }
.entdecken-page .os-sub-lead { margin-top: 24px; }

/* Oberstufen-Galerie: ruhiges, gleichmäßiges Raster */
.entdecken-page .os-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.entdecken-page .os-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--mist); }
.entdecken-page .os-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.entdecken-page .os-gallery figure:hover img { transform: scale(1.05); }
.entdecken-page .os-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 12px;
  font-size: var(--fs-klein); font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
}
@media (max-width: 760px) { .entdecken-page .os-gallery { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 480px) { .entdecken-page .os-gallery { grid-template-columns: 1fr; } }

/* Logo-Kachel in der Oberstufen-Galerie (z. B. Balu und Du) */
.entdecken-page .exp-gallery figure.g-logo { background: #fff; }
.entdecken-page .exp-gallery figure.g-logo img { object-fit: contain; padding: 26px; }
.entdecken-page .exp-gallery figure.g-logo figcaption { background: linear-gradient(to top, rgba(0,0,0,.5), transparent); }

/* Abschluss-Zeile */
.entdecken-page .os-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border);
}
.entdecken-page .os-cta p { font-size: var(--fs-text); color: var(--ink-2); font-weight: 500; margin: 0; }
.entdecken-page .os-cta-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-kompakt); font-weight: 600;
  color: #fff; background: var(--blau); padding: 11px 22px; border-radius: var(--pill); text-decoration: none; transition: transform .15s;
}
.entdecken-page .os-cta-link:hover { transform: translateY(-2px); }

@media (max-width: 760px) {
  .entdecken-page .os-phase { margin-top: 48px; }
  .entdecken-page .os-phase-head h3 { font-size: var(--fs-h3); }
  .entdecken-page .os-boxes { grid-template-columns: 1fr; }
  .entdecken-page .os-cta { flex-direction: column; align-items: flex-start; }
}

/* --- Oberstufe: Zeitstrahl (horizontal Desktop, vertikal Mobil) --- */
.entdecken-page .prog-flow {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; counter-reset: pf;
}
.entdecken-page .pf-item { position: relative; padding-top: 50px; }
.entdecken-page .pf-item::before {
  counter-increment: pf; content: counter(pf);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c, var(--blau)); color: #fff;
  font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-text);
  display: flex; align-items: center; justify-content: center;
}
/* Verbindungslinie zwischen den Stationen */
.entdecken-page .pf-item::after {
  content: ''; position: absolute; top: 17px; left: 46px; right: -56px; height: 2px;
  background: var(--border);
}
.entdecken-page .pf-item:last-child::after { display: none; }
.entdecken-page .pf-stage {
  display: block; font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--c, var(--blau)); margin-bottom: 8px;
}
.entdecken-page .pf-item h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 6px; }
.entdecken-page .pf-item p { font-size: var(--fs-kompakt); line-height: 1.65; color: var(--ink-2); }

/* --- Querverweis-Leiste (dezent) am Ende eines Abschnitts --- */
.entdecken-page .xref {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
}
.entdecken-page .xref-label {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--ink-3);
}
.entdecken-page .xref-links { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.entdecken-page .xref-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-kompakt); font-weight: 500; color: var(--c, var(--blau)); text-decoration: none;
  padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--pill);
  transition: border-color .15s, background .15s;
}
.entdecken-page .xref-links a::before { content: '→'; opacity: .6; }
.entdecken-page .xref-links a:hover { border-color: var(--c, var(--blau)); background: var(--mist); }

@media (max-width: 760px) {
  .entdecken-page .uo-intro { font-size: var(--fs-text); }
  .uo-photo { aspect-ratio: 16 / 9; margin-bottom: 32px; }
  .entdecken-page .uo-statement { padding: 48px 26px; margin: 44px auto; }
  .entdecken-page .uo-statement blockquote { font-size: var(--fs-h3); }
  .entdecken-page .uo-schluss { font-size: var(--fs-text); }
  /* Zeitstrahl vertikal mit durchgehender Linie */
  .entdecken-page .prog-flow { grid-template-columns: 1fr; gap: 0; }
  .entdecken-page .pf-item { padding: 0 0 30px 56px; }
  .entdecken-page .pf-item::before { top: 0; }
  .entdecken-page .pf-item::after { top: 40px; left: 17px; right: auto; bottom: 4px; width: 2px; height: auto; }
}

/* ===== Seiten-Suche ===== */
.nav-search-li { display: flex; align-items: center; list-style: none; }
.nav-search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: var(--fs-klein); font-weight: 500;
  opacity: .7; padding: 0; transition: opacity .15s, color .15s;
}
.nav-search-btn:hover { opacity: 1; color: var(--blau); }
.nav-search-btn svg { display: block; }
/* Mobil-Lupe neben dem Burger: auf dem Desktop ausgeblendet */
.nav-search-btn--mobile { display: none; }
/* Auf schmaleren Desktops nur die Lupe zeigen, damit das Menü nicht umbricht */
@media (max-width: 1200px) { .nav-search-label { display: none; } }
/* Im Handy-Menü ist die Lupe der Leiste zuständig — die im Menü entfällt. */
@media (max-width: 1024px) { .nav-search-li { display: none; } }

.search-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; }
.search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(12,22,44,.45); animation: searchFade .15s ease; }
.search-panel {
  position: relative; width: min(640px, 92vw); margin-top: 12vh;
  background: var(--white, #fff); border-radius: var(--radius);
  box-shadow: var(--schatten-hoch); overflow: hidden;
  animation: searchPop .16s ease;
}
.search-inputbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border, #e7ebf0); }
.search-inputbar > svg { color: var(--ink-2, #5a6678); flex: none; }
.search-input {
  flex: 1; border: none; outline: none; background: none;
  font: inherit; font-size: var(--fs-text); color: var(--ink, #1b2436);
}
.search-close {
  flex: none; border: 1px solid var(--border, #e7ebf0); background: var(--mist, #f3f6fa);
  color: var(--ink-2, #5a6678); font: inherit; font-size: var(--fs-marke); font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius); cursor: pointer;
}
.search-close:hover { color: var(--ink, #1b2436); }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-hit {
  display: block; padding: 12px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border, #eef1f5);
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover, .search-hit.is-sel { background: var(--mist, #f3f6fa); }
.search-hit-title { display: block; font-weight: 600; font-size: var(--fs-kompakt); color: var(--ink, #1b2436); }
.search-hit-page { display: block; font-size: var(--fs-marke); font-weight: 600; letter-spacing: 0; color: var(--blau, #1e3270); opacity: .8; margin-top: 1px; }
.search-hit-snip { display: block; font-size: var(--fs-klein); color: var(--ink-2, #5a6678); margin-top: 4px; line-height: 1.5; }
.search-hit-snip mark { background: rgba(240,200,60,.42); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-empty { padding: 20px 16px; font-size: var(--fs-klein); color: var(--ink-2, #5a6678); }

@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes searchPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .search-backdrop, .search-panel { animation: none; }
}
/* Tablet/Mobil: Hauptmenü ist eingeklappt → eigene Lupe neben dem Burger */
@media (max-width: 1024px) {
  .nav-search-btn--mobile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; margin-right: 2px;
    color: var(--ink); opacity: .85;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (max-width: 600px) {
  .search-panel { margin-top: 0; width: 100vw; height: 100%; border-radius: 0; }
  .search-results { max-height: calc(100vh - 60px); }
}

/* =====================================================================
   AUFNAHME / ÜBERTRITT — Seite /aufnahme
   ===================================================================== */

/* Termine-Block (automatisch aus /termine.json) */
.ut-termine { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.ut-termin {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--blau); padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.ut-label {
  font-size: var(--fs-marke); font-weight: 700; letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--blau); margin-bottom: 4px;
}
.ut-when { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 0; }
.ut-title { font-size: var(--fs-kompakt); font-weight: 600; color: var(--ink-2); margin: 2px 0 0; }
.ut-meta { font-size: var(--fs-klein); color: var(--ink-2); font-weight: 400; margin: 0; }
.ut-termin--leer { border-top-color: var(--border); opacity: .8; }
.ut-foot { margin-top: 22px; font-size: var(--fs-kompakt); color: var(--ink-2); }

/* Entscheidungshilfe Regelklasse / Förderklasse */
.entsch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.entsch-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--blau); padding: 30px 28px;
  transition: transform .25s, box-shadow .25s;
}
.entsch-card--gruen { border-top-color: var(--gruen); }
.entsch-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.entsch-card h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0 0 12px; color: var(--ink); }
.entsch-card p { font-size: var(--fs-kompakt); line-height: 1.8; color: var(--ink-2); font-weight: 400; margin: 0 0 16px; }
.entsch-more { font-size: var(--fs-kompakt); font-weight: 600; color: var(--blau); }
.entsch-card--gruen .entsch-more { color: var(--gruen); }
.entsch-note { text-align: center; margin: 30px auto 0; max-width: 640px; font-size: var(--fs-kompakt); color: var(--ink-2); }
.entsch-note strong { color: var(--ink); font-weight: 600; }

/* Schülerstimmen-Video (Platzhalter) */
.video-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  aspect-ratio: 16 / 9; width: 100%; background: var(--mist);
  border: 1px dashed var(--border); border-radius: var(--radius); color: var(--ink-2);
}
.video-ph-icon {
  width: 62px; height: 62px; border-radius: 50%; background: var(--blau); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3); padding-left: 4px;
}
.video-ph-text { font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; }

/* Anmeldung in drei Schritten */
.schritte { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; margin: 0; counter-reset: none; }
.schritt {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; display: flex; gap: 16px; align-items: flex-start;
}
.schritt-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blau); color: #fff; font-family: var(--font-serif); font-size: var(--fs-h3);
  display: flex; align-items: center; justify-content: center;
}
.schritt-body h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 4px 0 8px; color: var(--ink); }
.schritt-body p { font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); font-weight: 400; margin: 0; }

/* Kontaktbox Sekretariat */
.kontakt-box {
  margin-top: 30px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); border-left: 3px solid var(--blau);
  padding: 30px 30px; display: flex; flex-wrap: wrap; gap: 26px 40px;
  align-items: center; justify-content: space-between;
}
.kontakt-box-title { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0 0 6px; color: var(--ink); }
.kontakt-box-sub { font-size: var(--fs-kompakt); color: var(--ink-2); font-weight: 400; margin: 0; }
.kontakt-box-daten { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.kontakt-zeile { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.kontakt-zeile strong { font-size: var(--fs-kompakt); color: var(--blau); font-weight: 600; }
.kontakt-zeile span { font-size: var(--fs-klein); color: var(--ink-2); }

/* Saisonales Hinweisband (Startseite, Jan–Mai) */
.saison-band {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: var(--blau); color: #fff; text-decoration: none;
  padding: 13px 24px; font-size: var(--fs-kompakt); font-weight: 500; text-align: center;
}
.saison-band:hover { background: #123a63; }
.saison-band .sb-cta {
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--pill);
  padding: 4px 14px; font-size: var(--fs-klein); font-weight: 600; white-space: nowrap;
}

@media (max-width: 860px) {
  .ut-termine, .schritte { grid-template-columns: 1fr; }
  .entsch-grid { grid-template-columns: 1fr; }
  .kontakt-box { flex-direction: column; align-items: flex-start; }
}



/* =====================================================================
   ZICKZACK-REGISTER
   ---------------------------------------------------------------------
   Mitlaufendes Verzeichnis am rechten Rand. Es baut sich in /main.js
   automatisch aus den Übersichtskacheln der Seite auf — wer dort einen
   Punkt ergänzt, bekommt ihn hier von selbst.
   Aktiv nur auf Seiten, deren <main> das Merkmal data-register trägt.
   ===================================================================== */
.zackregister {
  position: fixed; right: 16px; left: auto; top: 50%; bottom: auto;
  transform: translateY(-50%);
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .4s ease;
  /* gegen die globale nav-Regel absichern */
  display: block; width: auto; height: auto; padding: 0;
  background: none; border: 0; box-shadow: none;
}
body.unter-hero .zackregister { opacity: 1; pointer-events: auto; }
body.am-fuss .zackregister { opacity: 0; pointer-events: none; }
.zackregister svg { display: block; overflow: visible; }
/* Titel ueber dem Register — sagt, was die Linie ist. */
.zackregister::before {
  content: "Auf dieser Seite"; position: absolute; right: 66px; top: -26px;
  white-space: nowrap; font-size: var(--fs-marke); font-weight: 700;
  letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--ink-3); opacity: .8;
}
.zr-linie { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.zr-weg   { fill: none; stroke: var(--zr-farbe, var(--blau)); stroke-width: 3;
            stroke-linejoin: round; stroke-linecap: round; transition: stroke .35s; }
.zr-knick { fill: #fff; stroke: var(--border); stroke-width: 2; cursor: pointer;
            transition: all .28s cubic-bezier(.4,1.4,.5,1); }
.zr-knick:hover { stroke: var(--ink-3); }
.zr-knick.aktiv { fill: var(--zr-farbe, var(--blau)); stroke: var(--zr-farbe, var(--blau)); }
.zr-name {
  position: absolute; right: 66px; white-space: nowrap; font-size: var(--fs-klein); line-height: 1.2;
  color: var(--ink-3); text-align: right; transform: translateY(-50%);
  cursor: pointer; transition: color .25s;
}
.zr-name:hover { color: var(--ink); }
.zr-name.aktiv { color: var(--ink); font-weight: 700; }
/* Einträge, die auf eine andere Seite des Kapitels führen */
.zr-extern::after { content: " →"; opacity: .55; }
.zr-gruppe {
  position: absolute; right: 66px; white-space: nowrap; transform: translateY(-50%);
  font-size: var(--fs-marke); letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--ink-3); opacity: .75;
}

/* Textspalte etwas schmaler und nach links gerückt, damit das Register
   freien Rand hat. Die farbigen Flächen bleiben über die volle Breite. */
body.hat-register { --versatz: 130px; }
@media (min-width: 1240px) {
  /* Alles, was in der Textspalte steht, rückt gemeinsam. Freistehende
     Bilder gehören dazu — sonst stünden sie mittig, während der Text
     daneben nach links gerückt ist. Bänder über die volle Breite bleiben,
     wo sie sind. */
  body.hat-register main .container,
  body.hat-register main > .wir-blatt,
  body.hat-register main > .mutbild,
  body.hat-register main > .schlussbild {
    transform: translateX(calc(-1 * min(var(--versatz), (100vw - var(--max-w) - 96px) / 2 - 40px)));
  }
}
@media (max-width: 1239px) { .zackregister { display: none !important; } }

/* ── Schmaler Bereich: nur die Linie ──────────────────────────────────
   Zwischen 1240 und 1499 px reicht der Rand nicht fuer die Begriffe: die
   Wochentafel auf entdecken bricht als Schaustueck aus der Textspalte aus,
   und die Namen lagen mitten darin (bei 1280 px "Oberstufe & Abitur" quer
   ueber den Stunden). Also bleibt hier nur der Weg mit seinen Stationen
   stehen; die Namen kommen auf Zuruf und legen sich dann mit eigener
   Flaeche darueber.  (12.09.2026) */
@media (min-width: 1240px) and (max-width: 1499px) {
  .zr-name, .zr-gruppe, .zackregister::before {
    opacity: 0; transition: opacity .18s ease;
  }
  .zr-name { pointer-events: none; }
  .zackregister:hover .zr-name,
  .zackregister:focus-within .zr-name,
  .zackregister:hover .zr-gruppe,
  .zackregister:hover::before,
  .zackregister:focus-within::before { opacity: 1; }
  .zackregister:hover .zr-name,
  .zackregister:focus-within .zr-name {
    pointer-events: auto; background: var(--white);
    box-shadow: var(--schatten-flach); padding: 4px 9px;
    border-radius: var(--radius);
  }
  /* Der aktive Punkt traegt die Orientierung, solange die Namen fort sind. */
  .zr-knick.aktiv { r: 8; }
}

/* Zurück nach oben — der Ersatz fürs Register auf schmalen Bildschirmen.
   Klein und ruhig; er meldet sich erst, wenn der Weg zurück weit ist. */
.nach-oben {
  position: fixed; right: 16px; bottom: 20px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255,255,255,.94); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 50%;
  box-shadow: var(--schatten-flach); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nach-oben:hover { color: var(--blau); border-color: var(--blau); }
/* Ab der Breite, in der das Zackregister wieder erscheint, bleibt er fort. */
@media (min-width: 1240px) { .nach-oben { display: none; } }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }

/* ===== Internationales: Bildmosaik der Auslandsbegegnungen =====
   Das Bild trägt den Text. Ort und Titel stehen immer da, die Erläuterung
   kommt beim Überfahren aus dem Bild. Auf schmalen Bildschirmen steht sie da. */
.bg-mosaik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.bg-bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; background: var(--mist); }
.bg-bild--gross { grid-column: span 2; aspect-ratio: 16/9; }
.bg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.bg-bild:hover img, .bg-bild:focus-within img { transform: scale(1.04); }
.bg-bild:focus { outline: none; }
.bg-huelle { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 16px; color: #fff;
  background: linear-gradient(to top, rgba(10,25,45,.94) 0%, rgba(10,25,45,.62) 60%, rgba(10,25,45,0) 100%); }
.bg-ort { display: block; font-size: var(--fs-marke); letter-spacing: var(--ls-versal); text-transform: uppercase; color: rgba(255,255,255,.85); }
.bg-titel { display: block; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.2; margin-top: 5px; }
.bg-bild--gross .bg-titel { font-size: var(--fs-h3); }
.bg-mehr { display: block; font-size: var(--fs-kompakt); line-height: 1.6; color: rgba(255,255,255,.9);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; }
.bg-bild:hover .bg-mehr, .bg-bild:focus-within .bg-mehr { max-height: 9em; opacity: 1; margin-top: 9px; }
@media (max-width: 760px) {
  .bg-mosaik { grid-template-columns: 1fr; }
  .bg-bild--gross { grid-column: auto; }
  .bg-mehr { max-height: 9em; opacity: 1; margin-top: 9px; }
}

/* ===== Die Weltkarte und ihre Blätter =====
   Wichtig: Ohne diese Regeln zeichnet das eingebettete SVG nichts Sichtbares.
   Nach Eingriffen prüfen mit: node scripts/karte-pruefen.cjs */
.mk { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.mk-wasser { fill: #eef3f7; }
.mk-land { fill: #dfe5ec; stroke: #fff; stroke-width: .6; }
.mk-land--betont { opacity: .92; }
.mk-halo { fill: var(--navy); opacity: 0; transition: opacity .25s ease; }
.mk-punkt { fill: var(--navy); stroke: #fff; stroke-width: 2; transition: r .2s ease; }
.mk-name { font-family: var(--font-sans); font-size: var(--fs-kompakt); font-weight: 700; fill: var(--ink); }
.mk-ziel { cursor: pointer; }
.mk-ziel:hover .mk-halo, .mk-ziel:focus .mk-halo, .mk-ziel.ist-offen .mk-halo { opacity: .2; }
.mk-ziel:hover .mk-punkt, .mk-ziel:focus .mk-punkt, .mk-ziel.ist-offen .mk-punkt { r: 8; }
.mk-ziel:focus { outline: none; }

.kt-buehne { position: relative; }
.kt-hinweis { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  font-size: var(--fs-marke); letter-spacing: 0; color: var(--ink-3);
  background: rgba(255,255,255,.9); border-radius: var(--pill); padding: 6px 14px; transition: opacity .25s ease; }
.kt-buehne.ist-benutzt .kt-hinweis { opacity: 0; }
.kt-blatt { position: absolute; width: 320px; background: #fff; border-radius: var(--radius);
  border-top: 3px solid var(--rot); box-shadow: var(--schatten-flach);
  padding: 16px 20px 17px; opacity: 0; pointer-events: none; z-index: 5;
  transform: translate(16px, -50%) scale(.97); transform-origin: left center;
  transition: opacity .2s ease, transform .26s cubic-bezier(.4,0,.2,1); }
.kt-blatt.ist-offen { opacity: 1; transform: translate(16px, -50%) scale(1); }
.kt-blatt--links { transform: translate(calc(-100% - 16px), -50%) scale(.97); transform-origin: right center; }
.kt-blatt--links.ist-offen { transform: translate(calc(-100% - 16px), -50%) scale(1); }
.kt-blatt--hoch { transform: translate(16px, calc(-100% - 10px)) scale(.97); transform-origin: left bottom; }
.kt-blatt--hoch.ist-offen { transform: translate(16px, calc(-100% - 10px)) scale(1); }
.kt-blatt--links.kt-blatt--hoch { transform: translate(calc(-100% - 16px), calc(-100% - 10px)) scale(.97); transform-origin: right bottom; }
.kt-blatt--links.kt-blatt--hoch.ist-offen { transform: translate(calc(-100% - 16px), calc(-100% - 10px)) scale(1); }
.kt-blatt p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2); margin: 0 0 10px; }
.kt-blatt cite { font-style: normal; font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0; color: var(--rot); }
@media (max-width: 860px) {
  .kt-hinweis { display: none; }
  .kt-blatt { position: static; opacity: 1; transform: none; width: auto; margin-top: 12px;
    box-shadow: none; border: 1px solid var(--border); border-top: 3px solid var(--rot); }
}

/* ===== „Eine Woche am MTG" — die Fächertafel auf entdecken =====
   Erzeugt von scripts/plan-bauen.cjs. Ohne diese Regeln zeichnet das
   eingebettete SVG nichts Sichtbares. */
.wo-tafel { margin: 0; }
.wo { width: 100%; height: auto; display: block; }
.wo-tag { font-family: var(--font-sans); font-size: var(--fs-kompakt); font-weight: 700; fill: var(--ink); }
.wo-nr { font-family: var(--font-sans); font-size: var(--fs-kompakt); font-weight: 700; fill: var(--ink); }
.wo-zeit { font-size: var(--fs-marke); fill: var(--ink-3); }
.wo-fach { font-family: var(--font-sans); font-size: var(--fs-kompakt); fill: var(--ink); }
.wo-unter { font-size: var(--fs-marke); }
.wo-pausenband { fill: var(--mist); }
.wo-pausentext { font-size: var(--fs-marke); fill: var(--ink-3); letter-spacing: 0; }

/* Wischbare Tafeln: Verlauf am rechten Rand, Hinweiszeile darunter.
   Beide zeigen sich nur, solange seitwärts noch Weg ist. */
.wischfeld { position: relative; --wischgrund: var(--white); }
.wischrahmen { position: relative; }
.wischrahmen::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 56px;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--wischgrund) 0%, transparent), var(--wischgrund) 82%);
}
.wischfeld.wischbar .wischrahmen::after { opacity: 1; }
.wischfeld.wischbar.am-ende .wischrahmen::after { opacity: 0; }
.wischhinweis {
  display: none; margin: 8px 0 0; padding-right: 2px; text-align: right;
  font-size: var(--fs-marke); letter-spacing: 0;
  color: var(--ink-3);
}
.wischfeld.wischbar .wischhinweis { display: block; }
.wischfeld.wischbar.am-ende .wischhinweis { visibility: hidden; }
/* Der Hinweis hängt allein daran, ob seitwärts noch Weg ist (Klasse
   .wischbar, in main.js gemessen) — nicht an hover: Touch-Notebooks melden
   hover und könnten wischen. Wo die Tafel ganz hineinpasst, bleibt er fort. */
.wo a { cursor: pointer; }
.wo-zelle rect:first-child { transition: stroke .15s ease, filter .15s ease; }
.wo a:hover .wo-zelle rect:first-child,
.wo a:focus-visible .wo-zelle rect:first-child { stroke: var(--ink-3); filter: brightness(.955); }
.wo a:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; border-radius: var(--radius); }
.wo-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.wo-marke { font-size: var(--fs-marke); color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.wo-marke::before { content: ''; width: 22px; height: 15px; border-radius: 3px;
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--wm, var(--blau)); }
.wo-marke--blau { --wm: var(--blau); }
.wo-marke--gruen { --wm: var(--gruen); }
.wo-marke--ocker { --wm: var(--ocker); }
.wo-marke--rot { --wm: var(--rot); }
.wo-marke--grau { --wm: var(--ink-3); }
/* Oberstufe: derselbe graue Strich, aber getöntes Feld — so wie im Plan. */
.wo-marke--ober { --wm: var(--ink-3); }
.wo-marke--ober::before { background: #efe9e0; }
@media (max-width: 760px) { .wo-tafel { overflow-x: auto; } .wo { min-width: 720px; } }
.wo-hinweis { font-size: var(--fs-marke); fill: var(--ink-3); }
.wo-frei { fill: #fafbfc; stroke: #eceff3; stroke-dasharray: 4 4; }

/* ===== Kursnamen als Pillen =====
   Für lange Namenslisten (Pluskurse). Ruhiger als umrandete Kacheln, weil
   die Fläche trägt statt der Kante. Verwandt mit .lf-chip auf entdecken —
   beide gehören zusammengeführt, sobald die Formensprache weiter aufgeräumt wird. */

/* ===== DIE PILLE — ein Baustein für Namenslisten =====
   Überall dort, wo viele kurze Namen nebeneinanderstehen: Leistungsfächer,
   W-Seminare, Pluskurse. Ruhig, weil die Fläche trägt und nicht die Kante.
   Mit `chip--mehr` öffnet sich beim Überfahren ein Blatt darüber; der Text
   steht dabei vollständig in der Seite und ist nur zugeklappt.
   Auf schmalen Bildschirmen steht er von vornherein da. */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  position: relative; font-size: var(--fs-kompakt); line-height: 1.35; color: var(--ink-2);
  background: var(--white); border: 1px solid rgba(18,35,58,.14);
  border-radius: var(--pill); padding: 8px 16px; max-width: 100%;
}
/* Die Art des Kurses gibt die Farbe — Sprachen, MINT, Bühne, Sport, Miteinander. */
.chip--blau  { --c: var(--blau);  }
.chip--gruen { --c: var(--gruen); }
.chip--rot   { --c: var(--rot);   }
.chip--ocker { --c: var(--ocker); }
.chip--grau  { --c: var(--ink-3); }
.chips .chip[class*="chip--"] { border-color: color-mix(in srgb, var(--c) 34%, transparent); }
.chips .chip[class*="chip--"]:not(.chip--mehr) { color: var(--ink); }
.chip--mehr { cursor: default; transition: background .18s ease, color .18s ease; }
.chip--mehr::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c, var(--blau)); margin-left: 9px; vertical-align: 2px; opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.chip--mehr:hover, .chip--mehr:focus-within, .chip--mehr:focus-visible { background: var(--c, var(--blau)); border-color: var(--c, var(--blau)); color: #fff; outline: none; }
.chip--mehr:hover::after, .chip--mehr:focus-within::after { background: #fff; opacity: 1; transform: scale(1.4); }
.chip-blatt {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 8;
  min-width: 210px; max-width: 320px; padding: 12px 16px 13px;
  background: #fff; border-radius: var(--radius); border-top: 3px solid var(--c, var(--blau));
  box-shadow: var(--schatten-flach);
  font-family: var(--font-serif); font-size: var(--fs-kompakt); line-height: 1.3; color: var(--ink-2);
  opacity: 0; pointer-events: none; transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.4,0,.2,1);
}
/* Das Blatt kann ein Bild tragen — am Schreibtisch über dem Text, auf dem
   Handy bleibt es weg, sonst würden 18 Bilder die Liste sprengen. */
.chip-blatt img { display: block; width: 100%; height: 132px; object-fit: cover;
  object-position: center 32%; border-radius: var(--radius); margin: -2px 0 10px; }
.chip-blatt img.blatt-logo { object-fit: contain; height: 124px; background: #fff; padding: 6px 0 2px; }
@media (max-width: 760px) { .chip-blatt img { display: none; } }
/* Trägt das Blatt Titel und Satz, steht der Titel voran. */
.chip-blatt strong { display: block; margin-bottom: 6px; font-weight: 400; color: var(--ink); }
.chip-blatt strong + * , .chip-blatt strong ~ br { }
.chip--mehr .chip-blatt:has(strong) { font-family: var(--font-sans); font-size: var(--fs-klein); line-height: 1.6; color: var(--ink-2); }
.chip--mehr .chip-blatt:has(strong) strong { font-family: var(--font-serif); font-size: var(--fs-kompakt); line-height: 1.3; }
.chip--mehr:hover .chip-blatt, .chip--mehr:focus-within .chip-blatt, .chip--mehr:focus-visible .chip-blatt {
  opacity: 1; transform: translate(-50%, 0);
}
@media (max-width: 760px) {
  .chip { font-size: var(--fs-klein); padding: 8px 14px; }
  .chip-blatt { position: static; opacity: 1; transform: none; min-width: 0; max-width: none;
    display: block; margin-top: 8px; box-shadow: none; border: none; border-top: 1px solid var(--border);
    padding: 8px 0 0; font-size: var(--fs-klein); }
  .chip--mehr:hover, .chip--mehr:focus-within { background: var(--white); border-color: rgba(18,35,58,.14); color: var(--ink); }
  .chip--mehr::after { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   STARTSEITE — Neufassung vom 24. August 2026
   Die Startseite spricht jetzt dieselbe Formensprache wie die Unterseiten:
   ein Kopfbild über die volle Breite, die Zickzacklinie als Unterkante,
   redaktionelle Abschnittsköpfe (topic-intro) und Bildmosaike.
   Die alten Regeln (.hero, .saeule, .ziel-banner, .schulleben) bleiben
   vorerst stehen, damit nichts auf anderen Seiten bricht.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Hinweisband zum Aufbau: ganz oben, über der Service-Leiste --- */
.aufbau-band {
  position: fixed; top: 0; left: 0; right: 0; z-index: 102;
  display: flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 var(--takt-seite);
  background: var(--ocker-lt); border-bottom: 1px solid var(--border);
  font-size: var(--fs-klein); color: var(--ink-2); text-align: center;
}
.aufbau-band strong { font-weight: 600; color: var(--ink); }
.aufbau-band a { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
.startseite .nav-utility { top: 32px; }
.startseite.has-topbar #main-nav { top: 66px; }
@media (max-width: 1024px) {
  .aufbau-band { height: auto; padding: 6px 16px; line-height: 1.4; font-size: var(--fs-marke); }
  .startseite .nav-utility { top: 0; }
  .startseite.has-topbar #main-nav { top: 52px; }
}

/* --- DIE BÜHNE: Kopfbild über die volle Breite, wechselnde Motive --- */
.buehne {
  position: relative; overflow: hidden;
  margin-top: 134px;
  min-height: clamp(430px, 64vh, 660px);
  display: flex; align-items: flex-end;
  background: var(--navy);
}
@media (max-width: 1024px) { .buehne { margin-top: 105px; min-height: clamp(380px, 56vh, 520px); } }

.bu-bilder { position: absolute; inset: 0; }
.bu-bild {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.bu-bild.ist-da { opacity: 1; }
.bu-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bildzeile rechts unten — sagt, was zu sehen ist, und führt dorthin */
.bu-bild figcaption {
  position: absolute; right: var(--takt-seite); bottom: 26px;
  font-size: var(--fs-marke); letter-spacing: 0;
  color: rgba(255,255,255,.82);
}
.bu-bild figcaption a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.bu-bild figcaption a:hover { color: #fff; border-color: #fff; }
@media (max-width: 700px) { .bu-bild figcaption { display: none; } }

/* Der Schleier trägt die Schrift: von links unten dunkel nach rechts oben klar */
.bu-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,40,65,.86) 0%, rgba(14,40,65,.60) 32%, rgba(14,40,65,.20) 60%, rgba(14,40,65,.04) 100%),
    linear-gradient(to top, rgba(14,40,65,.58) 0%, rgba(14,40,65,0) 48%);
}

.bu-text {
  position: relative; z-index: 3;
  text-shadow: 0 2px 20px rgba(14,40,65,.6), 0 1px 3px rgba(14,40,65,.45);
  max-width: var(--max-w); width: 100%;
  margin: 0 auto; padding: 0 var(--takt-seite) 74px;
}
.bu-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-klein); letter-spacing: 0;
  color: rgba(255,255,255,.72); margin-bottom: 16px;
}
/* Der Titel zitiert die Leitbegriffe-Treppe im Haus: weiße Schrift,
   darunter der Farbbalken des jeweiligen Kapitels. So bleiben die
   CD-Farben exakt und die Schrift auf dem Foto lesbar. */
.bu-titel {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: var(--fs-seite); line-height: 1.16;
  letter-spacing: var(--ls-eng); margin: 0;
  display: flex; flex-direction: column; gap: .16em;
}
.bu-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.bu-titel span[class^="accent-"] {
  color: #fff; position: relative; padding-bottom: .12em;
}
.bu-titel span[class^="accent-"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 5px; border-radius: 3px;
}
.bu-titel .accent-blau::after  { background: var(--blau); }
.bu-titel .accent-ocker::after { background: var(--ocker); }
.bu-titel .accent-gruen::after { background: var(--gruen); }
.bu-titel .accent-rot::after   { background: var(--rot); }
.bu-strich { color: rgba(255,255,255,.5); font-weight: 400; }
@media (max-width: 700px) { .bu-strich { display: none; } }

.bu-sub {
  margin-top: 22px; max-width: 620px;
  font-size: var(--fs-text); line-height: 1.7; color: rgba(255,255,255,.9);
}
.bu-mehr {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  font-size: var(--fs-kompakt); font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px;
  transition: gap .18s ease, border-color .18s ease;
}
.bu-mehr:hover { gap: 10px; border-color: #fff; }

/* Blättermarken — im Textblock statt am Bildrand, damit sie greifbar sind
   und die Zickzacklinie sie nicht verschluckt. */
.bu-punkte { display: flex; gap: 9px; margin-top: 26px; }
.bu-punkt {
  width: 13px; height: 13px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.32);
  border: 1.5px solid rgba(255,255,255,.75);
  transition: background .2s ease, width .3s ease, border-radius .3s ease;
}
.bu-punkt:hover { background: rgba(255,255,255,.75); }
.bu-punkt.ist-da { width: 34px; border-radius: var(--radius); background: #fff; border-color: #fff; }
.bu-punkt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- AKTUELLES: Leitmeldung groß, daneben zwei, rechts die Termine --- */
.redaktionsband {
  display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 28px;
  align-items: start;
}
/* Vier gleich große Karten im 2x2-Raster. Die frühere Lösung mit einer
   großen Leitmeldung links ergab neben der schmalen Terminspalte drei
   verschiedene Breiten und wirkte unruhig. */
.redaktionsband .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1024px) {
  .redaktionsband { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .redaktionsband .news-grid { grid-template-columns: 1fr; } }

.termin-spalte {
  background: var(--mist); border-radius: var(--radius);
  padding: 22px 20px 18px; border-top: 3px solid var(--gruen);
}
.ts-titel {
  font-size: var(--fs-marke); font-weight: 700;
  letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--gruen);
  margin-bottom: 14px;
}
.ts-liste { list-style: none; margin: 0; padding: 0; }
.ts-liste li { padding: 11px 0; border-top: 1px solid var(--border); }
.ts-liste li:first-child { border-top: none; padding-top: 0; }
.ts-datum {
  display: block; font-size: var(--fs-marke);
  color: var(--ink-3); margin-bottom: 3px;
}
.ts-was { display: block; font-size: var(--fs-kompakt); line-height: 1.45; color: var(--ink-2); font-weight: 600; }
.ts-wo { display: block; font-size: var(--fs-klein); color: var(--ink-2); margin-top: 2px; }
.ts-leer { font-size: var(--fs-klein); line-height: 1.6; color: var(--ink-2); }
.ts-mehr {
  display: inline-block; margin-top: 14px;
  font-size: var(--fs-klein); font-weight: 600; color: var(--gruen);
}

/* --- SCHULPROFIL: die zwei Wege --- */
.profil { padding: var(--takt) var(--takt-seite); background: var(--white); }
.wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
@media (max-width: 700px) { .wege { grid-template-columns: 1fr; } }
.weg {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px 26px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.weg:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.weg-rule { display: block; width: 46px; height: 3px; border-radius: 2px; margin-bottom: 18px; background: var(--c, var(--blau)); }
.weg--blau  { --c: var(--blau); }
.weg--gruen { --c: var(--gruen); }
.weg h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0 0 12px; color: var(--ink); }
.weg p { font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); margin: 0; }
.weg-mehr {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: var(--fs-klein); font-weight: 600; color: var(--c, var(--blau));
  transition: gap .18s ease;
}
.weg:hover .weg-mehr { gap: 10px; }
.wege-link { text-align: center; margin-top: 26px; }

/* --- DIE VIER KAPITEL als Bildmosaik --- */
.kapitel { padding: var(--takt) var(--takt-seite); background: var(--mist); }
.kap-mosaik {
  display: grid; gap: 14px; margin-top: 40px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "a a b b"
    "a a c d";
  grid-auto-rows: minmax(168px, 20vw);
}
.kap-mosaik > :nth-child(1) { grid-area: a; }
.kap-mosaik > :nth-child(2) { grid-area: b; }
.kap-mosaik > :nth-child(3) { grid-area: c; }
.kap-mosaik > :nth-child(4) { grid-area: d; }
@media (max-width: 860px) {
  .kap-mosaik {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a a" "b b" "c d";
    grid-auto-rows: minmax(180px, 34vw);
  }
}

.kap {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--navy);
}
.kap img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.kap:hover img { transform: scale(1.045); }
/* Der Verlauf trägt die Schrift und bleibt auf jedem Motiv dunkel genug */
.kap::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14,40,65,.90) 0%, rgba(14,40,65,.55) 38%, rgba(14,40,65,.06) 78%);
}
.kap-blatt {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 20px 22px 20px;
  display: flex; flex-direction: column;
  border-bottom: 3px solid var(--c, var(--blau));
}
.kap--blau  { --c: var(--blau); }
.kap--ocker { --c: var(--ocker); }
.kap--gruen { --c: var(--gruen); }
.kap--rot   { --c: var(--rot); }
.kap-tag {
  font-family: var(--font-mono); font-size: var(--fs-marke); letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 6px;
}
.kap-h3 {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: var(--fs-h3); line-height: 1.25;
}
/* Der Text steht vollständig in der Seite und ist nur zugeklappt */
.kap-p {
  font-size: var(--fs-kompakt); line-height: 1.6; color: rgba(255,255,255,.9);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.kap-mehr {
  font-size: var(--fs-klein); font-weight: 600; color: #fff;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.kap:hover .kap-p, .kap:focus-visible .kap-p { max-height: 10em; opacity: 1; margin-top: 10px; }
.kap:hover .kap-mehr, .kap:focus-visible .kap-mehr { max-height: 3em; opacity: 1; margin-top: 12px; }
.kap-gross .kap-blatt { padding: 26px 28px 24px; }
/* Auf schmalen Schirmen und ohne Zeigegerät steht alles von vornherein da */
@media (hover: none), (max-width: 860px) {
  .kap-p { max-height: 12em; opacity: 1; margin-top: 10px; }
  .kap-mehr { max-height: 3em; opacity: 1; margin-top: 10px; }
}

/* --- DAS HAUS: weiches Band mit der Stimme einer Schülerin --- */
.hausband {
  position: relative; overflow: hidden; background: var(--navy);
  min-height: clamp(280px, 32vw, 400px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--takt) var(--takt-seite);
}
.hb-bild { position: absolute; inset: 0; }
.hb-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 53%;
  display: block;
  filter: blur(4px) saturate(.9) brightness(.86);
  transform: scale(1.08);
}
/* Der Schleier liegt nur unter der Schrift, damit Haus und Menschen sichtbar bleiben */
.hausband::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 58% 72% at 50% 50%, rgba(14,40,65,.80) 0%, rgba(14,40,65,.46) 58%, rgba(14,40,65,.06) 100%);
}
.hb-inner {
  position: relative; z-index: 2; max-width: 780px; text-align: center;
  text-shadow: 0 2px 18px rgba(14,40,65,.75), 0 1px 3px rgba(14,40,65,.5);
}
.hb-inner blockquote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-aussage); line-height: 1.45; color: #fff;
}
.hb-inner blockquote strong { font-style: normal; color: #f0d070; font-weight: 600; }
.hb-quelle {
  margin-top: 16px; 
  font-size: var(--fs-klein); letter-spacing: 0; color: rgba(255,255,255,.55);
}

/* --- Das Mut-Blatt: ein Hochformat, das für sich steht --- */
.mutbild {
  max-width: 340px; margin: calc(var(--takt) * .8) auto calc(var(--takt) * .9);
  text-align: center;
}
.mutbild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--schatten-flach);
}
.mutbild .bildzeile { margin-top: 12px; text-align: center; }
@media (max-width: 640px) { .mutbild { max-width: 260px; } }

/* --- Einzelbild Keramik (bleibt wie gehabt) --- */
.keramik {
  max-width: 190px; margin: 40px auto 12px; text-align: center;
  transform: rotate(-2deg);
}


/* ══════════════════════════════════════════════════════════════════════
   STARTSEITE — Angleichung an die Unterseiten (24. August 2026)
   ══════════════════════════════════════════════════════════════════════ */

/* Fluchtlinie: Die Unterseiten rücken ihre Textspalte um bis zu 130 px nach
   links, damit das Zickzack-Register rechts freien Rand hat
   (body.hat-register). Die Startseite hat kein Register, muss aber dieselbe
   linke Kante halten — sonst springt der Textanfang beim Seitenwechsel.
   Derselbe Ausdruck, damit beide Seiten immer gleich rechnen. */
@media (min-width: 1240px) {
  body.startseite main .container,
  body.startseite .bu-text {
    transform: translateX(calc(-1 * min(130px, (100vw - var(--max-w) - 96px) / 2 - 40px)));
  }
}

/* --- GRUSSWORT: in der Form der Unterseiten ---------------------------
   Vorher: eine Sonderform mit 860 px Breite (die übrige Seite hält 1040),
   einem 172 px kleinen Porträt, willkürlichen Einzügen von 25 px und der
   Farbe var(--ink-light) — eine Variable, die es in der Formatvorlage nie
   gab, sodass der Fließtext seine Farbe vom Elternelement erbte.
   Jetzt: Bild-Text-Auftakt wie auf den Unterseiten, Text links, Porträt
   rechts, volle Spaltenbreite, ein Abschnittskopf aus topic-intro. */
.grussword { padding: var(--takt) var(--takt-seite); background: var(--mist); }





.gw-sub {
  font-size: var(--fs-text); line-height: 1.75; color: var(--ink-2);
  font-weight: 400; margin-bottom: 16px; padding-left: 0;
}
.gw-gruss { margin-bottom: 4px; }
.gw-sig {
  font-size: var(--fs-kompakt); line-height: 1.6; color: var(--ink-2);
  padding-left: 0; margin-top: 4px;
}
.gw-sig strong { font-weight: 600; color: var(--blau); }
@media (max-width: 860px) {


}


/* ══════════════════════════════════════════════════════════════════════
   GRUSSWORT — zweite Fassung (24. August 2026)
   Vorher stand das Porträt als große Spalte neben dem Text und drückte den
   Abschnitt in eine Kastenform. Jetzt trägt das Zitat den Abschnitt, und
   das Gesicht steht klein bei der Unterschrift — dort, wo eine Unterschrift
   ein Gesicht bekommt.
   ══════════════════════════════════════════════════════════════════════ */
.gw-zitat {
  font-family: var(--font-serif);
  font-size: var(--fs-text);
  line-height: 1.65; font-weight: 400; font-style: normal;
  color: var(--blau);
  max-width: 900px; margin: 0 0 34px;
  padding-top: 26px; position: relative;
  quotes: "\201E" "\201C";
}
.gw-zitat::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 4px; border-radius: 2px; background: var(--ocker);
}
.gw-zitat::after { content: none; }

.gw-text { max-width: 820px; }
.gw-sub {
  font-size: var(--fs-text); line-height: 1.75; color: var(--ink-2);
  font-weight: 400; margin-bottom: 16px; padding-left: 0;
}
.gw-sub:last-child { margin-bottom: 0; }

.gw-unterschrift {
  display: flex; align-items: center; gap: 18px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--border);
  max-width: 820px;
}
.gw-portraet {
  width: 84px; height: 84px; flex: 0 0 84px;
  border-radius: 50%; object-fit: cover; object-position: center 18%;
  display: block; box-shadow: var(--schatten-flach);
}
.gw-namen { min-width: 0; }
.gw-gruss {
  margin: 0 0 4px; font-size: var(--fs-kompakt); color: var(--ink-2);
}
.gw-sig {
  margin: 0; font-size: var(--fs-kompakt); line-height: 1.55; color: var(--ink-2);
  padding-left: 0;
}
.gw-sig strong { font-weight: 600; color: var(--blau); font-size: var(--fs-text); }

@media (max-width: 640px) {
  .gw-unterschrift { gap: 14px; }
  .gw-portraet { width: 66px; height: 66px; flex-basis: 66px; }
}




/* Text im saisonalen Hinweisband — die Regel fehlte seit dem Einbau. */
.sb-text { flex: 1 1 auto; }
.sb-text strong { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   DAS FENSTER — der angeschnittene Stundenplan auf der Startseite
   Kein Text über die Unterseiten, sondern ein Stück von ihnen. Der
   Anschnitt unten läuft in Weiß aus: Die Woche geht weiter, hinter dem
   Rand. Die .wo-Regeln gelten seitenübergreifend und tragen den Plan.
   ══════════════════════════════════════════════════════════════════════ */
.fenster { padding: var(--takt) var(--takt-seite); background: var(--white); }
.fenster-tafel {
  margin: 36px 0 0; position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 0; background: var(--white);
  box-shadow: var(--schatten-flach);
  overflow: hidden;
}
.wo--fenster { width: 100%; height: auto; display: block; }
/* Handy: die Wochenvorschau zeigt Montag und Dienstag. Ein Anschnitt zur
   Seite hin sagt, dass die Woche weitergeht — der Weg dorthin ist die
   Zeile „Die ganze Woche ansehen" darunter. */
@media (max-width: 1024px) {
  .fenster-tafel::before {
    content: ''; position: absolute; top: 0; right: 0; width: 60px;
    bottom: 62px; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--white) 80%);
  }
}
/* Der Anschnitt: die letzte Zeile läuft nach unten in Weiß aus */
.fenster-tafel::after {
  content: ; position: absolute; left: 0; right: 0; bottom: 62px;
  height: 74px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 88%);
}
.fenster-mehr {
  position: relative; z-index: 2;
  padding: 6px 0 22px; text-align: right;
}
.fenster-mehr a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-kompakt); font-weight: 600; color: var(--ocker);
  transition: gap .18s ease;
}
.fenster-mehr a:hover { gap: 12px; }
@media (max-width: 760px) {
  .fenster-tafel { padding: 16px 14px 0; }
  .fenster-tafel::after { bottom: 58px; height: 56px; }
}

/* Das Übertrittsband steht jetzt im Aktuelles-Block statt frei zwischen
   Zickzack und weißer Fläche — dort schwebte es ohne Zusammenhang. Bei den
   Neuigkeiten und Terminen gehört es inhaltlich hin. */
.aktuelles .saison-band { margin: 0 0 26px; }
/* Der Abstand zum Redaktionsband hängt nicht am Übertrittsband: Außerhalb
   seiner Saison ist es ausgeblendet und trägt keine Höhe. */
.redaktionsband { margin-top: 30px; }
.aktuelles .saison-band:not([hidden]) + .redaktionsband { margin-top: 0; }



/* Die drei Wege unter dem Auftakt des Selbstverständnisses */
.beleg-wege { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }



/* ══════════════════════════════════════════════════════════════════════
   DER SCHLUSS — die Treppe mit den vier Leitbegriffen
   In Textbreite statt über die volle Bildschirmbreite: Das Bild hat das
   Seitenverhältnis 2,14:1 und trägt feine Schrift auf den Stufen. Über die
   volle Breite gezogen wäre es entweder unscharf oder so hoch, dass es
   nicht mehr auf den Schirm passt; flacher beschnitten fällt „Gemeinsam"
   heraus. Deshalb: volle Höhe, Spaltenbreite.
   ══════════════════════════════════════════════════════════════════════ */
.schlussbild {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--takt-seite);
}
.schlussbild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}
/* Der Schnellzugriff schließt direkt an — er ist die Fußnote unter dem
   Schlussbild, kein eigener Auftritt mehr. */
.schlussbild + .service { padding-top: calc(var(--takt) * .7); }

/* Platzhalter für ein Foto, das noch kommt — in der Form, die das Projekt
   schon auf entdecken und begabtenfoerderung nutzt, nur über die Textbreite. */
.wir-platzhalter {
  margin-top: 28px; aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #2a4699, var(--blau));
  display: flex; align-items: center; justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════
   DIE SCHULGEMEINSCHAFT — ein Punkt je Mensch (wir.html)
   Der Satz darüber nennt die Zahlen, das Feld zeigt sie. Beim Überfahren
   einer Marke leuchtet ihre Gruppe auf und die übrigen treten zurück.
   Erzeugt mit scripts/gemeinschaft-bauen.cjs.
   ══════════════════════════════════════════════════════════════════════ */
.gm-feld { margin: 34px 0 0; }
.gm { width: 100%; height: auto; display: block; }
.gm-sus { fill: var(--blau); }
.gm-lk  { fill: var(--ocker); }
.gm-ref { fill: var(--ocker); opacity: .55; }
.gm-vw  { fill: var(--gruen); }
.gm-soz { fill: var(--gruen); opacity: .55; }
.gm-sl  { fill: var(--rot); }

/* Solange eine Marke gewählt ist, tritt alles andere zurück */

.gm-legende {
  display: flex; flex-wrap: wrap; gap: 9px 12px; margin-top: 18px;
}
.gm-marke {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--white);
  font-family: var(--font-sans); font-size: var(--fs-klein); color: var(--ink-2);
  cursor: pointer; transition: border-color .18s ease, color .18s ease;
}
.gm-marke::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, var(--blau)); flex-shrink: 0;
}
.gm-marke--sus { --c: var(--blau); }
.gm-marke--lk  { --c: var(--ocker); }
.gm-marke--ref { --c: var(--ocker); }
.gm-marke--ref::before { opacity: .55; }
.gm-marke--vw  { --c: var(--gruen); }
.gm-marke--soz { --c: var(--gruen); }
.gm-marke--soz::before { opacity: .55; }
.gm-marke--sl  { --c: var(--rot); }
.gm-marke:hover, .gm-marke:focus-visible {
  border-color: var(--c); color: var(--ink); outline: none;
}
.gm-zahl {
  font-size: var(--fs-kompakt); font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .gm-marke { font-size: var(--fs-klein); padding: 6px 12px 6px 10px; }
}

/* Die Eltern lassen sich nicht zählen — sie stehen als Satz statt als Punkte. */
.gm-dazu {
  align-self: center; font-size: var(--fs-klein); color: var(--ink-3);
  font-style: italic; padding-left: 4px;
}

/* Das Punktefeld der Erwachsenen im Gruppenkopf — größere Punkte, damit
   157 Menschen eine Fläche ergeben statt einer Zeile. */
.gm-feld--haus { margin-top: 30px; }
.gm--haus { max-width: 780px; }

/* Ein Porträt in der Spalte der Infobox */
.wib-portraet { margin: 0 0 14px; max-width: 190px; }
.wib-portraet img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--schatten-flach);
}

/* Ein Bildband im Gruppenkopf — damit der Kopf zeigt statt nur anzukündigen. */
.wir-band { margin: 30px 0 0; }
.wir-band img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 45%;
  border-radius: var(--radius); display: block;
}
.wir-band .bildzeile { margin-top: 10px; }

/* Das Kollegiumsbild im Gruppenkopf — über die Spaltenbreite, damit die
   Gesichter erkennbar bleiben. Das Bild ist von schräg oben aufgenommen;
   ein flacher Zuschnitt würde die hinteren Reihen abschneiden. */
.wir-kollegium { margin: 30px 0 0; }
.wir-kollegium img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--schatten-flach);
}
.wir-kollegium .bildzeile { margin-top: 10px; }

/* Eine Station innerhalb eines Kapitels von wir.html. Sie trägt keinen
   eigenen Abschnittskopf mehr, sondern einen Zwischenkopf — die Gliederung
   liegt beim Kapitel. Die feine Linie oben trennt, ohne einen neuen
   Abschnitt vorzutäuschen. */
.wir-station { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.wir-station:first-of-type { margin-top: 44px; }
@media (max-width: 760px) { .wir-station { margin-top: 40px; padding-top: 30px; } }

/* Zwei Bilder zwischen den Stationen — sie standen vor dem Umbau zwischen
   den Abschnitten und behalten ihren Platz im Lesefluss. */
.wir-zwischenbild { margin: 52px 0 0; border-radius: var(--radius); overflow: hidden; }
.wir-zwischenbild img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.wir-blatt { max-width: 230px; margin: 52px auto 0; text-align: center; transform: rotate(2deg); }

/* Schwung in die Stationen: Der Trennstrich trägt die Kapitelfarbe und
   läuft nur über ein Stück Breite, statt als graue Linie durchzuziehen.
   Die Kleinzeile darüber nimmt dieselbe Farbe auf. */
/* Der Farbstrich am Kopf jeder Station ist am 26. August entfallen: Er
   stand unmittelbar unter dem Abschnittstext und erklärte nichts. Zwei
   Stationen trennt jetzt eine feine Linie — vor der ersten trennt schon
   der Abschnittskopf. */
.wir-station { position: relative; border-top: none; padding-top: 0; }
.wir-station + .wir-station {
  margin-top: 78px; padding-top: 58px;
  border-top: 1px solid var(--border);
}
.wir-station .exp-eyebrow { color: var(--c, var(--blau)); }
/* Jede Station eine eigene Farbe — die vier des Corporate Designs im Wechsel */
.wir-station:nth-of-type(4n+1) { --c: var(--blau); }
.wir-station:nth-of-type(4n+2) { --c: var(--ocker); }
.wir-station:nth-of-type(4n+3) { --c: var(--gruen); }
.wir-station:nth-of-type(4n+4) { --c: var(--rot); }

/* ══════════════════════════════════════════════════════════════════════
   DAS KOLLEGIUMSBILD MIT DER LUPE
   ----------------------------------------------------------------------
   Zwei Ebenen: unten das Gruppenfoto, weichgezeichnet — die
   Weichzeichnung steckt in der Bilddatei (kollegium-unscharf.jpg), nicht
   im Browser. Darüber das Punktraster auf deckender Fläche
   (scripts/kollegium-raster.cjs).

   Der Zeiger schneidet ein rundes Fenster in das Raster und gibt die
   Gruppe frei. Beide Ebenen sind aus demselben Ausschnitt gerechnet und
   liegen deckungsgleich übereinander.

   --lupe ist per @property angemeldet, damit die Größe des Fensters
   weich wachsen kann. Weil die Anmeldung nicht vererbt, muss der Wert
   auf .wk-punkte selbst stehen — am Stapel käme er nie an.
   ══════════════════════════════════════════════════════════════════════ */
@property --lupe {
  syntax: '<length>'; inherits: false; initial-value: 1px;
}
.wk-stapel {
  --mx: 50%; --my: 50%;
  position: relative; border-radius: var(--radius); overflow: hidden;
  cursor: crosshair; display: block;
  /* Senkrecht scrollt die Seite, quer schiebt der Finger die Lupe */
  touch-action: pan-y;
}
.wk-stapel:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.wk-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
}
.wk-punkte {
  --lupe: 1px;
  position: relative; width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(circle var(--lupe) at var(--mx) var(--my),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, #000 100%);
  mask-image: radial-gradient(circle var(--lupe) at var(--mx) var(--my),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, #000 100%);
  transition: --lupe .3s ease;
}
/* Der Zeiger öffnet das Fenster, ein Tipp ebenso: .ist-lupe setzt main.js */
.wk-stapel:hover .wk-punkte,
.wk-stapel:focus-visible .wk-punkte,
.wk-stapel.ist-lupe .wk-punkte { --lupe: clamp(120px, 16vw, 230px); }

.wk-hinweis { color: var(--ink-3); }
/* Auf dem Handy war die Maske früher ganz abgeschaltet. Sie bleibt jetzt —
   das Fenster öffnet ein Tipp. Nur wenn ein Browser Masken gar nicht kann,
   steht das Raster ganz da; das Foto darunter ist ohnehin weichgezeichnet. */
@supports not ((mask-image: radial-gradient(circle, #000, #000)) or (-webkit-mask-image: radial-gradient(circle, #000, #000))) {
  .wk-hinweis { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   GEMEINSCHAFT (wir.html) — der Neubau vom 25. August 2026
   ----------------------------------------------------------------------
   Sechs leichte Bausteine lösen die schweren ab: Menschen ohne Kasten,
   Namen als Zeile, ein Wegweiser statt verstreuter Kontaktblöcke, Bänder
   über die volle Breite, ein Bildpaar und eine helle Einladung.
   Die früheren Formen (wib-card, smv-team, wir-person, wir-persons-2col)
   stehen weiterhin in der Formatvorlage, weil andere Seiten sie nutzen.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Menschen: Name, Rolle, Aufgaben. Kein Kasten, ein Farbstrich. --- */
.leute {
  display: grid; gap: 30px 34px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.leute--zwei  { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.leute--breit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Der Farbstrich über jeder Person ist am 26. August entfallen: zu viele
   kurze Striche auf einer Seite, ohne dass sie etwas erklären. Die Rolle
   trägt jetzt die Abschnittsfarbe — das reicht als Zuordnung. */
.person-name {
  font-size: var(--fs-kompakt); font-weight: 600;
  color: var(--ink-2); line-height: 1.4; letter-spacing: 0;
}
.person-rolle { font-size: var(--fs-klein); color: var(--ink-3); line-height: 1.55; margin-top: 5px; }
.person-tun { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.75; margin-top: 10px; }
.person-tun a { color: var(--c, var(--blau)); border-bottom: 1px solid var(--border); }

/* Dieselbe Form mit Porträt — der Elternbeirat hat Bilder, die anderen nicht. */
.leute--foto { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px 30px; }
.leute--foto .person { display: flex; align-items: flex-start; gap: 13px; }

.leute--foto .eb-foto { width: 42px; height: 42px; border-color: var(--border); }
.leute--foto .person--lead .eb-foto { width: 54px; height: 54px; border-color: var(--c, var(--blau)); }
.leute--foto .person--lead .person-name { font-size: var(--fs-text); }

/* --- Eine Reihe von Namen, die keine eigene Zeile je Person braucht. --- */
.namen-zeile {
  font-size: var(--fs-kompakt);
  color: var(--ink-2); line-height: 2; margin-top: 10px;
}
.namen-gruppen {
  display: grid; gap: 30px 44px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.namen-gruppen--eng { margin-top: 34px; }
.section-label--frei { margin-top: 48px; }

/* --- Kleine Anschlusszeilen unter einer Station --- */
.station-mehr { margin-top: 34px; }
.station-hinweis { margin-top: 28px; font-size: var(--fs-kompakt); color: var(--ink-3); line-height: 1.7; }
.station-hinweis a { color: var(--c, var(--blau)); border-bottom: 1px solid var(--border); }

/* --- Das Punktefeld bekommt Luft, weil es der Beweis des Auftakts ist --- */
.gm-feld--gross { margin-top: 46px; }
.gm-satz { margin-top: 18px; font-size: var(--fs-klein); color: var(--ink-3); }

/* --- Ein Band, das aus dem Container ausbricht ---------------------------
   Das Zwischenbild lag hier schon einmal über die volle Breite. Damit es
   das wieder tut, ohne die Abschnitte auseinanderzureißen, tritt es aus
   dem Container heraus statt aus dem Abschnitt.                          */
.atmo-band--frei {
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: 62px; margin-bottom: 4px;
}

/* --- Zwei Hochformate nebeneinander --- */
.bild-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 720px; margin: 38px auto 0;
}
.bild-duo figure { margin: 0; }
.bild-duo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); display: block;
}

/* --- Der Kontakt steht bei der Person, zu der er gehört ---------------
   Als Fließtext in einem eigenen Abschnitt ging er unter. Als kleiner
   Block direkt unter der Beschreibung ist er auf einen Blick da.        */
.kontakt-block {
  margin-top: 16px; padding: 13px 16px 14px;
  background: var(--white); border-radius: var(--radius);
  font-size: var(--fs-kompakt); line-height: 1.7; color: var(--ink-2);
}
.wir-section:not(.wir-section--alt) .kontakt-block { background: var(--mist); }
.einladung .kontakt-block { background: var(--white); }
.kontakt-block p { margin: 0; overflow-wrap: anywhere; }
.kontakt-block a { color: var(--c, var(--blau)); font-weight: 600; }
.kb-marke {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-marke); font-weight: 700;
  letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3);
}
.kb-hinweis { margin-top: 7px; font-size: var(--fs-klein); color: var(--ink-3); line-height: 1.65; }
.kb-hinweis a { font-weight: 500; }
.kontakt-block--breit { margin-top: 34px; padding: 16px 20px 17px; }

/* --- Adressen zum Schluss: drei ruhige Spalten --- */
.wib-row--drei { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.wib-row--drei .wib-address p { margin-bottom: 12px; }
@media (max-width: 860px) { .wib-row--drei { grid-template-columns: 1fr; gap: 30px; } }
.mb-adresse { margin-top: 34px; font-size: var(--fs-kompakt); }

/* --- Eine Einladung: helles Blatt mit Farbstrich oben, keine Vollfläche - */
.einladung {
  margin-top: 44px; background: var(--mist);
  border-top: 3px solid var(--ocker);
  border-radius: var(--radius); padding: 28px 34px 30px;
}
.einladung--blau { border-top-color: var(--blau); }
.einladung h4 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 9px; }
.einladung p { font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }
.einladung .betrag { font-weight: 600; color: var(--ink); }
.einladung .wibc-downloads { margin-top: 18px; flex-direction: row; flex-wrap: wrap; gap: 10px; }

/* --- Anschlussmaße für die Bausteine dieser Seite --- */
.wir-station .hf-grid { margin-top: 36px; }
.exp-subhead + .principles { margin-top: 30px; }
.wibc-downloads--reihe { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Der Hinweis auf das SMV-Treffen stand auf hellblauer Fläche — jetzt hell. */
.smv-treffen { background: var(--mist); margin-top: 38px; }

/* Das Schlussbild der Gemeinschaftsseite darf etwas größer sein als das
   Mut-Blatt der Startseite, weil es allein den Abschluss trägt. */
.mutbild--gross { max-width: 420px; }
@media (max-width: 640px) { .mutbild--gross { max-width: 280px; } }

/* Der Auftakt trägt seinen Fließtext direkt unter der Überschrift —
   dort ist der übliche Abstand des Abschnittskopfs zu groß. */
.topic-intro--eng { margin-bottom: 0; }

/* Ein Band, das eine ganze Szene trägt statt eines Ausschnitts:
   Sommerfest und Winterabend sind Hochformat-nahe Aufnahmen, ein
   schmaler Streifen würde die Menschen darin abschneiden. */
.atmo-band--hoch { height: clamp(300px, 38vw, 600px); }

/* Das Zeichnungs-Blatt steht auf wir.html zwischen zwei Abschnitten und
   braucht deshalb auch nach unten Luft. */
main > .wir-blatt { margin: 64px auto; }

/* Ein Bildpaar im Querformat (Lehrerband und Lehrerfragen) */
.bild-duo--quer { max-width: 100%; }
.bild-duo--quer img { aspect-ratio: 4 / 3; }

/* Setzt eine Station an den Anfang eines Abschnitts: dort trägt schon der
   Abschnitt den Abstand. */
.wir-station--erste { margin-top: 0; }


/* Platzhalter für ein Foto, das noch kommt — im Format des künftigen
   Bildes, damit später nichts springt. Ruhig statt als Vollfläche. */
.foto-folgt {
  margin-top: 32px; aspect-ratio: 21 / 9;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--ink-3);
}
.wir-section:not(.wir-section--alt) .foto-folgt { background: var(--mist); }
.foto-folgt svg { width: 30px; height: 30px; opacity: .6; }
.foto-folgt span { font-size: var(--fs-klein); }

/* --- Schriften: die Stelle ist eine Überschrift, der Mensch ein Name ---
   In der Beratung führt die Stelle („Schulpsychologie"), darunter steht,
   wer sie besetzt. Überschrift in Arial wie jede andere, der Name in der
   Schreibmaschinenschrift wie jeder andere Name auf dieser Seite. */
.person-stelle {
  font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700;
  color: var(--ink); line-height: 1.25; margin-bottom: 8px;
}
.person-stelle + .person-name { margin-top: 0; }

/* Eine Zeile mit Angaben statt Namen — dieselbe Größe wie .namen-zeile,
   aber in Arial, weil dort Sätze stehen. */
.info-zeile { margin-top: 10px; font-size: var(--fs-kompakt); color: var(--ink-2); line-height: 1.8; }

/* --- Beratung: die Kontaktkästen auf einer Höhe ------------------------
   Die drei Beschreibungen sind verschieden lang, also rutschten die
   Kästen darunter auf drei verschiedene Höhen. Mit `subgrid` teilen sich
   die drei Spalten dieselben vier Zeilen — Überschrift, Name,
   Beschreibung, Kontakt. Der Kasten beginnt dadurch überall an derselben
   Stelle und ist überall gleich hoch.
   Der Zeilenabstand des Rasters steht dafür auf 0; die Abstände zwischen
   den vier Zeilen tragen die Bausteine selbst. Auf schmalen Schirmen
   stapeln sich die drei untereinander, dort ist nichts auszurichten. */
.leute--breit {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  row-gap: 0; column-gap: 34px;
}
.leute--breit .person { display: flex; flex-direction: column; }
.leute--breit .person-tun { flex: 1; }
@supports (grid-template-rows: subgrid) {
  .leute--breit .person {
    display: grid; grid-template-rows: subgrid; grid-row: span 4;
  }
}
@media (max-width: 860px) {
  .leute--breit { grid-template-columns: 1fr; row-gap: 34px; }
  .leute--breit .person { display: flex; flex-direction: column; }
  .leute--breit .person-tun { flex: 0 1 auto; }
}

/* Das Porträt in der Spalte der Hausverwaltung trägt jetzt eine Bildzeile. */
.wib-portraet figcaption { margin-top: 8px; }

/* Die schlichte Personenliste in einer Infobox (Ministerialbeauftragte) */
.leute-schlicht { display: flex; flex-direction: column; gap: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   DIE TAFEL DER SCHULLEITUNG
   ----------------------------------------------------------------------
   Vier Spalten, eine je Person: Name oben, darunter ihre Aufgaben. Vorher
   lagen alle Felder in einem gemeinsamen Raster und nur die Farbe verriet,
   wem sie gehören — das war zum Raten.

   Die Farbe steht deshalb nur noch einmal je Spalte, als Linie unter dem
   Namen. Die Aufgaben darunter brauchen keine eigene Auszeichnung mehr;
   sie stehen ja schon bei ihrem Menschen.
   ══════════════════════════════════════════════════════════════════════ */
.sl-tafel {
  display: grid; gap: 30px 32px; margin-top: 36px;
  grid-template-columns: repeat(4, 1fr);
}
.sl-spalte--blau  { --f: var(--blau); }
.sl-spalte--ocker { --f: var(--ocker); }
.sl-spalte--gruen { --f: var(--gruen); }
.sl-spalte--rot   { --f: var(--rot); }

.sl-kopf { padding-bottom: 14px; border-bottom: 3px solid var(--f); }
.sl-name {
  display: block; font-size: var(--fs-text);
  font-weight: 600; color: var(--ink-2); line-height: 1.3; letter-spacing: 0;
}
.sl-rolle { display: block; margin-top: 6px; font-size: var(--fs-klein); color: var(--ink-3); line-height: 1.5; }

.sl-liste { display: flex; flex-direction: column; }
.sl-feld {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-kompakt); line-height: 1.5; color: var(--ink-2);
}
a.sl-feld { color: var(--ink-2); transition: color .15s ease; }
a.sl-feld:hover { color: var(--f); }
.sl-pfeil { margin-left: auto; color: var(--f); font-size: var(--fs-klein); }

@media (max-width: 980px) { .sl-tafel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-tafel { grid-template-columns: 1fr; } }

/* Die Legende des Punktefelds führt in die Seite --------------------------
   Vorher hob das Überfahren eine Gruppe nur hervor. Jetzt ist jede Marke
   ein Verweis auf ihre Gruppe — aus der Legende wird das Verzeichnis der
   Seite, und das Hervorheben hat einen Zweck. */
a.gm-marke { text-decoration: none; }
a.gm-marke:hover { transform: translateY(-1px); }

/* Die Stationen des ersten Kapitels tragen ihre Farbe ausdrücklich, nicht
   aus ihrer Position. Sonst landet die Beratung auf Rot, direkt unter
   einer Tafel, die mit Rot endet. Diese Regeln stehen hinter den
   nth-of-type-Regeln und haben dieselbe Stärke — die spätere gewinnt. */
.wir-station.acc--blau  { --c: var(--blau); }
.wir-station.acc--ocker { --c: var(--ocker); }
.wir-station.acc--gruen { --c: var(--gruen); }
.wir-station.acc--rot   { --c: var(--rot); }

/* --- Die erweiterte Schulleitung --------------------------------------
   Dieselbe farbige Linie wie über den vier Spalten der Tafel, damit der
   Block dazugehört und trotzdem für sich steht. */
.sl-erweitert { margin-top: 44px; padding-top: 24px; border-top: 3px solid var(--c, var(--blau)); }
.sl-etitel { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); }
.sl-etext { margin-top: 10px; font-size: var(--fs-kompakt); line-height: 1.8; color: var(--ink-2); max-width: 74ch; }
.sl-erweitert .namen-zeile { margin-top: 14px; }

/* --- Hervorhebungen kehren sich mit dem Abschnittsgrund um -------------
   Der Treffen-Hinweis der SMV und die Einladungen standen auf Beige, weil
   ihr Abschnitt weiß war. Seit das zweite Kapitel beige ist, brauchen sie
   dort Weiß. Eine Stelle für beide Richtungen. */
.wir-section--alt .smv-treffen,
.wir-section--alt .einladung { background: var(--white); }

/* --- Die Tafel: eine Linie für alle Aufgaben, ein Name tritt hervor ----
   Silvias Rollen sind verschieden lang — Duschkas Zeile bricht dreimal um,
   Ceehs einmal. Dadurch begannen die vier Aufgabenlisten auf vier Höhen.
   Mit `subgrid` teilen sich die Spalten dieselben zwei Zeilen (Kopf und
   Liste); die farbige Linie unter den Namen liegt dadurch überall gleich
   hoch und die Aufgaben beginnen auf einer Linie.

   Ohne Hervorhebung einzelner Personen: Wer eine Spalte überfuhr, sah sie
   deutlich und die übrigen traten auf 45 % zurück. Auf Wunsch der Schul-
   leitung entfernt (12.09.2026) — die Tafel zeigt ein Team, und das Team
   steht gleich da. */
.sl-tafel { grid-template-rows: auto auto; }
.sl-spalte { display: flex; flex-direction: column; }
.sl-kopf { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-start; }
@supports (grid-template-rows: subgrid) {
  .sl-spalte { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  .sl-kopf { min-height: 0; }
}
@media (max-width: 560px) {
  .sl-kopf { min-height: 0; }
}

/* Die erste Station eines Abschnitts braucht keinen eigenen Abstand mehr —
   den trägt der Abschnitt. */
.wir-station--erste > .exp-subhead:first-child { margin-top: 0; }

/* Ein Kontaktkasten in einer Einladung: Er muss sich von der Einladung
   abheben, und die kehrt ihre Farbe mit dem Abschnittsgrund um. */
.wir-section--alt .einladung .kontakt-block { background: var(--mist); }
.wir-section:not(.wir-section--alt) .einladung .kontakt-block { background: var(--white); }

.station-hinweis + .leute { margin-top: 30px; }

/* --- Platzhalter für ein Zitat ------------------------------------------
   Dieselbe Form wie das fertige .pquote, nur in Grau und mit gestrichelter
   Kante — damit beim Einsetzen des Satzes nichts springt. */
.pquote--platz {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 26px 30px 22px; color: var(--ink-3);
}
.pquote--platz .pq-mark { color: var(--border); }
.pquote--platz p { color: var(--ink-3); font-style: italic; }
.pquote--platz .pq-platz-hinweis {
  display: block; margin-top: 14px;
  font-size: var(--fs-marke); font-weight: 700;
  letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   entfalten — durchgestaltet in der Linie der anderen Seiten
   Maßstab war „entdecken": helle Seite, Bilder in Containerbreite mit
   runden Ecken, eine dunkle Karte als Betonung, farbige Kleinüberschriften
   mit Farbkante, Überschriften um 30 px. Nichts läuft randlos, nichts
   ist riesig. entfalten benutzt dieselben Bausteine, nur anders gesetzt.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   entfalten — Das Bühnenbild  (nicht .buehne der Startseite)
   „Frauenpower" — drei Schülerinnen stemmen das Schulhaus. Das Bild sagt
   in einem Zug, worum es auf dieser Seite geht, und steht deshalb ganz:
   nicht beschnitten, auf der Unterkante, der Himmel läuft nach oben in
   den Grund aus. Es eröffnet das Kapitel „Kinder stark machen".
   ═══════════════════════════════════════════════════════════════════ */
.buehnenbild {
  position: relative; overflow: hidden;
  padding: 0 var(--takt-seite);
  background: radial-gradient(120% 100% at 74% 24%, #2a5074 0%, #142f4a 54%, #091827 100%);
}
.buehnenbild::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -6%; top: 2%; width: 66%; height: 96%;
  background: radial-gradient(50% 46% at 52% 40%, rgba(139,183,224,.36) 0%, rgba(139,183,224,.12) 46%, transparent 72%);
}
.buehnenbild .container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 500px; gap: 36px;
  align-items: end; min-height: 660px;
}
.bb-wort { padding: 104px 0 100px; position: relative; z-index: 2; }
.bb-kennung {
  font-family: var(--font-mono); font-size: var(--fs-klein); letter-spacing: 0;
  color: var(--rot); margin-bottom: 20px;
}
.bb-titel {
  font-size: var(--fs-seite); line-height: .97; color: #fff;
  letter-spacing: var(--ls-eng);
}
.bb-titel em { font-style: normal; color: var(--rot); }
.bb-sub {
  font-size: var(--fs-text); line-height: 1.7; color: rgba(255,255,255,.74);
  max-width: 420px; margin-top: 24px;
}
.bb-bild { margin: 0; align-self: end; }
.bb-bild img {
  width: 100%; height: auto; display: block;
  filter: contrast(1.09) brightness(1.09) saturate(.92);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 100%);
}
.bb-bild figcaption {
  font-size: var(--fs-marke); line-height: 1.5;
  color: rgba(255,255,255,.45); margin-top: 12px; padding-bottom: 24px;
}
@media (max-width: 940px) {
  .buehnenbild .container { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .bb-wort { padding: 76px 0 26px; }
  .bb-bild { margin: 0 calc(-1 * var(--takt-seite)); }
  .bb-bild figcaption { padding: 0 var(--takt-seite) 24px; }
}

/* Kapitelanfang: eine Stufe größer als eine Zwischenüberschrift, mit
   Farbkante — aber weit unterhalb einer Schlagzeile. */
.kapitel { padding-top: calc(var(--takt) + 24px); padding-bottom: calc(var(--takt) + 8px); }
.kapitel .topic-intro { position: relative; padding-top: 24px; }
.kapitel .topic-intro::before { display: none; }
.kapitel .topic-intro::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 60px; height: 4px; background: var(--c, var(--blau));
}
.kapitel .section-title { font-size: var(--fs-h2); line-height: 1.1; margin-top: 10px; }
.kapitel .section-sub { max-width: 660px; margin-top: 16px; }


/* Die Stimme: ein eigenes, ruhiges Format — Farbkante, Name in der
   Schreibmaschinenschrift. Groß genug, um eine Zäsur zu sein, klein
   genug, um keine Schlagzeile zu werden. */
.stimme-gross { margin: 56px 0 48px; max-width: 900px; }
.stimme-gross::before {
  content: ""; display: block; width: 54px; height: 4px;
  background: var(--c, var(--rot)); margin-bottom: 26px;
}
.stimme-gross p {
  font-weight: 800; font-size: var(--fs-aussage); line-height: 1.17;
  letter-spacing: var(--ls-eng); color: var(--ink); margin: 0;
}
.stimme-gross cite {
  display: block; margin-top: 18px; 
  font-size: var(--fs-marke); letter-spacing: 0; color: var(--c, var(--rot));
  font-style: normal;
}
@media (max-width: 760px) {
  .stimme-gross { margin: 40px 0 36px; }
  .stimme-gross p { font-size: var(--fs-h3); }
}

/* Ein Bild je Kapitel etwas breiter als der Text — aber im Container
   und mit runden Ecken, wie überall auf der Website. */
.vollbild.vollbild { margin: 48px 0; max-width: none; width: auto; }
.vollbild.vollbild img {
  width: 100%; height: clamp(260px, 32vw, 420px); object-fit: cover;
  border-radius: var(--radius); display: block;
}
@media (max-width: 760px) { .vollbild.vollbild img { height: 220px; } }


/* Der Schriftzug steht mittig zum Bild, das Bild bleibt auf der Unterkante. */
.buehnenbild .bb-wort { align-self: center; }

/* Ein Leitsatz statt eines Kapitelkopfes: eine Aussage, keine Überschrift. */

/* Aufmacher ohne Bild: der Text steht allein, in Lesebreite. */
.exp-auftakt { max-width: 720px; }
.exp-auftakt h2 { font-size: var(--fs-h2); line-height: 1.15; margin: 10px 0 14px; }
.exp-auftakt p { font-size: var(--fs-text); line-height: 1.8; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════
   entfalten — Die Ämtertafel
   Tutoren, Schulsanitätsdienst, Mediation, Schüler helfen Schülern und
   Hausaufgabenbetreuung standen als fünf fast gleiche Abschnitte
   hintereinander — ein Drittel der Seite als Liste. Sie teilen sich
   jetzt eine Tafel: oben die Wahl in den Hausfarben, darunter das
   gewählte Amt. Die Machart ist dieselbe wie bei den Pluskurs-Pillen,
   damit die Seite eine Sprache spricht.
   ═══════════════════════════════════════════════════════════════════ */
.am-wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.am-wahl button {
  font-size: var(--fs-klein); letter-spacing: 0;
  border: 1px solid rgba(14,40,65,.16); background: transparent; color: var(--ink-3);
  padding: 9px 17px; border-radius: var(--pill); cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.am-wahl button:hover { color: var(--ink); border-color: rgba(14,40,65,.34); }
.am-wahl button[data-f="rot"].ist-an   { color:#fff; background: var(--rot);   border-color: var(--rot); }
.am-wahl button[data-f="gruen"].ist-an { color:#fff; background: var(--gruen); border-color: var(--gruen); }
.am-wahl button[data-f="ocker"].ist-an { color:#fff; background: var(--ocker); border-color: var(--ocker); }
.am-wahl button[data-f="blau"].ist-an  { color:#fff; background: var(--blau);  border-color: var(--blau); }

.am-tafel { display: none; padding-top: 20px; }
.am-tafel.ist-an { display: block; }
/* Der Aufmacher jedes Amtes trägt keine eigene Bühne mehr — die Tafel ist sie. */
.am-tafel .exp-feature { margin-top: 8px; }
@media (max-width: 760px) {
  .am-wahl { gap: 8px; }
  .am-wahl button { font-size: var(--fs-marke); padding: 8px 14px; }
}

/* ── Die Stimme: der Farbwechsel im Satz ist die Wirkung ──────────
   Ohne ihn steht dort ein schwarzer Block. Die hervorgehobene Wendung
   trägt die Farbe ihres Abschnitts, der Satz atmet etwas weiter. */
.stimme-gross { max-width: 760px; margin: 48px 0 42px; }
.stimme-gross p { font-weight: 700; font-size: var(--fs-aussage); line-height: 1.32; letter-spacing: var(--ls-eng); }
.stimme-gross p i { font-style: normal; color: var(--c, var(--rot)); }
@media (max-width: 760px) { .stimme-gross p { font-size: var(--fs-text); line-height: 1.38; } }

/* ── Die Ämterwahl steht jetzt im beigen Kapitelabschnitt und lädt
   zum Antippen ein: jede Pille trägt schon von sich aus ihre Farbe. ── */
.kapitel .am-wahl { margin-top: 34px; margin-bottom: 0; gap: 12px; }
.am-wahl button {
  font-size: var(--fs-klein); letter-spacing: 0;
  padding: 13px 24px; border-radius: var(--pill); cursor: pointer;
  border: 1.5px solid; background: transparent;
  transition: background .22s, color .22s, transform .22s, box-shadow .22s;
}
.am-wahl button[data-f="rot"]   { color: var(--rot);   border-color: rgba(229,0,109,.38); background: rgba(229,0,109,.07); }
.am-wahl button[data-f="gruen"] { color: var(--gruen); border-color: rgba(0,144,152,.38); background: rgba(0,144,152,.07); }
.am-wahl button[data-f="ocker"] { color: #a07e00;      border-color: rgba(206,161,0,.42); background: rgba(206,161,0,.10); }
.am-wahl button[data-f="blau"]  { color: var(--blau);  border-color: rgba(39,52,139,.34); background: rgba(39,52,139,.07); }
.am-wahl button:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.am-wahl button[data-f="rot"].ist-an   { color:#fff; background: var(--rot);   border-color: var(--rot); }
.am-wahl button[data-f="gruen"].ist-an { color:#fff; background: var(--gruen); border-color: var(--gruen); }
.am-wahl button[data-f="ocker"].ist-an { color:#fff; background: var(--ocker); border-color: var(--ocker); }
.am-wahl button[data-f="blau"].ist-an  { color:#fff; background: var(--blau);  border-color: var(--blau); }
.am-wahl button.ist-an { box-shadow: var(--schatten-flach); }
@media (max-width: 760px) {
  .am-wahl button { font-size: var(--fs-marke); padding: 10px 16px; }
  .kapitel .am-wahl { margin-top: 26px; }
}
/* Die Tafel schließt oben direkt an die Wahl im Abschnitt darüber an. */
.aemter { padding-top: 34px; }

/* ═══════════════════════════════════════════════════════════════════
   entfalten — Die sechs Begriffe
   Worum es auf dieser Seite geht, steht als Feld aus sechs Wörtern
   gleich am Anfang. Das Licht wandert von Wort zu Wort; die Farbe sagt,
   zu welchem der drei Kapitel ein Begriff gehört, und ein Klick führt
   dorthin. Damit ist es zugleich Aussage und Kompass.
   ═══════════════════════════════════════════════════════════════════ */
.worte { margin-top: 40px; }
.wo-satz {
  font-size: var(--fs-klein); letter-spacing: 0;
  color: var(--ink-3); margin-bottom: 20px;
}
.wo-feld {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  max-width: 940px;
}
.wo-wort {
  font-weight: 800; font-size: var(--fs-h2); line-height: 1.22;
  letter-spacing: var(--ls-eng); color: rgba(14,40,65,.17);
  transition: color .6s ease, opacity .6s ease;
}
.wo-wort:hover { color: rgba(14,40,65,.42); }
.wo-wort[data-f="blau"].ist-an  { color: var(--blau); }
.wo-wort[data-f="rot"].ist-an   { color: var(--rot); }
.wo-wort[data-f="ocker"].ist-an { color: var(--ocker); }
@media (max-width: 760px) {
  .wo-feld { gap: 2px 18px; }
  .wo-wort { font-size: var(--fs-h2); }
}

/* Die Begriffe stehen als eigene Zäsur in der Seitenmitte. */
.worte-band { padding-top: calc(var(--takt) + 16px); padding-bottom: calc(var(--takt) + 4px); }
.worte-band .worte { margin-top: 0; }

/* Ein Plakat verträgt keinen Anschnitt — es wird ganz gezeigt. */
.vollbild--ganz.vollbild img { height: auto; object-fit: contain; }

/* Auf entfalten nimmt die Randnotiz die Farbe ihres Kapitels an, statt
   überall rot zu stehen. Andere Seiten bleiben davon unberührt. */
.entfalten-page .mk-aside { border-left-color: var(--c, var(--rot)); }

/* Die Randnotiz verliert auf entfalten ihren Kasten: keine Fläche, kein
   Rahmen — nur die farbige Linie, an der der Text hängt. Das nimmt der
   Seite die Kästen, ohne einen Buchstaben zu ändern. */
.entfalten-page .mk-aside {
  background: none; border: 0;
  border-left: 3px solid var(--c, var(--rot));
  border-radius: 0; padding: 4px 0 4px 22px; max-width: 700px;
}
.entfalten-page .mk-aside h4 { font-size: var(--fs-kompakt); letter-spacing: 0; }
.entfalten-page .mk-aside p { font-size: var(--fs-kompakt); line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════════
   entfalten — Der Nachmittag als Strecke
   Die Logo-Zacke läuft auf jeder Seite als Kante unter dem Hero. Hier
   wird sie zum Gegenstand: Die Linie zieht durch die Breite, und die
   Pluskurse sitzen als Stationen auf ihren Spitzen und Kehren — jede in
   der Farbe ihrer Sparte. Die Spannweite von Altgriechisch bis Yoga ist
   die Aussage; hier sieht man sie in einem Blick.
   Auf dem Handy läuft die Strecke senkrecht am linken Rand.
   ═══════════════════════════════════════════════════════════════════ */
.strecke {
  position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start;
  column-gap: 36px; row-gap: 128px; align-items: center; padding: 46px 0 56px;
}
.strecke > svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.str-stat {
  flex: 0 0 auto; position: relative; z-index: 1;
  font-size: var(--fs-kompakt); line-height: 1.2; font-weight: 600; color: var(--f, var(--ink));
  white-space: nowrap; transition: transform .3s ease;
}
.str-blau { --f: var(--blau); } .str-gruen { --f: var(--gruen); } .str-rot { --f: var(--rot); }
.str-ocker { --f: #a07e00; } .str-grau { --f: var(--ink-3); }
.str-mehr { cursor: pointer; }

.str-blatt {
  position: absolute; left: 50%; top: calc(100% + 16px);
  transform: translateX(-50%) scale(.97); width: 250px; background: var(--white);
  border: 1px solid rgba(18,35,58,.14); border-radius: var(--radius);
  box-shadow: var(--schatten-flach); padding: 14px 15px;
  font-size: var(--fs-klein); line-height: 1.6; font-weight: 400; color: var(--ink-2);
  opacity: 0; visibility: hidden; transition: .2s; z-index: 5; white-space: normal;
}
.str-blatt strong { display: block; color: var(--ink-2); margin-bottom: 5px; font-size: var(--fs-klein); }
.str-blatt img { width: 100%; border-radius: var(--radius); margin-bottom: 9px; }
.str-blatt .blatt-logo { width: auto; max-height: 54px; margin-bottom: 9px; }
.str-mehr:hover .str-blatt, .str-mehr:focus-within .str-blatt {
  opacity: 1; visibility: visible; transform: translateX(-50%) scale(1);
}

.str-legende {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px;
  font-size: var(--fs-marke); letter-spacing: 0;
}
.str-legende b { font-weight: 400; display: inline-flex; align-items: center; gap: 8px; color: var(--f, var(--ink-3)); }
.str-legende b::before { content: ''; width: 18px; height: 3px; background: currentColor; border-radius: 2px; }

@media (max-width: 760px) {
  .strecke {
    flex-direction: column; align-items: flex-start;
    row-gap: 20px; column-gap: 0; padding: 20px 0 24px;
  }
  .str-stat {
    white-space: normal; padding-left: 34px; font-size: var(--fs-kompakt);
    transform: none !important; flex: 0 1 auto; max-width: 100%;
  }
  .str-blatt { left: 34px; transform: none; width: min(250px, calc(100vw - 90px)); }
  .str-mehr:hover .str-blatt, .str-mehr:focus-within .str-blatt { transform: none; }
}

/* Auch die Zielkarte verliert auf entfalten ihren Kasten: nur die Linie,
   an der das Vorhaben der Klasse hängt. Gleiche Machart wie die Randnotiz. */
.entfalten-page .ziel-karte {
  background: none; border: 0; border-left: 3px solid var(--c, var(--blau));
  border-radius: 0; padding: 4px 0 4px 22px; max-width: 660px; margin-top: 34px;
}
.entfalten-page .zk-label {
  font-size: var(--fs-marke); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--c, var(--blau)); margin-bottom: 8px;
}
.entfalten-page .zk-ziel { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); }
.entfalten-page .zk-sichtbar { font-size: var(--fs-kompakt); margin-top: 8px; }

/* Der Aufmacher ohne Bild braucht Luft zum Raster darunter. */
.entfalten-page .exp-auftakt { margin-bottom: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   entfalten — Die Marke
   Zwei Ergebnisse aus dem Jahr 2026 standen als Fließtext in
   Randnotizen. Sie tragen jetzt dieselbe Stimme wie die Zitate der
   Seite: Farbkante, ein Satz mit hervorgehobener Wendung, darunter die
   Zahlen in der Schreibmaschinenschrift.
   ═══════════════════════════════════════════════════════════════════ */
.marke { margin: 40px 0 34px; max-width: 760px; }
.marke::before {
  content: ""; display: block; width: 54px; height: 4px;
  background: var(--c, var(--rot)); margin-bottom: 22px;
}
.marke .ma-satz {
  font-weight: 700; font-size: var(--fs-aussage); line-height: 1.32;
  letter-spacing: var(--ls-eng); color: var(--ink);
}
.marke .ma-satz i { font-style: normal; color: var(--c, var(--rot)); }
.marke .ma-zahlen {
  font-size: var(--fs-marke); letter-spacing: 0;
  color: var(--ink-3); margin-top: 16px; line-height: 1.7;
}
.marke .ma-dazu { font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2); margin-top: 14px; }
@media (max-width: 760px) { .marke .ma-satz { font-size: var(--fs-text); line-height: 1.38; } }

/* Mehr Luft, bevor die Strecke anläuft. */
.strecke { padding-top: 78px; }
@media (max-width: 760px) { .strecke { padding-top: 34px; } }

/* Das geöffnete Detail muss über den Stationen der nächsten Zeile liegen.
   Weil die Station selbst einen Stapelkontext aufmacht, wird sie beim
   Öffnen angehoben — nicht nur ihr Blatt. */
.str-mehr:hover, .str-mehr:focus-within { z-index: 20; }

/* In der letzten Reihe geht das Detail nach oben auf. */
.str-stat.str-oben .str-blatt { top: auto; bottom: calc(100% + 16px); }


/* ═══════════════════════════════════════════════════════════════════
   entfalten — Die leise Stimmenreihe
   Drei Stimmen aus den Pluskursen. Dieselbe Grammatik wie die grossen
   Zitate — Farbkante, Name in der Schreibmaschinenschrift —, aber in
   Lesegroesse und nebeneinander: verwandt, ohne zu konkurrieren.
   ═══════════════════════════════════════════════════════════════════ */
.stimmen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 52px 0 44px; }
.st-klein { --f: var(--ink-3); }
.st-klein[data-f="rot"]   { --f: var(--rot); }
.st-klein[data-f="gruen"] { --f: var(--gruen); }
.st-klein[data-f="ocker"] { --f: #a07e00; }
.st-klein[data-f="blau"]  { --f: var(--blau); }
.st-klein::before { content: ""; display: block; width: 34px; height: 3px; background: var(--f); margin-bottom: 16px; }
.st-klein p { font-size: var(--fs-text); line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.st-klein cite {
  display: block; margin-top: 12px; font-style: normal;
  font-size: var(--fs-marke); letter-spacing: 0; color: var(--f);
}
@media (max-width: 860px) { .stimmen-reihe { grid-template-columns: 1fr; gap: 28px; margin: 38px 0 34px; } }

/* Die beiden Praeventionsplakate stehen auf gleicher Hoehe nebeneinander. */
.plakate-gleich { max-width: none; align-items: start; }
.plakate-gleich figure img {
  height: clamp(240px, 26vw, 340px); width: auto; max-width: 100%;
  object-fit: contain; margin: 0 auto; border-radius: var(--radius);
}
@media (max-width: 760px) { .plakate-gleich figure img { height: 200px; } }

/* Ein Panorama verträgt keinen 4:3-Rahmen. Auf entfalten zeigt sich das
   Bild in seinem eigenen Format — die vorhandene Regel für „frei" wird
   sonst von der allgemeinen Bildregel überstimmt. */
.entfalten-page .exp-media--frei { aspect-ratio: auto; background: none; overflow: visible; }
.entfalten-page .exp-media--frei img {
  width: 100%; height: auto; max-height: 430px; object-fit: contain;
  margin: 0 auto; border-radius: var(--radius);
}

/* Der Klassenbaum und das Plakat der 5c sind in der Datei beschnitten —
   Decke, Boden und Wandränder sind weg. Sicherung der ungeschnittenen
   Fassungen: _uploads/bilder-vor-verkleinern/ */


/* ═══════════════════════════════════════════════════════════════════
   Der Weiterweg am Seitenende: der Dreiklang, aus dem die Seite kommt.
   Das eigene Wort steht dunkel, die beiden anderen sind der Weg.
   Die Farbkanten sind dieselben wie im Hero der Startseite.
   ═══════════════════════════════════════════════════════════════════ */
.dreiklang { max-width: 1180px; margin: 0 auto; padding: 68px 26px 8px; text-align: center; }
.dk-label {
  font-size: var(--fs-marke); letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
.dk-worte {
  display: flex; justify-content: center; align-items: baseline; gap: 10px;
  flex-wrap: wrap; font-family: var(--font-serif); font-size: var(--fs-aussage);
}
.dk-worte a, .dk-worte span.dk-hier {
  text-decoration: none; padding-bottom: 8px; border-bottom: 3px solid transparent;
  transition: color .2s ease;
}
.dk-worte a { color: var(--ink-2); }
.dk-worte a:hover, .dk-worte a:focus-visible { color: var(--ink); }
.dk-hier { color: var(--ink); font-weight: 600; }
.dk-punkt { color: var(--ink-3); font-size: var(--fs-h3); }
.dk-worte a.dk--blau,  .dk-worte span.dk--blau  { border-bottom-color: var(--blau); }
.dk-worte a.dk--ocker, .dk-worte span.dk--ocker { border-bottom-color: var(--ocker); }
.dk-worte a.dk--gruen, .dk-worte span.dk--gruen { border-bottom-color: var(--gruen); }
.dk-worte a.dk--rot,   .dk-worte span.dk--rot   { border-bottom-color: var(--rot); }
/* „Gemeinsam“ führt den Leitspruch an und steht deshalb etwas weiter weg. */
.dk-worte > :first-child { margin-right: 4px; }
@media (max-width: 560px) { .dreiklang { padding-top: 46px; } .dk-worte { gap: 6px; } }


/* Die Doppelspur mit geteilter Mittelachse (29. August) ist entfallen: sie
   zwang zum zeilenweisen Vergleich der zwei Wege, und weil die Zeilen der
   Förderklasse durchweg länger sind, wurde der Längenunterschied zum
   lautesten Signal. An ihrer Stelle stehen wieder zwei geschlossene Karten
   (.tafel-grid), jede für sich zu lesen. */


.wege-lernen .wl-satz {
  margin-top: 10px; font-family: var(--font-serif); font-size: var(--fs-aussage);
  line-height: 1.35; color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════
   entdecken — Hierarchie unter der Abschnittsebene
   Die Seite trug 30 gleich aussehende Marken: dieselbe Versalzeile in
   Ocker, ob darunter ein Hauptthema stand oder eine Randnotiz. Sechzehn
   davon standen über einer h3 und wiederholten nur, was die Überschrift
   ohnehin sagt; fünf waren die einzige Überschrift ihres Blocks. Jetzt
   tritt die redundante Marke zurück und die tragende kommt nach vorn.
   Gescopet auf .entdecken-page — erleben und entfalten bleiben, wie sie sind.
   ═══════════════════════════════════════════════════════════════════ */

/* Redundant: die h3 darunter sagt dasselbe. Leise, grau, ohne Farbstrich. */
.entdecken-page .exp-subhead .exp-eyebrow {
  font-size: var(--fs-marke); letter-spacing: 0; color: var(--ink-3);
  margin-bottom: 2px;
}
.entdecken-page .exp-subhead .exp-eyebrow::before { display: none; }

/* Tragend: hier gibt es keine Überschrift außer der Marke selbst. */
.entdecken-page .os-sub .exp-eyebrow {
  display: block; font-family: var(--font-serif); font-size: var(--fs-h3);
  line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 8px;
}
.entdecken-page .os-sub .exp-eyebrow::before { display: none; }

/* Die Stufenangabe stand vorher als eigener Zwischenkopf über den ersten
   drei Karten — jetzt in der Karte selbst, wo sie hingehört. */
.entdecken-page .pr-stufe {
  display: block; font-size: var(--fs-marke);
  letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px;
}

/* Ein Satz statt eines Verweiskastens — er schließt den Abschnitt, statt
   den Leser aus ihm herauszuführen. */
.entdecken-page .lern-hilfe {
  margin-top: 30px; font-size: var(--fs-kompakt); line-height: 1.75; color: var(--ink-2);
}
/* Verweise im Fließtext tragen dieselbe Auszeichnung wie in .topic-text:
   Farbe des Abschnitts und eine feine Unterlinie. Ohne sie waren die Links
   in den Karten und im Satz von normalem Text ununterscheidbar. */
.entdecken-page .lern-hilfe a,
.entdecken-page .principle p a,
.entdecken-page .pf-item p a {
  color: var(--c, var(--blau)); text-decoration: none;
  border-bottom: 1px solid var(--border); transition: border-color .15s;
}
.entdecken-page .lern-hilfe a:hover,
.entdecken-page .principle p a:hover,
.entdecken-page .pf-item p a:hover { border-bottom-color: var(--c, var(--blau)); }
.entdecken-page .os-sub-text a {
  color: var(--c, var(--blau)); text-decoration: none;
  border-bottom: 1px solid var(--border); transition: border-color .15s;
}
.entdecken-page .os-sub-text a:hover { border-bottom-color: var(--c, var(--blau)); }

/* Auftakt ohne Bild: Wo das Foto in ein Band gewandert ist oder weiter unten
   steht, blieb der Text in einer halben Spalte stehen und die andere leer.
   Ohne .exp-media läuft der Auftakt über die volle Breite. */
.entdecken-page .exp-feature:not(:has(.exp-media)) {
  grid-template-columns: 1fr; gap: 0;
}
.entdecken-page .exp-feature:not(:has(.exp-media)) .exp-body { max-width: 820px; }

/* ═══════════════════════════════════════════════════════════════════
   Der Wochenplan als Schaustück der Seite
   Neunzehn Fächer und alle Angebote einer Woche in einem Bild — das gibt
   es auf keiner anderen Seite, und jedes Fach ist ein Link dorthin. Bisher
   lag der Plan flach auf dem beigen Grund und wurde überblättert. Jetzt
   steht er als weiße Tafel darauf, breiter als der Fließtext.
   ═══════════════════════════════════════════════════════════════════ */
.entdecken-page #faecher .wo-tafel {
  /* Breiter als der Container: „margin: auto" zentriert dann nicht, sondern
     lässt die Tafel nach rechts überlaufen. Und transform scheidet aus, weil
     die reveal-Animation es selbst benutzt. Deshalb negative Ränder. */
  width: auto;
  margin: 38px calc((100% - min(1180px, 92vw)) / 2) 0;
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 14px 22px;
  box-shadow: var(--schatten-flach);
}
/* Legende und Bildzeile beginnen dort, wo auch die Wochentage beginnen —
   die Stundenspalte des Plans ist rund ein Zehntel breit. */
.entdecken-page #faecher .wo-legende { margin-top: 22px; padding-left: 7.2%; gap: 7px 14px; }
.entdecken-page #faecher .wo-tafel .bildzeile { padding-left: 7.2%; }
@media (max-width: 760px) {
  .entdecken-page #faecher .wo-tafel { width: auto; margin: 26px 0 0; padding: 20px 16px 16px; }
}

/* Das Band im Selbstverständnis: „min-height: 160px" erzwingt zusammen mit
   „aspect-ratio: 24/7" eine Mindestbreite von 549 px. Auf schmalen Schirmen
   ragte es damit aus dem Viewport — sichtbar wurde das nur, weil body
   overflow-x: hidden trägt und den Überlauf still abschneidet. */
@media (max-width: 620px) {
  .sv-band { min-height: 0; aspect-ratio: 16 / 9; }
}


/* ══════════════════════════════════════════════════════════════════════
   HANDY: der Boden für kleine Auszeichnungen
   ----------------------------------------------------------------------
   Auf dem großen Bildschirm sind 10 und 11 px eine feine Auszeichnung.
   Auf dem Handy sind sie zu klein. Die Hierarchie bleibt — nur der Boden
   steigt: bis 10,5 px auf 11,5 px, 11 und 11,5 px auf 12 px.
   Schrift in SVG-Zeichnungen bleibt unberührt, dort meint px die viewBox.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .fk-seg small,
  .footer-col h4,
  .hig-label,
  .news-tag,
  .ng-fact-label,
  .saeule-tag,
  .sl-cat,
  .stat span,
  .td-mon,
  .wa-k,
  /* Die Stufenangabe stand vorher als eigener Zwischenkopf über den ersten drei Karten — jetzt in der Karte selbst, wo sie hingehört. */ .entdecken-page .pr-stufe,
  /* Enger gesperrt und eine Spur kleiner: die drei Marken müssen einzeilig bleiben, sonst kippt die Zahlenreihe auseinander. */ .path-stat-k,
  /* ═══════════════════════════════════════════════════════════════════ entdecken — Hierarchie unter der Abschnittsebene Die Seite trug 30 gleich aussehende Marken: dieselbe Versalzeile in Ocker, ob darunter ein Hauptthema stand oder eine Randnotiz. Sechzehn davon standen über einer h3 und wiederholten nur, was die Überschrift ohnehin sagt; fünf waren die einzige Überschrift ihres Blocks. Jetzt tritt die redundante Marke zurück und die tragende kommt nach vorn. Gescopet auf .entdecken-page — erleben und entfalten bleiben, wie sie sind. ═══════════════════════════════════════════════════════════════════ */ /* Redundant: die h3 darunter sagt dasselbe. Leise, grau, ohne Farbstrich. */ .entdecken-page .exp-subhead .exp-eyebrow { font-size: var(--fs-marke); }
  .bb-bild figcaption,
  .bg-ort,
  .dk-label,
  .entdecken-page .ex-card .ex-fach,
  .entdecken-page .os-phase-tag,
  .entdecken-page .pf-stage,
  .entdecken-page .xref-label,
  .entfalten-page .zk-label,
  .exp-motto--stimme cite,
  .exp-ph span,
  .footer-bottom p,
  .hero-badge,
  .kap-tag,
  .kb-marke,
  .kt-hinweis,
  .marke .ma-zahlen,
  .news-body time,
  .path-quote cite,
  .path-tafel-label,
  .path-tag,
  .ph-breadcrumb,
  .ph-gemeinsam,
  .post-tag,
  .pquote--platz .pq-platz-hinweis,
  .pw-k,
  .qa-flabel,
  .ql-item span,
  .search-close,
  .search-hit-page,
  .smvt-klasse,
  .smvt-label,
  .smvt-rolle,
  .st-klein cite,
  .step-head,
  .stimme-gross cite,
  .stimme-video .vlabel,
  .str-legende,
  .sv-eyebrow,
  .tk-label,
  .ts-datum,
  .ut-label,
  .wege-alle .wsi-v,
  .wischhinweis,
  .wp-pill,
  .wsi-k,
  .zc-media span,
  .zk-label,
  /* ===== Section Utilities ===== */ .section-label,
  /* Bildzeile rechts unten — sagt, was zu sehen ist, und führt dorthin */ .bu-bild figcaption,
  /* Rechts steht, was der Klick tut — ein Plus allein sagt es nicht. */ .qa-liste .qa-q::after { font-size: var(--fs-marke); }
}