/*
Theme Name: Schulhomepage
Theme URI: https://ms-dachau-sued.de/
Description: Barrierefreies Child-Theme für Schulhomepages auf Basis von Twenty Twenty-Five. Farben, Typografie und Abstände sind fest hinterlegt; Redakteurinnen und Redakteure können das Layout nicht versehentlich verändern. Über Stil-Variationen an weitere Schulen anpassbar.
Author: Mittelschule Dachau-Süd
Template: twentytwentyfive
Version: 1.23.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schulhomepage
Tags: education, accessibility-ready, block-styles, full-site-editing
*/

/* -------------------------------------------------------------
   Dieses Stylesheet enthält bewusst nur das, was theme.json
   nicht ausdrücken kann. Alles andere gehört in theme.json.
   ------------------------------------------------------------- */

/* --- Sichtbarer Tastaturfokus -------------------------------------------
   Pflicht nach WCAG 2.1 (2.4.7). Das alte Theme hatte nur
   "outline: thin dotted", auf hellem Grund praktisch unsichtbar.

   Bewusst ZWEIFARBIG: ein weißer Innenring und ein fast schwarzer
   Außenring. Eine einzelne Farbe versagt zwangsläufig irgendwo –
   ein dunkler Ring verschwindet auf dunklen Flächen, ein heller auf
   hellen. Diese Kombination ist auf jedem Untergrund sichtbar:
     weißer Ring auf der Schulfarbe   4,50:1
     weißer Ring auf dunkler Fläche  12,60:1
     schwarzer Ring auf dem weißen    18,66:1 */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #101314;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #ffffff;
	border-radius: 2px;
}

/* Kein Fokusring bei reinen Mausklicks, aber immer bei Tastaturbedienung. */
:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

/* --- Links im Fließtext -------------------------------------------------
   Nicht nur farblich unterscheidbar (WCAG 1.4.1). Unterstrichen, mit
   Abstand zur Schrift, damit Unterlängen lesbar bleiben. */

.entry-content a:where(:not(.wp-element-button)),
.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content a:where(:not(.wp-element-button)):hover,
.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* --- Bewegung reduzieren ------------------------------------------------
   Respektiert die Systemeinstellung von Nutzerinnen und Nutzern, die
   auf Animationen empfindlich reagieren (WCAG 2.3.3). */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   KOPFBEREICH – EINE ZEILE

   Bis Version 1.16 standen drei Zonen übereinander: weißer Streifen mit
   dem Logo, darunter ein türkises Band über die volle Breite, darunter
   erst der Inhalt. Zusammen rund 260 Pixel Höhe, bevor irgendetwas über
   die Schule gesagt war.

   Jetzt teilen sich Logo und Menü eine Zeile. Der Kopf ist damit rund
   90 Pixel flacher, und das Türkis ist wieder ein Akzent statt einer
   Wand: Es bleibt als 3 Pixel starke Kante unten und als Markierung der
   aktuellen Seite.

   Grenze: Bei fünf Oberpunkten passt das bequem. Kämen sieben dazu,
   bräuchte es auf 1280 Pixel breiten Bildschirmen eine zweite Zeile –
   flex-wrap fängt das ab, schön ist es dann nicht mehr.
   ========================================================================= */

.msds-kopf {
	border-bottom: 3px solid var(--wp--preset--color--akzent);
}

.msds-kopf .wp-block-site-logo img {
	max-height: 74px;
	width: auto;
	display: block;
}

.msds-kopfzeile {
	gap: var(--wp--preset--spacing--30);
}

.msds-kopfzeile .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
}

/* Das Menü darf schrumpfen, das Logo nicht. */
.msds-kopfzeile .wp-block-navigation {
	flex: 0 1 auto;
}

/* Der Punkt "Startseite" ist bewusst der erste und kürzeste. Sechs
   Oberpunkte brauchen zusammen mit dem Logo rund 940 Pixel – auf einem
   1024 Pixel breiten Bildschirm bleibt das gerade noch einzeilig. Käme
   ein siebter dazu, wäre der Umbruch da. */
.msds-kopf .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Menüschrift auf Weiß: Türkis-dunkel ergibt 6,9:1 und liegt damit
   deutlich über der Anforderung. Die Farbe wird mit !important gesetzt,
   weil sonst die globale Linkfarbe aus der theme.json gewinnt. */

.msds-kopf .wp-block-navigation a,
.msds-kopf .wp-block-navigation a:visited,
.msds-kopf .wp-block-navigation-item__content,
.msds-kopf .wp-block-navigation-item__content:visited {
	color: var(--wp--preset--color--akzent-dunkel) !important;
}

.msds-kopf .wp-block-navigation__submenu-icon {
	fill: var(--wp--preset--color--akzent-dunkel);
}

.msds-kopf .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.5rem 0.6rem;
	border-radius: 4px;
	font-weight: 600;
	/* 17 px auf schmalen, 19 px auf breiten Bildschirmen. */
	font-size: clamp(1.0625rem, 0.85rem + 0.3vw, 1.1875rem);
}

.msds-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--warm-hell);
	text-decoration: none;
}

/* Aktuelle Seite: gefüllt statt unterstrichen. Auf Weiß ist eine
   Füllung sofort erkennbar, ohne dass Farbe die einzige Information
   wäre – die Schaltfläche hebt sich auch in Graustufen ab. */
.msds-kopf .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.msds-kopf .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--akzent);
	color: #ffffff !important;
}

.msds-kopf .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.msds-kopf .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	fill: #ffffff;
}

/* Aufklappmenüs bleiben türkis mit weißer Schrift – sie liegen über dem
   Inhalt und brauchen eine eigene, geschlossene Fläche. */
