/*
 * MSG Nord — Layout und Komponenten
 * ----------------------------------------------------------------------------
 * Farben kommen ausschliesslich aus tokens.css. Hier stehen keine Hex-Werte,
 * damit ein Palettenwechsel wirklich alles erfasst.
 */

/* ===========================================================================
   Grundlagen
   =========================================================================== */

.msg-schmal { max-width: 68ch; }

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung (WCAG 2.4.1) */
.msg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--msg-primaer);
  color: #fff;
  font-weight: 600;
}
.msg-skip:focus { left: 0; }

/* ===========================================================================
   Kopfbereich — ein durchgehendes dunkles Band
   ---------------------------------------------------------------------------
   Vorher lag zwischen Servicezeile und Hero ein weisser Streifen, obwohl
   beide dieselbe Dunkelfarbe tragen. Der Kopf wirkte dadurch wie ein
   Fremdkoerper. Jetzt ist er Teil des Bandes und geht auf der Startseite
   nahtlos in den Hero ueber.
   =========================================================================== */

.msg-kopfbereich {
  background: var(--msg-dunkel);
  color: var(--msg-auf-dunkel);
}

/* WordPress setzt zwischen den obersten Blöcken einen Standardabstand.
   Zwischen Kopfband und Hero blitzte dadurch ein 20 px breiter weisser
   Spalt durch — genau die Kante, die den Kopf abgetrennt wirken liess. */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
.msg-kopfbereich > * { margin-block-start: 0; }

/* Auf Unterseiten schliesst das Band mit der Leuchtfarbe ab. Auf der
   Startseite uebernimmt das der Hero, sonst gaebe es zwei Linien. */
body:not(.home) .msg-kopfbereich {
  border-bottom: 4px solid var(--msg-leucht);
}

/* --- Servicezeile --- */

.msg-service {
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, var(--msg-dunkel));
  padding-block: .4rem;
}
.msg-service .wp-block-navigation { justify-content: flex-end; }
.msg-service a {
  color: var(--msg-auf-dunkel-gedaempft);
  font-size: .8125rem;
  text-decoration: none;
}
.msg-service a:hover { color: var(--msg-leucht); text-decoration: underline; text-underline-offset: .25em; }

/* --- Hauptzeile --- */

.msg-kopf { padding-block: 1.125rem; }

/* Marke und Navigation stehen in EINER Reihe und fluchten mit dem Seiteninhalt.
   Die Breite kommt aus dem alignwide in parts/header.html (wideSize, nicht
   contentSize) — ohne das waere der Kopf 240 px schmaler als der Hero.
   Das Flex-Element ist .msg-brand, nicht .msg-marke: den Wrapper legt erst
   der Filter in functions.php um den Site-Title. */
.msg-kopf__reihe {
  align-items: center;
  flex-wrap: nowrap;
  gap: 2rem;
}
.msg-brand { min-width: 0; flex: 0 1 auto; }
.msg-hauptnav { flex: 0 1 auto; }

/* Unterhalb der Navigationsbreite darf wieder umgebrochen werden. Das
   Aufklappmenue selbst greift erst bei 600 px (overlayMenu: mobile). */
@media (max-width: 900px) {
  .msg-kopf__reihe { flex-wrap: wrap; gap: .75rem 2rem; }
}

/* Bildmarke + Wortmarke. Die Bildmarke ist ein umschaltbarer Platzhalter
   (functions.php / inc/logos.php), der Schriftzug bleibt Text. */
.msg-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.msg-brand__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.msg-logo-mark {
  height: 2.2em;
  width: auto;
  display: block;
}
.msg-marke,
.msg-brand .msg-marke {
  margin: 0;
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--msg-auf-dunkel);
}
.msg-marke a { color: inherit; text-decoration: none; }
.msg-brand a:hover { color: var(--msg-leucht); }

/* --- Hauptnavigation --- */

.msg-hauptnav { font-size: .9375rem; font-weight: 500; }
.msg-hauptnav a {
  color: var(--msg-auf-dunkel);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.msg-hauptnav a:hover { color: var(--msg-leucht); border-bottom-color: var(--msg-leucht); }
.msg-hauptnav .current-menu-item > a,
.msg-hauptnav .current_page_item > a {
  color: var(--msg-leucht);
  border-bottom-color: var(--msg-leucht);
}

/* Aufklappmenue auf kleinen Displays
   ---------------------------------------------------------------------------
   ACHTUNG, SPEZIFITAET. WordPress setzt fuer das geoeffnete Overlay selbst
   eine Farbe:

     .wp-block-navigation:not(.has-background)
       .wp-block-navigation__responsive-container.is-menu-open
       { background-color: #fff; color: #000; }

   Das sind **vier** Klassen (`:not(.has-background)` zaehlt mit). Bis zum
   12.08.2026 stand hier eine Regel mit nur **drei** — sie verlor. Der
   Hintergrund blieb weiss, waehrend die Verweise unsere weisse Schriftfarbe
   bekamen: weiss auf weiss. Auf dem Handy sah das aus, als oeffne sich eine
   leere Seite; der Knopf schien nicht zu reagieren.

   Deshalb hier dieselbe Form wie im Kern, plus die Themenklasse — fuenf
   Klassen, gewinnt eindeutig und ohne `!important`. */
.msg-hauptnav .wp-block-navigation__responsive-container-open,
.msg-hauptnav .wp-block-navigation__responsive-container-close { color: var(--msg-auf-dunkel); }

.wp-block-navigation.msg-hauptnav:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--msg-dunkel);
  color: var(--msg-auf-dunkel);
  padding-top: 4rem;
}

/* Der Schliessknopf sitzt im geoeffneten Overlay und braucht denselben
   Vorrang — sonst ist das X schwarz auf dunkelblau und kaum zu finden. */
.wp-block-navigation.msg-hauptnav:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  color: var(--msg-auf-dunkel);
}

.wp-block-navigation.msg-hauptnav:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--msg-auf-dunkel);
  font-size: 1.25rem;
  border-bottom: 0;
}
.wp-block-navigation.msg-hauptnav:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--msg-leucht);
}

/* ===========================================================================
   Hero — dunkles Band mit grossem Schriftzug
   =========================================================================== */

.msg-hero {
  background: var(--msg-dunkel);
  color: var(--msg-auf-dunkel);
  position: relative;
  overflow: hidden;
}

