@charset "UTF-8";
/* =========================================================================
   Grundschule Ohlstadt – gsohlstadt.de
   Stylesheet · Version 2026-08
   -------------------------------------------------------------------------
   Aufbau:
     01  Schriften (@font-face)
     02  Design-Tokens (Farben, Abstände, Typo)  <-- hier zentral anpassen
     03  Reset & Grundlagen
     04  Typografie
     05  Layout-Bausteine
     06  Kopfbereich & Navigation
     07  Hero
     08  Schnellzugriff-Kacheln
     09  Karten / Neuigkeiten
     10  Termine
     11  Linklisten (Digitalecke, Lesen, ByCS)
     12  Fußbereich
     13  Inhaltsseiten (Rechtstexte)
     14  Barrierefreiheit & Druck
   ========================================================================= */


/* =========================================================================
   01  SCHRIFTEN
   Die Schriften sind lizenziert erworben (Fontspring, Rechnung im Ordner
   „Z_Schriftarten“).

   Im Einsatz sind zwei Schnitte DERSELBEN Schrift:

     KG Second Chances Solid    gefüllt  – alle Überschriften
     KG Second Chances Sketch   Umriss   – ausschließlich der große Name
                                           der Schule auf der Startseite

   Warum die Aufteilung: Der Umriss-Schnitt lebt von den feinen Schraffuren
   im Buchstabenkörper. Unter etwa 35 px laufen die zu und die Schrift wirkt
   schmutzig statt handgezeichnet. Groß gesetzt ist derselbe Schnitt der
   schönste Teil der Schulidentität – deshalb steht er dort, wo er wirkt,
   und nirgends sonst.

   Nicht mehr eingebunden: „KG June Bug“ und „Annie Use Your Telescope“.
   Beide waren zusätzliche Handschriften neben der Hausschrift; zwei
   Handschriften nebeneinander lassen ein Layout unentschieden wirken.

   -------------------------------------------------------------------------
   IM ORDNER LIEGEN NUR NOCH ZWEI DATEIEN

   Ausgeliefert wird ausschließlich, was diese Website wirklich anfordert:
   die beiden Dateien mit dem Zusatz „-web“. Das ist dieselbe Schrift, aber
   auf die hier vorkommenden Zeichen beschränkt – deutsches Alphabet,
   Umlaute, ß, Ziffern, Satzzeichen. Alles andere wurde entfernt.

   Der Umriss-Schnitt schrumpft dadurch von 272 auf 183 KB, der gefüllte
   von 54 auf 35 KB. Das ist der Unterschied zwischen „die Schrift ist da,
   bevor die Seite steht“ und „die Schrift kommt eine Sekunde später“.

   Eine TTF-Rückfallebene gibt es nicht mehr. Sie war ohne Wirkung: Jeder
   Browser, der überhaupt eigene Schriften lädt, kann WOFF. Sie hätte aber
   die vollständige Kaufschrift öffentlich herunterladbar auf dem Server
   liegen lassen – für einen Webfont-Kauf nicht der richtige Ort.

   Die vollständigen Originale (auch June Bug und Annie) liegen im Ordner
   „Schriften-Original“ neben diesem Projekt. Von dort werden bei Bedarf
   neue Teilsätze erzeugt.

   -------------------------------------------------------------------------
   font-display: block – und warum nicht „swap“

   „swap“ heißt: Zeige sofort eine Ersatzschrift und tausche sie aus,
   sobald die richtige da ist. Das führte zu genau dem, was auf der
   Startseite zu sehen war – der Schulname erschien erst in einer
   Systemschrift und sprang dann um.

   „block“ heißt: Zeige gar nichts, bis die Schrift da ist (längstens drei
   Sekunden, danach doch die Ersatzschrift). Zusammen mit dem Vorladen im
   Seitenkopf und den verkleinerten Dateien ist diese Wartezeit so kurz,
   dass sie nicht auffällt – und der Sprung ist weg.

   Als letzte Rückfallebene steht bewusst NICHT mehr „cursive“ in der
   Liste: Auf iPhone und Mac ist das Apple Chancery, eine sehr verschnör-
   kelte Schreibschrift. Genau die blitzte gelegentlich auf.
   ========================================================================= */

