/* =========================================================
   Grundschule Babensham — Komponenten-Klassen
   Basis: 02_divi-custom-css.css aus dem Design-Handoff
   Stand: 19.08.2026

   Setzt 01_tokens.css voraus (CSS-Variablen).
   Verwendung in Divi: Modul → Erweitert → CSS-Klasse
   ========================================================= */


/* =========================================================
   0. Kontrast-Korrektur der interaktiven Farbe (10.09.2026)
   =========================================================

   --color-primary traegt Text: Links und die Schrift der
   Sekundaerknoepfe. Die style.css des Child-Themes setzt dafuer
   --brand-blue (#5D93C9). Nachgerechnet sind das 3,24:1 gegen Weiss —
   WCAG 1.4.3 verlangt fuer Text 4,5:1. --brand-blue-dark (#3E71A8)
   erreicht 5,08:1.

   Die MARKENFARBE bleibt unangetastet. Geaendert wird nur die
   semantische Rolle, also die Frage, welcher Ton Text traegt.
   Flaechen und Icons, die --brand-blue nutzen, sind nicht betroffen.

   Genau diese Korrektur steht in tokens-a11y-patch.css (SKA-293). Die
   Datei ist auf dem Server nicht geladen; am 09.09. am Livesystem
   gemessen. Statt sie nachzuruesten, steht die Korrektur hier — in der
   Datei, die tatsaechlich ausgeliefert wird.

   :root:root statt :root ist kein Zierrat: style.css laedt NACH dieser
   Datei. Bei gleicher Spezifitaet gewaenne sie. Die doppelte Angabe
   hebt die Spezifitaet auf 0,2,0 und macht die Reihenfolge damit
   gleichgueltig — ohne !important, das sich spaeter nicht mehr
   ueberschreiben liesse.

   Als Hover braucht es einen noch dunkleren Ton, sonst waeren Ruhe- und
   Hover-Zustand identisch. #35618F liegt bei 6,45:1. */
:root:root {
  --color-primary: var(--brand-blue-dark);   /* war --brand-blue, 3,24:1 */
  --color-primary-hover: #35618F;            /* war --brand-blue-dark */
}


/* =========================================================
   1. Barrierefreiheit — Grundlagen (BITV-Pflicht)
   ========================================================= */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Skip-Link — bevorzugt per wp_body_open ganz oben im <body> ausgeben,
   nicht als Code-Modul innerhalb der Header-Sektion. Divi-Sektionen
   bilden eigene Stacking-Contexts; ein z-index von innen heraus kann
   dann gegen Geschwister ausserhalb nicht gewinnen.
   position:fixed statt absolute, damit der Link am Viewport haengt und
   nicht an einem positionierten Divi-Vorfahren. */
.gsb-skiplink {
  position: fixed;
  top: -120px;          /* aus dem Blickfeld, aber im Tab-Fluss */
  left: 16px;
  z-index: 100000;      /* ueber Divi-Header und Sticky-Elementen */

  display: inline-block;
  padding: 12px 20px;
  background: var(--ink);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(32, 30, 27, .35);

  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.gsb-skiplink:focus,
.gsb-skiplink:focus-visible {
  top: 12px;
  color: #FFFFFF;
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Eingeloggt schiebt die WP-Admin-Bar alles nach unten */
.admin-bar .gsb-skiplink:focus,
.admin-bar .gsb-skiplink:focus-visible { top: 44px; }

@media screen and (max-width: 782px) {
  .admin-bar .gsb-skiplink:focus,
  .admin-bar .gsb-skiplink:focus-visible { top: 58px; }
}

/* Sprungziel des Skip-Links: Divis eigener Wrapper #et-main-area.
   Kein zusaetzliches DOM-Element — nichts, was Abstaende erzeugen kann.
   tabindex="-1" wird per JS gesetzt (siehe functions.php), damit der
   Tastaturfokus beim Sprung wirklich mitwandert und nicht im Header
   haengen bleibt. Der Fokusring wird hier unterdrueckt, weil sonst ein
   Rahmen um den halben Seiteninhalt gezeichnet wuerde. */
#et-main-area {
  scroll-margin-top: 24px;
}
#et-main-area:focus,
#et-main-area:focus-visible {
  outline: none;
}


/* =========================================================
   2. Karte — Aktuelles, Info-Boxen
   ========================================================= */

.gsb-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.gsb-card:hover { box-shadow: var(--shadow-md); }

/* 4:3-Bildbereich */
.gsb-card .gsb-card-img { aspect-ratio: 4/3; overflow: hidden; }
.gsb-card .gsb-card-img img { width: 100%; height: 100%; object-fit: cover; }

/* ERGÄNZT 19.08.: Innenabstand für den Textbereich.
   Ohne diese Klasse klebt Text am Kartenrand, weil .gsb-card
   selbst kein Padding hat (overflow: hidden schneidet sonst ab). */
.gsb-card .gsb-card-body { padding: var(--space-4); }


/* ERGAENZT 21.08.: Ganze Karte klickbar — OHNE role="button".
   Die Spec (04_komponenten-spec.md) schlug role="button" + tabindex="0"
   + Enter/Space vor. Das ist hier falsch: die Karte navigiert, sie loest
   keine Aktion aus. Screenreader saegen "Schaltflaeche" statt "Link",
   und Mittelklick, "in neuem Tab oeffnen" sowie "Link kopieren" gehen
   verloren.
   Richtig: der Titel bleibt ein echter <a>, ein gedehntes Pseudo-Element
   macht die Kartenflaeche klickbar. Ein Tab-Stopp, kein JavaScript. */
.gsb-card { position: relative; }

.gsb-card .gsb-card-link::after,
.gsb-newsgrid .entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gsb-newsgrid .et_pb_post { position: relative; }

/* Fokusring umschliesst die ganze Karte, nicht nur den Titeltext.
   KORRIGIERT 30.08.2026: :focus-within traf auch den Mausklick — beim
   Klick bekommt der Link Fokus, und :focus-within fragt nur, OB etwas
   fokussiert ist, nicht WIE. :has(:focus-visible) reicht die Entscheidung
   des Browsers durch: Tastatur ja, Maus nein. */
.gsb-card:has(.gsb-card-link:focus-visible),
.gsb-newsgrid .et_pb_post:has(.entry-title a:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
/* Fallback fuer Browser ohne :has() — dort lieber ein Ring zu viel
   als gar keine sichtbare Tastaturbedienung. */
@supports not selector(:has(*)) {
  .gsb-card:focus-within,
  .gsb-newsgrid .et_pb_post:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-md);
  }
}
.gsb-card .gsb-card-link:focus-visible,
.gsb-newsgrid .entry-title a:focus-visible { outline: none; }


/* =========================================================
   3. Kategorie-Tag
   ========================================================= */

.gsb-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  color: var(--ink);              /* GEÄNDERT 19.08. — siehe Hinweis unten */
}

/* GEÄNDERT 19.08.: Varianten auf die sechs beschlossenen Kategorien
   umgestellt. Vorher: umweltschule / elternbriefe / projekte / zeitung.

   Die Textfarbe ist bewusst durchgehend --ink statt der jeweiligen
   dunklen Markenfarbe. Grund: Markenfarbe auf hellem Tint erreicht
   bei 13px nicht die geforderten 4.5:1 Kontrast (WCAG 1.4.3).
   Die Farbidentität trägt der Hintergrund, die Lesbarkeit der Text. */

/* GEAENDERT 28.08.2026 — Teilstring statt exakter Klassenname.

   Im Loop entsteht die Klasse dynamisch: Divi haengt im Attribut-Feld
   den Kategoriewert an den Vorher-Text "gsb-tag gsb-tag--". Am Live-
   Markup geprueft: Divi schreibt den **angezeigten Namen**, nicht den
   Slug — also "gsb-tag--Elterninfos" und "gsb-tag--Schuelerzeitung"
   mit grossem Anfangsbuchstaben und echtem Umlaut.

   Deshalb Teilstring-Selektoren mit i-Flag statt exakter Klassen:
   Gross- und Kleinschreibung ist egal, und wenn doch einmal zwei
   Kategorien im Wert landen, greift der Teiltreffer trotzdem.

   \0000FC ist das escapte Umlaut-u, sechsstellig geschrieben, damit die
   Datei reines ASCII bleibt und kein Encoding-Unfall den Selektor
   still zerlegt.

   Spezifitaet bleibt 0,1,0 wie bei einer Klasse — .gsb-tag selbst
   setzt keinen Hintergrund, es kollidiert also nichts. */
[class*="gsb-tag--nachhaltigkeit" i]      { background: var(--tint-green);  }
[class*="gsb-tag--schulleben" i]          { background: var(--tint-yellow); }
[class*="gsb-tag--ausfl\0000FCge" i]       { background: var(--tint-blue);   }
[class*="gsb-tag--sport" i]               { background: var(--tint-orange); }
[class*="gsb-tag--sch\0000FClerzeitung" i] { background: var(--tint-pink);   }
[class*="gsb-tag--elterninfos" i]         { background: var(--neutral-200); }

/* ERGAENZT 09.09.2026: Terminarten aus The Events Calendar. Dieselbe
   Pille wie bei den Beitragskategorien, nur andere Begriffe — die
   Termine haben eine eigene Taxonomie. Die Toene entsprechen der
   Datumsbox in Abschnitt 6, damit Box und Pille auf einer Karte
   dieselbe Farbe zeigen. */
[class*="gsb-tag--ferien" i]              { background: var(--tint-green);  }
[class*="gsb-tag--feiertage" i]           { background: var(--tint-blue);   }
[class*="gsb-tag--besonderheit" i]        { background: var(--tint-yellow); }
[class*="gsb-tag--infoveranstaltungen" i] { background: var(--neutral-200); }