.msg-hero__raster {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* Ohne min-width:0 setzt die Mindestbreite des laengsten Wortes die
   Spaltenbreite — "Mittelstufengymnasium" wuerde die Bildspalte zerquetschen.
   Standardfall bei Grid, in deutscher Typografie besonders haeufig. */
.msg-hero__raster > * { min-width: 0; }

@media (max-width: 860px) {
  .msg-hero__raster { grid-template-columns: 1fr; }
}

/* Der Schriftzug. Zwei Zeilen, erste in der Leuchtfarbe — genau so, wie die
   Palette gedacht ist: leuchtend NUR auf dunkler Flaeche. */
.msg-hero__titel {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.msg-hero__zeile1 {
  display: block;
  color: var(--msg-leucht);
  font-size: clamp(1.75rem, 4.2vw, 3.35rem);
}
.msg-hero__zeile2 {
  display: block;
  color: var(--msg-auf-dunkel);
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  /* Jede Schriftpaarung braucht ein eigenes Mass — enge Grotesken vertragen
     mehr negatives Tracking als Serifen mit weiten Punzen. */
  letter-spacing: var(--msg-tracking-hero, -.05em);
}

.msg-hero__vorspann {
  color: var(--msg-auf-dunkel-gedaempft);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 2rem;
}

.msg-hero__aktionen { display: flex; flex-wrap: wrap; gap: .875rem; }

.msg-hero__aktionen .wp-block-button__link { text-decoration: none; }

/* Zweite Schaltflaeche: Kontur statt Fuellung, auf Dunkel lesbar */
.msg-hero__aktionen .is-style-outline .wp-block-button__link,
.msg-knopf-hell {
  background: transparent;
  color: var(--msg-leucht);
  border: 2px solid var(--msg-leucht);
}
.msg-hero__aktionen .is-style-outline .wp-block-button__link:hover,
.msg-knopf-hell:hover {
  background: var(--msg-leucht);
  color: var(--msg-dunkel);
}

/* Konturknoepfe ausserhalb des Kopfbereichs — „Alle Beitraege ansehen",
   „Zum Instagram-Profil". Ohne diese Regel veraendern sie sich beim
   Ueberfahren ueberhaupt nicht: Der Kernstil is-style-outline setzt
   color: currentColor und background: transparent mit Spezifitaet (0,3,1)
   und schlaegt damit die Hover-Regel aus theme.json, die als
   :root :where(.wp-element-button:hover) nur (0,1,0) hat. Der Kontrast war
   nie das Problem (17:1), es fehlte schlicht jede Rueckmeldung. */
.msg-sektion .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.msg-sektion .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--msg-primaer);
  border-color: var(--msg-primaer);
  color: #fff;
}

/* 3:2 statt 4:3 — geaendert am 02.08.2026 mit dem Gruppenbild.
   Der Rahmen stand auf 4/3, die Aufnahme ist 3/2. `object-fit: cover` schnitt
   dadurch elf Prozent der Breite weg, und zwar an beiden Raendern, wo die
   aeusseren Personen stehen. Bei einem Gebaeude faellt so etwas nicht auf,
   bei einer Gruppe schon. Ein Zuschnitt der Quelle haette dasselbe Problem
   gehabt: Das Original ist ebenfalls 3/2, aus 4/3 waere nur durch Wegnehmen
   von Breite zu kommen. */
.msg-hero__bild {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.msg-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Feiner Streifen in der Leuchtfarbe als Abschluss des Bandes */
.msg-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--msg-leucht);
}

/* ===========================================================================
   Meldungsband (Unterrichtsausfall o. ae.) — nur einblenden, wenn belegt
   =========================================================================== */

.msg-meldung {
  background: var(--msg-warnung);
  color: #fff;
  font-weight: 600;
}
.msg-meldung a { color: #fff; }

/* ===========================================================================
   Sektionen
   =========================================================================== */

.msg-sektion { padding-block: var(--wp--preset--spacing--60); }
.msg-sektion--alt { background: var(--msg-bg-alt); }
.msg-sektion--dunkel {
  background: var(--msg-dunkel);
  color: var(--msg-auf-dunkel);
}
.msg-sektion--dunkel :is(h2, h3) { color: var(--msg-auf-dunkel); }
.msg-sektion--dunkel p { color: var(--msg-auf-dunkel-gedaempft); }

.msg-sektion__kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }
.msg-sektion__kopf h2 { margin: .35rem 0 .75rem; }
.msg-sektion__kopf p { color: var(--msg-text-gedaempft); max-width: 62ch; margin: 0; }
.msg-sektion--dunkel .msg-sektion__kopf p { color: var(--msg-auf-dunkel-gedaempft); }

/* Die kleine Grossschrift ueber den Ueberschriften. Sie stand auf dem
   Akzent-Blau — neben Anthrazit, Gruen und Limette wirkte das wie eine
   Fremdfarbe. Jetzt Gruen auf hellem Grund, Leuchtfarbe auf dunklem.
   Das Blau bleibt dem Farbverlauf im Hero vorbehalten, wo es als Tiefe
   wirkt und nicht als Schriftfarbe auffaellt. */
