/* ==========================================================================
   OS West Schönau St.Gallen — Design-System
   Farben und Typografie nach dem Erscheinungsbild der Stadt St.Gallen.
   Version 0.1.0
   ========================================================================== */

:root {
	/* Marke */
	--os-red: #e2001a;
	--os-red-deep: #b00014;
	--os-black: #1a1a1a;
	--os-text: #2b2b2b;
	--os-paper: #ffffff;
	--os-mute: #f8f9fa;
	--os-border: #e5e5e5;
	--os-soft: #6f6f6f;

	/* Invertierte Bänder */
	--os-band-bg: #1a1a1a;
	--os-band-fg: #ffffff;
	--os-band-soft: rgba(255, 255, 255, .66);
	--os-band-line: rgba(255, 255, 255, .14);

	/* Typografie */
	--os-font: "LinotypeUniversW01-Regu", "Univers", Arial, Helvetica, sans-serif;
	--os-font-head: "LinotypeUniversW01-Bold_723697", "Univers", Arial, Helvetica, sans-serif;

	/* Raster */
	--os-skew: -12deg;
	--os-shell: 1240px;
	--os-gut: clamp(16px, 4vw, 48px);
	--os-radius: 4px;
}

/* Grundlagen ------------------------------------------------------------- */

body.osw {
	margin: 0;
	background: var(--os-paper);
	color: var(--os-text);
	font-family: var(--os-font);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

/* ==========================================================================
   Grundregeln in einer eigenen Kaskadenschicht.
   Alles in @layer verliert grundsätzlich gegen CSS ohne Schicht – unabhängig
   von der Spezifität. Damit behalten andere Plugins wie die Projektarbeit die
   Hoheit über ihre eigenen Knöpfe, Überschriften und Links, während unsere
   Vorlagen weiterhin greifen (ihre Klassen stehen ausserhalb der Schicht).
   ========================================================================== */

@layer osw-grund {
	.osw h1, .osw h2, .osw h3, .osw h4 {
		font-family: var(--os-font-head);
		color: var(--os-black);
		margin: 0;
		line-height: 1.12;
		font-weight: 700;
		text-wrap: balance;
	}

	.osw p { margin: 0 0 1em; }
	.osw p:last-child { margin-bottom: 0; }
	.osw a { color: inherit; }
	.osw img { max-width: 100%; height: auto; }
	.osw button { font: inherit; color: inherit; }
}

/* Ausgeblendetes bleibt ausgeblendet.
   Der Browser setzt für [hidden] nur display:none – jede eigene Regel mit
   display:flex oder display:grid gewinnt dagegen. Genau das liess Filter und
   Tagesablauf ins Leere laufen: Das Skript setzte .hidden, sichtbar blieb alles. */
.osw [hidden] { display: none !important; }
.osw :focus-visible { outline: 3px solid var(--os-red); outline-offset: 3px; }

.osw-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--os-red); color: #fff; padding: 12px 18px; text-decoration: none;
}
.osw-skip:focus { left: 0; }

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

.osw-shell {
	max-width: var(--os-shell);
	margin-inline: auto;
	padding-inline: var(--os-gut);
}

/* Werkzeugseiten brauchen Platz: Raster, Tabellen und Filterleisten fremder
   Plugins sind nicht für eine Textspalte gebaut. */
.osw-shell--breit { max-width: 1600px; }
.osw-werkzeug { padding-block: clamp(28px, 4vw, 48px); }

.osw-eyebrow {
	display: block;
	font-family: var(--os-font-head);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--os-red);
	font-weight: 700;
}
.osw-eyebrow--dim { color: var(--os-soft); }

.osw-lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 58ch; }
.osw-hinweis { color: var(--os-soft); }

/* Fahnenband ------------------------------------------------------------- */

.osw-flag { display: inline-flex; gap: 3px; align-items: center; }
.osw-flag i { display: block; width: 13px; height: 21px; transform: skewX(var(--os-skew)); }
.osw-flag i:first-child { background: var(--os-red); }
.osw-flag i:last-child { background: var(--os-black); }
.osw-flag--lg i { width: 20px; height: 33px; }

/* Kopfbereich ------------------------------------------------------------ */

.osw-topbar {
	background: var(--os-mute);
	border-bottom: 1px solid var(--os-border);
	font-size: .8rem;
	color: var(--os-soft);
}
.osw-topbar .osw-shell {
	display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end;
	padding-block: 7px;
}
/* Seit 0.17 trägt die Zeile nur noch die Servicelinks und erscheint nur,
   wenn welche eingetragen sind. Auf schmalen Bildschirmen nie – dort stehen
   die Links im aufgeklappten Menü. */
@media (max-width: 980px) {
	.osw-topbar { display: none; }
}
.osw-topbar b { color: var(--os-text); font-weight: 600; }
.osw-topbar a { text-decoration: none; }

.osw-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--os-border);
}
.admin-bar .osw-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .osw-nav { top: 46px; } }
/* Unter 600 px steht die WordPress-Adminleiste nicht mehr fest, sondern
   rollt mit weg. Der Kopf klebte dann 46 px unter einem leeren Streifen –
   sichtbar nur für Angemeldete auf dem Handy (0.17.2). */
@media screen and (max-width: 600px) { .admin-bar .osw-nav { top: 0; } }

.osw-nav > .osw-shell {
	display: flex; align-items: center; gap: 28px; padding-block: 14px;
}
.osw-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.osw-logo { display: block; height: 52px; width: auto; max-width: min(420px, 52vw); }
@media (max-width: 860px) { .osw-logo { height: 40px; } }
.osw-wm { font-family: var(--os-font-head); line-height: 1; }
.osw-wm b {
	display: block; font-size: 1.22rem; letter-spacing: .01em;
	color: var(--os-black); font-weight: 700;
}
.osw-wm span {
	display: block; font-size: .62rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--os-soft); margin-top: 3px;
}

.osw-menu { margin-left: auto; }
.osw-menu ul,
.osw-menu > li { list-style: none; }
.osw-menu { display: flex; gap: 2px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.osw-menu li { position: relative; list-style: none; }
.osw-menu a {
	position: relative; display: block; text-decoration: none;
	font-size: .95rem; padding: 8px 13px; font-weight: 500;
}
.osw-menu a::after {
	content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 3px;
	background: var(--os-red); transform: skewX(var(--os-skew)) scaleX(0);
	transform-origin: left; transition: transform .18s ease;
}
.osw-menu a:hover::after,
.osw-menu .current-menu-item > a::after,
.osw-menu .current_page_item > a::after { transform: skewX(var(--os-skew)) scaleX(1); }

.osw-menu .sub-menu,
.osw-menu .children {
	position: absolute; left: 0; top: 100%; min-width: 250px;
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-top: 3px solid var(--os-red);
	padding: 6px 0; margin: 0; display: none; z-index: 20;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.osw-menu li:hover > .sub-menu,
.osw-menu li:focus-within > .sub-menu,
.osw-menu li:hover > .children,
.osw-menu li:focus-within > .children { display: block; }
.osw-menu .sub-menu a::after, .osw-menu .children a::after { display: none; }
.osw-menu .sub-menu a:hover, .osw-menu .children a:hover { background: var(--os-mute); }

.osw-burger {
	display: none; margin-left: auto; background: none; border: 2px solid var(--os-border);
	border-radius: var(--os-radius); width: 46px; height: 42px; cursor: pointer; position: relative;
}
.osw-burger span[aria-hidden] {
	position: absolute; left: 12px; right: 12px; top: 50%; height: 2px;
	background: var(--os-black); transform: translateY(-50%);
	box-shadow: 0 -7px 0 var(--os-black), 0 7px 0 var(--os-black);
}
.osw-mobile { border-top: 1px solid var(--os-border); background: var(--os-paper); }
.osw-mobile ul, .osw-mobile li { list-style: none; margin: 0; padding: 0; }
.osw-mobile a {
	display: block; padding: 13px 0; text-decoration: none;
	border-bottom: 1px solid var(--os-border); font-weight: 600;
}
.osw-mobile .sub-menu a, .osw-mobile .children a { padding-left: 18px; font-weight: 400; }

/* Punkte mit Unterpunkten: Link links, Aufklappknopf rechts. Der Knopf ist
   44 Pixel breit und hoch – das ist die Fläche, die ein Daumen sicher trifft.
   Die Linie unter der Zeile zieht der Knopf mit, damit die Reihe optisch
   eine bleibt. */
.osw-mobile .osw-hat-unter {
	display: grid; grid-template-columns: minmax(0, 1fr) 44px;
	align-items: stretch;
}
.osw-mobile .osw-hat-unter > a { grid-column: 1; }
.osw-mobile .osw-hat-unter > ul { grid-column: 1 / -1; }
.osw-untermenue__knopf {
	grid-column: 2;
	display: grid; place-items: center;
	background: none; border: 0; cursor: pointer; padding: 0;
	border-bottom: 1px solid var(--os-border);
	color: var(--os-text);
}
.osw-untermenue__knopf > span[aria-hidden] {
	width: 9px; height: 9px; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .16s ease;
}
.osw-untermenue__knopf[aria-expanded="true"] > span[aria-hidden] {
	transform: rotate(-135deg); margin-top: 3px;
}
/* Nur dort einfärben, wo es einen echten Zeiger gibt: Auf dem Handy
   bleibt ein :hover nach dem Antippen sonst hängen, und der Pfeil wäre
   ohne Grund rot. */
@media (hover: hover) {
	.osw-untermenue__knopf:hover { color: var(--os-red); }
}
.osw-untermenue__knopf:focus-visible { outline: 2px solid var(--os-red); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
	.osw-untermenue__knopf > span[aria-hidden] { transition: none; }
}

/* Schaltflächen ---------------------------------------------------------- */

.osw-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--os-red); color: #fff; border: none;
	padding: 12px 22px; border-radius: var(--os-radius);
	font-family: var(--os-font-head); font-weight: 700; font-size: .93rem;
	text-decoration: none; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.osw-btn:hover { background: var(--os-red-deep); transform: translateY(-1px); color: #fff; }
.osw-btn--ghost { background: transparent; color: var(--os-black); border: 2px solid var(--os-border); }
.osw-btn--ghost:hover { background: var(--os-mute); border-color: var(--os-black); color: var(--os-black); }
.osw-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Hero ------------------------------------------------------------------- */

.osw-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--os-border); }
.osw-hero > .osw-shell {
	padding-block: clamp(48px, 7vw, 86px) clamp(40px, 6vw, 72px);
	position: relative; z-index: 2;
}
.osw-hero__band { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.osw-hero__band i { position: absolute; top: -25%; height: 150%; transform: skewX(var(--os-skew)); }
.osw-hero__band i:nth-child(1) { right: 12%; width: 120px; background: var(--os-red); opacity: .065; }
.osw-hero__band i:nth-child(2) { right: 3%;  width: 180px; background: var(--os-black); opacity: .045; }

.osw-hero__media { position: absolute; inset: 0; z-index: 1; }
.osw-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.osw-hero--bild::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 46%, rgba(255,255,255,.55) 78%, rgba(255,255,255,.3) 100%);
}
.osw-hero--bild > .osw-shell { z-index: 3; }

.osw-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 64px);
	align-items: end;
}
.osw-hero__titel {
	font-size: clamp(2.5rem, 6.4vw, 5rem);
	font-weight: 800;
	letter-spacing: -.022em;
	margin-block: 18px 20px;
}
.osw-hero__titel em { font-style: normal; color: var(--os-red); }

/* Auftakt über den ganzen Sichtbereich (0.16) -----------------------------
   Das Bild trägt, der Text steht darauf. Die Höhe richtet sich nach dem,
   was tatsächlich sichtbar ist: 100svh abzüglich Topbar und Navigation.
   --os-kopf setzt das Skript aus den gemessenen Höhen; fehlt es, greift
   der Ersatzwert, und die Seite sieht trotzdem richtig aus. */
.osw-hero--voll {
	position: relative; isolation: isolate;
	display: grid; align-content: center;
	/* Deckel 1040 statt 1000 (0.17): Ohne Adresszeile ist der Kopf niedriger.
	   Auf einem gewöhnlichen 1080er-Bildschirm blieb unter dem Auftakt sonst
	   ein Streifen der nächsten Sektion stehen. */
	min-height: clamp(460px, calc(100svh - var(--os-kopf, 82px)), 1040px);
	border-bottom: 0;
	color: #fff;
}
.osw-hero--voll > .osw-shell {
	padding-block: clamp(48px, 8vh, 96px);
	z-index: 2;
}

/* Der Schleier: unten und oben dunkler, damit Text und Knöpfe überall
   lesbar bleiben – unabhängig davon, welches Bild eingesetzt wird. */
.osw-hero--voll.osw-hero--bild::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(12, 12, 14, .78) 0%, rgba(12, 12, 14, .42) 42%, rgba(12, 12, 14, .82) 100%);
}
.osw-hero--voll .osw-hero__media { position: absolute; inset: 0; z-index: 0; }
.osw-hero--voll .osw-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Ohne Bild: heller Grund, schwarze Schrift – wie auf den übrigen Seiten. */
.osw-hero--voll:not(.osw-hero--bild) { color: var(--os-text); }
.osw-hero--voll:not(.osw-hero--bild) .osw-hero__titel { color: var(--os-black); }