.msds-kopf .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--akzent-dunkel);
	border: none;
	padding-block: 0.4rem;
	min-width: 18rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.msds-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.msds-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
	color: #ffffff !important;
	padding: 0.5rem 1rem;
	border-radius: 0;
	font-weight: 400;
}

.msds-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--akzent-hell);
	text-decoration: underline;
}

/* =========================================================================
   BÜHNE DER STARTSEITE – BEGRÜSSUNG IM BILD

   Vorher standen Überschrift und Bild getrennt untereinander. Jetzt sind
   sie ein Band: das Foto als Fläche, der Text darauf.

   Der dunkle Verlauf von links ist keine Verzierung, sondern die
   Bedingung dafür, dass das überhaupt zulässig ist. Weiße Schrift auf
   einem Foto hat keinen berechenbaren Kontrast – morgen liegt dort ein
   helles Sommerbild und der Text ist weg. Der Verlauf legt eine
   dunkle Fläche unter die Schrift und macht den Kontrast damit vom
   Bildinhalt unabhängig: mindestens 4,5:1, egal welches Foto.

   Rechts läuft der Verlauf auf Null aus, damit das Gebäude sichtbar
   bleibt. Deshalb gehört auf die rechte Seite des Fotos das Motiv, auf
   die linke ruhige Fläche.
   ========================================================================= */

/* Der Selektor nennt bewusst beide Klassen. Mit nur .msds-buehnenbanner
   wäre er genauso stark wie die Grundregel .wp-block-cover aus dem
   WordPress-Kern – wer dann gewinnt, hinge an der Ladereihenfolge. */
.wp-block-cover.msds-buehnenbanner {
	position: relative;
	min-height: clamp(16rem, 27vw, 23rem);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--akzent-dunkel);
}

/* Der Verlauf. Liegt über dem Bild, unter dem Text. */
.wp-block-cover.msds-buehnenbanner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(8, 50, 51, 0.92) 0%,
		rgba(8, 50, 51, 0.80) 38%,
		rgba(8, 50, 51, 0.15) 72%,
		rgba(8, 50, 51, 0) 100%
	);
}

/* Der Inhaltskasten. Drei Dinge werden hier festgeschrieben, weil der
   WordPress-Kern sie sonst anders setzt:

     – volle Breite und linksbündig. Der Kern zentriert den Inhalt eines
       Cover-Blocks; hier soll der Text links am Rand des Verlaufs stehen.
     – Weiß. Die Farbe steht zwar zusätzlich am Block selbst, aber wenn
       ein Block im Editor einmal wiederhergestellt wird, gehen solche
       Angaben verloren – dann bliebe dunkle Schrift auf dunklem Grund
       übrig. Deshalb hier noch einmal, wo es nichts verlieren kann.
     – 82 rem Höchstbreite, damit der Text auf großen Monitoren nicht am
       Fensterrand klebt. */

.wp-block-cover.msds-buehnenbanner > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 82rem;
	margin-inline: auto;
	text-align: left;
	color: #ffffff !important;
}

/* Das !important ist hier ausnahmsweise richtig, nicht faul.

   Die Schriftfarbe steht zusätzlich direkt am Block ("style=color:#fff").
   Geht diese Angabe verloren – etwa weil ein Block im Editor einmal
   wiederhergestellt wurde –, bliebe dunkle Schrift auf dunklem Foto
   übrig: unlesbar, und barrierefrei schon gar nicht. Eine gewöhnliche
   CSS-Regel kann das nicht auffangen, weil Angaben direkt am Element
   stärker sind. Mit !important gewinnt das Stylesheet – und damit ist
   die Lesbarkeit unabhängig davon, was im Editor passiert.

   Die Kehrseite: Im Banner lässt sich die Schriftfarbe nicht mehr
   umstellen. Das ist gewollt. Auf einem Foto ist Weiß über der
   Abdunklung die einzige Farbe, deren Kontrast sich garantieren lässt. */

.wp-block-cover.msds-buehnenbanner h1,
.wp-block-cover.msds-buehnenbanner h2,
.wp-block-cover.msds-buehnenbanner h3 {
	color: #ffffff !important;
}

.wp-block-cover.msds-buehnenbanner p {
	color: #eaf3f2 !important;
}