/* Als Divi-Modul umgesetzt (Text- oder Link-Modul) landet der Text in
   einem <p>, das Divis eigene Absatzregel formatiert. font:inherit holt
   Schrift, Groesse und Gewicht von .gsb-tag zurueck. Gleiches Problem
   wie bei .gsb-chip. */
.gsb-tag p,
.gsb-tag .et_pb_link_text p {
  font: inherit;
  color: inherit;
  margin: 0;
}


/* =========================================================
   4. Quicklink-Box — 4 auf der Startseite
   ========================================================= */

/* Raster der vier Quicklinks: Desktop 4 Spalten, mobil 2x2.
   Als eigenes Grid statt vier Divi-Spalten — Divi wuerde mobil auf
   eine Spalte umbrechen, die Spec verlangt 2x2. */
.gsb-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 981px) {
  .gsb-quicklinks { grid-template-columns: repeat(4, 1fr); }
}

.gsb-quicklink {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  text-decoration: none !important;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.gsb-quicklink:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.gsb-quicklink .gsb-ql-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.gsb-quicklink--krank   .gsb-ql-icon { background: var(--brand-green-dark);  }
.gsb-quicklink--termine .gsb-ql-icon { background: var(--brand-blue-dark);   }
.gsb-quicklink--bus     .gsb-ql-icon { background: var(--brand-yellow-dark); }
.gsb-quicklink--kontakt .gsb-ql-icon { background: var(--brand-orange-dark); }
.gsb-quicklink .gsb-ql-icon svg { stroke: #fff; stroke-width: 2.5; }


/* =========================================================
   5. Buttons — NUR für Ausgabe außerhalb von Divi
   ÜBERARBEITET 19.08.2026

   WICHTIG: Divi-Buttons werden über das Button-PRESET gestaltet
   (SKA-246), nicht über diese Klassen. Beides gleichzeitig führt
   dazu, dass Änderungen im Divi-Interface wirkungslos bleiben.

   Diese Klassen sind für Buttons, die Divi nicht erzeugt:
   The Events Calendar, das eigene Vorlese-Plugin, Code-Module.
   Deshalb ohne !important — es gibt hier keine Divi-Regel,
   gegen die angeschrieben werden müsste.
   ========================================================= */

.gsb-btn-primary {
  display: inline-block;
  background: var(--color-cta);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  cursor: pointer;
  text-decoration: none;
}
.gsb-btn-primary:hover,
.gsb-btn-primary:focus {
  background: var(--color-cta-hover);
  color: #fff;
}

.gsb-btn-secondary {
  display: inline-block;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
}
.gsb-btn-secondary:hover,
.gsb-btn-secondary:focus {
  background: var(--color-primary);
  color: #fff;
}


/* =========================================================
   6. Termin-Karte
   ========================================================= */

/* NEU GEFASST 30.08.2026 — bewusst minimal.

   Karte, Datumsbox, Typografie und Abstaende sind vollstaendig in den
   Divi-Einstellungen der Spalten und Textmodule gesetzt. Hier steht nur,
   was Divi nicht kann.

   Divi kann es nicht, weil: Anzeigebedingungen und Design-Optionen
   werten die SEITE aus, nicht das einzelne Loop-Element. Pro Termin
   unterschiedlich einfaerben geht deshalb nur ueber eine dynamisch
   zusammengesetzte CSS-Klasse — dasselbe Verfahren wie bei den
   Kategorie-Tags in Abschnitt 3.
   ========================================================= */

/* Die dynamische Klasse haengt am Kategorie-Textmodul (die zweite
   Zeile der Karte, die ohnehin schon die Terminart ausgibt). Gefaerbt
   wird die Datumsbox in der Nachbarspalte — deshalb greift der
   Selektor ueber die Karte, die beide enthaelt.

   Teilstring-Selektor mit i-Flag, weil Divi den Anzeigenamen der
   Kategorie einsetzt ("Ferien"), nicht den Slug. */
.gsb-termin:has([class*="gsb-termin-art--ferien" i])       .gsb-termin-date { background: var(--tint-green);  }
.gsb-termin:has([class*="gsb-termin-art--feiertage" i])    .gsb-termin-date { background: var(--tint-blue);   }
.gsb-termin:has([class*="gsb-termin-art--besonderheit" i]) .gsb-termin-date { background: var(--tint-yellow); }

/* Monats-Zwischenueberschriften in der Terminliste.
   Eingefuegt von termine-monatstitel.js — ein Divi-Loop kann nicht
   gruppieren. Die Karten liegen als Flex-Elemente in der Zeile; die
   Ueberschrift muss deshalb ueber die volle Breite gehen und einen
   Umbruch erzwingen, sonst reiht sie sich neben eine Karte ein. */
.gsb-monatstitel {
  flex: 1 0 100%;
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Die erste Ueberschrift steht direkt unter der H1 — dort waere der
   grosse Abstand nach oben zu viel. */
.gsb-monatstitel:first-child { margin-top: 0; }


/* Termine ohne Kategorie: Divi rendert das Modul trotzdem, nur leer.
   Ein leeres <p> traegt Zeilenhoehe und schiebt die Karte auseinander. */
.gsb-termin-art p:empty { display: none; }


/* ERGAENZT 30.08.2026: Ganze Karte klickbar, aber ueber einen echten
   Link — nicht ueber Divis "Modul-Link". Der erzeugt kein <a>, keinen
   href und keinen Tabindex: mit der Maus bedienbar, mit der Tastatur
   unerreichbar (WCAG 2.1.1 und 4.1.2).

   Richtig: der Titel ist ein Link-Modul, ein gedehntes Pseudo-Element
   legt die Kartenflaeche darueber. Ein Tabstopp, kein JavaScript.
   Gilt fuer den einen Link in der Karte — kommt spaeter ein zweiter
   dazu, braucht der Selektor eine Klasse. */
.gsb-termin { position: relative; }

/* GEMESSEN 31.08.2026: das gedehnte Pseudo-Element deckte nur den
   Titeltext ab (135x29 statt 247x74). Grund: Divi setzt position:relative
   auf das <a> selbst und auf jede Spalte. Das naechste positionierte
   Elternelement war damit der Link, nicht die Karte — inset:0 bezog sich
   auf die falsche Box. Die drei zuruecksetzen, dann ist .gsb-termin
   wieder der Bezug. */
.gsb-termin a,
.gsb-termin .et_pb_row,
.gsb-termin .et_pb_column { position: static; }

.gsb-termin a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.gsb-termin:has(a:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
@supports not selector(:has(*)) {
  .gsb-termin:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-md);
  }
}
.gsb-termin a:focus-visible { outline: none; }


/* =========================================================
   7. Filter-Chips — Aktuelles
   ========================================================= */

.gsb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Chips sind Links auf die Kategorie-Archive, keine JS-Filter-Buttons.
   Ein Link funktioniert mit Paginierung, ohne JavaScript und ist
   crawlbar; ein JS-Filter wuerde nur die gerade sichtbare Seite
   filtern. display:inline-flex, damit das Padding auch am <a> greift. */
.gsb-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm);
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
}
/* Aktiver Zustand: Farbe UND Rahmenfarbe — nicht nur Farbe (WCAG 1.4.1).
   aria-current fuer die Link-Variante, aria-pressed fuer Buttons. */
.gsb-chip[aria-current],
.gsb-chip[aria-pressed="true"] {
  background: var(--brand-blue-dark); color: #fff;
  border-color: var(--brand-blue-dark);
}
.gsb-chip:focus-visible {
  outline: 3px solid var(--color-focus-ring); outline-offset: 3px;
}

/* Hover. Bewusst dezent: der Chip faerbt sich in den blauen Tint und
   bekommt den Markenrahmen — er nimmt den aktiven Zustand vorweg,
   ohne ihn vorzutaeuschen. Ink-Text auf --tint-blue liegt bei 14:1.

   Nur (hover: hover): auf Touch-Geraeten bleibt ein :hover nach dem
   Antippen haengen und der Chip saehe faelschlich aktiv aus.

   Der aktive Chip aendert sich nicht — seine Regel steht bei (0,3,1)
   und schlaegt diese hier bei (0,2,0), unabhaengig von der Reihenfolge.
   Richtig so: er verweist auf die Seite, auf der man schon steht. */
@media (hover: hover) {
  .gsb-chip {
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .gsb-chip:hover {
    background: var(--tint-blue);
    border-color: var(--brand-blue-dark);
  }
}

/* Divi verschachtelt den Text des Link-Moduls als
   <a><span><span><p>Text</p>. Divis eigene Absatzregel schlaegt die
   Schriftangaben am <a> — die Typografie muss deshalb am <p> sitzen. */
.gsb-chip .et_pb_link_text p {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: inherit;
}

/* Aktiver Chip. Der Loop erzeugt alle Chips aus einem Modul — einzeln
   stylen geht nicht, und aria-current kann das Link-Modul nicht setzen.
   Die Body-Klasse, die WordPress im Archiv ohnehin vergibt, entscheidet
   es stattdessen: der href des Chips trifft auf die Kategorie im Body.
   Eine Regel fuer beide Templates, ohne dass das Template wissen muss,
   wo es steht. */
body.page                     .gsb-chip[href$="/aktuelles/"],
body.blog                     .gsb-chip[href$="/aktuelles/"],
body.category-nachhaltigkeit  .gsb-chip[href*="/nachhaltigkeit"],
body.category-schulleben      .gsb-chip[href*="/schulleben"],
body.category-ausfluege       .gsb-chip[href*="/ausfluege"],
body.category-sport           .gsb-chip[href*="/sport"],
body.category-schuelerzeitung .gsb-chip[href*="/schuelerzeitung"],
body.category-elterninfos     .gsb-chip[href*="/elterninfos"] {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}


/* =========================================================
   8. Vorlese-Leiste
   ========================================================= */

.gsb-vorlesen {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255,253,248,.94);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  box-shadow: var(--shadow-sm);
}
.gsb-vorlesen button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--neutral-500);   /* 3.57:1 — 1.4.11 erfuellt.
                                              --color-border waere 1.48:1 */
  background: var(--white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.gsb-vorlesen button[aria-pressed="true"] {
  background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff;
}


/* =========================================================
   9. Hero
   ========================================================= */

/* Hero-Wrapper — Bezugspunkt fuer die absolut gesetzte Vorlese-Leiste.
   Als CSS-Klasse auf die Divi-SEKTION legen. */
.gsb-hero { position: relative; }

/* Vorlese-Leiste: haengt am oberen Bildrand, endet aber buendig mit der
   Content-Box (1200px), nicht am Bildschirmrand.
   left:0 + right:0 + max-width + margin-inline:auto zentriert die Box;
   justify-content:flex-end schiebt den Inhalt an deren rechte Kante. */
/* Vorlesen-Leiste — zwei Kontexte, eine Klasse.
   Im Startseiten-Hero liegt sie als Overlay ueber dem Bild (absolut).
   Ueberall sonst — vor allem im Beitrags-Kopf — laeuft sie im normalen
   Fluss mit. Absolut positioniert wuerde sie dort aus dem Fluss fallen
   und auf schmalen Viewports die H1 ueberlappen. */
.gsb-hero-toolbar {
  display: flex;
  justify-content: flex-end;
  z-index: 4;
}

.gsb-hero .gsb-hero-toolbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 16px;
  pointer-events: none;          /* Bild darunter bleibt bedienbar */
}
.gsb-hero .gsb-hero-toolbar > * { pointer-events: auto; }