.osw-hero--voll.osw-hero--bild .osw-eyebrow { color: #fff; }
.osw-hero--voll.osw-hero--bild .osw-hero__titel { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.osw-hero--voll .osw-hero__titel {
	margin-block: 14px 18px;
	text-wrap: balance;
}
.osw-lead--kurz {
	max-width: 34ch;
	font-size: clamp(1.05rem, 1.55vw, 1.3rem);
	margin-bottom: 0;
	text-wrap: pretty;
}
.osw-hero--voll:not(.osw-hero--bild) .osw-lead--kurz { color: var(--os-soft); }
.osw-hero--voll.osw-hero--bild .osw-lead--kurz { color: rgba(255, 255, 255, .92); }
.osw-hero--voll .osw-actions { margin-top: clamp(24px, 4vh, 36px); }
.osw-hero--voll .osw-actions .osw-btn { flex: 1 1 auto; justify-content: center; text-align: center; }

/* Der zweite Knopf auf dem Bild: weisse Linie statt grauer. */
.osw-hero--voll.osw-hero--bild .osw-btn--ghost {
	border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
}
.osw-hero--voll.osw-hero--bild .osw-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .18); }

@media (min-width: 620px) {
	.osw-hero--voll .osw-actions .osw-btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
	.osw-hero--voll .osw-hero__titel { max-width: 15ch; }
	.osw-lead--kurz { max-width: 46ch; }
	/* Auf breiten Schirmen zusätzlich von links abdunkeln: Der Text steht
	   links, das Bild darf rechts offen bleiben. */
	.osw-hero--voll.osw-hero--bild::after {
		background:
			linear-gradient(95deg, rgba(12, 12, 14, .82) 0%, rgba(12, 12, 14, .58) 46%, rgba(12, 12, 14, .18) 78%, rgba(12, 12, 14, .12) 100%),
			linear-gradient(180deg, rgba(12, 12, 14, .35) 0%, rgba(12, 12, 14, 0) 30%, rgba(12, 12, 14, .5) 100%);
	}
}

/* Der Hinweis, dass es weitergeht. */
.osw-hero__weiter {
	position: absolute; left: 50%; bottom: 22px; z-index: 3;
	transform: translateX(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(0, 0, 0, .2);
	transition: .16s;
}
.osw-hero__weiter span {
	width: 10px; height: 10px; margin-top: -4px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}
.osw-hero--voll:not(.osw-hero--bild) .osw-hero__weiter {
	border-color: var(--os-border); background: var(--os-mute);
}
.osw-hero--voll:not(.osw-hero--bild) .osw-hero__weiter span { border-color: var(--os-text); }
.osw-hero__weiter:hover { background: rgba(0, 0, 0, .4); border-color: #fff; }
@media (max-height: 620px), (prefers-reduced-motion: reduce) {
	.osw-hero__weiter { display: none; }
}

.osw-loc { border-left: 3px solid var(--os-red); padding-left: 18px; }
.osw-loc__tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.osw-loc__tabs button {
	background: none; border: 2px solid var(--os-border); padding: 7px 14px;
	border-radius: 3px; cursor: pointer; font-size: .86rem; font-weight: 600;
	transition: .15s;
}
.osw-loc__tabs button[aria-selected="true"] {
	background: var(--os-black); color: var(--os-paper); border-color: var(--os-black);
}
.osw-loc h2 { font-size: 1.08rem; margin-bottom: 6px; }
.osw-loc p { font-size: .94rem; color: var(--os-soft); }
.osw-loc dl {
	display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
	margin: 14px 0 0; font-size: .88rem;
}
.osw-loc dt { color: var(--os-soft); }
.osw-loc dd { margin: 0; font-weight: 600; }

/* Zahlenband ------------------------------------------------------------- */

.osw-facts { background: var(--os-band-bg); color: var(--os-band-fg); }
.osw-facts .osw-shell {
	display: grid; grid-template-columns: repeat(4, 1fr); padding-inline: 0;
}
.osw-fact { padding: 26px var(--os-gut); border-left: 1px solid var(--os-band-line); }
.osw-fact:first-child { border-left: none; }
.osw-fact b {
	display: block; font-family: var(--os-font-head);
	font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700;
	font-variant-numeric: tabular-nums; color: var(--os-band-fg);
}
.osw-fact span {
	display: block; font-size: .78rem; letter-spacing: .09em;
	text-transform: uppercase; color: var(--os-band-soft); margin-top: 5px;
}

/* Sektionen -------------------------------------------------------------- */

.osw-sektion { padding-block: clamp(56px, 7vw, 96px); }
.osw-sektion--mute {
	background: var(--os-mute);
	border-block: 1px solid var(--os-border);
}
.osw-sechead { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 44px); }
.osw-sechead h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	letter-spacing: -.015em; margin-block: 10px 14px;
}
.osw-sechead p { color: var(--os-soft); font-size: 1.03rem; }

/* Seitenkopf: Orientierung, keine Bühne (0.17.4). Die Startseite hat ihren
   eigenen, grossen Auftakt; alle übrigen Seiten sagen knapp, wo man ist, und
   geben dann den Inhalt frei. Vorher lag der Inhalt erst bei rund 360 px. */
.osw-seitenkopf {
	padding-block: clamp(26px, 3.6vw, 44px) clamp(20px, 2.4vw, 28px);
	border-bottom: 1px solid var(--os-border);
}
.osw-seitenkopf h1 {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.018em;
	line-height: 1.1; margin-block: 8px 10px;
}
.osw-seitenkopf .osw-lead {
	font-size: clamp(1rem, 1.25vw, 1.08rem); color: var(--os-soft);
	max-width: 72ch; margin-bottom: 0;
}
/* Die erste Sektion nach dem Seitenkopf braucht keinen vollen Auftakt mehr:
   Die Trennlinie des Kopfs gliedert schon. */
.osw-seitenkopf + .osw-sektion { padding-block-start: clamp(32px, 4.4vw, 56px); }

.osw-prose { max-width: 72ch; }
.osw-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block: 1.8em .5em; }
.osw-prose h3 { font-size: 1.2rem; margin-block: 1.6em .4em; }
.osw-prose ul, .osw-prose ol { padding-left: 1.3em; }
.osw-prose li { margin-bottom: .4em; }
.osw-prose img { border-radius: var(--os-radius); }

/* Tagesablauf ------------------------------------------------------------ */

.osw-rail {
	display: flex; overflow-x: auto; border-top: 2px solid var(--os-border);
	scrollbar-width: thin;
}
.osw-rail button {
	flex: 1 0 128px; background: none; border: none; border-top: 4px solid transparent;
	margin-top: -3px; padding: 16px 12px 18px; text-align: left; cursor: pointer;
	transition: .16s;
}
.osw-rail button:hover { background: rgba(255, 255, 255, .6); }
.osw-rail button[aria-selected="true"] { border-top-color: var(--os-red); background: var(--os-paper); }
.osw-rail time {
	display: block; font-family: var(--os-font-head); font-weight: 700;
	font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--os-black);
}
.osw-rail small { display: block; font-size: .81rem; color: var(--os-soft); margin-top: 3px; line-height: 1.3; }
.osw-rail button[aria-selected="true"] small { color: var(--os-text); }

.osw-station {
	background: var(--os-paper); border: 1px solid var(--os-border); border-top: none;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
}
.osw-station + .osw-station { border-top: 1px solid var(--os-border); }
.osw-station__text { padding: clamp(24px, 3.5vw, 42px); }
.osw-station__text h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin-block: 10px 12px; }
.osw-station__text p { max-width: 54ch; }
.osw-station__bild { border-left: 1px solid var(--os-border); min-height: 260px; position: relative; }
.osw-station__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-station__bild--leer {
	background: repeating-linear-gradient(-12deg, var(--os-mute) 0 9px, #eeeeef 9px 10px);
	display: grid; place-items: center;
}
.osw-station__bild--leer span {
	font-family: var(--os-font-head); font-size: .7rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--os-soft); background: var(--os-paper);
	padding: 6px 12px; border: 1px solid var(--os-border);
}

.osw-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.osw-tagchip {
	font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
	font-family: var(--os-font-head); padding: 5px 10px;
	border: 1px solid var(--os-border); border-radius: 3px; color: var(--os-soft);
}

/* Eltern-Kompass --------------------------------------------------------- */

.osw-kompass__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.osw-qcard {
	border: 2px solid var(--os-border); border-radius: var(--os-radius);
	background: var(--os-paper); padding: 24px 22px 20px; text-align: left;
	cursor: pointer; transition: .16s; position: relative; display: block; width: 100%;
}
.osw-qcard:hover { border-color: var(--os-black); transform: translateY(-2px); }
.osw-qcard[aria-expanded="true"] { border-color: var(--os-red); }
.osw-qcard__frage {
	display: block; font-family: var(--os-font-head); font-weight: 700;
	font-size: 1.1rem; color: var(--os-black); margin-bottom: 8px; line-height: 1.25;
}
.osw-qcard__kurz { display: block; font-size: .9rem; color: var(--os-soft); }
.osw-qcard__mark {
	position: absolute; top: 0; right: 22px; width: 11px; height: 26px;
	background: var(--os-red); transform: skewX(var(--os-skew)); opacity: 0; transition: .16s;
}
.osw-qcard[aria-expanded="true"] .osw-qcard__mark { opacity: 1; }

.osw-antwort {
	margin-top: 18px; border: 1px solid var(--os-border); border-left: 4px solid var(--os-red);
	background: var(--os-mute); padding: clamp(22px, 3vw, 34px); border-radius: 0 var(--os-radius) var(--os-radius) 0;
}
.osw-antwort h3 { font-size: 1.15rem; margin-bottom: 12px; }
.osw-antwort p { max-width: 70ch; }
.osw-more {
	display: inline-flex; gap: 8px; align-items: center; font-weight: 700;
	color: var(--os-red); text-decoration: none; font-size: .92rem;
}

/* Lehrpersonen ----------------------------------------------------------- */