@font-face {
  font-family: "KG Second Chances";
  src: url("../fonts/KGSecondChancesSolid-web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "KG Second Chances Sketch";
  src: url("../fonts/KGSecondChancesSketch-web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}


/* =========================================================================
   02  DESIGN-TOKENS
   Alles Gestalterische wird hier einmal festgelegt. Wer Farben, Abstände
   oder Schriftzuordnungen ändern will, ändert sie NUR an dieser Stelle.
   ========================================================================= */

:root {

  /* --- Schriftzuordnung -------------------------------------------------
     --font-display  Alle Überschriften (gefüllter Schnitt)
     --font-hero     Nur der Name der Schule auf der Startseite (Umriss)
     --font-body     Fließtext. Bewusst eine Systemschrift: handschriftliche
                     Schriften sind in Fließtextgröße für viele Menschen
                     schwer lesbar (Anforderung BayDiV/BITV).
     Wenn du die Zuordnung ändern willst, tausche hier die Werte.
  --------------------------------------------------------------------- */
  /* Am Ende der Listen steht eine ruhige Systemschrift, nicht „cursive“.
     Siehe die Begründung oben in Abschnitt 01. */
  --font-display: "KG Second Chances", "Comic Sans MS", "Segoe Print",
                  -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hero:    "KG Second Chances Sketch", "KG Second Chances",
                  -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;

  /* --- Farben ----------------------------------------------------------
     Grundlage sind die beiden Farben des Logos „GSO“ (Schriftzug mit
     Kirchturm). Ausgelesen aus Logo_GS Ohlstadt_Button.png; in der
     verlustfreien Datei tragen 100 % der Flächenpixel exakt diese Werte:

         Blau  #006cb5   Farbton 204,2°  Sättigung 100 %  Helligkeit 35 %
         Grau  #748187   Farbton 198,9°  Sättigung   8 %  Helligkeit 49 %

     Alle weiteren Töne sind daraus errechnet: Farbton bleibt, nur
     Helligkeit und Sättigung ändern sich. Deshalb wirkt die Seite
     durchgängig in den Logofarben.

     Wer #006cb5 oder #748187 austauscht, muss die abgeleiteten Werte
     mittauschen – sonst laufen die Töne auseinander.

     Kontrast gegen Weiß: blau 5,51:1 · dunkel 8,31:1 · tief 12,74:1
  --------------------------------------------------------------------- */
  /* --- Vordergrund: das Logoblau ---------------------------------------
     Alles, was Marke ist – Knöpfe, Symbole, Links, Überschriften.        */
  --blau:          #006cb5;   /* Logoblau, unverändert                    */
  --blau-dunkel:   #005187;   /* Links, Hover, Text auf Weiß              */
  --blau-tief:     #043556;   /* Fußbereich, Überschriften                */

  /* --- Flächen: Petrol --------------------------------------------------
     Die hellen Flächen liegen bewusst NICHT im Farbton des Logoblaus,
     sondern rund 14 Grad weiter Richtung Petrol (190° statt 204°). Zwei
     Gründe:

       1. Lägen Fläche und Element im selben Farbton, verschwimmt beides.
          Der leichte Versatz lässt Knöpfe, Links und Überschriften vor
          der Fläche stehen, ohne dass eine laute zweite Farbe nötig wäre.

       2. Das Grau aus dem Logo liegt bei 198,9° – also fast genau
          zwischen Blau und Petrol. Der Petrolton ist damit kein Fremd-
          körper, sondern die logische Verlängerung der Hausfarben.

     Das ist ein Ersatz für die früheren hellblauen Flächen, keine
     zusätzliche Farbe.                                                   */
  --petrol-hell:   #e6f4f7;   /* Flächen                                  */
  --petrol-zart:   #f4fafb;   /* sehr helle Flächen                       */

  /* Logograu. Mit 4,01:1 auf Weiß knapp unter der Schwelle für Fließtext
     (WCAG AA verlangt 4,5:1) – deshalb nur für Dekoratives verwenden,
     nicht für Text. Für Sekundärtext steht --text-leise bereit. */
  --grau:          #748187;

  --text:          #202324;   /* Fließtext        (15,82:1)               */
  --text-leise:    #566369;   /* Sekundärtext     ( 6,20:1)               */
  --grau-linie:    #dce4e5;   /* Trennlinien, Rahmen                      */
  --grau-flaeche:  #f5f7f8;   /* neutrale Flächen                         */

  --weiss:         #ffffff;
  --fuss-text:     #d1e3f0;   /* Text im Fußbereich (9,68:1 auf blau-tief)*/
  --akzent:        #d97706;   /* Warnhinweise, „Neu“-Markierung           */
  --akzent-hell:   #fef3e2;
  --gruen:         #1f7a4d;   /* Positiv-Hinweise                         */
  --gruen-hell:    #e8f5ee;

  /* Signalrot für Angaben, die sofort auffallen müssen – etwa Ferien.
     Bewusst dunkel genug, dass weiße Schrift darauf 6,25:1 erreicht. */
  --rot:           #b8281e;

  /* --- Abstände (8-px-Raster) ----------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  /* --- Maße ------------------------------------------------------------ */
  --breite-max:    1180px;   /* Seitenbreite                              */
  --breite-text:   68ch;     /* Optimale Lesezeilenlänge für Rechtstexte  */
  --rand:          clamp(1rem, 4vw, 2.5rem);
  --radius:        14px;
  --radius-gross:  22px;
  --radius-klein:  8px;

  /* --- Schatten -------------------------------------------------------- */
  --schatten-1: 0 1px 2px rgba(4, 53, 86, .06),
                0 2px 8px rgba(4, 53, 86, .06);
  --schatten-2: 0 2px 4px rgba(4, 53, 86, .07),
                0 8px 24px rgba(4, 53, 86, .10);
  --schatten-3: 0 4px 8px rgba(4, 53, 86, .08),
                0 16px 40px rgba(4, 53, 86, .14);

  /* --- Typo-Skala (fließend, skaliert mit der Fensterbreite) ----------
     Bewusst zurückhaltend gehalten: Die handschriftliche Anzeigeschrift
     baut breiter als eine Systemschrift. Zu große Werte führen dazu, dass
     einzelne Wörter länger werden als die Zeile und mitten im Wort
     umbrechen. Wer hier erhöht, sollte „Grundschule Ohlstadt!“ auf einem
     schmalen Handy (320 px) gegenprüfen.
  --------------------------------------------------------------------- */
  --t-hero:  clamp(1.95rem, 1.35rem + 2.9vw, 3rem);
  --t-h1:    clamp(1.7rem,  1.30rem + 1.90vw, 2.4rem);
  --t-h2:    clamp(1.25rem, 1.02rem + 0.95vw, 1.9rem);
  --t-h3:    clamp(1.05rem, 1.00rem + 0.35vw, 1.32rem);
  --t-gross: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  --t-body:  clamp(1rem,   .97rem + .16vw, 1.09rem);
  --t-klein: .925rem;
  --t-mini:  .8rem;

  --zeile:      1.65;
  --zeile-eng:  1.22;

  --tempo: .22s;
}


/* =========================================================================
   03  RESET & GRUNDLAGEN
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* damit Ankerziele nicht unter dem Kopf liegen */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--zeile);
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, picture, video { max-width: 100%; height: auto; display: block; }

/* Bilder in Fließtext dürfen inline bleiben */
p img { display: inline; }

ul, ol { padding-left: 1.35em; }

button { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--grau-linie);
  margin: var(--s-6) 0;
}


/* =========================================================================
   04  TYPOGRAFIE
   ========================================================================= */

/* Überschriften brechen NIE mitten im Wort.
   `body` erlaubt `overflow-wrap: break-word`, damit sehr lange URLs in
   Fließtexten nicht aus dem Layout laufen. Für Überschriften ist das
   unerwünscht – dort wird die Regel wieder aufgehoben. Passt ein Wort
   trotzdem nicht in die Zeile, trennt der Browser es sprachrichtig mit
   Bindestrich (`hyphens: auto` greift wegen lang="de" im <html>-Tag).   */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--zeile-eng);
  color: var(--blau-tief);
  margin: 0 0 var(--s-4);
  font-weight: 400;
  letter-spacing: .005em;

  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;   /* verteilt mehrzeilige Überschriften gleichmäßig */

  /* KEINE automatische Silbentrennung in Überschriften.
     Zusammen mit `text-wrap: balance` trennt der Browser sonst auch dann,
     wenn es gar nicht nötig wäre – er hält „Grundschu-/le Ohlstadt“ für
     ausgewogener als „Grundschule/Ohlstadt“. Ein mitten im Wort
     getrennter Schulname sieht nach Fehler aus.

     Das ist gefahrlos, weil im Browser nachgemessen wurde, dass kein Wort
     in einer Überschrift breiter ist als seine Spalte. Wer eine sehr lange
     Überschrift ergänzt, kann mit &shy; eine Trennstelle vorgeben. */
  hyphens: manual;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }

/* Überschriften haben oben bewusst keinen Abstand: Normalerweise stehen sie
   als Erstes in ihrem Abschnitt und bekommen die Luft vom Abschnittspolster.
   Folgt eine Überschrift weiter unten im selben Abschnitt, fehlt der Abstand
   aber – sie klebt dann am Text darüber. Deshalb hier nachgereicht, einmal
   für ganze Abschnitte und einmal für Überschriften innerhalb einer Spalte.
   (.fliesstext regelt seine Überschriften weiter unten selbst.) */
.huelle > h2:not(:first-child) { margin-top: var(--s-8); }
.zwei-spalten > div > * + h2,
.zwei-spalten > div > * + h3 { margin-top: var(--s-7); }
h3 { font-size: var(--t-h3); }
h4 {
  font-family: var(--font-body);
  font-size: var(--t-gross);
  font-weight: 700;
  color: var(--text);
}

