/* ==========================================================================
   Lise-Brenner-Gesamtschule Wiesenbrunn — fiktive Schulwebsite
   Designstudie von mabu:design
   Aufbau: Schriften · Farben (hell, dunkel, Kontrast) · Grundlagen · Bausteine
           · Abschnitte · Menüs · Bewegung (Endlos, Scroll, View Transitions)
   ========================================================================== */

/* ---------- Schriften (lokal, variabel) ---------- */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/baloo-2-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/baloo-2-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben: hell (Standard) ---------- */
:root {
  color-scheme: light;
  --grund: #FFFAF0;          /* Papierweiß */
  --karte: #FFFFFF;
  --karte-rand: #EADFC6;
  --flaeche: #FFF3D9;        /* warme Zwischenfläche */
  --flaeche-blau: #EEF2FD;
  --text: #16204A;           /* tiefes Blau als Schriftfarbe */
  --text-leise: #4A5277;
  --link: #1E3A8A;
  --fokus: #1E3A8A;

  --blau: #1E3A8A;
  --blau-mittel: #2F55B8;
  --blau-hell: #E1E8FB;
  --gelb: #FFC21A;           /* Sonnenblumengelb */
  --gelb-hell: #FFEBB0;
  --gelb-text: #6B4A00;
  --rot: #E5482F;            /* Tomatenrot (Deko, große Flächen) */
  --rot-text: #B5321B;       /* Tomatenrot für Text */
  --rot-knopf: #C63A22;
  --rot-hell: #FDE3DC;
  --gruen: #2E7D53;
  --gruen-text: #1F6B43;
  --gruen-hell: #DCF1E3;
  --lila: #5B2F91;
  --lila-hell: #EEE6FA;
  --tuerkis: #0E6168;
  --tuerkis-hell: #D8F0F1;

  --knopf-grund: #1E3A8A;
  --knopf-text: #FFFFFF;
  --knopf-schatten: #0F1F52;
  --gelb-flaeche: #FFC21A;   /* Mensa-Abschnitt */
  --gelb-flaeche-text: #16204A;
  --gelb-flaeche-punkt: #FFFFFF;
  --blau-flaeche: #1E3A8A;   /* Anmeldung-Abschnitt */
  --blau-flaeche-text: #FFFFFF;
  --blau-flaeche-leise: #D6DFF8;
  --fuss-grund: #16204A;
  --fuss-text: #F6F1E4;
  --fuss-link: #FFD66B;
  --service-grund: #16204A;
  --service-text: #FFFAF0;

  --schatten: 0 1px 0 rgb(22 32 74 / 0.05), 0 14px 34px -18px rgb(22 32 74 / 0.35);
  --schatten-gross: 0 2px 0 rgb(22 32 74 / 0.05), 0 30px 60px -28px rgb(22 32 74 / 0.45);
  --rand-staerke: 1.5px;

  /* Isometrischer Campus */
  --iso-himmel: #EAF1FF;
  --iso-wand-o: #FFFDF7; --iso-wand-l: #F5EBD4; --iso-wand-r: #E2D1AA;
  --iso-rot-o: #F47C61; --iso-rot-l: #E5482F; --iso-rot-r: #B5341D;
  --iso-blau-o: #6384E2; --iso-blau-l: #2F55B8; --iso-blau-r: #1E3A8A;
  --iso-gelb-o: #FFDA66; --iso-gelb-l: #FFC21A; --iso-gelb-r: #D99D00;
  --iso-gruen-o: #8FCB85; --iso-gruen-l: #62AD5E; --iso-gruen-r: #438A48;
  --iso-boden-o: #CDE7BF; --iso-boden-l: #C9995C; --iso-boden-r: #A77942;
  --iso-erde-o: #D9B98A; --iso-erde-l: #BF9562; --iso-erde-r: #9E7646;
  --iso-pflaster-o: #FBF1DC; --iso-pflaster-l: #E9D8B4; --iso-pflaster-r: #D3BD92;
  --iso-holz-o: #DDA86C; --iso-holz-l: #C4874A; --iso-holz-r: #9C6634;
  --iso-glas-o: rgb(206 228 255 / 0.85); --iso-glas-l: rgb(170 205 245 / 0.8); --iso-glas-r: rgb(130 175 230 / 0.8);
  --iso-stamm-o: #A0723F; --iso-stamm-l: #8A5E31; --iso-stamm-r: #6E4A25;
  --iso-stange-o: #4A5277; --iso-stange-l: #3A4166; --iso-stange-r: #2A3050;
  --iso-weg: #FFF5DD;
  --iso-fenster: #BFD3FA;
  --iso-glasfront: #CFE0FF;
  --iso-tuer: #1E3A8A;
  --iso-solar: #26306A;
  --iso-kuppel: #F2F4FA;
  --iso-baum-a: #58A865; --iso-baum-b: #3E8A55; --iso-baum-c: #F2B21B;
  --iso-schatten: rgb(22 32 74 / 0.16);
  --iso-wolke: #FFFFFF;

  /* Stadtplan */
  --sp-grund: #F6EFDC;
  --sp-gruen: #D3EAC6;
  --sp-bach: #A9CBF2;
  --sp-strasse: #FFFFFF;
  --sp-strasse-rand: #E3D6B8;
  --sp-block: #EADFC4;

  /* Maße */
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 48px);
  --abstand: clamp(64px, 9vw, 120px);
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --kopf-h: 4.75rem;
  --schrift-text: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "Baloo 2", "Atkinson Hyperlegible Next", ui-rounded, system-ui, sans-serif;
}

/* ---------- Farben: dunkel (System oder Schalter) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) {
    color-scheme: dark;
    --grund: #0E1530; --karte: #172048; --karte-rand: #2B3669; --flaeche: #131B3D; --flaeche-blau: #1A2454;
    --text: #F6F1E4; --text-leise: #BAC1DB; --link: #AFC5FF; --fokus: #FFC940;
    --blau: #AFC5FF; --blau-mittel: #8BA8F5; --blau-hell: #243373;
    --gelb: #FFC940; --gelb-hell: #3D3317; --gelb-text: #FFDC85;
    --rot: #FF7A5C; --rot-text: #FFA08A; --rot-knopf: #FF7A5C; --rot-hell: #44232B;
    --gruen: #6FD39C; --gruen-text: #8BE0B0; --gruen-hell: #173D35;
    --lila: #D5BFFA; --lila-hell: #332656; --tuerkis: #7FDCE2; --tuerkis-hell: #133F4A;
    --knopf-grund: #FFC940; --knopf-text: #16204A; --knopf-schatten: #B8861A;
    --gelb-flaeche: #242D63; --gelb-flaeche-text: #F6F1E4; --gelb-flaeche-punkt: #FFC940;
    --blau-flaeche: #1B2A6B; --blau-flaeche-text: #FFFFFF; --blau-flaeche-leise: #D0DAF8;
    --fuss-grund: #080D20; --fuss-text: #F6F1E4; --fuss-link: #FFD66B; --service-grund: #080D20; --service-text: #F6F1E4;
    --schatten: 0 1px 0 rgb(0 0 0 / 0.2), 0 16px 36px -18px rgb(0 0 0 / 0.7);
    --schatten-gross: 0 30px 60px -28px rgb(0 0 0 / 0.8);
    --iso-himmel: #16204A;
    --iso-wand-o: #C9CCE0; --iso-wand-l: #9FA5C4; --iso-wand-r: #7A81A6;
    --iso-rot-o: #D86A55; --iso-rot-l: #B6432E; --iso-rot-r: #8A2F20;
    --iso-blau-o: #5873C7; --iso-blau-l: #34509F; --iso-blau-r: #22387A;
    --iso-gelb-o: #E9C160; --iso-gelb-l: #D9A321; --iso-gelb-r: #A67A0C;
    --iso-gruen-o: #4E8A5A; --iso-gruen-l: #3C7148; --iso-gruen-r: #2C5838;
    --iso-boden-o: #2F5145; --iso-boden-l: #5E4A36; --iso-boden-r: #473727;
    --iso-erde-o: #6E5A40; --iso-erde-l: #574631; --iso-erde-r: #413425;
    --iso-pflaster-o: #57608A; --iso-pflaster-l: #454D74; --iso-pflaster-r: #363D60;
    --iso-weg: #6B7399;
    --iso-fenster: #FFD66B; --iso-glasfront: #FFE39A; --iso-tuer: #0E1530; --iso-kuppel: #C9CCE0;
    --iso-baum-a: #3A7A4C; --iso-baum-b: #2C6340; --iso-baum-c: #B98A1C;
    --iso-schatten: rgb(0 0 0 / 0.3); --iso-wolke: #3A4575;
    --sp-grund: #1A2350; --sp-gruen: #1F4238; --sp-bach: #2F5A9C; --sp-strasse: #3A467A; --sp-strasse-rand: #2A3462; --sp-block: #252F5E;
  }
}
:root[data-farbe="dunkel"] {
  color-scheme: dark;
  --grund: #0E1530; --karte: #172048; --karte-rand: #2B3669; --flaeche: #131B3D; --flaeche-blau: #1A2454;
  --text: #F6F1E4; --text-leise: #BAC1DB; --link: #AFC5FF; --fokus: #FFC940;
  --blau: #AFC5FF; --blau-mittel: #8BA8F5; --blau-hell: #243373;
  --gelb: #FFC940; --gelb-hell: #3D3317; --gelb-text: #FFDC85;
  --rot: #FF7A5C; --rot-text: #FFA08A; --rot-knopf: #FF7A5C; --rot-hell: #44232B;
  --gruen: #6FD39C; --gruen-text: #8BE0B0; --gruen-hell: #173D35;
  --lila: #D5BFFA; --lila-hell: #332656; --tuerkis: #7FDCE2; --tuerkis-hell: #133F4A;
  --knopf-grund: #FFC940; --knopf-text: #16204A; --knopf-schatten: #B8861A;
  --gelb-flaeche: #242D63; --gelb-flaeche-text: #F6F1E4; --gelb-flaeche-punkt: #FFC940;
  --blau-flaeche: #1B2A6B; --blau-flaeche-text: #FFFFFF; --blau-flaeche-leise: #D0DAF8;
  --fuss-grund: #080D20; --fuss-text: #F6F1E4; --fuss-link: #FFD66B; --service-grund: #080D20; --service-text: #F6F1E4;
  --schatten: 0 1px 0 rgb(0 0 0 / 0.2), 0 16px 36px -18px rgb(0 0 0 / 0.7);
  --schatten-gross: 0 30px 60px -28px rgb(0 0 0 / 0.8);
  --iso-himmel: #16204A;
  --iso-wand-o: #C9CCE0; --iso-wand-l: #9FA5C4; --iso-wand-r: #7A81A6;
  --iso-rot-o: #D86A55; --iso-rot-l: #B6432E; --iso-rot-r: #8A2F20;
  --iso-blau-o: #5873C7; --iso-blau-l: #34509F; --iso-blau-r: #22387A;
  --iso-gelb-o: #E9C160; --iso-gelb-l: #D9A321; --iso-gelb-r: #A67A0C;
  --iso-gruen-o: #4E8A5A; --iso-gruen-l: #3C7148; --iso-gruen-r: #2C5838;
  --iso-boden-o: #2F5145; --iso-boden-l: #5E4A36; --iso-boden-r: #473727;
  --iso-erde-o: #6E5A40; --iso-erde-l: #574631; --iso-erde-r: #413425;
  --iso-pflaster-o: #57608A; --iso-pflaster-l: #454D74; --iso-pflaster-r: #363D60;
  --iso-weg: #6B7399;
  --iso-fenster: #FFD66B; --iso-glasfront: #FFE39A; --iso-tuer: #0E1530; --iso-kuppel: #C9CCE0;
  --iso-baum-a: #3A7A4C; --iso-baum-b: #2C6340; --iso-baum-c: #B98A1C;
  --iso-schatten: rgb(0 0 0 / 0.3); --iso-wolke: #3A4575;
  --sp-grund: #1A2350; --sp-gruen: #1F4238; --sp-bach: #2F5A9C; --sp-strasse: #3A467A; --sp-strasse-rand: #2A3462; --sp-block: #252F5E;
}

/* ---------- Farben: hoher Kontrast (hell) ---------- */
:root.kontrast {
  --grund: #FFFFFF; --karte: #FFFFFF; --karte-rand: #000000; --flaeche: #FFFFFF; --flaeche-blau: #FFFFFF;
  --text: #000000; --text-leise: #000000; --link: #0019A8; --fokus: #0019A8;
  --blau: #0019A8; --blau-mittel: #0019A8; --blau-hell: #FFFFFF;
  --gelb: #FFD400; --gelb-hell: #FFFFFF; --gelb-text: #000000;
  --rot: #B00E00; --rot-text: #A30D00; --rot-knopf: #A30D00; --rot-hell: #FFFFFF;
  --gruen: #0B5A2D; --gruen-text: #0B5A2D; --gruen-hell: #FFFFFF;
  --lila: #3D0F78; --lila-hell: #FFFFFF; --tuerkis: #004A50; --tuerkis-hell: #FFFFFF;
  --knopf-grund: #000000; --knopf-text: #FFFFFF; --knopf-schatten: #000000;
  --gelb-flaeche: #FFFFFF; --gelb-flaeche-text: #000000; --gelb-flaeche-punkt: #FFD400;
  --blau-flaeche: #000000; --blau-flaeche-text: #FFFFFF; --blau-flaeche-leise: #FFFFFF;
  --fuss-grund: #000000; --fuss-text: #FFFFFF; --fuss-link: #FFE14D; --service-grund: #000000; --service-text: #FFFFFF;
  --schatten: none; --schatten-gross: none; --rand-staerke: 2px;
}
/* hoher Kontrast + dunkel */
@media (prefers-color-scheme: dark) {
  :root.kontrast:not([data-farbe="hell"]) {
    --grund: #000000; --karte: #000000; --karte-rand: #FFFFFF; --flaeche: #000000; --flaeche-blau: #000000;
    --text: #FFFFFF; --text-leise: #FFFFFF; --link: #FFE14D; --fokus: #FFE14D;
    --blau: #9EC0FF; --blau-mittel: #9EC0FF; --blau-hell: #000000;
    --gelb: #FFE14D; --gelb-hell: #000000; --gelb-text: #FFE14D;
    --rot: #FF8C73; --rot-text: #FF9E88; --rot-knopf: #FF8C73; --rot-hell: #000000;
    --gruen: #7DFFB0; --gruen-text: #7DFFB0; --gruen-hell: #000000;
    --lila: #E2CCFF; --lila-hell: #000000; --tuerkis: #8FF4FA; --tuerkis-hell: #000000;
    --knopf-grund: #FFE14D; --knopf-text: #000000; --knopf-schatten: #FFE14D;
    --gelb-flaeche: #000000; --gelb-flaeche-text: #FFFFFF; --gelb-flaeche-punkt: #FFE14D;
    --blau-flaeche: #000000; --blau-flaeche-text: #FFFFFF; --blau-flaeche-leise: #FFFFFF;
    --fuss-grund: #000000; --fuss-text: #FFFFFF; --fuss-link: #FFE14D; --service-grund: #000000; --service-text: #FFFFFF;
  }
}
:root.kontrast[data-farbe="dunkel"] {
  --grund: #000000; --karte: #000000; --karte-rand: #FFFFFF; --flaeche: #000000; --flaeche-blau: #000000;
  --text: #FFFFFF; --text-leise: #FFFFFF; --link: #FFE14D; --fokus: #FFE14D;
  --blau: #9EC0FF; --blau-mittel: #9EC0FF; --blau-hell: #000000;
  --gelb: #FFE14D; --gelb-hell: #000000; --gelb-text: #FFE14D;
  --rot: #FF8C73; --rot-text: #FF9E88; --rot-knopf: #FF8C73; --rot-hell: #000000;
  --gruen: #7DFFB0; --gruen-text: #7DFFB0; --gruen-hell: #000000;
  --lila: #E2CCFF; --lila-hell: #000000; --tuerkis: #8FF4FA; --tuerkis-hell: #000000;
  --knopf-grund: #FFE14D; --knopf-text: #000000; --knopf-schatten: #FFE14D;
  --gelb-flaeche: #000000; --gelb-flaeche-text: #FFFFFF; --gelb-flaeche-punkt: #FFE14D;
  --blau-flaeche: #000000; --blau-flaeche-text: #FFFFFF; --blau-flaeche-leise: #FFFFFF;
  --fuss-grund: #000000; --fuss-text: #FFFFFF; --fuss-link: #FFE14D; --service-grund: #000000; --service-text: #FFFFFF;
}