.osw-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.osw-chip {
	background: none; border: 2px solid var(--os-border); border-radius: 999px;
	padding: 7px 15px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: .15s;
}
.osw-chip:hover { border-color: var(--os-black); }
.osw-chip[aria-pressed="true"] { background: var(--os-red); border-color: var(--os-red); color: #fff; }
.osw-chip b { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 600; margin-left: 5px; }

.osw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.osw-person {
	margin: 0; border: 1px solid var(--os-border); border-radius: var(--os-radius);
	background: var(--os-paper); overflow: hidden; transition: .16s;
}
.osw-person:hover { border-color: var(--os-black); transform: translateY(-2px); }
.osw-person__bild {
	aspect-ratio: 1 / 1; max-width: 100%; display: grid; place-items: center;
	background: var(--os-mute); position: relative; overflow: hidden;
}
.osw-person__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-person__bild::after {
	content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 26px;
	background: var(--os-red); transform: skewX(var(--os-skew)); opacity: 0; transition: .16s;
}
.osw-person:hover .osw-person__bild::after { opacity: .9; }
.osw-mono {
	font-family: var(--os-font-head); font-weight: 700; font-size: 1.6rem;
	color: var(--os-soft); letter-spacing: .02em; position: relative; z-index: 1;
}
.osw-person figcaption { padding: 11px 12px 13px; }
.osw-person figcaption b {
	display: block; font-family: var(--os-font-head); font-size: .88rem;
	font-weight: 700; color: var(--os-black); line-height: 1.25;
}
.osw-person figcaption small { display: block; font-size: .76rem; color: var(--os-soft); margin-top: 3px; }
.osw-countline { margin-top: 20px; font-size: .88rem; color: var(--os-soft); font-variant-numeric: tabular-nums; }

/* Kurse ------------------------------------------------------------------ */

.osw-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.osw-course {
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); overflow: hidden; display: flex; flex-direction: column;
	transition: .16s; position: relative;
}
.osw-course:hover { border-color: var(--os-black); transform: translateY(-2px); }
.osw-course__bild { display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--os-mute); }
.osw-course__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-course__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; }
.osw-course__body::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: var(--os-red); transform: skewX(var(--os-skew)); transform-origin: top;
}
.osw-course__fach {
	font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
	font-weight: 700; font-family: var(--os-font-head); color: var(--os-red);
}
.osw-course h3 { font-size: 1.03rem; line-height: 1.28; }
.osw-course h3 a { text-decoration: none; }
.osw-course h3 a:hover { color: var(--os-red); }
.osw-course__state {
	margin-top: auto; display: flex; align-items: center; gap: 8px;
	font-size: .81rem; color: var(--os-soft); padding-top: 10px;
	border-top: 1px solid var(--os-border);
}
.osw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--os-soft); flex: none; }
.osw-course--offen .osw-dot { background: #1a8a3c; }
.osw-course--gesperrt .osw-dot { background: #c98a00; }
.osw-course--angemeldet .osw-dot { background: var(--os-red); }
.osw-bar { height: 4px; background: var(--os-border); border-radius: 2px; overflow: hidden; }
.osw-bar i { display: block; height: 100%; background: var(--os-red); }

/* Fussbereich ------------------------------------------------------------ */

.osw-footer {
	background: var(--os-band-bg); color: var(--os-band-soft);
	padding-block: clamp(44px, 6vw, 68px) 28px;
}
.osw-footer h4 {
	color: var(--os-band-fg); font-size: .74rem; letter-spacing: .16em;
	text-transform: uppercase; margin-bottom: 14px;
}
.osw-fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.osw-fgrid ul, .osw-fgrid li { list-style: none; margin: 0; padding: 0; }
.osw-fgrid a {
	color: var(--os-band-soft); text-decoration: none; display: block;
	padding: 3px 0; font-size: .92rem;
}
.osw-fgrid a:hover { color: var(--os-band-fg); }
.osw-fgrid address { font-style: normal; font-size: .92rem; line-height: 1.7; margin-top: 18px; }
.osw-fgrid address b { color: var(--os-band-fg); font-weight: 600; }
.osw-fbrand .osw-flag { margin-bottom: 12px; }
.osw-fbrand .osw-wm b { color: var(--os-band-fg); font-size: 1.2rem; }
.osw-fbrand .osw-wm span { color: var(--os-band-soft); }
.osw-footer .osw-flag i:last-child { background: var(--os-band-fg); }
.osw-fbot {
	margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--os-band-line);
	display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between;
	font-size: .82rem;
}

/* Responsiv -------------------------------------------------------------- */

@media (max-width: 1080px) {
	.osw-menu a { padding: 8px 9px; font-size: .9rem; }
}

@media (max-width: 980px) {
	.osw-hero__grid { grid-template-columns: 1fr; }
	.osw-station { grid-template-columns: 1fr; }
	.osw-station__bild { border-left: none; border-top: 1px solid var(--os-border); min-height: 200px; }
	.osw-facts .osw-shell { grid-template-columns: repeat(2, 1fr); }
	.osw-fact { border-left: none; border-top: 1px solid var(--os-band-line); }
	.osw-kompass__karten { grid-template-columns: 1fr; }
	.osw-fgrid { grid-template-columns: 1fr 1fr; }
	.osw-menu { display: none; }
	.osw-burger { display: block; }
}

@media (max-width: 620px) {
	body.osw { font-size: 16px; }
	/* Zweispaltig statt vier Balken untereinander: die Zahlen sollen als
	   Block wirken, nicht als halbe Bildschirmseite. */
	.osw-facts .osw-shell { grid-template-columns: repeat(2, 1fr); }
	.osw-fact { padding-block: 20px; }
	.osw-fact:nth-child(odd) { border-right: 1px solid var(--os-band-line); }
	.osw-fact:nth-child(-n+2) { border-top: none; }
	.osw-people { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
	.osw-fgrid { grid-template-columns: 1fr; }
	.osw-hero--bild::after {
		background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 70%, rgba(255,255,255,.75) 100%);
	}
}

/* Druck ------------------------------------------------------------------ */

@media print {
	.osw-nav, .osw-topbar, .osw-footer, .osw-burger, .osw-chips { display: none; }
	body.osw { font-size: 11pt; }
	.osw-station[hidden] { display: grid !important; }
}

/* ==========================================================================
   Produktionen (Version 0.2)
   ========================================================================== */

.osw-sektion--dunkel {
	background: var(--os-stage, #141414);
	border-block: 1px solid #2a2a2a;
	color: #efefef;
}
.osw-sektion--dunkel h2,
.osw-sektion--dunkel h3 { color: #ffffff; }
.osw-sektion--dunkel .osw-sechead p { color: rgba(255, 255, 255, .68); }
.osw-sektion--dunkel .osw-chip { color: #efefef; border-color: #3a3a3a; }
.osw-sektion--dunkel .osw-chip:hover { border-color: #ffffff; }
.osw-sektion--dunkel .osw-chip[aria-pressed="true"] { background: var(--os-red); border-color: var(--os-red); color: #fff; }
.osw-sektion--dunkel .osw-countline { color: rgba(255, 255, 255, .6); }

.osw-buehne__filter {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 26px;
}
.osw-buehne__filter .osw-chips { margin-bottom: 0; }
.osw-jahrwahl { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; }
.osw-jahrwahl span { color: inherit; opacity: .7; }
.osw-jahrwahl select {
	font: inherit; padding: 7px 12px; border-radius: 999px;
	border: 2px solid var(--os-border); background: var(--os-paper); color: var(--os-text);
}
.osw-sektion--dunkel .osw-jahrwahl select { background: #1f1f1f; color: #efefef; border-color: #3a3a3a; }

.osw-films {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}
.osw-film {
	background: #1f1f1f; border: 1px solid #333333; border-radius: var(--os-radius);
	overflow: hidden; transition: .18s; display: flex; flex-direction: column;
}
.osw-film:hover { border-color: var(--os-red); transform: translateY(-3px); }

.osw-film__buehne {
	position: relative; aspect-ratio: 16 / 9; max-width: 100%;
	background: linear-gradient(135deg, #242424, #131313);
	border-bottom: 1px solid #333333; overflow: hidden;
}
.osw-film__buehne img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-film__buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.osw-film__buehne::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2;
	background: var(--os-red); transform: skewX(var(--os-skew)); transform-origin: top;
}
.osw-film--spielt .osw-film__buehne::before { display: none; }

/* Kein Schleier über dem Bild: Die Vorschaubilder sind der Grund, warum
   jemand hinschaut – sie sollen so hell sein, wie sie sind. Der Knopf trägt
   seinen Kontrast selbst, damit er auch auf einem hellen Bild sichtbar
   bleibt. Abgedunkelt wird erst beim Darüberfahren. */
.osw-film__play {
	position: absolute; inset: 0; z-index: 3; width: 100%; border: 0;
	background: transparent; cursor: pointer;
	display: grid; place-items: center; transition: background .16s ease;
}
.osw-film__play:hover,
.osw-film__play:focus-visible { background: rgba(10, 10, 10, .22); }
.osw-film__play:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.osw-play {
	width: 58px; height: 58px; border-radius: 50%;
	background: rgba(16, 16, 16, .52); border: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .4);
	display: grid; place-items: center; transition: .16s;
	backdrop-filter: blur(2px);
}
.osw-play::after {
	content: ""; border-left: 16px solid #fff;
	border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px;
}
.osw-film__play:hover .osw-play,
.osw-film__play:focus-visible .osw-play { background: var(--os-red); border-color: var(--os-red); transform: scale(1.06); }

.osw-film__jahr {
	position: absolute; right: 10px; bottom: 10px; z-index: 3;
	background: rgba(0, 0, 0, .68); color: #fff; font-family: var(--os-font-head);
	font-size: .74rem; letter-spacing: .06em; padding: 4px 9px; border-radius: 3px;
	font-variant-numeric: tabular-nums;
}

.osw-film__meta { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 7px; }
.osw-film__kat {
	font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	font-family: var(--os-font-head); font-weight: 700; color: #ff3347;
}
.osw-film__meta h3 { font-size: .98rem; line-height: 1.3; color: #ffffff; }
.osw-film__meta p { font-size: .84rem; color: rgba(255, 255, 255, .6); margin: 0; }

.osw-datenschutz {
	margin-top: 26px; font-size: .85rem; color: rgba(255, 255, 255, .6);
	display: flex; gap: 12px; align-items: flex-start; max-width: 76ch;
}
.osw-datenschutz .osw-flag { flex: none; margin-top: 3px; }
.osw-datenschutz .osw-flag i:last-child { background: #ffffff; }

/* Aktuelles --------------------------------------------------------------- */

.osw-beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.osw-beitrag {
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
	overflow: hidden; background: var(--os-paper); display: flex; flex-direction: column;
	transition: .16s;
}
.osw-beitrag:hover { border-color: var(--os-black); transform: translateY(-2px); }
.osw-beitrag__bild { display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--os-mute); }
.osw-beitrag__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-beitrag__body { padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.osw-beitrag time { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--os-red); font-family: var(--os-font-head); font-weight: 700; }
.osw-beitrag h2 { font-size: 1.12rem; line-height: 1.3; }
.osw-beitrag h2 a { text-decoration: none; }
.osw-beitrag h2 a:hover { color: var(--os-red); }
.osw-beitrag p { font-size: .9rem; color: var(--os-soft); margin: 0; }

.osw-pager { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.osw-pager .page-numbers {
	display: inline-block; padding: 8px 14px; border: 2px solid var(--os-border);
	border-radius: var(--os-radius); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.osw-pager .page-numbers:hover { border-color: var(--os-black); }
.osw-pager .page-numbers.current { background: var(--os-red); border-color: var(--os-red); color: #fff; }

/* Hilfsklasse ------------------------------------------------------------- */

.osw .screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 620px) {
	.osw-films { grid-template-columns: 1fr; }
	.osw-buehne__filter { flex-direction: column; align-items: flex-start; }
}

/* Bühnen-Ton als Token nachgereicht (Version 0.2) */
:root { --os-stage: #141414; }

/* ==========================================================================
   Version 0.3 — Unterseiten
   ========================================================================== */

/* Akkordeon (FAQ, Angebote) ---------------------------------------------- */

.osw-faq { border-top: 2px solid var(--os-black); max-width: 900px; }
.osw-fq { border-bottom: 1px solid var(--os-border); }
.osw-fq > summary {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 22px 0; cursor: pointer; list-style: none;
	font-family: var(--os-font-head); font-weight: 700;
	color: var(--os-black); position: relative;
}
.osw-fq > summary::-webkit-details-marker { display: none; }
.osw-fq > summary:hover { color: var(--os-red); }
.osw-fq__nr {
	flex: none; font-size: .82rem; color: var(--os-red);
	font-variant-numeric: tabular-nums; padding-top: 4px; letter-spacing: .04em;
}
.osw-fq__frage { flex: 1; font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.32; }
.osw-fq__frage small {
	display: block; font-family: var(--os-font); font-weight: 400;
	font-size: .86rem; color: var(--os-soft); margin-top: 5px;
}
.osw-fq__zeichen {
	flex: none; width: 22px; height: 22px; margin-top: 4px; position: relative;
}
.osw-fq__zeichen::before,
.osw-fq__zeichen::after {
	content: ""; position: absolute; background: var(--os-red);
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	transition: opacity .16s ease;
}
.osw-fq__zeichen::before { width: 16px; height: 2px; }
.osw-fq__zeichen::after { width: 2px; height: 16px; }
.osw-fq[open] .osw-fq__zeichen::after { opacity: 0; }
.osw-fq__antwort { padding: 0 0 26px 0; max-width: 72ch; }
.osw-fq__nr ~ .osw-fq__antwort,
.osw-fq__antwort { margin-left: 0; }
.osw-fq__antwort p { margin-bottom: .9em; }
.osw-fq__antwort ul { padding-left: 1.2em; margin: 0 0 1em; }
.osw-fq__antwort li { margin-bottom: .45em; }
@media (min-width: 720px) {
	.osw-fq__antwort { margin-left: 46px; }
}

/* Niveaus (grün / gelb / rot) -------------------------------------------- */

.osw-niveaus {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px; margin: 22px 0;
}
.osw-niveau {
	border: 1px solid var(--os-border); border-top: 5px solid var(--os-soft);
	border-radius: var(--os-radius); padding: 16px 16px 14px; background: var(--os-paper);
}
.osw-niveau--gruen { border-top-color: #1a8a3c; }
.osw-niveau--gelb  { border-top-color: #d8a100; }
.osw-niveau--rot   { border-top-color: var(--os-red); }
.osw-niveau b { display: block; font-family: var(--os-font-head); font-size: .96rem; color: var(--os-black); }
.osw-niveau__anteil {
	display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--os-soft); margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.osw-niveau p { font-size: .88rem; margin-bottom: .6em; }
.osw-niveau__beispiel { color: var(--os-soft); font-style: italic; }

/* Zweispalter mit Bild ---------------------------------------------------- */

.osw-split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: clamp(24px, 5vw, 56px); align-items: start;
}
.osw-split h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-block: 10px 16px; }
.osw-split p { max-width: 58ch; }
.osw-split__bild {
	border-radius: var(--os-radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%;
}
.osw-split__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-split__bild--leer {
	background: repeating-linear-gradient(-12deg, var(--os-mute) 0 9px, #eeeeef 9px 10px);
	display: grid; place-items: center; border: 1px solid var(--os-border);
}
.osw-split__bild--leer span {
	font-family: var(--os-font-head); font-size: .7rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--os-soft); background: var(--os-paper);
	padding: 6px 12px; border: 1px solid var(--os-border);
}

/* Förderteam -------------------------------------------------------------- */

.osw-fzteam {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 16px; margin-bottom: 40px;
}
.osw-fzperson {
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: 22px;
}
.osw-fzperson__kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.osw-fzperson__kopf .osw-mono {
	flex: none; width: 52px; height: 52px; border-radius: 50%;
	background: var(--os-mute); display: grid; place-items: center; font-size: 1.05rem;
}
.osw-fzperson__kopf b {
	display: block; font-family: var(--os-font-head); font-size: 1.02rem; color: var(--os-black);
}
.osw-fzperson__kopf small { display: block; font-size: .82rem; color: var(--os-soft); margin-top: 3px; line-height: 1.35; }
.osw-fzperson ul { margin: 0; padding-left: 1.1em; }
.osw-fzperson li { font-size: .88rem; margin-bottom: .4em; color: var(--os-text); }

.osw-haltung { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.osw-haltung__block { border-left: 3px solid var(--os-red); padding-left: 20px; }
.osw-haltung__block h3 { font-size: 1.1rem; margin-bottom: 10px; }
.osw-haltung__block p { max-width: 60ch; }

/* Die vier Vs ------------------------------------------------------------- */

.osw-vs {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px;
}
.osw-v {
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: 24px 22px; position: relative; overflow: hidden;
}
.osw-v__nr {
	font-family: var(--os-font-head); font-weight: 700; font-size: 1.5rem;
	color: var(--os-red); display: block; margin-bottom: 8px;
}
.osw-v h3 { font-size: 1.05rem; margin-bottom: 10px; }
.osw-v p { font-size: .9rem; }

/* Leitsätze --------------------------------------------------------------- */

.osw-leit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 960px; }
.osw-leit li {
	display: flex; gap: 22px; align-items: flex-start;
	padding: 24px 0; border-top: 1px solid var(--os-border);
}
.osw-leit li:last-child { border-bottom: 1px solid var(--os-border); }
.osw-leit__nr {
	flex: none; font-family: var(--os-font-head); font-weight: 700; font-size: .9rem;
	color: var(--os-red); font-variant-numeric: tabular-nums; padding-top: 4px;
}
.osw-leit p { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 62ch; }

/* Standorte --------------------------------------------------------------- */

.osw-orte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.osw-ort {
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: 26px 24px;
}
.osw-ort .osw-flag { margin-bottom: 14px; }
.osw-ort h3 { font-size: 1.15rem; margin-bottom: 10px; }
.osw-ort p { font-size: .93rem; color: var(--os-text); }
.osw-ort dl {
	display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
	margin: 16px 0 0; font-size: .86rem;
}
.osw-ort dt { color: var(--os-soft); }
.osw-ort dd { margin: 0; font-weight: 600; }

.osw-textblock { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); }
.osw-textblock h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
@media (max-width: 860px) { .osw-textblock { grid-template-columns: 1fr; } }

/* Kontakt ----------------------------------------------------------------- */

.osw-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.osw-kkarten { display: grid; gap: 14px; }
.osw-kkarte {
	border: 1px solid var(--os-border); border-left: 4px solid var(--os-red);
	border-radius: 0 var(--os-radius) var(--os-radius) 0;
	padding: 20px 22px; background: var(--os-paper);
}
.osw-kkarte__gross { font-family: var(--os-font-head); font-size: 1.32rem; font-weight: 700; color: var(--os-black); margin: 8px 0 6px; }
.osw-kkarte__gross a { text-decoration: none; }
.osw-kkarte__gross a:hover { color: var(--os-red); }
.osw-kkarte p { font-size: .92rem; color: var(--os-soft); }
.osw-kkarte address { font-style: normal; margin: 8px 0 6px; line-height: 1.6; }

/* Die beiden Schulhäuser nebeneinander, gleich gebaut (0.17.2). Zwei Spalten,
   sobald jede mindestens 220 px bekommt – sonst untereinander. */
.osw-kkarten__haeuser {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.osw-kkarte--haus { display: flex; flex-direction: column; }
.osw-kkarte--haus > p:last-child { margin-top: auto; padding-top: 4px; }
.osw-kkarte__leitung a { color: var(--os-text); text-decoration: none; font-family: var(--os-font-head); }
.osw-kkarte__leitung a:hover { color: var(--os-red); }

.osw-karte {
	position: relative; aspect-ratio: 4 / 3; max-width: 100%;
	border: 1px solid var(--os-border); border-radius: var(--os-radius); overflow: hidden;
	background: repeating-linear-gradient(-12deg, var(--os-mute) 0 11px, #eeeeef 11px 12px);
}
.osw-karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.osw-karte__platzhalter {
	position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
	text-align: center; padding: 28px; gap: 10px;
}
.osw-karte__platzhalter b { font-family: var(--os-font-head); color: var(--os-black); }
.osw-karte__platzhalter p { font-size: .86rem; color: var(--os-soft); max-width: 42ch; }

/* Sofort geladene Karte: etwas höher, weil kein Vorschaufeld mehr davor
   liegt und der Ausschnitt sonst zu eng wird. */
.osw-karte--direkt { aspect-ratio: 4 / 3; background: var(--os-mute); }
@media (min-width: 900px) {
	.osw-karte--direkt { aspect-ratio: 16 / 10; }
}
.osw-karte__fussnote {
	margin: 8px 0 0; font-size: .8rem; color: var(--os-soft);
}

/* Umschalter zwischen den beiden Schulhäusern. Die Reiter sehen aus wie
   auf der Startseite – dieselbe Geste soll überall gleich aussehen. */
.osw-kartenblock .osw-loc__tabs { margin-bottom: 12px; }
.osw-karte__fuss {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
	margin: 10px 0 0; font-size: .9rem;
}
.osw-karte__fuss > span { color: var(--os-soft); }
.osw-karte__fuss .osw-more { font-size: .9rem; }

.osw-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.osw-weg { background: var(--os-paper); border: 1px solid var(--os-border); border-radius: var(--os-radius); padding: 22px; }
.osw-weg h3 { font-size: 1.02rem; margin-bottom: 8px; }
.osw-weg p { font-size: .9rem; color: var(--os-soft); }

/* Kursdetailseite --------------------------------------------------------- */

/* Kurskopf bewusst flach: Die Kursseite ist eine Arbeitsseite, nicht die
   Startseite. Was zählt, steht darunter – Lektionen und Fortschritt. */
.osw-kurskopf { padding-block: clamp(16px, 2.2vw, 26px); border-bottom: 1px solid var(--os-border); background: var(--os-mute); }
.osw-kurskopf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: clamp(16px, 3vw, 32px); align-items: center; }
.osw-kurskopf h1 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); letter-spacing: -.018em; margin-block: 5px 9px; }
.osw-kurskopf .osw-eyebrow { font-size: .64rem; }
.osw-kurskopf__bild { border-radius: var(--os-radius); overflow: hidden; aspect-ratio: 16 / 9; max-width: 220px; margin-left: auto; }
.osw-kurskopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osw-kursmeta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--os-soft); align-items: center; }
.osw-kursmeta .osw-course__state { border: 0; padding: 0; margin: 0; }
.osw-dot--offen { background: #1a8a3c; }
.osw-dot--gesperrt { background: #c98a00; }
.osw-dot--angemeldet { background: var(--os-red); }
.osw-fortschritt { display: flex; align-items: center; gap: 12px; margin-top: 10px; max-width: 360px; }
.osw-fortschritt .osw-bar { flex: 1; }
.osw-fortschritt span { font-size: .84rem; color: var(--os-soft); font-variant-numeric: tabular-nums; }

.osw-kursgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 4vw, 52px); align-items: start; }
.osw-kurskopf + .osw-sektion { padding-block-start: clamp(24px, 3vw, 40px); }
.osw-kursbox { border: 1px solid var(--os-border); border-radius: var(--os-radius); padding: 22px; margin-bottom: 16px; background: var(--os-paper); }
.osw-kursbox h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--os-soft); margin-bottom: 14px; }
.osw-kursbox--rot { border-left: 4px solid var(--os-red); }
.osw-kursbox--rot p { font-size: .92rem; }

.osw-lektionen { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.osw-lektionen li {
	display: flex; gap: 12px; align-items: baseline; padding: 10px 0;
	border-bottom: 1px solid var(--os-border); font-size: .92rem;
}
.osw-lektionen li:last-child { border-bottom: 0; }
.osw-lektion__nr { flex: none; font-family: var(--os-font-head); font-size: .78rem; color: var(--os-soft); font-variant-numeric: tabular-nums; }
.osw-lektionen a { text-decoration: none; flex: 1; }
.osw-lektionen a:hover { color: var(--os-red); }
.osw-lektion--fertig a { color: var(--os-soft); }
.osw-lektion__haken { color: #1a8a3c; font-weight: 700; }

@media (max-width: 900px) {
	.osw-split, .osw-kontakt, .osw-kursgrid { grid-template-columns: 1fr; }
	.osw-kurskopf__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 140px); }
	.osw-kurskopf__bild { max-width: 140px; }
}
@media (max-width: 560px) {
	.osw-kurskopf__grid { grid-template-columns: 1fr; }
	.osw-kurskopf__bild { display: none; }
}

/* ==========================================================================
   Version 0.4.2 — Fremde Bausteine einpassen
   Gutenberg-Blöcke und LearnDash bringen eigene Gestaltung mit. Sobald das
   Theme-CSS weg ist, fallen sie auf die Standardwerte von WordPress zurück –
   dunkle Pillen-Knöpfe, grüne Fortschrittsbalken. Hier holen wir sie ins
   Design-System zurück, ohne ihre Funktion anzufassen.
   ========================================================================== */

/* --- Gutenberg: Knöpfe --------------------------------------------------- */

.osw .wp-block-buttons {
	display: flex; flex-wrap: wrap; gap: 12px; margin-block: 1.4em;
}
.osw .wp-block-button { margin: 0; }

.osw .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 12px 22px;
	border-radius: var(--os-radius);
	font-family: var(--os-font-head);
	font-weight: 700;
	font-size: .93rem;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	transition: background .15s ease, transform .15s ease, color .15s ease;
}

/* Nur Knöpfe ohne ausdrücklich gewählte Farbe werden eingefärbt –
   wer im Editor bewusst eine Farbe gesetzt hat, behält sie. */
.osw .wp-block-button__link:not(.has-background) {
	background-color: var(--os-red);
	color: #ffffff;
}
.osw .wp-block-button__link:not(.has-background):hover {
	background-color: var(--os-red-deep);
	color: #ffffff;
	transform: translateY(-1px);
}
.osw .wp-block-button__link:not(.has-text-color) { color: #ffffff; }

.osw .is-style-outline > .wp-block-button__link,
.osw .wp-block-button__link.is-style-outline {
	background-color: transparent;
	color: var(--os-black);
	border: 2px solid var(--os-border);
}
.osw .is-style-outline > .wp-block-button__link:hover,
.osw .wp-block-button__link.is-style-outline:hover {
	background-color: var(--os-mute);
	border-color: var(--os-black);
	color: var(--os-black);
}

/* --- Gutenberg: Datei-Block ---------------------------------------------- */

.osw .wp-block-file {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: var(--os-mute);
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-red);
	border-radius: 0 var(--os-radius) var(--os-radius) 0;
	padding: 14px 18px;
	margin-block: 1.2em;
}
.osw .wp-block-file > a:first-child {
	font-family: var(--os-font-head); font-weight: 700; color: var(--os-black); text-decoration: none;
}
.osw .wp-block-file > a:first-child:hover { color: var(--os-red); }
.osw .wp-block-file__button {
	background: var(--os-red) !important;
	color: #fff !important;
	border-radius: var(--os-radius) !important;
	font-family: var(--os-font-head);
	font-weight: 700;
	font-size: .84rem;
	padding: 9px 16px;
	margin-left: auto;
	text-decoration: none;
	opacity: 1;
}
.osw .wp-block-file__button:hover { background: var(--os-red-deep) !important; }

/* --- Gutenberg: übrige Blöcke -------------------------------------------- */

.osw .wp-block-image { margin-block: 1.6em; }
.osw .wp-block-image img { border-radius: var(--os-radius); }
.osw .wp-block-image figcaption { font-size: .85rem; color: var(--os-soft); margin-top: 8px; }

.osw .wp-block-quote {
	border-left: 4px solid var(--os-red);
	padding: 4px 0 4px 22px;
	margin-block: 1.6em;
	font-size: 1.08rem;
}
.osw .wp-block-quote cite { display: block; font-size: .86rem; color: var(--os-soft); font-style: normal; margin-top: 10px; }

.osw .wp-block-separator {
	border: 0; border-top: 1px solid var(--os-border); margin-block: 2.4em; max-width: 100%;
}
.osw .wp-block-separator.is-style-wide { width: 100%; }

.osw .wp-block-table { margin-block: 1.6em; overflow-x: auto; }
.osw .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.osw .wp-block-table th,
.osw .wp-block-table td { border: 1px solid var(--os-border); padding: 10px 12px; text-align: left; }
.osw .wp-block-table th { background: var(--os-mute); font-family: var(--os-font-head); color: var(--os-black); }

.osw .wp-block-columns { gap: clamp(16px, 3vw, 32px); margin-block: 1.6em; }

.osw .wp-block-embed { margin-block: 1.6em; }
.osw .wp-block-embed__wrapper { border-radius: var(--os-radius); overflow: hidden; }
.osw .wp-block-embed iframe { max-width: 100%; border-radius: var(--os-radius); }

.osw .wp-block-group { margin-block: 1.4em; }
.osw .wp-block-media-text { margin-block: 1.8em; gap: clamp(16px, 3vw, 32px); }

/* --- LearnDash ----------------------------------------------------------- */

.osw .ld-button,
.osw #btn-join,
.osw .learndash_mark_complete_button,
.osw #learndash_mark_complete_button,
.osw .ld-course-step-back,
.osw input[type="submit"].learndash_mark_complete_button,
.osw .learndash-wrapper .ld-button {
	background-color: var(--os-red) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--os-radius) !important;
	font-family: var(--os-font-head) !important;
	font-weight: 700 !important;
	font-size: .93rem !important;
	padding: 12px 22px !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease, transform .15s ease;
}
.osw .ld-button:hover,
.osw #btn-join:hover,
.osw .learndash-wrapper .ld-button:hover {
	background-color: var(--os-red-deep) !important;
	transform: translateY(-1px);
}
.osw .learndash-wrapper .ld-button.ld-button-transparent,
.osw .ld-button.ld-button-alternate {
	background-color: transparent !important;
	color: var(--os-black) !important;
	border: 2px solid var(--os-border) !important;
}

/* Fortschrittsbalken: von Grün auf die Hausfarbe */
.osw .learndash-wrapper .ld-progress-bar,
.osw .ld-progress-bar {
	background-color: var(--os-border) !important;
	border: none !important;
	border-radius: 2px !important;
	height: 6px !important;
	overflow: hidden;
}
.osw .learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.osw .ld-progress-bar .ld-progress-bar-percentage {
	background-color: var(--os-red) !important;
	border-radius: 0 !important;
	height: 100% !important;
}
.osw .learndash-wrapper .ld-progress-stats,
.osw .ld-progress-stats { font-size: .84rem; color: var(--os-soft); }
.osw .learndash-wrapper .ld-progress-percentage,
.osw .ld-progress-percentage {
	color: var(--os-black) !important;
	font-family: var(--os-font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Listen von Lektionen und Themen */
.osw .learndash-wrapper .ld-item-list-item {
	border: 1px solid var(--os-border) !important;
	border-radius: var(--os-radius) !important;
	margin-bottom: 8px !important;
	background: var(--os-paper) !important;
}
.osw .learndash-wrapper .ld-item-list-item:hover { border-color: var(--os-black) !important; }
.osw .learndash-wrapper .ld-item-title {
	font-family: var(--os-font-head) !important;
	color: var(--os-black) !important;
}
.osw .learndash-wrapper .ld-status-complete,
.osw .learndash-wrapper .ld-status-icon.ld-status-complete {
	background-color: #1a8a3c !important;
}
.osw .learndash-wrapper .ld-alert {
	border-radius: var(--os-radius) !important;
	border-left: 4px solid var(--os-red) !important;
	background: var(--os-mute) !important;
}

/* Tabellen und Formulare aus fremden Plugins */
.osw .osw-prose input[type="text"],
.osw .osw-prose input[type="email"],
.osw .osw-prose textarea,
.osw .osw-prose select {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--os-border);
	border-radius: var(--os-radius);
	background: var(--os-paper);
	color: var(--os-text);
	max-width: 100%;
}


/* ==========================================================================
   Version 0.5 — Einzelansichten weiterer Beitragsarten
   ========================================================================== */

.osw-sektion--knapp { padding-block: clamp(22px, 3vw, 36px); }

/* Lernseiten: LearnDash bringt eigene Navigation und Fortschritt mit,
   deshalb hier keine Textspalte und keine Umgestaltung. */
.osw-lernen > * { max-width: 100%; }
.osw-lernen h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-block: 1.4em .5em; }
.osw-lernen h3 { font-size: 1.15rem; margin-block: 1.3em .4em; }
.osw-lernen p { max-width: 74ch; }
.osw-lernen ul, .osw-lernen ol { max-width: 74ch; padding-left: 1.3em; }

.osw-beitragsbild { padding-block: clamp(16px, 2.4vw, 28px) 0; }
.osw-beitragsbild img {
	width: 100%; max-height: 460px; object-fit: cover;
	border-radius: var(--os-radius); display: block;
}

/* Blättern zwischen Beiträgen */
.osw-blaettern {
	display: grid; gap: 12px; margin-top: 40px;
	padding-top: 24px; border-top: 1px solid var(--os-border);
}
@media (min-width: 640px) {
	.osw-blaettern { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.osw-blaettern__link {
	display: grid; gap: 4px; padding: 14px 16px;
	background: var(--os-bg-muted); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.osw-blaettern__link:hover { border-color: var(--os-red); background: #fff; }
.osw-blaettern__link--rechts { text-align: right; }
.osw-blaettern__label {
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--os-red); font-family: var(--os-font-head);
}
.osw-blaettern__titel { font-family: var(--os-font-head); color: var(--os-black); line-height: 1.3; }

/* ==========================================================================
   Version 0.6 — Schulalltag, Standorte, Newsletter
   ========================================================================== */

.osw-sektion--eng { padding-block: clamp(28px, 3.4vw, 44px); }
.osw-btn--klein { padding: 8px 16px; font-size: .92rem; }

/* --- Ferienstatus: was gerade gilt --------------------------------------- */
.osw-ferienstatus {
	display: grid; gap: 16px; align-items: center;
	grid-template-columns: auto 1fr;
	padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
	background: var(--os-mute); border: 1px solid var(--os-border);
	border-radius: var(--os-radius); position: relative; overflow: hidden;
}
.osw-ferienstatus::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
	background: var(--os-red);
}
.osw-ferienstatus--jetzt { background: #fff5f6; border-color: rgba(226, 0, 26, .3); }
.osw-ferienstatus__text { min-width: 0; }
.osw-ferienstatus__satz {
	font-family: var(--os-font-head); color: var(--os-black);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 2px 0 2px;
}
.osw-ferienstatus__datum { color: var(--os-soft); margin: 0; font-size: .95rem; }
.osw-ferienstatus .osw-btn { justify-self: start; }
@media (min-width: 860px) {
	.osw-ferienstatus { grid-template-columns: auto 1fr auto; }
}

/* --- Eltern-ABC ---------------------------------------------------------- */
.osw-suchfeld { display: none; }
.osw-abc--suchbar .osw-suchfeld { display: block; margin-bottom: 10px; }
.osw-suchfeld input {
	width: 100%; font: inherit; font-size: clamp(1rem, 1.6vw, 1.12rem);
	padding: 14px 18px; border: 2px solid var(--os-border);
	border-radius: var(--os-radius); background: #fff; color: var(--os-text);
}
.osw-suchfeld input:focus { outline: none; border-color: var(--os-red); }
.osw-abc__treffer { color: var(--os-soft); font-size: .9rem; margin: 0 0 14px; }
.osw-abc__liste { border-top: 1px solid var(--os-border); }
.osw-abc__eintrag { border-bottom: 1px solid var(--os-border); }
.osw-abc__eintrag > summary {
	display: grid; gap: 2px 14px; cursor: pointer;
	grid-template-columns: minmax(0, 1fr) 22px;
	padding: 18px 0; list-style: none;
}
.osw-abc__eintrag > summary::-webkit-details-marker { display: none; }
.osw-abc__titel {
	font-family: var(--os-font-head); color: var(--os-black);
	font-size: clamp(1.05rem, 1.8vw, 1.22rem);
	grid-column: 1; min-width: 0;
}
.osw-abc__kurz { color: var(--os-soft); font-size: .95rem; grid-column: 1; min-width: 0; }
.osw-abc__eintrag > summary .osw-fq__zeichen {
	grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0;
}
@media (min-width: 760px) {
	.osw-abc__eintrag > summary {
		grid-template-columns: minmax(150px, auto) minmax(0, 1fr) 22px;
		align-items: baseline;
	}
	.osw-abc__eintrag > summary .osw-abc__kurz { grid-column: 2; }
	.osw-abc__eintrag > summary .osw-fq__zeichen { grid-column: 3; grid-row: 1; align-self: baseline; }
}
.osw-abc__eintrag[open] .osw-fq__zeichen::after { opacity: 0; }
.osw-abc__antwort { padding-bottom: 22px; max-width: 72ch; }
.osw-abc__kontakt {
	font-family: var(--os-font-head); color: var(--os-black);
	background: var(--os-mute); border-left: 3px solid var(--os-red);
	padding: 10px 14px; border-radius: 0 var(--os-radius) var(--os-radius) 0;
}
.osw-linkliste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.osw-linkliste a {
	color: var(--os-red); text-decoration: none;
	border-bottom: 1px solid rgba(226, 0, 26, .3); padding-bottom: 1px;
}
.osw-linkliste a:hover { border-bottom-color: var(--os-red); }
.osw-abc__leer { margin-top: 24px; color: var(--os-soft); }

/* --- Ferienplan ---------------------------------------------------------- */
.osw-ferienjahr + .osw-ferienjahr { margin-top: 34px; }
.osw-ferienjahr h3 { font-size: 1.15rem; margin-bottom: 12px; }
.osw-ferienliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.osw-ferien {
	display: grid; gap: 4px 16px; align-items: baseline;
	padding: 13px 16px; background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius);
}
.osw-ferien__name { font-family: var(--os-font-head); color: var(--os-black); }
.osw-ferien__zeit { color: var(--os-soft); }
.osw-ferien--feiertag { background: var(--os-mute); }
.osw-ferien--vorbei { opacity: .5; }
.osw-ferien--aktuell { border-color: var(--os-red); border-width: 2px; opacity: 1; }
.osw-ferien__marke {
	justify-self: start; background: var(--os-red); color: #fff;
	font-family: var(--os-font-head); font-size: .72rem; letter-spacing: .08em;
	text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
@media (min-width: 640px) {
	.osw-ferien { grid-template-columns: 1fr auto auto; }
}

/* --- Wer hilft wobei ----------------------------------------------------- */
.osw-zust { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.osw-zust__karte {
	display: grid; gap: 3px; align-content: start; padding: 18px 20px;
	background: var(--os-mute); border: 1px solid var(--os-border);
	border-radius: var(--os-radius);
}
.osw-zust__rolle {
	font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--os-red); font-family: var(--os-font-head);
}
.osw-zust__name { font-size: 1.08rem; }
.osw-zust__tel { color: var(--os-text); text-decoration: none; }
.osw-zust__tel:hover { color: var(--os-red); }
.osw-zust__hinweis { color: var(--os-soft); font-size: .9rem; }

/* --- Standorte ----------------------------------------------------------- */
.osw-orte { display: grid; gap: 24px; }
@media (min-width: 900px) { .osw-orte { grid-template-columns: 1fr 1fr; } }
.osw-ort {
	background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: clamp(22px, 2.6vw, 34px);
	position: relative; overflow: hidden;
}
.osw-ort::after {
	content: ""; position: absolute; right: -60px; top: -60px;
	width: 160px; height: 160px; background: var(--os-mute);
	transform: skewX(var(--os-skew)); z-index: 0;
}
.osw-ort { display: flex; flex-direction: column; }
.osw-ort > * { position: relative; z-index: 1; }
.osw-ort .osw-actions { margin-top: auto; margin-bottom: 0; padding-top: 6px; }
.osw-ort__kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.osw-ort__kopf h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.osw-ort__text { color: var(--os-text); }
.osw-ort__merkmale { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.osw-ort__merkmale li {
	font-size: .85rem; padding: 5px 11px; border: 1px solid var(--os-border);
	border-radius: 999px; color: var(--os-soft);
}
.osw-ort__daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 20px; }
.osw-ort__daten dt {
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--os-soft); font-family: var(--os-font-head); padding-top: 3px;
}
.osw-ort__daten dd { margin: 0; color: var(--os-black); font-family: var(--os-font-head); }
.osw-ort__daten dd a { color: inherit; text-decoration: none; }
.osw-ort__daten dd a:hover { color: var(--os-red); }

/* --- Klassen ------------------------------------------------------------- */
.osw-klassen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.osw-klasse {
	display: grid; gap: 2px; padding: 14px 18px; background: #fff;
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
	border-left: 4px solid var(--os-red);
}
.osw-klasse__name { font-family: var(--os-font-head); color: var(--os-black); font-size: 1.05rem; }
.osw-klasse__lp { color: var(--os-soft); font-size: .95rem; }

/* --- Aus dem Schulleben -------------------------------------------------- */
.osw-erfolge { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.osw-erfolg {
	padding: 24px; background: var(--os-mute); border-radius: var(--os-radius);
	border-top: 4px solid var(--os-red);
}
.osw-erfolg__jahr {
	font-family: var(--os-font-head); color: var(--os-red);
	font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
.osw-erfolg h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.osw-erfolg p { margin: 0; color: var(--os-text); }

/* --- Newsletter-Archiv --------------------------------------------------- */
.osw-nl { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.osw-nl__jahr h3 {
	font-size: 1rem; letter-spacing: .08em; color: var(--os-red);
	padding-bottom: 8px; border-bottom: 2px solid var(--os-border); margin-bottom: 10px;
}
.osw-nl__jahr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.osw-nl__jahr a {
	display: grid; gap: 1px; padding: 9px 12px; text-decoration: none;
	background: #fff; border: 1px solid var(--os-border); border-radius: var(--os-radius);
	transition: border-color .15s ease;
}
.osw-nl__jahr a:hover { border-color: var(--os-red); }
.osw-nl__titel { font-family: var(--os-font-head); color: var(--os-black); }
.osw-nl__meta { font-size: .8rem; color: var(--os-soft); }

/* Zweite Zeile des Redaktionshinweises – etwas leiser als die erste. */
.osw-hinweis--leise { font-size: .92rem; opacity: .85; margin-top: -.4em; }
.osw-hinweis--leise em { font-style: normal; font-family: var(--os-font-head); }

/* ==========================================================================
   Version 0.7 — Projektarbeit
   ========================================================================== */

/* --- Vier Schritte -------------------------------------------------------- */
.osw-pa-vier { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.osw-pa-karte {
	position: relative; padding: 26px 24px 24px;
	background: var(--os-mute); border-radius: var(--os-radius);
	border-top: 4px solid var(--os-red); overflow: hidden;
}
.osw-pa-karte__nr {
	position: absolute; right: 14px; top: 8px;
	font-family: var(--os-font-head); font-size: 3.2rem; line-height: 1;
	color: rgba(226, 0, 26, .13);
}
.osw-pa-karte h2 { font-size: 1.15rem; margin: 0 0 8px; position: relative; }
.osw-pa-karte p { margin: 0; position: relative; }

/* --- Termine -------------------------------------------------------------- */
.osw-pa-termine { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: pa; }
.osw-pa-termin {
	display: grid; gap: 3px 20px; align-items: baseline;
	padding: 14px 18px; background: #fff;
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
	border-left: 4px solid var(--os-red);
}
.osw-pa-termin--vorbei { opacity: .5; border-left-color: var(--os-border); }
.osw-pa-termin__datum {
	font-family: var(--os-font-head); color: var(--os-black); white-space: nowrap;
}
.osw-pa-termin__text { display: grid; gap: 2px; }
.osw-pa-termin__text span { color: var(--os-soft); font-size: .95rem; }
@media (min-width: 680px) {
	.osw-pa-termin { grid-template-columns: 190px 1fr; }
}

/* --- Beurteilungsbereiche ------------------------------------------------- */
.osw-pa-bereiche { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.osw-pa-bereich {
	display: grid; gap: 4px; padding: 18px 20px;
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
}
.osw-pa-bereich b { font-size: 1.05rem; }
.osw-pa-bereich span { color: var(--os-soft); font-size: .95rem; }

/* --- Einstieg in den Arbeitsbereich --------------------------------------- */
.osw-pa-einstieg {
	display: grid; gap: 18px; align-items: start;
	grid-template-columns: auto 1fr;
	padding: clamp(24px, 3vw, 36px);
	background: #fff; border: 2px solid var(--os-black); border-radius: var(--os-radius);
}
.osw-pa-einstieg > .osw-flag { margin-top: 6px; }
.osw-pa-einstieg h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 6px; }
.osw-pa-einstieg p { margin: 0; max-width: 62ch; }
.osw-pa-einstieg .osw-actions { grid-column: 1 / -1; margin: 0; }
@media (min-width: 980px) {
	.osw-pa-einstieg { grid-template-columns: auto 1fr auto; }
	.osw-pa-einstieg .osw-actions { grid-column: auto; }
}

/* ==========================================================================
   Version 0.8 — Termine und Suche
   ========================================================================== */

/* Das Suchfeld in der Navigation ist seit 0.17.5 ein Knopf mit Suchleiste,
   siehe «Suche im Kopf». */
.osw-suchfeld--mobil { display: flex; gap: 8px; margin-top: 18px; }
.osw-suchfeld--mobil input { flex: 1 1 auto; }
.osw-suchfeld--gross { display: flex; gap: 10px; margin-top: 22px; max-width: 620px; }
.osw-suchfeld--gross label { flex: 1 1 auto; }
.osw-abc--suchbar .osw-suchfeld, .osw-suchfeld--gross, .osw-suchfeld--mobil { display: flex; }
.osw-suchfeld--gross input, .osw-suchfeld--mobil input { width: 100%; }

/* --- Trefferliste --------------------------------------------------------- */
.osw-treffer { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.osw-treffer__zeile {
	display: grid; gap: 4px; padding: 20px 22px;
	background: #fff; border: 1px solid var(--os-border); border-radius: var(--os-radius);
	border-left: 4px solid var(--os-border);
	transition: border-left-color .15s ease;
}
.osw-treffer__zeile:hover { border-left-color: var(--os-red); }
.osw-treffer__typ {
	font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--os-red); font-family: var(--os-font-head);
}
.osw-treffer__titel {
	font-family: var(--os-font-head); color: var(--os-black);
	font-size: clamp(1.05rem, 1.8vw, 1.22rem); text-decoration: none;
}
.osw-treffer__titel:hover { color: var(--os-red); }
.osw-treffer__text { margin: 0; color: var(--os-soft); max-width: 78ch; }

/* --- Die nächsten Termine -------------------------------------------------- */
.osw-naechste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.osw-naechst {
	display: grid; gap: 4px; align-content: start; padding: 20px 22px;
	background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius); border-top: 4px solid var(--os-red);
}
.osw-naechst--ferien { border-top-color: var(--os-black); background: var(--os-mute); }
.osw-naechst__wann {
	font-family: var(--os-font-head); font-size: .78rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--os-red);
}
.osw-naechst--ferien .osw-naechst__wann { color: var(--os-soft); }
.osw-naechst h2 { font-size: 1.12rem; margin: 2px 0 4px; }
.osw-naechst__datum { margin: 0; color: var(--os-text); font-size: .95rem; }
.osw-naechst__ort { margin: 0; color: var(--os-soft); font-size: .9rem; }
.osw-durch { text-decoration: line-through; }

/* --- Terminliste ---------------------------------------------------------- */
.osw-terminmonat + .osw-terminmonat { margin-top: 34px; }
.osw-terminmonat h3 {
	font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--os-red); padding-bottom: 8px;
	border-bottom: 2px solid var(--os-border); margin-bottom: 12px;
}
.osw-terminliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.osw-termin {
	display: grid; gap: 4px 18px; align-items: start;
	grid-template-columns: 54px 1fr;
	padding: 14px 18px; background: #fff;
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
}
.osw-termin--ferien { background: var(--os-mute); }
.osw-termin--vorbei { opacity: .55; grid-template-columns: 1fr; }
.osw-termin--ab .osw-termin__titel { text-decoration: line-through; }
.osw-termin__tag {
	display: grid; justify-items: center; line-height: 1.1;
	padding-top: 2px; color: var(--os-soft);
}
.osw-termin__tag b { font-family: var(--os-font-head); font-size: 1.5rem; color: var(--os-black); }
.osw-termin__tag span { font-size: .7rem; }
.osw-termin--ferien .osw-termin__tag b { color: var(--os-soft); }
.osw-termin__inhalt { display: grid; gap: 2px; min-width: 0; }
.osw-termin__titel { font-size: 1.05rem; }
.osw-termin__titel a { color: inherit; text-decoration: none; }
.osw-termin__titel a:hover { color: var(--os-red); }
.osw-termin__meta { color: var(--os-soft); font-size: .93rem; }
.osw-termin__absage { color: var(--os-red); font-family: var(--os-font-head); font-size: .9rem; }
.osw-termin__art {
	grid-column: 2; justify-self: start; font-size: .78rem;
	padding: 3px 10px; border: 1px solid var(--os-border); border-radius: 999px;
	color: var(--os-soft);
}
@media (min-width: 760px) {
	.osw-termin { grid-template-columns: 54px 1fr auto; align-items: center; }
	.osw-termin__art { grid-column: 3; justify-self: end; }
}

/* --- Kalender-Abo --------------------------------------------------------- */
.osw-abo {
	display: grid; gap: 18px; align-items: start; grid-template-columns: auto 1fr;
	padding: clamp(24px, 3vw, 36px);
	background: #fff; border: 2px solid var(--os-black); border-radius: var(--os-radius);
}
.osw-abo h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 6px; }
.osw-abo p { margin: 0 0 8px; max-width: 62ch; }
.osw-abo__adresse code {
	font-size: .82rem; background: var(--os-mute); padding: 6px 10px;
	border-radius: var(--os-radius); display: inline-block; word-break: break-all;
}
.osw-abo .osw-actions { grid-column: 1 / -1; margin: 0; }
@media (min-width: 980px) {
	.osw-abo { grid-template-columns: auto 1fr auto; }
	.osw-abo .osw-actions { grid-column: auto; }
}

/* --- Rückblick ------------------------------------------------------------ */
.osw-rueckblick { border-top: 1px solid var(--os-border); }
.osw-rueckblick > summary {
	display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 2px 14px;
	cursor: pointer; padding: 18px 0; list-style: none;
}
.osw-rueckblick > summary::-webkit-details-marker { display: none; }
.osw-rueckblick > summary .osw-abc__titel,
.osw-rueckblick > summary .osw-abc__kurz { grid-column: 1; }
.osw-rueckblick > summary .osw-fq__zeichen { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }
.osw-rueckblick[open] .osw-fq__zeichen::after { opacity: 0; }
.osw-terminliste--alt { padding-bottom: 20px; }

@media (min-width: 760px) {
	.osw-rueckblick > summary {
		grid-template-columns: minmax(150px, auto) minmax(0, 1fr) 22px;
		align-items: baseline;
	}
	.osw-rueckblick > summary .osw-abc__kurz { grid-column: 2; }
	.osw-rueckblick > summary .osw-fq__zeichen { grid-column: 3; grid-row: 1; align-self: baseline; }
}

/* Bild eines Schulhauses – nur vorhanden, wenn eines hinterlegt ist. */
.osw-ort__bild {
	aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--os-radius);
	margin: 0 0 18px; background: var(--os-mute);
}
.osw-ort__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Anmeldung (Version 0.9)
   ========================================================================== */

/* --- Zugang in der Hauptnavigation --------------------------------------- */
/* Der Anmelde-Punkt ist kein Inhalt, sondern eine Handlung. Darum steht er
   etwas abgesetzt am rechten Rand – erkennbar als Schaltfläche, aber ohne
   Signalfarbe. Ein zusätzlicher Trennstrich wäre neben dem Umriss zu viel. */

.osw-menu .osw-zugangspunkt { margin-left: 14px; }

/* Zurückhaltend: ein Umriss, kein Signal. Der Knopf soll auffindbar sein,
   nicht das Lauteste auf der Seite – rot bleibt den Handlungen im Inhalt
   vorbehalten. Beim Zeigen färbt sich der Rand rot, mehr braucht es nicht. */
.osw-menu .osw-zugangspunkt > a {
	color: var(--os-black); font-weight: 600;
	padding: 7px 16px; border-radius: 999px;
	border: 1px solid var(--os-border); background: #fff;
	transition: border-color .15s ease, color .15s ease;
}
.osw-menu .osw-zugangspunkt > a:hover,
.osw-menu .osw-zugangspunkt > a:focus-visible {
	border-color: var(--os-red); color: var(--os-red);
}
.osw-menu .osw-zugangspunkt > a::after { display: none; }

.osw-mobile .osw-zugangspunkt > a {
	border: 1px solid var(--os-border); border-radius: 999px;
	background: #fff; color: var(--os-black); text-align: center;
	padding: 13px 18px; margin-top: 16px;
}

/* --- Seitenkopf und Sektion in schmaler Fassung --------------------------- */
.osw-seitenkopf--schmal .osw-lead { max-width: 58ch; }
.osw-sektion--eng { padding-block: clamp(40px, 5vw, 68px); }

/* --- Anmeldeseite: Formular links, Erklärung rechts ----------------------- */
.osw-zugang2 { display: grid; gap: clamp(24px, 3.4vw, 46px); align-items: start; }
@media (min-width: 900px) {
	.osw-zugang2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.osw-loginkarte {
	background: #fff; border: 1px solid var(--os-border);
	border-top: 4px solid var(--os-red); border-radius: var(--os-radius);
	padding: clamp(24px, 3.2vw, 40px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
	scroll-margin-top: 90px;
}
.osw-loginkarte h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.015em; margin: 0 0 8px;
}
.osw-loginkarte__text { color: var(--os-soft); margin: 0 0 22px; }

.osw-loginform { display: block; }
.osw-feld { display: block; margin: 0 0 18px; position: relative; }
.osw-feld label {
	display: block; font-family: var(--os-font-head); font-weight: 700;
	font-size: .88rem; color: var(--os-black); margin-bottom: 6px;
}
.osw-feld input {
	width: 100%; font: inherit; font-size: 1.02rem;
	padding: 13px 15px; border: 2px solid var(--os-border);
	border-radius: var(--os-radius); background: #fff; color: var(--os-text);
	transition: border-color .15s ease;
}
.osw-feld input:focus { outline: none; border-color: var(--os-red); }
.osw-feld--passwort input { padding-right: 86px; }

.osw-augen {
	position: absolute; right: 6px; bottom: 6px; height: 40px;
	background: none; border: none; cursor: pointer; padding: 0 12px;
	color: var(--os-soft); font: inherit; font-size: .86rem; text-decoration: underline;
}
.osw-augen:hover { color: var(--os-black); }

.osw-merken {
	display: flex; align-items: center; gap: 9px;
	font-size: .95rem; color: var(--os-text); margin-bottom: 4px; cursor: pointer;
}
.osw-merken input { width: 18px; height: 18px; accent-color: var(--os-red); }

.osw-loginform__aktion { margin: 22px 0 0; }
.osw-loginform__aktion .osw-btn { width: 100%; justify-content: center; padding-block: 15px; }
.osw-loginform__fuss {
	margin: 18px 0 0; font-size: .92rem; color: var(--os-soft);
	display: flex; flex-wrap: wrap; gap: 8px;
}
.osw-loginform__fuss a { color: var(--os-soft); }
.osw-loginform__fuss a:hover { color: var(--os-red); }

/* --- Meldungen ----------------------------------------------------------- */
.osw-meldung {
	border-left: 4px solid var(--os-red); background: #fff5f6;
	padding: 13px 16px; margin: 0 0 20px; border-radius: 0 var(--os-radius) var(--os-radius) 0;
	font-size: .96rem;
}
.osw-meldung--gut { border-left-color: #1d7a3e; background: #f1f9f3; }

/* --- Anmeldeseite kompakt (0.17.3) ---------------------------------------
   Abgemeldet ist das Formular die Seite: Der Titel steht in der Karte, ein
   eigener Seitenkopf entfällt, das Formular beginnt direkt unter der
   Navigation. Für «angemeldet» und «Konto erstellen» bleibt ein Seitenkopf,
   aber in knapper Fassung. */
/* Die knappe Fassung ist seit 0.17.4 der Standard aller Seitenköpfe. */

.osw-sektion--zugang { padding-block-start: clamp(28px, 4vw, 52px); }

.osw-loginkarte h1 {
	font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.015em;
	line-height: 1.15; margin: 0 0 6px;
}

/* Die Erklärspalte beginnt auf der Höhe des Kartentitels, nicht an der
   Oberkante der Karte: Rahmen (4 px) plus Innenabstand der Karte. */
@media (min-width: 900px) {
	.osw-zugang2__info { padding-top: calc(4px + clamp(24px, 3.2vw, 40px)); }
}

/* --- Erklärspalte -------------------------------------------------------- */
.osw-zugang2__titel { font-size: 1.2rem; margin: 0 0 18px; }
.osw-zugang2__liste { list-style: none; margin: 0; padding: 0; }
.osw-zugang2__liste li {
	border-top: 1px solid var(--os-border); padding: 16px 0;
	font-size: .96rem; color: var(--os-soft);
}
.osw-zugang2__liste strong {
	display: block; color: var(--os-black); font-family: var(--os-font-head);
	font-size: 1rem; margin-bottom: 4px;
}
.osw-zugang2__hilfe {
	margin: 20px 0 0; font-size: .92rem; color: var(--os-soft);
	border-top: 1px solid var(--os-border); padding-top: 18px;
}

/* --- «Noch kein Konto?» --------------------------------------------------- */
.osw-kontozeile { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 36px); scroll-margin-top: 90px; }
.osw-kontozeile h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.015em; margin-block: 10px 12px;
}
.osw-kontozeile p { color: var(--os-soft); }
.osw-kontoform {
	background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: clamp(20px, 3vw, 36px);
}

/* --- Angemeldet ---------------------------------------------------------- */
.osw-zugangskarte {
	background: #fff; border: 1px solid var(--os-border);
	border-top: 4px solid var(--os-red); border-radius: var(--os-radius);
	padding: clamp(24px, 3.4vw, 40px); max-width: 720px;
	scroll-margin-top: 90px;
}
.osw-zugangskarte h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 14px 0 10px; }
.osw-zugangskarte p { color: var(--os-soft); }
.osw-zugangskarte .osw-actions { margin-top: 22px; }

/* --- Kopfzeile in drei Zonen (0.16.8) ------------------------------------
   Vorher war die Zeile eine einzige Reihe, und der freie Platz hing am Menü
   (`margin-left: auto`). Damit sammelte er sich zwischen Logo und erstem
   Menüpunkt: auf breiten Schirmen eine Lücke, auf schmalen klebte das Menü
   am Absender. Der Abstand war also nicht gestaltet, sondern zufällig.

   Neu: Der Absender bekommt einen festen Schutzraum mit Haarlinie, die
   Navigation schliesst daran an, und der elastische Platz sammelt sich
   rechts vor dem Zugangsknopf – dort stört er nicht.

   Damit das aufgeht, gehören Servicelinks wie «Kontakt» in die Servicezeile
   (Menüplatz «Servicezeile»). Sechs Hauptpunkte plus Knopf plus Suchfeld
   bleiben bis hinunter zu 1180 px einzeilig; ein umgebrochenes Menü sieht
   nach Panne aus. */
.osw-nav > .osw-shell { gap: 0; }

.osw-brand {
	padding-right: 28px;
	border-right: 1px solid var(--os-border);
	align-self: stretch;
}

.osw-menu {
	margin-left: 28px;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 2px;
}
.osw-menu > li { flex: none; }
.osw-menu a { padding: 8px 11px; font-size: .92rem; white-space: nowrap; }
.osw-menu a::after { left: 11px; right: 11px; }

/* Der Knopf ist eine Handlung, kein Inhalt: Er rückt ans rechte Ende und
   nimmt den freien Platz vor sich auf. */
.osw-menu .osw-zugangspunkt { margin-left: auto; padding-left: 24px; }
.osw-menu .osw-zugangspunkt > a { padding: 7px 16px; }

/* Servicelinks in der Servicezeile */
.osw-dienste { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.osw-dienste li { list-style: none; margin: 0; }
.osw-dienste a { color: inherit; }
.osw-dienste a:hover { color: var(--os-red); }
.osw-dienste--mobil {
	display: flex; flex-wrap: wrap; gap: 8px 20px;
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--os-border);
	font-size: .92rem;
}

@media (max-width: 1100px) {
	.osw-brand { padding-right: 18px; }
	.osw-menu { margin-left: 18px; }
	.osw-menu .osw-zugangspunkt { padding-left: 14px; }
}


/* Unter 980 übernimmt das Burger-Menü – dann hätte die Haarlinie nichts mehr
   zu trennen. */
@media (max-width: 980px) {
	.osw-brand { padding-right: 0; border-right: 0; }
}

/* Zwischen Burger-Menü (ab 980) und Suchfeld (ab 1200) ist die Zeile am
   engsten. Hier rückt sie noch einmal zusammen, damit nichts umbricht. */
@media (max-width: 1100px) {
	.osw-menu a { padding: 8px 8px; font-size: .88rem; }
	.osw-menu a::after { left: 8px; right: 8px; }
	.osw-menu .osw-zugangspunkt > a { padding: 7px 13px; }
}

/* --------------------------------------------- Konto erstellen (0.9.3) */

.osw-zurueck { margin: 0 0 clamp(18px, 2.4vw, 30px); }
.osw-zurueck a { color: var(--os-soft); text-decoration: none; font-size: .95rem; }
.osw-zurueck a:hover { color: var(--os-red); }
.osw-zurueck--fuss { margin: clamp(24px, 3vw, 38px) 0 0; }

/* --- Bereich: was zu meinem Konto gehört -------------------------------- */
.osw-bereich { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .osw-bereich { grid-template-columns: 1fr 1fr; } }
.osw-bereich a {
	display: block; border: 1px solid var(--os-border); border-left: 4px solid var(--os-red);
	border-radius: var(--os-radius); padding: 14px 18px; text-decoration: none;
	background: #fff; transition: border-color .15s ease, transform .15s ease;
}
.osw-bereich a:hover { transform: translateY(-1px); border-color: var(--os-black); border-left-color: var(--os-red); }
/* Die Marke ist ein Schildchen, kein Balken: Sie soll nur so breit sein wie
   ihr Wort. Die Beschreibungszeile darunter ist ebenfalls ein <span> — und
   `.osw-bereich span` hat eine Klasse plus ein Element, `.osw-bereich__marke`
   nur eine Klasse. Die allgemeine Regel gewann deshalb beides: Sie machte aus
   dem Schildchen einen Block über die ganze Breite und färbte die weisse
   Schrift grau. Darum steht die Beschreibung jetzt ausdrücklich da, und die
   Marke ist von ihr ausgenommen. */
.osw-bereich .osw-bereich__marke {
	display: inline-block; background: var(--os-black); color: #fff;
	font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 3px; margin-bottom: 8px;
}
.osw-bereich strong { display: block; font-family: var(--os-font-head); color: var(--os-black); }
.osw-bereich a > span:not(.osw-bereich__marke) { display: block; font-size: .92rem; color: var(--os-soft); margin-top: 2px; }
.osw-loginkarte--schlicht { border-top-color: var(--os-black); margin-top: 26px; }
.osw-feld select {
	width: 100%; font: inherit; font-size: 1.02rem; padding: 13px 15px;
	border: 2px solid var(--os-border); border-radius: var(--os-radius); background: #fff;
}
.osw-feld label em, .osw-feld span em { font-style: normal; color: var(--os-soft); font-weight: 400; }
.osw-zugang2__fuss { margin-top: 18px; font-size: .92rem; color: var(--os-soft); }


/* ==========================================================================
   Leuchtkasten für Videos (Version 0.11)
   ========================================================================== */

/* Die Seite dahinter steht still, solange der Kasten offen ist. */
html.osw-lk-offen { overflow: hidden; }

.osw-lk {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	padding: clamp(12px, 3vw, 40px);
}
.osw-lk[hidden] { display: none; }

.osw-lk__hg {
	position: absolute; inset: 0;
	background: rgba(8, 8, 8, .88);
	backdrop-filter: blur(3px);
	animation: osw-lk-auf .18s ease-out;
}

.osw-lk__box {
	position: relative; z-index: 1;
	width: min(1100px, 100%);
	animation: osw-lk-hoch .22s ease-out;
}

@keyframes osw-lk-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes osw-lk-hoch { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.osw-lk__hg, .osw-lk__box { animation: none; }
}

/* --- Der Rahmen mit dem Video ------------------------------------------- */
.osw-lk__rahmen {
	position: relative; aspect-ratio: 16 / 9; width: 100%;
	background: #000; border-radius: var(--os-radius); overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.osw-lk__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Titelzeile unter dem Video ----------------------------------------- */
.osw-lk__fuss {
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	align-items: flex-end; justify-content: space-between;
	padding: 16px 2px 0; color: #fff;
}
.osw-lk__text { min-width: 0; }
.osw-lk__meta {
	display: block; font-family: var(--os-font-head); font-weight: 700;
	font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
	color: #ff3347; margin-bottom: 4px;
}
.osw-lk__fuss h2 {
	color: #fff; font-size: clamp(1.05rem, 2vw, 1.45rem);
	line-height: 1.25; margin: 0;
}
.osw-lk__seite { display: flex; align-items: center; gap: 16px; flex: none; }
.osw-lk__zaehler {
	font-size: .82rem; color: rgba(255, 255, 255, .55);
	font-variant-numeric: tabular-nums;
}
.osw-lk__yt { color: rgba(255, 255, 255, .8); font-size: .86rem; }
.osw-lk__yt:hover { color: #fff; }

/* --- Schliessen und Blättern -------------------------------------------- */
.osw-lk__zu,
.osw-lk__nav {
	position: absolute; z-index: 2;
	display: grid; place-items: center;
	background: rgba(20, 20, 20, .72); color: #fff;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px; cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.osw-lk__zu:hover,
.osw-lk__nav:hover { background: var(--os-red); border-color: var(--os-red); }
.osw-lk__zu:focus-visible,
.osw-lk__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.osw-lk__zu {
	top: -14px; right: -14px; width: 44px; height: 44px;
	font-size: 1.5rem; line-height: 1;
}
.osw-lk__nav {
	top: calc(50% - 28px); width: 48px; height: 48px;
	font-size: 1.8rem; line-height: 1;
}
.osw-lk__nav--zurueck { left: -60px; }
.osw-lk__nav--vor { right: -60px; }
.osw-lk__nav[hidden] { display: none; }

/* Auf schmalen Schirmen ist neben dem Video kein Platz – dann sitzen die
   Pfeile über den Rändern des Videos statt daneben. */
@media (max-width: 1240px) {
	.osw-lk__nav--zurueck { left: 8px; }
	.osw-lk__nav--vor { right: 8px; }
	.osw-lk__zu { top: -52px; right: 0; }
}
@media (max-width: 620px) {
	.osw-lk__nav { width: 40px; height: 40px; font-size: 1.5rem; }
	.osw-lk__fuss { padding-top: 12px; }
	.osw-lk__seite { width: 100%; justify-content: space-between; }
	/* Auf dem Handy gehört das Schliessen an den Bildschirmrand, nicht an
	   eine Ecke des Videos – dort trifft man es mit dem Daumen. */
	.osw-lk__zu { position: fixed; top: 10px; right: 10px; }
}

/* Stift zum Bearbeiten – nur für angemeldete Redaktion sichtbar (Version 0.12) */
.osw-stift {
	display: inline-grid; place-items: center;
	width: 26px; height: 26px; margin-left: 10px;
	vertical-align: middle;
	border: 1px solid var(--os-border); border-radius: 999px;
	color: var(--os-soft); font-size: .82rem; line-height: 1;
	text-decoration: none; opacity: .5; transition: .15s;
}
.osw-stift:hover { opacity: 1; color: var(--os-red); border-color: var(--os-red); }
.osw-sektion--dunkel .osw-stift { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .7); }
.osw-sektion--dunkel .osw-stift:hover { color: #fff; border-color: #fff; }
@media print { .osw-stift { display: none; } }

/* ==========================================================================
   Medienpädagogik (Version 0.15)
   ========================================================================== */

/* --- Hilfe zuerst -------------------------------------------------------- */
.osw-medienhilfe {
	/* Schmal: Fahne und Text nebeneinander, die Knoepfe darunter ueber die
	   ganze Breite. minmax(0, 1fr) ist noetig, sonst zieht der breiteste
	   Knopf die erste Spalte auf und der Text bricht Wort fuer Wort um. */
	display: grid; gap: 14px 16px; align-items: start;
	grid-template-columns: auto minmax(0, 1fr);
	padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 30px);
	padding-left: calc(6px + clamp(16px, 2.6vw, 30px));
	background: #fff5f6; border: 1px solid rgba(226, 0, 26, .3);
	border-radius: var(--os-radius); position: relative; overflow: hidden;
}
.osw-medienhilfe::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--os-red);
}
.osw-medienhilfe .osw-flag { flex: none; margin-top: 4px; }
.osw-medienhilfe__text { min-width: 0; }
.osw-medienhilfe__titel {
	font-family: var(--os-font-head); color: var(--os-black);
	font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 6px;
	text-wrap: balance;
}
.osw-medienhilfe__text p { margin: 0; }
.osw-medienhilfe .osw-actions { grid-column: 1 / -1; margin-top: 0; }
.osw-medienhilfe .osw-actions .osw-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
@media (min-width: 620px) {
	.osw-medienhilfe .osw-actions .osw-btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
	.osw-medienhilfe { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
	.osw-medienhilfe .osw-flag { margin-top: 0; }
	.osw-medienhilfe .osw-actions { grid-column: auto; }
}

/* --- Haltung und Ansprechperson ----------------------------------------- */
.osw-medienperson {
	background: var(--os-mute); border: 1px solid var(--os-border);
	border-top: 4px solid var(--os-red); border-radius: var(--os-radius);
	padding: clamp(20px, 2.6vw, 28px); align-self: start;
}
.osw-medienperson__name {
	font-family: var(--os-font-head); color: var(--os-black);
	font-size: 1.25rem; margin: 8px 0 2px;
}
.osw-medienperson__rolle { color: var(--os-soft); font-size: .92rem; margin: 0 0 14px; }
.osw-medienperson p { margin-bottom: 0; }
.osw-medienperson .osw-actions { margin-top: 18px; }

/* --- Themen pro Stufe ---------------------------------------------------- */
.osw-medienstufen {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.osw-medienstufe {
	background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: 22px 24px 24px;
	position: relative; overflow: hidden;
}
.osw-medienstufe::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: var(--os-red); transform: skewX(var(--os-skew)); transform-origin: top;
}
.osw-medienstufe__stufe {
	display: block; font-family: var(--os-font-head); font-weight: 700;
	font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--os-red); margin-bottom: 8px;
}
.osw-medienstufe h3 { font-size: 1.15rem; margin: 0 0 8px; }
.osw-medienstufe p { margin: 0; color: var(--os-soft); font-size: .96rem; }

/* --- Anlaufstellen ------------------------------------------------------- */
.osw-medienhilfen {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.osw-medienhilfe-karte {
	border: 1px solid var(--os-border); border-radius: var(--os-radius);
	padding: 20px 22px; background: #fff;
}
.osw-medienhilfe-karte h3 { font-size: 1.1rem; margin: 0 0 8px; }
.osw-medienhilfe-karte p { margin: 0 0 10px; color: var(--os-soft); font-size: .96rem; }
.osw-medienhilfe-karte__weg { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; }
.osw-medienhilfe-karte__weg a { font-family: var(--os-font-head); font-weight: 700; color: var(--os-red); }

/* --- Angebote ------------------------------------------------------------ */
.osw-medienangebote {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.osw-medienangebot {
	background: #fff; border: 1px solid var(--os-border);
	border-radius: var(--os-radius); padding: 22px 24px;
}
.osw-medienangebot h3 { font-size: 1.1rem; margin: 0 0 4px; }
.osw-medienangebot__meta {
	color: var(--os-soft); font-size: .82rem; margin: 0 0 10px;
	letter-spacing: .02em;
}
.osw-medienangebot p:last-child { margin: 0; font-size: .96rem; }

/* --- Material ------------------------------------------------------------ */
.osw-medienmaterial { border-top: 1px solid var(--os-border); }
.osw-medienmaterial__eintrag {
	border-bottom: 1px solid var(--os-border); padding: 18px 0;
	display: grid; gap: 2px 20px;
}
.osw-medienmaterial__art {
	font-family: var(--os-font-head); font-weight: 700;
	font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--os-soft);
}
.osw-medienmaterial__eintrag h3 { font-size: 1.05rem; margin: 0; }
.osw-medienmaterial__eintrag p { margin: 0; color: var(--os-soft); font-size: .94rem; }
@media (min-width: 760px) {
	.osw-medienmaterial__eintrag { grid-template-columns: minmax(150px, auto) minmax(0, 1fr); }
	.osw-medienmaterial__art { grid-column: 1; grid-row: 1 / -1; padding-top: 3px; }
	.osw-medienmaterial__eintrag h3, .osw-medienmaterial__eintrag p { grid-column: 2; }
}

/* ==========================================================================
   Version 0.17 — Kopf ohne Adresszeile
   Telefon als Knopf (nur schmal), Konto als runder Knopf mit Initialen
   (immer), Kontaktangaben unten im Handymenü. Über dem Kopf stehen am
   Rechner nur noch die Servicelinks, wenn welche eingetragen sind.
   ========================================================================== */

/* Gemeinsame Form der Knöpfe im Kopf: so gross wie der Menüknopf, damit die
   Reihe rechts eine Einheit bildet. 42 Pixel hoch – das trifft ein Daumen. */
.osw-kopfknopf {
	display: inline-grid; place-items: center; flex: none;
	width: 46px; height: 42px;
	border: 2px solid var(--os-border); border-radius: var(--os-radius);
	background: #fff; color: var(--os-black); text-decoration: none;
	cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.osw-kopfknopf:hover,
.osw-kopfknopf:focus-visible { border-color: var(--os-red); color: var(--os-red); }

/* Telefon: am Rechner nicht, dort steht die Nummer in der Fusszeile. */
.osw-kopfknopf--tel { display: none; }

/* Konto: rund, dunkel, mit Initialen. Rund unterscheidet ihn vom eckigen
   Menüknopf daneben – das ist eine Person, keine Liste. */
.osw-konto { position: relative; flex: none; }
.osw-konto__knopf {
	list-style: none;
	width: 42px; border-radius: 50%;
	background: var(--os-black); border-color: var(--os-black); color: #fff;
	font-family: var(--os-font-head); font-size: .86rem; letter-spacing: .03em;
}
.osw-konto__knopf::-webkit-details-marker { display: none; }
.osw-konto__knopf::marker { content: ""; }
.osw-konto__knopf:hover,
.osw-konto__knopf:focus-visible,
.osw-konto[open] > .osw-konto__knopf {
	background: var(--os-red); border-color: var(--os-red); color: #fff;
}

.osw-konto__feld {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
	min-width: 230px; max-width: calc(100vw - 2 * var(--os-gut, 16px));
	background: var(--os-paper); border: 1px solid var(--os-border);
	border-top: 3px solid var(--os-red); border-radius: var(--os-radius);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
	padding: 8px 0;
}
.osw-konto__wer {
	margin: 0; padding: 8px 16px 10px;
	font-size: .85rem; color: var(--os-soft);
	border-bottom: 1px solid var(--os-border);
}
.osw-konto__wer b { display: block; color: var(--os-black); font-size: 1rem; margin-top: 2px; }
.osw-konto__link {
	display: block; padding: 10px 16px; text-decoration: none;
	color: var(--os-text); font-family: var(--os-font-head);
}
.osw-konto__link:hover,
.osw-konto__link:focus-visible { background: var(--os-mute); color: var(--os-red); }
.osw-konto__link--ab { color: var(--os-soft); font-family: var(--os-font); }

/* Werkzeuge für Lehrpersonen im Kontofeld (0.18.1). */
.osw-konto__gruppe {
	margin: 6px 0; padding: 4px 0 6px;
	border-top: 1px solid var(--os-border); border-bottom: 1px solid var(--os-border);
}
.osw-konto__titel {
	margin: 0; padding: 8px 16px 2px;
	font-family: var(--os-font-head); font-size: .72rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--os-red);
}
.osw-konto__link[aria-current="page"] { color: var(--os-red); }
.osw-konto__marke {
	display: block; margin-top: 1px;
	font-family: var(--os-font); font-size: .78rem; color: var(--os-soft);
}
.osw-konto__feld { max-height: calc(100vh - 120px); overflow-y: auto; }

/* Kontaktangaben unten im Handymenü. */
.osw-mobilkontakt {
	display: grid; gap: 3px; font-style: normal;
	margin: 18px 0 22px; padding: 14px 16px;
	background: var(--os-mute); border-left: 4px solid var(--os-red);
	border-radius: var(--os-radius);
	font-size: .9rem; color: var(--os-soft);
}
.osw-mobile .osw-mobilkontakt a { border-bottom: 0; padding: 0; }
.osw-mobilkontakt__tel { text-decoration: none; margin-bottom: 4px; }
.osw-mobilkontakt__tel small { display: block; font-size: .78rem; color: var(--os-soft); font-weight: 400; }
.osw-mobilkontakt__tel b { color: var(--os-black); font-size: 1.12rem; }

/* Schmal: Menü eingeklappt. Die Knöpfe rücken nach rechts und zusammen;
   das Telefon übernimmt den Abstand, den sonst der Menüknopf hält. */
/* Breit: Der Kontoknopf steht rechts neben dem Suchknopf. */
.osw-konto { margin-left: 12px; }

@media (max-width: 980px) {
	.osw-kopfknopf--tel { display: inline-grid; margin-left: auto; }
	.osw-nav > .osw-shell { gap: 8px; }
	.osw-konto { margin-left: 0; }
	.osw-burger { margin-left: 0; }
}


/* --- Suche im Kopf (0.17.5) ------------------------------------------------
   Ein Symbol statt eines Feldes. Die Suche ist auf dieser Website ein
   Werkzeug für wenige, kein Hauptweg: Sie bekommt einen Knopf, aber keinen
   Platz in der Zeile. Das Feld war zudem so schmal, dass kaum ein Wort
   hineinpasste, und zwischen 1100 und 1199 px ganz ausgeblendet.

   Beim Klick legt sich eine Leiste unter die Navigation – über den Inhalt,
   nicht in ihn hinein, damit nichts springt. Fokus: genau ein Rahmen, der
   des Feldes; der allgemeine Fokusring bleibt für das Feld aus. */
.osw-suchknopf {
	display: inline-grid; place-items: center; flex: none;
	width: 42px; height: 42px; margin-left: 10px;
	border-radius: 50%; color: var(--os-black); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.osw-suchknopf:hover,
.osw-suchknopf[aria-expanded="true"] { background: var(--os-mute); color: var(--os-red); }
.osw-suchknopf:focus-visible { outline-offset: 0; }

.osw-suchleiste {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 65;
	background: var(--os-paper);
	border-top: 1px solid var(--os-border); border-bottom: 1px solid var(--os-border);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .07);
}
.osw-suchleiste[hidden] { display: none; }
.osw-suchleiste__form { display: flex; align-items: center; gap: 12px; padding-block: 16px; }
.osw-suchleiste__feld { position: relative; flex: 1 1 auto; display: block; }
.osw-suchleiste__feld svg {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	color: var(--os-soft); pointer-events: none;
}
.osw-suchleiste__feld input {
	width: 100%; font: inherit; font-size: 1.05rem; color: var(--os-text);
	padding: 12px 14px 12px 44px;
	border: 2px solid var(--os-border); border-radius: var(--os-radius); background: #fff;
}
.osw-suchleiste__feld input:focus { outline: none; border-color: var(--os-red); }
/* Das eingebaute Löschkreuz des Browsers stünde gleich neben unserem
   Schliessen-Kreuz – zwei Kreuze mit verschiedener Bedeutung. */
.osw-suchleiste__feld input { -webkit-appearance: none; appearance: none; }
.osw-suchleiste__feld input::-webkit-search-cancel-button,
.osw-suchleiste__feld input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.osw-suchleiste__form .osw-btn { align-self: stretch; padding-inline: 22px; }
.osw-suchleiste__zu {
	display: grid; place-items: center; flex: none;
	width: 42px; height: 42px; border: 0; border-radius: 50%;
	background: transparent; color: var(--os-soft); cursor: pointer;
}
.osw-suchleiste__zu:hover { background: var(--os-mute); color: var(--os-black); }

/* Schmal sucht man im Menü: Dort steht das Suchfeld schon. */
@media (max-width: 980px) {
	.osw-suchknopf, .osw-suchleiste { display: none; }
}