/* KEINE Spalten- oder Umbruchregeln fuer die Zeile mit der Leiste.
   Am 09.09.2026 standen hier kurzzeitig flex/min-width auf den Divi-
   Spalten und hyphens/overflow-wrap auf der h1. Beides ist wieder raus:
   Die Breiten der Hero-Zeile werden in Divi gesetzt, zusaetzliches CSS
   funkt dort quer (die h1 brach mitten im Wort um). Wenn eine lange
   Ueberschrift mobil zu eng wird, gehoert das in die Divi-Einstellungen
   der Zeile — nicht hierher. */

/* Hero-Ueberschrift. Bewusst groesser als die globale h1 (38px):
   der Prototyp rendert hier 48px + line-height 1.14 + max-width 640px.
   Als eigene Klasse statt globaler h1-Aenderung, damit Unterseiten bei
   den ruhigeren 38px bleiben.
   Spezifitaet 0,1,0 — schlaegt sowohl das Token-File als auch Divis
   eigene h1-Regel, ohne !important. */
.gsb-hero-title {
  font-size: clamp(2rem, 6vw, var(--text-3xl));   /* bis 48px */
  line-height: 1.14;
  max-width: 640px;
}

/* H1-Akzent — zweite Zeile in Markenblau.
   Reines <span>, KEIN <em>/<strong>: die Farbe ist Dekoration, keine
   Betonung. Screenreader sollen hier nichts zusaetzlich ansagen (1.4.1:
   die Farbe traegt keine Information, die nicht auch im Text steht).
   display:block erzeugt den Umbruch ohne <br> — bleibt auf schmalen
   Viewports unfallfrei. */
.gsb-h1-accent {
  display: block;
  color: var(--color-h1-accent, var(--brand-blue));
}

/* Hintergrund-Bubbles. Rein dekorativ, deshalb als Pseudo-Element und
   nicht als Bild-Modul: kein DOM-Knoten, kein Alt-Text, kein Klickfaenger,
   nicht im Accessibility-Tree. Die Toene kommen aus den Tokens — aendert
   sich ein Tint, wandern die Bubbles automatisch mit.
   Als CSS-Klasse auf die ZEILE legen (nicht die Sektion), damit sich die
   Prozentpositionen auf die 1200px-Contentbox beziehen und nicht auf die
   Viewportbreite. */
.gsb-hero-bubbles {
  position: relative;
  isolation: isolate;
}
.gsb-hero-bubbles::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle closest-side, var(--tint-yellow) 98%, transparent 100%),
    radial-gradient(circle closest-side, var(--tint-green)  98%, transparent 100%),
    radial-gradient(circle closest-side, var(--tint-pink)   98%, transparent 100%);
  background-size: 120px 120px, 250px 250px, 230px 230px;
  background-position: 63% 16%, 88% 22%, 64% 82%;
}
@media (max-width: 980px) {
  .gsb-hero-bubbles::before { display: none; }
}

.gsb-hero-img { width: 100%; }
.gsb-hero-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
@media (max-width: 980px) { .gsb-hero-img img { height: 200px; } }

/* Kinder-Fries — verbindet Bild und Überschrift */
.gsb-kids-connector {
  display: block; margin: -46px auto var(--space-4);
  max-width: 600px; width: 100%; height: auto;
  position: relative; z-index: 3; pointer-events: none;
}
@media (max-width: 980px) { .gsb-kids-connector { margin-top: -24px; max-width: 300px; } }


/* =========================================================
   10. Layout-Helfer
   ========================================================= */

/* Lesespalte für Langtexte */
.gsb-narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* Zweispaltig Text + Bild */
.gsb-two { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 981px) { .gsb-two { grid-template-columns: 1.4fr 1fr; gap: 28px; } }

/* Aktuelles: 4-Spalten-Raster */
.gsb-newsgrid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 981px) { .gsb-newsgrid { grid-template-columns: repeat(4, 1fr); } }


/* =========================================================
   11. Unterstreichungen — Ausnahmen
   ERGÄNZT 19.08.2026

   01_tokens.css setzt global `a { text-decoration: underline }`.
   Das ist für Fließtext-Links richtig und Pflicht (WCAG 1.4.1:
   Links dürfen nicht allein über die Farbe erkennbar sein).

   Nicht gemeint sind Elemente, die bereits durch Form, Fläche
   oder Position als Bedienelement erkennbar sind. Navigation und
   Buttons fallen unter die Ausnahme "erkennbar durch Kontext".
   ========================================================= */

/* Buttons */
a.et_pb_button,
a.et_pb_button:hover,
a.et_pb_button:focus,
.gsb-btn-primary,
.gsb-btn-primary:hover,
.gsb-btn-secondary,
.gsb-btn-secondary:hover,
a.gsb-btnlink,
a.gsb-btnlink:hover {
  text-decoration: none;
}

/* Hauptnavigation, mobiles Menü, Logo */
.et_pb_menu a,
.et-menu a,
#top-menu a,
.et_mobile_menu a,
.et_pb_menu__logo a,
.logo_container a {
  text-decoration: none;
}

/* Karten und Kacheln — ganze Fläche klickbar, Unterstreichung
   würde die Kartenstruktur zerschneiden */
.gsb-quicklink,
.gsb-quicklink:hover,
.gsb-card a,
.gsb-card a:hover,
.gsb-chip,
.gsb-chip:hover,
.gsb-tag,
.gsb-skiplink,
.gsb-skiplink:focus,
.gsb-termin a {
  text-decoration: none;
}

/* Fließtext-Links behalten die Unterstreichung ausdrücklich —
   auch innerhalb von Divi-Textmodulen. Nicht entfernen.

   ERGAENZT 09.09.2026 (SKA-316): Der Terminkalender wird als Shortcode
   in einem Divi-Textmodul ausgegeben. Seine Tage und Monatspfeile sind
   Bedienelemente, keine Fließtext-Links — Flaeche, Form und Position
   machen sie erkennbar (Ausnahme "erkennbar durch Kontext", siehe oben).
   Sie muessen HIER stehen: Diese Regel hat Spezifitaet 0-3-1 und schlaegt
   sonst jede Regel in Abschnitt 19. */
.et_pb_text a:not(.et_pb_button):not(.gsb-btnlink):not(.gsb-kalender__termin):not(.gsb-kalender__nav):not(.gsb-kalender__ics):not(.wp-block-file__button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =========================================================
   12. Beitrags-Einzelansicht  (GEKUERZT 28.08.2026)

   Nur noch das, was Divi nicht kann. Alles Uebrige — Sektions-
   und Zeilenabstaende, Spaltenbreiten, Typografie, Modulabstaende —
   wird in Divi als Preset gesetzt und ist hier bewusst geloescht.
   Grund: Was im Visual Builder sichtbar ist, laesst sich pflegen.
   ========================================================= */

/* --- Titelbild: ENTFERNT 28.08.2026 --------------------------------
   Die Klasse .gsb-post-hero gibt es nicht mehr. Rahmen, Eckenradius,
   Breite und Ausrichtung werden vollstaendig im Divi-Bildmodul gesetzt.

   Grund: Seit die Deckelung der Hoehe entfallen ist, braucht das
   Titelbild nichts mehr, was Divi nicht koennte. Zwei Quellen fuer
   denselben Wert erzeugen nur Konflikte — zuletzt 14px aus Divi gegen
   22px aus der CSS, wobei die CSS gewann.

   Werte im Bildmodul:
     Breite            100%
     Rahmen            3px, Global Color Orange
     Eckenradius       nach Wunsch (Design-Export: 22px)
     Ueberlauf         versteckt
     Ausrichtung       zentriert
   ------------------------------------------------------------------ */

/* --- Galerie im Beitragsinhalt -----------------------------------
   GEAENDERT 28.08.2026, zweite Runde.

   KEIN festes Seitenverhaeltnis mehr. Vorher stand hier 4:3 mit
   object-fit:cover — das hat Hochformate und Panoramen beschnitten.
   Entscheidung: kein Bildinhalt geht verloren, dafuer werden die
   Rasterzeilen unterschiedlich hoch. align-items:start verhindert,
   dass kurze Bilder auf die Hoehe des laengsten gezogen werden.

   Die Klasse steht doppelt (.has-nested-images.has-nested-images),
   das hebt die Spezifitaet ueber Divis Bildregeln, ohne !important. */
.wp-block-gallery.has-nested-images.has-nested-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  margin: var(--space-6) 0 var(--space-8);   /* 24px oben, 32px unten */
}
@media (min-width: 981px) {
  .wp-block-gallery.has-nested-images.has-nested-images {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}
.wp-block-gallery.has-nested-images.has-nested-images > figure {
  margin: 0;
  flex: none;
  width: auto !important;         /* Gutenberg setzt inline flex-basis */
  aspect-ratio: auto;             /* nimmt ein evtl. geerbtes 4:3 zurueck */
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;                 /* keine Luecke unter dem Bild */
}
.wp-block-gallery.has-nested-images.has-nested-images img {
  width: 100%;
  height: auto;                   /* natuerliche Proportion, kein Zuschnitt */
  max-width: none;
  object-fit: fill;               /* wirkungslos bei height:auto, aber
                                     ueberschreibt ein geerbtes cover */
  display: block;
  border-radius: 0;
}

/* Galeriebilder als Link zur Grossansicht.
   Der Link ist das Bedienelement — er braucht Cursor, Fokusring und
   einen sprechenden Namen (kommt aus aria-label, siehe Anleitung). */
.wp-block-gallery.has-nested-images.has-nested-images a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  border-radius: inherit;
  cursor: zoom-in;
}
.wp-block-gallery.has-nested-images.has-nested-images a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}
.wp-block-gallery.has-nested-images.has-nested-images figure:has(a:hover) img {
  transform: scale(1.03);
}
.wp-block-gallery.has-nested-images.has-nested-images img {
  transition: transform var(--duration-normal) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.has-nested-images.has-nested-images img { transition: none; }
  .wp-block-gallery.has-nested-images.has-nested-images figure:has(a:hover) img { transform: none; }
}