.wp-block-cover.msds-buehnenbanner a:not(.wp-element-button) {
	color: #ffffff !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* Beide Klassen im Selektor, sonst ist die Regel genauso stark wie die
   des Kerns und die Reihenfolge entscheidet. */
.wp-block-cover.msds-buehnenbanner .wp-block-cover__image-background,
.wp-block-cover.msds-buehnenbanner .wp-block-cover__background {
	z-index: 0;
}

.wp-block-cover.msds-buehnenbanner h1 {
	max-width: 22ch;
	text-wrap: balance;
	margin: 0;
}

.wp-block-cover.msds-buehnenbanner p {
	max-width: 40ch;
	margin: 0.6rem 0 0;
}

/* Am Handy hat ein Verlauf von links keinen Platz – die Schrift läge
   dann über dem halben Bild. Dort steht der Text unten, der Verlauf
   läuft von unten nach oben. */
@media (max-width: 781px) {
	.wp-block-cover.msds-buehnenbanner {
		min-height: 15rem;
		align-items: flex-end;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}

	.wp-block-cover.msds-buehnenbanner::after {
		background: linear-gradient(
			180deg,
			rgba(8, 50, 51, 0.15) 0%,
			rgba(8, 50, 51, 0.60) 45%,
			rgba(8, 50, 51, 0.92) 100%
		);
	}

	/* Am Handy wäre die Schriftgröße der Bühne sonst fünf Zeilen lang.
	   Das !important ist hier kein Schmutz: WordPress setzt die Größen
	   aus der theme.json selbst mit !important, anders kommt man nicht
	   dagegen an. */
	.wp-block-cover.msds-buehnenbanner h1 {
		max-width: none;
		font-size: 1.875rem !important;
		line-height: 1.15;
	}
}

/* =========================================================================
   FUSSBEREICH BIS ZUM UNTEREN FENSTERRAND

   Auf kurzen Seiten – "Über uns" ist so eine – endete der Fußbereich
   mitten im Fenster, darunter blieb ein weißer Streifen. Kein Fehler im
   Fußbereich selbst: Die Seite war schlicht kürzer als der Bildschirm,
   und was danach kommt, ist der Hintergrund des Dokuments.

   Die Lösung heißt "sticky footer" und ist seit Jahren Standard:
   Der Seitenrumpf ist mindestens so hoch wie das Fenster, der Inhalt
   dazwischen darf wachsen, und der Fußbereich wird mit "margin-top:
   auto" nach unten geschoben. Auf langen Seiten ändert das nichts –
   dort ist ohnehin kein Platz übrig.

   100svh statt 100vh: Auf dem Handy zählt vh die Adressleiste mit, was
   beim Scrollen ein Springen erzeugt. svh meint die tatsächlich
   sichtbare Höhe. 100vh steht als Rückfalllinie für ältere Browser
   davor.
   ========================================================================= */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > .wp-block-template-part:last-child {
	margin-top: auto;
}

/* =========================================================================
   BREITE NACH INHALT – NICHT NACH SEITE
   ==========================================================================

   Fließtext gehört in eine schmale Spalte, damit das Auge beim
   Zeilenwechsel den Anschluss behält. Eine Tabelle, eine Liste mit
   Download-Schaltflächen oder drei Spalten nebeneinander brauchen
   dagegen Platz – dort gibt es keine Zeilenlänge, die leiden könnte.

   Deshalb entscheidet hier der BLOCKTYP über die Breite, nicht eine
   Einstellung pro Seite. Das hat zwei Gründe:

   1. Es wirkt sofort auf allen Seiten – auch auf den 37 bestehenden,
      auch später auf der Live-Seite, auch an jeder weiteren Schule.
   2. Niemand muss etwas wissen oder einstellen. Wer eine Tabelle
      einfügt, bekommt die richtige Breite geschenkt.

   64 rem sind bewusst nicht die vollen 82: Eine Tabelle soll Luft haben,
   aber nicht über die ganze Seite laufen.

   NICHT in dieser Liste: Spalten, Datei-Blöcke und – seit 1.23.0 – auch
   Tabellen. Alle drei standen einmal darin und ragten dadurch links und
   rechts über die Überschriften und Absätze hinaus, zwischen denen sie
   stehen: Überschrift schmal, Tabelle breit, Text wieder schmal – drei
   verschiedene Kanten übereinander, was wie ein Fehler aussieht.

   Bei Tabellen kam ein zweiter Fehler dazu. Eine Tabelle mit zwei
   schmalen Spalten – "M7" und "Durchschnitt 2,66" – wurde auf 64 rem
   auseinandergezogen, weil Tabellen im Web standardmäßig die volle
   Breite füllen. Zwischen Frage und Antwort lagen dann 30 Zentimeter
   Weiß, und das Auge muss die Zeile suchen. Deshalb sind Tabellen jetzt
   erstens textbreit und wachsen zweitens nur so weit, wie ihr Inhalt es
   verlangt.

   Wer doch eine breite Tabelle braucht – viele Spalten, lange Zahlen –
   wählt im Editor unter "Stile" den Eintrag "Breit". Das ist die
   Ausnahme und muss bewusst gewählt werden.

   NICHT in dieser Liste: der Spalten-Block. Er stand bis Version 1.15
   darin und war damit breiter als der Fließtext darüber und darunter.
   Das Ergebnis sah aus wie ein Fehler – auf "Leitbild und Werte" und auf
   "SMV" besonders deutlich. Der Grund ist, dass Spalten anders als eine
   Tabelle wieder Fließtext enthalten: Zwei Spalten à 32 rem lesen sich
   nicht besser als eine à 46 rem, sie stehen nur weiter außen. Spalten
   folgen deshalb jetzt der normalen Textbreite; die Kante links und
   rechts läuft über die ganze Seite durch.
   ========================================================================= */

:root {
	--msds-breit: 64rem;
}

.wp-block-post-content > .msds-video,
.wp-block-post-content > .wp-block-gallery,
.wp-block-post-content > .wp-block-embed,
.wp-block-post-content > .wp-block-media-text,
.wp-block-post-content > .wp-block-query,
.wp-block-post-content > .wp-block-table.is-style-breit,
.wp-block-post-content > figure.wp-block-table.is-style-breit {
	max-width: var(--msds-breit);
	margin-left: auto;
	margin-right: auto;
}

/* Aufeinanderfolgende Datei-Zeilen sollen wie eine zusammenhängende
   Liste wirken, nicht wie einzeln gesetzte Blöcke. */
.wp-block-post-content > .wp-block-file + .wp-block-file {
	margin-top: 0;
}

/* =========================================================================
   PFADANZEIGE ÜBER DER ÜBERSCHRIFT

   Bewusst zurückhaltend. Ein Pfad ist eine Hilfe für den Fall, dass
   jemand die Orientierung verliert – kein Gestaltungselement. Deshalb:
   kleine Schrift, gedämpfte Farbe, kein Kasten, kein Symbol, keine
   Linie darunter. Wer ihn nicht braucht, übersieht ihn.

   Er erscheint nur auf Seiten, die tatsächlich unter einem Menüpunkt
   hängen. Auf "Formulare" oder "Kontakt" stünde sonst nur
   "Startseite › Formulare" – eine Zeile ohne Information.

   Das Trennzeichen steckt im CSS und nicht im Text. Damit liest es kein
   Screenreader vor, und es lässt sich hier an einer Stelle ändern.
   ========================================================================= */

.msds-pfad {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.4;
	color: var(--wp--preset--color--text-leise);
}

.msds-pfad ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.45rem;
}