.msg-kicker {
  display: block;
  color: var(--msg-primaer);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* Auf allen dunklen Flaechen — Band, Hero und Fussbereich. Der Fussbereich
   fehlte bisher, deshalb stand dort Blau auf Anthrazit. */
.msg-sektion--dunkel .msg-kicker,
.msg-hero .msg-kicker,
.msg-fuss .msg-kicker { color: var(--msg-leucht); }

/* ===========================================================================
   Raster
   =========================================================================== */

.msg-raster { display: grid; gap: 1.5rem; }
/* min() verhindert, dass auto-fit auf schmalen Displays ueberlaeuft. */
.msg-raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.msg-raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.msg-raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* WordPress begrenzt direkte Kinder einer Sektion auf die Textbreite (760px).
   Fuer Fliesstext ist das richtig, fuer Raster und Galerien zu eng — die
   duerfen die volle Breite nutzen. */
.msg-sektion > .msg-raster,
.msg-sektion > .msg-galerie,
.msg-sektion > .msg-instagram__raster,
.msg-sektion > .msg-kontakt,
.msg-sektion > .wp-block-query,
.msg-sektion > .wp-block-buttons {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Der Sektionskopf bleibt bewusst schmal: lange Zeilen ermueden beim Lesen. */
.msg-sektion__kopf { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.msg-sektion__kopf > * { max-width: 62ch; }

/* ===========================================================================
   Saeulen — das zeichnet uns aus
   =========================================================================== */

.msg-saeule {
  background: var(--msg-bg);
  border: 1px solid var(--msg-rahmen);
  border-top: 4px solid var(--msg-primaer);
  border-radius: 8px;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.msg-saeule__nr {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--msg-primaer);
  opacity: .28;
  margin-bottom: .5rem;
}
.msg-saeule h3 { margin: 0 0 .625rem; font-size: 1.1875rem; }
.msg-saeule p { margin: 0 0 1.25rem; color: var(--msg-text-gedaempft); font-size: .9375rem; }
.msg-saeule__mehr {
  margin-top: auto;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.msg-saeule__mehr:hover { text-decoration: underline; }
.msg-saeule__mehr::after { content: " \2192"; }

/* ===========================================================================
   Aktuelles — die Beitraege stehen im Zentrum der Startseite
   =========================================================================== */

.msg-aktuelles .wp-block-post-template {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 700px) {
  .msg-aktuelles .wp-block-post-template { grid-template-columns: repeat(3, 1fr); }
}

/* WordPress setzt auf die Beitragsliste eine eigene Flow-Layout-Klasse, die
   den Kindern Aussenabstaende gibt. Die wuerden das Raster verschieben. */
.msg-aktuelles .wp-block-post-template > li { margin-block: 0; height: 100%; }

.msg-beitrag {
  height: 100%;
  background: var(--msg-bg);
  border: 1px solid var(--msg-rahmen);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.msg-beitrag:hover { border-color: var(--msg-rahmen-kraeftig); transform: translateY(-2px); }
.msg-beitrag .wp-block-post-featured-image { margin: 0; }
.msg-beitrag .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.msg-beitrag__inhalt { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.msg-beitrag__datum {
  /* Ein Datum ist kein Akzent — gedaempft gesetzt, wie im abgestimmten Entwurf. */
  color: var(--msg-text-gedaempft);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.msg-beitrag h3, .msg-beitrag .wp-block-post-title {
  margin: .5rem 0 .625rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.msg-beitrag .wp-block-post-title a { text-decoration: none; color: var(--msg-text); }
.msg-beitrag .wp-block-post-title a:hover { color: var(--msg-primaer); text-decoration: underline; }
.msg-beitrag .wp-block-post-excerpt { color: var(--msg-text-gedaempft); font-size: .9375rem; margin: 0; }

/* ===========================================================================
   Zielgruppen-Schnellzugriff
   =========================================================================== */

.msg-zielgruppe {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--msg-bg);
  border: 1px solid var(--msg-rahmen);
  text-decoration: none;
  color: var(--msg-text);
}
.msg-zielgruppe:hover { border-color: var(--msg-primaer); background: var(--msg-bg-alt); }
.msg-zielgruppe strong { font-size: 1.0625rem; }
.msg-zielgruppe span { color: var(--msg-text-gedaempft); font-size: .9375rem; }

/* Kachel des internen Bereichs hebt sich ab */
.msg-zielgruppe--intern {
  background: var(--msg-dunkel);
  border-color: var(--msg-dunkel);
  color: var(--msg-auf-dunkel);
}
.msg-zielgruppe--intern strong { color: var(--msg-leucht); }
.msg-zielgruppe--intern span { color: var(--msg-auf-dunkel-gedaempft); }
.msg-zielgruppe--intern:hover { background: var(--msg-primaer-dunkel); border-color: var(--msg-leucht); }

/* ===========================================================================
   Eindruecke — Bildergalerie
   =========================================================================== */

/* Feste Spaltenzahl statt auto-fit: bei sechs Bildern ergibt das zwei volle
   Reihen. auto-fit liess ein einzelnes Bild verwaist in der zweiten Reihe. */
.msg-galerie { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .msg-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .msg-galerie { grid-template-columns: repeat(3, 1fr); } }

/* Bei genau vier Bildern bleibt es beim 2x2-Raster — im 3er-Raster stuende
   sonst eine verwaiste Einzelkachel in der zweiten Reihe. */
@media (min-width: 900px)  { .msg-galerie--vier { grid-template-columns: repeat(2, 1fr); } }
.msg-galerie figure { margin: 0; border-radius: 8px; overflow: hidden; }
.msg-galerie img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ===========================================================================
   Platzhalter — vorbereitet, aber noch nicht gefuellt
   ---------------------------------------------------------------------------
   Die Schule startet erst im August 2026. Etliche Bereiche stehen gestalterisch
   schon, warten aber auf Inhalte oder Beschluesse. Sie werden markiert, damit
   niemand sie fuer fertig haelt — und lassen sich fuer Praesentationen mit
   ?hinweise=aus ausblenden (siehe functions.php).

   Bewusst mit outline und absolut positioniertem Etikett: beides nimmt am
   Layout nicht teil. Waeren es border und margin, wuerde die Seite beim
   Ausblenden springen und die Praesentation saehe anders aus als die Arbeits-
   fassung. Das Etikett zeigt nach INNEN, weil Karten und Bildflaechen
   overflow:hidden haben und es sonst abgeschnitten wuerde.
   =========================================================================== */

.msg-platzhalter { position: relative; }

[data-hinweise="an"] .msg-platzhalter {
  outline: 2px dashed var(--msg-warnung);
  outline-offset: -2px;
  border-radius: inherit;
}
[data-hinweise="an"] .msg-platzhalter::after {
  content: attr(data-hinweis);
  position: absolute;
  inset: auto auto 0 0;
  z-index: 5;
  background: var(--msg-warnung);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  padding: 0 .5em;
  border-radius: 0 4px 0 0;
  pointer-events: none;
}
/* Ohne eigenen Text steht wenigstens „In Vorbereitung" da. */
[data-hinweise="an"] .msg-platzhalter:not([data-hinweis])::after { content: "In Vorbereitung"; }

/* Ganze Abschnitte: Etikett oben rechts, damit es die Ueberschrift nicht verdeckt. */
[data-hinweise="an"] .msg-sektion.msg-platzhalter::after { inset: 0 0 auto auto; border-radius: 0 0 0 4px; }

/* ===========================================================================
   Fehlendes Bild — sichtbar statt lautlos
   ---------------------------------------------------------------------------
   msg_nord_bild() in functions.php gibt ein leeres <span> aus, wenn ein
   Mediathek-Eintrag fehlt. Ohne Regel fiel das auf Hoehe 0 zusammen: eine
   Galerie bestand dann aus Ueberschrift und Nichts, ohne dass es jemandem
   auffiel. Mit schraffierter Flaeche sieht man sofort, dass ein Bild fehlt.
   =========================================================================== */

.msg-bild-fehlt {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--msg-rahmen-kraeftig) 20%, transparent) 9px 18px),
    var(--msg-bg-alt);
  box-shadow: inset 0 0 0 1px var(--msg-rahmen);
}
.msg-bild-fehlt::after {
  content: "Bild fehlt";
  position: absolute;
  inset: auto auto .5rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--msg-warnung);
  background: var(--msg-bg);
  border-radius: 4px;
  padding: .1rem .4rem;
}

/* ===========================================================================
   Instagram
   =========================================================================== */

/* Feste Spaltenzahl statt auto-fit. Grund: auto-fit laesst leere Spuren auf 0
   zusammenfallen und verteilt die Breite auf die vorhandenen Kacheln. Solange
   der Instagram-Zugang fehlt und nur zwei Beitraege eingetragen sind, wurden
   daraus zwei 614px grosse Kacheln, die die halbe Startseite eingenommen
   haben. Mit fester Spaltenzahl bleibt die Kachelgroesse gleich, egal ob
   zwei oder acht Beitraege da sind. */
.msg-instagram__raster {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .msg-instagram__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .msg-instagram__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.msg-instagram__kachel {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--msg-bg-alt);
}
/* Ohne feste Hoehe an der figure loest height:100% am Bild nicht auf — das
   Bild behaelt sein eigenes Seitenverhaeltnis und ragt aus der quadratischen
   Kachel heraus. */
.msg-instagram__kachel figure {
  margin: 0;
  height: 100%;
}
.msg-instagram__kachel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.msg-instagram__kachel:hover img { transform: scale(1.04); }
.msg-instagram__kachel figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem .75rem .625rem;
  font-size: .75rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Einladung, solange kein API-Zugang eingerichtet ist. Bewusst gestaltet:
   Besucherinnen und Besucher sollen nie eine leer wirkende Flaeche sehen. */
.msg-instagram__leer {
  padding: clamp(2rem, 4vw, 3rem);
  border: 2px solid var(--msg-rahmen);
  border-radius: 10px;
  background: var(--msg-bg);
  text-align: center;
}
.msg-instagram__handle {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--msg-primaer);
  margin: 0 0 .5rem;
}
.msg-instagram__leer p:last-child { margin: 0; color: var(--msg-text-gedaempft); }

/* Nur fuer angemeldete Redaktion sichtbar. */
.msg-instagram__hinweis {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--msg-warnung);
  background: var(--msg-bg);
  color: var(--msg-text-gedaempft);
  font-size: .9375rem;
}

/* ===========================================================================
   Kontakt
   =========================================================================== */

.msg-kontakt { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.msg-kontakt dt { font-weight: 600; margin-top: 1rem; }
.msg-kontakt dd { margin: .125rem 0 0; color: var(--msg-text-gedaempft); }
.msg-sektion--dunkel .msg-kontakt dd { color: var(--msg-auf-dunkel-gedaempft); }

/* ===========================================================================
   Unterseiten — Seitenkopf
   =========================================================================== */

.msg-seitenkopf {
  background: var(--msg-bg-alt);
  border-bottom: 1px solid var(--msg-rahmen);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

/* Der Inhalt steckt in einem eigenen Block in Breitdarstellung. Grund:
   WordPress gibt direkten Kindern eines "constrained"-Blocks automatisch
   "margin-inline: auto". Eine Ueberschrift mit begrenzter Zeilenlaenge
   zentriert sich dadurch selbst, statt links zu stehen. Der innere Block
   nutzt das Standardlayout und kennt diese Automatik nicht. */
.msg-seitenkopf__inhalt > * { margin-block: 0; }
.msg-seitenkopf__pfad { margin: 0 0 .5rem; }
.msg-seitenkopf__titel {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -.03em;
  max-width: 22ch;
}
.msg-seitenkopf__vorspann {
  margin: 1rem 0 0;
  color: var(--msg-text-gedaempft);
  font-size: 1.125rem;
  max-width: 62ch;
}
.msg-seitenkopf__datum {
  margin: .875rem 0 0;
  color: var(--msg-text-gedaempft);
  font-size: .9375rem;
}

/* ===========================================================================
   Unterseiten — Inhaltsbereich mit Bereichsnavigation
   =========================================================================== */

.msg-seitenbereich { padding-block: clamp(2.5rem, 5vw, 4rem); }

.msg-seitenraster {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
/* Faellt die Bereichsnavigation weg, nimmt der Inhalt automatisch
   die volle Breite ein — kein leerer Spaltenplatz. */
.msg-seiteninhalt { flex: 1 1 auto; min-width: 0; }

/* Unter 860 px stehen Navigation und Inhalt untereinander.
   `align-items: stretch` ist hier NICHT kosmetisch, sondern trägt das ganze
   mobile Layout:

   In der Zeilenrichtung hält `flex-start` (oben) die Bereichsnavigation oben
   bündig — richtig. Kippt die Achse aber auf `column`, wird aus derselben
   Angabe etwas ganz anderes: Die Querachse ist jetzt waagerecht, und
   `flex-start` heißt dort „so breit wie dein Inhalt“ statt „so breit wie das
   Fenster“. Ein einziges Kind mit einer Mindestbreite zieht damit die
   **gesamte Textspalte** auf: Am 17.08.2026 stand auf `/ganztag/` jeder
   Absatz und jede Überschrift auf 480 px in einem 360-px-Fenster (die
   Tabellenregel setzt `min-width: 30rem`), auf `/termine/` auf 780 px
   (der Kalenderrahmen). Die Seiten ließen sich waagerecht wegschieben, und
   beim Wischen wackelte der Fließtext mit.

   Mit `stretch` nimmt die Spalte die Fensterbreite. Tabelle und Kalender
   behalten ihre Mindestbreite und rollen **in ihrem eigenen Kasten** —
   genau so war es gedacht (siehe .wp-block-table und .msg-einbettung__rolle).

   Die Lehre: Eine `align-items`-Angabe bedeutet in `row` und in `column`
   nicht dasselbe. Wer die Richtung im Umbruch dreht, muss sie mitdrehen. */
@media (max-width: 860px) {
  .msg-seitenraster {
    flex-direction: column;
    align-items: stretch;
  }
}

.msg-bereichsnav {
  flex: 0 0 250px;
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 860px) {
  .msg-bereichsnav { position: static; flex: 1 1 auto; width: 100%; }
}
.msg-bereichsnav__titel {
  margin: 0 0 .75rem;
  padding-left: .875rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--msg-text-gedaempft);
}
.msg-bereichsnav ul { list-style: none; margin: 0; padding: 0; }
.msg-bereichsnav li { margin: 0; }
.msg-bereichsnav a {
  display: block;
  padding: .5rem .875rem;
  border-left: 3px solid var(--msg-rahmen);
  color: var(--msg-text);
  text-decoration: none;
  font-size: .9375rem;
  line-height: 1.4;
}
.msg-bereichsnav a:hover {
  background: var(--msg-bg-alt);
  border-left-color: var(--msg-rahmen-kraeftig);
}
.msg-bereichsnav .ist-aktuell a {
  background: var(--msg-bg-alt);
  border-left-color: var(--msg-primaer);
  color: var(--msg-primaer);
  font-weight: 600;
}

/* Typografie im Seiteninhalt */
.msg-seiteninhalt :is(h2, h3, h4) { margin-top: 2.25rem; }
.msg-seiteninhalt :is(h2, h3, h4):first-child { margin-top: 0; }
.msg-seiteninhalt h2 { margin-bottom: .75rem; }
.msg-seiteninhalt h3 { margin-bottom: .5rem; }
.msg-seiteninhalt ul, .msg-seiteninhalt ol { padding-left: 1.25rem; }
.msg-seiteninhalt li { margin-block: .35rem; }
/* Lange Zeichenketten ohne Trennstelle duerfen umbrechen.
   -------------------------------------------------------------------------
   E-Mail-Adressen und Webadressen sind fuer den Umbruchalgorithmus EIN Wort.
   `poststelle.ssa.ruesselsheim@kultus.hessen.de` ist 343 px breit und passt
   damit in kein Handyfenster — die Seite liess sich seitlich wegschieben.
   Am 17.08.2026 gemessen: /impressum/ 363 px und /datenschutz/ 376 px bei
   einem 360-px-Fenster, bei 320 px sogar 42 bzw. 47 px darueber.

   `break-word` und ausdruecklich NICHT `anywhere`: Beide brechen das zu lange
   Wort um, aber `anywhere` senkt zusaetzlich die *Mindestbreite* des Elements
   auf ein Zeichen. In einer Tabelle richtet das Schaden an — die Spalten
   werden neu verteilt, und aus „Donnerstag“ wird „Donnerst-ag“, aus
   „Arbeitsgemeinschaft“ wird „Arbeitsgeme-inschaft“. Am 17.08.2026 auf
   /ganztag/ gesehen, nachdem `anywhere` genau das angerichtet hatte.
   Gebraucht wird die schaerfere Fassung ohnehin nicht: Seit die Textspalte
   die Fensterbreite nimmt (siehe .msg-seitenraster oben), muss die
   Mindestbreite nicht mehr gedrueckt werden — es reicht, die Zeile zu brechen.

   Tabellenzellen stehen bewusst NICHT in der Liste: Die Tabelle behaelt ihre
   Mindestbreite und rollt im eigenen Kasten, damit die Spalten lesbar bleiben.

   Auf normalen Text wirkt sich das nicht aus: Gebrochen wird nur, wenn ein
   Wort allein nicht in die Zeile passt. */
.msg-seiteninhalt :is(p, li, dd, dt, figcaption, a) {
  overflow-wrap: break-word;
}

/* Überschriften bekommen echte Silbentrennung statt eines harten Bruchs.
   Deutsch baut lange Komposita, und Überschriften stehen in großer Schrift:
   „Durchsetzungsverfahren“ passt bei 320 px in keine Zeile. `hyphens: auto`
   trennt an der richtigen Stelle mit Trennstrich („Durchsetzungs-verfahren“),
   `break-word` fängt den Rest ab, falls der Browser kein Trennmuster für die
   Sprache hat. Voraussetzung ist das `lang`-Attribut am `<html>` — das setzt
   WordPress. */
.msg-seiteninhalt :is(h1, h2, h3, h4) {
  hyphens: auto;
  overflow-wrap: break-word;
}

.msg-seitenbild img, .msg-beitragsbild img { border-radius: 8px; }
.msg-beitragsbild { margin-bottom: 2.5rem; }

.msg-beitrag__fuss {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--msg-rahmen);
  color: var(--msg-text-gedaempft);
  font-size: .9375rem;
}
.msg-beitrag__fuss a { color: var(--msg-primaer); }

/* Blaettern */
.msg-blaettern { margin-top: 3rem; gap: .5rem; }
.msg-blaettern a, .msg-blaettern span {
  padding: .45rem .75rem;
  border-radius: 4px;
  text-decoration: none;
}
.msg-blaettern a:hover { background: var(--msg-bg-alt); }
.msg-blaettern .current { background: var(--msg-primaer); color: #fff; font-weight: 600; }

/* Trefferliste der Suche */
.msg-trefferliste > li { margin-block: 2rem; }
.msg-trefferliste h2 { margin-bottom: .35rem; font-size: 1.25rem; }

/* ===========================================================================
   Anleitungen (Schulportal) — Bausteine
   =========================================================================== */

/* Zweispaltige Angaben */
.msg-defs {
  margin: 1.25rem 0;
  border: 1px solid var(--msg-rahmen);
  border-radius: 8px;
  overflow: hidden;
}
.msg-defs dt {
  background: var(--msg-bg-alt);
  padding: .55rem .9rem;
  font-weight: 600;
  border-top: 1px solid var(--msg-rahmen);
}
.msg-defs dt:first-child { border-top: 0; }
.msg-defs dd {
  margin: 0;
  padding: .55rem .9rem;
  color: var(--msg-text-gedaempft);
  border-top: 1px solid var(--msg-rahmen);
}
@media (min-width: 560px) {
  .msg-defs { display: grid; grid-template-columns: 14rem 1fr; }
  .msg-defs dt { border-top: 1px solid var(--msg-rahmen); }
  .msg-defs dt:nth-of-type(1) { border-top: 0; }
  .msg-defs dd:nth-of-type(1) { border-top: 0; }
}

/* Eingebettete Fremdseite.
   -------------------------------------------------------------------------
   Bewusst als abgesetzter Kasten mit Marke und Fusszeile: Was hier zu sehen
   ist, kommt NICHT von uns, und der Besucher soll das erkennen, ohne in den
   Quelltext zu sehen. Die Marke oben sagt, dass es vorlaeufig ist; die
   Fusszeile sagt, was die Einbettung technisch bedeutet.

   Die Hoehe steht in `vh` mit Untergrenze: Ein Monatskalender braucht Platz,
   und ein Rahmen, der auf dem Handy 200 Pixel hoch ist, zeigt eine Woche und
   drei Rollbalken. */
.msg-einbettung {
  margin: 2rem 0;
  border: 1px solid var(--msg-rahmen);
  border-radius: 8px;
  overflow: hidden;
  background: var(--msg-bg-alt);
}
.msg-einbettung__marke {
  margin: 0;
  padding: .55rem .9rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--msg-text-gedaempft);
  border-bottom: 1px solid var(--msg-rahmen);
}
/* Der Rahmen bleibt mindestens 780 px breit und rollt notfalls im Kasten.
   Grund: Die eingebettete Schulportal-Seite laeuft auf Bootstrap 3 und
   versteckt ihren Kalender unter 768 px mit `hidden-xs`. Am 13.08.2026 auf
   einem 390-px-Fenster nachgesehen — das Element `.fc` war da, gezeichnet
   wurde nichts, der Rahmen blieb weiss. Von aussen ist daran nichts zu
   aendern; also bekommt der Rahmen die Breite, die die fremde Seite braucht,
   und man wischt im Kasten. Dieselbe Loesung wie bei den Tabellen. */
.msg-einbettung__rolle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.msg-einbettung__rahmen {
  display: block;
  width: 100%;
  min-width: 780px;
  height: 78vh;
  min-height: 620px;
  border: 0;
  background: var(--msg-bg);   /* Fremdseite bringt eigenen Grund mit — kein Durchscheinen, waehrend sie laedt */
}
.msg-einbettung__fuss {
  margin: 0;
  padding: .8rem .9rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--msg-text-gedaempft);
  border-top: 1px solid var(--msg-rahmen);
}

/* Text, den nur ein Vorleseprogramm bekommt.
   -------------------------------------------------------------------------
   Nimmt im Layout keinen Platz ein, verschiebt nichts, ist auf dem Bildschirm
   nicht zu sehen — steht aber im Markup und wird vorgelesen. Damit lassen sich
   Verweise ergaenzen („externer Verweis", „Weiterlesen: <Titel>"), ohne dass
   sich an der Seite etwas aendert. Festlegung vom 14.08.2026.

   `clip-path: inset(50%)` statt der alten `clip`-Eigenschaft, und
   `white-space: nowrap`, damit Vorleseprogramme die Woerter nicht
   zusammenziehen. Kein `display:none` und kein `visibility:hidden` — beides
   nimmt den Text auch dem Vorleseprogramm weg. */
.msg-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fett muss fett aussehen.
   -------------------------------------------------------------------------
   Der Browser gibt `strong` und `b` das Gewicht `bolder` — und das ist keine
   feste Zahl, sondern „eine Stufe ueber der Umgebung". Der Fliesstext steht
   hier auf 300, eine Stufe darueber ist 400. Am 13.08.2026 im Browser
   gemessen: `strong` rechnete zu 400 gegen 300 im Absatz. Das ist ein
   Unterschied, den man mit dem Lineal findet und mit dem Auge nicht.

   Betroffen war jede Seite — allein „Bus und Bahn" hat 31 solcher Stellen,
   und auf der Krankmeldung haengt an genau dieser Auszeichnung, was Eltern
   sich merken sollen.

   600 statt 700, weil die Hausschrift in 400 und 600 vorliegt: 700 muesste
   der Browser selbst verdicken, und das sieht auf schmalen Buchstaben
   schmierig aus. */
strong, b { font-weight: 600; }

/* Tabellen.
   -------------------------------------------------------------------------
   Bis zum 13.08.2026 kam auf der Seite keine einzige Tabelle vor; mit „Bus
   und Bahn" gibt es die erste. Der Kernblock bringt nur ein Grundgeruest mit.

   Der wichtige Teil ist das Rollen auf schmalen Bildschirmen: Eine vierspaltige
   Fahrplantabelle passt auf kein Handy. Ohne `overflow-x` an einem UMGEBENDEN
   Element schiebt die Tabelle stattdessen die ganze Seite breiter, und dann
   wackelt jeder Text darueber beim Wischen mit. Deshalb liegt das Rollen am
   `<figure>` und nicht an der Tabelle. */
/* Kein Rollschatten am Rand — am 17.08.2026 versucht und wieder entfernt.
   Die uebliche Loesung (vier Verlaeufe im Hintergrund, `background-attachment:
   local, local, scroll, scroll`) liegt auf dem HINTERGRUND des Rollkastens.
   Die Zeilen der Streifentabelle bringen ihren eigenen Hintergrund mit und
   decken ihn ab: Der Schatten war nur im weissen Zwischenband zu sehen — ein
   Streifenmuster am Rand, das aussah wie ein Darstellungsfehler.
   Sauber loesen liesse es sich mit einem zusaetzlichen Element um die Tabelle
   herum; das wuerde das Blockmarkup jeder Seite anfassen. Zurueckgestellt. */
.wp-block-table {
  overflow-x: auto;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .9375rem;
}
.wp-block-table th,
.wp-block-table td {
  padding: .6rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--msg-rahmen);
}
.wp-block-table thead th {
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--msg-text-gedaempft);
  border-bottom-width: 2px;
}
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--msg-bg-alt);
}
.wp-block-table figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--msg-text-gedaempft);
}