/* Der orange Rahmen bleibt dem Titelbild vorbehalten. Steht er auch
   an den Galeriebildern, markiert er nichts mehr. */


/* --- GELOESCHT, weil Divi es nativ kann -------------------------
   .gsb-subhead / .gsb-subhead-row  -> Sektion: Innenabstand 32/20/8,
                                       Zeile: Flex, Ausrichtung oben
   .gsb-post                        -> Sektion: Innenabstand 8/20/64,
                                       Zeile: max. Breite 760px
   .gsb-back                        -> Text-Modul: Atkinson 700, 15px,
                                       Farbe --color-primary
   .gsb-post-meta                   -> Zeile: Flex, Abstand 8px
   .gsb-post-body                   -> Modul: max. Breite 680px,
                                       Zeilenabstand 1.7, 17px
   .gsb-h1                          -> Ueberschriften-Preset H1:
                                       30px mobil / 48px Desktop,
                                       Zeilenhoehe 1.14, max. Breite 640px
                                       (Breakpoint 980 statt 820 —
                                        bewusste Abweichung vom Prototyp,
                                        160px Unterschied, dafuer kein CSS)
   ---------------------------------------------------------------- */


/* =========================================================
   13. Loop-Paginierung   ERGAENZT 28.08.2026

   Das Divi-Modul "Beitragsnavigation" gibt aus:
     div.et_pb_posts_nav > span.nav-previous|nav-next > a
                            > span.nav-label + span.meta-nav

   Der Prototyp zeigt an dieser Stelle einen zentrierten Pill-Button
   mit Ink-Rahmen. Divi floatet die beiden Spans standardmaessig nach
   links und rechts; ein Flex-Container am Elternteil hebt die Floats
   auf, ohne sie einzeln zurueckzusetzen.
   ========================================================= */

.et_pb_posts_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.et_pb_posts_nav .nav-previous { order: 1; }
.et_pb_posts_nav .nav-next     { order: 2; }

.et_pb_posts_nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
}
/* ACHTUNG, 29.08.2026: die beiden color-Angaben hier verlieren.
   Divi gibt fuer die Linkfarbe des Moduls eine eigene Regel mit
   !important aus (.et_pb_post_nav_0_tb_body …). Die Textfarbe wird
   deshalb IM MODUL gesetzt — Design -> Text -> Linkfarbe, normal und
   Hover. Die Angaben bleiben als Absicherung stehen, falls das Modul
   einmal ohne Farbwert neu angelegt wird.

   Hintergrund und Form gewinnen dagegen normal, dafuer gibt Divi
   nichts aus. */
.et_pb_posts_nav a:hover,
.et_pb_posts_nav a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.et_pb_posts_nav a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Pfeil: bei "Neuere Beitraege" gehoert er nach vorn. Divi liefert
   ihn immer als letztes Kind — row-reverse dreht nur die Anzeige,
   die Vorlesereihenfolge bleibt Text zuerst. */
.et_pb_posts_nav .nav-previous a { flex-direction: row-reverse; }
.et_pb_posts_nav .meta-nav { font-size: 1.15em; line-height: 1; }


/* =========================================================
   14. H1 auf Uebersicht und Kategorie-Archiv   ERGAENZT 29.08.2026

   Ein Theme-Builder-Template bedient beide Faelle. Die Ueberschrift
   muss sich unterscheiden: auf dem Blog-Index "Aktuelles", im Archiv
   der Kategoriename.

   Divis Anzeigebedingung "Kategorieseite" loest nur die eine Haelfte.
   Sie prueft zuerst is_category(); auf dem Blog-Index ist das falsch,
   also liefert auch die Variante "ist nicht" dort false. Getestet:
   das Modul erscheint in keinem der beiden Faelle.

   Aufteilung deshalb:
   - Archiv-H1  -> Divi-Bedingung "Kategorieseite ist". Serverseitig,
                   auf dem Index wird nichts gerendert.
   - Index-H1   -> ohne Bedingung, hier per Body-Klasse versteckt.
                   Dieselbe Mechanik wie beim aktiven Chip.

   display:none nimmt das Element auch aus dem Accessibility-Baum —
   im Archiv bleibt es bei genau einer H1. */

body.category .gsb-h1-index { display: none; }


/* =========================================================
   15. Quicklink-Kacheln als echte Links   ERGAENZT 29.08.2026

   Divis Funktion "Modul-Link" (Klasse et_clickable) macht die
   Kachel NUR mit der Maus bedienbar: kein <a>, kein href, kein
   tabindex, keine Rolle. Damit ist sie per Tastatur nicht
   erreichbar (WCAG 2.1.1) und wird Screenreadern nicht als Link
   angesagt (4.1.2). Fuer eine Seite unter BayBGG/BITV ist das
   kein Schoenheitsfehler, sondern ein Ausschluss.

   Loesung: im Blurb-Modul die URL setzen — Divi rendert dann
   einen echten <a href> um die Ueberschrift. Dieser Link wird
   hier ueber die ganze Kachel gespannt, damit die Flaeche
   klickbar bleibt, ohne dass ein zweites Bedienelement entsteht.

   Das ::after liegt ueber der Kachel; z-index 1 genuegt, weil in
   der Kachel nichts anderes gestapelt ist.
   ========================================================= */

.gsb-kachel { position: relative; }

.gsb-kachel .et_pb_module_header a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Der Fokusring gehoert um die ganze Kachel, nicht um die zwei
   Woerter der Ueberschrift — sonst zeigt die Tastaturbedienung
   auf etwas anderes als die Maus.

   KORRIGIERT 30.08.2026: :focus-within sprang auch beim Mausklick an.
   Ein Klick fokussiert den Link, und :focus-within kennt den Unterschied
   zwischen Maus und Tastatur nicht. :has(:focus-visible) uebernimmt die
   Heuristik des Browsers — sichtbar nur bei Tastaturbedienung. */
.gsb-kachel:has(.et_pb_module_header a:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
@supports not selector(:has(*)) {
  .gsb-kachel:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-md);
  }
}
.gsb-kachel .et_pb_module_header a:focus-visible { outline: none; }


/* =========================================================
   16. Fokus im Header   ERGAENZT 29.08.2026

   Gemessen: der Logo-Link ist 0x0 gross. Er steht auf
   display:inline und enthaelt nur ein Bild — ein Inline-Element
   um ein Block-Bild hat keine eigene Box, der Fokusrahmen aus
   Abschnitt 1 wird also um nichts gezeichnet. Zusaetzlich
   schneidet .et_pb_menu__logo mit overflow:hidden ab, was vom
   Rahmen uebrig bliebe.

   display:block gibt dem Link die Box des Bildes.
   overflow:visible laesst den Rahmen stehen. Am Layout aendert
   sich nichts: der Link umschliesst weiterhin genau das Logo. */

.et_pb_menu__logo { overflow: visible; }

.et_pb_menu__logo a,
.logo_container a {
  display: block;
  line-height: 0;          /* kein Zeilenabstand unter dem Bild */
}

/* Der Rahmen soll dem Logo folgen, nicht rechteckig darum
   liegen — 4px Radius reicht, das Logo ist selbst rund. */
.et_pb_menu__logo a:focus-visible,
.logo_container a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
  border-radius: 6px;
}


/* =========================================================
   17. Schritt-Liste   ERGAENZT 29.08.2026

   Fuer Ablaeufe, bei denen die Reihenfolge Bedeutung traegt —
   Krankmeldung "So funktioniert's", spaeter evtl. Anmeldung.

   Gebaut wird sie als echte <ol> im Text-Modul. Divis Editor
   erzeugt beim Klick auf "Nummerierte Liste" sauberes Markup;
   es braucht kein Code-Modul und die Redaktion kann es spaeter
   selbst pflegen.

   WICHTIG — list-style bleibt stehen: Safari entfernt die
   Listen-Semantik, sobald list-style:none gesetzt ist. Ein
   Screenreader dort sagt dann keine "Liste mit 4 Eintraegen"
   mehr an — also genau das, was wir mit der <ol> erreichen
   wollten. Die Nummern werden deshalb ueber ::marker gestaltet
   statt ersetzt. */