p  { margin: 0 0 var(--s-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

small { font-size: var(--t-klein); color: var(--text-leise); }

a {
  color: var(--blau-dunkel);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--tempo);
}
a:hover { color: var(--blau); }

/* Ausgezeichneter Satz, z. B. das Sprichwort im Leitbild */
.hand {
  font-family: var(--font-display);
  font-size: 1.28em;
  line-height: 1.4;
  color: var(--blau);
}

.vorspann {
  font-size: var(--t-gross);
  color: var(--text-leise);
  max-width: 60ch;
}

.text-mitte { text-align: center; }
.text-leise { color: var(--text-leise); }


/* =========================================================================
   05  LAYOUT-BAUSTEINE
   ========================================================================= */

.huelle {                       /* zentrierter Inhaltsbereich */
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt {                    /* vertikaler Rhythmus der Seitenabschnitte */
  padding-block: clamp(2.5rem, 1.2rem + 5vw, 5rem);
}
.abschnitt--eng   { padding-block: clamp(2rem, 1rem + 3vw, 3.25rem); }
.abschnitt--hell  { background: var(--petrol-zart); }
.abschnitt--flaeche { background: var(--grau-flaeche); }

.abschnitt__kopf {
  margin-bottom: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.abschnitt__kopf h2 { margin: 0; }

/* Mehrere Verweise rechts neben der Abschnittsüberschrift – etwa die zwei
   Terminlisten. Auf schmalen Geräten rutschen sie untereinander unter die
   Überschrift, statt sie zusammenzuquetschen. */
.abschnitt__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
}

/* Universelles, automatisch umbrechendes Raster.
   --min steuert, ab wann umgebrochen wird. */
.raster {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}
.raster--eng  { --min: 200px; gap: var(--s-4); }
.raster--weit { --min: 320px; }

/* Feste Spaltenzahl für Inhalte, die in gleichmäßigen Reihen stehen sollen.
   Die automatische Aufteilung oben richtet sich nach der Fensterbreite und
   erzeugt bei sechs Karten je nach Bildschirm 4 + 2 – eine halb leere
   zweite Reihe wirkt unruhig. Drei Spalten ergeben 3 + 3. */
.raster--drei { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .raster--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* barrierefreie Mindest-Klickfläche */
  padding: .7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 600;
  font-size: var(--t-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo), transform var(--tempo),
              box-shadow var(--tempo), color var(--tempo);
}
.knopf:hover {
  background: var(--blau-dunkel);
  color: var(--weiss);
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
}
.knopf--rand {
  background: transparent;
  color: var(--blau-dunkel);
  border-color: var(--blau);
}
.knopf--rand:hover { background: var(--blau); color: var(--weiss); }

.knopf--gross { padding: .95rem 2rem; font-size: var(--t-gross); }

.knopf svg { width: 1.25em; height: 1.25em; flex: none; }

/* Kleine Auszeichnung („Neu“, „Wichtig“) ------------------------------- */
.plakette {
  display: inline-block;
  padding: .2em .7em;
  border-radius: 999px;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--akzent-hell);
  color: #8a4a00;
}
.plakette--gruen { background: var(--gruen-hell); color: #145636; }
.plakette--blau  { background: var(--petrol-hell);  color: var(--blau-dunkel); }

/* Kräftigste Stufe: gefüllt statt getönt. Für Angaben, die auf den ersten
   Blick auffallen müssen – die übrigen Plaketten sind bewusst leiser,
   damit diese eine wirkt. */
.plakette--rot {
  background: var(--rot);
  color: var(--weiss);
}


/* =========================================================================
   06  KOPFBEREICH & NAVIGATION
   ========================================================================= */

.sprungmarke {                  /* „Zum Inhalt springen“ */
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--blau-tief);
  color: var(--weiss);
  border-radius: var(--radius-klein);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--tempo);
}
.sprungmarke:focus { transform: translateY(0); color: var(--weiss); }

/* Der Kopfbereich bleibt beim Scrollen stehen.

   Kein `backdrop-filter: blur()`: Ein Weichzeichner hinter einer Leiste,
   die über die ganze Fensterbreite mitläuft, muss bei JEDEM Scrollbild neu
   berechnet werden. Auf älteren Rechnern und Handys – also genau den
   Geräten, mit denen Eltern und Kinder hier unterwegs sind – ruckelt das
   Scrollen dadurch spürbar. Eine deckende Fläche sieht praktisch gleich
   aus und kostet nichts. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.5rem;
  padding-block: var(--s-3);
}

.kopf__logo { display: inline-flex; align-items: center; flex: none; }
.kopf__logo img {
  height: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  width: auto;
}

/* Umschalter (nur mobil sichtbar) */
.nav-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: .5rem .9rem;
  border: 2px solid var(--blau);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--blau-dunkel);
  font-weight: 600;
  cursor: pointer;
}
.nav-schalter svg { width: 1.4em; height: 1.4em; }
.nav-schalter .ikon-schliessen { display: none; }
.nav-schalter[aria-expanded="true"] .ikon-menue     { display: none; }
.nav-schalter[aria-expanded="true"] .ikon-schliessen { display: block; }

/* --- Navigation: mobil = ausklappbares Panel --------------------------- */
.nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-linie);
  box-shadow: var(--schatten-2);
  padding: var(--s-3) var(--rand) var(--s-5);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  display: none;
}
.nav[data-offen="true"] { display: block; }

.nav ul { list-style: none; margin: 0; padding: 0; }

.nav a,
.nav .nav__gruppe > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 48px;
  padding: .7rem .25rem;
  border: 0;
  background: none;
  border-bottom: 1px solid var(--grau-linie);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.nav a:hover,
.nav .nav__gruppe > button:hover { color: var(--blau); }

.nav a[aria-current="page"] { color: var(--blau); }

.nav__gruppe > button svg {
  width: 1.1em; height: 1.1em;
  transition: transform var(--tempo);
}
.nav__gruppe > button[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__unter { display: none; padding-left: var(--s-4); }
.nav__gruppe > button[aria-expanded="true"] + .nav__unter { display: block; }
.nav__unter a { font-weight: 500; color: var(--text-leise); }

/* --- Navigation: ab Tablet = waagerechte Leiste ------------------------ */
@media (min-width: 62rem) {

  .nav-schalter { display: none; }

  .nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .nav > ul {
    display: flex;
    align-items: center;
    gap: var(--s-1);
  }

  .nav > ul > li { position: relative; }

  .nav a,
  .nav .nav__gruppe > button {
    min-height: 44px;
    width: auto;
    padding: .5rem .8rem;
    border: 0;
    border-radius: var(--radius-klein);
    font-size: var(--t-klein);
    white-space: nowrap;
  }
  .nav a:hover,
  .nav .nav__gruppe > button:hover { background: var(--petrol-hell); }

  .nav a[aria-current="page"] {
    background: var(--petrol-hell);
    color: var(--blau-dunkel);
  }

  /* Untermenüs schweben */
  .nav__unter {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 13rem;
    padding: var(--s-2);
    background: var(--weiss);
    border: 1px solid var(--grau-linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-2);
  }
  .nav__unter a { font-size: var(--t-klein); }
}


/* =========================================================================
   07  HERO
   ========================================================================= */

.hero {
  background:
    radial-gradient(120% 90% at 85% 0%, var(--petrol-hell) 0%, transparent 60%),
    var(--petrol-zart);
  border-bottom: 1px solid var(--grau-linie);
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
}

.hero__raster {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 54rem) {
  .hero__raster { grid-template-columns: 1.05fr .95fr; }
}

/* Begrüßungszeile über dem Namen der Schule.
   Bewusst in der Fließtextschrift und klein: Der Blick soll zuerst auf
   „Grundschule Ohlstadt“ fallen, nicht auf die Höflichkeitsfloskel. */
.hero__gruss {
  margin: 0 0 var(--s-2);
  font-size: var(--t-gross);
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: .01em;
}

/* Einzige Stelle mit dem Umriss-Schnitt – hier ist er groß genug,
   dass die Schraffur im Buchstaben sichtbar bleibt. */
.hero__titel {
  font-family: var(--font-hero);
  font-size: var(--t-hero);
  color: var(--blau);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
  position: relative;
  padding-bottom: var(--s-4);
}
/* kurzer Strich als Abschluss – gibt der Überschrift Halt */
.hero__titel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 4.5rem; height: 4px;
  border-radius: 2px;
  background: var(--blau);
  opacity: .38;
}