/* Einstiegssatz — der erste Absatz einer Seite, etwas groesser und ruhiger.
   -------------------------------------------------------------------------
   Am 13.08.2026 gemessen: 16 veroeffentlichte Seiten tragen diese Klasse, und
   das Theme kannte sie nicht. Der Einstieg sah auf allen 16 aus wie ein
   gewoehnlicher Absatz — ein Fehler, den man nur sieht, wenn man die Seite
   neben ihre Vorlage haelt. Deshalb steht die Regel jetzt hier und nicht als
   Ausnahme in einer Seite. */
.msg-einstieg {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--msg-text-gedaempft);
  margin-bottom: 1.75rem;
  max-width: 46rem;
}

/* Hinweis-Kasten.
   Beide Namen gelten: `.msg-hinweis-box` steht in 3 Seiten, `.msg-hinweis` in
   3 weiteren. Eine Regel fuer beide ist ehrlicher, als 3 Seiten umzuschreiben
   und die naechste Redakteurin wieder den falschen Namen tippen zu lassen. */
.msg-hinweis-box,
.msg-hinweis {
  margin: 1.25rem 0;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--msg-primaer);
  background: var(--msg-bg-alt);
  border-radius: 0 6px 6px 0;
}
.msg-hinweis-box > :last-child,
.msg-hinweis > :last-child { margin-bottom: 0; }
.msg-hinweis-box > :first-child,
.msg-hinweis > :first-child { margin-top: 0; }