.gsb-schritte {
  padding-left: 1.6em;
  margin: 0 0 var(--space-6);
}

.gsb-schritte li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.gsb-schritte li::marker {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-blue-dark);
}


/* =========================================================
   18. Hero-Hintergrundvideo   ERGAENZT 31.08.2026

   Das Video selbst kommt aus Divi: Zeile → Hintergrund → Video,
   mit Bild als Hintergrund fuer Tablet und Handy. Zuschnitt,
   Schleife, Stummschaltung und das Fehlen jeder Steuerleiste
   macht Divi von sich aus. Hier steht nur der Pause-Schalter —
   den es in Divi nicht gibt, den WCAG 2.2.2 aber verlangt.

   Der Schalter wird von hero-video-pause.js erzeugt, nicht als
   Divi-Modul gesetzt: ein Modul koennte beim Umbauen geloescht
   werden, das Video liefe dann ohne Schalter weiter.
   ========================================================= */

.gsb-hero-video { position: relative; }

/* GEMESSEN 09.09.2026, korrigiert nach zweiter Messung.

   Divi schickt das Hintergrundvideo durch MediaElement.js. Zwischen
   dem Rahmen, der die Zeile ausfuellt, und dem <video> liegen vier
   weitere Ebenen:

     span.et-pb-background-video   2560x480  (Divi, korrekt)
     └ div.mejs-container          1920x1080
       └ div.mejs-inner
         └ div.mejs-mediaelement
           └ mediaelementwrapper   (display:inline!)
             └ video               1920x1080

   Eine Regel auf das <video> allein bringt nichts: dessen width:100%
   bezieht sich auf den 1920 px breiten MediaElement-Container, nicht
   auf die Zeile. Die ganze Kette muss die Zeile ausfuellen.

   !important ist noetig, weil Divis Skript nach jedem Resize
   width, height und einen negativen margin als Inline-Style setzt —
   auf den Container UND auf das Video. Gegengemessen: mit diesen
   Regeln bleibt es auch nach dem Resize bei 2560x480 an Position 0/0.

   Danach steuert allein object-position den Ausschnitt:
     50% 0%    oberer Bildrand sichtbar
     50% 50%   vertikal zentriert   ← eingestellt
     50% 100%  unterer Bildrand sichtbar
   Zwischenwerte gehen auch, z. B. 50% 35%. */

.gsb-hero-video .et-pb-background-video .mejs-container,
.gsb-hero-video .et-pb-background-video .mejs-inner,
.gsb-hero-video .et-pb-background-video .mejs-mediaelement,
.gsb-hero-video .et-pb-background-video mediaelementwrapper,
.gsb-hero-video .et-pb-background-video video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  display: block !important;
}

.gsb-hero-video .et-pb-background-video video {
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

.gsb-video-schalter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;

  /* 44 px ist die empfohlene Mindestgroesse fuer Bedienelemente —
     auch mit kalten Fingern am Schultor noch zu treffen. */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Deckende Flaeche statt Transparenz: was hinter dem Schalter
     liegt, wechselt mit jedem Frame. Nur so ist der Kontrast in
     jedem Moment gesichert.

     GEAENDERT 09.09.2026: Markenblau statt Schwarz, ohne Rahmen —
     der Schalter soll ein freundliches Bedienelement sein, kein
     Stoppschild. Blau auf Paper sind 5,0:1 (Grafik braucht 3,0). */
  background: var(--paper);
  color: var(--brand-blue-dark);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
}

/* WICHTIG: Das Skript blendet den Schalter mit dem hidden-Attribut aus,
   sobald Divi das Video ausblendet (Tablet und Handy zeigen dort ein
   Standbild). Die Browser-Grundregel fuer [hidden] ist display:none —
   die verliert aber gegen das display:inline-flex der Klasse oben.
   Ohne diese Zeile bliebe der Schalter ueber dem Standbild stehen. */
.gsb-video-schalter[hidden] { display: none; }

/* GEAENDERT 10.09.2026: Die Grenze liegt jetzt bei 767px statt 980px.
   Seit das Hero-Video auch auf Tablets laeuft, braucht es dort einen
   Pause-Schalter — WCAG 2.2.2 fragt nicht nach der Bildschirmbreite.

   Warum die Regel ueberhaupt bleibt: Sie ist nur der Guertel. Ob der
   Schalter erscheint, entscheidet das Skript an der tatsaechlichen
   Sichtbarkeit des Videos (getClientRects) — das stimmt auch dann noch,
   wenn Divi seine Haltepunkte aendert. Unterhalb von 768px zeigt der
   Hero das Standbild, dort waere ein Schalter ohne Video sinnlos. */
@media (max-width: 767px) {
  .gsb-video-schalter { display: none; }
}

.gsb-video-schalter svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.gsb-video-schalter:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

@media (hover: hover) {
  .gsb-video-schalter { transition: background-color 120ms ease, color 120ms ease; }
  .gsb-video-schalter:hover { background: var(--brand-blue-dark); color: var(--paper); }
}


/* =========================================================
   19. Terminkalender   ERGAENZT 09.09.2026, REPARIERT 09.09. (SKA-316)
   ========================================================= */
/* Markup kommt aus dem Plugin ([gsb_terminkalender]); saemtliche
   Regeln leben hier, das Plugin liefert bewusst kein CSS aus.

   Farben: exakt die Zuordnung der Datumsboxen aus Abschnitt 6 —
   Datumsbox, Pille und Kalenderfeld duerfen sich nie widersprechen.
   Pink und Orange gehoeren den Beitragskategorien in Abschnitt 3.

   Viele Selektoren tragen .gsb-kalender als Vorsatz: Divi bringt
   eigene a- und td-Regeln mit (u. a. padding 6px 24px und
   Unterstreichungen), die sonst gewinnen.

   Kontraste gerechnet, nicht geschaetzt:
   - Wochenende --color-text-muted (#55524C) auf Weiss: 7,78:1
   - --ink auf tint-green/blue/yellow und neutral-200: 13,5:1 bis 15,4:1
   - Heute-Rahmen --ink auf Weiss: 16,6:1 */

/* Divi-Flexlayout laesst ein Modul, das nur eine 100%-Tabelle
   enthaelt, auf Minimalbreite zusammenfallen (gemessen: 0px —
   sichtbar blieb nur Divis Zell-Padding). Das Modul muss die
   Spaltenbreite ausfuellen, erst dann traegt width:100% darunter. */
.et_pb_module:has(.gsb-kalender) {
  width: 100%;
  min-width: 0;
}

.gsb-kalender { width: 100%; }

/* Der Abo-Knopf steht UNTER dem Kalender (seit 09.09.2026): Erst sieht
   man die Termine, dann das Angebot, sie mitzunehmen.
   Seit 10.09. mit Erklaerzeile darunter — "abonnieren" heisst fuer viele
   dasselbe wie "herunterladen", und der Unterschied ist genau der Punkt. */
.gsb-kalender__abo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

/* Zugeklappte Hilfe unter dem Knopf. Der Kalender wandert beim Blaettern
   mit; drei Zeilen Erklaerung staenden dabei dauerhaft im Weg. Ein Wort
   reicht — wer es braucht, klappt auf. */
.gsb-kalender__abo-hilfe {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.gsb-kalender__abo-hilfe > summary {
  cursor: pointer;
  text-align: right;
  list-style-position: inside;
}

.gsb-kalender__abo-hilfe > summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Aufgeklappt liest sich der Text linksbuendig besser — rechtsbuendiger
   Fliesstext ist muehsam, weil jede Zeile woanders beginnt. */
.gsb-kalender__abo-hilfe > p {
  margin: var(--space-2) 0 0;
  text-align: left;
}

.gsb-kalender__abo-hilfe code {
  font-size: .9em;
  overflow-wrap: anywhere;   /* lange Adresse sprengt sonst die Spalte */
  background: var(--color-surface-sunken);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .gsb-kalender__abo {
    align-items: stretch;
  }

  .gsb-kalender__abo-hilfe {
    max-width: none;
  }

  .gsb-kalender__abo-hilfe > summary {
    text-align: left;
  }

  .gsb-kalender__abo .gsb-btn-secondary {
    text-align: center;
  }
}

/* Der ICS-Knopf braucht keine eigene Farbe mehr: Seit Abschnitt 0
   --color-primary korrigiert, traegt .gsb-btn-secondary von sich aus
   den dunklen Ton. Am 09.09. stand hier eine Einzelkorrektur — sie ist
   mit der Korrektur an der Wurzel entfallen. */

.gsb-kalender__karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.gsb-kalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.gsb-kalender__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  /* Ankerziel der Monatsnavigation: nicht unter dem Header landen. */
  scroll-margin-top: 120px;
}

/* Pfeile: rund, ohne Unterstreichung, mit Hover-Flaeche.
   .gsb-kalender-Vorsatz schlaegt Divis Link-Regeln. */
.gsb-kalender a.gsb-kalender__nav,
.gsb-kalender .gsb-kalender__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.gsb-kalender a.gsb-kalender__nav:hover,
.gsb-kalender a.gsb-kalender__nav:focus-visible {
  background: var(--neutral-200);
  text-decoration: none;
}

.gsb-kalender .gsb-kalender__nav--inaktiv { opacity: .35; }

.gsb-kalender .gsb-kalender__raster {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border: 0;
  border-collapse: separate;
  border-spacing: 3px;
}

/* Divis Tabellenstile (Padding, Rahmen) abraeumen — die Zellen
   gestalten sich selbst. */
.gsb-kalender .gsb-kalender__raster th,
.gsb-kalender .gsb-kalender__raster td {
  border: 0;
  white-space: nowrap; /* "21" bricht nie um, "Mo" auch nicht */
}