.hero__text {
  font-size: var(--t-gross);
  color: var(--text);
  max-width: 46ch;
}

/* Gleiche Behandlung wie die Begrüßungszeile darüber: Beide rahmen den
   Namen der Schule ein und sollen deshalb gleich klingen. */
.hero__signatur {
  font-family: var(--font-body);
  font-size: var(--t-gross);
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: .01em;
  margin-top: var(--s-4);
}

.hero__bild {
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-3);
  aspect-ratio: 4 / 3;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Maskottchen statt Foto: keine Kartenform, kein Schatten, kein Rahmen.
   Eine freigestellte Strichzeichnung wirkt in einem Bilderrahmen wie ein
   Fehler – sie soll auf der Fläche stehen. */
.hero__marke {
  margin: 0;
  display: flex;
  justify-content: center;
}
.hero__marke img {
  width: auto;
  height: clamp(13rem, 9.5rem + 15vw, 22.5rem);
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 54rem) {
  .hero__marke img { height: clamp(11rem, 7.5rem + 19vw, 16rem); }
}

/* Knopfleiste im Hero – derzeit nicht im Einsatz (die Verweise stehen
   direkt darunter im Schnellzugriff). Die Regel bleibt stehen, falls dort
   später wieder ein Knopf gebraucht wird. */
.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}


/* =========================================================================
   08  SCHNELLZUGRIFF-KACHELN
   ========================================================================= */

.kacheln {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-3);
  min-height: 9.5rem;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--schatten-1);
  transition: transform var(--tempo), box-shadow var(--tempo),
              border-color var(--tempo), background var(--tempo);
}
.kachel:hover {
  transform: translateY(-3px);
  border-color: var(--blau);
  box-shadow: var(--schatten-2);
  color: var(--blau-dunkel);
}

.kachel svg {
  width: 2.35rem; height: 2.35rem;
  color: var(--blau);
  flex: none;
}

/* Kachel mit Bildmarke statt Symbol (z. B. Materialcloud-Ordner).
   Gleiche Höhe wie die Symbole, damit die Reihe ruhig bleibt. */
.kachel__bild {
  height: 2.35rem;
  width: auto;
  flex: none;
  transition: transform var(--tempo);
}
.kachel:hover .kachel__bild { transform: scale(1.06); }

/* Größere Bildmarke, wenn sie das Hauptmerkmal der Kachel ist
   (Klassenordner der Materialcloud) */
.kachel__bild--gross { height: 4.25rem; }
.kacheln--ordner { --min: 170px; }

.kachel__zusatz {
  font-weight: 400;
  font-size: var(--t-mini);
  color: var(--text-leise);
}

/* Hervorgehobene Kachel (Krankmeldung) */
.kachel--wichtig {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}
.kachel--wichtig svg           { color: var(--weiss); }
.kachel--wichtig .kachel__zusatz { color: rgba(255,255,255,.85); }
.kachel--wichtig:hover {
  background: var(--blau-dunkel);
  border-color: var(--blau-dunkel);
  color: var(--weiss);
}


/* =========================================================================
   08b  AKTIONSLEISTE (Krankmeldung)
   Ein eigener, farbiger Streifen quer über die Seite. Steht bewusst
   allein – nicht als eine Kachel unter vielen.
   ========================================================================= */

/* Bewusst zurückhaltend: heller Kasten im normalen Seitenfluss statt eines
   durchgefärbten Bandes. Der Hinweis soll auffindbar sein, nicht laut.
   Der Kasten steht auf weißem Grund im Abschnitt „Schnell gefunden“, damit
   nicht zwei Petrolflächen unmittelbar aufeinanderfolgen. */
.aktionsleiste__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-7);
  padding: var(--s-5);
  background: var(--petrol-zart);
  border: 1px solid var(--grau-linie);
  border-left: 4px solid var(--blau);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.aktionsleiste__ikon {
  width: 2rem; height: 2rem;
  flex: none;
  color: var(--blau);
}

.aktionsleiste__text {
  flex: 1 1 16rem;
  min-width: 0;
}
.aktionsleiste__text h2 {
  margin: 0 0 .1rem;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--text);
}
.aktionsleiste__text p {
  margin: 0;
  color: var(--text-leise);
  font-size: var(--t-klein);
}

.aktionsleiste .knopf { flex: none; }

@media (max-width: 34rem) {
  .aktionsleiste__innen { gap: var(--s-4); }
  .aktionsleiste__ikon { width: 1.75rem; height: 1.75rem; }
  .aktionsleiste .knopf { width: 100%; }
}


/* =========================================================================
   09  KARTEN / NEUIGKEITEN
   ========================================================================= */

.karte {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  transition: transform var(--tempo), box-shadow var(--tempo),
              border-color var(--tempo);
}
.karte:has(a:hover),
.karte:focus-within {
  transform: translateY(-2px);
  border-color: var(--blau);
  box-shadow: var(--schatten-2);
}

.karte h3 { margin: 0; font-size: var(--t-h3); }

.karte p { margin: 0; color: var(--text-leise); font-size: var(--t-klein); }

/* Der Link sitzt immer am unteren Kartenrand, damit er über alle Karten
   einer Reihe hinweg auf gleicher Höhe steht – auch wenn die Texte
   unterschiedlich lang sind.

   Die doppelte Nennung von .karte ist Absicht: Die Regel `.karte p`
   weiter oben setzt `margin: 0` und ist spezifischer als `.karte__fuss`
   allein. Ohne diese Erhöhung wird `margin-top: auto` überschrieben und
   der Link klebt am Text statt am Kartenboden. */
.karte .karte__fuss { margin-top: auto; padding-top: var(--s-3); }

.karte__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  text-decoration: none;
}
.karte__link::after { content: "→"; transition: transform var(--tempo); }
.karte__link:hover::after { transform: translateX(3px); }

/* Aktionskarte: die beiden gleichrangigen Wege zu helfen.
   Weiß auf grauem Band, etwas mehr Polsterung und ein Symbol als Anker.
   Bewusst KEINE getönte Fläche – der Seitenkopf darüber ist bereits
   petrolfarben, ein weiterer Farbton an dieser Stelle hebt nichts hervor,
   sondern nimmt beiden Elementen die Wirkung. */