/* Klaerungs-Markierung — sichtbar fuer alle Leserinnen und Leser.
   Anders als .msg-platzhalter (Redaktionshinweis, haengt an data-hinweise)
   ist das eine inhaltliche Aussage: dieser Punkt ist noch nicht beschlossen. */
.msg-klaerung {
  margin: 1.25rem 0;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--msg-warnung);
  background: color-mix(in srgb, var(--msg-warnung) 8%, #fff);
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
}
.msg-klaerung__marke {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--msg-warnung);
  margin-bottom: .25rem;
}

/* Links in den Angabe-Tabellen der Anleitungen sichtbar machen */
.msg-defs dd a { color: var(--msg-primaer); text-underline-offset: .2em; }

/* Systemkopf: Zeichen + Ueberschrift in einer Zeile (Digitale Schule).
   Die Zeichen sind eigene Symbole im Schuldesign, keine fremden Logos. */
.msg-system-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}
.msg-system-kopf h2 { margin: 0; }
.msg-system-kopf__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--msg-rad-klein, 10px);
  background: var(--msg-dunkel);
  color: var(--msg-leucht);
}
.msg-system-kopf__zeichen svg { width: 1.5rem; height: 1.5rem; }
.msg-marke-vorbereitung {
  align-self: center;
  padding: .18rem .6rem;
  border: 1px solid var(--msg-warnung);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--msg-warnung);
  white-space: nowrap;
}

