/*
 * Notenwelle: Gestaltung der Seite als eine Fassung für alle Breiten.
 * Desktop-Werte ausgelegt auf 1440 px Breite, Handy-Werte auf 390 px (Umschalten bei 760 px,
 * das Hauptmenü wechselt bei 1100 px aufs Handy-Menü).
 */

/* Fredoka vom eigenen Server (Lizenz in assets/fonts/LIZENZ.txt) */
@font-face {
	font-family: "Fredoka";
	src: url("../fonts/fredoka.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fredoka";
	src: url("../fonts/fredoka-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--gruen: #2E7D4F;
	--koralle: #FF7A59;
	--gelb: #FFD166;
	--gruen-hell: #D8ECD9;
	--gruenweiss: #F3F7EE;
	--weiss: #FFFFFF;
	--gelb-tint: #FFF6D6;
		--koralle-tint: #FFE6DE;
	--koralle-dunkel: #E8603E;
	--text: #1D3B2A;
	--grau: #3F5A49;
	--linie: #EEF5EF;
	--schrift: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body.nw {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	background: var(--gruenweiss);
	color: var(--text);
	font-family: var(--schrift);
	font-size: 17px;
	line-height: 1.5;
}
body.nw main { flex: 1 0 auto; }
.nw a { color: var(--gruen); }
.nw a:hover { color: var(--text); }
.nw img { max-width: 100%; height: auto; }
.nw-wrap { width: 100%; max-width: 1184px; margin: 0 auto; padding: 0 16px; }
.nw-sprung { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--gruen); color: #fff !important; }
.nw-sprung:focus { top: 12px; }
.nw :focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* Knöpfe */
.nw-btn { transition: transform .1s ease-out, border-color .15s, background-color .15s; }
.nw-btn:active { transform: scale(.97); }
.nw-btn--gruen {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
	background: var(--gruen); color: #fff !important; font-weight: 500; text-decoration: none;
}
.nw-btn--gruen:hover { background: #276b44; }
.nw-btn--rand {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
	border: 2px solid var(--gruen-hell); background: #fff; color: var(--gruen) !important; font-weight: 500; text-decoration: none;
}
.nw-btn--rand:hover { border-color: var(--gruen); }
.nw-btn--koralle {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
	background: var(--koralle); color: var(--text) !important; font-weight: 500; text-decoration: none;
}
.nw-btn--koralle:hover { background: #f36a48; }
.nw-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }

/* ------------------------------------------------------------------ Kopf */
.nw-head {
	position: sticky; top: 0; z-index: 20;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
	transition: box-shadow .2s;
}
.nw-head--edge { box-shadow: 0 1px 0 var(--gruen-hell); }
/* Beim Herunterscrollen fährt die Kopfleiste weg, beim Hochscrollen wieder herein */
.nw-head { transition: transform .45s cubic-bezier(.32, .72, 0, 1), box-shadow .25s ease; }
.nw-head--weg { transform: translateY(calc(-100% - 4px)); }
@media (prefers-reduced-motion: reduce) { .nw-head { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .nw-head { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.admin-bar .nw-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .nw-head { top: 46px; } }

.nw-kopf { display: flex; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; min-height: 68px; }
.nw-logo { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--gruen) !important; text-decoration: none; }
.nw-logo-mark { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--gruen); display: grid; place-items: center; }
.nw-logo-mark--gelb { background: var(--gelb); }
.nw-logo-text { font-weight: 600; font-size: 20px; line-height: 1.15; }

.nw-hauptnav { margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 32px; }
.nw-nav {
	color: var(--text) !important; text-decoration: none; font-weight: 500; padding: 10px 0;
	background: none; border: 0; font: inherit; cursor: pointer;
}
.nw-nav:hover { color: var(--gruen) !important; }
.nw-nav.ist-aktuell { color: var(--gruen) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

.nw-kopf-knoepfe { display: flex; gap: 8px; flex: none; }
.nw-ks-knopf, .nw-mm-knopf, .nw-mm-zu {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer;
}
.nw-ks-knopf { border: 0; background: var(--koralle); }
.nw-mm-knopf, .nw-mm-zu { border: 2px solid var(--gruen-hell); background: #fff; }
.nw-mm-knopf { display: none; }

/* Dropdowns */
.nw-dd { position: relative; display: flex; align-items: center; gap: 2px; }
.nw-dd-knopf { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -8px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.nw-dd-ganz { display: inline-flex; align-items: center; gap: 6px; }
.nw-dd-knopf svg, .nw-dd-ganz svg { transition: transform .2s ease; }
.nw-dd:hover .nw-dd-knopf svg, .nw-dd.ist-offen .nw-dd-knopf svg, .nw-dd:hover .nw-dd-ganz svg, .nw-dd.ist-offen .nw-dd-ganz svg { transform: rotate(180deg); }
.nw-dd:hover > .nw-nav, .nw-dd.ist-offen > .nw-nav, .nw-dd:hover > .nw-dd-knopf, .nw-dd.ist-offen > .nw-dd-knopf { color: var(--gruen) !important; }
.nw-dd-panel {
	position: absolute; top: calc(100% + 16px); left: 50%; z-index: 30; width: max-content;
	padding: 18px 18px 16px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 24px;
	box-shadow: 0 18px 40px -20px rgba(29, 59, 42, .3);
	opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dd-x, 0px)), -6px);
	transition: opacity .15s ease .08s, transform .15s ease .08s, visibility 0s linear .23s;
}
.nw-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nw-dd:hover .nw-dd-panel, .nw-dd.ist-offen .nw-dd-panel { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dd-x, 0px)), 0); transition-delay: .04s, .04s, 0s; }
.nw-hauptnav:has(.nw-dd:hover) .nw-dd.ist-offen:not(:hover) .nw-dd-panel { opacity: 0; visibility: hidden; }
/* beim Wechsel zum nächsten Menüpunkt verschwindet das vorige Menü sofort, statt das neue kurz zu überlappen */
.nw-hauptnav:has(.nw-dd:hover) .nw-dd:not(:hover) .nw-dd-panel { transition-duration: 0s; transition-delay: 0s; }
.nw-dd-panel--rechts { left: auto; right: -12px; transform: translate(0, -6px); }
.nw-dd:hover .nw-dd-panel--rechts, .nw-dd.ist-offen .nw-dd-panel--rechts { transform: translate(0, 0); }
.nw-dd-spalten { display: grid; grid-template-columns: repeat(var(--spalten, 1), max-content); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1200px) { .nw-dd-spalten { gap: 0 14px; } }
.nw-dd-spalten ul { margin: 0; padding: 0; list-style: none; }
.nw-dd-kopf { margin: 0 0 4px; padding: 0 10px; color: var(--grau); font-size: 14px; font-weight: 500; }
.nw-dd-punkt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 14px; color: var(--text) !important; text-decoration: none; line-height: 1.3; }
.nw-dd-punkt:hover, .nw-dd-punkt:focus-visible { background: var(--gruenweiss); outline: none; }
.nw-dd-punkt:focus-visible { box-shadow: inset 0 0 0 2px var(--gruen); }
.nw-dd-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gruenweiss); font-weight: 600; font-size: 15px; }
.nw-dd-punkt:hover .nw-dd-ic, .nw-dd-punkt:focus-visible .nw-dd-ic { background-color: #fff; }
.nw-dd-text { display: flex; flex-direction: column; min-width: 0; }
.nw-dd-titel { font-weight: 500; }
.nw-dd-titel--fett { font-weight: 600; }
.nw-dd-titel .nw-ic { margin-left: 6px; vertical-align: -2px; opacity: .85; }
.nw-dd-sub { color: var(--grau); font-size: 14px; }
.nw-dd-alle { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 12px 10px 0; border-top: 2px solid var(--linie); color: var(--gruen) !important; font-weight: 600; text-decoration: none; }
.nw-dd-alle:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .nw-dd-panel { transition: none; transform: translate(calc(-50% + var(--dd-x, 0px)), 0); } .nw-dd-panel--rechts { transform: none; } .nw-dd-knopf svg { transition: none; } }