.karte--aktion {
  padding: var(--s-6);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-2);
}
.karte--aktion h3 {
  margin: var(--s-3) 0 var(--s-4);
  font-size: var(--t-h2);
}
.karte--aktion p,
.karte--aktion address {
  color: var(--text);
  font-size: var(--t-body);
}
.karte--aktion address { font-style: normal; line-height: 1.7; margin-bottom: var(--s-4); }

.karte__ikon {
  width: 2.5rem; height: 2.5rem;
  color: var(--blau);
  flex: none;
}

/* Bankdaten in einer Rasterform, damit IBAN und BIC untereinander fluchten.
   Die Beschriftungen „IBAN“ und „BIC“ laufen in der normalen Textgröße mit
   – nur grau, damit sie sich von den Nummern absetzen. Kleiner waren sie
   früher einmal; zusammen mit der Notiz darunter ließ das den ganzen
   Spendenkasten neben seinem Nachbarn geschrumpft wirken. Klein ist jetzt
   ausschließlich das, was klein sein muss: IBAN und BIC selbst. */
.bankdaten { line-height: 2; }
.bankdaten__feld {
  display: inline-block;
  min-width: 3.2rem;
  color: var(--text-leise);
}

/* Notiz am Kartenfuß, abgesetzt durch eine feine Linie – in Textgröße,
   damit der Kasten zu den übrigen auf der Seite passt. Die feine Linie
   und der zurückgenommene Grauton reichen als Absetzung. */
.karte__fuss--notiz {
  border-top: 1px solid var(--grau-linie);
  color: var(--text-leise) !important;
  line-height: 1.6;
}

/* Ganze Karte klickbar, Link bleibt das eigentliche Ziel */
.karte--klickbar { position: relative; }
.karte--klickbar .karte__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}


/* =========================================================================
   10  TERMINE
   ========================================================================= */

.termine {
  display: grid;
  gap: var(--s-3);

  /* Breite der Datumsspalte – gilt für ALLE Termine gemeinsam.
     Vorher war die Spalte auf `auto` gestellt. Da jeder Termin ein eigenes
     Raster ist, richtete sich die Spalte je Zeile nach ihrem eigenen Datum;
     die Ereignisse begannen dadurch auf unterschiedlicher Höhe. Mit einem
     festen Wert fluchten sie untereinander.

     12,5 rem = 200 px reichen für die längste vorkommende Angabe
     („22. März – 2. Apr.“, 187 px bei 21 px Schriftgröße). Wird ein Termin
     länger, hier erhöhen. */
  --spalte-datum: 12.5rem;
}

.termin {
  display: grid;
  grid-template-columns: var(--spalte-datum) 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: 5px solid var(--blau);
  border-radius: var(--radius-klein);
}
.termin--jetzt { border-left-color: var(--gruen); background: var(--gruen-hell); }

/* Gesetzlicher Feiertag: gehört in dieselbe Liste wie die Ferien, weil man
   nur so auf einen Blick sieht, wann wirklich frei ist. Optisch aber leiser
   – die Ferien sind das, wonach Familien planen. */
.termin--feiertag {
  border-left-color: var(--grau);
  background: var(--grau-flaeche);
}
/* Nur das Datum wird grau. Der Titel bleibt so dunkel wie bei den Ferien,
   damit die Ereignisnamen eine durchgehende, ruhig lesbare Spalte bilden.
   Balken, Fläche und Datum reichen zur Unterscheidung völlig aus. */
.termin--feiertag .termin__datum { color: var(--text-leise); }

.termin__datum {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--blau-dunkel);
  line-height: 1.15;
  white-space: nowrap;
}
.termin--jetzt .termin__datum { color: #145636; }

/* Termine fünf bis acht im Kasten der Startseite: stehen im Quelltext, sind
   aber ausgeblendet. main.js holt sie hervor, wenn davor etwas abgelaufen
   ist. Ohne JavaScript bleiben sie unsichtbar – dann zeigt der Kasten die
   vier, die beim Bauen aktuell waren. Siehe Abschnitt 5 in main.js. */
.termin--reserve { display: none; }

.termin__titel { font-weight: 600; }
.termin__notiz { font-size: var(--t-klein); color: var(--text-leise); }

/* Auf schmalen Geräten reicht die Breite nicht für zwei Spalten –
   dort steht das Datum über dem Ereignis. */
@media (max-width: 40rem) {
  .termin { grid-template-columns: 1fr; gap: var(--s-1); }
}

.stand {
  font-size: var(--t-mini);
  color: var(--text-leise);
  margin-top: var(--s-4);
}


/* =========================================================================
   11  LINKLISTEN (Digitalecke, Lesen, ByCS)
   ========================================================================= */

.linkbox {
  padding: var(--s-5);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
}
.linkbox h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.linkbox img { height: 2.2rem; width: auto; }

.linkliste {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.linkliste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--petrol-hell);
  border-radius: 999px;
  color: var(--blau-dunkel);
  font-size: var(--t-klein);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tempo), color var(--tempo);
}
.linkliste a:hover { background: var(--blau); color: var(--weiss); }

/* --- Leseecke mit dem Lese-Bobby ---------------------------------------- */
.lesebox {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  /* Weiß, weil die Lesebox auf dem grauen Band steht – ein dritter
     Farbton an dieser Stelle wäre einer zu viel. */
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius-gross);
  justify-items: center;
  text-align: center;
}
@media (min-width: 46rem) {
  .lesebox {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
}

.lesebox__bild {
  width: clamp(9rem, 7rem + 12vw, 15rem);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(4, 53, 86, .16));
}

.lesebox__text { max-width: 52ch; }
.lesebox__text h2 { margin-top: 0; }
.lesebox__text p  { margin-bottom: var(--s-5); }
.lesebox .linkliste { justify-content: center; }
@media (min-width: 46rem) {
  .lesebox .linkliste { justify-content: flex-start; }
}
.lesebox .linkliste a { background: var(--petrol-hell); }
.lesebox .linkliste a:hover { background: var(--blau); color: var(--weiss); }

/* Externe Links dezent kennzeichnen (Barrierefreiheit) */
a[target="_blank"] .extern {
  width: .8em; height: .8em;
  display: inline-block;
  margin-left: .3em;
  vertical-align: -.05em;
  opacity: .65;
}


/* =========================================================================
   12  FUSSBEREICH
   ========================================================================= */

/* Kein Abstand nach oben: Der vorangehende Abschnitt bringt seine eigene
   Polsterung mit. Ein zusätzlicher Außenabstand erzeugte einen weißen
   Streifen zwischen dem farbigen Band und dem Fußbereich – der sah aus
   wie ein Loch im Layout. */
.fuss {
  background: var(--blau-tief);
  color: var(--fuss-text);
  padding-block: var(--s-7) var(--s-5);
}
.fuss a { color: var(--weiss); }
.fuss a:hover { color: #a4ceea; }   /* Logoblau, stark aufgehellt · 7,64:1 */

.fuss h2, .fuss h3 { color: var(--weiss); }

.fuss__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: var(--s-2); }
.fuss__liste a {
  display: inline-block;
  min-height: 32px;
  padding-block: .2rem;
  text-decoration: none;
}
.fuss__liste a:hover { text-decoration: underline; }