/* Beispieltext */
.msg-beispiel {
  margin: 1rem 0;
  padding: .8rem 1.1rem;
  border-left: 3px solid var(--msg-rahmen-kraeftig);
  background: var(--msg-bg-alt);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--msg-text-gedaempft);
}
.msg-beispiel p { margin: 0; }

/* Checkliste */
.msg-check { list-style: none; padding-left: 0; }
.msg-check li { margin-block: .4rem; }

/* Entwurfs-Banner für interne Anleitungen */
.msg-entwurf-banner {
  background: var(--msg-warnung);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  padding: .6rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}

/* ===========================================================================
   Fussbereich
   =========================================================================== */

.msg-fuss {
  background: var(--msg-dunkel);
  color: var(--msg-auf-dunkel-gedaempft);
  padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.msg-fuss :is(h2, h3, strong) { color: var(--msg-auf-dunkel); }
.msg-fuss a { color: var(--msg-auf-dunkel-gedaempft); text-decoration: none; }
.msg-fuss a:hover { color: var(--msg-leucht); text-decoration: underline; }

/* Ohne das fressen Aufzaehlungspunkte und Einzug so viel Breite, dass
   "Anmeldung" mitten im Wort umbricht. */
.msg-fuss .wp-block-list { list-style: none; margin: 0; padding-left: 0; }
.msg-fuss .wp-block-list li { margin-block: .4rem; }
.msg-fuss h3 { margin-bottom: .75rem; }
.msg-fuss__unten {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, #fff 18%, var(--msg-dunkel));
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* ===========================================================================
   Rueckstellung fuer Menschen, die Bewegung vermeiden moechten
   =========================================================================== */

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

/* ===========================================================================
   GESTALTUNG „SIGNATUR" — entschieden am 27.07.2026
   ---------------------------------------------------------------------------
   Weiterentwicklung der bisherigen flaechigen Gestaltung: weiche Verlaeufe auf
   den dunklen Baendern, groessere Radien, ruhige Schatten, Schaltflaechen als
   Pillen. Struktur und Inhalte bleiben unveraendert — es aendert sich nur die
   Formsprache.

   Die Verlaufstoene werden mit color-mix aus der aktiven Palette abgeleitet.
   Damit funktioniert die Gestaltung in allen 16 Farbwelten, ohne dass fuer
   jede eigene Hexwerte gepflegt werden muessen.

   Zur Leuchtfarben-Regel (siehe Kopf von tokens.css): Der Leucht-Schleier auf
   dem Hero liegt bei 16 %. Bis dahin haelt Leuchtschrift auf dem aufgehellten
   Grund in allen Paletten die geforderten 4,5:1 — bei kraeftigeren Werten
   faellt sie in den warmen Paletten durch.
   =========================================================================== */

:root {
  /* Abgeleitete Verlaufstoene. Die 18 % entsprechen dem Wert, den die
     Kontrastrechnung in scripts/designstudie/paletten.mjs als hoechsten
     ermittelt hat, bei dem Leuchtschrift auf dem getoenten Grund noch
     4,8:1 haelt. Weniger sieht man kaum, mehr wird knapp. */
  --msg-dunkel-kuehl: color-mix(in srgb, var(--msg-dunkel) 82%, var(--msg-akzent));
  --msg-dunkel-warm:  color-mix(in srgb, var(--msg-dunkel) 82%, var(--msg-primaer));
  --msg-dunkel-tief:  color-mix(in srgb, var(--msg-dunkel) 85%, #000);

  /* Formsprache */
  --msg-rad:       18px;
  --msg-rad-klein: 12px;
  --msg-schatten:       0 18px 40px -22px color-mix(in srgb, var(--msg-dunkel) 40%, transparent);
  --msg-schatten-hover: 0 26px 55px -20px color-mix(in srgb, var(--msg-dunkel) 50%, transparent);
}

/* --- Dunkle Baender bekommen Tiefe --- */

.msg-hero {
  background:
    radial-gradient(60% 70% at 82% 8%,
      color-mix(in srgb, var(--msg-leucht) 16%, transparent), transparent 60%),
    radial-gradient(55% 60% at 8% 100%,
      color-mix(in srgb, var(--msg-akzent) 30%, transparent), transparent 62%),
    linear-gradient(158deg, var(--msg-dunkel-kuehl) 0%, var(--msg-dunkel) 48%, var(--msg-dunkel-tief) 100%);
}

/* Der harte Leuchtstreifen unter dem Hero gehoert zur flaechigen Gestaltung.
   Im Verlauf wirkt er wie ein Fremdkoerper — der Uebergang traegt sich selbst. */
.msg-hero::after { display: none; }

.msg-sektion--dunkel {
  background:
    radial-gradient(50% 60% at 88% 12%,
      color-mix(in srgb, var(--msg-leucht) 12%, transparent), transparent 60%),
    radial-gradient(60% 70% at 6% 96%,
      color-mix(in srgb, var(--msg-akzent) 24%, transparent), transparent 60%),
    linear-gradient(160deg, var(--msg-dunkel-warm) 0%, var(--msg-dunkel) 55%, var(--msg-dunkel-tief) 100%);
}

/* --- Weichere Formen --- */

.msg-hero__bild { border-radius: var(--msg-rad); }

.msg-saeule,
.msg-beitrag,
.msg-zielgruppe,
.msg-galerie figure {
  border-radius: var(--msg-rad);
}

.msg-beitrag,
.msg-zielgruppe {
  box-shadow: var(--msg-schatten);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.msg-beitrag:hover,
.msg-zielgruppe:hover {
  transform: translateY(-4px);
  box-shadow: var(--msg-schatten-hover);
}

.msg-galerie figure {
  box-shadow: var(--msg-schatten);
  transition: transform .16s ease;
}
.msg-galerie figure:hover { transform: translateY(-3px); }

/* --- Schaltflaechen als Pillen ---
   theme.json setzt den Radius ueber :where() mit sehr geringer Spezifitaet.
   Zwei Klassen genuegen, um das sauber zu ueberschreiben. */
.wp-block-button .wp-block-button__link,
.msg-knopf-hell {
  border-radius: 999px;
}
.msg-hero__aktionen .wp-block-button__link {
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--msg-dunkel) 70%, transparent);
}

/* Durchgaengigkeit: Auf der Startseite endet das Kopfband seit der
   Signatur-Umstellung ohne Leuchtstreifen. Auf Unterseiten muss es genauso
   sein, sonst haetten Start- und Unterseiten zwei verschiedene Handschriften.
   Die Leuchtkante wandert stattdessen an den Fussbereich — dort schliesst sie
   die Seite ab, statt den Kopf abzutrennen. */
body:not(.home) .msg-kopfbereich { border-bottom: 0; }
.msg-fuss { border-top: 4px solid var(--msg-leucht); }

/* ===========================================================================
   Einschulungstermin im Kopfbereich
   ---------------------------------------------------------------------------
   Der 11.08.2026 ist die wichtigste Angabe der Seite und stand nirgends
   ausserhalb eines Beitrags. Beitraege rutschen weg, sobald neue dazukommen —
   genau das war passiert. Deshalb steht der Termin jetzt fest im Kopfbereich
   und verschwindet erst, wenn er vorbei ist (dann von Hand entfernen).
   =========================================================================== */
/* Der hervorgehobene Termin im Kopfbereich.
   -------------------------------------------------------------------------
   Form wie die Schnellzugriff-Kacheln, statt der frueheren Pille mit 999 px.
   Geaendert am 16.08.2026 — zwei Bausteine derselben Seite sollen nicht zwei
   Formensprachen tragen.

   `var(--msg-rad)` und kein fester Wert: Die Kacheln nehmen dasselbe Token
   (18 px, weiter oben unter „Weichere Formen"). Wer die Rundung der Seite
   einmal aendert, aendert damit auch diesen Kasten. Ein eingetragenes „8px"
   waere beim naechsten Mal genau die Abweichung, die niemandem auffaellt —
   und die 8 px waren ausserdem falsch: `.msg-zielgruppe` traegt die 8 px nur
   in der frueheren Regel, ueberschrieben wird sie mit dem Token.

   Die FARBEN bleiben anders, und das mit Absicht: Die Kacheln stehen auf
   Weiss, dieser Kasten auf dem dunklen Band. Ein weisser Block waere dort
   ein Fremdkoerper. Deshalb heller Rahmen und leichte Aufhellung statt
   Flaeche — und kein Schatten, der auf Dunkelblau ohnehin nicht zu sehen
   waere. */
.msg-hero__termin {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin: 0 0 1.75rem;
  padding: 1rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--msg-leucht) 45%, transparent);
  border-radius: var(--msg-rad);
  background: color-mix(in srgb, var(--msg-leucht) 10%, transparent);
  font-size: .95rem;
}
.msg-hero__termin__marke {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msg-leucht);
}
/* Unterstreichung als text-decoration, NICHT als border-bottom.
   -------------------------------------------------------------------------
   Der Verweis fuellt als Blockelement die ganze Kastenbreite. Ein
   `border-bottom` zieht deshalb eine durchgehende Linie ueber den ganzen
   Kasten — bei zweizeiligem Text sah das am 16.08.2026 aus wie ein Trenner
   mitten in der Karte, nicht wie eine Unterstreichung. `text-decoration`
   folgt dagegen den Woertern und hoert auf, wo der Text aufhoert.

   Unterstrichen bleibt es: Ein Verweis darf sich nicht allein durch die
   Farbe vom uebrigen Text unterscheiden. */