/* Sehr große Bildschirme: etwas mehr Breite */
@media (min-width: 1900px) { :root { --breite: 1400px; } }

/* ---------- Schriftgröße (3 Stufen) ---------- */
html { font-size: 100%; }
html[data-schrift="gross"] { font-size: 118.75%; }
html[data-schrift="sehr-gross"] { font-size: 137.5%; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
  background: var(--grund);
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.1rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 800; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }
strong { font-weight: 700; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus { outline: none; }

.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikon .voll, symbol .voll { fill: currentColor; stroke: none; }

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

.huelle {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Ohne JavaScript: Hinweise zeigen, JS-abhängige Teile verbergen */
.ohne-js-hinweis { color: var(--text-leise); padding: 1.5rem; margin: 0; }
.js .ohne-js-hinweis { display: none; }
html:not(.js) .countdown,
html:not(.js) .campus-karte,
html:not(.js) .vp-leiste,
html:not(.js) .kal,
html:not(.js) [data-ics-alle],
html:not(.js) [data-ics],
html:not(.js) .ag-filter,
html:not(.js) .a11y-knopf,
html:not(.js) .leicht-schalter,
html:not(.js) .fuss-nav .text-knopf { display: none; }

/* ---------- Leichte Sprache: Texte tauschen ---------- */
.nur-leicht { display: none; }
.leicht .nur-standard { display: none; }
.leicht .nur-leicht { display: block; }
.leicht .nur-leicht {
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid var(--gelb);
}
.leicht .nur-leicht::before {
  content: "Leichte Sprache";
  display: block;
  width: fit-content;
  margin-bottom: 0.35rem;
  padding: 0.05rem 0.55rem;
  border-radius: 99px;
  background: var(--gelb);
  color: #16204A;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.leicht .abschnitt-blau .nur-leicht::before { background: var(--gelb); }

/* ---------- Bausteine ---------- */
.sprunglink {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--gelb);
  color: #16204A;
  font-weight: 700;
  border-radius: 0 0 var(--r-s) var(--r-s);
  box-shadow: 0 0 0 3px #16204A;
  text-decoration: none;
}
.sprunglink:focus-visible { outline-color: #FFFFFF; }
.sprunglink:focus { top: 0; }

.dachzeile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  color: var(--rot-text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dachzeile::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0.45rem 0 0 var(--rot);
  margin-right: 0.45rem;
}
.dachzeile-rot::before { display: none; }
.dachzeile .ikon { width: 1.1em; height: 1.1em; }

.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.2s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(1px); }
.knopf-haupt {
  background: var(--knopf-grund);
  color: var(--knopf-text);
  box-shadow: 0 4px 0 var(--knopf-schatten);
}
.knopf-haupt:hover { box-shadow: 0 6px 0 var(--knopf-schatten); }
.knopf-rand {
  background: var(--karte);
  color: var(--text);
  border-color: var(--text);
}
.knopf-rot {
  background: var(--rot-knopf);
  color: #FFFFFF;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--rot-knopf) 60%, #000);
}
:root[data-farbe="dunkel"] .knopf-rot { color: #16204A; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .knopf-rot { color: #16204A; } }
.kontrast .knopf-rot { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root.kontrast:not([data-farbe="hell"]) .knopf-rot { color: #000000; } }
:root.kontrast[data-farbe="dunkel"] .knopf-rot { color: #000000; }

.text-knopf {
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  min-height: 44px;
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.rund-knopf {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: var(--karte);
  color: var(--text);
}
.rund-knopf:disabled { opacity: 0.35; cursor: default; }

.etikett {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.e-gruen, .etikett.t-schule { background: var(--gruen-hell); color: var(--gruen-text); }
.e-blau, .etikett.t-eltern { background: var(--blau-hell); color: var(--blau); }
.e-rot, .etikett.t-oeffentlich { background: var(--rot-hell); color: var(--rot-text); }
.e-vorbei { background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--karte-rand); }
.kontrast .etikett { border: 2px solid currentColor; }

.karte {
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.kleingedruckt { font-size: 0.875rem; color: var(--text-leise); margin: 1.25rem 0 0; }

.beispiel-hinweis {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: 22rem;
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: var(--r-s);
  border: 2px dashed var(--text);
  background: var(--gelb-hell);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.4;
}
.beispiel-hinweis strong { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Servicezeile ---------- */
.servicezeile {
  background: var(--service-grund);
  color: var(--service-text);
  font-size: 0.875rem;
}
.servicezeile a, .servicezeile button { color: inherit; }
.servicezeile-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 2.75rem;
}
.service-status { display: flex; align-items: center; gap: 1rem; margin: 0; }
.service-tel, .service-links a, .leicht-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 700;
  text-decoration: none;
}
.service-tel:hover, .service-links a:hover { text-decoration: underline; }
.status-punkt { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.92; }
.status-punkt::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
.status-punkt.ist-offen::before { background: #5FD68E; opacity: 1; }
.status-punkt.ist-zu::before { background: #FF8A70; opacity: 1; }
.service-links { display: flex; align-items: center; gap: 0.25rem 1.25rem; }
.leicht-schalter {
  background: none;
  border: 0;
  padding: 0 0.1rem;
}
.leicht-schalter[aria-pressed="true"] {
  background: var(--gelb);
  color: #16204A;
  border-radius: 999px;
  padding: 0 0.75rem;
  min-height: 2rem;
  margin-block: 0.375rem;
}
.servicezeile :focus-visible { outline-color: var(--gelb); }
@media (max-width: 719px) {
  .status-punkt, .nicht-schmal { display: none; }
}
@media (max-width: 459px) {
  .service-status { display: none; }
  .servicezeile-innen { justify-content: flex-end; }
}

/* ---------- Kopf und Navigation ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grund);
  border-bottom: 1px solid var(--karte-rand);
}
.kontrast .kopf { background: var(--grund); border-bottom: 2px solid var(--text); }
.kopf-innen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--kopf-h);
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.logo-zeichen { width: 3rem; height: 3rem; flex: none; }
.logo:hover .logo-blueten { transform: rotate(22.5deg); }
.logo-blueten { fill: var(--gelb); transform-origin: 32px 32px; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.logo-mitte { fill: #1E3A8A; }
.logo-kern { fill: var(--rot); }
.kontrast .logo-blueten { stroke: var(--text); stroke-width: 2; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.02rem, 0.8rem + 0.9vw, 1.3rem); letter-spacing: -0.01em; }
.logo-ort { font-size: 0.8125rem; color: var(--text-leise); font-weight: 600; margin-top: 0.15rem; }
@media (max-width: 479px) {
  .logo-name { max-width: 8.5rem; }
  .logo-ort { display: none; }
  .logo-zeichen { width: 2.6rem; height: 2.6rem; }
}

.hauptnav { position: static; }
.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--karte);
  font-weight: 700;
}
.menue-offen .menue-knopf { background: var(--text); color: var(--grund); }
.hauptnav-liste {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.75rem var(--rand) 1.25rem;
  background: var(--karte);
  border-bottom: 2px solid var(--text);
  box-shadow: var(--schatten-gross);
}
.menue-offen .hauptnav-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.25rem 1rem; }
.hauptnav-liste a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 0.75rem;
  border-radius: var(--r-s);
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}
.hauptnav-liste a:hover { background: var(--gelb-hell); }

.a11y-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  justify-content: center;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--gelb);
  color: #16204A;
  font-weight: 700;
  anchor-name: --a11y;
}
.kontrast .a11y-knopf { background: var(--karte); color: var(--text); }
.a11y-knopf .ikon { width: 1.5rem; height: 1.5rem; }
.a11y-knopf-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Breite Navigation (Klasse wird passend zur Schriftgröße gesetzt) */
.nav-breit .menue-knopf { display: none; }
.nav-breit .hauptnav-liste {
  display: flex;
  position: static;
  gap: 0.15rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.nav-breit .hauptnav-liste a {
  min-height: 2.75rem;
  padding: 0 0.8rem;
  font-size: 1rem;
  border-radius: 999px;
  position: relative;
}
.nav-breit .hauptnav-liste a:hover { background: var(--gelb-hell); }
.nav-breit .hauptnav-liste a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.35rem;
  height: 3px;
  border-radius: 3px;
  background: var(--rot);
}
.hauptnav-liste a[aria-current] { color: var(--text); }
html:not(.nav-breit) .hauptnav-liste a[aria-current] { background: var(--gelb-hell); }
.nav-breit .a11y-knopf { padding: 0 1rem 0 0.7rem; margin-left: 0.5rem; }
.nav-breit .a11y-knopf-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* Ohne JavaScript: Navigation einfach umbrechen */
html:not(.js) .menue-knopf { display: none; }
html:not(.js) .hauptnav-liste { display: flex; flex-wrap: wrap; position: static; padding: 0; box-shadow: none; border: 0; background: none; }
html:not(.js) .kopf-innen { flex-wrap: wrap; padding-block: 0.5rem; }

.lesefortschritt { display: none; }

/* ---------- Bühne: Tag der offenen Tür ---------- */
.buehne {
  position: relative;
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  overflow: clip;
}
.buehne::before {
  /* zarter Punkteraster im Hintergrund */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--text) 13%, transparent) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  pointer-events: none;
}
.kontrast .buehne::before { display: none; }
.buehne-raster {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 60em) {
  .buehne-raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 3rem; }
}
.buehne h1 { margin-bottom: 1.25rem; max-width: 12ch; }
.einleitung { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3rem); max-width: 34rem; color: var(--text); }
.termin-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 1.5rem 0 1rem;
  font-weight: 700;
  font-size: 1.125rem;
}
.termin-zeile .ikon { color: var(--rot-text); }
@media (max-width: 479px) {
  .termin-zeile > [aria-hidden="true"]:not(.ikon) { display: none; }
  .termin-zeile > span:last-child { flex-basis: 100%; padding-left: 1.85rem; }
}
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
}
.cd-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.2rem;
  padding: 0.55rem 0.6rem 0.5rem;
  border-radius: var(--r-m);
  border: 2px solid var(--text);
  background: var(--karte);
  box-shadow: 0 4px 0 var(--text);
}
.cd-sekunden { background: var(--gelb); color: #16204A; }
.cd-zahl {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}
.cd-einheit { font-size: 0.8125rem; font-weight: 700; color: inherit; opacity: 0.85; }
.cd-heute { margin: 0; padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--gelb); color: #16204A; font-weight: 800; font-size: 1.25rem; }
@media (max-width: 419px) {
  .countdown { gap: 0.4rem; }
  .cd-feld { min-width: 0; flex: 1; padding-inline: 0.2rem; }
  .cd-einheit { font-size: 0.75rem; }
}

/* ---------- Bühnenbild: Papierschnitt-Szene ----------
   Sieben SVG-Lagen liegen übereinander wie in einem Leuchtkasten; jede wirft einen weichen
   Schatten auf die dahinter. --nacht (0 = Tag, 1 = Nacht) mischt alle Papierfarben und blendet
   Sonne/Mond weich über. --mx/--my (−1 … 1, gesetzt von js/papier.js) verschieben die Lagen je
   nach --tiefe gegeneinander; beim Scrollen driften sie per --drift unterschiedlich schnell. */
@property --nacht { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: false; initial-value: 0; }

.buehne-bild { position: relative; max-width: 40rem; width: 100%; justify-self: center; }
.papier {
  --nacht: 0;
  --n: calc(var(--nacht) * 100%);
  /* Papierfarben: Tagwert, Nachtwert */
  --pz-himmel-o: color-mix(in oklab, #D6E4FA, #080E2C var(--n));
  --pz-himmel-u: color-mix(in oklab, #FFF1D6, #1D2B6B var(--n));
  --pz-wolke: color-mix(in oklab, #FFFFFF, #28336D var(--n));
  --pz-wolke-2: color-mix(in oklab, #E3E9F7, #1A2356 var(--n));
  --pz-fern-1: color-mix(in oklab, #DAE8D4, #1D2965 var(--n));
  --pz-fern-2: color-mix(in oklab, #C2DCBC, #1C305F var(--n));
  --pz-stadt: color-mix(in oklab, #D5DCF1, #2A377C var(--n));
  --pz-windrad: color-mix(in oklab, #FCFAF3, #3D4A86 var(--n));
  --pz-mitte: color-mix(in oklab, #A3D293, #193A49 var(--n));
  --pz-baum: color-mix(in oklab, #5CA862, #163E42 var(--n));
  --pz-baum-licht: color-mix(in oklab, #7DBF76, #1D4B4C var(--n));
  --pz-tanne: color-mix(in oklab, #3A8656, #123438 var(--n));
  --pz-tanne-licht: color-mix(in oklab, #4D9965, #173E40 var(--n));
  --pz-stamm: color-mix(in oklab, #9A6A3E, #3A2F3E var(--n));
  --pz-wand: color-mix(in oklab, #FFFBF2, #C3C7E0 var(--n));
  --pz-wand-2: color-mix(in oklab, #F5E9D2, #9DA4C7 var(--n));
  --pz-sockel: color-mix(in oklab, #E0CDA6, #737BA3 var(--n));
  --pz-dach: color-mix(in oklab, #E5482F, #A13A2C var(--n));
  --pz-dach-2: color-mix(in oklab, #C13A22, #7B2A23 var(--n));
  --pz-rahmen: color-mix(in oklab, #1E3A8A, #1A2A63 var(--n));
  --pz-glas: color-mix(in oklab, #CFE0FB, #FFD66B var(--n));
  --pz-glas-schatten: color-mix(in oklab, #9CB5E4, #E2A53A var(--n));
  --pz-glas-aus: color-mix(in oklab, #CFE0FB, #34427E var(--n));
  --pz-glas-aus-schatten: color-mix(in oklab, #9CB5E4, #273366 var(--n));
  --pz-uhr: color-mix(in oklab, #FFFFFF, #E9EBF5 var(--n));
  --pz-tuer-innen: color-mix(in oklab, #FFE3A0, #FFEBB0 var(--n));
  --pz-tuer-boden: color-mix(in oklab, #F1C267, #FFD66B var(--n));
  --pz-rasen: color-mix(in oklab, #86C27A, #1B4540 var(--n));
  --pz-weg: color-mix(in oklab, #FCEBC8, #5E6793 var(--n));
  --pz-weg-rand: color-mix(in oklab, #E6CFA2, #4A537F var(--n));
  --pz-stufe: color-mix(in oklab, #EDE3CC, #8A91B6 var(--n));
  --pz-mast: color-mix(in oklab, #16204A, #0B1030 var(--n));
  --pz-rot: color-mix(in oklab, #E5482F, #C1513F var(--n));
  --pz-gelb: color-mix(in oklab, #FFC21A, #E3B034 var(--n));
  --pz-gelb-2: color-mix(in oklab, #E6A600, #B8891E var(--n));
  --pz-gelb-3: color-mix(in oklab, #B38000, #86621A var(--n));
  --pz-blau: color-mix(in oklab, #2F55B8, #4A66C2 var(--n));
  --pz-weiss: color-mix(in oklab, #FFFFFF, #D3D7EB var(--n));
  --pz-hecke: color-mix(in oklab, #2E7D53, #0F2F2A var(--n));
  --pz-vorn: color-mix(in oklab, #5BAA63, #153A36 var(--n));
  --pz-lampe: color-mix(in oklab, #FFF3CF, #FFE08A var(--n));
  --pz-papier: color-mix(in oklab, #FFFFFF, #C9CEE6 var(--n));
  --pz-papier-2: color-mix(in oklab, #E2E7F4, #9EA6CB var(--n));
  --pz-papier-3: color-mix(in oklab, #C6CEE7, #7E88B4 var(--n));
  --pz-schatten: color-mix(in srgb, rgb(92 58 12 / 0.4), rgb(0 2 16 / 0.66) var(--n));
  --pz-schatten-klein: color-mix(in srgb, rgb(92 58 12 / 0.32), rgb(0 2 16 / 0.5) var(--n));
  --pz-kante: color-mix(in srgb, rgb(255 255 255 / 0.7), rgb(170 186 255 / 0.2) var(--n));

  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-l);
  overflow: clip;
  isolation: isolate;
  container-type: inline-size;
  view-timeline: --pz-blick block;
  background: linear-gradient(to bottom, var(--pz-himmel-o), var(--pz-himmel-u) 64%);
  box-shadow: var(--schatten-gross);
  transition: --nacht 0.6s ease;
}
/* Dunkel = Nacht: dieselbe Logik wie bei den Farb-Tokens oben */
:root[data-farbe="dunkel"] .papier { --nacht: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) .papier { --nacht: 1; }
}
/* Papierstruktur (einmal feTurbulence) und Tiefe des Kastens am Rand */
.papier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 1.6 -.3 0 0 0 1.6 -.3 0 0 0 1.6 -.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  mix-blend-mode: soft-light;
  opacity: 0.3;
  box-shadow: inset 0 0 0 1px rgb(22 32 74 / 0.12), inset 0 16px 26px -16px rgb(40 24 0 / 0.55);
}

.lage {
  position: absolute;
  left: var(--pz-links, 0%);
  bottom: 0;
  width: var(--pz-breite, 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  /* heller Schnittkante oben, weicher Schatten unten links (Licht kommt von rechts oben) */
  filter: drop-shadow(0 max(-1px, -0.16cqw) 0 var(--pz-kante)) drop-shadow(calc(var(--sy) * -0.3) var(--sy) var(--sb) var(--pz-schatten));
}
.lage-himmel { --tiefe: -1; --drift: 7%; filter: none; }
.lage-fern { --tiefe: -0.6; --drift: 4.5%; --sy: 0.6cqw; --sb: 0.9cqw; }
.lage-mitte { --tiefe: -0.3; --drift: 2.2%; --sy: 0.9cqw; --sb: 1.2cqw; }
.lage-schule { --tiefe: 0; --drift: 0%; --sy: 1.2cqw; --sb: 1.5cqw; }
.lage-schmuck { --tiefe: 0; --drift: 0%; --sy: 0.5cqw; --sb: 0.5cqw; }
.lage-vorn { --tiefe: 0.75; --drift: -2.5%; --sy: 1.4cqw; --sb: 2cqw; }
.lage-flieger { --tiefe: 1.4; --drift: -6%; --sy: 3cqw; --sb: 1.6cqw; }

/* Tag/Nacht */
.pz-tag { opacity: calc(1 - var(--nacht)); }
.pz-nacht { opacity: var(--nacht); }
.pz-fs { flood-color: var(--pz-schatten-klein); }
.pz-gl-0 { stop-color: #FFD66B; stop-opacity: 0.75; }
.pz-gl-1 { stop-color: #FFD66B; stop-opacity: 0.28; }
.pz-gl-2 { stop-color: #FFD66B; stop-opacity: 0; }
.pz-ke-0 { stop-color: #FFE39A; stop-opacity: 0.6; }
.pz-ke-1 { stop-color: #FFE39A; stop-opacity: 0; }

/* Himmel */
.pz-kranz { fill: #FFF0C2; }
.pz-sonne-1 { fill: #FFE38E; }
.pz-sonne-2 { fill: #FFD354; }
.pz-sonne-3 { fill: #FFC21A; }
.pz-hof-1 { fill: #131C50; }
.pz-hof-2 { fill: #1A2764; }
.pz-sichel { fill: #FFEFC4; }
.pz-sterne { fill: #FFF3C4; }
.pz-wolke-oben { fill: var(--pz-wolke); }
.pz-wolke-unten { fill: var(--pz-wolke-2); }
/* Ferne */
.pz-fern-1 { fill: var(--pz-fern-1); }
.pz-fern-2 { fill: var(--pz-fern-2); }
.pz-stadt { fill: var(--pz-stadt); }
.pz-stadtlicht { fill: #FFD66B; }
.pz-windrad { fill: var(--pz-windrad); }
/* Mitte */
.pz-mitte { fill: var(--pz-mitte); }
.pz-stamm { fill: var(--pz-stamm); }
.pz-krone, .pz-pappel { fill: var(--pz-baum); }
.pz-krone-licht, .pz-pappel-licht { fill: var(--pz-baum-licht); }
.pz-tanne { fill: var(--pz-tanne); }
.pz-tanne-licht { fill: var(--pz-tanne-licht); }
.pz-vogel { fill: #FFFFFF; }
/* Schule */
.pz-wand { fill: var(--pz-wand); }
.pz-wand-2 { fill: var(--pz-wand-2); }
.pz-dach { fill: var(--pz-dach); }
.pz-dach-2, .pz-traufe { fill: var(--pz-dach-2); }
.pz-sockel, .pz-gesims, .pz-sims, .pz-tuerrahmen { fill: var(--pz-sockel); }
.pz-rahmen, .pz-zeiger, .pz-tuer { fill: var(--pz-rahmen); }
.pz-glas { fill: var(--glas, var(--pz-glas)); }
.pz-glas-schatten { fill: var(--glas-schatten, var(--pz-glas-schatten)); }
.pz-aus { --glas: var(--pz-glas-aus); --glas-schatten: var(--pz-glas-aus-schatten); }
.pz-zifferblatt { fill: var(--pz-uhr); }
.pz-tuer-innen { fill: var(--pz-tuer-innen); }
.pz-tuer-boden { fill: var(--pz-tuer-boden); }
.pz-schein { fill: url(#pz-glanz); }
.pz-rasen { fill: var(--pz-rasen); }
.pz-weg { fill: var(--pz-weg); }
.pz-weg-rand { fill: var(--pz-weg-rand); }
.pz-stufe { fill: var(--pz-stufe); }
/* Festschmuck */
.pz-mast, .pz-knoten { fill: var(--pz-mast); }
.pz-fahne { fill: var(--pz-gelb); }
.pz-leine, .pz-schnur { fill: none; stroke: var(--pz-mast); stroke-width: 1.6; stroke-linecap: round; }
.pz-w-rot, .pz-b-rot, .pz-bl-rot { fill: var(--pz-rot); }
.pz-w-gelb, .pz-b-gelb, .pz-bl-gelb { fill: var(--pz-gelb); }
.pz-w-blau, .pz-b-blau { fill: var(--pz-blau); }
.pz-w-weiss, .pz-bl-weiss { fill: var(--pz-weiss); }
.pz-bl-gelb { --mitte: var(--pz-rot); }
.pz-bl-mitte { fill: var(--mitte, var(--pz-gelb)); }
.pz-blumen { opacity: calc(1 - var(--nacht) * 0.45); }
.pz-ballon-licht { fill: rgb(255 255 255 / 0.4); }
.pz-banner-band { fill: var(--pz-gelb); }
.pz-banner-ende { fill: var(--pz-gelb-2); }
.pz-banner-falz { fill: var(--pz-gelb-3); }
.pz-banner-text { fill: #16204A; font-family: var(--schrift-titel); font-weight: 800; font-size: 25px; }
/* Vorn */
.pz-hecke { fill: var(--pz-hecke); }
.pz-vorn-1 { fill: var(--pz-vorn); }
.pz-lampe { fill: var(--pz-lampe); }
.pz-flieger-oben { fill: var(--pz-papier); }
.pz-flieger-unten { fill: var(--pz-papier-2); }
.pz-flieger-kiel { fill: var(--pz-papier-3); }

/* Handy und Tablet: breiterer Ausschnitt (5:4), etwas näher heran */
@media (max-width: 59.99em) {
  .papier { aspect-ratio: 5 / 4; --pz-breite: 111.2%; --pz-links: -5.6%; }
}

/* Hoher Kontrast: klare Strichzeichnung in Text- und Grundfarbe, keine weichen Schatten.
   Fenster und Blüten stecken in <use> – dort wirken nur Klassen und geerbte Variablen. */
.pz-rahmen, .pz-glas, .pz-sims, .pz-bl-blatt, .pz-bl-mitte { stroke: var(--pz-strich, none); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.kontrast .papier {
  --pz-strich: var(--text);
  --pz-rahmen: var(--grund); --pz-glas: var(--grund); --pz-glas-aus: var(--grund);
  --pz-glas-schatten: var(--grund); --pz-glas-aus-schatten: var(--grund); --pz-sockel: var(--grund); --mitte: var(--grund);
  background: var(--grund);
  box-shadow: none;
  border: 2px solid var(--text);
}
.kontrast .papier::after { display: none; }
.kontrast .lage, .kontrast .papier [filter] { filter: none; }
.kontrast .papier :is(path, rect, circle, ellipse, use) {
  fill: var(--grund);
  stroke: var(--text);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.kontrast .papier :is(.pz-leine, .pz-schnur) { fill: none; }
.kontrast .papier :is(.pz-sterne *, .pz-zeiger, .pz-knoten, .pz-sichel, .pz-mast, .pz-vogel) { fill: var(--text); stroke: none; }
.kontrast .papier .pz-banner-text { fill: var(--text); }
.kontrast .papier :is(.pz-schein, .pz-licht, .pz-laternen-schein, .pz-ballon-licht, .pz-wolke-unten, .pz-krone-licht, .pz-pappel-licht, .pz-tanne-licht, .pz-dach-2, .pz-stadtlicht, .pz-tuer-boden, .pz-fern-1, .pz-stadt, .pz-kranz, .pz-blumen) { display: none; }

/* Stempel: aufgeklebter Papier-Sticker auf der Ecke des Bildes */
.stempel {
  position: absolute;
  left: -3%;
  top: -3%;
  z-index: 2;
  width: clamp(5.5rem, 24%, 8.75rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFDF7;
  box-shadow: 0 1px 1px rgb(22 32 74 / 0.18), 0 10px 18px -8px rgb(22 32 74 / 0.55);
  rotate: -8deg;
}
.stempel svg { position: absolute; inset: 5%; width: 90%; height: 90%; }
.stempel-grund { fill: #1E3A8A; }
.stempel-rund { fill: #FFFFFF; font-family: var(--schrift-titel); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.stempel-datum {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFC21A;
  font-family: var(--schrift-titel);
  line-height: 0.9;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.7rem + 0.55vw, 1.08rem);
}
.stempel-datum strong { font-size: 1.55em; font-weight: 800; color: #FFFFFF; }
.kontrast .stempel { background: var(--grund); box-shadow: none; border: 2px solid var(--text); }
.kontrast .stempel-grund { fill: #000; }

/* ---------- Schnell gefunden ---------- */
.schnell { padding-bottom: 0; }
#aktuelles { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.schnell-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
}
.schnell-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  height: 100%;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--r-m);
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  box-shadow: var(--schatten);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), border-color 0.2s;
}
.schnell-kachel:hover { transform: translateY(-3px); border-color: var(--text); }
.s-ikon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
}
.s-ikon .ikon { width: 1.5rem; height: 1.5rem; }
.s-blau .s-ikon, .saeule-ikon.s-blau { background: var(--blau-hell); color: var(--blau); }
.s-rot .s-ikon, .saeule-ikon.s-rot { background: var(--rot-hell); color: var(--rot-text); }
.s-gelb .s-ikon, .saeule-ikon.s-gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.saeule-ikon.s-gruen { background: var(--gruen-hell); color: var(--gruen-text); }
.kontrast .s-ikon, .kontrast .saeule-ikon { border: 2px solid var(--text); }
.s-text { display: flex; flex-direction: column; line-height: 1.3; }
.s-text strong { font-size: 1.0625rem; hyphens: auto; }
.schnell-kachel:hover .s-ikon { transform: rotate(-8deg) scale(1.06); }
.s-ikon { transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.s-text span { font-size: 0.875rem; color: var(--text-leise); }
@media (max-width: 559px) {
  .schnell-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .schnell-kachel { gap: 0.6rem; padding: 0.9rem; }
  .s-ikon { width: 2.5rem; height: 2.5rem; }
  .s-ikon .ikon { width: 1.3rem; height: 1.3rem; }
  .s-text strong { font-size: 1rem; line-height: 1.25; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt-flaeche { background: var(--flaeche); }
.abschnitt-gelb { background: var(--gelb-flaeche); color: var(--gelb-flaeche-text); }
.abschnitt-blau { background: var(--blau-flaeche); color: var(--blau-flaeche-text); --fokus: #FFC21A; --link: #FFD66B; }
.kontrast .abschnitt-flaeche, .kontrast .abschnitt-gelb { border-block: 2px solid var(--text); }
.abschnitt-kopf { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt-kopf > p:last-child { margin-bottom: 0; }
.abschnitt-kopf p:not(.dachzeile) { font-size: 1.125rem; }
.abschnitt-kopf-zeile {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.abschnitt-kopf-zeile > div { max-width: 44rem; }
.abschnitt-kopf-zeile > div > p:last-child { margin-bottom: 0; }
.abschnitt-gelb .dachzeile { color: var(--gelb-flaeche-text); }
.abschnitt-gelb .dachzeile::before { background: var(--gelb-flaeche-punkt); box-shadow: 0.45rem 0 0 var(--rot); }
.abschnitt-blau .dachzeile { color: var(--gelb); }
.abschnitt-blau .dachzeile::before { box-shadow: 0.45rem 0 0 var(--karte); }
p.gross { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem); }

/* ---------- Aktuelles ---------- */
.news-raster {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.news-karte {
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.news-bild svg { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.news-text { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.news-text h3 { font-size: 1.4rem; }
.news-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--text-leise); }
.mehr { margin-top: auto; }
.mehr summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  cursor: pointer;
  color: var(--link);
  font-weight: 700;
  list-style: none;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}
.mehr[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mehr p { margin: 0.25rem 0 0; }
/* Nachrichten-Bilder (generiert) */
.nb-grund { fill: var(--flaeche); }
.nb-garten .nb-grund { fill: #E3F2DA; }
.nb-robo .nb-grund { fill: #E1E8FB; }
.nb-zeitung .nb-grund { fill: #FFEBB0; }
.nb-sonne { fill: #FFC21A; }
.nb-boden { fill: #8FC98A; }
.nb-holz { fill: #C4874A; stroke: #16204A; stroke-width: 3; }
.nb-dach { fill: #E5482F; stroke: #16204A; stroke-width: 3; stroke-linejoin: round; }
.nb-waben circle { fill: #FFF1CF; stroke: #16204A; stroke-width: 2.5; }
.nb-biene ellipse { fill: #FFC21A; stroke: #16204A; stroke-width: 2.5; }
.nb-biene path { stroke: #16204A; stroke-width: 2.5; }
.nb-blume path { stroke: #2E7D53; stroke-width: 4; stroke-linecap: round; }
.nb-blume circle { fill: #E5482F; } .nb-blume .nb-mitte { fill: #FFC21A; }
.nb-bahn { stroke: #16204A; stroke-width: 4; stroke-dasharray: 14 10; stroke-linecap: round; }
.nb-koerper { fill: #FFC21A; stroke: #16204A; stroke-width: 3; }
.nb-kopf { fill: #FFFFFF; stroke: #16204A; stroke-width: 3; }
.nb-auge { fill: #16204A; }
.nb-antenne { stroke: #16204A; stroke-width: 3; }
.nb-kugel { fill: #E5482F; stroke: #16204A; stroke-width: 2.5; }
.nb-rad { fill: #1E3A8A; stroke: #16204A; stroke-width: 3; }
.nb-pokal { fill: #FFC21A; stroke: #16204A; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.nb-sterne path, .nb-sterne circle { fill: #E5482F; }
.nb-blatt { fill: #FFFFFF; stroke: #16204A; stroke-width: 3; }
.nb-blatt-2 { fill: #FFF8E6; }
.nb-kopfzeile { fill: #E5482F; }
.nb-bildchen { fill: #1E3A8A; }
.nb-zeilen { stroke: #16204A; stroke-width: 4; stroke-linecap: round; opacity: 0.55; }
.nb-lupe { fill: rgb(255 255 255 / 0.5); stroke: #16204A; stroke-width: 5; }
.nb-lupengriff { stroke: #16204A; stroke-width: 8; stroke-linecap: round; }

/* ---------- Vertretungsplan ---------- */
.vp {
  container: vp / inline-size;
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-gross);
  overflow: hidden;
}
.vp-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem);
  background: var(--flaeche-blau);
  border-bottom: var(--rand-staerke) solid var(--karte-rand);
}
.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); }
.auswahl { position: relative; }
.auswahl select {
  appearance: none;
  min-height: 3.25rem;
  min-width: 9rem;
  padding: 0 3rem 0 1rem;
  border-radius: var(--r-s);
  border: 2px solid var(--text);
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.auswahl::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-right: 3px solid var(--text);
  border-bottom: 3px solid var(--text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.vp-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--text);
}
.vp-tabs [role="tab"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 2.75rem;
  min-width: 7.5rem;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: none;
  color: var(--text);
  line-height: 1.2;
  text-align: left;
}
.vp-tabs [role="tab"][aria-selected="true"] { background: var(--knopf-grund); color: var(--knopf-text); }
.vp-tabs [role="tab"]:not([aria-selected="true"]):hover { background: var(--gelb-hell); }
.tab-name { font-weight: 800; font-size: 1rem; }
.tab-datum { font-size: 0.8125rem; opacity: 0.9; }
.vp-panel { padding: clamp(1rem, 2.5vw, 1.75rem); min-height: 14rem; }
.vp-panel:focus-visible { outline-offset: -6px; }
.vp-kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.vp-zaehler { margin: 0; font-size: 1.125rem; }
.vp-zaehler strong { font-family: var(--schrift-titel); font-size: 1.6rem; color: var(--rot-text); margin-right: 0.15rem; }
.vp-stand { margin: 0; font-size: 0.875rem; color: var(--text-leise); }
.vp-mitteilung {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-s);
  background: var(--gelb-hell);
  border-left: 5px solid var(--gelb);
  color: var(--text);
}
.kontrast .vp-mitteilung { border: 2px solid var(--text); border-left-width: 6px; }
.vp-tabelle { width: 100%; border-collapse: collapse; }
.vp-tabelle th {
  text-align: left;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
  font-weight: 700;
  padding: 0 1rem 0.6rem;
}
.vp-tabelle td { padding: 0.9rem 1rem; border-top: var(--rand-staerke) solid var(--karte-rand); vertical-align: middle; }
.vp-stunde { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.45rem; line-height: 1; white-space: nowrap; }
.z-fach { font-weight: 700; }
.z-hinweis { color: var(--text-leise); font-size: 0.9375rem; }
.vp-tabelle s { color: var(--text-leise); text-decoration-thickness: 2px; text-decoration-color: var(--rot); }
.neu-wert { font-weight: 800; margin-left: 0.45rem; color: var(--text); }
.neu-wert::before { content: "→ "; color: var(--rot-text); font-weight: 700; }
.ist-entfall .z-fach s { color: var(--text); }
.art {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.art::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.art-blau { background: var(--blau-hell); color: var(--blau); }
.art-rot { background: var(--rot-hell); color: var(--rot-text); }
.art-gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.art-gruen { background: var(--gruen-hell); color: var(--gruen-text); }
.art-lila { background: var(--lila-hell); color: var(--lila); }
.kontrast .art { border: 2px solid currentColor; }
.vp-leer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--r-m);
  background: var(--gruen-hell);
  color: var(--text);
}
.vp-leer svg { width: 4rem; height: 4rem; flex: none; }
.vp-leer p { margin: 0; font-size: 1.125rem; }
.vl-kreis { fill: #FFC21A; stroke: #16204A; stroke-width: 3; }
.vl-auge { fill: #16204A; }
.vl-mund { fill: none; stroke: #16204A; stroke-width: 3.5; stroke-linecap: round; }
/* Schmale Ansicht: Zeilen werden zu Karten */
@container vp (max-width: 42em) {
  .vp-tabs { width: 100%; }
  .vp-tabs [role="tab"] { flex: 1; min-width: 0; }
  .feld, .auswahl select { width: 100%; }
  .vp-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vp-tabelle, .vp-tabelle tbody { display: block; }
  .vp-tabelle tr {
    display: grid;
    grid-template-columns: minmax(3.25rem, auto) 1fr auto;
    gap: 0.35rem 0.75rem;
    padding: 1rem 0;
    border-top: var(--rand-staerke) solid var(--karte-rand);
  }
  .vp-tabelle td { display: block; padding: 0; border: 0; }
  .vp-tabelle .z-stunde { grid-row: span 4; }
  .vp-tabelle .z-fach { grid-column: 2; font-size: 1.125rem; }
  .vp-tabelle .z-art { grid-column: 3; grid-row: 1; }
  .vp-tabelle td:not(.z-stunde):not(.z-fach):not(.z-art) { grid-column: 2 / 4; font-size: 0.9375rem; }
  .vp-tabelle td:not(.z-stunde):not(.z-fach):not(.z-art)::before {
    content: attr(data-label) ": ";
    color: var(--text-leise);
    font-weight: 700;
  }
  .vp-stunde { font-size: 1.8rem; }
}
@container vp (max-width: 22em) {
  .vp-tabelle tr { grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr); }
  .vp-tabelle .z-art { grid-column: 2; grid-row: auto; }
  .vp-tabelle .z-stunde { grid-row: span 5; }
}

/* ---------- Termine ---------- */
.termine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
@media (min-width: 62em) {
  .termine { grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); }
  .kal { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
}
.kal {
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
  padding: 1.25rem;
}
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.kal-monat { margin: 0; font-size: 1.5rem; }
.kal-wochentage, .kal-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.kal-wochentage span { text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--text-leise); padding-bottom: 0.25rem; }
.kal-tag {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  aspect-ratio: 1;
  min-height: 2.5rem;
  border-radius: var(--r-s);
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0;
}
.kal-tag.ist-we { color: var(--text-leise); font-weight: 500; }
.kal-tag.ist-vergangen { color: var(--text-leise); font-weight: 500; }
.kal-tag.ist-vergangen .kal-zahl { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--text-leise) 60%, transparent); }
.kal-tag.ist-heute { box-shadow: inset 0 0 0 2px var(--rot); }
.kal-tag.hat-termin { background: var(--flaeche-blau); cursor: pointer; }
.kal-tag.hat-termin:hover { background: var(--gelb-hell); }
.kontrast .kal-tag.hat-termin { box-shadow: inset 0 0 0 2px var(--text); }
.kal-punkte { display: flex; gap: 3px; }
.punkt { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.p-oeffentlich { background: var(--rot); }
.p-eltern { background: var(--blau-mittel); }
.p-schule { background: var(--gruen); }
.kal-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--karte-rand); font-size: 0.875rem; color: var(--text-leise); }
.kal-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.termin-naechster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}
.termin-naechster > span:last-child { flex: 1 1 14rem; }
.tn-etikett { padding: 0.1rem 0.65rem; border-radius: 999px; background: var(--rot-knopf); color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
:root[data-farbe="dunkel"] .tn-etikett { color: #16204A; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .tn-etikett { color: #16204A; } }
.kontrast .tn-etikett { color: var(--grund); background: var(--text); }
.termin-liste { display: grid; gap: 0.75rem; }
.termin {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  border-radius: var(--r-m);
  box-shadow: var(--schatten);
}
.t-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  border-radius: var(--r-s);
  background: var(--flaeche-blau);
  line-height: 1.05;
  text-align: center;
}
.t-oeffentlich .t-datum { background: var(--rot-hell); }
.t-eltern .t-datum { background: var(--blau-hell); }
.t-schule .t-datum { background: var(--gruen-hell); }
.kontrast .t-datum { border: 2px solid var(--text); }
.t-wt { font-size: 0.8125rem; font-weight: 700; color: var(--text-leise); }
.t-tag { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.9rem; line-height: 1.05; padding-top: 0.15rem; }
.ist-mehrtaegig .t-tag { font-size: 1.15rem; padding-block: 0.3rem 0.15rem; }
.t-monat { font-size: 0.875rem; font-weight: 700; }
.t-inhalt h4 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.t-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-bottom: 0.5rem; color: var(--text-leise); font-size: 0.9375rem; }
.t-meta li { display: inline-flex; align-items: center; gap: 0.35rem; }
.t-meta .ikon { width: 1.05rem; height: 1.05rem; }
.t-text { margin: 0 0 0.6rem; }
.t-fuss { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.t-ics {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--karte);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.t-ics:hover { background: var(--gelb); color: #16204A; transform: translateY(-2px); }
.ist-vorbei { background: var(--flaeche); box-shadow: none; }
.ist-vorbei .t-datum { background: var(--karte); }
.ist-vorbei h4 { color: var(--text-leise); }
.ist-markiert { animation: markieren 1.6s ease-out; }
@keyframes markieren {
  0%, 30% { box-shadow: 0 0 0 4px var(--gelb), var(--schatten); }
  100% { box-shadow: 0 0 0 0 transparent, var(--schatten); }
}
.termin-leer { padding: 2rem 1.5rem; border-radius: var(--r-m); border: 2px dashed var(--karte-rand); color: var(--text-leise); text-align: center; }
@media (max-width: 40em) {
  .kal { padding: 1rem 0.75rem; }
  .kal-tag { min-height: 0; font-size: 0.875rem; }
  .termin { grid-template-columns: 4rem minmax(0, 1fr); padding: 1rem; gap: 0.75rem 1rem; }
  .t-ics { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .t-tag { font-size: 1.6rem; }
}

/* ---------- Mensa ---------- */
.mensa-legende { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mensa-woche { white-space: nowrap; }
.mensa-woche-liste {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  align-items: stretch;
}
.mensa-tag {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.25rem;
  border-radius: var(--r-m);
  background: var(--karte);
  color: var(--text);
  border: 2px solid transparent;
  transition: transform 0.3s;
}
.mensa-tag h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; font-size: 1.35rem; padding-bottom: 0.6rem; margin-bottom: 0.75rem; border-bottom: 2px dotted var(--karte-rand); }
.mt-datum { font-family: var(--schrift-text); font-size: 0.9375rem; font-weight: 600; color: var(--text-leise); }
.mensa-tag ul { display: flex; flex-direction: column; gap: 0.85rem; }
.mensa-tag li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; line-height: 1.35; }
.gericht { font-weight: 600; }
.nachtisch { color: var(--text-leise); font-size: 0.9375rem; margin-top: auto; }
.nachtisch .gericht { font-weight: 400; }
.kenn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.08rem 0.55rem 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.kenn .ikon { width: 1rem; height: 1rem; }
.k-veg { background: var(--gruen-hell); color: var(--gruen-text); }
.k-vegan { background: var(--gruen-text); color: var(--karte); }
.kontrast .kenn { border: 2px solid currentColor; }
.mensa-legende .kenn { font-size: 0.9375rem; padding: 0.3rem 0.85rem 0.3rem 0.6rem; background: var(--karte); color: var(--text); border: 2px solid var(--text); }
.mensa-legende .k-vegan { background: var(--gruen-text); color: var(--karte); border-color: var(--gruen-text); }
.mensa-tag.ist-heute {
  border-color: var(--text);
  box-shadow: 0 6px 0 var(--text);
  transform: translateY(-4px);
}
.mensa-tag { position: relative; }
.heute-etikett {
  position: absolute;
  top: -0.85rem;
  right: 1rem;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: var(--rot-knopf);
  color: #FFFFFF;
  font-family: var(--schrift-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
:root[data-farbe="dunkel"] .heute-etikett { color: #16204A; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .heute-etikett { color: #16204A; } }
.kontrast .heute-etikett { background: var(--text); color: var(--grund); }
.mensa-tag.ist-vorbei { background: color-mix(in srgb, var(--karte) 70%, var(--gelb-flaeche)); }
.kontrast .mensa-tag { border-color: var(--text); }
.abschnitt-gelb .kleingedruckt { color: var(--gelb-flaeche-text); }

/* ---------- Unsere Schule ---------- */
.profil-kopf { display: grid; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.profil-kopf .abschnitt-kopf { margin-bottom: 0; }
@media (min-width: 62em) { .profil-kopf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.fakten li {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-m);
  background: var(--flaeche);
  border: var(--rand-staerke) solid var(--karte-rand);
}
.fakten li:nth-child(1) { background: var(--gelb-hell); }
.fakten li:nth-child(4) { background: var(--blau-hell); }
.fakten strong { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; color: var(--text); }
.fakten span { font-size: 0.9375rem; color: var(--text-leise); margin-top: 0.3rem; }
.saeulen {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.saeule {
  padding: 1.5rem;
  border-radius: var(--r-l);
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  box-shadow: var(--schatten);
}
.saeule-ikon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50% 50% 50% 12px; margin-bottom: 1rem; }
.saeule-ikon .ikon { width: 1.75rem; height: 1.75rem; }
.saeule p { margin: 0; }
.zitat {
  position: relative;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-left: clamp(4rem, 9vw, 7rem);
  border-radius: var(--r-l);
  background: var(--flaeche);
  border: var(--rand-staerke) solid var(--karte-rand);
}
.zitat::before {
  content: "„";
  position: absolute;
  left: clamp(0.75rem, 2.5vw, 1.75rem);
  top: clamp(0.25rem, 1vw, 0.75rem);
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 6vw, 4rem);
  height: clamp(2.75rem, 6vw, 4rem);
  border-radius: 50%;
  background: var(--gelb);
  color: #16204A;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.4;
}
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; margin-bottom: 1rem; }
.zitat figcaption { color: var(--text-leise); }
.zitat figcaption strong { color: var(--text); }

/* ---------- Campus-Plan ---------- */
.campus {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 64em) { .campus { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; } }
.campus-karte {
  position: relative;
  border-radius: var(--r-l);
  background:
    radial-gradient(60% 50% at 50% 55%, color-mix(in srgb, var(--iso-himmel) 100%, transparent), transparent 75%);
}
.campus-svg { width: 100%; height: auto; overflow: visible; }
.campus-svg polygon { stroke-linejoin: round; }
.m-wand-o { fill: var(--iso-wand-o); } .m-wand-l { fill: var(--iso-wand-l); } .m-wand-r { fill: var(--iso-wand-r); }
.m-rot-o { fill: var(--iso-rot-o); } .m-rot-l { fill: var(--iso-rot-l); } .m-rot-r { fill: var(--iso-rot-r); }
.m-blau-o { fill: var(--iso-blau-o); } .m-blau-l { fill: var(--iso-blau-l); } .m-blau-r { fill: var(--iso-blau-r); }
.m-gelb-o { fill: var(--iso-gelb-o); } .m-gelb-l { fill: var(--iso-gelb-l); } .m-gelb-r { fill: var(--iso-gelb-r); }
.m-gruen-o { fill: var(--iso-gruen-o); } .m-gruen-l { fill: var(--iso-gruen-l); } .m-gruen-r { fill: var(--iso-gruen-r); }
.m-boden-o { fill: var(--iso-boden-o); } .m-boden-l { fill: var(--iso-boden-l); } .m-boden-r { fill: var(--iso-boden-r); }
.m-erde-o { fill: var(--iso-erde-o); } .m-erde-l { fill: var(--iso-erde-l); } .m-erde-r { fill: var(--iso-erde-r); }
.m-pflaster-o { fill: var(--iso-pflaster-o); } .m-pflaster-l { fill: var(--iso-pflaster-l); } .m-pflaster-r { fill: var(--iso-pflaster-r); }
.m-holz-o { fill: var(--iso-holz-o); } .m-holz-l { fill: var(--iso-holz-l); } .m-holz-r { fill: var(--iso-holz-r); }
.m-glas-o { fill: var(--iso-glas-o); } .m-glas-l { fill: var(--iso-glas-l); } .m-glas-r { fill: var(--iso-glas-r); }
.m-stamm-o { fill: var(--iso-stamm-o); } .m-stamm-l { fill: var(--iso-stamm-l); } .m-stamm-r { fill: var(--iso-stamm-r); }
.m-stange-o { fill: var(--iso-stange-o); } .m-stange-l { fill: var(--iso-stange-l); } .m-stange-r { fill: var(--iso-stange-r); }
.m-stange { stroke: var(--iso-stange-l); stroke-width: 2.5; stroke-linecap: round; }
.m-weg { fill: var(--iso-weg); }
.m-fenster { fill: var(--iso-fenster); }
.m-fensterband { fill: var(--iso-fenster); }
.m-glasfront { fill: var(--iso-glasfront); }
.m-sprosse { fill: var(--iso-wand-r); }
.m-tuer { fill: var(--iso-tuer); }
.m-solar { fill: var(--iso-solar); stroke: var(--iso-wand-o); stroke-width: 0.8; }
.m-kuppel { fill: var(--iso-kuppel); stroke: var(--iso-wand-r); stroke-width: 1; }
.m-kuppel-spalt { fill: var(--iso-solar); }
.fahne { fill: var(--iso-rot-l); transform-box: fill-box; transform-origin: 0 50%; }
.bluete { opacity: 0.9; }
.baum .krone { fill: var(--iso-baum-a); }
.baum-b .krone { fill: var(--iso-baum-b); }
.baum-c .krone { fill: var(--iso-baum-c); }
.krone-licht { fill: #FFFFFF; opacity: 0.22; }
.ort-schatten { fill: var(--iso-schatten); transition: opacity 0.35s; }
.wolke { fill: var(--iso-wolke); opacity: 0.95; }
.figur rect, .figur circle { stroke: #16204A; stroke-width: 1.2; }
.f-rot rect, .f-rot circle { fill: #E5482F; }
.f-blau rect, .f-blau circle { fill: #2F55B8; }
.f-gelb rect, .f-gelb circle { fill: #FFC21A; }
.f-gruen rect, .f-gruen circle { fill: #2E7D53; }
.kontrast .campus-svg polygon { stroke: #000; stroke-width: 0.6; }
.haus { cursor: pointer; }
.haus-koerper { transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.45, 1); }
.haus.schwebt .haus-koerper, .haus.aktiv .haus-koerper { transform: translateY(-14px); }
.pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  translate: -50% -100%;
  border-radius: 50% 50% 50% 4px;
  rotate: -45deg;
  background: var(--knopf-grund);
  color: var(--knopf-text);
  border: 2px solid var(--karte);
  box-shadow: 0 6px 14px -4px rgb(22 32 74 / 0.5);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: translate 0.45s cubic-bezier(0.3, 1.5, 0.45, 1), background 0.2s, scale 0.2s;
  user-select: none;
}
.pin > * { rotate: 45deg; }
.pin.schwebt, .pin.aktiv { translate: -50% calc(-100% - 14px); }
.pin.aktiv { background: var(--rot-knopf); }
:root[data-farbe="dunkel"] .pin.aktiv { color: #16204A; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .pin.aktiv { color: #16204A; } }
.orte-liste { display: grid; gap: 0.4rem; counter-reset: ort; }
.ort-knopf {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-m);
  border: var(--rand-staerke) solid var(--karte-rand);
  background: var(--karte);
  color: var(--text);
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ort-knopf.schwebt { border-color: var(--text); transform: translateX(4px); }
.ort-knopf.aktiv { background: var(--gelb-hell); border-color: var(--text); }
.ort-nr {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1;
  padding-top: 0.1em;
}
.ort-text { display: flex; flex-direction: column; line-height: 1.3; }
.ort-text span { font-size: 0.875rem; color: var(--text-leise); }

/* Popover mit Ortsinfos */
.ort-info {
  width: min(22rem, calc(100vw - 32px));
  padding: 0 0 1.1rem;
  border: 2px solid var(--text);
  border-radius: var(--r-m);
  background: var(--karte);
  color: var(--text);
  box-shadow: 0 6px 0 var(--text), 0 30px 50px -20px rgb(0 0 0 / 0.45);
  overflow: hidden;
}
.ort-info > p, .ort-info > ul, .ort-info > .oi-link { margin-inline: 1.1rem; }
.ort-info > p { margin-top: 0.9rem; margin-bottom: 0.6rem; }
.ort-info > ul { font-size: 0.9375rem; display: grid; gap: 0.2rem; margin-bottom: 0.4rem; }
.ort-info > ul li { display: flex; gap: 0.5rem; }
.ort-info > ul li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin-top: 0.55rem; border-radius: 50%; background: var(--rot); }
.oi-kopf { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.6rem 0.6rem 1rem; background: var(--oi-farbe, var(--flaeche)); border-bottom: 2px solid var(--text); }
.oi-kopf h3 { margin: 0; font-size: 1.3rem; flex: 1; }
.oi-rot { --oi-farbe: var(--rot-hell); }
.oi-blau { --oi-farbe: var(--blau-hell); }
.oi-gelb { --oi-farbe: var(--gelb-hell); }
.oi-gruen { --oi-farbe: var(--gruen-hell); }
.oi-zu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0;
  background: var(--karte);
  color: var(--text);
}
.oi-zu:hover { background: var(--text); color: var(--grund); }
.oi-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 700; }
.ort-info::backdrop { background: transparent; }

/* Verankerung am Pin (CSS Anchor Positioning) */
@supports (anchor-name: --a) and (position-area: top) {
  .ort-info.am-pin {
    inset: auto;
    margin: 0 0 1rem;
    position-area: top;
    position-try-fallbacks: flip-block;
  }
  .a11y-menue {
    position-anchor: --a11y;
    inset: auto;
    margin: 0.6rem 0 0;
    position-area: bottom span-left;
    position-try-fallbacks: flip-inline;
  }
}
/* Ersatz ohne Anchor Positioning: Position setzt js/anker.js */
.frei-positioniert { inset: auto; margin: 0; top: 5rem; right: 1rem; }
.frei-positioniert.ort-info { right: auto; }
/* Auf dem Handy: Blatt am unteren Rand */
@media (max-width: 40em) {
  .ort-info.am-pin, .ort-info.frei-positioniert {
    position-area: none;
    inset: auto 0 0 0;
    top: auto !important;
    left: 0 !important;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--r-l) var(--r-l) 0 0;
    border-bottom: 0;
    box-shadow: 0 -20px 50px -20px rgb(0 0 0 / 0.5);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* ---------- AG-Finder ---------- */
.ag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  border-radius: var(--r-l);
  background: var(--flaeche);
  border: var(--rand-staerke) solid var(--karte-rand);
}
.chip-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-gruppe legend { padding: 0; margin-bottom: 0.5rem; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--karte);
  color: var(--text);
  font-weight: 700;
  transition: background 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--knopf-grund); color: var(--knopf-text); border-color: var(--knopf-grund); }
.kontrast .chip[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.chip[aria-pressed="true"]:not(.chip-tag)::after {
  content: "";
  width: 0.4rem;
  height: 0.75rem;
  margin: -0.2rem 0 0 0.1rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.chip-tag { min-width: 2.75rem; justify-content: center; padding: 0 0.9rem; gap: 0; }
@media (max-width: 479px) {
  .chip-tag { padding: 0 0.55rem; }
  .chips-tage { gap: 0.35rem; }
}
.ag-status { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.ag-status p { margin: 0; font-size: 1.0625rem; }
.ag-status strong { font-family: var(--schrift-titel); font-size: 1.5rem; }
.ag-raster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}
.ag-karte {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 0.85rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: var(--r-l);
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
  box-shadow: var(--schatten);
}
.ag-ikon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ag-hell); color: var(--ag-farbe); }
.kontrast .ag-ikon { border: 2px solid var(--text); }
.ag-ikon .ikon { width: 1.5rem; height: 1.5rem; }
.ag-karte h3 { font-size: 1.25rem; margin: 0; }
.ag-karte p { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--text-leise); margin: 0.75rem 0 1rem; }
.ag-karte dl { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 0; padding-top: 0.85rem; border-top: 2px dotted var(--karte-rand); font-size: 0.9375rem; }
.ag-karte dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); }
.ag-karte dd { margin: 0; font-weight: 700; }
.b-sport { --ag-farbe: var(--blau); --ag-hell: var(--blau-hell); }
.b-musik { --ag-farbe: var(--gelb-text); --ag-hell: var(--gelb-hell); }
.b-mint { --ag-farbe: var(--gruen-text); --ag-hell: var(--gruen-hell); }
.b-kunst { --ag-farbe: var(--rot-text); --ag-hell: var(--rot-hell); }
.b-sprachen { --ag-farbe: var(--lila); --ag-hell: var(--lila-hell); }
.b-soziales { --ag-farbe: var(--tuerkis); --ag-hell: var(--tuerkis-hell); }
.ag-mehr-zeile { display: flex; justify-content: center; margin: 1.25rem 0 0; }
.ag-mehr-zeile:has(> [hidden]) { display: none; }
.ag-leer { margin-top: 1rem; padding: 2rem; border-radius: var(--r-l); border: 2px dashed var(--karte-rand); text-align: center; color: var(--text-leise); }

/* ---------- Anmeldung ---------- */
.abschnitt-blau .abschnitt-kopf p:not(.dachzeile) { color: var(--blau-flaeche-leise); }
.schritte {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
  counter-reset: schritt;
}
.schritt {
  position: relative;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--r-l);
  border: 2px solid color-mix(in srgb, var(--blau-flaeche-text) 30%, transparent);
  background: color-mix(in srgb, var(--blau-flaeche-text) 7%, transparent);
}
.kontrast .schritt { border-color: var(--blau-flaeche-text); }
.schritt-nr {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--gelb);
  color: #16204A;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 0.12em;
}
.kontrast .schritt-nr { background: var(--blau-flaeche-text); color: var(--blau-flaeche); }
.schritt h3 { color: var(--blau-flaeche-text); }
.schritt p { margin: 0; color: var(--blau-flaeche-leise); }
.schritt time, .schritt [data-termin-text] { color: var(--blau-flaeche-text); font-weight: 700; }
.anmeldung-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.abschnitt-blau .karte { color: var(--text); --fokus: var(--text); --link: var(--link-karte, #1E3A8A); }
:root[data-farbe="dunkel"] .abschnitt-blau .karte { --link-karte: #AFC5FF; --fokus: #FFC940; }
@media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .abschnitt-blau .karte { --link-karte: #AFC5FF; --fokus: #FFC940; } }
.abschnitt-blau .karte h3 { font-size: 1.5rem; }
.programm-liste { display: grid; }
.programm-liste li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-top: 2px dotted var(--karte-rand); }
.programm-liste li:first-child { border-top: 0; }
.programm-liste .zeit { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.15rem; color: var(--rot-text); line-height: 1.4; }
.haken-liste { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.haken-liste li { display: flex; gap: 0.75rem; align-items: flex-start; }
.haken-liste li::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gruen-hell) no-repeat center / 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B43' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  margin-top: 0.05rem;
}
.kontrast .haken-liste li::before { border: 2px solid var(--text); }
.mitbringen .knopf { margin-top: 0.5rem; }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); margin-bottom: 1rem; }
.kontakt-raster h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.6rem; }
.kontakt-raster h3 .ikon { width: 1.6rem; height: 1.6rem; color: var(--rot-text); }
.oeffnung-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--flaeche);
  font-weight: 700;
  font-size: 0.9375rem;
}
.oeffnung-status::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--text-leise); }
.oeffnung-status.ist-offen { background: var(--gruen-hell); color: var(--gruen-text); }
.oeffnung-status.ist-offen::before { background: var(--gruen); }
.oeffnung-status.ist-zu { background: var(--rot-hell); color: var(--rot-text); }
.oeffnung-status.ist-zu::before { background: var(--rot); }
.kontrast .oeffnung-status { border: 2px solid currentColor; }
.sekretariat address { margin-bottom: 1rem; font-size: 1.125rem; }
.kontakt-wege { display: grid; gap: 0.25rem; margin-bottom: 1.25rem; }
.kontakt-wege a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
.zeiten { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.zeiten th, .zeiten td { text-align: left; padding: 0.6rem 0.75rem; border-top: 1px solid var(--karte-rand); }
.zeiten th { font-weight: 600; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 379px) {
  .zeiten th, .zeiten td { padding-inline: 0.5rem; }
  .zeiten td { white-space: normal; }
}
.zeiten tr.ist-heute { background: var(--gelb-hell); }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { font-weight: 800; }
.zeiten tr.ist-heute th::after { content: " · heute"; font-weight: 600; color: var(--text-leise); }
.kontrast .zeiten tr.ist-heute { outline: 2px solid var(--text); outline-offset: -2px; }
.ansprech { margin: 0; color: var(--text-leise); font-size: 0.9375rem; }
.krank { border-color: var(--rot); border-width: 2px; background: linear-gradient(var(--rot-hell), var(--rot-hell)) top / 100% 0.5rem no-repeat, var(--karte); }
.krank:focus { outline: none; }
.krank:target { box-shadow: 0 0 0 4px var(--gelb), var(--schatten); }
.krank .knopf { margin-top: 0.5rem; }
.krank-extra { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px dotted var(--karte-rand); }
.krank-extra p { margin: 0; color: var(--text-leise); }
.krank-extra strong { color: var(--text); }

.anfahrt { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 62em) { .anfahrt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.anfahrt-karte { padding: 0; overflow: hidden; }
.stadtplan { width: 100%; height: auto; }
@media (max-width: 559px) {
  .stadtplan { aspect-ratio: 600 / 520; }
  .sp-text text { font-size: 18px; }
  .sp-text .sp-text-strasse { font-size: 15px; }
  .sp-text .sp-text-gross { font-size: 18px; }
  .sp-bus text, .sp-rad text { font-size: 14px; }
  .sp-halte text { font-size: 15px; }
}
.sp-grund { fill: var(--sp-grund); }
.sp-gruen { fill: var(--sp-gruen); }
.sp-bach { fill: none; stroke: var(--sp-bach); stroke-width: 22; stroke-linecap: round; }
.sp-strasse path { fill: none; stroke: var(--sp-strasse-rand); stroke-width: 34; }
.sp-strasse-mitte path { fill: none; stroke: var(--sp-strasse); stroke-width: 28; }
.sp-bruecke { fill: var(--sp-strasse); stroke: var(--sp-strasse-rand); stroke-width: 3; }
.sp-block rect { fill: var(--sp-block); }
.sp-schule rect { fill: #FFC21A; stroke: #16204A; stroke-width: 3; }
.sp-platz { fill: #E98A6F; }
.sp-platz-innen { fill: #8FC98A; }
.sp-route { fill: none; stroke: var(--rot-text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-eingang circle { fill: var(--rot-knopf); stroke: #FFFFFF; stroke-width: 3; }
.sp-eingang path { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-bus rect { fill: #1E3A8A; stroke: #FFFFFF; stroke-width: 2; }
.sp-bus text, .sp-rad text { fill: #FFFFFF; font: 800 13px var(--schrift-text); letter-spacing: 0.06em; }
.sp-rad rect { fill: #2E7D53; stroke: #FFFFFF; stroke-width: 2; }
.sp-halte rect { fill: #E1E8FB; stroke: #1E3A8A; stroke-width: 2; }
.sp-halte text { fill: #1E3A8A; font: 700 14px var(--schrift-text); }
.sp-text text { fill: var(--text); font: 600 15px var(--schrift-text); }
.sp-text .sp-text-gross { font: 800 17px var(--schrift-titel); fill: #16204A; }
.sp-text .sp-text-bach { fill: var(--blau); font-style: italic; }
.sp-text .sp-text-strasse { font-size: 13px; font-weight: 700; fill: var(--text-leise); dominant-baseline: middle; letter-spacing: 0.02em; }
.sp-text .sp-text-haus { fill: #16204A; font-weight: 700; }
.sp-nord circle { fill: var(--karte); stroke: var(--text); stroke-width: 2; }
.sp-nord path { fill: var(--rot); }
.sp-nord text { fill: var(--text); font: 800 13px var(--schrift-text); }
.anfahrt-text { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--r-l); background: var(--flaeche); border: var(--rand-staerke) solid var(--karte-rand); }
.anfahrt-text h3 { font-size: 1.6rem; }
.weg-liste { display: grid; gap: 1.1rem; }
.weg-liste li { display: flex; gap: 1rem; }
.weg-liste p { margin: 0.15rem 0 0; }
.weg-ikon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--karte); border: 2px solid var(--text); }

/* ---------- Downloads ---------- */
.download-liste { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.download-liste li {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-m);
  background: var(--karte);
  border: var(--rand-staerke) solid var(--karte-rand);
}
.dl-ikon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-s); background: var(--rot-hell); color: var(--rot-text); }
.kontrast .dl-ikon { border: 2px solid var(--text); }
.dl-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; min-width: 0; }
.dl-text span { font-size: 0.875rem; color: var(--text-leise); }
.dl-platzhalter { flex: none; padding: 0.2rem 0.65rem; border-radius: 999px; border: 2px dashed var(--text-leise); color: var(--text-leise); font-size: 0.8125rem; font-weight: 700; }

/* ---------- Fuß ---------- */
.fuss {
  background: var(--fuss-grund);
  color: var(--fuss-text);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  --fokus: #FFC21A;
}
.fuss a, .fuss .text-knopf { color: var(--fuss-link); }
.fuss-raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; padding-bottom: 2rem; }
.fuss-name { display: flex; align-items: center; gap: 0.6rem; font-family: var(--schrift-titel); font-weight: 800; font-size: 1.6rem; margin-bottom: 0.4rem; }
.fuss-zeichen { width: 2.4rem; height: 2.4rem; flex: none; }
.fuss-marke p:last-child { margin: 0; overflow-wrap: anywhere; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; }
.fuss-nav a, .fuss-nav .text-knopf { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; padding: 0; }
.fuss-studie { margin: 0; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--fuss-text) 25%, transparent); font-size: 0.9375rem; }

/* ---------- Barrierefreiheits-Menü ---------- */
.a11y-menue {
  width: min(25rem, calc(100vw - 32px));
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 1.1rem 1.25rem 1.1rem;
  border: 2px solid var(--text);
  border-radius: var(--r-l);
  background: var(--karte);
  color: var(--text);
  box-shadow: 0 6px 0 var(--text), 0 40px 60px -30px rgb(0 0 0 / 0.5);
}
.a11y-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.a11y-kopf h2 { font-size: 1.5rem; margin: 0; }
.a11y-kopf .oi-zu { background: var(--flaeche); }
.a11y-gruppe { border: 0; padding: 0; margin: 0 0 0.9rem; }
.a11y-gruppe legend { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.segmente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.25rem; border-radius: var(--r-m); background: var(--flaeche); border: var(--rand-staerke) solid var(--karte-rand); }
.segmente label { position: relative; }
.segmente input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmente span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 0.3rem;
  border-radius: var(--r-s);
  font-weight: 700;
  font-size: 0.9375rem;
  text-align: center;
  line-height: 1.1;
}
.segmente .seg-gross { font-size: 1.05rem; }
.segmente .seg-sehr-gross { font-size: 1.15rem; }
.segmente input:checked + span { background: var(--knopf-grund); color: var(--knopf-text); }
.segmente input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.a11y-schalter-liste { display: grid; margin-bottom: 0.9rem; }
.schalter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--karte-rand);
  font-weight: 700;
  cursor: pointer;
}
.schalter > span:first-of-type { flex: 1; }
.schalter input { position: absolute; opacity: 0; width: 3.25rem; height: 2rem; right: 0; margin: 0; cursor: pointer; }
.schalter-bahn {
  position: relative;
  width: 3.25rem;
  height: 2rem;
  flex: none;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--text);
  transition: background 0.2s;
}
.schalter-bahn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.schalter input:checked + .schalter-bahn { background: var(--knopf-grund); border-color: var(--knopf-grund); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(1.2rem); background: var(--knopf-text); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--fokus); outline-offset: 3px; }
.schalter input:disabled + .schalter-bahn { opacity: 0.55; }
.a11y-schrift-info { font-size: 0.875rem; padding: 0.75rem 0.9rem; border-radius: var(--r-s); background: var(--gelb-hell); margin-bottom: 0.5rem; }
.kontrast .a11y-schrift-info { border: 2px solid var(--text); }
.a11y-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.a11y-gemerkt { font-size: 0.8125rem; color: var(--text-leise); }
@media (max-width: 40em) {
  .a11y-menue { max-height: calc(100vh - 5rem); }
}

/* ---------- Meldung (Toast) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 200;
  max-width: calc(100vw - 32px);
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--grund);
  font-weight: 700;
  box-shadow: var(--schatten-gross);
  translate: -50% 150%;
  opacity: 0;
  transition: translate 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s;
  pointer-events: none;
}
.toast.ist-sichtbar { translate: -50% 0; opacity: 1; }

/* ==========================================================================
   Bewegung
   Alles hier ist Zugabe. Mit „Animationen aus“ oder prefers-reduced-motion
   bleibt alles sichtbar und vollständig.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.ruhig) { scroll-behavior: smooth; }

  /* Bühne (Papierschnitt): Lagen folgen Maus/Finger, dazu ruhige Eigenbewegung */
  html:not(.ruhig) .lage {
    --mx: inherit;
    --my: inherit;
    translate: calc(var(--mx) * var(--tiefe) * -2.2%) calc(var(--my) * var(--tiefe) * -1.4%);
    will-change: transform;
  }
  html:not(.ruhig) .pz-kranz { transform-box: fill-box; transform-origin: center; animation: drehen 160s linear infinite; }
  html:not(.ruhig) .pz-wolke-1 { animation: treiben 38s ease-in-out infinite alternate; }
  html:not(.ruhig) .pz-wolke-2 { animation: treiben 46s ease-in-out -20s infinite alternate-reverse; }
  html:not(.ruhig) .pz-wolke-3 { animation: treiben 30s ease-in-out -9s infinite alternate; }
  html:not(.ruhig) .pz-funkeln { animation: pz-funkeln 4.4s ease-in-out infinite alternate; }
  html:not(.ruhig) .pz-funkeln-2 { animation-duration: 5.8s; animation-delay: -2s; }
  html:not(.ruhig) .pz-funkeln-3 { animation-duration: 7.2s; animation-delay: -4.5s; }
  html:not(.ruhig) .pz-windrad-1 .pz-rotor { transform-box: view-box; transform-origin: 904px 470px; animation: drehen 16s linear infinite; }
  html:not(.ruhig) .pz-windrad-2 .pz-rotor { transform-box: view-box; transform-origin: 962px 504px; animation: drehen 12s linear -5s infinite; }
  html:not(.ruhig) .pz-voegel { animation: treiben 22s ease-in-out -6s infinite alternate; }
  html:not(.ruhig) .pz-fahne { transform-box: fill-box; transform-origin: 0 50%; animation: flattern 2.2s ease-in-out infinite alternate; }
  html:not(.ruhig) .pz-kette path:not(.pz-leine) { transform-box: fill-box; transform-origin: 50% 0; animation: schaukeln 3.2s ease-in-out infinite alternate; }
  html:not(.ruhig) .pz-kette > g:nth-child(odd) > path { animation-delay: -1.6s; }
  html:not(.ruhig) .pz-kette > g:nth-child(3n) > path { animation-duration: 4s; }
  html:not(.ruhig) .pz-traube { transform-box: fill-box; animation: schaukeln 6s ease-in-out infinite alternate; }
  html:not(.ruhig) .pz-traube-l { transform-origin: 100% 100%; }
  html:not(.ruhig) .pz-traube-r { transform-origin: 0 100%; animation-delay: -3s; }
  html:not(.ruhig) .pz-flieger { transform-box: fill-box; transform-origin: center; animation: pz-gleiten 7s ease-in-out infinite alternate; }
  html:not(.ruhig) .stempel svg { animation: drehen 28s linear infinite; }
  /* Unsichtbar oder Tab im Hintergrund: Eigenbewegung anhalten (die Scroll-Drift der Lagen bleibt gekoppelt) */
  html:not(.ruhig) .buehne.pausiert :not(.lage) { animation-play-state: paused !important; }
  html:not(.ruhig) .logo-zeichen .logo-blueten { animation: drehen 40s linear infinite; }

  /* Campus: Figuren laufen, Wolken ziehen, Fahne weht */
  html:not(.ruhig) .figur { animation: laufen var(--dauer) ease-in-out var(--verz) infinite alternate; }
  html:not(.ruhig) .wolke-1 { animation: treiben 14s ease-in-out infinite alternate; }
  html:not(.ruhig) .wolke-2 { animation: treiben 18s ease-in-out -6s infinite alternate-reverse; }
  html:not(.ruhig) .campus-svg .fahne { animation: flattern 0.9s ease-in-out infinite alternate; }
  html:not(.ruhig) .campus-karte.pausiert .figur,
  html:not(.ruhig) .campus-karte.pausiert .wolke,
  html:not(.ruhig) .campus-karte.pausiert .fahne { animation-play-state: paused; }

  /* Countdown: kurzes Umblättern */
  html:not(.ruhig) .cd-zahl.tickt { animation: tick 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }

  /* Vertretungsplan: neue Zeilen fahren gestaffelt ein */
  html:not(.ruhig) .vp-zeile { animation: zeile-rein 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i) * 70ms); }
  html:not(.ruhig) .vp-leer, html:not(.ruhig) .vp-mitteilung { animation: zeile-rein 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  html:not(.ruhig) .vp-zaehler strong { display: inline-block; animation: tick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }

  /* Kalenderliste */
  html:not(.ruhig) .termin { animation: zeile-rein 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  html:not(.ruhig) .termin:nth-child(2) { animation-delay: 60ms; }
  html:not(.ruhig) .termin:nth-child(3) { animation-delay: 120ms; }
  html:not(.ruhig) .termin:nth-child(4) { animation-delay: 180ms; }
}

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes treiben { from { transform: translateX(-14px); } to { transform: translateX(18px); } }
@keyframes schaukeln { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes flattern { from { transform: skewY(-6deg) scaleX(0.94); } to { transform: skewY(5deg) scaleX(1.04); } }
@keyframes pz-funkeln { from { opacity: 1; } to { opacity: 0.3; } }
@keyframes pz-gleiten { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(8px, -10px) rotate(-3deg); } }
@keyframes laufen { from { transform: translate(0, 0); } to { transform: translate(var(--vx), var(--vy)); } }
@keyframes tick { 0% { transform: translateY(-35%); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
@keyframes zeile-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Scroll-getriebene Animationen – nur wo unterstützt (sonst ist alles einfach sichtbar) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhig) .einblenden {
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    html:not(.ruhig) .schritt:nth-child(2) { animation-range: entry 8% entry 78%; }
    html:not(.ruhig) .schritt:nth-child(3) { animation-range: entry 16% entry 86%; }
    html:not(.ruhig) .schritt:nth-child(4) { animation-range: entry 24% entry 94%; }

    /* Lesefortschritt unter dem Kopf */
    html:not(.ruhig) .lesefortschritt {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 3px;
      background: linear-gradient(90deg, var(--gelb), var(--rot));
      transform-origin: 0 50%;
      animation: fortschritt linear both;
      animation-timeline: scroll(root);
    }
    /* Kopf bekommt beim Scrollen einen Schatten */
    html:not(.ruhig) .kopf { animation: kopf-schatten linear both; animation-timeline: scroll(root); animation-range: 0 160px; }

    /* Campus steigt beim Hereinscrollen auf */
    html:not(.ruhig) .campus-svg { animation: campus-auf linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }

    /* Weg von der Bushaltestelle zeichnet sich */
    html:not(.ruhig) .sp-route { animation: route linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }

    /* Fakten zählen sich ins Bild */
    html:not(.ruhig) .fakten li:nth-child(2) { animation-range: entry 6% entry 76%; }
    html:not(.ruhig) .fakten li:nth-child(3) { animation-range: entry 12% entry 82%; }
    html:not(.ruhig) .fakten li:nth-child(4) { animation-range: entry 18% entry 88%; }
  }
}
@keyframes einblenden { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kopf-schatten { from { box-shadow: 0 0 0 transparent; } to { box-shadow: 0 10px 30px -18px rgb(22 32 74 / 0.45); } }
@keyframes campus-auf { from { transform: translateY(60px) scale(0.94); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Bühne: Papierlagen driften beim Scrollen unterschiedlich schnell – der Blick geht in die Tiefe */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhig) .lage { animation: pz-drift linear both; animation-timeline: --pz-blick; }
  }
}
@keyframes pz-drift { from { transform: translateY(calc(var(--drift) * -1)); } to { transform: translateY(var(--drift)); } }

/* View Transitions für den AG-Finder */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*.ag-karte) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.3, 1.25, 0.4, 1); }
::view-transition-new(*.ag-karte):only-child { animation: ag-rein 0.4s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
::view-transition-old(*.ag-karte):only-child { animation: ag-raus 0.25s ease-in both; }
@keyframes ag-rein { from { opacity: 0; transform: scale(0.85); } }
@keyframes ag-raus { to { opacity: 0; transform: scale(0.85); } }

/* Animationen aus: harte Bremse für alles */
html.ruhig *, html.ruhig *::before, html.ruhig *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Druck: nur das Wesentliche */
@media print {
  .servicezeile, .kopf, .buehne-bild, .a11y-menue, .toast, .campus-karte { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Unterseite (Impressum) ---------- */
.textseite { max-width: calc(52rem + 2 * var(--rand)); }
.textseite h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); margin-bottom: 1.25rem; }
.textkarte { margin-block: 1rem; }
.textkarte h2 { font-size: 1.6rem; }
.textkarte p:last-child { margin-bottom: 0; }
.zurueck-knopf { min-height: 2.75rem; padding-block: 0.3rem; }
code { font-size: 0.95em; padding: 0.05rem 0.3rem; border-radius: 6px; background: var(--flaeche); }

/* Sehr schmale Geräte (unter 360 px): Menü-Knopf nur mit Symbol */
@media (max-width: 359px) {
  .menue-knopf { padding: 0 0.7rem; }
  .menue-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}