.gsb-kalender .gsb-kalender__raster th {
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}

/* Anforderung: Wochenenden in --color-text-muted, nicht --neutral-300 —
   die Zahl muss lesbar bleiben (7,78:1), nur zuruecktreten. */
.gsb-kalender .gsb-kalender__raster th.gsb-kalender__wochenende,
.gsb-kalender .gsb-kalender__raster td.gsb-kalender__wochenende {
  color: var(--color-text-muted);
}

.gsb-kalender .gsb-kalender__raster td.gsb-kalender__tag {
  height: 44px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Termin-Tage sind Links und fuellen die GANZE Zelle — klickbar ist
   die Flaeche, nicht die Zahl. Keine Unterstreichung, auch nicht im
   Hover: dort antwortet die Flaeche mit einer Abdunklung, die auf
   jeder Toennung funktioniert, ohne den Heute-Rahmen (box-shadow)
   zu ueberschreiben. */
.gsb-kalender a.gsb-kalender__termin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Aktiv: Nach dem Klick auf ein Datum traegt JEDER Tag desselben
   Termins diese Flaeche (termine.js setzt die Klasse) — mehrtaegige
   Ferien leuchten also komplett, wie im Entwurf der 18. November. */
.gsb-kalender a.gsb-kalender__termin:hover,
.gsb-kalender a.gsb-kalender__termin:focus-visible,
.gsb-kalender a.gsb-kalender__termin--aktiv {
  text-decoration: none;
  background-image: linear-gradient(rgba(32, 30, 27, .08), rgba(32, 30, 27, .08));
}

/* Toennungen — die Modifikatoren gelten auch fuer die Legendenpunkte.
   Dieselbe Zuordnung wie die Datumsboxen in Abschnitt 6.
   "schulfrei" liegt auf Vorrat auf Blau: Die Kategorie existiert noch
   nicht — legt die Redaktion sie an, faerbt sie wie Feiertage (beides
   heisst unterrichtsfrei), das Textlabel unterscheidet. */
.gsb-kalender__termin--ferien              { background-color: var(--tint-green);  }
.gsb-kalender__termin--feiertage           { background-color: var(--tint-blue);   }
.gsb-kalender__termin--schulfrei           { background-color: var(--tint-blue);   }
.gsb-kalender__termin--besonderheiten      { background-color: var(--tint-yellow); }
.gsb-kalender__termin--infoveranstaltungen { background-color: var(--neutral-200); }
.gsb-kalender__termin--weitere             { background-color: var(--neutral-200); }

/* Heute: Rahmen auf Zelle UND Link, damit der Ring auch ueber einer
   Toennung sichtbar bleibt. */
.gsb-kalender .gsb-kalender__tag--heute,
.gsb-kalender .gsb-kalender__tag--heute .gsb-kalender__termin {
  box-shadow: inset 0 0 0 2px var(--ink);
  border-radius: var(--radius-sm);
}

.gsb-kalender .gsb-kalender__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.gsb-kalender .gsb-kalender__legende-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.gsb-kalender .gsb-kalender__punkt {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.gsb-kalender .gsb-kalender__tipp,
.gsb-kalender .gsb-kalender__leer {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Gegenstueck in der Terminliste ------------------------- */

/* Ankerziel: nicht unter Header/Vorleseleiste landen. */
.gsb-termin[id] { scroll-margin-top: 120px; }

/* Der Sprung aus dem Kalender setzt den Fokus auf den Eintrag
   (tabindex="-1"), damit Tastatur und Bildschirmleser dort
   weitermachen. Bei Mausklick bleibt der Ring aus, bei Tastatur
   zeigt ihn :focus-visible — die Auszeichnung traegt ohnehin
   :target darunter. */
.gsb-termin[tabindex]:focus { outline: none; }

.gsb-termin[tabindex]:focus-visible {
  outline: 3px solid var(--brand-blue-dark);
  outline-offset: 4px;
}

/* Ersthervorhebung rein per CSS (:target, ohne JS); die Klasse
   setzt termine.js zusaetzlich beim WIEDERHOLTEN Klick, weil
   :target nur beim Fragmentwechsel feuert. */
.gsb-termin:target,
.gsb-termin--markiert {
  outline: 3px solid var(--brand-blue-dark);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
  .gsb-termin--markiert { animation: gsb-termin-blitz .9s ease 1; }

  @keyframes gsb-termin-blitz {
    50% { background-color: var(--tint-blue); }
  }
}

@media (max-width: 480px) {
  .gsb-kalender__karte { padding: var(--space-3); }
  .gsb-kalender .gsb-kalender__raster td.gsb-kalender__tag { height: 40px; }
}


/* =========================================================
   20. Termin-Einzelseite   ERGAENZT 09.09.2026 (SKA-316)

   Die Einzelansicht eines Termins liefert The Events Calendar aus
   eigenen Templates, nicht aus Divi — deshalb greift hier weder ein
   Divi-Preset noch der Theme Builder. TEC bringt zwei eigene
   Stylesheets mit (tribe-events-style-full, -theme), die Schrift,
   Farbe und Abstaende selbst setzen.

   Am Livesystem gemessen, was TEC durchsetzt:
     Titel          Helvetica Neue 42px, #141827
     Fliesstext     Helvetica Neue 17px, #141827
     Meta-Block     Helvetica Neue 14px, #141827
     Abo-Knopf      TEC-Blau #334AFF, 4px Radius
   Nichts davon gehoert zur Website — dieser Abschnitt holt die Seite
   in die Hausschrift, die Hausfarben und den Haus-Rhythmus zurueck.

   Ein durchgaengiger .tribe-events-single-Vorsatz haelt die Regeln
   auf dieser Seite und hebt die Spezifitaet ueber TECs eigene.
   ========================================================= */

/* Spaltenbreite wie im uebrigen Inhalt. TECs Template setzt eigene
   Aussenabstaende; sie werden hier ersetzt statt ergaenzt. */
/* GEMESSEN 10.09.2026 bei 1280px am Beitrag /web-coaching-fuer-eltern/:
   Dessen Kopfzeile laeuft von 56 bis 1224 — also 1200px Rahmen mit 16px
   Innenabstand. Genau diese 16px stehen hier, damit die Vorleseleiste
   auf der Terminseite auf demselben Pixel endet wie ueberall sonst.
   Frueher standen hier 20px (--space-5); der Unterschied war die
   sichtbare Abweichung. */
#tribe-events-pg-template {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-10) 16px var(--space-16);
}

/* GEMESSEN 09.09.2026 am Beitrag /web-coaching-fuer-eltern/: Der Inhalt
   steht dort in einer 760px breiten, mittigen Zeile. Ohne diese Regel
   klebte der Termin-Inhalt links am 1200px-Wrapper. Die Breite gilt
   fuer den ganzen Block, damit Titel, Bild, Text und Detail-Karte
   dieselbe Kante haben — genau wie im Beitrag. */
.tribe-events-single {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* --- Grundschrift zurueckholen ------------------------------- */
/* TEC setzt seine Schrift auf dem Wrapper und vererbt sie nach unten.
   Eine Regel auf den Wrapper reicht deshalb fuer den Fliesstext; die
   Ueberschriften bekommen unten ihre eigene. */
.tribe-events-single,
.tribe-events-single p,
.tribe-events-single li,
.tribe-events-single .tribe-events-content {
  font-family: var(--font-body);
  color: var(--color-text);
}

.tribe-events-single .tribe-events-content {
  font-size: var(--text-base);
  line-height: 1.7;
}

/* --- Zurueck-Link ("Alle Veranstaltungen") -------------------- */
/* Fuehrt seit SKA-316 auf /termine/ (Umleitung im Plugin). Optik wie
   der Zurueck-Link der Beitrags-Einzelansicht: Atkinson 700, 15px. */
.tribe-events-single .tribe-events-back {
  margin: 0 0 var(--space-6);
}

.tribe-events-single .tribe-events-back a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-primary);   /* dunkelblau seit Abschnitt 0 */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Titelzeile: Ueberschrift und Vorleseleiste ---------------- */
/* Die Leiste soll auf JEDER Unterseite an derselben Stelle stehen —
   oben rechts neben der H1. Auf Terminseiten liegen beide von Haus aus
   in verschiedenen Aesten des Dokuments; das Plugin stellt sie deshalb
   per JavaScript in diese gemeinsame Zeile (gsb-titelzeile).

   flex-start statt center: Die Leiste haengt an der ersten Zeile der
   Ueberschrift, nicht in deren Mitte — sonst wandert sie bei zwei- oder
   dreizeiligen Titeln nach unten und steht anders als auf den uebrigen
   Seiten. */
.gsb-titelzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

/* Die Leiste sitzt in einem eigenen Kasten — zusammen mit ihren beiden
   unsichtbaren Hilfselementen fuer das Mitwandern beim Scrollen. Sonst
   haette die Zeile vier Elemente statt zwei, und der Abstand zwischen
   ihnen schoebe die Ueberschrift nach rechts. */
.gsb-titelzeile__leiste {
  flex: 0 0 auto;      /* die Leiste behaelt ihre Breite */
}

/* min-width:0 laesst die Ueberschrift schrumpfen, statt die Leiste aus
   dem Rahmen zu schieben — hier zulaessig, weil diese Zeile vom Plugin
   gebaut wird und nicht in Divi konfiguriert ist. */
.gsb-titelzeile .tribe-events-single-event-title {
  min-width: 0;
  margin-bottom: 0;    /* den Abstand traegt die Zeile */
}

/* --- Titel ---------------------------------------------------- */
/* Ueber den Seitenrahmen adressiert, nicht ueber .tribe-events-single:
   Die Ueberschrift steht seit dem 10.09. in der Kopfzeile eine Ebene
   darueber (siehe titelzeileBilden im Plugin). */
#tribe-events-pg-template .tribe-events-single-event-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 5vw, var(--text-3xl));
  line-height: 1.14;
  color: var(--ink);
  max-width: 20ch;
  margin: 0 0 var(--space-3);
}

/* --- Datum und Uhrzeit unter dem Titel ------------------------ */
.tribe-events-single .tribe-events-schedule {
  margin: 0 0 var(--space-8);
  padding: 0;
  background: none;
  border: 0;
}

.tribe-events-single .tribe-events-schedule h2,
.tribe-events-single .tribe-events-schedule > div {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0;
}

/* --- Beitragsbild --------------------------------------------- */
/* Breite und Radius wie im Beitrag gemessen (600px, 14px). Der orange
   Rahmen bleibt ausdruecklich: Er ist gewuenscht und setzt das Bild vom
   Papierton ab. HINWEIS 09.09.2026: Das Titelbild im Beitrag
   /web-coaching-fuer-eltern/ traegt aktuell KEINEN Rahmen — wenn beide
   gleich aussehen sollen, gehoert er dort ins Divi-Bildmodul. */
.tribe-events-single .tribe-events-event-image {
  margin: 0 0 var(--space-8);
}

.tribe-events-single .tribe-events-event-image img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border: 3px solid var(--brand-orange);
  border-radius: 14px;
}