.msds-pfad li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.msds-pfad li + li::before {
	content: "\203A";
	color: #b9b2a8;
	speak: never;
}

.msds-pfad a {
	color: inherit;
	text-decoration: none;
}

.msds-pfad a:hover,
.msds-pfad a:focus-visible {
	color: var(--wp--preset--color--akzent-dunkel);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Die aktuelle Seite steht ohne Link und etwas kräftiger – sie ist der
   Bezugspunkt, nicht ein Ziel. */
.msds-pfad [aria-current="page"] {
	color: var(--wp--preset--color--text);
}

/* Die Überschrift rückt direkt unter den Pfad. Ohne diese Zeile stünde
   dazwischen der normale Abstand über einer Überschrift, und beide
   sähen aus wie zwei getrennte Dinge. */
.msds-pfad + .wp-block-post-title {
	margin-top: 0.1rem;
}

@media print {
	.msds-pfad {
		display: none;
	}
}

/* =========================================================================
   BEITRÄGE IN VOLLER LÄNGE

   Auf der Seite "Aus dem Schulleben" stehen die Beiträge nicht als
   Kacheln, sondern vollständig untereinander – mit allen Bildern, so wie
   sie geschrieben wurden. Der neueste steht oben.

   Kacheln sind gut, um viel auf einmal zu zeigen. Sie sind schlecht,
   wenn jemand wirklich lesen will, was am Wandertag passiert ist: Dann
   ist jeder Beitrag ein zweiter Klick, und die Bilder – die eigentliche
   Erinnerung – sieht man gar nicht.

   Die Trennlinie zwischen den Beiträgen ist bewusst dünn und warm statt
   schwarz. Sie soll gliedern, nicht zerschneiden.
   ========================================================================= */

.msds-beitragsliste .wp-block-post-template {
	list-style: none;
	padding-left: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.msds-beitragsliste .wp-block-post-template > li + li {
	border-top: 1px solid #e6ded4;
	padding-top: var(--wp--preset--spacing--50);
}

/* Datum über der Überschrift, ohne Luft dazwischen. */
.msds-beitrag > .wp-block-post-date {
	margin-bottom: 0.15rem;
}

.msds-beitrag > .wp-block-post-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.msds-beitrag > .wp-block-post-title a {
	text-decoration: none;
}

.msds-beitrag > .wp-block-post-title a:hover,
.msds-beitrag > .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

/* Bilder in den Beiträgen bekommen dieselbe abgerundete Kante wie
   überall sonst und laufen nie über die Textspalte hinaus. */
.msds-beitrag .wp-block-post-content img {
	border-radius: 6px;
	height: auto;
}

/* --- Weitere Beiträge laden -------------------------------------------
   Der Knopf ersetzt die Seitennummerierung, sobald das Skript läuft.
   Er bleibt sichtbar und bedienbar, auch wenn die Seite von allein
   nachlädt – für Tastatur und Screenreader ist er der eigentliche
   Auslöser, das automatische Nachladen ist nur eine Bequemlichkeit. */

.msds-mehr-kasten {
	margin-top: var(--wp--preset--spacing--50);
	text-align: center;
}

.msds-mehr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.7rem 1.6rem;
	background-color: var(--wp--preset--color--bernstein);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
}

.msds-mehr:hover {
	background-color: var(--wp--preset--color--bernstein-hell);
}

.msds-mehr[disabled] {
	background-color: var(--wp--preset--color--text-leise);
	cursor: default;
}

.msds-mehr-melder {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
	min-height: 1.4em;
}

/* =========================================================================
   TABELLEN
   ========================================================================= */

/* Nur so breit wie der Inhalt. Ohne diese Zeile zieht der Browser jede
   Tabelle auf die volle Breite des Absatzes – bei zwei kurzen Spalten
   stehen Frage und Antwort dann weit auseinander. */
.wp-block-table table {
	width: auto;
	max-width: 100%;
}

/* Eine "breite" Tabelle darf ihre Spalten dagegen ausnutzen. */
.wp-block-table.is-style-breit table {
	width: 100%;
}

/* Die Streifen des WordPress-Standards sind neutralgrau und wirken
   neben der warmen Palette wie ein Fremdkörper. Dieselbe Farbe wie die
   Infokästen macht die Tabelle zu einem Teil der Seite. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--warm-hell);
}

.wp-block-table.is-style-stripes {
	border-bottom: none;
}

.wp-block-table th {
	text-align: left;
	padding: 0.5rem 1.25rem 0.5rem 0.75rem;
}

.wp-block-table td {
	padding: 0.55rem 1.25rem 0.55rem 0.75rem;
}

/* =========================================================================
   SCHALTFLÄCHEN – ZWEI STUFEN
   Bewusst nur zwei. Drei Stufen erkennt niemand mehr auseinander.

   ERSTE STUFE, Bernstein gefüllt: die eine wichtige Handlung eines
   Abschnitts. Weiße Schrift auf #975a16 ergibt 5,54:1.

   Warum Bernstein und nicht Türkis: Türkis ist bereits die
   Navigationsleiste und jeder Link im Fließtext. Wären Schaltflächen
   ebenfalls türkis, hätte alles Wichtige dieselbe Farbe – und dann
   sticht nichts mehr hervor. Bernstein erscheint nur dort, wo etwas
   passiert.

   ZWEITE STUFE, umrandet: für Wiederholungen. Eine Seite mit fünfzehn
   gleich lauten Schaltflächen hat keine Rangfolge mehr.
   ========================================================================= */

/* Weiße Schrift auf gefüllten Schaltflächen absichern – ohne diese Regel
   gewinnt in manchen Blöcken die globale Linkfarbe. */
.wp-element-button,
.wp-block-button__link,
.wp-block-file__button {
	text-decoration: none;
}

.wp-block-button:not(.is-style-zweitrangig) .wp-block-button__link {
	color: #ffffff !important;
}

/* --- Zweite Stufe: Umrandung statt Füllung --------------------------- */

.wp-block-button.is-style-zweitrangig .wp-block-button__link,
.wp-block-file__button {
	background-color: transparent !important;
	color: var(--wp--preset--color--akzent) !important;
	border: 2px solid var(--wp--preset--color--akzent);
	font-weight: 600;
	padding: 0.45rem 1.1rem;
	border-radius: 4px;
	box-shadow: none;
}

.wp-block-button.is-style-zweitrangig .wp-block-button__link:hover,
.wp-block-file__button:hover,
.wp-block-file__button:focus {
	background-color: var(--wp--preset--color--akzent) !important;
	color: #ffffff !important;
}

/* =========================================================================
   DOWNLOAD-ZEILEN
   Auf der Formulare-Seite stehen viele Dateien untereinander. Ohne
   Vorkehrung beginnt jede Schaltfläche an einer anderen Stelle, weil die
   Dateinamen unterschiedlich lang sind – das ergibt eine ausgefranste
   Kante quer über die Seite.

   Hier stattdessen: Name links, Schaltfläche rechtsbündig, dünne Linie
   dazwischen. Der Dateiname ist die Information, die Schaltfläche nur
   die Handlung – deshalb ist der Name jetzt der lautere Teil.
   ========================================================================= */

.wp-block-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
	padding: 0.85rem 0;
	margin: 0;
	border-bottom: 1px solid #e6ded4;
}