.fuss address { font-style: normal; line-height: 1.9; }

.fuss__unten {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-klein);
}
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }


/* =========================================================================
   13  INHALTSSEITEN (Rechtstexte u. Ä.)
   ========================================================================= */

.seitenkopf {
  background: var(--petrol-zart);
  border-bottom: 1px solid var(--grau-linie);
  padding-block: clamp(2rem, 1rem + 4vw, 3.75rem);
}
.seitenkopf h1 { margin-bottom: var(--s-2); }

.brotkrumen {
  font-size: var(--t-klein);
  color: var(--text-leise);
  margin-bottom: var(--s-3);
}
.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 0; padding: 0;
}
.brotkrumen li + li::before { content: "›"; margin-right: .5em; opacity: .6; }

/* Fließtextspalte mit angenehmer Zeilenlänge */
.fliesstext { max-width: var(--breite-text); }
.fliesstext h2 {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 2px solid var(--petrol-hell);
  scroll-margin-top: 6rem;
}
.fliesstext h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.fliesstext h3 { margin-top: var(--s-5); font-size: var(--t-gross); font-weight: 700;
                 font-family: var(--font-body); color: var(--text); }
.fliesstext li { margin-bottom: .4em; }

/* Inhaltsverzeichnis für lange Rechtstexte */
.inhalt-nav {
  padding: var(--s-5);
  background: var(--petrol-zart);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
}
.inhalt-nav h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3);
                 border: 0; padding: 0; }
.inhalt-nav ol { margin: 0; padding-left: 1.3em; }
.inhalt-nav li { margin-bottom: .35em; }

/* Adress-/Hinweisblock */
.block {
  padding: var(--s-5);
  background: var(--petrol-zart);
  border-left: 4px solid var(--blau);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  margin-block: var(--s-5);
}
.block--hinweis { background: var(--akzent-hell); border-left-color: var(--akzent); }
.block address { font-style: normal; line-height: 1.8; }

/* Kasten, der eine ganze Spalte füllt: eigene Überschrift ohne die
   Trennlinie der Fließtext-Überschriften, und der Inhalt am Fuß
   ausgerichtet, damit nebeneinanderstehende Kästen zusammenpassen. */
.block--voll { margin-block: 0; height: 100%; }
.block--voll h2 {
  margin-top: 0;
  border: 0;
  padding-top: 0;
  font-size: var(--t-h3);
}
.block__fuss { margin-top: auto !important; margin-bottom: 0 !important; }

/* Definitionsliste für „Frist – Bedeutung“-Paare */
.dl-tabelle { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.dl-tabelle > div {
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--grau-linie);
}
@media (min-width: 40rem) {
  .dl-tabelle > div { grid-template-columns: 1fr 12rem; gap: var(--s-4); }
}
/* Namensliste des Vorstands.

   Hier stehen kurze Paare wie „K. Dirr – 1. Vorsitzende“. Die bleiben
   auch auf dem Handy nebeneinander: Untereinander gestapelt brauchte
   jeder Name zwei Zeilen und rund 82 px Höhe, fünf Personen also mehr
   als eine halbe Bildschirmseite – für zehn Wörter. Nebeneinander sind
   es etwa 44 px pro Zeile.

   Das gilt bewusst nur für diese Variante. Die allgemeine .dl-tabelle
   trägt längere Texte („Frist – Bedeutung“); die muss auf schmalen
   Geräten weiterhin umbrechen dürfen. */
.dl-tabelle--breit > div {
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding-bottom: var(--s-3);
}
.dl-tabelle--breit dd { text-align: right; }
@media (min-width: 40rem) {
  .dl-tabelle--breit > div { padding-bottom: var(--s-4); }
  .dl-tabelle--breit dt { font-size: var(--t-gross); }
  .dl-tabelle--breit dd { text-align: left; }
}
.dl-tabelle dt { font-weight: 600; margin: 0; }
.dl-tabelle dd { margin: 0; color: var(--text-leise); }

/* Tabellen, falls doch mal gebraucht */
.tabelle-huelle { overflow-x: auto; margin-block: var(--s-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-klein); }
th, td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--grau-linie); }
th { background: var(--petrol-zart); font-weight: 700; }


/* =========================================================================
   14  BAUSTEINE DER UNTERSEITEN
   ========================================================================= */

/* --- Zwei Spalten, die auf schmalen Geräten untereinander rutschen ------ */
.zwei-spalten {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .zwei-spalten { grid-template-columns: 1fr 1fr; }
}
.zwei-spalten > div > h2:first-child { margin-top: 0; }

.gross { font-size: var(--t-gross); font-weight: 600; }

/* --- Kleine Hilfsklassen für Abstand und Breite --------------------------

   WICHTIG: Auf dieser Website darf es KEINE style="…"-Angaben im HTML geben.

   Die Content-Security-Policy in der .htaccess erlaubt nur Stile aus eigenen
   Dateien (`style-src 'self'`). Ein `style`-Attribut im HTML wird vom Browser
   deshalb stillschweigend verworfen – auf dem Server, wohlgemerkt. Lokal, wo
   keine .htaccess gilt, wirkt es. Genau daran ist es aufgefallen: Am Mac sah
   alles richtig aus, auf der hochgeladenen Seite klebten Überschriften an den
   Kästen darüber.

   Man könnte der Richtlinie `'unsafe-inline'` hinzufügen. Das wäre aber genau
   die Lücke, gegen die eine CSP schützt – ein eingeschleustes style-Attribut
   kann eine Seite unkenntlich machen oder Inhalte verdecken. Also lieber
   Klassen. `bauen.py` prüft am Ende, dass keine style-Attribute übrig sind.  */
.mt-0   { margin-top: 0 !important; }
.mt-1   { margin-top: var(--s-4) !important; }   /* ~1 rem   */
.mt-2   { margin-top: var(--s-5) !important; }   /* ~1,5 rem */
.mt-3   { margin-top: var(--s-6) !important; }   /* ~2 rem   */
.mt-4   { margin-top: var(--s-7) !important; }   /* ~2,5 rem */
.mt-5   { margin-top: var(--s-8) !important; }   /* ~3 rem   */
.mb-0   { margin-bottom: 0 !important; }
.schmal { max-width: 68ch; }                     /* angenehme Lesebreite */

/* Überschrift innerhalb eines Kastens: ohne Trennlinie und ohne Abstand
   nach oben – der Kasten selbst rahmt den Inhalt bereits ein. */
.blockkopf { margin-top: 0; border: 0; padding: 0; }

/* Zweiter, nachgeordneter Link am Fuß einer Karte, unter dem Knopf. */
.karte__link--abgesetzt { margin-top: .9rem; display: inline-flex; }

/* Der Vorrat an Symbolen am Seitenanfang. Er ist 0 × 0 groß und wird nur
   von <use> angezapft; aus dem Fluss genommen, damit er nirgends stört. */
.ikon-vorrat { position: absolute; }