.msg-hero__termin a {
  color: var(--msg-auf-dunkel);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--msg-auf-dunkel) 45%, transparent);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.msg-hero__termin a:hover {
  color: var(--msg-leucht);
  text-decoration-color: var(--msg-leucht);
}

/* Auf schmalen Bildschirmen bekommt die Marke eine eigene Zeile und der Text
   die volle Breite. Die Rundung bleibt dieselbe wie ueberall — der frueher
   hier eingetragene Sonderwert (14px) stammt aus der Zeit der Pillenform und
   waere seit dem 16.08.2026 eine Abweichung ohne Grund. */
@media (max-width: 700px) {
  .msg-hero__termin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    border-radius: var(--msg-rad);
    padding: .9rem 1.1rem 1rem;
  }
  .msg-hero__termin a { line-height: 1.5; }
}

/* ===========================================================================
   Termine aus dem Schulportal
   Erzeugt von mu-plugins/msg-nord-termine.php. Der Server holt den Kalender
   taeglich; hier steht nur, wie er aussieht.
   =========================================================================== */

.msg-termine__liste { list-style: none; margin: 0; padding: 0; }

/* Die Datumsspalte ist 11.5rem breit, weil „30. September 2026" so viel
   braucht — bei 9.5rem brach das Datum auf zwei Zeilen um und der Eintrag
   wurde doppelt so hoch wie seine Nachbarn. Am Bild gemessen, nicht
   geschaetzt. Feste Breite statt max-content: jeder Eintrag ist ein eigenes
   Raster, max-content ergaebe von Zeile zu Zeile andere Spaltenkanten. */