.wp-block-file > a:not(.wp-block-file__button) {
	flex: 1 1 20rem;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.35;
}

.wp-block-file > a:not(.wp-block-file__button):hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.wp-block-file__button {
	flex: 0 0 auto;
	margin-left: 0;
	font-size: var(--wp--preset--font-size--klein);
}

/* Am Handy stehen Name und Schaltfläche untereinander.

   Wichtig dabei: das "flex: 1 1 20rem" von oben muss zurückgenommen
   werden. In einer Spalte bezieht sich die Grundgröße nicht mehr auf
   die Breite, sondern auf die HÖHE – der Dateiname bekommt dann 20rem
   Höhe zugewiesen und darunter klafft eine riesige Lücke bis zur
   Schaltfläche. Ein klassischer Stolperstein bei Flexbox. */

@media (max-width: 600px) {
	.wp-block-file {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		padding: 0.7rem 0;
	}

	.wp-block-file > a:not(.wp-block-file__button) {
		flex: 0 0 auto;
		width: 100%;
	}

	.wp-block-file__button {
		flex: 0 0 auto;
	}
}

/* =========================================================================
   BEITRAGSKACHELN AUF DER STARTSEITE
   Der Grund, warum die Startseite trotz Lesespalte den Bildschirm füllt:
   Der Platz wird mit Inhalt gefüllt, nicht mit längeren Zeilen. Jede
   Kachel bleibt schmal und damit gut lesbar – drei nebeneinander
   nutzen die Breite aus.
   ========================================================================= */

.msds-kacheln > li {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--basis);
	border: 1px solid #e6ded4;
	border-radius: 6px;
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--20);
}

.msds-kacheln > li > * {
	padding-inline: var(--wp--preset--spacing--20);
}

/* Das Bild soll bündig am Kachelrand sitzen, nicht eingerückt. */
.msds-kacheln > li > .wp-block-post-featured-image {
	padding-inline: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.msds-kacheln > li > .wp-block-post-featured-image img {
	width: 100%;
	display: block;
}

.msds-kacheln > li > .wp-block-post-title {
	margin-block-start: 0.2em;
}

/* --- Beiträge ohne Bild -------------------------------------------------
   Ohne Vorkehrung klafft in solchen Kacheln eine leere Fläche, weil das
   Raster alle Kacheln auf gleiche Höhe zieht. Statt eines Lochs bekommt
   die Kachel eine ruhige gemusterte Fläche im selben Seitenverhältnis
   wie ein Foto. Das hält den Rhythmus der Reihe, ohne ein Bild
   vorzutäuschen, das es nicht gibt.

   Rein dekorativ: Das Muster steht in keinem Textzusammenhang und wird
   von Screenreadern nicht vorgelesen. */

.msds-kacheln > li:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--warm-hell);
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(14, 125, 127, 0.07) 0 14px,
			rgba(14, 125, 127, 0) 14px 28px
		);
	border-bottom: 1px solid #e6ded4;
}

/* Sicherheitsnetz für ältere Browser ohne :has() – dort erscheint kein
   Muster, aber der Inhalt fließt sauber von oben statt auseinandergezogen
   zu werden. */
.msds-kacheln > li > .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--10);
}

/* Abschnittsüberschrift mit Bernstein-Unterstrich.
   Die warme Zweitfarbe taucht hier zum ersten Mal sichtbar auf –
   sparsam eingesetzt, damit sie Wirkung behält. */