/* --- Fliesstext ----------------------------------------------- */
.tribe-events-single .tribe-events-single-event-description {
  max-width: var(--container-narrow);
  margin: 0 0 var(--space-10);
}

.tribe-events-single .tribe-events-single-event-description p {
  margin: 0 0 var(--space-5);
}

.tribe-events-single .tribe-events-single-event-description a {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Abo-Knopf ("Zum Kalender hinzufuegen") -------------------- */
/* TEC liefert ihn in seinem eigenen Blau mit 4px-Radius. Hier wird er
   zum Sekundaer-Knopf des Hauses. Der Aufklapp-Inhalt bleibt TECs
   Bedienlogik ueberlassen, nur die Optik wird angeglichen. */
.tribe-events-single .tribe-events-c-subscribe-dropdown {
  margin: 0 0 var(--space-10);
}

.tribe-events-single .tribe-events-c-subscribe-dropdown__button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--color-surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
}

.tribe-events-single .tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-single .tribe-events-c-subscribe-dropdown__button:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* Die Pfeil- und Kalendersymbole sind SVG mit eigener Fuellfarbe —
   currentColor laesst sie die Knopffarbe uebernehmen, auch im Hover. */
.tribe-events-single .tribe-events-c-subscribe-dropdown__button svg,
.tribe-events-single .tribe-events-c-subscribe-dropdown__button .tribe-common-c-svgicon__svg-fill {
  fill: currentColor;
}

.tribe-events-single .tribe-events-c-subscribe-dropdown__list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
  padding: var(--space-2);
}

.tribe-events-single .tribe-events-c-subscribe-dropdown__list-item-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.tribe-events-single .tribe-events-c-subscribe-dropdown__list-item-link:hover {
  background: var(--tint-blue);
}

/* --- Detail-Block --------------------------------------------- */
/* TEC gibt "Details" als schmale Spalte aus. Als Karte gelesen wird
   daraus ein abgesetzter Block — dieselbe Sprache wie .gsb-card. */
.tribe-events-single .tribe-events-event-meta {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin: 0 0 var(--space-8);

  /* Volle Lesebreite statt TECs schmaler Spalte: In 242px brach
     "Veranstaltungskategorie:" mitten im Wort um. */
  display: block;
  width: 100%;
  max-width: var(--container-narrow);
  box-sizing: border-box;
}

/* TEC zeichnet ueber ::before und ::after je eine Trennlinie in den
   Abschnitt. Zusammen mit dem Kartenrahmen liefen dadurch zwei
   Striche quer durch den Block. */
.tribe-events-single .tribe-events-single-section::before,
.tribe-events-single .tribe-events-single-section::after {
  border: 0;
  background: none;
  height: 0;
}

/* Die Spalten von TEC (primary/secondary) nebeneinander, solange Platz
   ist — in der Karte, nicht als eigene Kaesten. */
.tribe-events-single .tribe-events-meta-group {
  float: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.tribe-events-single .tribe-events-single-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.tribe-events-single .tribe-events-meta-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bezeichnung ueber dem Wert, nicht daneben: Bei "Veranstaltungs-
   kategorie" bricht die Bezeichnung sonst in der schmalen Spalte um. */
.tribe-events-single .tribe-events-meta-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 2px;

  /* TEC setzt word-break: break-word — dadurch brach
     "Veranstaltungskategorie:" mitten im Wort. Deutsche Komposita
     werden nicht zerhackt; reicht der Platz nicht, wird an den
     manuellen Trennstellen getrennt. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.tribe-events-single .tribe-events-meta-value {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.tribe-events-single .tribe-events-meta-value:last-child {
  margin-bottom: 0;
}

.tribe-events-single .tribe-events-meta-value a {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Voriger / naechster Termin -------------------------------- */
/* Dieselben Pillen wie die Loop-Paginierung in Abschnitt 13, damit
   Beitraege und Termine sich gleich anfuehlen. TEC gibt die beiden
   Eintraege als Listenpunkte mit Float aus; Flex hebt die Floats auf. */
.tribe-events-single .tribe-events-sub-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.tribe-events-single .tribe-events-sub-nav li {
  float: none;
  width: auto;
  margin: 0;
}

/* Die Listenklassen muessen mit in den Selektor: TEC faerbt die Links
   ueber '.tribe-events-sub-nav .tribe-events-nav-next a' (0-3-1) und
   schlaegt damit jede kuerzere Regel. Ohne sie blieb der Text im Hover
   dunkel auf dunklem Grund — unlesbar. */
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
}

.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:hover,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:focus-visible,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:hover,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:focus-visible,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Die obere Navigation ist eine Wiederholung der unteren und steht
   zwischen Datum und Inhalt im Weg. Unten bleibt sie erhalten. */
.tribe-events-single > div:first-of-type .tribe-events-nav-pagination {
  display: none;
}

/* --- Kategorie-Zeile unter dem Inhalt -------------------------- */
.tribe-events-single .tribe-events-event-categories {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tribe-events-single .tribe-events-event-categories a {
  color: var(--brand-blue-dark);
}

/* --- Schmale Schirme ------------------------------------------ */
@media (max-width: 640px) {
  #tribe-events-pg-template {
    padding: var(--space-6) var(--space-4) var(--space-12);
  }

  .tribe-events-single .tribe-events-event-meta {
    padding: var(--space-5);
  }

  .tribe-events-single .tribe-events-sub-nav a {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   21. Linkkarte   ERGAENZT 09.09.2026

   HINWEIS zur Nummer: Der gelieferte Block war als "Abschnitt 20"
   ueberschrieben — die 20 ist seit dem 09.09. die Termin-Einzelseite.
   Inhalt unveraendert uebernommen, nur neu nummeriert.

   Ganze Karte klickbar bei nur einem Tab-Stopp.
   Divi kann das nicht nativ: der Modul-Link (et_clickable) rendert
   kein <a> und verletzt damit WCAG 2.1.1 und 4.1.2. Der echte Link
   sitzt in der Ueberschrift, das ::after zieht seine Klickflaeche auf
   die ganze Karte.

   Verallgemeinert dasselbe Muster, das Abschnitt 6 fuer .gsb-termin
   und Abschnitt 2 fuer .gsb-card bereits einzeln loesen. Neue Karten
   brauchen damit nur noch die Klasse .gsb-linkkarte.
   ========================================================= */

.gsb-linkkarte { position: relative; }

/* Divi setzt position:relative auf <a>, Spalten und Module —
   damit waere der Bezugsrahmen des ::after der Link selbst.

   ERGAENZT gegenueber der Vorlage: .et_pb_row. Sitzt der Link in einer
   verschachtelten Zeile — bei den Terminkarten der Regelfall —, waere
   sonst die Zeile der Bezugsrahmen und die Klickflaeche endete an
   deren Kante statt an der Karte. Abschnitt 6 fuehrt die Zeile aus
   demselben Grund mit. Wenn die Karte nie eine innere Zeile enthaelt,
   kann die Zeile hier ersatzlos weg. */
.gsb-linkkarte a,
.gsb-linkkarte .et_pb_row,
.gsb-linkkarte .et_pb_column,
.gsb-linkkarte .et_pb_module { position: static; }

.gsb-linkkarte a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.gsb-linkkarte:has(a:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* Rueckfall fuer Browser ohne :has(). :focus-within reagiert auch auf
   den Mausklick (siehe Abschnitt 2, korrigiert am 30.08.) — als
   Rueckfall ist das hinnehmbar, im Regelfall greift :has(). */
@supports not selector(:has(*)) {
  .gsb-linkkarte:focus-within {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-md);
  }
}

.gsb-linkkarte a:focus-visible { outline: none; }


/* =========================================================
   22. Datei-Block (PDF-Downloads in Beitraegen)
   =========================================================

   Der Block kommt aus dem WordPress-Editor (wp-block-file) und bringt
   von Haus aus einen schwarzen, eckigen Knopf mit — die einzige Stelle
   auf der Website, an der noch Gutenbergs Grundgestaltung durchschlaegt.

   Hier wird daraus eine Zeile im Stil des Hauses: Karte mit weicher
   Kante, davor ein Dokumentsymbol, dahinter der Knopf in derselben
   Pillenform wie ueberall sonst.

   Zwei Verweise, zwei Aufgaben: Der erste oeffnet die Datei zum Lesen,
   der zweite laedt sie herunter. Beide bleiben als getrennte
   Bedienelemente erhalten — das Zusammenlegen wuerde eine Wahl
   wegnehmen, die manche brauchen. */

.wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Der Lese-Verweis. flex:1 mit min-width:0 laesst lange Dateinamen
   umbrechen, statt den Knopf aus der Karte zu schieben. */
.wp-block-file > a:not(.wp-block-file__button) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 12rem;
  min-width: 0;

  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Dokumentsymbol als Maske, nicht als Bild: So nimmt es die Textfarbe
   an und stimmt auch im Hover- und Fokuszustand. Als Data-URI im
   Stylesheet — die Website bleibt frei von externen Requests. */
.wp-block-file > a:not(.wp-block-file__button)::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--gsb-symbol-datei) center / contain no-repeat;
  mask: var(--gsb-symbol-datei) center / contain no-repeat;
}