.msg-termin {
  display: grid;
  grid-template-columns: 3.2rem 11.5rem 6rem 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--msg-rahmen);
}
.msg-termin:last-child { border-bottom: 0; }

.msg-termin__tag   { font-weight: 600; color: var(--msg-text-gedaempft); }
.msg-termin__datum { font-weight: 600; white-space: nowrap; }
.msg-termin__zeit  { color: var(--msg-text-gedaempft); font-size: .9375rem; }
.msg-termin__titel { font-weight: 500; }

/* Ein Termin, zu dem es eine Seite gibt, wird am Titel verlinkt.
   -------------------------------------------------------------------------
   Der Verweis muss als solcher erkennbar sein — sonst klickt ihn niemand.
   Unterstreichung statt Farbwechsel allein: Farbe allein ist kein
   ausreichendes Unterscheidungsmerkmal (WCAG 1.4.1), und in einer Liste, in
   der die meisten Titel NICHT verlinkt sind, muss der Unterschied ohne
   Farbwahrnehmung sichtbar bleiben. */
.msg-termin__titel a {
  color: var(--msg-primaer);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
}
.msg-termin__titel a:hover,
.msg-termin__titel a:focus-visible {
  color: var(--msg-dunkel);
  text-decoration-thickness: .12em;
}
.msg-termin__ort   { grid-column: 4; color: var(--msg-text-gedaempft); font-size: .9375rem; }

/* Unter 640 px bricht das Raster um: Datum und Zeit in eine Zeile, der
   Titel darunter. Vier Spalten auf einem Handy ergaeben Silbensalat. */
@media (max-width: 640px) {
  .msg-termin { grid-template-columns: 3.2rem 1fr; }
  .msg-termin__zeit  { grid-column: 2; }
  .msg-termin__titel { grid-column: 1 / -1; }
  .msg-termin__ort   { grid-column: 1 / -1; }
}

/* Der ganze Eintrag ist anklickbar, ohne dass der Verweis wie ein Link
   aussieht — sonst konkurrieren vier blaue Felder je Zeile um Aufmerksamkeit. */
.msg-termin__link { display: contents; color: inherit; text-decoration: none; }
.msg-termin--verweis:hover { background: var(--msg-bg-alt); }
.msg-termin__link:focus-visible { outline: 2px solid var(--msg-primaer); outline-offset: 2px; }

.msg-termine__monat {
  margin: 2rem 0 .5rem;
  font-size: 1.125rem;
  color: var(--msg-primaer);
}
.msg-termine__monat:first-child { margin-top: 0; }

.msg-termine__mehr { margin-top: 1rem; }
.msg-termine__leer,
.msg-termine__stand {
  color: var(--msg-text-gedaempft);
  font-size: .9375rem;
}
.msg-termine__stand { margin-top: 1.5rem; }