.msds-abschnitt {
	border-bottom: 4px solid var(--wp--preset--color--bernstein);
	padding-bottom: 0.3em;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* =========================================================================
   INFOKACHELN
   Damit die Schaltflächen der drei Spalten auf einer Linie sitzen, auch
   wenn die Texte darüber unterschiedlich lang sind.
   ========================================================================= */

.msds-infokachel {
	display: flex;
	flex-direction: column;
}

.msds-infokachel .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* =========================================================================
   FUSSBEREICH
   Bewusst hell statt dunkel. Eine dunkle Fußzeile wirkt am Seitenende
   wie ein Schlussstrich; eine warme helle setzt den offenen Eindruck
   der Seite fort. Und sie ist gutmütiger: Auf dunklem Grund fällt jeder
   Farbfehler sofort auf die Lesbarkeit durch.
   ========================================================================= */

.msds-footer {
	border-top: 4px solid var(--wp--preset--color--akzent);
}

/* Auf der kräftigen warmen Fläche erreicht das normale Türkis nur
   4,03:1 und fällt damit knapp durch. Das dunklere kommt auf 5,75:1. */
.msds-footer a,
.msds-footer a:visited {
	color: var(--wp--preset--color--akzent-dunkel) !important;
}

.msds-footer .wp-block-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* =========================================================================
   DREI GRÖSSENSTUFEN
   Ein Layout, drei Verhaltensweisen – kein zweites Design.
   ========================================================================= */

/* --- Handy: bis 781 px --------------------------------------------------
   Spalten stapeln sich hier bereits durch WordPress selbst. Ergänzt wird
   nur, was sonst zu gedrängt wirkt. */

@media (max-width: 781px) {

	/* Kacheln auf dem Handy einspaltig. */
	.msds-kacheln {
		grid-template-columns: 1fr !important;
	}

	.msds-willkommen {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	/* --- Kopfbereich am Handy ------------------------------------------
	   Auf 393 Punkten Breite nahm das Logo bisher rund ein Drittel der
	   sichtbaren Höhe ein. Wer die Seite öffnet, sieht dann zuerst das
	   Logo – und muss scrollen, um zu erfahren, worum es geht. Das Logo
	   soll die Schule ausweisen, nicht den Bildschirm füllen.

	   62 px sind bewusst kein Minimalwert: Der Schriftzug unter dem
	   Wappen muss lesbar bleiben, sonst wird das Logo zum Fleck. */

	.msds-kopf {
		padding-top: 0.6rem !important;
		padding-bottom: 0.6rem !important;
	}

	.msds-kopf .wp-block-site-logo img {
		max-height: 62px;
	}

	/* --- Menü-Schaltfläche ---------------------------------------------
	   Seit 1.17 steht sie neben dem Logo statt in einem eigenen Band.
	   Damit sie trotzdem sofort als Schaltfläche zu erkennen ist, ist sie
	   jetzt türkis gefüllt: Sie ist damit die einzige Farbfläche im Kopf.
	   Weiß auf #0e7d7f ergibt 4,93:1 und erfüllt AA.

	   Die Beschriftung "Menü" steht bewusst neben dem Symbol. Drei
	   Striche allein sind eine Konvention, die keineswegs alle kennen –
	   an einer Schulseite lesen auch Großeltern mit.

	   Innenabstand so gewählt, dass die Schaltfläche mindestens 44 x 44
	   Punkte misst (WCAG 2.5.5 / iOS-Richtwert für Tippziele). */

	.msds-kopf .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		padding: 0.4rem 0.9rem;
		background-color: var(--wp--preset--color--akzent);
		color: #ffffff;
		border: 2px solid var(--wp--preset--color--akzent-dunkel);
		border-radius: 4px;
		font-size: 1.0625rem;
		font-weight: 600;
		line-height: 1.2;
	}

	.msds-kopf .wp-block-navigation__responsive-container-open svg {
		fill: #ffffff;
	}

	/* Das Schließen-Kreuz liegt im aufgeklappten, dunklen Menü. */
	.msds-kopf .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--basis);
	}

	.msds-kopf .wp-block-navigation__responsive-container-open::after {
		content: "Menü";
	}

	.msds-kopf .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
	}

	.msds-kopf .wp-block-navigation {
		justify-content: flex-end;
	}

	/* Im aufgeklappten Menü gilt wieder Weiß auf Türkis-dunkel – die
	   Regel aus dem Kopfbereich (Türkis auf Weiß) muss dort weichen. */
	.msds-kopf .is-menu-open .wp-block-navigation-item__content,
	.msds-kopf .is-menu-open .wp-block-navigation-item__content:visited,
	.msds-kopf .is-menu-open a,
	.msds-kopf .is-menu-open a:visited {
		color: #ffffff !important;
		background-color: transparent !important;
	}

	.msds-kopf .is-menu-open .wp-block-navigation__submenu-icon {
		fill: #ffffff;
	}

	/* --- Das aufgeklappte Menü ------------------------------------------
	   Vorher standen Ober- und Unterpunkte mittig untereinander, gleich
	   groß, nur durch die Schriftstärke unterschieden. Das reicht nicht:
	   Wer "Schulleitung" liest, muss auf einen Blick erkennen, dass es
	   unter "Ansprechpartner" gehört.

	   Drei Mittel gleichzeitig, weil ein einzelnes zu leise ist:
	     – Oberpunkte deutlich größer und fett
	     – eine dünne Trennlinie vor jedem neuen Oberpunkt
	     – Unterpunkte vom rechten Rand eingerückt

	   Bewusst NICHT über eine hellere Schriftfarbe: Ein gedämpftes Weiß
	   auf Türkis fällt unter die geforderten 4,5:1. Größe, Stärke und
	   Einrückung kosten keinen Kontrast.

	   Rechtsbündig, wie du es erwartet hast – und wie es sinnvoll ist:
	   Die Menü-Schaltfläche sitzt rechts, der Daumen ist dort. */

	.msds-kopf .is-menu-open .wp-block-navigation__responsive-container-content,
	.msds-kopf .is-menu-open .wp-block-navigation__container {
		width: 100%;
		align-items: flex-end;
		text-align: right;
		gap: 0 !important;
	}

	/* Oberpunkte */
	.msds-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		align-items: flex-end;
		border-top: 1px solid rgba(255, 255, 255, 0.35);
		margin-top: 0.5rem;
		padding-top: 0.5rem;
	}

	.msds-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}

	.msds-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		min-height: 44px;
		padding: 0.4rem 0;
		font-size: 1.3125rem;
		font-weight: 700;
	}

	/* Unterpunkte */
	.msds-kopf .is-menu-open .wp-block-navigation__submenu-container {
		width: 100%;
		align-items: flex-end;
		background-color: transparent !important;
		padding: 0 !important;
		min-width: 0;
		gap: 0 !important;
	}

	.msds-kopf .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
		align-items: flex-end;
	}

	.msds-kopf .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		min-height: 44px;
		/* Rechts eingerückt: Der Bezugsrand ist hier der rechte. */
		padding: 0.3rem 1.5rem 0.3rem 0;
		font-size: 1.0625rem;
		font-weight: 400;
	}

	/* Fußzeile einspaltig, aber mit Luft zwischen den Blöcken */
	.msds-footer .wp-block-column {
		margin-bottom: var(--wp--preset--spacing--30);
	}

}