/* Suche im Kopf: die Lupe öffnet das Feld an der Stelle des Menüs */
.nw-ks { display: none; position: relative; }
.nw-ks.ist-offen, .nw-ks--menue { display: block; }
.nw-head--suche .nw-hauptnav, .nw-head--suche .nw-kopf-knoepfe { display: none !important; }
.nw-kopf > .nw-ks.ist-offen { flex: 1 1 auto; max-width: 760px; margin-left: auto; }
.nw-ks-feld { display: flex; align-items: center; gap: 10px; margin: 0; }
.nw-ks-lupe { position: absolute; margin-left: 16px; display: flex; pointer-events: none; }
.nw-ks-feld input {
	box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px 0 46px;
	border: 2px solid var(--gruen-hell); border-radius: 999px; background: var(--gruenweiss); color: var(--text);
	font: inherit; font-size: 17px; outline: none; -webkit-appearance: none; appearance: none;
}
.nw-ks-feld input::placeholder { color: var(--grau); opacity: .85; }
.nw-ks-feld input:focus { border-color: var(--gruen); background: #fff; }
/* der grüne Rahmen zeigt den Fokus; der allgemeine Fokusring stünde rechts neben dem Feld */
.nw .nw-ks-feld input:focus-visible { outline: none; }
.nw-ks-feld input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nw-ks--menue .nw-ks-feld input { height: 56px; border-radius: 14px; background: #fff; }
.nw-ks-zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--gruen-hell); border-radius: 999px; background: #fff; cursor: pointer; }
.nw-ks-panel { box-sizing: border-box; background: #fff; }
.nw-ks-panel.ist-zu { display: none; }
.nw-kopf > .nw-ks .nw-ks-panel {
	position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 30; padding: 8px 8px 0;
	border: 2px solid var(--gruen-hell); border-radius: 24px; box-shadow: 0 18px 40px -20px rgba(29, 59, 42, .3);
}
.nw-ks--menue .nw-ks-panel { margin-top: 12px; padding: 4px 6px 0; border: 2px solid var(--gruen-hell); border-radius: 18px; }
.nw-ks-liste { margin: 0; padding: 0; list-style: none; }
.nw-ks-liste li + li { border-top: 2px solid var(--linie); }
.nw-ks-zeile { box-sizing: border-box; display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 220px) 18px; align-items: center; gap: 16px; min-height: 56px; padding: 8px 12px; border-radius: 14px; color: var(--text) !important; text-decoration: none; }
.nw-ks-zeile:hover, .nw-ks-zeile:focus-visible { background: var(--gruenweiss); outline: none; }
.nw-ks-zeile:focus-visible { box-shadow: inset 0 0 0 2px var(--gruen); }
.nw-ks-pille { justify-self: start; min-width: 56px; padding: 2px 10px; border: 2px solid; border-radius: 999px; font-size: 13px; font-weight: 600; text-align: center; }
.nw-ks-titel { font-weight: 600; line-height: 1.3; }
.nw-ks-ort { color: var(--grau); font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-ks-leer { margin: 0; padding: 14px 12px 10px; font-weight: 600; }
.nw-ks-alle { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-top: 4px; padding: 0 12px; border-top: 2px solid var(--linie); color: var(--gruen) !important; font-weight: 600; text-decoration: none; }
.nw-ks-alle:hover span { text-decoration: underline; text-underline-offset: 4px; }
.nw-art-seite { background: #fff; border-color: var(--gruen); color: var(--text); }
.nw-art-beitrag { background: var(--gelb-tint); border-color: var(--gelb); color: var(--text); }
@keyframes nw-ks-auf { from { clip-path: inset(0 0 0 calc(100% - 44px) round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
@keyframes nw-ks-ein { from { clip-path: inset(0 0 0 0 round 22px); } to { clip-path: inset(0 0 0 calc(100% - 44px) round 22px); } }
@keyframes nw-ks-panel-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes nw-ks-menue { from { opacity: 0; } to { opacity: 1; } }
.nw-kopf > .nw-ks.ist-offen .nw-ks-feld { animation: nw-ks-auf .45s cubic-bezier(.32, .72, 0, 1) both; }
.nw-kopf > .nw-ks.ist-schliessend .nw-ks-feld { animation: nw-ks-ein .32s cubic-bezier(.4, 0, .2, 1) both; }
.nw-ks.ist-offen .nw-ks-panel { animation: nw-ks-panel-auf .3s cubic-bezier(.32, .72, 0, 1) both; }
.nw-head--zurueck .nw-hauptnav, .nw-head--zurueck .nw-kopf-knoepfe { animation: nw-ks-menue .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .nw-ks .nw-ks-feld, .nw-ks .nw-ks-panel, .nw-head--zurueck .nw-hauptnav, .nw-head--zurueck .nw-kopf-knoepfe { animation: none !important; } }

/* Handy-Menü über der Seite */
.nw-mm { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--gruenweiss); }
.nw-mm[hidden] { display: none; }
/* Kopf des Menüs genau wie die Kopfleiste (Logo, Schrift, Höhe), damit beim Öffnen nichts springt */
.nw-mm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding-top: 12px; padding-bottom: 12px; background: #fff; }
.nw-mm-inhalt { padding-top: 12px; padding-bottom: 40px; }
.nw-mm-liste { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gruen-hell); }
.nw-mm-zeile { border-bottom: 1px solid var(--gruen-hell); }
.nw-menuepunkt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 4px; border: 0; background: none; color: var(--text) !important; font: inherit; font-weight: 600; font-size: 20px; text-align: left; text-decoration: none; cursor: pointer; }
.nw-gruppe-inhalt { display: none; padding: 4px 0 14px; }
.nw-gruppe-inhalt ul { margin: 0; padding: 0; list-style: none; }
.nw-gruppe.ist-offen .nw-gruppe-inhalt { display: block; }
.nw-chev { display: flex; transition: transform .2s ease; }
.nw-gruppe.ist-offen .nw-chev { transform: rotate(180deg); }
.nw-m-kopf { margin: 10px 0 2px; padding: 0 8px; color: var(--grau); font-size: 14px; font-weight: 500; }
.nw-unterpunkt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 8px; border-radius: 12px; color: var(--text) !important; text-decoration: none; line-height: 1.3; }
.nw-unterpunkt:hover, .nw-unterpunkt:focus-visible { background: #fff; outline: none; }
.nw-m-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; font-weight: 600; font-size: 15px; }
.nw-mm-sub { color: var(--grau); font-size: 14px; }
.nw-m-alle { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 8px; padding: 0 8px; border-top: 2px solid var(--gruen-hell); color: var(--gruen) !important; font-weight: 600; text-decoration: none; }
.nw-ausgeblendet { display: none; }
body.nw-mm-offen { overflow: hidden; }

/* Unterhalb von 1100 px: Handy-Kopf mit Lupe und Menüknopf */
@media (max-width: 1100px) {
	.nw-hauptnav { display: none; }
	.nw-kopf-knoepfe { margin-left: auto; }
	.nw-mm-knopf { display: grid; }
	/* das Suchfeld ist hier schmal: der Ort steht unter dem Titel statt in einer eigenen Spalte (sonst bleiben für den
	   Titel nur wenige Pixel und er schiebt sich über den Ort) */
	.nw-ks-zeile { grid-template-columns: 88px minmax(0, 1fr) 18px; grid-template-areas: "pille titel pfeil" "pille ort pfeil"; gap: 2px 16px; }
	.nw-ks-pille { grid-area: pille; }
	.nw-ks-zeile > span:nth-child(2) { grid-area: titel; }
	.nw-ks-ort { grid-area: ort; white-space: normal; }
	.nw-ks-zeile > .nw-ic { grid-area: pfeil; }
}
@media (max-width: 760px) {
	.nw-kopf { padding-top: 10px; padding-bottom: 10px; min-height: 64px; gap: 12px; }
	.nw-mm-kopf { padding-top: 10px; padding-bottom: 10px; min-height: 64px; }
	.nw-logo-mark { width: 36px; height: 36px; border-radius: 11px; }
	.nw-logo-mark svg { width: 20px; height: 20px; }
	.nw-logo-text { font-size: 16px; }
	.nw-head--suche .nw-logo { display: none; }
	.nw-kopf > .nw-ks.ist-offen { max-width: none; margin-left: 0; }
	.nw-kopf > .nw-ks .nw-ks-panel { position: fixed; top: 64px; left: 0; right: 0; border-width: 1px 0 0; border-radius: 0; padding: 4px 8px 0; box-shadow: 0 18px 30px -18px rgba(29, 59, 42, .35); }
	.nw-ks-zeile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pille titel" "pille ort"; gap: 2px 14px; padding: 8px; }
	.nw-ks-zeile .nw-ic { display: none; }
	.nw-ks-zeile > span:nth-child(2) { display: flex; flex-direction: column; }
}

/* ------------------------------------------------------------- Kopfbereich */
/* --kopf: Farbe aus „Farben der Seite“ bzw. der einzelnen Seite (inc/farben.php), sonst die des Bereichs */
.nw-hero { background: var(--kopf, var(--gruen-hell)); color: var(--text); }
.nw-hero > .nw-wrap { padding-top: 32px; padding-bottom: 48px; }
.nw-krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 15px; }
.nw-krumen a { color: var(--text); }
.nw-krumen [aria-current] { font-weight: 500; }
.nw-krume-trenner { display: flex; }
.nw-hero-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.nw-hero-text { flex: 999 1 520px; min-width: 0; }
.nw-hero-aside { flex: 1 1 320px; min-width: 0; max-width: 400px; }
/* Karten im Kopf stehen senkrecht mittig neben dem Text (die Jahreszeiten-Noten bleiben unten) */
.nw-hero-aside:not(:has(> .nw-jz)) { align-self: center; }
.nw-hero-titel { margin: 0 0 14px; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 60px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.nw-hero-lead { margin: 0 0 10px; max-width: 36rem; font-size: 21px; line-height: 1.4; }
.nw-hero-sub { margin: 0; max-width: 36rem; color: var(--grau); }
@media (max-width: 760px) {
	.nw-hero > .nw-wrap { padding-top: 20px; padding-bottom: 32px; }
	.nw-krumen ol { margin-bottom: 18px; }
	/* größere Tippfläche für die Brotkrumen; der Innenabstand am Inline-Link ändert die Zeilenhöhe nicht */
	.nw-krumen a { padding: 11px 0; }
	.nw-hero-titel { margin-bottom: 12px; font-size: 38px; line-height: 1.06; letter-spacing: -.01em; }
	.nw-hero-lead { font-size: 19px; }
	.nw-hero-aside { max-width: none; flex-basis: 100%; }
}

/* --------------------------------------------------------------- Abschnitte */
.nw-abschnitt { padding-top: 72px; }
.nw-abschnitt--erster { padding-top: 64px; }
.nw-h2 { margin: 0 0 24px; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 40px; line-height: 1.15; letter-spacing: -.01em; }
.nw-lead { margin: -4px 0 28px; max-width: 46rem; color: var(--grau); }
@media (max-width: 760px) {
	.nw-abschnitt { padding-top: 48px; }
	.nw-abschnitt--erster { padding-top: 40px; }
	.nw-h2 { margin-bottom: 16px; font-size: 26px; }
	.nw-lead { margin-bottom: 20px; }
}

/* Kacheln */
.nw-kacheln { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 16px; }
.nw-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; color: var(--text) !important; text-decoration: none; }
.nw-card { transition: transform .1s ease-out, border-color .15s; }
.nw-card:hover { border-color: var(--gruen); }
.nw-card:active { transform: scale(.98); }
.nw-kachel-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--gruen-hell); display: grid; place-items: center; font-weight: 600; font-size: 22px; }
/* Kopfbereich in der Farbe des Bereichs: Unterricht Grün, Lieder Gelb, Instrumente Koralle (gilt auch für die Unterseiten) */
.nw-bereich-unterricht .nw-hero { background: var(--kopf, var(--gruen-hell)); }
.nw-bereich-lieder .nw-hero { background: var(--kopf, var(--gelb-tint)); }
.nw-bereich-instrumente .nw-hero { background: var(--kopf, var(--koralle-tint)); }
/* Vor Ort: wärmerer Kopfbereich und Kachel-Icons im Wechsel Gelb, Grün, Koralle (wie „Woran ich arbeite“ auf „Über mich“) */
.nw-bereich-vor-ort .nw-hero { background: var(--kopf, var(--gelb-tint)); }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+1) .nw-kachel-ic { background: var(--gelb); }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+2) .nw-kachel-ic { background: var(--gruen); }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n) .nw-kachel-ic { background: var(--koralle); }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+1) .nw-kachel-ic svg, .nw-bereich-vor-ort .nw-kachel:nth-child(3n) .nw-kachel-ic svg { stroke: var(--text) !important; }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+2) .nw-kachel-ic svg { stroke: #fff !important; }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+2) .nw-kachel-ic { color: #fff; }
.nw-kachel-ic { color: var(--gruen); }
.nw-bereich-vor-ort .nw-kachel:nth-child(3n+1) .nw-kachel-ic, .nw-bereich-vor-ort .nw-kachel:nth-child(3n) .nw-kachel-ic { color: var(--text); }
.nw-bereich-vor-ort .nw-ml-nr { background: var(--gelb-tint); color: var(--text); }
.nw-bereich-vor-ort .nw-anmerkung-ic { background: var(--gelb-tint); }
.nw-bereich-vor-ort .nw-zitat-gross { border-color: var(--gelb); }
.nw-kachel-titel { font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--gruen); }
.nw-kachel-text { color: var(--grau); }
.nw-kachel-umfang { margin-top: auto; font-weight: 500; }
@media (max-width: 960px) { .nw-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.nw-kacheln { grid-template-columns: 1fr; gap: 12px; }
	.nw-kachel { padding: 20px; border-radius: 24px; }
	.nw-kachel-titel { font-size: 20px; }
}