:root {
  --gsb-symbol-datei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Zm0 2.5L16.5 7H14V4.5ZM8 12h8v1.6H8V12Zm0 3.6h8v1.6H8v-1.6Z'/%3E%3C/svg%3E");
}

/* Der Knopf — dieselbe Form wie .gsb-btn-secondary. Bewusst
   ausgeschrieben statt die Klasse im Editor zu verlangen: Wer einen
   PDF-Block einfuegt, soll sich um nichts kuemmern muessen. */
.wp-block-file .wp-block-file__button {
  display: inline-block;
  flex: 0 0 auto;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.2;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  margin: 0;
  text-decoration: none;
  opacity: 1;              /* Gutenberg blendet den Knopf beim Hover ab */
}

.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  opacity: 1;
}

/* Handy: Knopf auf ganze Breite, sonst steht er als schmaler Rest
   allein in der zweiten Zeile. */
@media (max-width: 480px) {
  .wp-block-file .wp-block-file__button {
    width: 100%;
    text-align: center;
  }
}


/* =========================================================
   23. Tabelle (Kollegium, Sprechstunden)
   =========================================================

   Eine echte <table>, keine Divi-Zeilen. Der Unterschied ist nicht
   optisch: Divi-Zeilen sind div-Container, fuer einen Screenreader also
   lose Textblöcke — „1a", „Marika Oberbauer, StRin", „Di. 11:15 bis
   12:00 Uhr", ohne jeden Bezug zur Spaltenueberschrift. Mit th und
   scope wird die Zuordnung bei jeder Zelle mitgesprochen (WCAG 1.3.1).

   Die Ueberschrift der Tabelle steht als <caption> im Element selbst,
   nicht als loser Absatz davor — damit gehoert sie technisch dazu.

   Mobil bleibt es eine Tabelle. Die verbreitete Kartenansicht
   (display:block auf tr und td) sieht besser aus, nimmt der Tabelle
   aber in Safari genau die Semantik, wegen der sie hier steht. Statt
   dessen: schmalere Abstaende, kleinere Schrift, und die Zeitspalte
   darf umbrechen. Drei kurze Spalten passen damit auch auf 360px.

   WARUM DER KLASSENNAME DOPPELT STEHT

   Divi bringt eigene Tabellenregeln mit, die am Livesystem gewonnen
   haben (10.09.2026 im CSSOM nachgesehen):

     .entry-content table:not(.variations)   border 1px #eee, margin
     .entry-content tr td                    border-top, padding 6px 24px

   Beide haben Spezifitaet 0-1-2, ein einfaches .gsb-tabelle td nur
   0-1-1 — deshalb blieben Innenabstand und Rahmen von Divi stehen.
   Der doppelte Klassenname hebt jede Regel hier auf 0-2-x und macht
   die Reihenfolge der Stylesheets gleichgueltig. Dasselbe Mittel wie
   :root:root in Abschnitt 0, aus demselben Grund: kein !important,
   das sich spaeter nicht mehr ueberschreiben liesse.
   ========================================================= */

/* Dreifach, nicht doppelt: Divis Regel fuer die Tabelle selbst lautet
   .entry-content table:not(.variations) — das :not zaehlt als Klasse,
   macht 0-2-1 und schlaegt damit auch den doppelten Klassennamen. */
.gsb-tabelle.gsb-tabelle.gsb-tabelle {
  width: 100%;
  border-collapse: collapse;
  border: 0;                 /* Divis 1px-Rahmen um die ganze Tabelle */
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
}

.gsb-tabelle.gsb-tabelle caption {
  caption-side: top;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-bottom: var(--space-4);
}

.gsb-tabelle.gsb-tabelle th,
.gsb-tabelle.gsb-tabelle td {
  text-align: left;
  vertical-align: baseline;
  padding: 14px 16px;
  border: 0;                 /* Divi setzt border-top auf jede Zelle */
}

/* Erste Spalte buendig mit dem uebrigen Text, letzte buendig rechts. */
.gsb-tabelle.gsb-tabelle th:first-child,
.gsb-tabelle.gsb-tabelle td:first-child {
  padding-left: 0;
}

.gsb-tabelle.gsb-tabelle th:last-child,
.gsb-tabelle.gsb-tabelle td:last-child {
  padding-right: 0;
}

/* Der Name traegt die Zeile — im Entwurf fett, die Uhrzeit daneben nicht.
   td:first-of-type ist die zweite Zelle: Die erste ist ein th. */
.gsb-tabelle.gsb-tabelle tbody td:first-of-type {
  font-weight: 700;
}

/* Abkuerzungen: Der Browser malt von sich aus eine gepunktete Linie
   darunter. Im Entwurf gibt es die nicht, und die Aufloesungen stehen
   ohnehin im Hinweis unter der Tabelle. */
.gsb-tabelle.gsb-tabelle abbr {
  text-decoration: none;
  border-bottom: 0;
}

/* Kopfzeile: kleiner und ruhiger als der Inhalt, mit klarer Kante. */
.gsb-tabelle.gsb-tabelle thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

/* Klasse und Kuerzel: die Sprungmarke der Zeile, deshalb hervorgehoben.
   Farbe UND Fettung — die Farbe allein waere kein Unterschied fuer
   Menschen, die sie nicht sehen (WCAG 1.4.1). */
.gsb-tabelle.gsb-tabelle tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.gsb-tabelle.gsb-tabelle tbody tr + tr {
  border-top: 1px solid var(--color-border);
}

/* Zebrastreifen als Lesehilfe ueber die Zeile hinweg. Sehr zurueckhaltend:
   Der Streifen darf den Text nicht schlechter lesbar machen. */
.gsb-tabelle.gsb-tabelle tbody tr:nth-child(even) {
  background: var(--color-surface-sunken);
}

/* Der Hinweis unter der Tabelle. */
.gsb-tabelle__hinweis {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Waehrend die Zeile vorgelesen wird, liegt die Markierung auf dem tr.
   Ein Hintergrund wuerde mit dem Zebrastreifen ringen, deshalb der
   Balken links und ein eigener Ton — beides ohne Layoutwirkung. */
.gsb-tabelle.gsb-tabelle tbody tr.gsb-vorlesen-aktiv {
  background: var(--tint-orange, #FCEDD9);
  box-shadow: inset 3px 0 0 0 var(--gsb-vorlesen-akzent, #C4761A);
}

@media (max-width: 600px) {
  .gsb-tabelle.gsb-tabelle {
    font-size: var(--text-sm);
  }

  .gsb-tabelle.gsb-tabelle th,
  .gsb-tabelle.gsb-tabelle td {
    padding: 12px 8px;
  }

  .gsb-tabelle.gsb-tabelle th:first-child,
  .gsb-tabelle.gsb-tabelle td:first-child {
    padding-left: 0;
  }

  .gsb-tabelle.gsb-tabelle th:last-child,
  .gsb-tabelle.gsb-tabelle td:last-child {
    padding-right: 0;
  }

  /* Die Zeitangabe darf umbrechen ("Di." / "11:15 bis 12:00 Uhr"),
     die Klasse nie. */
  .gsb-tabelle.gsb-tabelle td:last-child {
    white-space: normal;
  }
}

/* Sehr schmale Geraete (iPhone SE, 320px). GEMESSEN 10.09.2026: Mit den
   Werten oben braucht die Tabelle dort 305px und laeuft aus der Spalte;
   mit diesen passt sie in 288px. Hier darf auch die Klassenspalte
   umbrechen — "kath. Rel." ist zweiteilig und vertraegt das. */
@media (max-width: 380px) {
  .gsb-tabelle.gsb-tabelle th,
  .gsb-tabelle.gsb-tabelle td {
    padding: 12px 6px;
  }

  .gsb-tabelle.gsb-tabelle tbody th {
    white-space: normal;
  }

  .gsb-tabelle.gsb-tabelle td {
    overflow-wrap: break-word;
  }
}


/* =========================================================
   24. Mobiles Menue — Trefferflaeche und Fokus (SKA-260)
   =========================================================

   Divis Umschalter ist ein 32x32px grosser <span> ohne Zeigerhand.
   32px sind zu klein: Eine Fingerkuppe trifft im Mittel 45 bis 57px
   breit, und wer die Hand nicht ruhig haelt, trifft daneben.

   Vergroessert wird die FLAECHE, nicht das Symbol — ueber ein
   ::after, das ueber dem Schalter liegt. Divi nutzt ::before fuer das
   Icon selbst (Zeichensatz ETmodules), ::after ist frei. So bleibt
   das Symbol optisch, wo es ist, und nichts im Header verschiebt sich.

   Den Rest — Tastaturbedienung, Name, aria-expanded, Escape — macht
   mobilmenue-a11y.js; per CSS ist das nicht zu haben. */

.mobile_menu_bar {
  cursor: pointer;
}

.mobile_menu_bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Der Fokusrahmen gehoert um die sichtbare Trefferflaeche, nicht um
   den 32px-Kasten — sonst sieht man ihn kaum. */
.mobile_menu_bar:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Der erste Eintrag im geoeffneten Menue bekommt beim Sprung dorthin
   einen sichtbaren Rahmen — ohne ihn waere nicht zu erkennen, wo man
   gelandet ist. */
.et_mobile_menu a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: -3px;
}