/* --- Tablet: 782 bis 1024 px -------------------------------------------
   Ohne diese Regel quetscht WordPress vier Spalten nebeneinander –
   auf einem iPad hochkant sind das rund 170 px je Spalte. Stattdessen
   zwei mal zwei. */

@media (min-width: 782px) and (max-width: 1024px) {

	.msds-infoband .wp-block-columns,
	.msds-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.msds-infoband .wp-block-column,
	.msds-footer .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--20)) !important;
		flex-grow: 0;
	}

	/* Beitragskacheln auf dem Tablet zweispaltig statt dreispaltig. */
	.msds-kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

}

/* --- Desktop: ab 1025 px ------------------------------------------------
   Volle Aufteilung. Die Lesespalte bleibt bei 46rem, damit Zeilen nicht
   länger als etwa 75 Zeichen werden – über die volle Bildschirmbreite
   verliert das Auge beim Zeilenwechsel den Anschluss. Die farbigen
   Bänder dagegen laufen von Rand zu Rand. */

@media (min-width: 1025px) {

	.msds-willkommen {
		padding-top: var(--wp--preset--spacing--60);
		padding-bottom: var(--wp--preset--spacing--60);
	}
}

/* --- Tabellen ----------------------------------------------------------
   Schulseiten enthalten viele Tabellen (Stundenpläne, Termine, Zeiten).
   Auf schmalen Bildschirmen horizontal scrollbar statt gequetscht. */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table th {
	text-align: left;
}

/* =========================================================================
   KACHELN BLENDEN BEIM SCROLLEN AUF

   Bewusst zurückhaltend: 18 Pixel nach oben, eine halbe Sekunde, kein
   Zoom, kein Wackeln. Der Effekt soll auffallen, ohne dass jemand
   darauf wartet – eine Schulseite ist kein Werbeauftritt.

   Drei Vorkehrungen, damit daraus kein Barriere-Problem wird:

   1. Der Ausgangszustand (unsichtbar) wird NUR gesetzt, wenn die
      Klasse "msds-js" am <html>-Element hängt. Die setzt das Skript
      selbst. Ohne JavaScript – oder wenn das Skript scheitert – ist
      alles von Anfang an sichtbar. Inhalte dürfen niemals von
      JavaScript abhängen.
   2. Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
      sieht die Kacheln sofort und ohne Übergang (WCAG 2.3.3).
      Diese Regel steht bewusst NACH der allgemeinen und setzt die
      Deckkraft ausdrücklich auf 1 zurück.
   3. Jede Kachel wird nach dem Aufblenden nicht mehr beobachtet.
      Beim Zurückscrollen verschwindet also nichts wieder.
   ========================================================================= */

.msds-js .msds-kacheln > li {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	will-change: opacity, transform;
}

.msds-js .msds-kacheln > li.ist-sichtbar {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Leichte Staffelung, damit eine Reihe nicht wie ein Block umklappt.
   Nur ab Tablet-Breite – am Handy steht ohnehin eine Kachel pro Reihe. */

@media (min-width: 782px) {
	.msds-js .msds-kacheln > li:nth-child(3n + 2) {
		transition-delay: 0.09s;
	}

	.msds-js .msds-kacheln > li:nth-child(3n + 3) {
		transition-delay: 0.18s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msds-js .msds-kacheln > li,
	.msds-js .msds-kacheln > li.ist-sichtbar {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}

/* =========================================================================
   PASSWORTABFRAGE DES INTERNEN BEREICHS

   Bewusst freundlich und ruhig gestaltet: keine Warnfarbe, kein Schloss.
   Wer hier landet, hat nichts falsch gemacht.

   Das Eingabefeld ist absichtlich groß. Passwörter werden verdeckt
   eingegeben – wer sich vertippt, sieht es nicht und muss von vorn
   anfangen. Ein knapp bemessenes Feld macht das häufiger.
   ========================================================================= */

.msds-intern-tor {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--40) auto;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--warm-hell);
	border-left: 4px solid var(--wp--preset--color--akzent);
	border-radius: 4px;
}

.msds-intern-tor > p:first-child {
	margin-top: 0;
}

.msds-intern-tor form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--20);
}