/* --- Faxnummern ----------------------------------------------------------

   Faxnummern sind bewusst NICHT verlinkt. Ein tel:-Verweis darauf würde am
   Handy das Faxgerät anwählen – man bekäme nur das Pfeifen zu hören. Ein
   fax:-Verweis wiederum wird von praktisch keinem Gerät unterstützt und
   täte gar nichts; der Link sähe aktiv aus und wäre es nicht.

   Sonst bleibt die Zeile aber genau wie die Rufnummer darüber: gleiche
   Schrift, gleiche Größe, gleiche Farbe. Sie kleiner zu setzen war ein
   Versuch, den fehlenden Link zu erklären – es sah nur unruhig aus. Der
   Unterschied zwischen unterstrichen und nicht unterstrichen genügt.

   Deshalb steht hier keine Regel. Das ist Absicht.                        */

/* Gleich hohe Spalten, damit zwei nebeneinanderstehende Kästen unten
   bündig abschließen – auch wenn der eine mehr Text trägt. */
.zwei-spalten--gleich { align-items: stretch; }
.zwei-spalten--gleich > * { display: flex; flex-direction: column; }

/* Einleitungstext über einem zweispaltigen Block.
   Läuft über die volle Inhaltsbreite – also von der linken Kante des einen
   Kastens bis zur rechten Kante des anderen. Dadurch bildet der Abschnitt
   einen geschlossenen Block statt einer schmalen Spalte über breiten
   Kästen.

   Hinweis: Die Zeilen werden dadurch länger als die sonst angestrebten
   68 Zeichen. Wer das enger möchte, setzt hier wieder eine `max-width`. */
.einleitung {
  margin: 0 0 var(--s-7);
}
.einleitung h2 { margin-top: 0; }
.einleitung p:last-child { margin-bottom: 0; }

/* Mittiger Aufruf am Ende einer Seite – etwa der Kontakt zum Elternbeirat.
   Steht bewusst unter beiden Spalten statt an eine davon angehängt. */
.aufruf {
  max-width: 52ch;
  margin: var(--s-8) auto 0;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  background: var(--petrol-zart);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius-gross);
}
.aufruf h2 { margin-top: 0; }
.aufruf p  { margin-bottom: 0; color: var(--text-leise); }
.aufruf__ziel {
  margin-top: var(--s-4) !important;
  font-size: var(--t-gross);
  font-weight: 600;
}
.aufruf__ziel a { text-decoration: none; }
.aufruf__ziel a:hover { text-decoration: underline; }

/* Der Kontaktweg am Fuß einer Aktionskarte – etwa die E-Mail an den
   Elternbeirat. Etwas größer als der Text darüber, damit man ihn beim
   Überfliegen findet, ohne dass er wie ein Knopf aussieht. */
.karte__ziel {
  font-size: var(--t-gross);
  font-weight: 600;
}

/* --- Personen (Team-Seite) --------------------------------------------- */
/* Zwei feste Spalten statt automatischer Aufteilung: Bei vier Personen
   ergäbe auto-fit auf breiten Bildschirmen 3 + 1 – eine einzelne Karte in
   der zweiten Reihe wirkt wie ein Nachzügler. 2 + 2 steht ruhiger. */
.personen {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.person {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
}

.person__bild {
  flex: none;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--petrol-hell);
  display: grid;
  place-items: center;
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__platzhalter {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--blau);
}

.person__text { min-width: 0; }
.person h3 { margin: 0 0 .15rem; font-size: var(--t-h3); }
.person__rolle {
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--blau-dunkel);
  font-size: var(--t-klein);
}
.person__kontakt,
.person__mail { margin: 0; font-size: var(--t-klein); color: var(--text-leise); }
.person__mail { margin-top: .35rem; }

/* --- Bild mit Bildunterschrift ------------------------------------------ */
.bildkarte {
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-1);
}
.bildkarte img { width: 100%; height: auto; display: block; }
.bildkarte figcaption {
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-klein);
  color: var(--text-leise);
  line-height: 1.55;
}
.bildkarte--schmal { align-self: start; }

/* --- Leitsätze (Leitbild) ----------------------------------------------- */
.leitsaetze { display: grid; gap: var(--s-6); }

.leitsatz {
  position: relative;
  /* Der Kasten ist selbst ein Rasterfeld in .leitsaetze und weigerte sich
     deshalb ebenfalls, unter seine min-content-Breite zu gehen. Ohne diese
     Zeile bleibt er 375 px breit, egal wie schmal das Gerät ist. */
  min-width: 0;
  padding: var(--s-6);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-1);
}
.leitsatz__nummer {
  position: absolute;
  top: var(--s-3); right: var(--s-5);
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--petrol-hell);
  user-select: none;
}
.leitsatz > h2 {
  margin: 0 0 var(--s-5);
  padding-right: 3rem;
  border: 0;
  max-width: 46ch;
}

.leitsatz__spalten {
  display: grid;
  gap: var(--s-5);
}
/* Rasterfelder weigern sich standardmäßig, schmaler zu werden als ihr
   längstes Wort (min-width: auto). Auf einem 320 px breiten Bildschirm –
   iPhone SE und ähnliche – schob das den ganzen Leitsatz-Kasten um 70 px
   über den Rand hinaus, und die Seite ließ sich seitlich schieben.
   min-width: 0 erlaubt das Schrumpfen, break-word bricht im Notfall auch
   ein langes Wort um. Beides zusammen kann bei keiner Breite mehr
   überlaufen. Überschriften sind davon ausgenommen – sie brechen weiter
   nur zwischen Wörtern (siehe Abschnitt 03). */