/* Rückmeldungs-Karte */
.nw-rueck > .nw-wrap { padding-top: 104px; padding-bottom: 88px; }
.nw-rueck-karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 30px 36px; background: var(--gelb-tint); border: 2px solid var(--gelb); border-radius: 28px; }
.nw-rueck-text { flex: 1 1 420px; min-width: 0; }
.nw-rueck-text p { margin: 0; }
.nw-rueck-titel { margin: 0 0 6px !important; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 24px; line-height: 1.25; }
/* Aufrufkarte aus einem Abschnitt (z. B. „Das Netzwerk unterstützen“): wie die Rückmeldungs-Karte, in Koralle */
.nw-rueck-karte--koralle { background: var(--koralle-tint); border-color: var(--koralle); }
.nw-rueck-karte .nw-knopfreihe { margin: 0; }
.nw-rueck-text p + p { margin-top: 6px; }
@media (max-width: 760px) {
	.nw-rueck > .nw-wrap { padding-top: 80px; padding-bottom: 64px; }
	.nw-rueck-karte { padding: 22px 20px; border-radius: 24px; }
	.nw-rueck-titel { font-size: 21px; }
}

/* -------------------------------------------------- Franks Inhalte (Editor) */
.nw-inhalt { max-width: 100%; }
.nw-inhalt > * { max-width: none; }
.nw-inhalt > .nw-tabelle, .nw-inhalt > figure, .nw-inhalt > .wp-block-table, .nw-inhalt > .wpcf7, .nw-inhalt > iframe, .nw-inhalt > .wp-block-embed { max-width: 100%; }
.nw-inhalt h1, .nw-inhalt h2 { margin: 48px 0 16px; color: var(--gruen); font-weight: 600; font-size: 32px; line-height: 1.2; }
.nw-inhalt h3, .nw-inhalt h4 { margin: 32px 0 12px; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 24px; line-height: 1.25; }
.nw-inhalt h5, .nw-inhalt h6 { margin: 24px 0 8px; font-size: 19px; font-weight: 600; }
.nw-inhalt > :first-child { margin-top: 0; }
.nw-inhalt p, .nw-inhalt ul, .nw-inhalt ol { margin: 0 0 16px; }
.nw-inhalt img { border-radius: 16px; }
.nw-inhalt iframe { border: 0; border-radius: 20px; max-width: 100%; }
.nw-inhalt hr { border: 0; border-top: 2px solid var(--gruen-hell); margin: 40px 0; }
.nw-inhalt blockquote { margin: 24px 0; padding: 18px 22px; background: #fff; border-radius: 20px; color: var(--gruen); font-weight: 500; }
.nw-inhalt .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.nw-inhalt .alignright { float: right; margin: 0 0 16px 24px; }
.nw-inhalt .alignleft { float: left; margin: 0 24px 16px 0; }
@media (max-width: 760px) {
	.nw-inhalt h1, .nw-inhalt h2 { margin-top: 36px; font-size: 24px; }
	.nw-inhalt h3, .nw-inhalt h4 { font-size: 20px; }
	/* lange Wörter in Zwischentiteln (z. B. „Verbraucherstreitbeilegung“) mit Trennstrich statt mitten im Wort umbrechen */
	.nw-inhalt h1, .nw-inhalt h2, .nw-inhalt h3, .nw-inhalt h4 { hyphens: auto; -webkit-hyphens: auto; }
	.nw-inhalt .alignright, .nw-inhalt .alignleft { float: none; margin: 0 0 16px; }
}

/* Tabellen als Materiallisten: weiße Karte, Zeilen mit feiner Linie, Franks Zellfarben weichen dem Design */
.nw-tabelle { margin: 24px 0 32px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; padding: 8px 32px; overflow-x: auto; }
.nw-tabelle table { width: 100% !important; height: auto !important; border-collapse: collapse; border: 0 !important; background: transparent !important; }
.nw-tabelle tbody, .nw-tabelle thead, .nw-tabelle tr { background: transparent !important; border: 0 !important; height: auto !important; }
.nw-tabelle tr + tr td, .nw-tabelle tr + tr th { border-top: 2px solid var(--linie); }
.nw-tabelle tr:first-child td, .nw-tabelle tr:first-child th { border-top: 0 !important; }
.nw-tabelle td, .nw-tabelle th { padding: 12px 12px 12px 0; vertical-align: middle; text-align: left; background: transparent !important; color: inherit !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
.nw-tabelle td:first-child { font-weight: 500; line-height: 1.35; }
.nw-tabelle td:not(:first-child) { white-space: nowrap; }
.nw-tabelle th { color: var(--grau) !important; font-size: 15px; font-weight: 500; }
.nw-tabelle td :not(.nw-pill):not(.nw-pill *) { background: transparent !important; color: inherit; }
.nw-tabelle p { margin: 0; }

/* Material-Knöpfe (Links in Tabellen) */
.nw-pill {
	display: inline-flex; align-items: center; gap: 7px; min-height: 42px; margin: 3px 6px 3px 0; padding: 0 14px;
	border-radius: 999px; border: 2px solid var(--gruen-hell); background: #fff !important;
	color: var(--text) !important; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; white-space: nowrap;
}
.nw-pill { transition: background-color .25s ease, border-color .25s ease, transform .15s ease-out; }
.nw-pill:active { transform: scale(.97); }
.nw-pill:hover { background: var(--gruenweiss) !important; border-color: #B9D9BD; }
.nw-pill--doc, .nw-pill--image { background: var(--gruen-hell) !important; border-color: var(--gruen-hell); }
.nw-pill--doc:hover, .nw-pill--image:hover { background: #C6E2C8 !important; border-color: #C6E2C8; }
.nw-pill--audio { background: var(--gelb-tint) !important; border-color: var(--gelb); }
.nw-pill--audio:hover { background: #FFEBB0 !important; border-color: #F2BC3F; }
.nw-pill--video { background: var(--koralle-tint) !important; border-color: var(--koralle); }
.nw-pill--video:hover { background: #FFD3C6 !important; border-color: #F2683F; }
.nw-pill--page { border-color: var(--gruen); }
.nw-pill--page:hover { background: var(--gruenweiss) !important; border-color: var(--gruen); }
.nw-pill .nw-ic { flex: none; }

@media (max-width: 760px) {
	.nw-tabelle { padding: 4px 18px; border-radius: 24px; overflow: visible; }
	.nw-tabelle table, .nw-tabelle tbody, .nw-tabelle tr, .nw-tabelle td, .nw-tabelle th { display: block; width: auto !important; }
	.nw-tabelle tr { padding: 12px 0; }
	.nw-tabelle tr + tr { border-top: 2px solid var(--linie); }
	.nw-tabelle tr + tr td, .nw-tabelle tr + tr th { border-top: 0; }
	.nw-tabelle td, .nw-tabelle th { padding: 2px 0; white-space: normal !important; }
	.nw-tabelle td:empty { display: none; }
	.nw-pill { min-height: 48px; max-width: 100%; padding-top: 6px; padding-bottom: 6px; white-space: normal; }
	.nw-inhalt { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ Footer */
.nw-fuss { flex: none; background: var(--fuss, var(--gruen)); color: #fff; }
.nw-fuss a { color: #fff !important; text-decoration: none; }
.nw-fuss a:hover { text-decoration: underline; }
.nw-fuss a:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.nw-fuss-oben { display: flex; flex-wrap: wrap; gap: 32px 48px; padding-top: 56px; padding-bottom: 32px; }
.nw-fuss-marke { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.nw-fuss-marke p { margin: 0; max-width: 22rem; }
.nw-fuss-logo { display: flex; align-items: center; gap: 10px; }
.nw-fuss-name { font-weight: 600; font-size: 19px; }
.nw-fuss-spalte { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.nw-fuss-kopf { font-weight: 600; font-size: 19px; color: var(--gruen-hell); }
.nw-fuss-spalte .nw-ic { margin-left: 6px; vertical-align: -2px; opacity: .85; }
.nw-fuss-unten { border-top: 1px solid rgba(255, 255, 255, .25); }
.nw-fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-top: 16px; padding-bottom: 16px; font-size: 15px; }
.nw-fuss-zeile p { margin: 0; }
@media (max-width: 760px) {
	.nw-fuss-oben { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-top: 40px; }
	.nw-fuss-marke { grid-column: 1 / -1; }
	.nw-fuss-spalte a { display: flex; align-items: center; min-height: 44px; }
	/* Link in der untersten Zeile: größere Tippfläche, die Zeile bleibt gleich hoch */
	.nw-fuss-zeile a { padding: 10px 0; margin: -10px 0; }
}

/* Listen (Archive, Suche ohne eigene Gestaltung) */
.nw-liste { margin: 0; padding: 8px 32px; list-style: none; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; }
.nw-liste li + li { border-top: 2px solid var(--linie); }
.nw-liste a { display: block; padding: 14px 0; font-weight: 500; text-decoration: none; }

/* ---------------------------------------------------------------- Startseite */
.nw-start-abschnitt { max-width: 1184px; margin: 0 auto; padding: 72px 16px 0; }
.nw-welle { position: relative; width: 100%; height: 274px; overflow-x: clip; overflow-y: visible; }
.nw-welle-linien { position: absolute; inset: 0; display: block; pointer-events: none; }
.nw-welle-linien path { fill: none; stroke: var(--gruen); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.nw-welle-note { position: absolute; left: 0; top: 0; will-change: transform; }
.nw-note { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nw-note-koerper { position: absolute; inset: 0; display: block; filter: drop-shadow(0 8px 8px rgba(29, 59, 42, .16)); }
.nw-note-koerper img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; border-radius: 0; }
.nw-note-froh { opacity: 0; transition: opacity .12s; }
.nw-note.ist-froh .nw-note-froh { opacity: 1; }
@media (max-width: 760px) {
	.nw-start-abschnitt { padding-top: 48px; }
	.nw-zitat { padding: 88px 16px !important; }
	.nw-zitat-satz { font-size: 29px !important; }
	.nw-start #frank > div { padding: 28px 20px !important; border-radius: 24px !important; }
}
/* Karte „Schön, dass Sie da sind“: rutscht der Text unter das Foto (Foto 200 + Abstand 48 + Text 480 = 728 px passen
   nicht mehr nebeneinander, etwa Tablet hochkant), stehen Name und Aufgabe neben dem Foto statt allein darunter;
   auf dem Handy bleibt beides untereinander */
.nw-start #frank > div { container-type: inline-size; }
@container (min-width: 440px) and (max-width: 727.98px) {
	.nw-frank-person { flex: 1 1 100% !important; flex-direction: row !important; gap: 28px !important; text-align: left !important; }
	.nw-frank-person img { flex: none; margin-bottom: 0 !important; }
}
/* Themenkacheln der Startseite (Raster mit minmax(300px, 1fr) im Inline-Stil): die Spalte nie breiter als der Platz,
   sonst ragen die Kacheln bei 320 px Breite 12 px über den Rand */
.nw-start-abschnitt > div[style*="minmax(300px"] { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
/* genau vier Karten (Klassen, Aktuelles): auf mittleren Breiten zwei je Reihe statt drei und eine allein */
@media (min-width: 761px) and (max-width: 1039px) {
	.nw-start-abschnitt > div[style*="minmax(240px"]:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Felix-Zitat: die Anführungszeichen stehen in der Zeile und hängen am ersten und letzten Wort,
   so bleiben sie bei jeder Breite am Text und wachsen mit der Schriftgröße mit */
.nw-zitat-wort { white-space: nowrap; }
.nw-zitat-zeichen { display: inline-block; width: 1.1em; height: .76em; fill: var(--gelb); }
.nw-zitat-auf { margin-right: .18em; vertical-align: .16em; }
.nw-zitat-zu { margin-left: .14em; vertical-align: -.3em; }

/* Übersichten: Klassenkarten und „Gerade aktuell“ */
.nw-grau { color: var(--grau); }
.nw-klassen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nw-klassenkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; color: var(--text) !important; text-decoration: none; }
.nw-klassen-marke { display: inline-block; padding: 6px 18px; border-radius: 14px; font-weight: 600; font-size: 24px; line-height: 1.3; }
.nw-klassen-zeile { display: flex; align-items: center; gap: 10px; }
.nw-klassen-text { font-size: 18px; line-height: 1.45; }
.nw-klassen-infos { display: flex; flex-direction: column; gap: 8px; }
.nw-klassen-zeile .nw-ic { flex: none; }
.nw-aktuell { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 2px solid #fff; border-radius: 24px; color: var(--text) !important; text-decoration: none; }
.nw-aktuell-kopf { display: flex; align-items: center; gap: 14px; }
.nw-aktuell-kopf > span:last-child { display: flex; flex-direction: column; }
.nw-aktuell-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--gelb-tint); display: grid; place-items: center; }
.nw-aktuell-titel { font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--gruen); }
.nw-aktuell-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--gruen); }
@media (max-width: 760px) {
	.nw-klassen { grid-template-columns: 1fr; gap: 12px; }
	.nw-klassenkarte { padding: 20px; border-radius: 24px; }
	.nw-klassen-marke { padding: 4px 14px; font-size: 21px; }
	.nw-klassen-text { font-size: 17px; }
}

/* Eingebettete Videos und Player als Kacheln (öffnen die fremde Seite erst beim Klick) */
.nw-einbettung {
	display: flex; align-items: center; gap: 14px; max-width: 30rem; margin: 8px 0 16px; padding: 12px 18px 12px 12px;
	background: var(--koralle-tint); border: 2px solid var(--koralle); border-radius: 20px; color: var(--text) !important; text-align: left; text-decoration: none;
	transition: transform .1s ease-out, background-color .15s;
}
[style*="center"] > .nw-einbettung, .aligncenter > .nw-einbettung { margin-left: auto; margin-right: auto; }
.nw-einbettung:hover { background: #ffd9cd; }
.nw-einbettung:active { transform: scale(.98); }
.nw-einbettung-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--koralle); display: grid; place-items: center; }
.nw-einbettung-text { display: flex; flex-direction: column; min-width: 0; }
.nw-einbettung-text strong { font-weight: 600; line-height: 1.3; }
.nw-einbettung-text span { color: var(--grau); font-size: 15px; }
.nw-tabelle .nw-einbettung { margin: 4px 0; }

/* ------------------------------------------------- Einzelseiten ohne Kopfbereich */
.nw-seiten-titel { margin: 0 0 14px; color: var(--gruen); font-weight: 600; font-size: 60px; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.nw-seiten-lead { margin: 0; max-width: 34rem; font-size: 21px; line-height: 1.45; }

/* Zwei Spalten: links Titel und Karte (bleibt stehen), rechts Text oder Formular */
.nw-zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; max-width: 1184px; margin: 0 auto; padding: 64px 16px 96px; }
.nw-zweispaltig--recht { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; }
.nw-zweispaltig-links { position: sticky; top: 104px; min-width: 0; }

/* Rechtstexte */
.nw-adresskarte { margin-top: 28px; padding: 24px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 24px; overflow-wrap: anywhere; }
.nw-adresskarte p { margin: 0 0 12px; }
.nw-adresskarte p:last-child { margin-bottom: 0; }
.nw-adresskarte strong { color: var(--gruen); font-weight: 600; font-size: 20px; }
.nw-adresskarte a { font-weight: 500; }
.nw-recht-text { max-width: 720px; }
.nw-recht-text h2 { margin: 44px 0 12px; font-size: 26px; scroll-margin-top: 96px; }
.nw-recht-text > h2:first-child { margin-top: 0; }
.nw-recht-text p, .nw-recht-text li { line-height: 1.6; }
.nw-recht-text a { overflow-wrap: anywhere; }

/* Kontakt */
.nw-tipp { display: flex; align-items: flex-start; gap: 12px; max-width: 26rem; margin: 28px 0 0; padding: 16px 18px; background: var(--gelb-tint); border: 2px solid var(--gelb); border-radius: 20px; font-size: 16px; line-height: 1.45; }
.nw-tipp .nw-ic { flex: none; margin-top: 1px; }
.nw-brief-karte { min-width: 0; padding: 36px 40px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; }
.nw-brief-an { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 2px dashed var(--gelb); }
.nw-brief-an img { flex: none; width: 56px; height: 56px; border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 4px var(--gelb); }
.nw-brief-name { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.nw-brief-name .nw-grau { font-size: 15px; }
.nw-brief-name strong { color: var(--gruen); font-weight: 600; font-size: 20px; line-height: 1.25; }
.nw-brief-an a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; overflow-wrap: anywhere; }

/* Formulare (Contact Form 7) im Stil der Seite */
.nw-formular > * { max-width: none; }
.nw-formular form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.nw-formular form p { margin: 0; }
.nw-formular form br { display: none; }
.nw-form-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nw-feldgruppe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nw-feldgruppe label { font-weight: 600; font-size: 16px; }
.nw-feldgruppe label span { font-weight: 400; color: var(--grau); }
.nw-formular .wpcf7-form-control-wrap { display: block; }
.nw-formular input[type="text"], .nw-formular input[type="email"], .nw-formular input[type="tel"], .nw-formular textarea {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--gruen-hell); border-radius: 14px;
	background: var(--gruenweiss); color: var(--text); font: inherit; transition: border-color .15s, background-color .15s;
}
.nw-formular textarea { min-height: 170px; resize: vertical; }
.nw-formular input:hover, .nw-formular textarea:hover { border-color: #B9D9BD; }
.nw-formular input:focus, .nw-formular textarea:focus { outline: none; border-color: var(--gruen); background: #fff; }
.nw-form-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.nw-form-hinweis { flex: 1 1 260px; color: var(--grau); font-size: 15px; line-height: 1.45; }
.nw-formular .wpcf7-submit {
	min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gruen); color: #fff;
	font: inherit; font-weight: 500; cursor: pointer; transition: transform .1s ease-out, background-color .15s;
}
.nw-formular .wpcf7-submit:hover { background: #276b44; }
.nw-formular .wpcf7-submit:active { transform: scale(.97); }
.nw-formular .wpcf7-spinner { margin: 0; }
.nw-formular .wpcf7-not-valid { border-color: var(--koralle) !important; }
.nw-formular .wpcf7-not-valid-tip { margin-top: 6px; color: #A33A1F; font-size: 15px; }
.nw-formular .wpcf7 form .wpcf7-response-output { margin: 0; padding: 14px 18px; border: 2px solid var(--gelb); border-radius: 16px; background: var(--gelb-tint); }
.nw-formular .wpcf7 form.sent .wpcf7-response-output { border-color: var(--gruen-hell); background: var(--gruen-hell); color: var(--gruen); font-weight: 500; }

/* Über mich */
.nw-ueber { max-width: 1184px; margin: 0 auto; padding: 48px 16px 0; }
.nw-ueber-karte { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; padding: 48px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 32px; }
.nw-ueber-person { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.nw-ueber-person img { width: 176px; height: 176px; margin-bottom: 18px; border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 6px var(--gelb); }
.nw-ueber-person strong { color: var(--gruen); font-weight: 600; font-size: 20px; }
.nw-ueber-person span { color: var(--grau); font-size: 15px; line-height: 1.35; }
.nw-ueber-text { flex: 999 1 480px; min-width: 0; }
.nw-ueber-text h1 { margin: 0 0 16px; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 44px; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.nw-ueber-text .nw-inhalt p { max-width: 42rem; }
.nw-ueber-text .nw-inhalt p:last-child { margin-bottom: 24px; }
.nw-lead { font-size: 20px; line-height: 1.45; }
.nw-ueber-text .nw-knopfreihe a:not(.nw-btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; overflow-wrap: anywhere; }
.nw-ueber-rest { max-width: 1184px; margin: 0 auto; padding: 72px 16px 96px; }
.nw-ueber-rest > h2 { margin: 0 0 24px; font-size: 40px; line-height: 1.15; letter-spacing: -.01em; }
.nw-ueber-rest .nw-drei, .nw-ueber-rest > .nw-inhalt { max-width: none; }
/* Personenkarte in einem Abschnitt „Über …“ (z. B. Stefan Briel): wie „Über mich“, etwas kleiner */
.nw-ueber-karte--klein { gap: 24px 44px; padding: 36px 40px; }
.nw-ueber-karte--klein .nw-ueber-person { flex-basis: 180px; }
.nw-ueber-karte--klein .nw-ueber-person img { width: 132px; height: 132px; margin-bottom: 14px; }
.nw-ueber-karte--klein .nw-ueber-person strong { font-size: 18px; }
.nw-ueber-karte--klein h2 { margin: 0 0 12px; color: var(--ueberschrift, var(--gruen)); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.nw-ueber-karte--klein .nw-lead { font-size: 18px; }
.nw-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.nw-drei > div { min-width: 0; }
.nw-drei h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px !important; font-size: 22px; line-height: 1.2; }
.nw-spalten-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.nw-drei ul { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.nw-drei li { color: var(--grau); font-size: 16px; line-height: 1.45; }
.nw-drei li > a, .nw-drei li > strong { font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none; }
.nw-drei li > a { color: var(--gruen); }
.nw-drei li > a:hover { text-decoration: underline; }

/* Suche */
.nw-suche { max-width: 1184px; margin: 0 auto; padding: 56px 16px 104px; }
.nw-suchkarte { margin-top: 32px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; transition: border-color .15s; }
.nw-suchkarte:focus-within { border-color: var(--gruen); }
/* der Rahmen der Karte zeigt den Fokus, das Feld selbst bekommt keinen zweiten */
.nw .nw-suchfeld input:focus-visible { outline: none; }
.nw-suchfeld { position: relative; margin: 0; }
.nw-suchfeld > span { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); display: flex; }
.nw-suchfeld input {
	box-sizing: border-box; width: 100%; min-height: 84px; padding: 0 28px 0 70px; border: 0; border-radius: 26px;
	background: transparent; color: var(--text); font: inherit; font-size: 24px; outline: none; -webkit-appearance: none; appearance: none;
}
.nw-such-zahl, .nw-such-hinweis { margin: 0; padding: 18px 28px; border-top: 2px solid var(--linie); color: var(--grau); }
.nw-such-liste { margin: 0; padding: 8px 16px 12px; border-top: 2px solid var(--linie); list-style: none; }
.nw-treffer-zeile {
	display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 340px) 22px; align-items: center; gap: 20px;
	min-height: 60px; padding: 8px 12px; border-radius: 12px; color: var(--text) !important; text-decoration: none;
}
.nw-treffer-zeile:hover, .nw-treffer-zeile:focus-visible { background: var(--gruenweiss); }
.nw-art { justify-self: start; padding: 3px 12px; border: 2px solid; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center; }
.nw-art-seite { background: #fff; border-color: var(--gruen); }
.nw-art-beitrag { background: var(--gelb-tint); border-color: var(--gelb); }
/* Arten der Inhalte in der Suche */
.nw-art-lied { background: var(--gelb-tint); border-color: var(--gelb); color: var(--text); }
.nw-art-stunde { background: var(--gruen-hell); border-color: var(--gruen); color: var(--text); }
.nw-art-tanz { background: var(--koralle-tint); border-color: var(--koralle); color: var(--text); }
.nw-art-video { background: #fff; border-color: var(--koralle); color: var(--text); }
.nw-treffer-titel { font-weight: 600; line-height: 1.3; }
.nw-treffer-ort { color: var(--grau); }
.nw-such-leer { padding: 32px 28px; border-top: 2px solid var(--linie); }
.nw-such-leer h2 { margin: 0 0 12px; color: var(--gruen); font-weight: 600; font-size: 28px; line-height: 1.2; }
.nw-such-leer ul { margin: 0 0 22px; padding-left: 20px; color: var(--grau); line-height: 1.6; }
.nw-such-leer .nw-knopfreihe { gap: 10px; margin-bottom: 22px; }
.nw-such-leer > p:last-child { margin: 0; color: var(--grau); }
.nw-suchkarte .navigation { padding: 16px 28px; border-top: 2px solid var(--linie); }
.nw-suchkarte .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-suchkarte .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 2px solid var(--gruen-hell); border-radius: 999px; font-weight: 500; text-decoration: none; }
.nw-suchkarte .page-numbers.current { background: var(--gruen); border-color: var(--gruen); color: #fff; }
/* mittlere Breiten: Titel und Ort teilen sich den Platz, sonst bleibt dem Titel neben dem breiten Ort kaum Raum */
@media (min-width: 761px) and (max-width: 1100px) {
	.nw-treffer-zeile { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 22px; }
}

/* Seite nicht gefunden */
.nw-fehler { display: flex; flex-direction: column; align-items: center; max-width: 1184px; margin: 0 auto; padding: 80px 16px 16px; text-align: center; }
.nw-fehler-etikett { display: inline-block; margin-bottom: 22px; padding: 8px 20px; border-radius: 16px; background: var(--gelb); font-weight: 600; font-size: 32px; line-height: 1.25; }
.nw-fehler .nw-seiten-titel { max-width: 14em; font-size: 64px; }
.nw-fehler .nw-seiten-lead { margin-bottom: 24px; text-wrap: balance; }
.nw-fehler .nw-knopfreihe { justify-content: center; }
.nw-fehler-paar { position: relative; display: block; width: 264px; height: 244px; margin-top: 44px; }
.nw-fehler-paar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.nw-fehler-froh { opacity: 0; transition: opacity .12s; }
/* Seufzer beim Darüberfahren: 3D-Film (blender/noten.py --seufzer --ohne-hauch, 48 Bilder in 2.4 s), einmal je Darüberfahren */
.nw-fehler-film { position: absolute; left: -0.000%; top: -3.436%; width: 100.076%; height: 103.476%; background: no-repeat 0 0 / 600% 800%; opacity: 0; pointer-events: none; }
.nw-fehler-paar:hover .nw-fehler-film { opacity: 1; animation: nw-seufzer-x 0.3000s steps(6) 8, nw-seufzer-y 2.4s steps(8) 1; }
.nw-fehler-paar:hover .nw-fehler-ruhe { opacity: 0; }
@keyframes nw-seufzer-x { from { background-position-x: 0%; } to { background-position-x: 120.0000%; } }
@keyframes nw-seufzer-y { from { background-position-y: 0%; } to { background-position-y: 114.2857%; } }
/* bei reduzierter Bewegung lächelt das Paar statt zu seufzen */
@media (prefers-reduced-motion: reduce) { .nw-fehler-paar:hover .nw-fehler-film { opacity: 0; animation: none; } .nw-fehler-paar:hover .nw-fehler-ruhe { opacity: 1; } .nw-fehler-paar:hover .nw-fehler-froh { opacity: 1; } }
.nw-abstand { height: 88px; }

@media (max-width: 900px) {
	.nw-zweispaltig, .nw-zweispaltig--recht { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 16px 72px; }
	.nw-zweispaltig-links { position: static; }
	.nw-drei { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 760px) {
	.nw-seiten-titel, .nw-fehler .nw-seiten-titel { margin-bottom: 12px; font-size: 38px; line-height: 1.08; letter-spacing: -.01em; }
	.nw-seiten-lead { font-size: 18px; }
	.nw-brief-karte { padding: 24px 20px; border-radius: 24px; }
	/* größere Tippfläche für die E-Mail-Adresse, die Zeile bleibt gleich hoch */
	.nw-brief-an a { padding: 9px 0; margin: -9px 0; }
	.nw-form-reihe { grid-template-columns: minmax(0, 1fr); }
	.nw-ueber { padding-top: 32px; }
	.nw-ueber-karte { padding: 28px 20px; border-radius: 24px; gap: 24px; }
	.nw-ueber-person { flex-basis: 100%; }
	.nw-ueber-text h1 { font-size: 30px; }
	.nw-ueber-karte--klein { padding: 24px 20px; }
	.nw-ueber-karte--klein .nw-ueber-person { flex-basis: 100%; }
	.nw-ueber-karte--klein h2 { font-size: 24px; }
	.nw-lead { font-size: 18px; }
	.nw-ueber-rest { padding: 56px 16px 72px; }
	.nw-ueber-rest > h2 { font-size: 26px; }
	.nw-suche { padding: 40px 16px 72px; }
	.nw-suchkarte { margin-top: 24px; border-radius: 24px; }
	.nw-suchfeld > span { left: 18px; }
	.nw-suchfeld input { min-height: 64px; padding: 0 18px 0 56px; font-size: 19px; }
	.nw-such-zahl, .nw-such-hinweis { padding: 14px 20px; }
	.nw-such-liste { padding: 6px 8px 10px; }
	.nw-treffer-zeile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art titel" "art ort"; gap: 0 14px; padding: 8px; }
	.nw-art { grid-area: art; min-width: 64px; padding: 3px 10px; font-size: 13px; }
	.nw-treffer-titel { grid-area: titel; }
	.nw-treffer-ort { grid-area: ort; font-size: 15px; }
	.nw-treffer-zeile > .nw-ic { display: none; }
	.nw-such-leer { padding: 22px 20px; }
	.nw-such-leer h2 { font-size: 22px; }
	.nw-fehler { padding-top: 48px; }
	.nw-fehler-etikett { font-size: 24px; }
	.nw-fehler-paar { width: 200px; height: 185px; margin-top: 32px; }
	.nw-abstand { height: 64px; }
}

/* ------------------------------------------------------- Klassenseiten (inc/klassen.php) */
.nw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw-kopfkarte { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 2px solid #fff; border-radius: 24px; color: var(--text) !important; text-decoration: none; }
.nw-kopfkarte-kopf { display: flex; align-items: center; gap: 14px; }
.nw-kopfkarte-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--gruen-hell); display: grid; place-items: center; }
.nw-kopfkarte-titel { color: var(--gruen); font-weight: 600; font-size: 20px; line-height: 1.25; }
.nw-kopfkarte .nw-grau { font-size: 16px; }
.nw-kopfkarte-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gruen); font-weight: 500; }

/* Auswahl: Halbjahr und Kacheln */
.nw-auswahl { max-width: 1184px; margin: 0 auto; padding: 56px 16px 0; }
.nw-auswahl-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.nw-auswahl-kopf .nw-h2 { margin: 0; line-height: 1.1; }
.nw-halbjahr { display: flex; gap: 4px; padding: 4px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 999px; }
.nw-tab { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--gruen); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.nw-tab[aria-pressed="true"] { background: var(--gruen); color: #fff; }
.nw-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.nw-tile {
	display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; text-align: left;
	background: #fff; border: 2px solid var(--gruen-hell); border-radius: 16px; color: var(--text);
	font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.nw-tile[hidden] { display: none; }
.nw-tile-nr { flex: none; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.nw-tile-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-tile[aria-current="false"]:hover { background: var(--gelb-tint); }
.nw-tile[aria-current="true"] { background: var(--gruen); color: #fff; }
.nw-tile[aria-current="true"] .nw-tile-nr { background: var(--gelb); color: var(--text); }

/* Pfeile und Slider */
.nw-einheiten-leiste { display: flex; justify-content: flex-end; gap: 8px; max-width: 1184px; margin: 0 auto; padding: 32px 16px 16px; }
.nw-pfeil { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gruen-hell); background: #fff; cursor: pointer; transition: transform .15s ease-out, border-color .25s ease, background-color .25s ease, opacity .3s ease; }
.nw-pfeil:not(:disabled):hover { border-color: var(--gruen); }
.nw-pfeil--vor:not(:disabled):hover { background: #276b44; }
.nw-pfeil--vor { border: 0; background: var(--gruen); }
.nw-pfeil:active { transform: scale(.97); }
.nw-pfeil:disabled { opacity: .35; cursor: default; }
.nw-slider {
	--rand: max(16px, calc((100% - 1152px) / 2));
	position: relative; display: flex; align-items: flex-start; gap: 48px; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; padding: 4px var(--rand) 8px; scroll-padding-inline: var(--rand);
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent);
}
.nw-slider::-webkit-scrollbar { display: none; }
.nw-slider.hoehe-gleitet { transition: height .6s cubic-bezier(.4, 0, .2, 1); }
.nw-slider.gleitet { scroll-snap-type: none; }
.nw-js .nw-slider { transition: opacity .3s ease; }
.nw-js .nw-slider.hoehe-gleitet { transition: height .6s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.nw-slider.blendet { opacity: 0; transition: opacity .2s ease !important; scroll-snap-type: none; }
.nw-einheit {
	flex: 0 0 min(1152px, calc(100vw - 96px)); box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column;
	padding: 26px 32px 10px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px;
}
.nw-einheit h3 { margin: 0; color: var(--gruen); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.nw-einheit-liste { list-style: none; margin: 4px 0 8px; padding: 0; }
.nw-einheit-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; }
.nw-einheit-liste li + li { border-top: 2px solid var(--linie); }
.nw-einheit-name { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 500; line-height: 1.35; }
.nw-einheit-nr { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.nw-einheit-material { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-einheit-material .nw-pill { margin: 0; }
.nw-hinweise { flex: none; margin: 6px 0 20px; background: var(--gruenweiss); border-radius: 18px; }
.nw-hinweise-knopf {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 8px 10px 8px 20px;
	border: 0; border-radius: 18px; background: none; color: var(--gruen); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.nw-chev { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--gruen-hell); transition: transform .45s cubic-bezier(.4, 0, .2, 1), border-color .25s ease; }
.nw-hinweise-knopf:hover .nw-chev { border-color: var(--gruen); }
.nw-hinweise-knopf[aria-expanded="true"] .nw-chev { transform: rotate(180deg); }
.nw-hinweise-text {
	display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; font-size: 15px; line-height: 1.55;
	transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s linear .5s;
}
.nw-hinweise-knopf[aria-expanded="true"] + .nw-hinweise-text {
	grid-template-rows: 1fr; opacity: 1; visibility: visible;
	transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), opacity .4s ease .1s, visibility 0s;
}
.nw-hinweise-innen { min-height: 0; overflow: hidden; }
.nw-hinweise-polster { padding: 0 20px 14px; }
.nw-hinweise-text p { margin: 0 0 12px; }
.nw-hinweise-text img { max-width: 100%; height: auto; border-radius: 12px; }
.nw-einheit-fussnote, .nw-einheit-fussnote p { font-size: 15px; color: var(--grau); }
/* Nur die gewählte Einheit ist voll sichtbar, die Nachbarn schauen blass herein (mit Skript) */
.nw-js .nw-einheit { align-self: stretch; opacity: .4; cursor: pointer; transition: opacity .5s ease; }
.nw-js .nw-einheit:not(.ist-aktiv):hover { opacity: .55; }
.nw-js .nw-einheit > * { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.nw-js .nw-einheit.ist-aktiv { align-self: flex-start; opacity: 1; cursor: auto; }
.nw-js .nw-einheit.ist-aktiv > * { opacity: 1; visibility: visible; transition: opacity .5s ease .15s, visibility 0s; }
/* Halbjahr: Raster blendet beim Wechsel kurz aus */
.nw-tiles { transition: opacity .2s ease, transform .2s ease; }
.nw-tiles.blendet { opacity: 0; transform: translateY(4px); }
/* Startzustand und reduzierte Bewegung: ohne Animation */
.nw-still *, .nw-still *::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
	.nw-einheiten *, .nw-slider { transition: none !important; }
}

/* Weitere Klassen */
.nw-klassen-weitere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-klasse-klein { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 24px; color: var(--text) !important; text-decoration: none; }
.nw-klasse-klein .nw-klassen-marke { padding: 6px 16px; border-radius: 12px; font-size: 22px; }
.nw-klasse-klein-umfang { font-size: 16px; }
.nw-klasse-klein .nw-grau { font-size: 15px; }

@media (max-width: 900px) {
	.nw-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
	.nw-tile { justify-content: center; min-height: 48px; padding: 0; border-radius: 14px; color: var(--gruen); font-size: 17px; font-weight: 600; }
	.nw-tile-nr { min-width: 0; height: auto; padding: 0; background: none; color: inherit; font-size: inherit; }
	.nw-tile[aria-current="true"] .nw-tile-nr { background: none; color: #fff; }
	.nw-tile-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.nw-klassen-weitere { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
	.nw-auswahl { padding-top: 32px; }
	.nw-auswahl-kopf { display: block; margin-bottom: 14px; }
	.nw-auswahl-kopf .nw-h2 { margin-bottom: 14px; }
	.nw-halbjahr { display: grid; grid-template-columns: 1fr 1fr; }
	.nw-einheiten-leiste { padding: 20px 16px 12px; }
	.nw-slider { --rand: 16px; gap: 20px; }
	.nw-einheit { flex-basis: 100%; padding: 18px 18px 6px; border-radius: 24px; }
	.nw-einheit h3 { font-size: 22px; }
	.nw-einheit-liste li { flex-direction: column; align-items: stretch; gap: 10px; }
	.nw-einheit-name { flex: none; align-items: flex-start; gap: 10px; }
	.nw-einheit-name > span:last-child { padding-top: 2px; }
	.nw-hinweise { margin-bottom: 14px; }
	.nw-hinweise-knopf { min-height: 52px; padding-left: 16px; }
	.nw-hinweise-polster { padding: 0 16px 14px; }
	.nw-klasse-klein { gap: 8px; padding: 16px; border-radius: 20px; }
	.nw-klasse-klein .nw-klassen-marke { padding: 4px 12px; font-size: 19px; }
	.nw-klasse-klein-umfang { font-size: 15px; }
	.nw-klasse-klein .nw-grau { font-size: 14px; }
}

/* Materiallisten (Franks Tabellen als Liste: Titel, Beschreibung, Knöpfe) */
.nw-materialliste { margin: 24px 0 32px; padding: 8px 32px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; }
.nw-inhalt > .nw-materialliste { max-width: 100%; }
.nw-materialliste ol { list-style: none; margin: 0 !important; padding: 0; }
.nw-materialliste li { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 78px; margin: 0; padding: 10px 0; }
.nw-materialliste li + li { border-top: 2px solid var(--linie); }
.nw-ml-name { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 500; line-height: 1.35; }
.nw-ml-nr { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.nw-ml-text { display: block; margin-top: 2px; color: var(--grau); font-size: 15px; font-weight: 400; }
.nw-ml-knoepfe { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 60%; }
.nw-ml-knoepfe .nw-pill { margin: 0; }
@media (max-width: 760px) {
	.nw-materialliste { padding: 4px 18px; border-radius: 24px; }
	.nw-materialliste li { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0; }
	.nw-ml-name { align-items: flex-start; }
	.nw-ml-knoepfe { justify-content: flex-start; max-width: none; }
}

/* Abschnitte aus Franks Inhalt (inc/abschnitte.php) */
.nw-abschnitt-intro { margin: -4px 0 28px; color: var(--grau); }
.nw-abschnitt .nw-inhalt + .nw-kacheln, .nw-abschnitt .nw-inhalt + .nw-videos, .nw-abschnitt .nw-inhalt + .nw-materialliste,
.nw-abschnitt .nw-kacheln + .nw-inhalt, .nw-abschnitt .nw-videos + .nw-inhalt, .nw-abschnitt .nw-materialliste + .nw-inhalt { margin-top: 24px; }
/* Anmerkung unter einer Liste oder Tabelle (Mitwirkende, Quellen, Hinweise) */
.nw-anmerkung { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px 20px; background: #fff; border: 2px solid var(--linie); border-radius: 20px; color: var(--grau); font-size: 15px; line-height: 1.5; }
.nw-anmerkung-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gruenweiss); }
.nw-anmerkung .nw-inhalt { flex: 1 1 auto; min-width: 0; }
.nw-anmerkung .nw-inhalt > * { max-width: none; }
.nw-anmerkung .nw-inhalt p { margin: 0; }
/* folgt nach der Anmerkung noch Text mit Zwischentitel, bekommt er Luft */
.nw-anmerkung + .nw-inhalt { margin-top: 40px; }
.nw-anmerkung + .nw-inhalt > :first-child { margin-top: 0; }
.nw-anmerkung .nw-inhalt p + p { margin-top: 6px; }
@media (max-width: 760px) { .nw-anmerkung { gap: 12px; padding: 14px 16px; border-radius: 18px; } }
.nw-abschnitt > .nw-wrap > .nw-materialliste:first-child { margin-top: 0; }
.nw-kachel-knoepfe { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-kachel-knoepfe .nw-pill { margin: 0; }
div.nw-kachel { cursor: default; }
.nw-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-video { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 24px; color: var(--text) !important; text-decoration: none; }
.nw-video-flaeche { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.nw-video-play { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(46, 125, 79, .15); transition: transform .15s ease-out; }
.nw-video:hover .nw-video-play { transform: scale(1.06); }
.nw-video-text { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 20px; }
.nw-video-titel { color: var(--gruen); font-weight: 600; font-size: 19px; line-height: 1.3; }
.nw-video-hin { display: flex; align-items: center; gap: 6px; color: var(--grau); font-size: 15px; }
.nw-zitat-gross { margin: 0; padding: 32px 40px; text-align: left; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; }
.nw-zitat-gross blockquote { margin: 0; }
.nw-zitat-gross p { margin: 0; max-width: 22em; color: var(--gruen); font-weight: 600; font-size: 40px; line-height: 1.15; text-wrap: balance; }
.nw-zitat-gross strong, .nw-zitat-gross b { color: #E8603E; font-weight: inherit; }
.nw-zitat-gross figcaption { margin-top: 14px; color: var(--grau); font-size: 18px; }
.nw-zitat-lang { padding: 28px 32px; text-align: left; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 28px; }
.nw-zitat-lang p { max-width: none; margin: 0; color: var(--text); font-weight: 500; font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.nw-zitat-lang figcaption { margin-top: 12px; font-size: 15px; }
.nw-abschnitt .nw-knopfreihe--abschnitt { margin-top: 20px; }
.nw-knopfreihe-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
/* Seiten ohne Rückmeldungs-Karte: Luft zwischen dem letzten Abschnitt und dem Footer */
main > .nw-abschnitt:last-child { padding-bottom: 96px; }
.nw-kopfkarte--zitat { display: block; margin: 0; padding: 22px; background: #fff; border-radius: 24px; text-align: left; }
.nw-kopfkarte--zitat blockquote { margin: 0; }
.nw-kopfkarte--zitat p { margin: 0; max-width: none; color: var(--gruen); font-weight: 600; font-size: 20px; line-height: 1.3; text-wrap: pretty; }
.nw-kopfkarte--zitat figcaption { margin-top: 10px; color: var(--grau); font-size: 15px; }
.nw-klassen--knapp .nw-klassenkarte { gap: 16px; padding: 24px; border-radius: 24px; }
@media (max-width: 900px) { .nw-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.nw-videos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.nw-video { border-radius: 20px; }
	.nw-video-text { padding: 14px 16px 16px; }
	.nw-video-titel { font-size: 18px; }
	.nw-zitat-gross p { font-size: 29px; }
	.nw-zitat-gross, .nw-zitat-lang { padding: 22px 20px; border-radius: 22px; }
	.nw-zitat-lang p { font-size: 18px; }
	main > .nw-abschnitt:last-child { padding-bottom: 72px; }
}

.nw-klassen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nw-klassen--knapp .nw-klassen-marke { padding: 6px 16px; border-radius: 12px; font-size: 22px; }
@media (max-width: 900px) { .nw-klassen--drei { grid-template-columns: minmax(0, 1fr); } }

/* Karten aus Bausteinen im Kopfbereich: Woche im Schuljahr, Passt gerade */
.nw-woche-karte { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #fff; border-radius: 24px; }
.nw-woche-karte .nw-aktuell-kopf > span:last-child { display: flex; flex-direction: column; }
.nw-woche-tage { color: var(--grau); font-size: 15px; line-height: 1.3; }
.nw-woche-karte > .nw-grau { font-size: 16px; }
.nw-woche-knoepfe { display: flex; gap: 10px; }
.nw-woche-knopf { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 600; font-size: 20px; text-decoration: none; transition: transform .1s ease-out; }
.nw-woche-knopf:active { transform: scale(.97); }
.nw-baustein--kopf .nw-aktuell > .nw-grau { min-height: 3em; font-size: 16px; }

/* Kontakt gesendet */
.nw-brief-karte.ist-gesendet .nw-formular { display: none; }
.nw-danke { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 8px; text-align: center; outline: none; }
.nw-danke-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--gruen-hell); display: grid; place-items: center; }
.nw-danke h2 { margin: 0; color: var(--gruen); font-weight: 600; font-size: 30px; line-height: 1.2; }
.nw-danke p { margin: 0; max-width: 28rem; color: var(--grau); }
.nw-danke .nw-knopfreihe { justify-content: center; margin-top: 6px; }
.nw-btn--rand { font: inherit; font-weight: 500; cursor: pointer; }

.nw-abschnitt > .nw-wrap > .nw-materialliste:last-child { margin-bottom: 0; }

/* Startseite: Hover-Zustände zu den Inline-Stilen, wie auf den übrigen Seiten */
.nw-start .nw-card { transition: border-color .25s ease, transform .15s ease-out, box-shadow .25s ease; }
.nw-start .nw-card:hover { border-color: var(--gruen) !important; }
.nw-start #aktuelles .nw-card:hover { box-shadow: 0 10px 24px -16px rgba(29, 59, 42, .35); }
.nw-start .nw-btn { transition: background-color .25s ease, transform .15s ease-out; }
.nw-start .nw-btn:hover { background: #276b44 !important; }
.nw-start .nw-btn:active { transform: scale(.97); }
.nw-start .nw-link:hover { color: var(--text) !important; }

/* Kontaktformular: Auswahl „Lieder oder Videos“ */
.nw-material-suche { position: relative; }
.nw-material-lupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.nw-formular .nw-material-suche input { padding-left: 44px; }
.nw-material-menue {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; padding: 6px;
	background: #fff; border: 2px solid var(--gruen-hell); border-radius: 14px; box-shadow: 0 16px 32px -18px rgba(29, 59, 42, .35);
	animation: nw-material-auf .22s cubic-bezier(.32, .72, 0, 1);
}
.nw-material-menue[hidden] { display: none; }
@keyframes nw-material-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nw-material-menue { animation: none; } }
.nw-material-treffer { margin: 0; padding: 0; list-style: none; }
.nw-material-treffer[hidden] { display: none; }
.nw-material-treffer li { margin: 0; }
.nw-treffer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.nw-treffer:hover, .nw-treffer[aria-selected="true"] { background: var(--gruenweiss); }
.nw-material-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.nw-material-titel { font-weight: 600; }
.nw-material-zeile { color: var(--grau); font-size: 14px; }
.nw-material-leer { margin: 0; padding: 8px 10px; color: var(--grau); font-size: 15px; }
.nw-material-auswahl { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nw-material-auswahl[hidden] { display: none; }
.nw-material-auswahl li { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 8px 8px 8px 16px; background: var(--gruenweiss); border-radius: 14px; }
.nw-weg { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease; }
.nw-weg:hover { background: var(--gruen-hell); }
.nw-material.nw-feldgruppe { gap: 10px; }

/* Links auf andere Webseiten mit Weiterleitungssymbol */
.nw-extern { display: inline-flex; align-items: center; gap: 6px; }
.nw-extern .nw-ic { flex: none; opacity: .85; }

/* Vorschaubilder der Videos (vom eigenen Server) unter dem Abspielknopf */
.nw-video-flaeche, .nw-aktuell-flaeche { position: relative; overflow: hidden; }
.nw .nw-video-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0 !important; }
.nw-video-flaeche .nw-video-play, .nw-aktuell-flaeche .nw-video-play { position: relative; z-index: 1; box-shadow: 0 4px 14px rgba(29, 59, 42, .25); }

/* Bildkarten (Liste aus Bild, verlinktem Titel und Satz), z. B. Anleitungen auf „Medien in der Grundschule“ */
.nw-bildkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-bildkarten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-bildkarte { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 24px; color: var(--text) !important; text-decoration: none; }
.nw-bildkarte-bild { display: block; aspect-ratio: 16 / 10; background: var(--gruenweiss); overflow: hidden; }
.nw-bildkarte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.nw-bildkarte-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.nw-bildkarte-titel { color: var(--gruen); font-weight: 600; font-size: 20px; line-height: 1.25; }
.nw-bildkarte-beschreibung { color: var(--grau); font-size: 16px; line-height: 1.45; }
.nw-bildkarte-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--gruen); font-weight: 500; }
@media (max-width: 900px) { .nw-bildkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nw-bildkarten { grid-template-columns: minmax(0, 1fr); gap: 12px; } .nw-bildkarte { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .nw-bildkarte-bild img { transition: none; } }

/* Bildkarten im Hochformat (Buchcover): vier je Reihe, das ganze Cover sichtbar */
.nw-bildkarten--hoch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nw-bildkarte--hoch .nw-bildkarte-bild { aspect-ratio: 400 / 566; padding: 20px 20px 0; background: var(--gruenweiss); }
.nw-bildkarte--hoch .nw-bildkarte-bild img { object-fit: contain; border-radius: 6px !important; box-shadow: 0 6px 18px -10px rgba(29, 59, 42, .45); }
@media (max-width: 900px) { .nw-bildkarten--hoch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nw-bildkarten--hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nw-bildkarte--hoch .nw-bildkarte-bild { padding: 12px 12px 0; } .nw-bildkarte--hoch .nw-bildkarte-text { padding: 14px; } .nw-bildkarte--hoch .nw-bildkarte-titel { font-size: 17px; } }

/* Lange Wörter in Kacheln und Karten (z. B. „Abschlussgottesdienst“) trennen statt überlaufen; Kachelraster mit vier
   Spalten werden auf mittleren Breiten zu zwei Spalten, damit die Kacheln nicht zu schmal werden */
.nw-kachel-titel, .nw-kachel-text, .nw-bildkarte-titel, .nw-video-titel, .nw-klassen-text, .nw-aktuell-titel, .nw-ml-name, .nw-tile-titel, .nw-einheit h3 {
	overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
/* getrennt werden nur Wörter ab acht Buchstaben, mit mindestens vier vor und nach dem Strich (nicht „El-tern“, „sin-ge“);
   die Angabe erbt sich und gilt überall, wo hyphens: auto steht */
body.nw { hyphenate-limit-chars: 8 4 4; }
.nw-kachel, .nw-bildkarte, .nw-klassenkarte, .nw-video { min-width: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
	.nw-kacheln[style*="--spalten:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nw-bildkarten--hoch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------- Farben einzelner Seiten und Abschnitte (inc/farben.php) */
/* Überschriften: am <body> für die ganze Seite, an einem Abschnitt nur für ihn */
.nw-ue-gruen { --ueberschrift: var(--gruen); }
.nw-ue-koralle { --ueberschrift: var(--koralle-dunkel); }
.nw-ue-dunkel { --ueberschrift: var(--text); }
/* Hintergrund eines Abschnitts als Band über die ganze Breite; der Abschnitt davor bekommt unten Luft */
.nw-abschnitt[class*="nw-hg-"] { padding-bottom: 72px; }
.nw-abschnitt:not([class*="nw-hg-"]):has(+ .nw-abschnitt[class*="nw-hg-"]) { padding-bottom: 72px; }
.nw-abschnitt.nw-hg-weiss { background: #fff; }
.nw-abschnitt.nw-hg-gruen { background: var(--gruen-hell); }
.nw-abschnitt.nw-hg-gelb { background: var(--gelb-tint); }
.nw-abschnitt.nw-hg-koralle { background: var(--koralle-tint); }
/* Kräftig: die Hauptfarbe, Überschrift und Text darauf weiß; Karten im Band bleiben, wie sie sind */
.nw-abschnitt.nw-hg-kraeftig { background: var(--gruen); }
.nw-hg-kraeftig > .nw-wrap > .nw-h2, .nw-hg-kraeftig > .nw-wrap > :is(.nw-inhalt, .nw-bildtext) :is(h3, h4) { color: #fff; }
.nw-hg-kraeftig > .nw-wrap > :is(.nw-inhalt, .nw-bildtext, .nw-knopfreihe) { color: #fff; }
.nw-hg-kraeftig > .nw-wrap > .nw-abschnitt-intro, .nw-hg-kraeftig .nw-foto figcaption { color: rgba(255, 255, 255, .88); }
.nw-hg-kraeftig > .nw-wrap > :is(.nw-inhalt, .nw-bildtext, .nw-abschnitt-intro) a:not([class*="nw-btn"]):not(.nw-pill), .nw-hg-kraeftig .nw-knopfreihe-link { color: #fff; }
.nw-hg-kraeftig .nw-knopfreihe .nw-btn--gruen { background: #fff; color: var(--gruen) !important; }
.nw-hg-kraeftig > .nw-wrap > :is(.nw-inhalt, .nw-bildtext, .nw-abschnitt-intro, .nw-knopfreihe) :focus-visible { outline-color: #fff; }
/* Aufrufkarte: die Farbe des Abschnitts ist die Farbe der Karte */
.nw-rueck--aufruf.nw-hg-gelb .nw-rueck-karte { background: var(--gelb-tint); border-color: var(--gelb); }
.nw-rueck--aufruf.nw-hg-gruen .nw-rueck-karte { background: var(--gruen-hell); border-color: color-mix(in srgb, var(--gruen) 35%, #fff); }
.nw-rueck--aufruf.nw-hg-weiss .nw-rueck-karte { background: #fff; border-color: var(--gruen-hell); }
.nw-rueck--aufruf.nw-hg-kraeftig .nw-rueck-karte { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.nw-rueck--aufruf.nw-hg-kraeftig .nw-rueck-titel { color: #fff; }
.nw-rueck--aufruf.nw-hg-kraeftig .nw-rueck-text a { color: #fff; }
.nw-rueck--aufruf.nw-hg-kraeftig .nw-btn--gruen { background: #fff; color: var(--gruen) !important; }
.nw-rueck--aufruf.nw-hg-kraeftig .nw-knopfreihe-link { color: #fff; }
/* Kopfbereich in Kräftig */
.nw-hero[data-kopf="kraeftig"] { color: #fff; }
.nw-hero[data-kopf="kraeftig"] .nw-hero-titel { color: #fff; }
.nw-hero[data-kopf="kraeftig"] .nw-hero-sub { color: rgba(255, 255, 255, .88); }
.nw-hero[data-kopf="kraeftig"] :is(.nw-krumen, .nw-hero-text) a { color: #fff; }
.nw-hero[data-kopf="kraeftig"] .nw-krume-trenner .nw-ic { stroke: rgba(255, 255, 255, .7) !important; }
.nw-hero[data-kopf="kraeftig"] :is(.nw-krumen, .nw-hero-text) :focus-visible { outline-color: #fff; }
@media (max-width: 760px) {
	.nw-abschnitt[class*="nw-hg-"], .nw-abschnitt:not([class*="nw-hg-"]):has(+ .nw-abschnitt[class*="nw-hg-"]) { padding-bottom: 48px; }
}

/* ----------------------------------------------------------------- Termine */
.nw-termine { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nw-termin { display: flex; align-items: center; gap: 20px; padding: 14px 24px 14px 14px; background: #fff; border: 2px solid var(--gruen-hell); border-radius: 26px; color: var(--text); }
.nw-termin-datum { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 116px; min-height: 92px; padding: 8px 6px; border-radius: 18px; background: var(--gruen-hell); color: var(--gruen); text-align: center; line-height: 1.1; }
.nw-termin-wt { font-size: 14px; font-weight: 500; }
.nw-termin-tag { font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.nw-termin-tag--bis { font-size: 23px; }
.nw-termin-monat { margin-top: 2px; color: var(--text); font-size: 14px; font-weight: 500; }
.nw-termin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nw-termin-titel { color: var(--text); font-weight: 600; font-size: 20px; line-height: 1.3; }
a.nw-termin-titel { color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.nw-termin-titel:hover { color: var(--text); }
.nw-termin-info { color: var(--grau); font-size: 16px; line-height: 1.45; }
.nw-termin-vorbei { margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: var(--gruenweiss); color: var(--grau); font-size: 13px; }
.nw-termin.ist-vorbei { border-color: var(--linie); }
.nw-termin.ist-vorbei .nw-termin-datum { background: var(--gruenweiss); color: var(--grau); }
@media (max-width: 760px) {
	.nw-termin { gap: 14px; padding: 10px 16px 10px 10px; border-radius: 22px; }
		.nw-termin-datum { width: 92px; min-height: 80px; padding: 6px 4px; border-radius: 16px; }
	.nw-termin-tag { font-size: 24px; }
	.nw-termin-tag--bis { font-size: 19px; }
	.nw-termin-monat { font-size: 12.5px; }
	.nw-termin-titel { font-size: 18px; }
	.nw-termin-info { font-size: 15px; }
}

/* ---------------------------------------------------- Fragen und Antworten */
.nw-fragen { display: grid; gap: 10px; max-width: 52rem; }
.nw-frage { background: #fff; border: 2px solid var(--gruen-hell); border-radius: 22px; color: var(--text); transition: border-color .15s; }
.nw-frage[open] { border-color: color-mix(in srgb, var(--gruen) 45%, #fff); }
.nw-frage summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 18px 14px 22px; border-radius: 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 19px; line-height: 1.35; }
.nw-frage summary::-webkit-details-marker { display: none; }
.nw-frage summary:focus-visible { outline-offset: -3px; }
.nw-frage-zeichen { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--gruen-hell); transition: background-color .15s; }
.nw-frage-zeichen::before, .nw-frage-zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--gruen); transform: translate(-50%, -50%); transition: transform .2s ease-out, background-color .15s; }
.nw-frage-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.nw-frage[open] .nw-frage-zeichen::after { transform: translate(-50%, -50%); }
.nw-frage summary:hover .nw-frage-zeichen { background: var(--gruen); }
.nw-frage summary:hover .nw-frage-zeichen::before, .nw-frage summary:hover .nw-frage-zeichen::after { background: #fff; }
.nw-frage > .nw-inhalt { padding: 0 22px 18px; }
.nw-frage > .nw-inhalt > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
	.nw-frage summary { min-height: 56px; padding: 12px 14px 12px 18px; font-size: 17px; }
	.nw-frage > .nw-inhalt { padding: 0 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .nw-frage-zeichen::before, .nw-frage-zeichen::after { transition: none; } }

/* ------------------------------------------------------ Text mit Bild daneben */
.nw-bildtext { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 56px; align-items: center; }
.nw-bildtext--rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.nw-bildtext--rechts .nw-bildtext-bild { order: 2; }
.nw-bildtext-bild { display: flex; justify-content: center; }
/* hohe Fotos nicht höher als etwa ein Bildschirm, im eigenen Seitenverhältnis */
.nw-bildtext-bild img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(560px, 80vh); border-radius: 28px; }
.nw-bildtext .nw-inhalt > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
	.nw-bildtext, .nw-bildtext--rechts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.nw-bildtext--rechts .nw-bildtext-bild { order: 0; }
	.nw-bildtext-bild img { border-radius: 22px; }
}

/* ------------------------------------------------------------------- Fotos */
.nw-inhalt > .nw-fotos { max-width: 100%; }
.nw-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 24px; }
.nw-foto { margin: 0; min-width: 0; }
.nw-foto a { display: block; overflow: hidden; border-radius: 20px; background: var(--gruen-hell); }
.nw-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; transition: transform .3s ease-out; }
.nw-foto a:hover img { transform: scale(1.03); }
.nw-foto figcaption { margin-top: 8px; color: var(--grau); font-size: 15px; line-height: 1.4; }
@media (max-width: 760px) { .nw-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nw-foto a { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .nw-foto img { transition: none; } }
/* ein Foto groß (assets/js/notenwelle.js) */
.nw-gross { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 24px 76px; border: 0; background: rgba(12, 30, 20, .94); color: #fff; }
.nw-gross[open] { display: grid; place-items: center; }
.nw-gross::backdrop { background: transparent; }
.nw-gross-foto { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; max-width: 100%; }
.nw-gross-foto img { display: block; max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; border-radius: 12px; }
.nw-gross-foto figcaption { max-width: 40rem; font-size: 16px; line-height: 1.45; text-align: center; }
.nw-gross button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 34px/1 var(--schrift); cursor: pointer; }
.nw-gross button:hover { background: rgba(255, 255, 255, .28); }
.nw-gross button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nw-gross-zu { top: 16px; right: 16px; }
.nw-gross-pfeil { top: 50%; transform: translateY(-50%); }
.nw-gross-zurueck { left: 14px; }
.nw-gross-weiter { right: 14px; }
.nw-gross.ist-einzeln .nw-gross-pfeil { display: none; }
@media (max-width: 760px) {
	.nw-gross { padding: 72px 8px; }
	.nw-gross-pfeil { top: auto; bottom: 12px; transform: none; }
}