.msds-intern-tor label {
	display: block;
	width: 100%;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.msds-intern-tor input[type="password"] {
	flex: 1 1 14rem;
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	font-size: 1.0625rem;
	border: 2px solid #c9bcab;
	border-radius: 4px;
	background: var(--wp--preset--color--basis);
}

.msds-intern-tor input[type="password"]:focus {
	border-color: var(--wp--preset--color--akzent);
}

.msds-intern-tor button {
	flex: 0 0 auto;
	min-height: 44px;
}

.msds-intern-hilfe {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
}

@media (max-width: 600px) {
	.msds-intern-tor input[type="password"],
	.msds-intern-tor button {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   VIDEOS MIT ZWEI-KLICK-LÖSUNG

   Die Vorschaltfläche zeigt bewusst KEIN Vorschaubild. Ein solches käme
   von einem Google-Server und wäre damit genau die Verbindung, die die
   Zwei-Klick-Lösung vermeiden soll. Stattdessen: ruhige Fläche in der
   Schulfarbe, Titel, Hinweis, Schaltfläche.

   Das 16:9-Verhältnis wird schon vor dem Laden eingehalten. Sonst
   springt der restliche Seiteninhalt beim Klick nach unten weg.
   ========================================================================= */

.msds-video {
	position: relative;
	margin: var(--wp--preset--spacing--30) 0;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--akzent-dunkel);
}

.msds-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.msds-video__tor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.msds-video__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-klein);
	font-weight: 600;
	line-height: 1.25;
	color: #ffffff;
}

.msds-video__dauer {
	font-weight: 400;
	opacity: 0.85;
}

/* Der Hinweistext ist bewusst nicht gedämpft grau: Weiß auf
   Schulfarbe dunkel ergibt 8,44:1 – er soll gelesen werden, nicht
   höflich im Hintergrund stehen. */
.msds-video__hinweis {
	max-width: 34rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: #ffffff;
}

.msds-video__start {
	margin-top: 0.25rem;
	min-height: 44px;
	cursor: pointer;
	border: 0;
}

.msds-video__alt {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
}

.msds-video__alt a {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Auf sehr flachen Flächen – Handy quer – wird es sonst eng. */
@media (max-width: 600px) {
	.msds-video__hinweis {
		display: none;
	}

	.msds-video {
		aspect-ratio: auto;
		min-height: 15rem;
	}

	.msds-video--laeuft {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

/* =========================================================================
   AUFKLAPPBARE ABSCHNITTE (Block "Details")

   Wird für die schriftlichen Fassungen der Videoanleitungen genutzt.
   Der Block bringt von sich aus keinerlei Gestaltung mit – ohne die
   folgenden Regeln sieht ein zugeklappter Abschnitt aus wie ein
   versehentlich fett gesetzter Satz.
   ========================================================================= */

.wp-block-details {
	margin: var(--wp--preset--spacing--20) 0;
	padding: 0 var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--warm-hell);
	border: 1px solid #e6ded4;
	border-radius: 4px;
}

.wp-block-details summary {
	padding: 0.85rem 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--akzent-dunkel);
	cursor: pointer;
	list-style-position: outside;
}

.wp-block-details summary::marker {
	color: var(--wp--preset--color--bernstein);
}

.wp-block-details[open] summary {
	border-bottom: 1px solid #e6ded4;
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-details > *:last-child {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* =========================================================================
   ÜBERSICHT DER UNTERSEITEN

   Die erste Fassung war ein Raster aus gleich großen Kacheln, in denen
   nur der Seitentitel stand. Das sah aus wie eine Schalttafel und war
   kaum mehr wert als das Menü darüber – man erfuhr nichts, was man nicht
   schon wusste.

   Jetzt untereinander, volle Breite, und jede Zeile trägt neben dem
   Titel einen erklärenden Satz. Der kommt aus dem Feld "Auszug" der
   jeweiligen Seite. Erst dadurch wird aus der Aufzählung ein Wegweiser.

   Untereinander statt nebeneinander ist Absicht: Bei sieben Einträgen
   in zwei Spalten sucht das Auge die Reihenfolge; eine Spalte liest man
   einfach von oben nach unten.
   ========================================================================= */

.msds-unterseiten {
	list-style: none;
	padding-left: 0;
	margin: var(--wp--preset--spacing--30) 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.msds-unterseiten > li {
	margin: 0;
	list-style: none;
}

.msds-unterseiten > li > a {
	display: block;
	padding: 0.9rem 1.2rem;
	background: var(--wp--preset--color--warm-hell);
	border: 1px solid #e6ded4;
	border-left: 4px solid var(--wp--preset--color--akzent);
	border-radius: 4px;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.msds-unterseiten__titel {
	display: block;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--akzent-dunkel);
}

/* Der erklärende Satz ist bewusst kleiner und ruhiger – er soll beim
   Überfliegen nicht mit dem Titel konkurrieren, aber lesbar bleiben.
   #686868 auf #fbf4ec ergibt 5,32:1 und erfüllt damit AA. */
.msds-unterseiten__text {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.45;
	color: var(--wp--preset--color--text-leise);
}

.msds-unterseiten > li > a:hover,
.msds-unterseiten > li > a:focus-visible {
	background: var(--wp--preset--color--warm);
	border-left-color: var(--wp--preset--color--bernstein);
}

.msds-unterseiten > li > a:hover .msds-unterseiten__titel,
.msds-unterseiten > li > a:focus-visible .msds-unterseiten__titel {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Druckansicht ------------------------------------------------------
   Formulare und Terminübersichten werden an Schulen häufig ausgedruckt. */

@media print {
	/* Aufklappbare Abschnitte werden ausgedruckt, auch wenn sie am
	   Bildschirm zugeklappt sind. Sonst druckt jemand eine Anleitung
	   aus und hält nur die Überschriften in der Hand. */
	.wp-block-details > *:not(summary) {
		display: block !important;
	}

	.msds-video {
		display: none;
	}

	.msds-js .msds-kacheln > li {
		opacity: 1;
		transform: none;
	}

	.wp-block-navigation,
	.wp-block-search,
	.wp-site-blocks > footer {
		display: none;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}