.leitsatz__spalte { min-width: 0; }
.leitsatz__spalte p,
.leitsatz__spalte li { overflow-wrap: break-word; }
@media (min-width: 56rem) {
  .leitsatz__spalten { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

.leitsatz__spalte h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
}
.leitsatz__spalte h4 {
  margin-top: var(--s-4);
  font-size: var(--t-body);
}
.leitsatz__spalte--eigen {
  padding: var(--s-5);
  background: var(--petrol-zart);
  border-radius: var(--radius);
}
.leitsatz__spalte--eigen h3 { color: var(--blau-dunkel); }

/* --- Zeitleiste (Geschichte) -------------------------------------------- */
.zeitleiste {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.epoche {
  display: grid;
  gap: var(--s-2);
  padding: 0 0 var(--s-6) 0;
}
.epoche__jahr {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  color: var(--blau);
  line-height: 1.1;
}
.epoche__text h3 { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.epoche__text p  { margin: 0; }

@media (min-width: 48rem) {
  .zeitleiste { padding-left: 12.5rem; }
  .zeitleiste::before {
    content: "";
    position: absolute;
    left: 11rem; top: .6rem; bottom: 3rem;
    width: 2px;
    background: linear-gradient(var(--petrol-hell), var(--blau), var(--petrol-hell));
  }
  .epoche { position: relative; }
  .epoche__jahr {
    position: absolute;
    left: -12.5rem; top: 0;
    width: 9.5rem;
    text-align: right;
  }
  .epoche::before {
    content: "";
    position: absolute;
    left: -1.6rem; top: .75rem;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--weiss);
    border: 3px solid var(--blau);
  }
  .epoche__text { max-width: var(--breite-text); }
}

/* --- Anlaufstellen (Beratung) ------------------------------------------- */
.anlaufstellen {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.anlauf {
  padding: var(--s-5);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius-klein);
}
.anlauf h3 { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.anlauf p  { margin: 0; font-size: var(--t-klein); line-height: 1.7; }
.anlauf__link { margin-top: var(--s-3) !important; font-weight: 600; }
.anlauf--dringend {
  border-left-color: var(--akzent);
  background: var(--akzent-hell);
}
.anlauf--dringend .gross { font-size: var(--t-h3); }

/* --- Karte mit Porträt (Beratung) ---------------------------------------

   Die Porträts stehen mittig ÜBER dem Text, nicht daneben.

   Vorher standen sie links neben dem Text. Das ging auf dem Handy schief:
   Die Karte ist dort rund 340 px breit, davon nahm das Bildpaar der
   Heilpädagoginnen allein 150 px. Für den Text blieben knapp 160 px – zu
   wenig für „tyroller@gsohlstadt.de“, das nicht umbrochen werden kann. Der
   Text schob sich seitlich aus der Karte heraus.

   Man könnte das über einen Umbruchpunkt lösen, aber die Breite der Karte
   hängt nicht nur vom Fenster ab, sondern auch davon, ob das Raster gerade
   eine, zwei oder drei Spalten bildet. Ein fester Wert trifft das nie
   überall. Die Bilder oben zu setzen, kann dagegen bei keiner Breite
   schiefgehen – und die beiden Karten sehen jetzt gleich aus.
   ------------------------------------------------------------------------ */
.karte--person { gap: var(--s-3); }

.karte__portrait,
.portraitpaar {
  align-self: center;     /* mittig über Name und Text */
  flex: none;
}
.karte__portrait {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

/* Der Textteil bleibt eine Spalte, damit „karte__fuss“ mit margin-top:auto
   weiterhin nach unten rutscht und die Links beider Karten auf gleicher
   Höhe stehen. min-width:0 erlaubt dem Text zu schrumpfen – ohne das
   weigern sich Flex-Elemente, schmaler als ihr längstes Wort zu werden. */
.karte--person > div:not(.portraitpaar) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Bild, Überschrift und Name bilden zusammen den Kopf der Karte und stehen
   deshalb mittig. Der Fließtext darunter bleibt linksbündig – zentrierter
   Mengentext liest sich schlecht. */
.karte--person h3,
.karte--person .karte__rolle { text-align: center; }

.karte__rolle {
  font-weight: 600;
  color: var(--blau-dunkel) !important;
  font-size: var(--t-body) !important;
  margin-bottom: var(--s-2) !important;
}

/* E-Mail-Adressen sind lange Wörter ohne Trennstelle. Auf schmalen Karten
   müssen sie umbrechen dürfen, sonst stehen sie über den Rand hinaus. */
.karte--person a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Zwei Porträts für ein gemeinsames Aufgabengebiet (Heilpädagogik).
   Leicht überlappend, damit sie als Paar gelesen werden und nicht mehr
   Platz brauchen als ein einzelnes Bild. */
.portraitpaar { display: flex; }
.portraitpaar img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--weiss);
  background: var(--petrol-hell);
}
/* Nur so viel Überlappung, dass die beiden als Paar gelesen werden –
   im Browser geprüft: Bei mehr verdeckt das zweite Bild einen Teil des
   ersten Gesichts. */
.portraitpaar img + img { margin-left: -1.1rem; }

/* --- Hakenliste ---------------------------------------------------------- */
.haken { list-style: none; padding: 0; margin: 0; }
.haken li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: .7em;
}
.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: .7em; height: .38em;
  border-left: 2.5px solid var(--blau);
  border-bottom: 2.5px solid var(--blau);
  transform: rotate(-45deg);
}

/* --- Senkrechte Linkliste ------------------------------------------------ */
.linkliste--senkrecht { flex-direction: column; align-items: stretch; }
.linkliste--senkrecht a { justify-content: flex-start; }

/* --- Linkliste als sauberes Raster ---------------------------------------
   Für gleichartige Einträge wie die Jahrgänge der Förderberichte. Als
   umbrechende Flex-Liste stehen die Reihen unterschiedlich weit – hier
   sitzen alle Pillen in gleich breiten Spalten und schließen bündig ab,
   auch wenn die letzte Reihe nicht voll wird.                            */
.linkliste--raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--s-2);
}
.linkliste--raster a { justify-content: center; width: 100%; }

/* --- Vorstand: Bild und Namen nebeneinander ------------------------------ */
.vorstand {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
}
@media (min-width: 48rem) {
  .vorstand { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
/* Letzte Zeile ohne Trennlinie – sie hätte nichts mehr zu trennen. */
.dl-tabelle--breit > div:last-child { border-bottom: 0; }

/* Hochformat-Bilder brauchen eine Höhenbremse, sonst schieben sie
   den restlichen Inhalt aus dem Blick. */
.bildkarte--hoch { max-width: 22rem; margin-inline: auto; }
.bildkarte--hoch img { max-height: 30rem; object-fit: cover; object-position: 50% 25%; }

/* --- Sprechstundentabelle ------------------------------------------------ */
.tabelle-sprech th[scope="row"] { background: none; font-weight: 700; }
.tabelle-sprech tbody tr:hover { background: var(--petrol-zart); }

/* --- Bankverbindung ------------------------------------------------------ */
.iban {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  letter-spacing: .02em;

  /* Eine Kontonummer wird nie umbrochen. „…0615\n31“ sieht nicht nur
     unschön aus, man verliest sich auch leicht und überträgt eine Ziffer
     falsch – bei einer Überweisung das Letzte, was man gebrauchen kann.
     Passt sie nicht neben das Wort „IBAN“, rutscht sie als Ganzes in die
     nächste Zeile. */
  white-space: nowrap;

  /* Auf dem Handy reicht selbst die volle Kartenbreite nicht: Die IBAN
     braucht bei normaler Größe 254 px, in einer 320 px breiten Anzeige
     stehen aber nur 216 px zur Verfügung. Deshalb darf die Schrift auf
     schmalen Geräten etwas kleiner werden – gerade so viel, dass die
     Nummer in einer Zeile bleibt. Ab etwa 450 px Fensterbreite greift
     wieder die normale Größe; min() sorgt dafür, dass sie nie größer
     wird als vorgesehen. */
  font-size: min(.95em, 3.4vw);
}


/* =========================================================================
   15  BARRIEREFREIHEIT & DRUCK
   ========================================================================= */

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

/* Deutlich sichtbarer Tastaturfokus – Pflicht nach BayBITV/WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}
:focus:not(:focus-visible) { outline: none; }

/* Bewegung reduzieren, wenn das Betriebssystem es verlangt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Höherer Kontrast, wenn gewünscht */
@media (prefers-contrast: more) {
  :root { --text-leise: #3c4649; --grau-linie: #6f7d84; }
  .kachel, .karte, .termin { border-width: 2px; }
}

@media print {
  .kopf, .fuss__liste, .nav, .sprungmarke, .hero__knoepfe, .kacheln { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .abschnitt { padding-block: 1rem; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
}