/* ====================================================================
   GSW Child Theme — Globale Stile
   Basiert auf dem Design "Gesamtschule Waldbröl - Startseite.html"
   ==================================================================== */

/* ---- Reset & Base ---- */

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

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}

html:focus-within {
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--ink);
	background: var(--paper);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: background-color 220ms var(--ease), color 180ms var(--ease);
}

body,
button,
input,
select,
textarea {
	font-family: var(--sans);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

p {
	margin: 0;
}

p + p {
	margin-top: .9em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: 0;
	margin: 0 0 .6em;
	text-wrap: balance;
	color: var(--ink);
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.35rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.65rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }

strong, b { font-weight: 700; }
small { font-size: var(--text-sm); }

/* Unterstreichung noetig, damit Links im Fliesstext nicht nur per Farbe zu
   erkennen sind (WCAG 1.4.1) -- betraf u.a. Datenschutz-/Kontakt-Links.
   Komponenten mit eigenem text-decoration:none (Nav, Karten, Buttons usw.)
   ueberschreiben das ueber ihre spezifischeren Selektoren wie bisher. */
a {
	color: var(--red-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--red);
}

ul, ol {
	padding-left: 1.35em;
}

li + li {
	margin-top: .35em;
}

hr {
	height: 0;
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--line);
}

blockquote {
	padding: 1.5rem;
	border-left: 4px solid var(--yellow);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--yellow-pale);
	color: var(--ink);
}

::selection {
	background: var(--yellow);
	color: var(--yellow-deep);
}

/* ---- Fokus-Ring ---- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 3px;
	border-radius: 3px;
	box-shadow: 0 0 0 5px rgba(20, 16, 8, .22);
}

body.dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	box-shadow: none;
}

body.hc :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #000;
	box-shadow: none;
}

/* Auf roten Flächen: weißer Fokus-Ring */
.quick--accent:focus-visible,
.btn-primary:focus-visible,
.gsw-mode-bar__button:focus-visible {
	outline-color: #fff;
	box-shadow: none;
}

/* ---- Utilities ---- */

.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hide-mobile {
	/* wird per Media-Query ausgeblendet */
}

/* ---- Skip-Link ---- */

.skip {
	position: absolute;
	left: 12px;
	top: -100px;
	background: var(--ink);
	color: var(--paper);
	padding: 12px 18px;
	border-radius: var(--r-sm);
	z-index: 1000;
	font-weight: 700;
	text-decoration: none;
}

.skip:focus {
	top: 12px;
}

/* ---- Icons ---- */

.gsw-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* ====================================================================
   Topbar
   ==================================================================== */

.topbar {
	background: #131311;
	border-bottom: 1px solid #000;
	color: #e6e3d8;
	font-size: 14px;
}

body.dark .topbar {
	background: #0c0a05;
}

.topbar-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-block: 9px;
	flex-wrap: wrap;
}

.topbar a {
	color: #e6e3d8;
	text-decoration: none;
	padding: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-image: linear-gradient(var(--yellow), var(--yellow));
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s var(--ease), color .2s var(--ease);
}

.topbar a:hover {
	color: #fff;
	background-size: 100% 1.5px;
}

.topbar .sep {
	width: 1px;
	height: 14px;
	background: #3a3a36;
	flex: none;
}

.topbar-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.a11y-btn {
	background: transparent;
	border: 1px solid #3a3a36;
	color: #e6e3d8;
	font: inherit;
	font-size: var(--text-xs);
	padding: 8px 12px;
	border-radius: var(--r-pill);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.a11y-btn:hover {
	background: #2a2a26;
}

.a11y-btn[aria-pressed="true"] {
	background: var(--yellow);
	color: var(--yellow-deep);
	border-color: var(--yellow);
	font-weight: 700;
}

/* ====================================================================
   Masthead
   ==================================================================== */

.masthead {
	background: var(--paper);
	border-bottom: 0;
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
	box-shadow:
		inset 0 -1px 0 var(--line-2),
		0 3px 0 var(--yellow),
		0 10px 24px -10px rgba(20, 16, 8, .12);
}

.masthead.scrolled {
	box-shadow:
		inset 0 -1px 0 var(--line-2),
		0 3px 0 var(--yellow),
		0 16px 32px -12px rgba(20, 16, 8, .20);
}

body.dark .masthead {
	box-shadow:
		inset 0 -1px 0 var(--line-2),
		0 3px 0 var(--yellow),
		0 12px 28px -10px rgba(0, 0, 0, .55);
}

body.dark .masthead.scrolled {
	box-shadow:
		inset 0 -1px 0 var(--line-2),
		0 3px 0 var(--yellow),
		0 18px 36px -12px rgba(0, 0, 0, .7);
}

.masthead-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 10px;
	flex-wrap: nowrap;
	transition: padding-block 260ms var(--ease);
}

/* Homepage: großer Header */
.masthead--hero .masthead-row {
	padding-block: 26px;
}

/* Homepage nach Scroll: kompakt */
.masthead--hero.scrolled .masthead-row {
	padding-block: 10px;
}

/* ---- Brand / Logo ---- */

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
	flex: 0 0 auto;
	min-width: 0;
}

/* Nur auf der Startseite: der Logo-Link ist dort der einzige H1 der Seite
   (current-state.md, 2026-08-16) -- Reset, damit das H1-Element rein
   semantisch bleibt und optisch nichts am Logo-Bereich aendert. */
.brand-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 0;
	display: contents;
}

.brand-mark {
	width: 50px;
	height: 50px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	border-radius: var(--r-sm);
	overflow: hidden;
	border: 1px solid var(--line-2);
	flex: none;
}

.brand-mark span { display: block; }
.brand-mark span:nth-child(1) { background: var(--red); }
.brand-mark span:nth-child(2) { background: #fff; }
.brand-mark span:nth-child(3) { background: var(--yellow); }
.brand-mark span:nth-child(4) { background: var(--red); }
.brand-mark span:nth-child(5) { background: var(--yellow); }
.brand-mark span:nth-child(6) { background: #fff; }

.brand-text .name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.1;
	color: var(--ink);
}

/* Echtes Logo-Bild aus dem Customizer */
.brand__logo {
	display: block;
	height: 40px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	flex: none;
	transition: height 260ms var(--ease);
}

/* Homepage: prominentes Logo */
.masthead--hero .brand__logo {
	height: 80px;
}

/* Homepage nach Scroll: Normalgröße */
.masthead--hero.scrolled .brand__logo {
	height: 40px;
}

/* Textfallback wenn kein Logo hinterlegt */
.brand__name {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.masthead-row,
	.brand__logo {
		transition: none !important;
	}
}

/* ====================================================================
   Hauptnavigation + Mega-Menü
   ==================================================================== */

.nav {
	margin-left: auto;
	min-width: 0;
	flex: 0 1 auto;
}

.nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
}

.nav > ul > li {
	position: static;
	margin: 0;
}

.nav > ul > li > a,
.nav > ul > li > button {
	background: transparent;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 14px 10px;
	color: var(--ink);
	text-decoration: none;
	font: inherit;
	font-weight: 700;
	font-size: var(--text-sm);
	position: relative;
	border-radius: 0;
	white-space: nowrap;
}

.nav > ul > li > a::after,
.nav > ul > li > button::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s var(--ease);
}

.nav > ul > li > a:hover::after,
.nav > ul > li > button:hover::after,
.nav > ul > li:focus-within > a::after,
.nav > ul > li:focus-within > button::after,
.nav > ul > li.open > a::after,
.nav > ul > li.open > button::after {
	transform: scaleX(1);
}

.nav > ul > li > a[aria-current="page"]::after {
	transform: scaleX(1);
	background: var(--red);
}

.gsw-chev {
	width: 11px;
	height: 11px;
	opacity: .55;
	transition: transform .2s var(--ease);
}

.nav > ul > li:hover .gsw-chev,
.nav > ul > li:focus-within .gsw-chev,
.nav > ul > li.open .gsw-chev {
	transform: rotate(180deg);
}

/* ---- Mega-Panel ---- */

.mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--sh-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
	z-index: 49;
}

.nav > ul > li.open .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
}

.mega-inner {
	display: flex;
	gap: clamp(24px, 3vw, 40px);
	padding-block: 32px;
	align-items: start;
}
.mega-cols {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(14px, 1.8vw, 28px);
	align-items: start;
}
.mega-inner > .mega-feature {
	flex: 0 0 268px;
}

.mega .mega-col-title {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 14px;
}

.mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mega ul a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--ink);
}

.mega ul a:hover {
	background: var(--neutral);
	color: var(--red-deep);
}

.mega ul .ic {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: var(--yellow-pale);
	color: var(--red-deep);
	border-radius: var(--r-sm);
}

.mega ul .gsw-icon {
	width: 18px;
	height: 18px;
}

.mega ul .lab {
	font-weight: 700;
	line-height: 1.2;
}

.mega ul .d {
	display: block;
	font-size: var(--text-xs);
	color: var(--ink-3);
	font-weight: 400;
	margin-top: 2px;
}

.mega-feature {
	background: var(--neutral);
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--sh-1);
}

.mega-feature .mf-media {
	aspect-ratio: 16 / 10;
	background: var(--neutral);
	position: relative;
	overflow: hidden;
}

.mega-feature .mf-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mega-feature .mf-body {
	padding: 16px 18px 18px;
}

.mega-feature .mf-eyebrow {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--red-deep);
	font-weight: 700;
}

.mega-feature .mf-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	margin-top: 6px;
}

.mega-feature .mf-title a {
	color: var(--ink);
	text-decoration: none;
}

.mega-feature .mf-title a:hover {
	color: var(--red-deep);
}

/* ---- Mega Link-Flyout (3. Ebene, automatisch wenn WP-Kinder gesetzt) ---- */

.mega-col-group {
	position: relative;
}

.mega-fly-item {
	position: relative;
}

.mega-fly-trigger {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: var(--r-sm);
	text-decoration: none;
	color: var(--ink);
	width: 100%;
}

.mega-fly-trigger:hover {
	background: var(--neutral);
	color: var(--red-deep);
}

.mega-fly-chev {
	width: 12px;
	height: 12px;
	flex: none;
	margin-left: auto;
	margin-top: 4px;
	opacity: .45;
	transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}

.mega-fly-item.is-open .mega-fly-chev {
	opacity: 1;
	transform: rotate(90deg);
}

.mega-fly-sub {
	position: absolute;
	left: calc(100% + 6px);
	top: -6px;
	min-width: 220px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .13);
	z-index: 70;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms;
}

.mega-fly-item.is-open .mega-fly-sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}

.mega-fly-sub > ul {
	padding: 4px 0;
}

/* ---- Head Tools ---- */

.head-tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

.icon-btn {
	width: 42px;
	height: 42px;
	border-radius: var(--r-sm);
	display: inline-grid;
	place-items: center;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	color: var(--ink);
}

.icon-btn:hover {
	background: var(--neutral);
}

.icon-btn .gsw-icon {
	width: 20px;
	height: 20px;
}

.menu-btn {
	display: none;
}

/* ====================================================================
   Footer
   ==================================================================== */

.gsw-footer {
	background: #131311;
	color: #d6d3c2;
	padding-block: 64px 28px;
	font-size: var(--text-sm);
}

body.dark .gsw-footer {
	background: #0c0a05;
}

.gsw-footer a {
	color: #d6d3c2;
	text-decoration: none;
	background-image: linear-gradient(var(--yellow), var(--yellow));
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s var(--ease), color .2s var(--ease);
}

.gsw-footer a:hover {
	color: #fff;
	background-size: 100% 1.5px;
}

.foot-brand-link,
.foot-brand-link:hover {
	background-image: none;
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
}

.foot-brand-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
}

.foot-brand .brand-mark {
	width: 36px;
	height: 36px;
}

.foot-brand__logo {
	height: 56px;
	width: auto;
	display: block;
	flex-shrink: 0;
}

.foot-brand .name {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 600;
	color: #fff;
}

.foot-brand .addr {
	color: #a8a597;
	max-width: 32ch;
	margin-top: 10px;
	line-height: 1.6;
}

.foot-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.foot-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--r-sm);
	background: transparent;
	color: #a8a597;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color .18s, color .18s;
}

.foot-social__link:hover,
.foot-social__link:focus-visible {
	border-color: rgba(255,255,255,.4);
	color: #fff;
	background-image: none;
	outline: none;
}

.foot-social__link:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 2px;
}

.foot h3 {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #a8a597;
	margin-bottom: 14px;
	font-family: var(--sans);
	font-weight: 700;
}

.foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.foot-bottom {
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid #2d2d2a;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: var(--text-xs);
	color: #908d80;
}

.foot-bottom .pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid #2d2d2a;
	border-radius: var(--r-pill);
	padding: 4px 12px;
	color: #b3b09f;
}

.foot-bottom .pill .ok {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
}

/* ====================================================================
   Mobile Bottom-Navigation
   ==================================================================== */

.gsw-mobile-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding: 6px 4px max(6px, env(safe-area-inset-bottom));
	box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2);
}

.gsw-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.gsw-mobile-nav__item {
	flex: 1 1 0;
	/* Ueberschreibt die globale Fliesstext-Listenregel "li + li { margin-top:
	   .35em }" (fuer normale Inhalts-Listen in Beitraegen/Seiten gedacht).
	   Die erbte hier ungewollt in jeden Eintrag AUSSER dem ersten (der hat
	   keinen vorherigen li-Nachbarn) -- das war die eigentliche, bisher
	   uebersehene Ursache fuer den "erster Eintrag sitzt hoeher"-Effekt,
	   siehe current-state.md. */
	margin-top: 0;
}

.gsw-mobile-nav__link,
.gsw-mobile-nav__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 4px;
	background: transparent;
	border: 0;
	color: var(--ink-2);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--r-sm);
	min-height: 48px;
}

.gsw-mobile-nav__link:hover,
.gsw-mobile-nav__btn:hover {
	background: var(--neutral);
	color: var(--ink);
}

.gsw-mobile-nav__link.is-current {
	color: var( --red );
	font-weight: 700;
	position: relative;
}

.gsw-mobile-nav__link.is-current::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 3px;
	background: var( --red );
	border-radius: 0 0 3px 3px;
}

.gsw-mobile-nav__icon {
	width: 22px;
	height: 22px;
}

/* ====================================================================
   Eyebrow
   ==================================================================== */

.eyebrow {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.eyebrow::before {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--red);
	display: inline-block;
	flex: none;
}

.eyebrow.on-dark { color: #cfcdc1; }
.eyebrow.on-dark::before { background: var(--yellow); }
.eyebrow.on-yellow { color: var(--yellow-deep); }
.eyebrow.on-yellow::before { background: var(--red); }

/* ====================================================================
   Buttons
   ==================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: var(--r-pill);
	font: inherit;
	font-weight: 700;
	font-size: var(--text-sm);
	cursor: pointer;
	border: 1.5px solid transparent;
	text-decoration: none;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.btn-primary {
	background: var(--ink);
	color: var(--paper);
}

.btn-primary:hover {
	background: var(--red-deep);
	transform: translateY(-1px);
	color: #fff;
}

.btn-ghost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line-2);
}

.btn-ghost:hover {
	background: var(--neutral);
	color: var(--ink);
}

.btn .gsw-icon {
	width: 18px;
	height: 18px;
}

/* Kategorie-Badge */
.cat {
	display: inline-flex;
	align-items: center;
	background: var(--red);
	color: #fff;
	padding: 4px 10px;
	border-radius: var(--r-sm);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cat--outline { background: var(--paper); color: var(--red-deep); border: 1px solid var(--red); }
.cat--neutral { background: var(--neutral); color: var(--ink-2); border: 1px solid var(--line); }

/* ====================================================================
   Homepage-Wrapper
   ==================================================================== */

.gsw-homepage {
	padding-bottom: 0;
}

/* ====================================================================
   News-Hero
   ==================================================================== */

.news-hero {
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(40px, 5vw, 72px);
	position: relative;
	overflow: hidden;
}

.news-hero-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.news-hero-head .link {
	color: var(--red-deep);
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
}

.news-hero-head .link:hover {
	color: var(--red);
}

/* Magazin-Aufmacher */
.hero-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 3vw, 56px);
	align-items: center;
}

.hero-feature .media {
	aspect-ratio: 5 / 4;
	background: var(--neutral);
	border-radius: var(--r-lg);
	overflow: hidden;
	position: relative;
	isolation: isolate;
	box-shadow: var(--sh-3);
}

.hero-feature .media img,
.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-feature .media .caption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	font-size: var(--text-xs);
	color: #fff;
	background: rgba(19, 19, 17, .65);
	backdrop-filter: blur(6px);
	padding: 8px 12px;
	border-radius: var(--r-sm);
}

.hero-feature .meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--ink-3);
	margin-bottom: 18px;
}

.hero-feature h1,
.hero-feature .hero-title {
	font-size: clamp(40px, 5.6vw, 76px);
	line-height: 1.02;
	font-weight: 500;
	margin: 0 0 20px;
}

.hero-feature h1 a,
.hero-feature .hero-title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .35s var(--ease);
}

.hero-feature h1 a:hover,
.hero-feature .hero-title a:hover {
	background-size: 100% 2px;
}

.hero-feature .teaser {
	font-size: 19px;
	color: var(--ink-2);
	max-width: 56ch;
	margin-bottom: 24px;
}

.hero-feature .hero-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Sekundäre News */
.news-secondary {
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.news-item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .25s var(--ease);
}

.news-item:hover {
	transform: translateY(-4px);
}

.news-item .media {
	aspect-ratio: 4 / 3;
	background: var(--neutral);
	border-radius: var(--r-md);
	overflow: hidden;
	position: relative;
	box-shadow: var(--sh-1);
	transition: box-shadow .25s var(--ease);
}

.news-item:hover .media {
	box-shadow: var(--sh-2);
}

.news-item .meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: var(--text-xs);
	color: var(--ink-3);
}

.news-item h2 {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
}

.news-item h2 a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s var(--ease);
}

.news-item h2 a:hover {
	background-size: 100% 1.5px;
}

.news-item p {
	color: var(--ink-2);
	font-size: var(--text-sm);
}

/* ====================================================================
   Seals — Auszeichnungen
   ==================================================================== */

.seals {
	background: linear-gradient(180deg, var(--yellow-warm) 0%, var(--yellow-pale) 100%);
	border-block: 1px solid var(--line-2);
	padding-block: clamp(28px, 3vw, 48px);
	position: relative;
	overflow: hidden;
}

body.dark .seals {
	background: linear-gradient(180deg, #2a2618 0%, #1f1c12 100%);
}

.seals::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--red) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--red) 66.6% 100%);
}

.seals-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(16px, 2vw, 28px);
}

.seals-head h2 {
	font-size: clamp(32px, 4.2vw, 56px);
	font-weight: 300;
	line-height: 1.05;
	margin-top: 8px;
	max-width: 16ch;
}

.seals-head h2 em {
	font-style: italic;
	color: var(--red-deep);
	font-weight: 500;
}

.seals-sub {
	color: var(--ink-2);
	max-width: 38ch;
	font-size: var(--text-base);
	align-self: flex-end;
}

.seals-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Immer eine Zeile, unabhaengig von der Anzahl Siegel -- Spaltenzahl
	   kommt per Inline-Custom-Property aus template-parts/home/seals.php. */
	grid-template-columns: repeat(var(--seal-count, 5), minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.seals-row li {
	/* Ueberschreibt die globale Fliesstext-Listenregel "li + li { margin-top:
	   .35em }" (Zeile ~100) -- dieselbe Ursache wie beim Hoehen-/Positions-
	   fehler der unteren Mobil-Navigation (siehe current-state.md, Runde
	   10). Betraf hier jedes Siegel ausser dem ersten, sichtbar sowohl auf
	   Mobile (Karussell-Sprung beim Wischen) als auch Desktop (Kachel 1
	   sass hoeher/anders hoch als die uebrigen 7). */
	margin-top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 26px 14px 24px;
	border-radius: var(--r-md);
	background: var(--paper);
	border: 1px solid var(--line);
	box-shadow: var(--sh-2);
	position: relative;
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.seals-row li::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--ease);
}

.seals-row li:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-3);
	border-color: var(--line-2);
}

.seals-row li:hover::before {
	transform: scaleX(1);
}

.seal {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #fff 0%, var(--neutral) 100%);
	border: 2px solid var(--line-2);
	display: grid;
	place-items: center;
	position: relative;
	flex: none;
	box-shadow: var(--sh-2), inset 0 -3px 8px rgba(0, 0, 0, .06);
}

.seal::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px dashed var(--line-2);
	border-radius: 50%;
	opacity: .7;
}

.seal::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 22%, rgba(188, 24, 26, .18) 22% 28%, transparent 28% 50%, rgba(236, 219, 83, .30) 50% 56%, transparent 56% 78%, rgba(188, 24, 26, .14) 78% 84%, transparent 84% 100%);
	pointer-events: none;
	z-index: 0;
}

.seal span {
	position: relative;
	z-index: 1;
	font-family: var(--sans);
	font-weight: 700;
	color: var(--red-deep);
	font-size: 24px;
	letter-spacing: .04em;
	line-height: 1;
}

body.dark .seal {
	background: radial-gradient(circle at 30% 25%, #2c2818 0%, #15130c 100%);
	border-color: #5a513a;
}

body.dark .seal::before { border-color: #5a513a; }
body.dark .seal span { color: var(--yellow); }

/* Siegel als klickbarer Link */
.seal-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.seals-row li:has(.seal-link) {
	cursor: pointer;
}

.seal-link:focus-visible .seal {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

/* Siegel mit echtem Logo — Bild füllt das Rund, kein Beschneiden */
.seal--logo {
	background: #fff;
	padding: 10px;
}

.seal--logo::before { display: none; }

.seal--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 0;
}

.seal-name {
	font-weight: 700;
	font-size: var(--text-sm);
	line-height: 1.25;
	color: var(--ink);
	max-width: 20ch;
	text-wrap: balance;
}

.seal-meta {
	font-size: 12.5px;
	color: var(--ink-3);
	line-height: 1.4;
	text-wrap: balance;
}

/* ---- Siegel: Scroll-Pfeile (nur mobil aktiv, siehe Media Query) ---- */

.seals-scroller {
	position: relative;
}

.seals-nav {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line-2);
	box-shadow: var(--sh-2);
	color: var(--ink);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.seals-nav--prev { left: 4px; }
.seals-nav--next { right: 4px; }

.seals-all-link {
	margin-top: clamp(16px, 2vw, 24px);
	text-align: center;
}

.seals-all-link a {
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
}

.seals-all-link a:hover { text-decoration: underline; }

/* ====================================================================
   Strip — Bildergalerie (dunkler Hintergrund)
   ==================================================================== */

.strip {
	background: #15130d;
	color: #f3f1e6;
	padding-block: clamp(28px, 3vw, 44px);
	position: relative;
	overflow: hidden;
}

body.dark .strip { background: #0c0a05; }

.strip::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 220px;
	height: 220px;
	background:
		linear-gradient(180deg, var(--yellow) 0 50%, transparent 50% 100%),
		linear-gradient(180deg, transparent 0 50%, var(--red) 50% 100%);
	background-size: 100% 100%;
	opacity: .12;
	transform: rotate(-8deg);
	pointer-events: none;
}

.strip-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: clamp(14px, 1.5vw, 22px);
}

.strip h2 {
	font-size: clamp(34px, 4.2vw, 56px);
	font-weight: 300;
	line-height: 1.05;
	color: #fff;
	margin-top: 10px;
}

.strip h2 em { font-style: italic; color: var(--yellow); }

.strip .lede { color: #c8c6ba; max-width: 50ch; }

.strip-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 1fr;
	gap: 14px;
}

.tile {
	position: relative;
	background: #2a2a26;
	border-radius: var(--r-md);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	color: #fff;
	box-shadow: var(--sh-2);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.tile:hover img { transform: scale(1.04); }

.tile .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .75) 100%);
	pointer-events: none;
}

.tile .cap {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	z-index: 2;
}

.tile .cap small {
	display: block;
	font-weight: 400;
	color: #d6d2c0;
	font-size: 12px;
	margin-top: 2px;
}

.tile.t-1 { grid-column: span 6; aspect-ratio: 16 / 10; }
.tile.t-2 { grid-column: span 3; aspect-ratio: 4 / 5; }
.tile.t-3 { grid-column: span 3; aspect-ratio: 4 / 5; }
.tile.t-4 { grid-column: span 4; aspect-ratio: 4 / 3; }
.tile.t-5 { grid-column: span 4; aspect-ratio: 4 / 3; }
.tile.t-6 { grid-column: span 4; aspect-ratio: 4 / 3; }

/* ====================================================================
   Profil / Zitat
   ==================================================================== */

.profil {
	background: var(--paper-2);
	border-block: 1px solid var(--line);
	padding-block: clamp(32px, 3.5vw, 52px);
	position: relative;
	overflow: hidden;
}

.profil::before {
	content: "";
	position: absolute;
	left: -40px;
	bottom: -40px;
	width: 280px;
	height: 280px;
	background:
		repeating-linear-gradient(0deg, var(--yellow) 0 30px, transparent 30px 60px),
		repeating-linear-gradient(90deg, var(--red) 0 30px, transparent 30px 60px);
	opacity: .14;
	transform: rotate(-6deg);
	pointer-events: none;
	border-radius: var(--r-md);
}

.profil-quote {
	max-width: 22ch;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.1;
	color: var(--ink);
	margin: 14px 0 20px;
	text-wrap: balance;
}

.profil-quote::before {
	content: "\201E";
	font-family: var(--serif);
	color: var(--red);
	font-size: 1.2em;
	font-style: normal;
	line-height: 0;
	vertical-align: -0.15em;
	margin-right: 2px;
}

.profil-quote::after {
	content: "\201C";
	font-family: var(--serif);
	color: var(--red);
	font-size: 1.2em;
	font-style: normal;
	line-height: 0;
	vertical-align: -0.15em;
}

.profil-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
	position: relative;
	z-index: 1;
}

.profil .lede {
	font-size: 18px;
	color: var(--ink-2);
	margin-bottom: 14px;
	max-width: 50ch;
}

.profil .signature {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--ink-2);
}

.signature .avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line-2);
	display: grid;
	place-items: center;
	font-family: var(--serif);
	font-weight: 600;
	color: var(--ink-2);
}

.facts {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 3px solid var(--red);
	border-radius: var(--r-md);
	padding: 28px;
	box-shadow: var(--sh-2);
}

.facts h3 {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 600;
	margin-bottom: 14px;
	font-family: var(--sans);
}

.facts dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 24px;
}

.fact-icon {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--red);
	margin-bottom: 8px;
}

.fact-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.facts dt {
	font-size: var(--text-xs);
	color: var(--ink-3);
	margin-bottom: 4px;
}

.facts dd {
	margin: 0;
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.05;
	color: var(--ink);
}

.facts dd small {
	display: block;
	font-size: 12px;
	color: var(--ink-3);
	font-weight: 400;
	font-family: var(--sans);
	margin-top: 2px;
}

.facts .badges {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 5px 12px;
	font-size: var(--text-xs);
	color: var(--ink-2);
	font-weight: 600;
}

.badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
}

/* ====================================================================
   Schnellzugriffe
   ==================================================================== */

.quicks-section {
	background: var(--warm);
	border-block: 1px solid var(--line);
	padding-block: clamp(28px, 3vw, 48px);
}

.section-head {
	margin-bottom: clamp(14px, 2vw, 24px);
}

.section-head h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
	margin-top: 12px;
}

.section-head .sub {
	color: var(--ink-2);
	font-size: var(--text-base);
	max-width: 60ch;
	margin-top: 8px;
}

.quicks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.quick {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 24px 26px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--ink);
	min-height: 168px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--sh-1);
	transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}

.quick:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
	border-color: var(--line-2);
}

.quick--accent {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.quick--accent .qs { color: rgba(255, 255, 255, .85); }
.quick--accent .label { color: var(--yellow); }
.quick--accent .label::before { background: var(--yellow); }
.quick--accent .arrow { color: rgba(255, 255, 255, .7); }
.quick--accent:hover { background: var(--red-deep); border-color: var(--red-deep); }

body.dark .quick--accent { color: #fff; }
body.dark .quick--accent:hover { background: #d63a3c; border-color: #d63a3c; }

.quick--accent::after {
	content: "";
	position: absolute;
	right: -28px;
	top: -28px;
	width: 84px;
	height: 84px;
	background: var(--yellow);
	transform: rotate(45deg);
	opacity: .22;
}

.quick--warm {
	background: var(--yellow-warm);
	border-color: var(--yellow-warm);
}

body:not(.dark) .quick--warm .label { color: var(--yellow-deep); }
body:not(.dark) .quick--warm .label::before { background: var(--yellow-deep); }

.quick .qt {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	margin-top: auto;
}

.quick .qs {
	font-size: 14px;
	color: var(--ink-3);
}

.quick .arrow {
	position: absolute;
	top: 24px;
	right: 24px;
	color: var(--ink-3);
	transition: transform .2s var(--ease), color .2s var(--ease);
}

.quick .arrow .gsw-icon {
	width: 20px;
	height: 20px;
}

.quick:hover .arrow {
	color: var(--red-deep);
	transform: translateX(2px);
}

.quick .label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red-deep);
	font-weight: 700;
}

.quick .label::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--red);
	border-radius: 1px;
}

/* ====================================================================
   Termine
   ==================================================================== */

.termine-section {
	background: var(--paper-2);
	border-block: 1px solid var(--line);
	padding-block: clamp(28px, 3vw, 48px);
}

.termine-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.termine-grid h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
	margin-top: 8px;
}

.termine-grid .intro {
	color: var(--ink-2);
	font-size: var(--text-base);
	margin-top: 8px;
	max-width: 36ch;
}

.termine-grid .links {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.termine-grid .links a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	width: fit-content;
}

.termine-grid .links a:hover { border-bottom-color: var(--red); }
.termine-grid .links a .ic { color: var(--red); }

.termine-list {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--sh-2);
}

.termine-list ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.termine-list li {
	display: grid;
	grid-template-columns: 92px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 18px 22px;
	border-top: 1px solid var(--line);
}

.termine-list li:first-child { border-top: 0; }
.termine-list li:hover { background: var(--warm); }

.date {
	text-align: left;
	border-right: 1px solid var(--line);
	padding-right: 14px;
}

.date .d {
	display: block;
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1;
	font-weight: 500;
	color: var(--ink);
}

.date .m {
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: 4px;
	font-weight: 700;
}

.date.today .d,
.date.today .m { color: var(--red-deep); }

.t-body .t-title { font-weight: 700; color: var(--ink); }
.t-body .t-meta { font-size: 14px; color: var(--ink-3); margin-top: 3px; }

.t-body .t-title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s var(--ease);
}

.t-body .t-title a:hover {
	background-size: 100% 1.5px;
}

/* Monatsgruppen-Trennzeile in der Terminliste */
.termine-list .month-divider {
	display: block;
	padding: 10px 20px 6px;
	background: var(--paper-2);
	border-top: 1px solid var(--line);
}

.termine-list .month-divider:first-child {
	border-top: 0;
}

.termine-list .month-divider span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.t-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 4px 10px;
	border-radius: var(--r-sm);
	background: var(--neutral);
	color: var(--ink-2);
	border: 1px solid var(--line);
}

/* ====================================================================
   Kalenderansicht — [gsw_kalenderansicht] (interner Monatsraster-Klon
   der Google-Kalender-Ansicht, siehe inc/calendar-view.php)
   ==================================================================== */

.gsw-kalenderansicht {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
	overflow: hidden;
}

.gsw-kalenderansicht__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}

.gsw-kalenderansicht__nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gsw-kalenderansicht__nav-btn {
	color: var(--ink-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 2px;
}

.gsw-kalenderansicht__nav-btn:hover { color: var(--red); }

.gsw-kalenderansicht__month {
	font-family: var(--serif);
	font-size: 18px;
	color: var(--ink);
	min-width: 12ch;
	text-align: center;
}

.gsw-kalenderansicht__ics {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gsw-kalenderansicht__ics:hover { color: var(--red); border-bottom-color: var(--red); }

.gsw-kalenderansicht__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.gsw-kalenderansicht__table th {
	padding: 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.gsw-kalenderansicht__day {
	vertical-align: top;
	width: 14.2857%;
	height: 96px;
	padding: 6px;
	border: 1px solid var(--line);
	overflow: hidden;
}

.gsw-kalenderansicht__day--outside {
	background: var(--paper-2);
}

.gsw-kalenderansicht__day--outside .gsw-kalenderansicht__day-num {
	color: var(--ink-3);
	opacity: .55;
}

.gsw-kalenderansicht__day--today {
	background: color-mix(in srgb, var(--red) 8%, var(--paper));
}

.gsw-kalenderansicht__day-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.gsw-kalenderansicht__day--today .gsw-kalenderansicht__day-num {
	background: var(--red);
	color: #fff;
	border-radius: 50%;
}

.gsw-kalenderansicht__events {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gsw-kalenderansicht__event {
	font-size: 11px;
	line-height: 1.3;
	color: var(--ink-2);
}

.gsw-kalenderansicht__event a {
	display: block;
	color: var(--ink-2);
	text-decoration: none;
	background: var(--warm);
	border-left: 3px solid var(--red);
	border-radius: 3px;
	padding: 2px 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gsw-kalenderansicht__event a:hover { background: var(--paper-2); color: var(--ink); }

.gsw-kalenderansicht__event--more {
	color: var(--ink-3);
	font-weight: 600;
	padding: 2px 5px;
}

@media (max-width: 700px) {
	.gsw-kalenderansicht__day { height: auto; min-height: 64px; }
	.gsw-kalenderansicht__table th { font-size: 9px; padding: 8px 2px; }
}

/* Terminliste — Seiten-Navigation ([gsw_terminliste], inc/calendar-view.php) */

.gsw-terminliste__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	border-top: 1px solid var(--line);
	background: var(--paper-2);
}

.gsw-terminliste__page-btn {
	color: var(--ink-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

a.gsw-terminliste__page-btn:hover { color: var(--red); }

.gsw-terminliste__page-btn--disabled {
	color: var(--ink-3);
	opacity: .5;
}

.gsw-terminliste__page-status {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
	letter-spacing: .02em;
}

/* ====================================================================
   Service-Abschluss / Kontaktkarten
   ==================================================================== */

.service-end {
	background: var(--paper);
	padding-block: clamp(28px, 3vw, 48px);
	border-top: 1px solid var(--line);
}

.service-end-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.service-end h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
	margin-top: 8px;
}

.service-end .lede {
	color: var(--ink-2);
	font-size: var(--text-base);
	margin-top: 12px;
	max-width: 48ch;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.contact-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 24px;
	box-shadow: var(--sh-1);
	transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.contact-card:hover {
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.contact-card--warm { background: var(--yellow-pale); border-color: var(--yellow-pale); }
.contact-card--red { background: var(--red-soft); border-color: var(--red-soft); }

.contact-card h3 {
	font-size: 14px;
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 10px;
}

.contact-card .big {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.contact-card .meta {
	font-size: 14px;
	color: var(--ink-3);
	margin-top: 6px;
}

.contact-card a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--red);
	padding-bottom: 1px;
}

.contact-card a:hover { color: var(--red-deep); }

/* Hoher Kontrast: stärkere Rahmen */
body.hc .contact-card,
body.hc .facts,
body.hc .quick,
body.hc .termine-list,
body.hc .gsw-kalenderansicht {
	border-width: 2px;
}

/* ====================================================================
   Anliegen-Router-Chips (Service-Sektion)
   ==================================================================== */

.gsw-router {
	margin-top: 24px;
}

.gsw-router__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 10px;
}

.gsw-router__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gsw-router__chip {
	padding: 5px 14px;
	border-radius: var(--r-pill);
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	min-height: 32px;
	line-height: 1.4;
	transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}

.gsw-router__chip:hover {
	color: var(--red);
}

.gsw-router__chip.is-active {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.gsw-router__chip:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

.contact-card.is-dimmed {
	opacity: .3;
	transform: scale(.985);
	transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.contact-card.is-target {
	box-shadow: 0 0 0 2px var(--yellow);
	transition: box-shadow 200ms var(--ease);
}

/* ====================================================================
   Anmelde-Modus-Leiste
   ==================================================================== */

.gsw-mode-bar {
	background: var(--red);
	color: #fff;
	padding-block: 12px;
}

.gsw-mode-bar__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.gsw-mode-bar__eyebrow {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: .75;
}

.gsw-mode-bar__title { font-weight: 700; }

.gsw-mode-bar__button {
	background: #fff;
	color: var(--red);
	padding: 8px 16px;
	border-radius: var(--r-pill);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}

/* ====================================================================
   GP-Overrides — GeneratePress-spezifische Korrekturen
   ==================================================================== */

/* GP-Site-Wrapper normalisieren */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

/* GP-Standard-Navigation ausblenden (durch Mega-Menü ersetzt) */
.main-navigation,
#site-navigation {
	display: none !important;
}

/* GP-Header: komplett ausgeblendet (durch .masthead ersetzt) */
#masthead.site-header {
	display: none !important;
}

/* GP-Footer-Wrapper: Padding entfernen */
.site-footer {
	padding: 0;
}

/* GP-Container */
.grid-container {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * Startseite: äußerer GP-Seiten-Container (#page) ohne Padding —
 * das Element hat Klassen "grid-container container" (kein grid-parent!),
 * daher per ID selektiert. .wrap in den Sektionen übernimmt das Gutter.
 */
body.home #page {
	padding-inline: 0;
}

/* Hintergrund der Außen-Container auf warm setzen, damit keine weißen
 * Streifen zwischen Seite und Inhalt sichtbar sind. */
body.home,
body.home .site-content {
	background: var(--warm);
}

/*
 * Startseite: Karten-Layout.
 * flex: 1 nötig, weil .site-content ein Flex-Row-Container ist (GP main.css) —
 * ohne es würde das <main> auf Inhaltsbreite einschrumpfen und linksbündig erscheinen.
 */
.site-main.gsw-homepage {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.2vw, 16px);
	padding-inline: clamp(8px, 1.5vw, 16px);
	padding-block: clamp(12px, 2vw, 20px);
	background: var(--warm);
}

/* Inhalts-Seiten: Standard-Layout */
.site-main {
	padding-block: clamp(32px, 4vw, 64px);
}

.entry-content,
.inside-article {
	max-width: 72ch;
	margin-inline: auto;
}

/* Gutenberg-Blöcke */
.entry-content > * {
	margin-inline: auto;
}

.entry-content img {
	border-radius: var(--r-md);
}

/* Admin-Bar Offset für Sticky-Header */
.admin-bar .masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .masthead {
		top: 46px;
	}
}

/* ====================================================================
   Responsive
   ==================================================================== */

@media (max-width: 1180px) {
	.nav { display: none; }

	/* .nav trug bisher per margin-left:auto den Abstand zur Werkzeugleiste --
	   faellt mit display:none weg, also uebernimmt .head-tools das selbst. */
	.head-tools {
		margin-left: auto;
	}

	.menu-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 14px;
		border-radius: var(--r-sm);
		background: var(--paper);
		border: 1px solid var(--line-2);
		color: var(--ink);
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	.menu-btn .gsw-icon {
		width: 20px;
		height: 20px;
	}

	.hero-feature { grid-template-columns: 1fr; }
	.hero-footer { grid-template-columns: 1fr; }
	.news-secondary { grid-template-columns: repeat(2, 1fr); }
	.profil-grid { grid-template-columns: 1fr; }
	.quicks { grid-template-columns: repeat(2, 1fr); }
	.termine-grid { grid-template-columns: 1fr; }
	.service-end-grid { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.tile.t-1 { grid-column: span 12; aspect-ratio: 16 / 9; }
	.tile.t-2, .tile.t-3 { grid-column: span 6; }
	.tile.t-4, .tile.t-5, .tile.t-6 { grid-column: span 6; aspect-ratio: 1 / 1; }
}

@media (max-width: 640px) {
	body { padding-bottom: 60px; }

	.topbar-row .hide-mobile { display: none; }

	/* Einstellungs-Buttons (Dunkel/Kontrast/Schrift+) nur als Icon --
	   Text ist per .hide-mobile bereits ausgeblendet, hier nur noch das
	   Padding an die reine Icon-Groesse anpassen. */
	.a11y-btn {
		padding: 8px;
		gap: 0;
	}

	.news-secondary { grid-template-columns: 1fr; }
	.quicks { grid-template-columns: 1fr; }
	.facts dl { grid-template-columns: 1fr 1fr; gap: 16px; }
	.contact-grid { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr; gap: 24px; }
	.termine-list li {
		grid-template-columns: 56px 1fr;
		gap: 12px;
		padding: 12px 16px;
	}
	.t-tag { grid-column: 2; justify-self: start; margin-top: 4px; }

	.date { padding-right: 10px; }
	.date .d { font-size: 22px; }
	.date .m { font-size: 10px; margin-top: 2px; }

	/* Mobil: horizontales Scroll-Snap statt gequetschter Spalten --
	   funktioniert unabhaengig davon, wie viele Siegel es sind. */
	.seals-row {
		grid-template-columns: none;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		/* Sichtbarer Scrollbalken sieht in der Desktop-Ansichtssimulation wie
		   eine zweite, "kaputte" Scrollbar aus -- die Pfeil-Buttons unten
		   uebernehmen die sichtbare Bedienung, Wischen/Tastatur funktionieren
		   weiterhin ganz normal. */
		scrollbar-width: none;
	}

	.seals-row::-webkit-scrollbar {
		display: none;
	}

	.seals-nav {
		display: flex;
	}

	.seals-row li {
		scroll-snap-align: start;
		flex: 0 0 auto;
		width: 72vw;
		max-width: 260px;
	}

	.gsw-mobile-nav { display: block; }

	/* Sticky-Header auf mobil deaktivieren */
	.masthead { position: static; }

	/* Mobil: Hero-Header immer kompakt */
	.masthead--hero .masthead-row { padding-block: 10px; }
	.masthead--hero .brand__logo  { height: 36px; }
}

@media (max-width: 540px) {
	.tile.t-2, .tile.t-3, .tile.t-4, .tile.t-5, .tile.t-6 {
		grid-column: span 12;
		aspect-ratio: 16 / 10;
	}
}

/* ====================================================================
   GSW Section System
   ==================================================================== */

.gsw-section {
	padding-block: clamp(28px, 3.5vw, 48px);
}

/* -- Farbvarianten -- */
.gsw-section--paper   { background: var(--paper); }

.gsw-section--neutral {
	background: var(--neutral);
	border-block: 1px solid var(--line);
}

.gsw-section--yellow {
	background: linear-gradient(180deg, var(--yellow-warm) 0%, var(--yellow-pale) 100%);
	border-block: 1px solid var(--line-2);
}

.gsw-section--red {
	background: var(--red);
	color: #fff;
}
.gsw-section--red .eyebrow              { color: rgba(255,255,255,.85); } /* .72 ergab nur 3.86:1 statt der geforderten 4.5:1 (WCAG 1.4.3) */
.gsw-section--red .eyebrow::before      { background: rgba(255,255,255,.45); }

.gsw-section--dark {
	background: var(--ink);
	color: var(--paper);
}
.gsw-section--dark .eyebrow        { color: var(--ink-3); }
.gsw-section--dark .eyebrow::before { background: var(--ink-3); }

/* Dark-Mode-Adjustments */
body.dark .gsw-section--paper   { background: var(--paper); }
body.dark .gsw-section--neutral { background: var(--neutral); }
body.dark .gsw-section--yellow  {
	background: linear-gradient(180deg, var(--yellow-warm) 0%, var(--yellow-pale) 100%);
}

/* -- Grid-Helfer -- */
.gsw-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.gsw-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 36px);
}

.gsw-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

/* ====================================================================
   gsw-card: Abschnitte als Karten mit farbiger Oberkante
   ==================================================================== */

/* Base: border-radius + clip */
.gsw-card {
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* Helle Karten — voller Rahmen + farbige Oberkante */
.gsw-section--paper.gsw-card {
	border: 1px solid var(--line);
	border-top: 4px solid var(--ink);
}

.gsw-section--neutral.gsw-card {
	border: 1px solid var(--line);
	border-top: 4px solid var(--yellow);
}

/* Gelbe Sektion (seals): ::before übernimmt bereits den farbigen Streifen */
/* .gsw-card gibt nur border-radius + overflow:hidden dazu */

/* Dunkle Sektionen — CI-Gelb als Kontrast-Akzent */
.gsw-section--dark.gsw-card,
.strip.gsw-card {
	border-top: 4px solid var(--yellow);
}

/* Rote Sektion — CI-Gelb als Oberkante */
.gsw-section--red.gsw-card {
	border-top: 4px solid var(--yellow);
}

body.dark .gsw-section--paper.gsw-card   { border-color: var(--line); }
body.dark .gsw-section--neutral.gsw-card { border-color: var(--line); }

/* ====================================================================
   Hero Footer: sekundäre Beiträge + Terminspalte
   ==================================================================== */

.hero-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--line);
	align-items: start;
}

.hero-footer__news { min-width: 0; }

/* ====================================================================
   Events Sidebar
   ==================================================================== */

.events-sidebar {
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 20px 20px;
}

body.dark .events-sidebar {
	background: var(--paper-2);
	border-color: var(--line);
}

.events-sidebar__head {
	margin-bottom: 14px;
}

.events-sidebar__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.events-sidebar__item {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}

.events-sidebar__item:last-child { border-bottom: 0; }

.events-sidebar__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--ink-3);
	padding-top: 2px;
}

.events-sidebar__date b {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
}

.events-sidebar__date span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 2px;
}

.events-sidebar__item.is-today .events-sidebar__date b,
.events-sidebar__item.is-today .events-sidebar__date span {
	color: var(--red);
}

.events-sidebar__title {
	font-size: var(--text-xs);
	line-height: 1.4;
	color: var(--ink);
	font-weight: 500;
}

.events-sidebar__today {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--red);
	background: var(--red-soft);
	border-radius: var(--r-sm);
	padding: 1px 5px;
	margin-bottom: 3px;
}

.events-sidebar__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 1px;
	transition: color var(--transition-fast);
}

.events-sidebar__more:hover { color: var(--red); }

.events-sidebar__more .gsw-icon {
	width: 14px;
	height: 14px;
}

/* -- Responsive -- */
@media (max-width: 1180px) {
	.hero-footer { grid-template-columns: 1fr; }
	.gsw-grid-2,
	.gsw-grid-3 { grid-template-columns: 1fr 1fr; }
	.gsw-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.hero-footer { grid-template-columns: 1fr; }
	.gsw-grid-2,
	.gsw-grid-3,
	.gsw-grid-5 { grid-template-columns: 1fr; }
}

/* ====================================================================
   Section-spezifische Overrides für das gsw-section-System
   ==================================================================== */

/* Profil: eigenes paper-2 durch system-neutral ersetzen */
.profil.gsw-section--neutral {
	background: var(--neutral);
}

/* ---- Schnellzugriffe auf CI-Rot ---- */
.quicks-section.gsw-section--red {
	background: var(--red);
	border-color: transparent;
}

.quicks-section.gsw-section--red .section-head h2   { color: #fff; }
.quicks-section.gsw-section--red .section-head .sub  { color: rgba(255,255,255,.82); }
.quicks-section.gsw-section--red .eyebrow            { color: rgba(255,255,255,.85); } /* .72 ergab nur 3.86:1 statt der geforderten 4.5:1 (WCAG 1.4.3) */
.quicks-section.gsw-section--red .eyebrow::before    { background: rgba(255,255,255,.45); }

/* Karten auf Rot: weißer Hintergrund */
.quicks-section.gsw-section--red .quick {
	background: var(--paper);
	border-color: transparent;
	color: var(--ink);
}

/* Akzent-Karte: Gelb statt Rot (wäre auf rotem Grund unsichtbar) */
.quicks-section.gsw-section--red .quick--accent {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--ink);
}
.quicks-section.gsw-section--red .quick--accent .qs           { color: var(--ink-2); }
.quicks-section.gsw-section--red .quick--accent .label        { color: var(--ink-2); }
.quicks-section.gsw-section--red .quick--accent .label::before { background: var(--ink-2); }
.quicks-section.gsw-section--red .quick--accent .arrow        { color: var(--ink-3); }
.quicks-section.gsw-section--red .quick--accent::after        { background: rgba(0,0,0,.06); }
.quicks-section.gsw-section--red .quick--accent:hover         { background: #d4c740; border-color: #d4c740; }

body.dark .quicks-section.gsw-section--red                 { background: #8a0f11; }
body.dark .quicks-section.gsw-section--red .quick          { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.1); color: var(--paper); }
body.dark .quicks-section.gsw-section--red .quick--accent  { background: var(--yellow); color: var(--ink); }

/* ---- Service-Abschluss auf Dunkel ---- */
.service-end.gsw-section--dark {
	background: var(--ink);
	border-top-color: transparent;
	color: var(--paper);
}

/* var(--ink-3) ist fuer den seitenweiten Dunkel-Toggle (body.dark) gedacht
   und zeigt im Normalmodus auf einen HELLEN Grauton (#6b685c) -- gegen den
   fest-dunklen Hintergrund dieser Sektion faellt der Kontrast dadurch auf
   ca. 3:1 (WCAG-Minimum: 4,5:1). Fester Wert #9a9582 (identisch mit dem
   Dunkel-Toggle-Ink-3) behebt das unabhaengig vom Toggle-Status --
   gemessen ca. 5,3:1 auf allen vier Kontaktkarten-Hintergruenden. */
.service-end.gsw-section--dark h2               { color: var(--paper); }
.service-end.gsw-section--dark .lede            { color: #9a9582; }
.service-end.gsw-section--dark .eyebrow         { color: #9a9582; }
.service-end.gsw-section--dark .eyebrow::before { background: var(--yellow); }

/* Kontaktkarten auf dunklem Grund -- bewusst feste rgba-Werte statt
   var(--paper-2)/var(--ink), da diese Tokens fuer den SEITENWEITEN
   Dunkel-Toggle (body.dark) gedacht sind und im Normalmodus auf ihre
   HELLEN Werte zeigen. .service-end.gsw-section--dark soll aber immer
   dunkel wirken, unabhaengig vom Toggle -- dasselbe Muster wie bei
   --red/--warm zwei Zeilen weiter unten. */
.service-end.gsw-section--dark .contact-card {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.16);
	color: var(--paper);
}

.service-end.gsw-section--dark .contact-card h3  { color: #9a9582; }
.service-end.gsw-section--dark .contact-card .big { color: var(--paper); }
.service-end.gsw-section--dark .contact-card .meta { color: #9a9582; }
.service-end.gsw-section--dark .contact-card .meta a { color: var(--yellow); }
.service-end.gsw-section--dark .contact-card .meta a:hover { color: #fff; }
.service-end.gsw-section--dark .contact-card .big a { color: var(--paper); }

.service-end.gsw-section--dark .contact-card--red {
	background: rgba(188,24,26,.18);
	border-color: rgba(188,24,26,.32);
}

.service-end.gsw-section--dark .contact-card--warm {
	background: rgba(236,219,83,.1);
	border-color: rgba(236,219,83,.22);
}

/* Router-Chips auf dunklem Grund */
.service-end.gsw-section--dark .gsw-router__label { color: rgba(255,255,255,.45); }
.service-end.gsw-section--dark .gsw-router__chip { color: rgba(255,255,255,.55); }
.service-end.gsw-section--dark .gsw-router__chip:hover { color: var(--yellow); }
.service-end.gsw-section--dark .gsw-router__chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.service-end.gsw-section--dark .gsw-router__chip:focus-visible { outline-color: var(--yellow); }

/* ====================================================================
   Barrierefreiheitserklärung [barrierefreiheit]
   ==================================================================== */

.gsw-a11y__intro,
.gsw-legal__intro {
	font-size: var(--text-base);
	color: var(--ink-2);
	margin-bottom: clamp(24px, 3vw, 36px);
}

.gsw-a11y__section,
.gsw-legal__section {
	margin-bottom: clamp(28px, 3.5vw, 44px);
	padding-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--line);
}

.gsw-a11y__section:last-child,
.gsw-legal__section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.gsw-a11y__list,
.gsw-legal__list {
	margin: 12px 0 16px 0;
	padding-left: 1.4em;
}

.gsw-a11y__list li,
.gsw-legal__list li {
	margin-bottom: 12px;
	line-height: 1.6;
}

.gsw-a11y__meta,
.gsw-legal__meta {
	margin: 12px 0 0;
	display: grid;
	grid-template-columns: max-content auto;
	gap: 4px 20px;
}

.gsw-a11y__meta dt,
.gsw-legal__meta dt {
	font-weight: 600;
	color: var(--ink-2);
}

.gsw-a11y__meta dd,
.gsw-legal__meta dd {
	margin: 0;
}

.gsw-a11y__address,
.gsw-legal__address {
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 20px;
	font-style: normal;
	line-height: 1.7;
	margin: 12px 0 16px;
	display: block;
}

.gsw-a11y__address a,
.gsw-legal__address a {
	color: var(--red-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gsw-a11y__hint,
.gsw-legal__hint {
	font-size: 14px;
	color: var(--ink-3);
	margin-top: 8px;
}

/* ====================================================================
   FAQ-Seite [faq]
   ==================================================================== */

.gsw-faq {
	max-width: 72ch;
}

.gsw-faq__intro {
	font-size: var(--text-base);
	color: var(--ink-2);
	margin-bottom: clamp(28px, 3.5vw, 44px);
	line-height: 1.65;
}

.gsw-faq__group {
	margin-bottom: clamp(36px, 4.5vw, 56px);
}

.gsw-faq__group-title {
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--red);
}

.gsw-faq__item {
	border-bottom: 1px solid var(--line);
}

.gsw-faq__item:first-of-type {
	border-top: 1px solid var(--line);
}

.gsw-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	user-select: none;
	transition: color 140ms var(--ease);
}

/* Standardmäßiges Dreieck-Marker ausblenden */
.gsw-faq__question::-webkit-details-marker { display: none; }
.gsw-faq__question::marker { display: none; }

.gsw-faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--red);
	transition: transform 200ms var(--ease);
}

.gsw-faq__item[open] .gsw-faq__icon {
	transform: rotate(180deg);
}

.gsw-faq__question:hover {
	color: var(--red);
}

.gsw-faq__question:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 2px;
}

.gsw-faq__answer {
	padding: 0 28px 20px 0;
	color: var(--ink-2);
	font-size: var(--text-sm);
	line-height: 1.75;
}

.gsw-faq__answer p {
	margin: 0 0 8px;
}

.gsw-faq__answer p:last-child { margin-bottom: 0; }

.gsw-faq__answer a {
	color: var(--ink);
	border-bottom: 1.5px solid var(--red);
	text-decoration: none;
	padding-bottom: 1px;
}

.gsw-faq__answer a:hover { color: var(--red-deep); }

/* ====================================================================
   Hero-Row: 3-Spalten-Top-Layout (3fr 1fr 1fr)
   ==================================================================== */

.gsw-top-row {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
	column-gap: 12px;
	align-items: start;
}

/* .wrap: max-width entfernen — .site-main setzt den äußeren Rahmen */
.gsw-top-row.wrap {
	max-width: none;
}

/* padding: 0 überschreibt das alte .news-hero { padding-top: clamp(...) } */
.news-hero,
.events-col,
.contact-col {
	padding: 0;
}

/* Einheitliche Kopfzone: Eyebrow (+ optional Titel) */
.card-head-zone {
	padding: 10px clamp(18px, 2.2vw, 24px) 10px;
}

/* Einheitliche Inhaltszone: füllt die verbleibende Kartenhöhe */
.card-body-zone {
	display: flex;
	flex-direction: column;
	padding: 10px clamp(18px, 2.2vw, 24px) clamp(14px, 1.8vw, 18px);
	min-height: 0;
}

/* News-Kopf: Eyebrow + Link nebeneinander (nur in der News-Karte) */
.news-hero-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 0;
	padding-bottom: 0;
	flex-wrap: nowrap;
}

.news-hero-head .link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
	white-space: nowrap;
	padding-block: 8px; /* Touch-Target WCAG 2.5.8 */
}

.news-hero-head .link:hover { color: var(--red); }

.news-hero-head .link .gsw-icon {
	width: 14px;
	height: 14px;
}

/* Featured article */
.hero-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
	align-items: start;
}

.hero-feature .media {
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--neutral);
}

.hero-feature .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-feature .meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.hero-feature .cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--red-soft);
	color: var(--red-deep);
	padding: 3px 8px;
	border-radius: var(--r-sm);
}

.hero-feature time {
	font-size: 12px;
	color: var(--ink-3);
}

/* Spezifität 020 — schlägt die ältere .hero-feature .hero-title-Regel (020),
 * da diese Regel später im File steht. */
.news-hero .hero-title {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.3;
	margin: 0 0 10px;
	font-weight: 600;
}

.news-hero .hero-title a {
	color: var(--ink);
	text-decoration: none;
	background-image: none;
}

.news-hero .hero-title a:hover { color: var(--red-deep); }

.news-hero .hero-feature .teaser {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0 0 16px;
	max-width: none;
}

.hero-btns {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Secondary posts row */
.news-secondary--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}

.news-item--compact {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 10px;
	align-items: start;
}

.news-item--compact .media {
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--neutral);
}

.news-item--compact .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.news-item--compact .body { min-width: 0; }

.news-item--compact .meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.news-item--compact .cat--neutral {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--neutral);
	color: var(--ink-2);
	padding: 2px 6px;
	border-radius: var(--r-sm);
}

.news-item--compact time {
	font-size: 11px;
	color: var(--ink-3);
}

.news-item--compact h3 {
	font-size: var(--text-xs);
	line-height: 1.35;
	margin: 0 0 4px;
}

.news-item--compact h3 a {
	color: var(--ink);
	text-decoration: none;
}

.news-item--compact h3 a:hover { color: var(--red-deep); }

.news-item--compact p {
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.45;
	margin: 0;
}

/* ---- Mini-Karten (Termine + Kontakt) ---- */

.mini-card-title {
	font-size: clamp(1.1rem, 1.8vw, 1.45rem);
	line-height: 1.2;
	margin: 4px 0 16px;
}

.mini-card-text {
	font-size: var(--text-xs);
	color: var(--ink-2);
	line-height: 1.5;
	margin: 0 0 16px;
}

/* margin-top: auto schiebt den Divider (+ Links) auf den Boden der card-body-zone */
.mini-card-divider {
	margin-top: auto;
	margin-bottom: 12px;
	border: 0;
	border-top: 1px solid var(--line);
	padding-top: 0;
}

.mini-card-phone {
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 6px;
}

.mini-card-phone a {
	color: var(--ink);
	text-decoration: none;
}

.mini-card-phone a:hover { color: var(--red-deep); }

.mini-card-hours {
	font-size: 12px;
	color: var(--ink-3);
	margin-top: 4px;
	margin-bottom: 12px;
}

.mini-card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
	padding-block: 8px; /* Touch-Target WCAG 2.5.8 */
}

.mini-card-link:hover { color: var(--red); }

.mini-card-link .gsw-icon {
	width: 14px;
	height: 14px;
}

/* Kalender-Link im Events-Body: nach unten schieben */
.events-col .card-body-zone .mini-card-link {
	margin-top: auto;
	padding-top: 8px;
}

.mini-card-link--sub {
	font-weight: 500;
	color: var(--ink-2);
	margin-top: 6px;
}

.mini-card-link--sub:hover { color: var(--ink); }

.eyebrow--sub {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ink-3);
	margin-bottom: 2px;
}

/* ---- Events-Liste (gruppiert nach Tag) ---- */

.mini-events-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	flex: 1;
}

.mini-event-group {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	align-items: start;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

.mini-event-group:last-child { border-bottom: 0; }

/* Datum-Kreis */
.mini-event__date {
	display: flex;
	justify-content: center;
	padding-top: 1px;
}

.mini-event__date b {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base);
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 3px 10px rgba(188, 24, 26, .32);
	flex: none;
}

/* Monats-Überschrift */
.mini-month-heading {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .10em;
	color: var(--red);
	padding: 10px 0 3px;
	display: block;
}

.mini-month-heading--first {
	padding-top: 0;
}

/* Text-Block */
.mini-event__body {
	display: flex;
	flex-direction: column;
	padding-top: 1px;
}

.mini-event__title {
	font-size: var(--text-sm);
	line-height: 1.3;
	color: var(--ink);
	font-weight: 500;
}

.mini-event__title + .mini-event__title {
	margin-top: 6px;
}

/* Heute */
.mini-event-group.is-today .mini-event__date b {
	background: var(--red-deep);
	box-shadow: 0 4px 14px rgba(140, 20, 20, .5);
}

/* Dark-Mode */
body.dark .mini-event__date b {
	box-shadow: 0 3px 10px rgba(188, 24, 26, .5);
}

body.dark .mini-event__title { color: rgba(255,255,255,.85); }

/* ====================================================================
   Profilklassen-Spalte (ersetzt Kontakt-Spalte)
   ==================================================================== */

/* ---- Aufführungs-Countdown ---- */

.profiles-countdown {
	background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
	color: #fff;
	border-radius: var(--r-sm);
	padding: 12px 14px;
	margin-bottom: 14px;
	text-align: center;
	flex: none;
}

.profiles-countdown__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: 8px;
	line-height: 1.3;
}

.profiles-countdown__timer {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
}

.profiles-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 34px;
}

.profiles-countdown__unit b {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
}

.profiles-countdown__unit small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .72;
	margin-top: 2px;
}

.profiles-countdown__sep {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 400;
	opacity: .5;
	line-height: 1;
	padding-bottom: 14px;
}

/* ---- Profil-Kacheln ---- */

.profiles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	flex: 1;
	align-content: start;
}

.profile-tile {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--ink);
	text-align: left;
	position: relative;
	overflow: hidden;
	transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.profile-tile:hover {
	background: var(--yellow-pale);
	border-color: var(--yellow);
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
	color: var(--ink);
}

.profile-tile::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ease);
}

.profile-tile:hover::before {
	transform: scaleX(1);
}

.profile-tile__icon {
	width: 42px;
	height: 42px;
	background: var(--yellow-pale);
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	flex: none;
	color: var(--red-deep);
	transition: background .18s var(--ease);
}

.profile-tile:hover .profile-tile__icon {
	background: var(--yellow);
}

.profile-tile__icon svg {
	width: 22px;
	height: 22px;
}

.profile-tile__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.profile-tile__label {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.profile-tile__sub {
	font-size: 11px;
	color: var(--ink-3);
	line-height: 1.3;
}

/* Dark mode */
body.dark .profile-tile { background: var(--neutral); }
body.dark .profile-tile:hover { background: var(--warm); border-color: var(--line-2); }
body.dark .profile-tile__icon { background: var(--warm); }
body.dark .profile-tile:hover .profile-tile__icon { background: var(--yellow-warm); }

/* Profiles-col: Link ans Ende schieben */
.profiles-col .card-body-zone .mini-card-link {
	margin-top: auto;
	padding-top: 8px;
}

/* ---- Countdown im Terminkalender ---- */

.events-countdown {
	background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
	color: #fff;
	border-radius: var(--r-sm);
	padding: 10px 12px 11px;
	margin-bottom: 12px;
	flex: none;
}

.events-countdown__label {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 2px;
}

.events-countdown__title {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 8px;
}

.events-countdown__timer {
	display: flex;
	align-items: flex-end;
	gap: 3px;
}

.events-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 30px;
}

.events-countdown__unit b {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
}

.events-countdown__unit small {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
	margin-top: 2px;
}

.events-countdown__sep {
	font-family: var(--serif);
	font-size: var(--text-sm);
	font-weight: 400;
	opacity: .45;
	margin-bottom: 5px;
}

/* ---- Schulentwicklungs-Spalte ---- */

.se-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.se-item__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--ink);
	position: relative;
	overflow: hidden;
	transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

.se-item--link .se-item__inner:hover {
	background: var(--neutral);
	border-color: var(--red-light, #e8a0a0);
	transform: translateY(-1px);
	box-shadow: var(--sh-1);
}

.se-item__icon {
	width: 38px;
	height: 38px;
	background: var(--yellow-pale);
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	flex: none;
	color: var(--red-deep);
	transition: background .18s var(--ease);
}

.se-item__icon svg { width: 20px; height: 20px; }

.se-item--link .se-item__inner:hover .se-item__icon { background: var(--yellow); }

.se-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.se-item__label {
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.se-item__sub {
	font-size: 10.5px;
	color: var(--ink-3);
	line-height: 1.3;
}

/* Dark mode */
body.dark .se-item__inner { background: var(--neutral); }
body.dark .se-item--link .se-item__inner:hover { background: var(--warm); border-color: var(--line-2); }
body.dark .se-item__icon { background: var(--warm); }
body.dark .se-item--link .se-item__inner:hover .se-item__icon { background: var(--yellow-warm); }

/* Schulentwicklung: Link ans Ende schieben */
.schulentwicklung-col .card-body-zone {
	display: flex;
	flex-direction: column;
}

.schulentwicklung-col .card-body-zone .mini-card-link {
	margin-top: auto;
	padding-top: 8px;
}

/* ---- Masonry-Galerie (Beitrags-Galerie) ---- */

.gsw-masonry-gallery {
	columns: 3;
	column-gap: 8px;
	margin: 32px 0 0;
}

.gsw-masonry-gallery__item {
	display: block;
	break-inside: avoid;
	margin-bottom: 8px;
	border-radius: var(--r-sm);
	overflow: hidden;
	line-height: 0;
}

.gsw-masonry-gallery__item img {
	width: 100%;
	display: block;
	transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.gsw-masonry-gallery__item:hover img {
	transform: scale(1.04);
	opacity: .92;
}

@media (max-width: 680px) {
	.gsw-masonry-gallery { columns: 2; }
}

/* ---- Responsive: Hero-Row ---- */

@media (max-width: 1100px) {
	/* News-Hero volle Breite, Subgrid-Span zurücksetzen */
	.gsw-top-row {
		grid-template-columns: 1fr 1fr;
	}

	.news-hero {
		grid-column: 1 / -1;
	}

	.news-hero .card-head-zone,
	.news-hero .card-body-zone {
		padding-inline: clamp(20px, 2.5vw, 28px);
	}

	.news-hero .card-head-zone { padding-block: 10px 10px; }
	.news-hero .card-body-zone { padding-block: 0 clamp(16px, 2vw, 20px); }

	.hero-feature {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

@media (max-width: 780px) {
	.gsw-top-row {
		grid-template-columns: 1fr;
		/* Nur column-gap war je gesetzt -- ohne row-gap stossen die
		   gestapelten Karten (Aktuelles/Termine/Schulleitung) direkt
		   aneinander. */
		row-gap: 20px;
	}

	.hero-feature {
		grid-template-columns: 1fr;
	}

	/* Termine-Karte: auf Mobile nimmt sie die volle Breite ein statt nur
	   1/5 wie auf Desktop -- Datumskreise und Schrift wirken dadurch
	   unverhaeltnismaessig gross, deshalb kompaktere Werte. */
	.mini-event-group {
		grid-template-columns: 34px 1fr;
		gap: 10px;
		padding: 8px 0;
	}

	.mini-event__date b {
		width: 30px;
		height: 30px;
		font-size: var(--text-sm);
	}

	.mini-month-heading {
		font-size: 10px;
		padding: 8px 0 2px;
	}

	.mini-event__title {
		font-size: 13px;
	}

	.news-secondary--row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.news-item--compact {
		grid-template-columns: 56px 1fr;
		gap: 8px;
	}
}

/* ====================================================================
   Kontakt-Seite
   ==================================================================== */

.gsw-contact {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
}

.gsw-contact__notice {
	padding: 14px 20px;
	border-radius: var(--r-md);
	margin-bottom: 32px;
	font-size: var(--text-sm);
	line-height: 1.5;
}

.gsw-contact__notice--success {
	background: #eef7ee;
	border: 1px solid #87c987;
	color: #1a4d1a;
}

.gsw-contact__notice--error {
	background: #fdf2f2;
	border: 1px solid #e8a0a0;
	color: #6b1a1a;
}

.gsw-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.gsw-contact__section-title {
	font-family: var(--serif);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--red);
}

/* Adresskarte */
.gsw-contact__address-card {
	background: var(--paper);
	border: 1px solid var(--line, #e8e3d5);
	border-radius: var(--r-md);
	padding: 24px;
	margin-bottom: 32px;
}

.gsw-contact__address {
	font-style: normal;
	line-height: 1.7;
	margin-bottom: 20px;
}

.gsw-contact__reach-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gsw-contact__reach-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: var(--text-sm);
}

.gsw-contact__reach-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-3, #7a7060);
	white-space: nowrap;
	min-width: 52px;
}

.gsw-contact__reach-list a {
	color: var(--red);
	text-decoration: none;
}

.gsw-contact__reach-list a:hover,
.gsw-contact__reach-list a:focus-visible {
	text-decoration: underline;
}

/* Karteneinbettung (OpenStreetMap) — 2-Klick-Consent, siehe .gsw-map-consent unten */
.gsw-map-consent {
	position: relative;
	padding-bottom: 60%;
	height: 0;
	overflow: hidden;
	border-radius: var(--r-md);
	border: 1px solid var(--line, #e8e3d5);
}

.gsw-map-consent iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gsw-map-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	background: var(--paper-2);
	text-align: center;
}

.gsw-map-icon { flex-shrink: 0; }

.gsw-map-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.gsw-map-notice {
	font-size: .78rem;
	color: var(--ink-3);
	max-width: 380px;
	margin: 0;
	line-height: 1.5;
}

.gsw-map-load-btn {
	padding: 10px 24px;
	background: var(--red);
	color: #fff;
	border: none;
	border-radius: var(--r-btn);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 160ms;
}

.gsw-map-load-btn:hover { background: var(--red-deep); }
.gsw-map-load-btn:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

body.dark .gsw-map-placeholder { background: rgba(255,255,255,.03); }

.gsw-contact__map-link {
	margin: 8px 0 0;
	font-size: var(--text-xs);
}

.gsw-contact__map-link a {
	color: var(--ink-3, #7a7060);
	text-decoration: underline;
}

/* Kontaktformular */
.gsw-contact__form-wrap {
	background: var(--paper);
	border: 1px solid var(--line, #e8e3d5);
	border-radius: var(--r-md);
	padding: 28px;
}

.gsw-contact__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.gsw-contact__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.gsw-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gsw-contact__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.gsw-contact__required {
	color: var(--red);
	margin-left: 2px;
}

.gsw-contact__input,
.gsw-contact__textarea {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line, #e8e3d5);
	border-radius: var(--r-btn);
	transition: border-color 150ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.gsw-contact__input:focus,
.gsw-contact__textarea:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: var(--sh-focus-red);
}

.gsw-contact__textarea {
	resize: vertical;
	min-height: 140px;
}

.gsw-contact__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

.gsw-contact__checkbox {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin-top: 1px;
	accent-color: var(--red);
	cursor: pointer;
	border-radius: 3px;
}

.gsw-contact__checkbox-label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
}

.gsw-contact__checkbox-label a {
	color: var(--red);
}

.gsw-contact__required-note {
	font-size: 12px;
	color: var(--ink-3, #7a7060);
	margin: -4px 0 0;
}

.gsw-contact__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 13px 28px;
	background: var(--red);
	color: #fff;
	font-family: var(--sans);
	font-size: var(--text-sm);
	font-weight: 600;
	border: none;
	border-radius: var(--r-btn);
	cursor: pointer;
	transition: background-color 160ms ease;
	min-height: 44px;
}

.gsw-contact__submit:hover,
.gsw-contact__submit:focus-visible {
	background: var( --red-deep );
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

/* Responsive */
@media (max-width: 860px) {
	.gsw-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.gsw-contact__form-wrap {
		padding: 20px 16px;
	}

	.gsw-contact__address-card {
		padding: 16px;
	}
}

/* ====================================================================
   Anmeldungs-Seiten (template-parts/pages/anmeldung.php)
   ==================================================================== */

.gsw-admission {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
}

.gsw-admission__header-image {
	margin-bottom: 28px;
	border-radius: var(--r-md);
	overflow: hidden;
}

.gsw-admission__header-image img {
	display: block;
	width: 100%;
	height: auto;
}

.gsw-admission__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 16px;
	line-height: 1.7;
}

.gsw-admission__intro {
	font-size: var(--text-base);
}

.gsw-admission__section-title {
	font-family: var(--serif);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	color: var(--ink);
	margin: 10px 0 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--red);
}

.gsw-admission__reminder {
	background: var(--neutral);
	border-radius: var(--r-md);
	padding: 14px 18px;
}

.gsw-admission__dates {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsw-admission__dates li {
	background: var(--paper);
	border: 1px solid var(--line, #e8e3d5);
	border-radius: var(--r-md);
	padding: 12px 16px;
	font-weight: 600;
}

.gsw-admission__status {
	border-radius: var(--r-md);
	padding: 16px 20px;
	font-weight: 700;
	border: 1px solid;
}

.gsw-admission__status--closed {
	background: #fdf2f2;
	border-color: #e8a0a0;
	color: #6b1a1a;
}

.gsw-admission__status--open {
	background: #eef7ee;
	border-color: #87c987;
	color: #1a4d1a;
}

.gsw-admission__doc-list,
.gsw-admission__contact-list {
	list-style: disc;
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsw-admission__doc-list a {
	color: var(--red);
}

.gsw-admission__doc-list a:hover,
.gsw-admission__doc-list a:focus-visible {
	text-decoration: underline;
}

.gsw-admission__contact-list li {
	display: flex;
	flex-direction: column;
}

.gsw-admission__contact-list span {
	font-size: 14px;
	color: var(--ink-3, #7a7060);
}

.gsw-admission__signature {
	margin-top: 12px;
	font-weight: 600;
}

/* ====================================================================
   Downloads-Karten (z. B. Nutzungsvereinbarung Schul-IT) -- vorher als
   Inline-<style> im Seiteninhalt, ins Theme-CSS umgezogen (Audit-Punkt 5,
   current-state.md 2026-08-14).
   ==================================================================== */

.gsw-downloads {
	max-width: 980px;
	margin: 0 auto 2rem;
}

.gsw-downloads h2 {
	margin-top: 0;
}

.doc-grid {
	display: grid;
	gap: 1rem;
	padding: 0;
	margin: 1rem 0 0;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none;
}

.doc-card {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.doc-card__body {
	padding: 1rem 1rem 0;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: .75rem;
	align-items: start;
}

.doc-card__icon {
	font-size: 1.75rem;
	line-height: 1;
}

.doc-card__title {
	font-size: 1rem;
	margin: 0 0 .25rem;
}

.doc-card__meta {
	margin: 0 0 .5rem;
	color: var(--ink-3);
	font-size: .9rem;
}

.doc-card__actions {
	display: flex;
	gap: .5rem;
	padding: 0 1rem 1rem;
	flex-wrap: wrap;
}

/* Gleiche Farbsprache wie .btn-primary/.btn-ghost (siehe oben), aber
   kompaktere Masse fuer die dichte Karten-Actions-Zeile beibehalten. */
.doc-card .btn {
	display: inline-block;
	padding: .55rem .9rem;
	border-radius: var(--r-md);
	text-decoration: none;
	line-height: 1;
	border: 1px solid transparent;
	min-height: 44px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
}

.doc-card .btn--primary {
	background: var(--ink);
	color: var(--paper);
}

.doc-card .btn--primary:hover,
.doc-card .btn--primary:focus-visible {
	background: var(--red-deep);
	color: #fff;
}

.doc-card .btn--ghost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line-2);
}

.doc-card .btn--ghost:hover,
.doc-card .btn--ghost:focus-visible {
	background: var(--neutral);
}

.dl-hint {
	margin-top: 1rem;
	color: var(--ink-2);
	font-size: .95rem;
}

/* ====================================================================
   Auszeichnungen-Uebersicht (template-parts/pages/auszeichnungen.php)
   ==================================================================== */

.gsw-auszeichnungen {
	padding-block: clamp(8px, 1.5vw, 16px) clamp(24px, 4vw, 48px);
}

.gsw-auszeichnungen__intro {
	max-width: 72ch;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 clamp(24px, 3vw, 36px);
}

/* Volle Wrap-Breite, unabhaengig von der Anzahl Siegel */
.gsw-auszeichnungen__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.gsw-auszeichnungen__row li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 26px 16px 22px;
	border-radius: var(--r-md);
	background: var(--paper);
	border: 1px solid var(--line);
	box-shadow: var(--sh-2);
	transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.gsw-auszeichnungen__row li:has(.seal-link):hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-3);
	border-color: var(--line-2);
}

.gsw-auszeichnungen__more {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--red);
}

/* Mobil: Siegel untereinander (vertikale Liste) statt horizontalem
   Scroll-Karussell -- Nutzer-Vorgabe. Vorherige Fassung nutzte ein
   horizontales Scroll-Snap-Karussell (funktionierte technisch, wurde aber
   ausdruecklich nicht gewuenscht) und griff zudem nur bis 640px, obwohl
   .gsw-page__layout (der umgebende Grid-Container) erst ab 900px auf eine
   Spalte umschaltet -- im Bereich 641-900px waere das alte Karussell
   dadurch ohnehin in einer zu schmalen Spalte gequetscht gewesen. */
@media (max-width: 900px) {
	.gsw-auszeichnungen__row {
		display: flex;
		flex-direction: column;
	}

	.gsw-auszeichnungen__row li {
		width: 100%;
	}
}

/* ====================================================================
   Seiten-Layout (page.php) — Unterseiten ohne Sidebar
   ==================================================================== */

.gsw-page__header {
	background: var(--neutral);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(28px, 4vw, 52px) clamp(24px, 3vw, 40px);
	position: relative;
	overflow: visible;
	isolation: isolate;
}

/* Dreifarbiger Akzentstreifen oben (CI-Farben) */
.gsw-page__header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--red) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--red) 66.6% 100%);
	z-index: 2;
}

/* Vollflaechiger Hintergrund bricht aus der von GeneratePress boxed
   Content-Spalte aus (die eigene Hauptnavigation ist aus demselben Grund
   schon immer randlos, siehe current-state.md 2026-08-18) -- reiner
   Hintergrund-Trick per ::after, Titel/Breadcrumb bleiben unveraendert an
   ihrer zur Textspalte ausgerichteten Position. overflow:visible oben
   dafuer noetig; Beitragsbild bleibt trotzdem exakt im eigenen Kasten
   (kein Ueberlauf), da .gsw-page__header-media/img per inset:0 und
   object-fit:cover schon von sich aus nicht groesser als ihr eigener
   Container werden -- mit echtem Foto gegengeprueft. */
.gsw-page__header::after {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--neutral);
	z-index: -1;
}

/* Beitragsbild großflächig im Header, falls gesetzt (page.php prüft
   has_post_thumbnail()). Dunkles Ink-Overlay bei 70% Deckkraft (heller
   Schrift-Text) statt der vorherigen hellen Variante -- Wechsel vom
   2026-08-17-Umbau (Claude-Design-Layout), wirkungsvollere, typischere
   Hero-Bild-Aesthetik. 70% ist rechnerisch hergeleitet: Minimum fuer
   4,5:1 (Paper-Text auf reinweissem Foto, der ungünstigste Fall) liegt
   bei 59,5% -- 70% ist der produktive Wert mit Sicherheitsmarge.
   Ergebnis nachgerechnet: 6,53:1 auf reinweiss, 18,42:1 auf reinschwarz,
   beides AA-sicher unabhaengig vom hochgeladenen Foto. */
.gsw-page__header--has-image {
	padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px);
}

/* Beitragsbild bricht wie der Hintergrund randlos aus (Update 2026-08-18)
   -- dieselbe ::after-Ausbruchstechnik, hier direkt auf dem Bild-Container
   statt auf einem Pseudo-Element, top/bottom bleiben an .gsw-page__header
   verankert (inset:0 dafuer aufgeteilt in einzelne Kanten). */
.gsw-page__header-media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: 0;
}

.gsw-page__header-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gsw-page__header-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 20, 13, .7);
}

.gsw-page__header--has-image .gsw-page__header-inner {
	position: relative;
	z-index: 1;
}

/* Bewusst ein fester Farbwert statt var(--paper): Der Text sitzt hier immer
   auf demselben dunklen Foto-Overlay (rgba(22,20,13,.7), s.o.), unabhaengig
   vom Hell-/Dunkel-Modus der Website. var(--paper) wechselt im Dark Mode
   aber auf einen dunklen Ton (fuer normale Seitenhintergruende gedacht) --
   dadurch wurde Breadcrumb/Titel im Dark Mode dunkel auf dunkel und
   unlesbar. Nutzerfeedback 2026-08-25 (current-state.md). */
.gsw-page__header--has-image .gsw-page__breadcrumb,
.gsw-page__header--has-image .gsw-page__breadcrumb a,
.gsw-page__header--has-image .gsw-page__breadcrumb [aria-current="page"] {
	color: #fdfaea;
}

.gsw-page__header--has-image .gsw-page__breadcrumb a:hover {
	color: var(--yellow);
}

.gsw-page__header--has-image .gsw-page__title {
	color: #fdfaea;
}

/* Header-Box: linke Kante bleibt exakt an der Textspalte darunter
   ausgerichtet (margin-inline:0, kein Auto-Zentrieren), unabhaengig davon,
   ob eine Sidebar aktiv ist. Breite bewusst groesser als die 720px der
   Textspalte (Update 2026-08-18) -- lange Titel brauchen als grosse
   Displayschrift mehr Platz, als fuer Lesetext angenehm waere; die
   Ausrichtung an der Textspalte ist der wichtige Teil, nicht die exakt
   gleiche Breite. */
.gsw-page__header-inner {
	max-width: 960px;
	padding-inline: var(--gutter);
	margin-inline: 0;
}

.gsw-page__breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	color: var(--ink-3);
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.gsw-page__breadcrumb a {
	color: var(--ink-3);
	text-decoration: none;
	transition: color 180ms var(--ease);
}

.gsw-page__breadcrumb a:hover {
	color: var(--red-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gsw-page__breadcrumb [aria-current="page"] {
	color: var(--ink-2);
	font-weight: 600;
}

.gsw-page__title {
	font-family: var(--serif);
	font-size: clamp(2rem, 5vw, 3.35rem);
	font-weight: 500;
	line-height: 1.22;
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Zweiter, kompakter CI-Akzent direkt unter der Ueberschrift -- derselbe
   Rot/Gelb-Farbklang wie der Streifen oben, diesmal dort, wo der Blick
   ohnehin zuerst hinfaellt (Update 2026-08-18). */
.gsw-page__header-accent {
	width: 72px;
	height: 6px;
	margin-top: 22px;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--red) 0 50%, var(--yellow) 50% 100%);
}

.gsw-page__body {
	padding-block: clamp(36px, 5vw, 64px);
}

/* Rechtliche Seiten: Text auf angenehme Lesebreite beschränken */
.gsw-legal,
.gsw-a11y {
	max-width: 72ch;
}

@media (max-width: 600px) {
	.gsw-page__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.gsw-page__header--has-image {
		padding-block: clamp(40px, 10vw, 64px) 32px;
	}
}

/* ====================================================================
   Unterseiten-Layout: Regelbasierte Sidebar (page.php, 2026-08-17)
   Pilot aus Claude-Design-Entwurf. Sidebar-Auswahl per PHP-Regelkette
   in inc/content-rules.php, hier nur die Darstellung. Zwei-Spalten-Grid
   720px Artikel / 68px Luecke / 300px Sidebar -- Artikelspalte bleibt
   auch ohne Sidebar bei 720px, damit Header und Textspalte auf jeder
   Unterseite an derselben Kante und Breite ausgerichtet bleiben.
   ==================================================================== */

.gsw-page__layout {
	display: grid;
	grid-template-columns: 720px;
	column-gap: 68px;
	align-items: start;
}

.gsw-page__body--sidebar-kontakt .gsw-page__layout,
.gsw-page__body--sidebar-verwandte .gsw-page__layout,
.gsw-page__body--sidebar-toc .gsw-page__layout {
	grid-template-columns: 720px 300px;
}

.gsw-page__content {
	min-width: 0;
}

/* Shortcode-Bausteine (News-Modul u.ae.) duerfen die schmale Artikelspalte
   verlassen und ueber die volle Grid-Breite (Artikel + Luecke + Sidebar)
   gehen -- Breakout-Grid-Technik, damit z. B. [gsw_newsfeed] wie ein
   eigenstaendiges Modul wirkt statt in die 720px gequetscht zu werden. */
.gsw-page__body--sidebar-kontakt .gsw-page__content > .gsw-newsfeed,
.gsw-page__body--sidebar-verwandte .gsw-page__content > .gsw-newsfeed,
.gsw-page__body--sidebar-toc .gsw-page__content > .gsw-newsfeed {
	grid-column: 1 / -1;
}

/* ---- Sidebar: gemeinsame Basis ---- */

.gsw-page__sidebar {
	min-width: 0;
}

.gsw-page-sidebar {
	position: sticky;
	top: 96px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 20px 22px;
}

.gsw-page-sidebar + .gsw-page-sidebar {
	margin-top: 20px;
}

.gsw-page-sidebar__title {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: var(--text-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--red);
	padding: 6px 16px;
	border-radius: var(--r-pill);
	margin: 0 0 14px;
}

/* ---- Sidebar: Inhaltsverzeichnis ---- */

.gsw-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gsw-toc__item--level3 {
	padding-left: 14px;
}

.gsw-toc__item a {
	display: block;
	padding: 7px 10px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
	color: var(--ink-2);
	text-decoration: none;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.gsw-toc__item a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.gsw-toc__item a.is-active {
	background: var(--yellow-warm);
	color: var(--ink);
	font-weight: 600;
}

/* ---- Sidebar: Kontakt-Kachel ---- */

.gsw-sidebar-contact__lead {
	font-size: var(--text-sm);
	color: var(--ink-2);
	margin: 0 0 10px;
}

.gsw-sidebar-contact__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--text-sm);
}

.gsw-sidebar-contact__list a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-2);
}

.gsw-sidebar-contact__list a:hover {
	text-decoration-color: var(--ink);
}

.gsw-sidebar-contact__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--red);
	color: var(--paper);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 10px 16px;
	border-radius: var(--r-btn);
	text-decoration: none;
	transition: background-color 160ms var(--ease);
}

.gsw-sidebar-contact__cta:hover {
	background: var(--red-deep);
}

/* ---- Sidebar: Verwandte Themen ---- */

.gsw-sidebar-related__current {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.gsw-sidebar-related__current span {
	font-weight: 400;
	color: var(--ink-3);
}

.gsw-sidebar-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gsw-sidebar-related__list a {
	display: block;
	padding: 6px 8px;
	margin-inline: -8px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
	color: var(--ink-2);
	text-decoration: none;
}

.gsw-sidebar-related__list a:hover {
	background: var(--paper);
	color: var(--ink);
}

/* ---- Content-Bausteine: Lead-Absatz, Definitionsliste, Auto-Zitat ---- */

.gsw-page__content .gsw-lead {
	font-size: var(--text-lg);
	color: var(--ink-2);
}

.gsw-page__content .gsw-definition-list {
	margin: var(--space-callout) 0 0;
	padding: 0;
}

.gsw-page__content .gsw-definition-list dt {
	font-family: var(--serif);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--ink);
	margin: var(--space-li) 0 4px;
	padding-top: var(--space-li);
	border-top: 1px solid var(--line);
}

.gsw-page__content .gsw-definition-list dt:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.gsw-page__content .gsw-definition-list dd {
	margin: 0;
	color: var(--ink-2);
}

.gsw-page__content blockquote.gsw-auto-motto {
	margin-top: var(--space-callout);
}

.gsw-page__content .gsw-infobox {
	padding: 1.5rem;
	border-left: 4px solid var(--red);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--red-soft);
	color: var(--ink);
}

/* Schematischer Anforderungs-Vergleich (z. B. Leistungsbewertung-Seite):
   gleiche horizontale "ausreichend"-Linie ueber Saeulen unterschiedlicher
   Hoehe -- die Saeule selbst zeigt die Gesamtanforderung, die Linienposition
   zeigt, welcher Anteil davon fuer "ausreichend" noetig ist. Bewusst als
   Text+CSS statt Bild, damit es sich in Hell/Dunkel/Kontrastmodus und bei
   Schriftvergroesserung mitverhaelt. */
.gsw-grade-compare {
	display: flex;
	align-items: flex-end;
	gap: clamp(16px, 4vw, 32px);
	justify-content: center;
	margin: var(--space-callout) 0 8px;
	padding-top: 8px;
}

.gsw-grade-compare__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.gsw-grade-compare__bar {
	position: relative;
	width: clamp(52px, 10vw, 84px);
	height: var(--bar-h);
	background: var(--paper-2);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.gsw-grade-compare__line {
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: var(--line-h);
	border-top: 2px dashed var(--red);
}

.gsw-grade-compare__line span {
	position: absolute;
	right: 0;
	bottom: 4px;
	font-size: 11px;
	color: var(--red-deep);
	white-space: nowrap;
	font-weight: 600;
}

.gsw-grade-compare__label {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: center;
}

.gsw-grade-compare__label--accent {
	color: var(--red-deep);
}

/* ---- Typografischer Rhythmus: nur oberer Abstand, keine doppelten
   Luecken durch Margin-Collapsing (siehe current-state.md 2026-08-17) ---- */

.gsw-page__content > h2 {
	margin-top: var(--space-h2);
	margin-bottom: var(--space-heading-to-p);
}

.gsw-page__content > h3,
.gsw-page__content > h4 {
	margin-top: var(--space-h3);
	margin-bottom: var(--space-heading-to-p);
}

.gsw-page__content > h2:first-child,
.gsw-page__content > h3:first-child {
	margin-top: 0;
}

.gsw-page__content > p {
	margin-top: var(--space-p);
}

.gsw-page__content > p:first-child {
	margin-top: 0;
}

.gsw-page__content > h2 + p,
.gsw-page__content > h3 + p,
.gsw-page__content > h4 + p {
	margin-top: 0;
}

.gsw-page__content > ul,
.gsw-page__content > ol,
.gsw-page__content > .gsw-definition-list,
.gsw-page__content > blockquote,
.gsw-page__content > .gsw-infobox,
.gsw-page__content > table,
.gsw-page__content > hr,
.gsw-page__content > .gsw-teams-wrap,
.gsw-page__content > .gsw-jahrgangsteams,
.gsw-page__content > .gsw-kalenderansicht,
.gsw-page__content > .gsw-terminliste {
	margin-top: var(--space-callout);
}

body.dark .gsw-page-sidebar {
	background: var(--paper-2);
	border-color: var(--line);
}

body.dark .gsw-toc__item a.is-active {
	background: rgba(236, 219, 83, .18);
}

@media (max-width: 900px) {
	/* War "minmax(0, 720px)" -- das Maximum blieb 720px, die Spalte
	   zwingt sich dadurch NICHT auf die tatsaechliche Bildschirmbreite,
	   sondern waechst per Grid-"auto"-Sizing weiter Richtung 720px, sobald
	   ein Kind-Element (z. B. .gsw-auszeichnungen__row) eigenen Breiten-
	   bedarf anmeldet -- fuehrte auf /unsere-siegel/ zu einer 700px breiten
	   Spalte bei 390px Bildschirmbreite und massivem horizontalem
	   Ueberlauf (bodyScrollWidth 720px+, per Playwright gemessen). Betrifft
	   grundsaetzlich JEDE normale Unterseite (page.php ist die generische
	   Vorlage), nicht nur diese eine -- minmax(0, 1fr) zwingt die Spalte
	   stattdessen zuverlaessig auf die verfuegbare Breite. */
	.gsw-page__layout,
	.gsw-page__body--sidebar-kontakt .gsw-page__layout,
	.gsw-page__body--sidebar-verwandte .gsw-page__layout,
	.gsw-page__body--sidebar-toc .gsw-page__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* min-width:0 (Basisregel) allein reichte nicht aus, um .gsw-page__content
	   auf die Spurbreite zu zwingen -- das Grid-Item wuchs trotzdem auf die
	   Content-basierte Breite eines breiten Nachfahren (z. B.
	   .gsw-auszeichnungen__row), statt sich per Standard-"stretch" auf die
	   Spur zu beschraenken. Explizites width:100% erzwingt die Spurbreite
	   zuverlaessig (per Playwright bestaetigt: 659,8px -> 310px, kein
	   horizontaler Seiten-Overflow mehr). */
	.gsw-page__content {
		width: 100%;
	}

	.gsw-page__sidebar {
		margin-top: 32px;
	}

	.gsw-page-sidebar {
		position: static;
	}

	.gsw-page__header-inner {
		max-width: none;
	}
}

/* ====================================================================
   Einzelner Beitrag (single.php)
   ==================================================================== */

/* ---- Hero: CI-Streifen + Split-Screen Text | Bild ---- */

.gsw-single-post__hero {
	background: var(--neutral);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(32px, 5vw, 56px);
	position: relative;
	isolation: isolate;
}

/* CI-Akzentstreifen */
.gsw-single-post__hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--red) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--red) 66.6% 100%);
	z-index: 2;
}

/* Vollflaechiger Hintergrund bricht wie beim Seitenheader aus GPs
   grid-container aus (Update 2026-08-18, current-state.md) -- derselbe
   ::after-Trick, hier ohne overflow-Altlast, da .gsw-single-post__hero
   nie ein absolut positioniertes Zuschnitt-Element enthielt. */
.gsw-single-post__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--neutral);
	z-index: -1;
}

/* Kein Leerraum zwischen Hauptnavigation und Hero, wie beim Seitenheader. */
.site-main.gsw-single-post {
	padding-block-start: 0;
}

/* Kompakter CI-Akzent unter dem Titel, wie beim Seitenheader. Kein
   eigener margin noetig -- .gsw-single-post__hero-copy ist ein
   Flex-Container mit gap:14px, der den Abstand zu Titel/Meta bereits
   einheitlich mit den uebrigen Elementen setzt. */
.gsw-single-post__hero-accent {
	width: 72px;
	height: 6px;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--red) 0 50%, var(--yellow) 50% 100%);
}

/* Innerer .wrap: zweispaltig Text | Bild */
.gsw-single-post__hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

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

.gsw-single-post__hero-copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.gsw-single-post__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--red-deep);
	margin: 0;
}

.gsw-single-post__title {
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
}

.gsw-single-post__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--ink-3);
	flex-wrap: wrap;
	margin: 0;
}

/* Trennpunkt zwischen Meta-Einträgen */
.gsw-single-post__meta > * + *::before {
	content: "·";
	margin-right: 14px;
}

.gsw-single-post__excerpt {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 52ch;
	margin: 0;
}

.gsw-single-post__back-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
	align-self: flex-start;
	margin-top: 4px;
}

.gsw-single-post__back-link::before {
	content: "←";
	font-style: normal;
}

.gsw-single-post__back-link:hover {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.gsw-single-post__hero-media {
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--neutral);
	box-shadow: var(--sh-3);
}

.gsw-single-post__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Fallback-Bild: leicht gedimmt, da nicht beitrags-spezifisch */
.gsw-single-post__hero-media--fallback-image img {
	opacity: .75;
}

/* Kein Bild: dekorativer Platzhalter */
.gsw-single-post__hero-media--no-image {
	display: grid;
	place-items: center;
	background: linear-gradient(145deg, var(--neutral) 0%, var(--paper-2) 100%);
	box-shadow: none;
	border: 1px solid var(--line);
}

.gsw-single-post__hero-media--no-image span {
	font-family: var(--serif);
	font-size: 72px;
	font-weight: 500;
	color: var(--line-2);
	letter-spacing: -.02em;
	user-select: none;
}

/* ---- Haupt-Layout: Artikel (links) + Sidebar (rechts) ---- */

.gsw-single-post__layout {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: clamp(36px, 5vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: clamp(36px, 4vw, 60px);
	align-items: start;
}

/* ---- Artikel-Inhalt ---- */

.gsw-single-post__main-column {
	min-width: 0;
}

.gsw-single-post__content {
	font-size: 18px;
	line-height: 1.75;
	color: var(--ink);
	max-width: 66ch;
}

.gsw-single-post__content p {
	margin: 0 0 1em;
}

.gsw-single-post__content p:last-child {
	margin-bottom: 0;
}

.gsw-single-post__content h2 {
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	margin: 2em 0 .5em;
}

.gsw-single-post__content h3 {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	margin: 1.75em 0 .4em;
}

.gsw-single-post__content h4 {
	margin: 1.5em 0 .4em;
}

.gsw-single-post__content ul,
.gsw-single-post__content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.gsw-single-post__content li + li {
	margin-top: .35em;
}

.gsw-single-post__content blockquote {
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--yellow);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--yellow-pale);
	margin: 1.5em 0;
	font-size: 19px;
	color: var(--ink-2);
}

.gsw-single-post__content img {
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
}

.gsw-single-post__content figure {
	margin: 1.5em 0;
}

.gsw-single-post__content figcaption {
	font-size: var(--text-xs);
	color: var(--ink-3);
	margin-top: 6px;
	font-style: italic;
}

.gsw-single-post__content a {
	color: var(--red-deep);
}

.gsw-single-post__content a:hover {
	color: var(--red);
}

/* ---- Post-Footer: Tags + Vor/Zurück-Navigation ---- */

.gsw-single-post__footer {
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.gsw-single-post__tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.gsw-single-post__tags > span {
	font-size: var(--text-xs);
	color: var(--ink-3);
	font-weight: 700;
	flex: none;
}

.gsw-single-post__tags a {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}

.gsw-single-post__tags a:hover {
	background: var(--paper-2);
	border-color: var(--line-2);
	color: var(--red-deep);
}

/* Navigationskarten Vor/Zurück */
.gsw-single-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gsw-single-post__nav-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	position: relative;
	overflow: hidden;
	transition: background .18s, border-color .18s, transform .18s var(--ease);
}

.gsw-single-post__nav-card:hover {
	background: var(--paper-2);
	border-color: var(--line-2);
	transform: translateY(-2px);
}

/* Block-Link-Pattern: die gesamte Karte ist klickbar */
.gsw-single-post__nav-card a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.gsw-single-post__nav-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gsw-single-post__nav-card a {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.4;
}

.gsw-single-post__nav-card--next {
	text-align: right;
}

/* ---- Sidebar ---- */

.gsw-single-sidebar {
	position: sticky;
	top: 82px; /* ca. Header-Höhe (60px) + 22px Luft */
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: calc(100vh - 102px);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gsw-single-sidebar::-webkit-scrollbar {
	display: none;
}

.gsw-single-sidebar__card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--sh-1);
	flex: none;
}

/* Akzent-Karte (Verwandte Beiträge) */
.gsw-single-sidebar__card--accent {
	background: var(--yellow-warm);
	border-color: var(--line-2);
}

.gsw-single-sidebar__eyebrow {
	font-size: 10px !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 14px 16px 0 !important;
	margin: 0 !important;
	line-height: 1;
}

.gsw-single-sidebar__card h2 {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 600;
	margin: 4px 0 10px;
	padding: 0 16px;
	color: var(--ink);
	line-height: 1.25;
}

/* Post-Liste in Sidebar-Karten */
.gsw-single-sidebar__post-list {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	display: flex;
	flex-direction: column;
}

.gsw-single-sidebar__post-item + .gsw-single-sidebar__post-item {
	border-top: 1px solid var(--line);
}

.gsw-single-sidebar__post-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 16px;
	text-decoration: none;
	transition: background .12s;
}

.gsw-single-sidebar__post-link:hover {
	background: rgba(20, 16, 8, .05);
}

.gsw-single-sidebar__post-date {
	font-size: 11px;
	color: var(--red-deep);
	font-weight: 700;
}

.gsw-single-sidebar__post-title {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
}

.gsw-single-sidebar__empty {
	font-size: var(--text-xs);
	color: var(--ink-3);
	padding: 0 16px 14px;
	margin: 0 !important;
}

/* Events-Liste */
.gsw-single-sidebar__event-list {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	flex-direction: column;
}

.gsw-single-sidebar__event-item + .gsw-single-sidebar__event-item {
	border-top: 1px solid var(--line);
}

.gsw-single-sidebar__event-item a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 16px;
	text-decoration: none;
	transition: background .12s;
}

.gsw-single-sidebar__event-item a:hover {
	background: rgba(20, 16, 8, .05);
}

.gsw-single-sidebar__event-item time {
	font-size: 11px;
	color: var(--red-deep);
	font-weight: 700;
	letter-spacing: .03em;
}

.gsw-single-sidebar__event-item strong {
	font-size: var(--text-xs);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.4;
}

.gsw-single-sidebar__event-item span {
	font-size: 12px;
	color: var(--ink-3);
}

.gsw-single-sidebar__more-link {
	display: block;
	padding: 8px 16px 14px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--red-deep);
	text-decoration: none;
}

.gsw-single-sidebar__more-link:hover {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Service-Karte: Schnellzugriffe */
.gsw-single-sidebar__card--service nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 8px 10px;
}

.gsw-single-sidebar__card--service nav a {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: background .12s, color .12s;
}

.gsw-single-sidebar__card--service nav a:hover {
	background: var(--neutral);
	color: var(--red-deep);
}

/* ---- Responsive ---- */

/* Sidebar unter Artikel ab 1060px */
@media (max-width: 1060px) {
	.gsw-single-post__layout {
		grid-template-columns: 1fr;
	}

	.gsw-single-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

/* Hero-Bild unter 860px ausblenden — Text steht für sich */
@media (max-width: 860px) {
	.gsw-single-post__hero-inner {
		grid-template-columns: 1fr;
	}

	.gsw-single-post__hero-media {
		display: none;
	}
}

/* Schmalste Breakpoints */
@media (max-width: 600px) {
	.gsw-single-post__title {
		font-size: clamp(1.6rem, 7vw, 2.2rem);
	}

	.gsw-single-post__nav {
		grid-template-columns: 1fr;
	}

	.gsw-single-post__nav-card--next {
		text-align: left;
	}

	.gsw-single-sidebar {
		grid-template-columns: 1fr;
	}
}

/* ====================================================================
   YouTube-Einbettung (Complianz-kompatibel)
   ==================================================================== */

.gsw-youtube-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--ink, #16140d);
	aspect-ratio: 16 / 9;
}

/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
	.gsw-youtube-wrap {
		padding-bottom: 56.25%;
		height: 0;
	}
}

/* ==== Mobile Drawer (Vollbild-Navigationsoverlay) ==== */

.gsw-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 1100;
	visibility: hidden;
	pointer-events: none;
}

.gsw-mobile-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gsw-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .52 );
	opacity: 0;
	transition: opacity 260ms var( --ease );
	cursor: pointer;
}

.gsw-mobile-drawer.is-open .gsw-mobile-drawer__backdrop {
	opacity: 1;
}

.gsw-mobile-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 360px, 90vw );
	background: var( --paper );
	box-shadow: var( --sh-3 );
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX( 100% );
	transition: transform 280ms var( --ease );
	z-index: 1;
}

.gsw-mobile-drawer.is-open .gsw-mobile-drawer__panel {
	transform: translateX( 0 );
}

.gsw-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var( --line );
	position: sticky;
	top: 0;
	background: var( --paper );
	z-index: 2;
}

.gsw-mobile-drawer__brand .brand__logo {
	height: 34px;
	width: auto;
	display: block;
}

.gsw-mobile-drawer__brand .brand__name {
	font-weight: 700;
	font-size: .9rem;
}

.gsw-mobile-drawer__close {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: var( --ink );
	border-radius: var( --r-sm );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 160ms var( --ease );
}

.gsw-mobile-drawer__close svg {
	width: 22px;
	height: 22px;
}

.gsw-mobile-drawer__close:hover {
	background: var( --neutral );
}

.gsw-mobile-drawer__nav {
	flex: 1;
	padding-bottom: 80px;
}

.gsw-mobile-drawer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gsw-mobile-drawer__item > a,
.gsw-mobile-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 18px;
	color: var( --ink );
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	background: none;
	border: none;
	border-bottom: 1px solid var( --line );
	cursor: pointer;
	text-align: left;
	gap: 8px;
	transition: background 140ms var( --ease ), color 140ms var( --ease );
}

.gsw-mobile-drawer__item > a:hover,
.gsw-mobile-drawer__toggle:hover {
	background: var( --neutral );
	color: var( --red );
}

.gsw-mobile-drawer__item.is-current > a {
	color: var( --red );
	font-weight: 600;
}

.gsw-mobile-drawer__toggle .gsw-chev {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 220ms var( --ease );
}

.gsw-mobile-drawer__toggle[aria-expanded="true"] .gsw-chev {
	transform: rotate( 180deg );
}

.gsw-mobile-drawer__sub {
	list-style: none;
	padding: 0;
	margin: 0;
	display: none;
	background: var( --neutral );
}

.gsw-mobile-drawer__sub.is-open {
	display: block;
}

.gsw-mobile-drawer__sub li a {
	display: block;
	padding: 12px 18px 12px 32px;
	color: var( --ink-2 );
	font-size: .88rem;
	text-decoration: none;
	border-bottom: 1px solid rgba( 0, 0, 0, .07 );
	transition: color 140ms var( --ease ), background 140ms var( --ease );
}

.gsw-mobile-drawer__sub li a:hover {
	color: var( --red );
	background: rgba( 255, 255, 255, .6 );
}

/* Spalten-Untertitel — bildet die Spaltenköpfe des Desktop-Mega-Menüs
   nach, damit viele Unterpunkte nicht unsortiert durcheinanderstehen. */
.gsw-mobile-drawer__group-title {
	padding: 14px 18px 6px 32px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --ink-3 );
}

.gsw-mobile-drawer__group-title:first-child {
	padding-top: 16px;
}

.gsw-mobile-drawer__feature a {
	display: block;
	padding: 12px 18px 12px 32px;
	color: var( --red-deep );
	font-weight: 700;
	font-size: .88rem;
	text-decoration: none;
	background: var( --paper );
	border-bottom: 1px solid rgba( 0, 0, 0, .07 );
}

.gsw-mobile-drawer__feature a:hover {
	background: rgba( 255, 255, 255, .6 );
}

body.gsw-drawer-open {
	overflow: hidden;
}

/* iframe UND Complianz-Consent-Placeholder füllen den Wrapper */
.gsw-youtube-wrap > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ====================================================================
   Suchleiste — unterhalb des Mastheads (Option B: Header-Leiste)
   #gsw-search-bar · toggle via [data-gsw-search-toggle] + JS
   ==================================================================== */

.gsw-search-bar {
	display: grid;
	grid-template-rows: 0fr;
	background: var( --paper );
	border-top: 1px solid transparent;
	transition:
		grid-template-rows 260ms var( --ease ),
		border-top-color 260ms var( --ease );
}

.gsw-search-bar.is-open {
	grid-template-rows: 1fr;
	border-top-color: var( --line );
}

.gsw-search-bar__inner {
	overflow: hidden;
}

.gsw-search-bar__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	max-width: var( --maxw );
	margin-inline: auto;
}

.gsw-search-bar__input {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border: 1.5px solid var( --line );
	border-radius: var( --r-md );
	font-size: 1rem;
	font-family: inherit;
	color: var( --ink );
	background: var( --neutral );
	outline: none;
	transition: border-color 150ms var( --ease ), box-shadow 150ms var( --ease ), background 150ms var( --ease );
}

.gsw-search-bar__input:focus {
	border-color: var( --red );
	box-shadow: var( --sh-focus-red );
	background: var( --paper );
}

.gsw-search-bar__input::placeholder {
	color: var( --ink-3 );
}

.gsw-search-bar__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var( --r-md );
	border: none;
	background: var( --red );
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 150ms var( --ease );
}

.gsw-search-bar__submit svg {
	width: 18px;
	height: 18px;
}

.gsw-search-bar__submit:hover {
	background: var( --red-deep );
}

@media ( max-width: 640px ) {
	.gsw-search-bar__form {
		padding: 10px 16px;
	}
}


/* ====================================================================
   404 — Seite nicht gefunden
   .gsw-404__*
   ==================================================================== */

.gsw-404__content-area {
	width: 100%;
}

.gsw-404 {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.gsw-404__wrap {
	width: 100%;
	padding-block: 72px;
	max-width: 760px;
	margin-inline: auto;
}

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

.gsw-404__code {
	font-family: var( --serif );
	font-size: clamp( 6rem, 18vw, 10rem );
	font-weight: 700;
	line-height: 1;
	color: var( --neutral );
	margin: 0 0 8px;
	letter-spacing: -.04em;
}

body.dark .gsw-404__code {
	color: #2a2820;
}

.gsw-404__eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --red );
	margin: 0 0 12px;
}

.gsw-404__title {
	font-family: var( --serif );
	font-size: clamp( 1.6rem, 3vw, 2.4rem );
	font-weight: 700;
	line-height: 1.2;
	color: var( --ink );
	margin: 0 0 16px;
}

.gsw-404__desc {
	font-size: 1rem;
	color: var( --ink-2 );
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 0 40px;
}

/* -- Suchfeld -------------------------------------------------------- */

.gsw-404__search {
	margin-bottom: 48px;
}

.gsw-404__search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
}

.gsw-404__search-input {
	flex: 1;
	height: 48px;
	padding: 0 18px;
	border: 1.5px solid var( --line );
	border-radius: var( --r-md );
	font-size: 1rem;
	font-family: inherit;
	color: var( --ink );
	background: var( --neutral );
	outline: none;
	transition: border-color 150ms var( --ease ), box-shadow 150ms var( --ease ), background 150ms var( --ease );
}

.gsw-404__search-input:focus {
	border-color: var( --red );
	box-shadow: var( --sh-focus-red );
	background: var( --paper );
}

.gsw-404__search-input::placeholder {
	color: var( --ink-3 );
}

.gsw-404__search-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border-radius: var( --r-md );
	border: none;
	background: var( --red );
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 150ms var( --ease );
}

.gsw-404__search-submit svg {
	width: 16px;
	height: 16px;
}

.gsw-404__search-submit:hover {
	background: var( --red-deep );
}

/* -- Abschnitt-Label ------------------------------------------------- */

.gsw-404__section-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var( --ink-3 );
	margin: 0 0 14px;
}

/* -- Schnellzugriffe ------------------------------------------------- */

.gsw-404__quicklinks {
	margin-bottom: 48px;
}

.gsw-404__quicklinks-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gsw-404__quicklink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1.5px solid var( --line );
	border-radius: var( --r-md );
	font-size: .88rem;
	font-weight: 600;
	color: var( --ink-2 );
	text-decoration: none;
	background: var( --paper );
	transition: border-color 150ms var( --ease ), background 150ms var( --ease ), color 150ms var( --ease );
}

.gsw-404__quicklink svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var( --ink-3 );
	transition: color 150ms var( --ease );
}

.gsw-404__quicklink:hover {
	border-color: var( --red );
	background: var( --neutral );
	color: var( --red );
}

.gsw-404__quicklink:hover svg {
	color: var( --red );
}

/* -- Neueste Beiträge ------------------------------------------------ */

.gsw-404__recent {
	border-top: 1px solid var( --line );
	padding-top: 32px;
}

.gsw-404__recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gsw-404__recent-item {
	border-bottom: 1px solid var( --line );
}

.gsw-404__recent-link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	text-decoration: none;
	color: var( --ink );
	transition: color 150ms var( --ease );
}

.gsw-404__recent-link time {
	font-size: .78rem;
	color: var( --ink-3 );
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.gsw-404__recent-link span {
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.35;
}

.gsw-404__recent-link:hover {
	color: var( --red );
}

.gsw-404__recent-link:hover time {
	color: inherit;
}

/* -- Responsive ------------------------------------------------------ */

@media ( max-width: 640px ) {
	.gsw-404__wrap {
		padding-block: 48px;
	}

	.gsw-404__search-form {
		max-width: 100%;
	}

	.gsw-404__search-submit span {
		display: none;
	}

	.gsw-404__quicklinks-list {
		gap: 8px;
	}
}


/* ====================================================================
   Suchergebnisse — search.php
   .gsw-search-results__* · .gsw-search-result__*
   ==================================================================== */

.gsw-search-results__content-area {
	width: 100%;
}

.gsw-search-results {
	max-width: var( --maxw );
	margin-inline: auto;
	padding: 0 24px;
}

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

.gsw-search-results__hero {
	padding: 56px 0 40px;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient( 90deg, var( --red ) 0 33.3%, var( --yellow ) 33.3% 66.6%, var( --red ) 66.6% 100% ) 1;
	margin-bottom: 32px;
}

.gsw-search-results__eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --red );
	margin: 0 0 12px;
}

.gsw-search-results__title {
	font-family: var( --serif );
	font-size: clamp( 1.8rem, 3.5vw, 2.6rem );
	font-weight: 700;
	line-height: 1.2;
	color: var( --ink );
	margin: 0;
}

.gsw-search-results__title em {
	font-style: normal;
	color: var( --red );
}

/* -- Suchfeld (verfeinern) ------------------------------------------ */

.gsw-search-results__refine {
	margin-bottom: 40px;
}

.gsw-search-results__form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 640px;
}

.gsw-search-results__input {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border: 1.5px solid var( --line );
	border-radius: var( --r-md );
	font-size: 1rem;
	font-family: inherit;
	color: var( --ink );
	background: var( --neutral );
	outline: none;
	transition: border-color 150ms var( --ease ), box-shadow 150ms var( --ease ), background 150ms var( --ease );
}

.gsw-search-results__input:focus {
	border-color: var( --red );
	box-shadow: var( --sh-focus-red );
	background: var( --paper );
}

.gsw-search-results__input::placeholder {
	color: var( --ink-3 );
}

.gsw-search-results__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var( --r-md );
	border: none;
	background: var( --red );
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 150ms var( --ease );
}

.gsw-search-results__submit svg {
	width: 18px;
	height: 18px;
}

.gsw-search-results__submit:hover {
	background: var( --red-deep );
}

/* -- Ergebnisliste --------------------------------------------------- */

.gsw-search-results__list {
	list-style: none;
	padding: 0;
	margin: 0 0 48px;
}

.gsw-search-results__list > li {
	border-bottom: 1px solid var( --line );
}

.gsw-search-results__list > li:first-child {
	border-top: 1px solid var( --line );
}

.gsw-search-result {
	padding: 20px 0;
}

.gsw-search-result__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: .78rem;
	color: var( --ink-3 );
}

.gsw-search-result__type {
	background: var( --neutral );
	color: var( --ink-2 );
	font-weight: 700;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 2px 8px;
	border-radius: var(--r-sm);
}

.gsw-search-result__title {
	font-family: var( --serif );
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var( --ink );
}

.gsw-search-result__title a {
	text-decoration: none;
	color: inherit;
	transition: color 150ms var( --ease );
}

.gsw-search-result__title a:hover {
	color: var( --red );
}

.gsw-search-result__excerpt {
	font-size: .9rem;
	color: var( --ink-2 );
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Pagination ------------------------------------------------------ */

.gsw-search-results__pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 64px;
}

.gsw-search-results__pagination .nav-links {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.gsw-search-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var( --r-md );
	border: 1.5px solid var( --line );
	font-size: .88rem;
	font-weight: 500;
	color: var( --ink-2 );
	text-decoration: none;
	background: var( --paper );
	transition: border-color 150ms var( --ease ), background 150ms var( --ease ), color 150ms var( --ease );
}

.gsw-search-results__pagination .page-numbers:hover {
	border-color: var( --red );
	color: var( --red );
	background: var( --neutral );
}

.gsw-search-results__pagination .page-numbers.current {
	background: var( --red );
	border-color: var( --red );
	color: #fff;
	font-weight: 700;
}

.gsw-search-results__pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	pointer-events: none;
}

/* -- Leer-Zustand ---------------------------------------------------- */

.gsw-search-results__empty {
	padding: 48px 0 80px;
}

.gsw-search-results__empty-text {
	font-size: 1.05rem;
	color: var( --ink-2 );
	margin: 0 0 20px;
}

.gsw-search-results__tips {
	list-style: disc;
	padding-left: 1.4em;
	color: var( --ink-2 );
	font-size: .9rem;
	line-height: 1.8;
}

.gsw-search-results__tips a {
	color: var( --red );
	text-decoration: underline;
}

/* -- Responsive ------------------------------------------------------ */

@media ( max-width: 640px ) {
	.gsw-search-results {
		padding: 0 16px;
	}

	.gsw-search-results__hero {
		padding: 36px 0 28px;
	}

	.gsw-search-results__form {
		max-width: 100%;
	}
}


/* ====================================================================
   News-Archiv / Redaktionelle Nachrichtenübersicht
   .gsw-news-index__* + .gsw-news-card__*
   ==================================================================== */

/* -- Inhaltsbereich -------------------------------------------------- */

.gsw-news-index__content-area {
	width: 100%;
}

.gsw-news-index {
	max-width: var( --maxw );
	margin-inline: auto;
	padding: 0 24px;
}

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

.gsw-news-index__hero {
	padding: 56px 0 40px;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient( 90deg, var( --red ) 0 33.3%, var( --yellow ) 33.3% 66.6%, var( --red ) 66.6% 100% ) 1;
	margin-bottom: 36px;
}

.gsw-news-index__eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --red );
	margin: 0 0 12px;
}

.gsw-news-index__title {
	font-family: var( --serif );
	font-size: clamp( 2rem, 4vw, 3rem );
	font-weight: 700;
	line-height: 1.15;
	color: var( --ink );
	margin: 0 0 16px;
}

.gsw-news-index__intro {
	font-size: 1.1rem;
	color: var( --ink-2 );
	max-width: 72ch;
	margin: 0;
	line-height: 1.6;
}

/* -- Themen-Filter-Chips -------------------------------------------- */

.gsw-news-index__topics {
	margin-bottom: 40px;
}

.gsw-news-index__topics-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var( --ink-3 );
	margin: 0 0 10px;
}

.gsw-news-index__topics-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gsw-news-index__topics-item {
	display: contents;
}

.gsw-news-index__topic-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1.5px solid var( --line );
	border-radius: var(--r-pill);
	font-size: .82rem;
	font-weight: 500;
	color: var( --ink-2 );
	text-decoration: none;
	background: var( --paper );
	transition: border-color 150ms var( --ease ), background 150ms var( --ease ), color 150ms var( --ease );
	white-space: nowrap;
}

.gsw-news-index__topic-link:hover {
	border-color: var( --red );
	color: var( --red );
	background: var( --neutral );
}

.gsw-news-index__topic-link.is-current {
	border-color: var( --red );
	background: var( --red );
	color: #fff;
	font-weight: 600;
}

.gsw-news-index__topic-link.is-current:hover {
	background: var( --red-deep );
	border-color: var( --red-deep );
	color: #fff;
}

.gsw-news-index__topic-link small {
	opacity: .75;
	font-size: .75em;
}

/* -- Featured-Abschnitt (Top-Meldung) ------------------------------- */

.gsw-news-index__featured-section {
	margin-bottom: 56px;
}

/* -- Karten: gemeinsame Basis --------------------------------------- */

.gsw-news-card {
	background: var( --paper );
	border-radius: var( --r-md );
	overflow: hidden;
	box-shadow: var( --sh-1 );
	transition: box-shadow 200ms var( --ease ), transform 200ms var( --ease );
}

.gsw-news-card:hover {
	box-shadow: var( --sh-2 );
	transform: translateY( -2px );
}

.gsw-news-card__media {
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var( --neutral );
	flex-shrink: 0;
}

.gsw-news-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms var( --ease );
}

.gsw-news-card:hover .gsw-news-card__media img {
	transform: scale( 1.03 );
}

.gsw-news-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --serif );
	font-size: 2rem;
	font-weight: 700;
	color: var( --red );
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: var( --neutral );
}

.gsw-news-card__content {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsw-news-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .78rem;
	color: var( --ink-3 );
	flex-wrap: wrap;
}

.gsw-news-card__category {
	background: var( --neutral );
	color: var( --red );
	font-weight: 700;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 2px 8px;
	border-radius: var(--r-sm);
}

.gsw-news-card__title {
	font-family: var( --serif );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var( --ink );
}

.gsw-news-card__title a {
	text-decoration: none;
	color: inherit;
	transition: color 150ms var( --ease );
}

.gsw-news-card__title a:hover {
	color: var( --red );
}

.gsw-news-card__excerpt {
	font-size: .9rem;
	color: var( --ink-2 );
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsw-news-card__link {
	margin: auto 0 0;
	padding-top: 4px;
}

.gsw-news-card__link a {
	font-size: .82rem;
	font-weight: 700;
	color: var( --red );
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap 150ms var( --ease ), color 150ms var( --ease );
}

.gsw-news-card__link a:hover {
	gap: 8px;
	color: var( --red-deep );
}

.gsw-news-card__link a::after {
	content: '→';
}

/* -- Featured-Karte: horizontaler Split (Option A) ------------------ */

.gsw-news-card--featured {
	display: flex;
	flex-direction: row;
	min-height: 420px;
	box-shadow: var( --sh-2 );
}

.gsw-news-card--featured .gsw-news-card__media {
	width: 55%;
	min-height: 360px;
}

.gsw-news-card--featured .gsw-news-card__media img {
	height: 100%;
	min-height: 360px;
}

.gsw-news-card--featured .gsw-news-card__fallback {
	min-height: 360px;
	font-size: 3rem;
}

.gsw-news-card--featured .gsw-news-card__content {
	width: 45%;
	padding: 36px 40px;
	justify-content: center;
	gap: 14px;
}

.gsw-news-card--featured .gsw-news-card__title--featured {
	font-size: clamp( 1.4rem, 2.5vw, 2rem );
	line-height: 1.2;
}

.gsw-news-card--featured .gsw-news-card__excerpt {
	-webkit-line-clamp: 5;
	font-size: .95rem;
}

/* -- News-Grid (reguläre Karten) ------------------------------------ */

.gsw-news-index__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 28px;
	margin-bottom: 48px;
}

.gsw-news-index__grid .gsw-news-card {
	display: flex;
	flex-direction: column;
}

.gsw-news-index__grid .gsw-news-card__media {
	aspect-ratio: 16 / 9;
}

.gsw-news-index__grid .gsw-news-card__content {
	flex: 1;
}

/* -- Pagination ------------------------------------------------------ */

.gsw-news-index__pagination {
	display: flex;
	justify-content: center;
	/* !important noetig: GeneratePress' generische Regel
	   ".one-container .site-main > :last-child { margin-bottom: 0 }"
	   (Spezifitaet 3 Klassen) frisst dieses margin-bottom, sobald die
	   Pagination zufaellig das letzte Element auf der Seite ist (jede
	   News-Archiv-Unterseite ab Seite 2) -- dadurch sass "Weiter/Zurueck"
	   direkt auf dem Footer, ganz ohne Abstand. Betrifft alle
	   Bildschirmgroessen (Sachfehler, kein Mobile-only-Thema). */
	margin-bottom: 64px !important;
}

.gsw-news-index__pagination .nav-links {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.gsw-news-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var( --r-md );
	border: 1.5px solid var( --line );
	font-size: .88rem;
	font-weight: 500;
	color: var( --ink-2 );
	text-decoration: none;
	background: var( --paper );
	transition: border-color 150ms var( --ease ), background 150ms var( --ease ), color 150ms var( --ease );
}

.gsw-news-index__pagination .page-numbers:hover {
	border-color: var( --red );
	color: var( --red );
	background: var( --neutral );
}

.gsw-news-index__pagination .page-numbers.current {
	background: var( --red );
	border-color: var( --red );
	color: #fff;
	font-weight: 700;
}

.gsw-news-index__pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	pointer-events: none;
}

/* -- Leer-Zustand ---------------------------------------------------- */

.gsw-news-index__empty {
	text-align: center;
	padding: 80px 24px;
	color: var( --ink-2 );
}

.gsw-news-index__empty h2 {
	font-family: var( --serif );
	font-size: 1.4rem;
	color: var( --ink );
	margin-bottom: 12px;
}

/* -- Responsive ------------------------------------------------------ */

@media ( max-width: 960px ) {
	.gsw-news-card--featured {
		flex-direction: column;
		min-height: unset;
	}

	.gsw-news-card--featured .gsw-news-card__media,
	.gsw-news-card--featured .gsw-news-card__content {
		width: 100%;
	}

	.gsw-news-card--featured .gsw-news-card__media {
		min-height: unset;
		aspect-ratio: 16 / 9;
	}

	.gsw-news-card--featured .gsw-news-card__media img {
		min-height: unset;
	}

	.gsw-news-card--featured .gsw-news-card__content {
		padding: 24px 28px;
	}

	.gsw-news-index__grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 20px;
	}
}

@media ( max-width: 640px ) {
	.gsw-news-index {
		padding: 0 16px;
	}

	.gsw-news-index__hero {
		padding: 36px 0 28px;
	}

	.gsw-news-index__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.gsw-news-index__topics-list {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.gsw-news-index__topics-list::-webkit-scrollbar {
		display: none;
	}

	.gsw-news-index__topics-item {
		display: block;
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Leichte-Sprache-Seite (.gsw-ls-page)
   Eigene, vollständige Seitenumgebung – unabhängig von GeneratePress-Layout.
   ========================================================================== */

/* Topbar-Link */
.topbar-ls-link {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var( --ink );
	text-decoration: none;
	padding: 8px 12px;
	border: 1.5px solid var( --ink-3 );
	border-radius: var(--r-pill);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	transition: background .18s var( --ease ), color .18s var( --ease ), border-color .18s var( --ease );
}

.topbar-ls-link:hover,
.topbar-ls-link:focus-visible {
	background: var( --red );
	color: #fff;
	border-color: var( --red );
	outline: none;
}

.topbar-ls-link:focus-visible {
	outline: 3px solid var( --yellow );
	outline-offset: 2px;
}

/* Body-Reset für die LS-Seite */
.gsw-ls-page {
	background: #fff; /* bewusst reines Weiss statt --paper (Creme) -- max. Kontrast fuer Leichte Sprache */
	color: var( --ink, #1a1a1a );
	font-family: var( --serif, Georgia, serif );
	font-size: 1.375rem;      /* 22 px */
	line-height: 1.75;
	margin: 0;
	padding: 0;
}

/* Header */
.gsw-ls-header {
	background: var( --neutral, #f3ebcd );
	border-bottom: 4px solid var( --red, #bc181a );
	padding: 16px 0;
}

.gsw-ls-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.gsw-ls-header__home {
	display: block;
	line-height: 0;
}

.gsw-ls-header__logo {
	height: 56px;
	width: auto;
}

.gsw-ls-header__school-name {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var( --ink, #1a1907 );
}

.gsw-ls-header__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --red, #bc181a );
	color: #fff;
	font-family: var( --sans, sans-serif );
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 6px 14px;
	border-radius: var(--r-pill);
}

/* Main */
.gsw-ls-main {
	padding-block: 48px 80px;
}

.gsw-ls-main__inner {
	max-width: 54ch;         /* enge Spalte für bessere Lesbarkeit */
}

/* Zurück-Link */
.gsw-ls-back {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.gsw-ls-back__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --sans, sans-serif );
	font-size: var(--text-sm);
	font-weight: 600;
	color: var( --red, #bc181a );
	text-decoration: none;
}

.gsw-ls-back__link:hover,
.gsw-ls-back__link:focus-visible {
	text-decoration: underline;
	outline: none;
}

.gsw-ls-back__link:focus-visible {
	outline: 3px solid var( --red, #bc181a );
	outline-offset: 2px;
	border-radius: 3px;
}

.gsw-ls-back__date {
	font-family: var( --sans, sans-serif );
	font-size: .875rem;
	color: var( --ink-2, #555 );
}

/* Titel */
.gsw-ls-title {
	font-family: var( --serif, Georgia, serif );
	font-size: clamp( 1.75rem, 5vw, 2.5rem );
	line-height: 1.25;
	color: var( --ink, #1a1a1a );
	margin: 0 0 28px;
	max-width: 22ch;
}

/* KI-Hinweis-Box */
.gsw-ls-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var( --yellow-pale, #fffbea );
	border-left: 4px solid var( --yellow, #ecdb53 );
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: 14px 18px;
	margin-bottom: 40px;
}

.gsw-ls-notice p {
	margin: 0;
	font-family: var( --sans, sans-serif );
	font-size: 1rem;
	line-height: 1.6;
	color: var( --ink-2, #444 );
}

/* LS-Inhalt */
.gsw-ls-content {
	font-size: 1.375rem;     /* 22 px */
	line-height: 1.85;
	color: var( --ink, #1a1a1a );
}

.gsw-ls-content p {
	margin: 0 0 1.5em;
}

/* Buttons */
.gsw-ls-nav-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 48px;
}

.gsw-ls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --sans, sans-serif );
	font-size: 1rem;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: var(--r-btn);
	text-decoration: none;
	min-height: 48px;
	transition: background .18s var( --ease, ease ), color .18s var( --ease, ease );
}

.gsw-ls-btn--primary {
	background: var( --red, #bc181a );
	color: #fff;
	border: 2px solid var( --red, #bc181a );
}

.gsw-ls-btn--primary:hover,
.gsw-ls-btn--primary:focus-visible {
	background: var( --red-deep, #8a0f11 );
	border-color: var( --red-deep, #8a0f11 );
	color: #fff;
	outline: none;
}

.gsw-ls-btn--outline {
	background: transparent;
	color: var( --red, #bc181a );
	border: 2px solid var( --red, #bc181a );
}

.gsw-ls-btn--outline:hover,
.gsw-ls-btn--outline:focus-visible {
	background: var( --red, #bc181a );
	color: #fff;
	outline: none;
}

.gsw-ls-btn:focus-visible {
	outline: 3px solid var( --yellow, #ecdb53 );
	outline-offset: 3px;
}

/* Info-Text auf Fehlerseite */
.gsw-ls-info {
	font-size: var(--text-lg);
	line-height: 1.7;
	color: var( --ink-2, #333 );
	margin: 0 0 32px;
}

/* Footer */
.gsw-ls-footer {
	background: var( --neutral, #f3ebcd );
	border-top: 1px solid var( --line-2, #ddd );
	padding: 20px 0;
}

.gsw-ls-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	font-family: var( --sans, sans-serif );
	font-size: .875rem;
	color: var( --ink-2, #555 );
}

.gsw-ls-footer__inner a {
	color: var( --ink-2, #333 );
	text-decoration: none;
}

.gsw-ls-footer__inner a:hover {
	text-decoration: underline;
}

@media ( max-width: 600px ) {
	.gsw-ls-page {
		font-size: var(--text-lg);
	}

	.gsw-ls-header__badge {
		font-size: .75rem;
		padding: 4px 10px;
	}

	.gsw-ls-main {
		padding-block: 32px 56px;
	}

	.gsw-ls-nav-btns {
		flex-direction: column;
	}

	.gsw-ls-btn {
		width: 100%;
	}
}

/* ====================================================================
   2026 Design-Upgrade
   Scroll-Animationen · View Transitions · Count-up · Lesefortschritt
   Micro-Interactions · Hero · Unterseiten-Header · Bugfixes
   ==================================================================== */

/* ---- 1. View Transitions API: sanfte Seitenwechsel ---- */

@view-transition {
	navigation: auto;
}

/* ---- 2. Scroll-Reveal: Elemente gleiten beim Einrollen herein ---- */

.gsw-reveal-init {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 560ms var(--ease), transform 560ms var(--ease);
	transition-delay: var(--gsw-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.gsw-reveal-init.gsw-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gsw-reveal-init {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Stagger-Delays: Siegel-Karten */
.seals-row li:nth-child(2) { --gsw-reveal-delay: 80ms; }
.seals-row li:nth-child(3) { --gsw-reveal-delay: 160ms; }
.seals-row li:nth-child(4) { --gsw-reveal-delay: 240ms; }
.seals-row li:nth-child(5) { --gsw-reveal-delay: 320ms; }

/* Stagger-Delays: Kontaktkarten */
.contact-grid .contact-card:nth-child(2) { --gsw-reveal-delay: 70ms; }
.contact-grid .contact-card:nth-child(3) { --gsw-reveal-delay: 140ms; }
.contact-grid .contact-card:nth-child(4) { --gsw-reveal-delay: 210ms; }

/* Stagger-Delays: Einblicke-Kacheln */
.strip-grid .tile:nth-child(2) { --gsw-reveal-delay: 60ms; }
.strip-grid .tile:nth-child(3) { --gsw-reveal-delay: 120ms; }
.strip-grid .tile:nth-child(4) { --gsw-reveal-delay: 60ms; }
.strip-grid .tile:nth-child(5) { --gsw-reveal-delay: 120ms; }
.strip-grid .tile:nth-child(6) { --gsw-reveal-delay: 180ms; }

/* Stagger-Delays: Statistik-Felder */
.facts dl > div:nth-child(2) { --gsw-reveal-delay: 80ms; }
.facts dl > div:nth-child(3) { --gsw-reveal-delay: 160ms; }
.facts dl > div:nth-child(4) { --gsw-reveal-delay: 240ms; }

/* ---- 3. Lesefortschritt-Balken (nur Einzelbeiträge) ---- */

#gsw-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--red);
	transform-origin: left center;
	transform: scaleX(0);
	z-index: 1200;
	pointer-events: none;
	animation: gsw-reading-fill linear both;
	animation-timeline: scroll(root block);
}

@keyframes gsw-reading-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---- 4. Micro-Interactions: News-Cards stärker anheben ---- */

.gsw-news-card:hover {
	box-shadow: var(--sh-3);
	transform: translateY(-4px);
}

/* ---- 5. Micro-Interactions: Service-Kacheln ---- */

.quick {
	transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.quick:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
}

/* ---- 6. Micro-Interactions: Kontaktkarten ---- */

.contact-card {
	transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.contact-card:hover {
	transform: translateY(-2px);
}

/* ---- 7. Single-Post Hero: Bild dominanter (größere Bildspalte) ---- */

.gsw-single-post__hero-inner {
	grid-template-columns: minmax(0, 1fr) minmax(400px, 580px);
	gap: clamp(36px, 6vw, 80px);
}

.gsw-single-post__hero-media {
	aspect-ratio: 16 / 10;
	box-shadow: 0 16px 56px rgba(20, 16, 8, .18);
}

@media (max-width: 860px) {
	.gsw-single-post__hero-inner {
		grid-template-columns: 1fr;
	}

	.gsw-single-post__hero-media {
		aspect-ratio: 16 / 9;
	}
}

/* ---- 8. Unterseiten-Header aufwerten ----
   War auf bis zu 108px Top-Padding hochgesetzt und stand zusaetzlich noch
   in der Luft (site-main.gsw-page brachte VOR dem Banner nochmal eigenes
   padding-block mit) -- in Summe bis zu 172px Leerraum vor der Ueberschrift,
   dazu eine Luecke zwischen Hauptmenue und Banner statt eines direkten
   Anschlusses. Padding moderat reduziert und die Luecke oben entfernt,
   siehe .site-main.gsw-page weiter unten. */

.gsw-page__header {
	padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 48px);
}

.gsw-page__title {
	font-size: clamp(2.25rem, 5.5vw, 3.8rem);
	max-width: 28ch;
}

.site-main.gsw-page {
	padding-block-start: 0;
}

/* ---- 9. Einblicke-Grid: Orphan-Kacheln vermeiden ---- */

.strip-grid .tile.t-4:last-child {
	grid-column: 1 / -1;
	aspect-ratio: 21 / 9;
}

.strip-grid .tile.t-4:nth-last-child(2) {
	grid-column: span 6;
}

.strip-grid .tile.t-5:last-child {
	grid-column: span 6;
}

/* ---- 11. Artikel-Typografie: H2/H3 besser abgesetzt ---- */

.gsw-single-post .entry-content h2 {
	margin-top: clamp(1.8em, 3vw, 2.4em);
	padding-top: .5em;
	border-top: 1px solid var(--line);
}

.gsw-single-post .entry-content h3 {
	margin-top: 1.6em;
	color: var(--red-deep);
}

/* ---- 12. Archiv-Fallback-Karte: CI-Gestaltung statt leerer Fläche ---- */

.gsw-news-card__fallback {
	background: linear-gradient(150deg, var(--neutral) 0%, var(--paper-2) 100%);
	border-bottom: 3px solid var(--red);
}

.gsw-news-card__fallback > span {
	opacity: 0.5;
}

/* ====================================================================
   Hero-Row: Padding-Korrektur + Placeholder-Kachel
   ==================================================================== */

/* Atmen am Seitenanfang — verhindert, dass der Hero direkt am Header klebt */
.gsw-top-row {
	padding-block-start: clamp(20px, 2.5vw, 36px);
	column-gap: clamp(10px, 1.2vw, 16px);
}

/* Placeholder-Grafik wenn kein Beitragsbild vorhanden */
.news-item--compact .media {
	aspect-ratio: 16 / 9;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--neutral);
	flex-shrink: 0;
}

.news-item--compact .media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--neutral) 0%, var(--paper-2) 100%);
	position: relative;
}

.news-item--compact .media__placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Crect x='6' y='10' width='28' height='20' rx='2' stroke='%23ccc' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='18' r='3' stroke='%23ccc' stroke-width='1.5'/%3E%3Cpath d='M6 26l8-7 6 5 5-4 9 6' stroke='%23ccc' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px no-repeat;
	opacity: 0.6;
}

/* ====================================================================
   principal-welcome: Begrüßungsblock der Schulleitung
   ==================================================================== */

.gsw-home-principal-welcome {
	background: var(--paper);
	border-block: 1px solid var(--line);
}

.gsw-home-principal-welcome__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gap);
	padding-block: clamp(40px, 5vw, 72px);
}

.gsw-home-principal-welcome__layout {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 340px);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.gsw-home-principal-welcome__header .gsw-home-section__eyebrow,
.gsw-home-principal-welcome__header p.gsw-home-section__eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 10px;
}

.gsw-home-principal-welcome__header h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.2;
	margin: 0 0 16px;
	max-width: 26ch;
}

.gsw-home-principal-welcome__lead {
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	color: var(--ink-2);
	max-width: 60ch;
	margin-bottom: 24px;
}

.gsw-home-principal-welcome__text p {
	max-width: 66ch;
	line-height: 1.75;
	margin-bottom: 16px;
	color: var(--ink-2);
}

.gsw-home-principal-welcome__values {
	list-style: none;
	padding: 0;
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsw-home-principal-welcome__values li {
	padding-left: 20px;
	position: relative;
	color: var(--ink);
	font-weight: 500;
}

.gsw-home-principal-welcome__values li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}

.gsw-home-principal-welcome__signature {
	padding-top: 20px;
	border-top: 1px solid var(--line);
	margin-top: 4px;
}

.gsw-home-principal-welcome__signature-line {
	font-size: .875rem;
	color: var(--ink-3);
	margin-bottom: 4px;
}

.gsw-home-principal-welcome__signature-name {
	font-weight: 700;
	margin: 0;
}

.gsw-home-principal-welcome__signature-role {
	font-size: .875rem;
	color: var(--ink-2);
	margin: 2px 0 0;
}

.gsw-home-principal-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 28px;
}

.gsw-home-principal-welcome__actions-note {
	font-size: var(--text-xs);
	color: var(--ink-3);
	width: 100%;
	margin: 4px 0 0;
}

.gsw-home-principal-welcome__secondary-button {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}

.gsw-home-principal-welcome__secondary-button:hover {
	border-color: var(--ink-2);
	background: var(--neutral);
}

/* Aside: Orientierungskarte */
.gsw-home-principal-welcome__card {
	background: var(--neutral);
	border: 1px solid var(--line);
	border-top: 4px solid var(--yellow);
	border-radius: var(--r-lg);
	padding: clamp(20px, 2.5vw, 28px);
}

.gsw-home-principal-welcome__card-label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 16px;
}

.gsw-home-principal-welcome__portrait--photo .gsw-home-principal-welcome__portrait-frame {
	width: 120px;
	height: 120px;
}

.gsw-home-principal-welcome__portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.gsw-home-principal-welcome__portrait-frame {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--yellow) 0%, var(--red) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	position: relative;
}

.gsw-home-principal-welcome__portrait-badge {
	font-size: .6875rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: .04em;
}

.gsw-home-principal-welcome__card h3 {
	font-size: 1rem;
	line-height: 1.4;
	margin-bottom: 10px;
}

.gsw-home-principal-welcome__card p {
	font-size: .875rem;
	color: var(--ink-2);
	line-height: 1.65;
	margin-bottom: 12px;
}

.gsw-home-principal-welcome__quote {
	border-left: 3px solid var(--red);
	margin: 16px 0;
	padding: 8px 0 8px 14px;
	font-style: italic;
	color: var(--ink-2);
}

.gsw-home-principal-welcome__quote p {
	margin: 0;
	font-size: var(--text-sm);
}

@media (max-width: 800px) {
	.gsw-home-principal-welcome__layout {
		grid-template-columns: 1fr;
	}

	/* order:-1 auf .aside sowie das 72px/1fr-Karten-Grid von hier entfernt
	   (Audit Runde 4, current-state.md) -- ersetzt durch feingranulare
	   display:contents-Umsortierung weiter unten im File, die Foto und
	   Willkommenstext direkt zusammenbringt statt nur die ganze Karte vor
	   den Text zu schieben. */
}

/* ====================================================================
   Suchseite
   ==================================================================== */

.gsw-search-results__content-area {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gap);
	padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px);
}

.gsw-search-results {
	max-width: 780px;
}

.gsw-search-results__hero {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.gsw-search-results__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 8px;
}

.gsw-search-results__title {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	line-height: 1.15;
	margin: 0;
}

.gsw-search-results__title em {
	font-style: normal;
	color: var(--red-deep);
}

/* Suchfeld (Verfeinerung) */
.gsw-search-results__refine {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.gsw-search-results__form {
	display: flex;
	gap: 0;
	max-width: 540px;
}

.gsw-search-results__input {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	font-size: 1rem;
	border: 1px solid var(--line);
	border-right: none;
	border-radius: var(--r-md) 0 0 var(--r-md);
	background: var(--paper);
	color: var(--ink);
	outline: none;
}

.gsw-search-results__input:focus {
	border-color: var(--red);
	box-shadow: var(--sh-focus-red);
}

.gsw-search-results__submit {
	width: 48px;
	height: 48px;
	background: var(--red);
	color: #fff;
	border: none;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms var(--ease);
}

.gsw-search-results__submit:hover { background: var(--red-deep); }

.gsw-search-results__submit svg {
	width: 20px;
	height: 20px;
}

/* Ergebnisliste */
.gsw-search-results__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gsw-search-result {
	padding: clamp(16px, 2vw, 22px) 0;
	border-bottom: 1px solid var(--line);
}

.gsw-search-result__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 6px;
}

.gsw-search-result__type {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	background: var(--neutral);
	padding: 2px 8px;
	border-radius: var(--r-pill);
}

.gsw-search-result__meta time {
	font-size: var(--text-xs);
	color: var(--ink-3);
}

.gsw-search-result__title {
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	margin: 0 0 8px;
	line-height: 1.35;
}

.gsw-search-result__title a {
	color: var(--ink);
	text-decoration: none;
}

.gsw-search-result__title a:hover { color: var(--red-deep); }

.gsw-search-result__excerpt {
	font-size: var(--text-sm);
	color: var(--ink-2);
	line-height: 1.65;
	max-width: 68ch;
	margin: 0;
}

/* Leerer Zustand */
.gsw-search-results__empty {
	padding: clamp(32px, 4vw, 56px) 0;
	text-align: center;
}

.gsw-search-results__empty-text {
	font-size: 1.125rem;
	color: var(--ink-2);
	margin-bottom: 20px;
}

.gsw-search-results__tips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--text-sm);
	color: var(--ink-3);
}

.gsw-search-results__tips a {
	color: var(--red-deep);
	text-decoration: none;
	font-weight: 600;
}

/* Paginierung */
.gsw-search-results__pagination {
	margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 600px) {
	.gsw-search-results__form { max-width: 100%; }

	.gsw-search-results__input { font-size: var(--text-sm); }
}

/* ====================================================================
   404-Seite
   ==================================================================== */

.gsw-404__content-area {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gap);
	padding-block: clamp(48px, 6vw, 88px) clamp(64px, 7vw, 112px);
}

.gsw-404__wrap {
	max-width: 680px;
}

/* Hero */
.gsw-404__hero {
	margin-bottom: clamp(32px, 4vw, 48px);
	position: relative;
}

.gsw-404__code {
	font-size: clamp(6rem, 18vw, 12rem);
	font-weight: 900;
	line-height: 1;
	color: var(--neutral);
	margin: 0 0 -0.2em;
	letter-spacing: -0.04em;
	user-select: none;
}

.gsw-404__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 8px;
}

.gsw-404__title {
	font-size: clamp(1.5rem, 3.5vw, 2.4rem);
	margin: 0 0 16px;
	line-height: 1.2;
}

.gsw-404__desc {
	font-size: 1rem;
	color: var(--ink-2);
	max-width: 56ch;
	margin: 0;
}

/* Suchfeld */
.gsw-404__search {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.gsw-404__search-form {
	display: flex;
	max-width: 480px;
}

.gsw-404__search-input {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	font-size: 1rem;
	border: 1px solid var(--line);
	border-right: none;
	border-radius: var(--r-md) 0 0 var(--r-md);
	background: var(--paper);
	color: var(--ink);
	outline: none;
}

.gsw-404__search-input:focus {
	border-color: var(--red);
	box-shadow: var(--sh-focus-red);
}

.gsw-404__search-submit {
	height: 48px;
	padding: 0 16px;
	background: var(--red);
	color: #fff;
	border: none;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 180ms var(--ease);
}

.gsw-404__search-submit:hover { background: var(--red-deep); }

.gsw-404__search-submit svg {
	width: 18px;
	height: 18px;
}

/* Section-Label */
.gsw-404__section-label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 12px;
}

/* Quicklinks */
.gsw-404__quicklinks {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.gsw-404__quicklinks-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}

.gsw-404__quicklink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 12px;
	background: var(--neutral);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--ink);
	font-size: .875rem;
	font-weight: 500;
	text-align: center;
	transition: background 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}

.gsw-404__quicklink:hover {
	background: var(--paper);
	box-shadow: var(--sh-1);
	transform: translateY(-2px);
	color: var(--red-deep);
}

.gsw-404__quicklink svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	flex-shrink: 0;
}

/* Neueste Beiträge */
.gsw-404__recent {
	border-top: 1px solid var(--line);
	padding-top: clamp(24px, 3vw, 36px);
}

.gsw-404__recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gsw-404__recent-item {
	border-bottom: 1px solid var(--line);
}

.gsw-404__recent-link {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	text-decoration: none;
	color: var(--ink);
	font-size: var(--text-sm);
	transition: color 150ms var(--ease);
}

.gsw-404__recent-link:hover { color: var(--red-deep); }

.gsw-404__recent-link time {
	font-size: var(--text-xs);
	color: var(--ink-3);
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.gsw-404__search-form { max-width: 100%; }
	.gsw-404__code { font-size: clamp(5rem, 22vw, 8rem); }
	.gsw-404__quicklinks-list { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================================
   Anmeldemodus-Banner
   ==================================================================== */

.gsw-admission-banner {
	background: linear-gradient(90deg, var(--red-deep) 0%, var(--red) 100%);
	color: #fff;
	padding-block: clamp(14px, 1.8vw, 20px);
	position: relative;
	z-index: 99;
}

.gsw-admission-banner__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gap);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

.gsw-admission-banner__text {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
}

.gsw-admission-banner__label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .8;
	white-space: nowrap;
}

.gsw-admission-banner__headline {
	font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.3;
}

.gsw-admission-banner__sub {
	font-size: .875rem;
	opacity: .85;
	max-width: 52ch;
}

.gsw-admission-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--red-deep);
	font-size: .875rem;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: var(--r-md);
	text-decoration: none;
	white-space: nowrap;
	transition: background 180ms var(--ease), transform 180ms var(--ease);
	flex-shrink: 0;
}

.gsw-admission-banner__cta:hover {
	background: var(--yellow);
	color: var(--ink);
	transform: translateY(-1px);
}

.gsw-admission-banner__cta svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 560px) {
	.gsw-admission-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.gsw-admission-banner__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ======================================================================
   Audit Runde 3 · Punkt 1 (rev. 2)
   News-Hero — 2-Spalten-Grid (Bild links · Text rechts auf solidem Grund)
   Text immer auf var(--paper) → garantierter Kontrast, kein Overlay nötig
   ====================================================================== */

/* --- 2-Spalten-Grid --- */
.hero-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--paper);
}

/* Bild füllt die linke Spalte, aber nie hochkant */
.hero-feature .media {
	position: relative;
	aspect-ratio: unset;
	border-radius: 0;
	overflow: hidden;
	height: 100%;
	max-height: clamp(220px, 28vw, 320px);
}

.hero-feature .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Fallback ohne Beitragsbild — vorher ein <img src> auf eine nie
   existierende Datei (assets/images/placeholder-hero.jpg, 404), zeigte
   also immer ein kaputtes Bildsymbol. Gleiches Platzhalter-Muster wie bei
   den kompakten Aktuelles-Karten (.news-item--compact .media__placeholder). */
.hero-feature .media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--neutral) 0%, var(--paper-2) 100%);
	position: relative;
}

.hero-feature .media__placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Crect x='6' y='10' width='28' height='20' rx='2' stroke='%23ccc' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='18' r='3' stroke='%23ccc' stroke-width='1.5'/%3E%3Cpath d='M6 26l8-7 6 5 5-4 9 6' stroke='%23ccc' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 56px no-repeat;
	opacity: 0.6;
}

/* Kein Scrim mehr */
.hero-feature::after {
	display: none;
}

/* Text-Spalte: solider Hintergrund, volle Lesbarkeit */
.hero-feature__body {
	position: static;
	z-index: auto;
	margin-top: 0;
	padding: clamp(20px, 3.2vw, 40px);
	color: var(--ink);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

.hero-feature__body .meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.hero-feature__body .meta time {
	font-size: 12px;
	color: var(--ink-3);
}

/* Titel — originale Größe */
.news-hero .hero-feature .hero-title,
.hero-feature__body .hero-title {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.3;
	margin-bottom: 12px;
}

.hero-feature__body .hero-title a {
	color: var(--ink);
	text-decoration: none;
	background: none;
}

.hero-feature__body .hero-title a:hover {
	color: var(--red-deep);
}

/* Teaser — 3 Zeilen */
.news-hero .hero-feature .teaser,
.hero-feature__body .teaser {
	font-size: var(--text-sm);
	color: var(--ink-2);
	line-height: 1.6;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-feature__body .hero-btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.hero-feature__body .hero-btns .btn-primary {
	background: var(--red);
	color: #fff;
	border-color: var(--red);
}

.hero-feature__body .hero-btns .btn-ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink-2);
}

.hero-feature__body .hero-btns .btn-ghost:hover {
	border-color: var(--ink-2);
	color: var(--ink);
}

/* Fokus-Stile — WCAG 2.4.11 AA */
.hero-feature__body a:focus-visible,
.hero-feature__body .btn:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Kategorie-Farbsystem via data-cat ---
   --cat-* Tokens aus variables.css (dort dokumentiert als bewusste
   CI-Erweiterung, current-state.md 2026-08-15, Audit-Punkt 6). --- */

/* Standard: Schulrot — weiß auf rot ≥ 4,5:1 ✓ */
.cat[data-cat] {
	background: var(--red);
	color: #fff;
	border: none;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 3px;
	line-height: 1.6;
}

/* Schulleben / Gemeinschaft — #1f7a4a ≈ 6,2:1 ✓ */
.cat[data-cat="schulleben"],
.cat[data-cat="schulgemeinschaft"],
.cat[data-cat="gemeinschaft"] { background: var(--cat-schulleben); }

/* Auszeichnungen / Preise — #7a5500 ≈ 5,7:1 ✓ */
.cat[data-cat="auszeichnungen"],
.cat[data-cat="preise"],
.cat[data-cat="ehrungen"],
.cat[data-cat="siegel"] { background: var(--cat-auszeichnungen); }

/* Veranstaltungen / Termine — #1a55a0 ≈ 6,4:1 ✓ */
.cat[data-cat="veranstaltungen"],
.cat[data-cat="termine"],
.cat[data-cat="events"],
.cat[data-cat="kalender"] { background: var(--cat-veranstaltungen); }

/* Sport / Bewegung — #6b2aa0 ≈ 7,5:1 ✓ */
.cat[data-cat="sport"],
.cat[data-cat="bewegung"],
.cat[data-cat="sporttag"] { background: var(--cat-sport); }

/* Beratung / Sozialarbeit — #0a7a7a ≈ 5,1:1 ✓ */
.cat[data-cat="beratung"],
.cat[data-cat="schulsozialarbeit"],
.cat[data-cat="inklusion"],
.cat[data-cat="foerderung"] { background: var(--cat-beratung); }

/* MINT / Naturwissenschaften — #1a6040 ≈ 6,8:1 ✓ */
.cat[data-cat="mint"],
.cat[data-cat="naturwissenschaften"],
.cat[data-cat="informatik"],
.cat[data-cat="technik"] { background: var(--cat-mint); }

/* Aktuelles — bewusst neutral (--ink-2, 11,7:1 ✓) statt Rot, damit Rot
   Buttons/CTAs vorbehalten bleibt (current-state.md, 2026-08-16) */
.cat[data-cat="aktuelles"] { background: var(--cat-aktuelles); }

/* Sekundäre Beiträge — dasselbe System */
.cat--neutral[data-cat] { border: none; background: var(--red); color: #fff; }
.cat--neutral[data-cat="schulleben"],
.cat--neutral[data-cat="schulgemeinschaft"],
.cat--neutral[data-cat="gemeinschaft"] { background: var(--cat-schulleben); }
.cat--neutral[data-cat="auszeichnungen"],
.cat--neutral[data-cat="preise"],
.cat--neutral[data-cat="siegel"] { background: var(--cat-auszeichnungen); }
.cat--neutral[data-cat="veranstaltungen"],
.cat--neutral[data-cat="termine"],
.cat--neutral[data-cat="kalender"] { background: var(--cat-veranstaltungen); }
.cat--neutral[data-cat="sport"],
.cat--neutral[data-cat="bewegung"] { background: var(--cat-sport); }
.cat--neutral[data-cat="beratung"],
.cat--neutral[data-cat="schulsozialarbeit"],
.cat--neutral[data-cat="inklusion"] { background: var(--cat-beratung); }
.cat--neutral[data-cat="mint"],
.cat--neutral[data-cat="naturwissenschaften"],
.cat--neutral[data-cat="informatik"] { background: var(--cat-mint); }
.cat--neutral[data-cat="aktuelles"] { background: var(--cat-aktuelles); }

/* --- Responsive --- */
@media (max-width: 860px) {
	/* Bild über Text stapeln */
	.hero-feature {
		grid-template-columns: 1fr;
	}

	.hero-feature .media {
		height: auto;
		min-height: unset;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 560px) {
	.hero-feature .media {
		aspect-ratio: 3 / 2;
	}

	.hero-feature__body {
		padding: 16px;
	}
}

/* ======================================================================
   Audit Runde 3 · Punkt 2
   Quicklinks — SVG-Icons für alle 4 Karten
   ====================================================================== */

.quick__icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	flex-shrink: 0;
	color: currentColor;
	transition: transform 200ms var(--ease);
}

.quick__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Leichter Aufstieg beim Hover — synchron mit der Karte */
.quick:hover .quick__icon {
	transform: translateY(-3px);
}

/* Auf der roten Sektion: accent-Karte (gelb) hat dunkle Tinte */
.quicks-section.gsw-section--red .quick--accent .quick__icon {
	color: var(--ink);
}

/* warm-Variante: Icon erbt die dunkle Tinte (Karte ist gelb-warm) */
.quick--warm .quick__icon {
	color: var(--ink-2);
}

/* =========================================================
   Team-Karten [gsw_teams] / [gsw_jahrgangsteams]
   ========================================================= */

.gsw-team-heading {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ink);
	margin: 0 0 28px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--red);
	display: inline-block;
}

.gsw-jahrgangsteam {
	margin-bottom: 64px;
}

/* Automatische Spaltenanzahl: ab 220 px pro Karte, max 5 Spalten */
.gsw-team-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Mitwirkende-Karten (SV, Foerderverein, Schulpflegschaft): kleinere Gruppen
   (2-4 Personen) -- schmalere Mindestbreite als die generische 220px-Regel
   oben, damit z. B. die drei SV-Vertreter:innen in einer Reihe stehen statt
   nach zwei Karten umzubrechen. auto-fit statt auto-fill, damit bei wenigen
   Personen keine leere Spalte uebrig bleibt. */
.gsw-mitwirkende-cards {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 540px) {
	.gsw-team-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Karte */
.gsw-team-card {
	background: var(--paper);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	display: flex;
	flex-direction: column;
	margin: 0;
	transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.gsw-team-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 48px rgba(0,0,0,.14);
}

/* Foto-Bereich: Hochformat 3∶4 */
.gsw-team-card__photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
	background: linear-gradient(160deg, #c0392b 0%, #7b1e14 100%);
	flex-shrink: 0;
}

.gsw-team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 600ms var(--ease);
}

.gsw-team-card:hover .gsw-team-card__img {
	transform: scale(1.06);
}

/* Initialen-Fallback: groß, halbtransparent über dem Rot-Verlauf */
.gsw-team-card__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	font-weight: 800;
	color: rgba(255,255,255,.28);
	letter-spacing: -0.03em;
	pointer-events: none;
	user-select: none;
}

/* Schmaler roter Akzentstreifen unten am Foto */
.gsw-team-card__photo::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--red);
}

/* Text-Bereich */
.gsw-team-card__body {
	padding: 16px 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}

.gsw-team-card__name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	display: block;
	margin-bottom: 5px;
}

.gsw-team-card__subjects {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.45;
	display: block;
	margin-bottom: 4px;
}

.gsw-team-card__role {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: block;
}

.gsw-team-card__email {
	font-size: 0.72rem;
	color: var(--ink-3);
	word-break: break-all;
	text-decoration: none;
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	transition: color 150ms var(--ease);
}

.gsw-team-card__email:hover,
.gsw-team-card__email:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

/* Fokus-Sichtbarkeit WCAG 2.4.11 */
.gsw-team-card:focus-within {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

/* Dark-Mode */
body.dark .gsw-team-card {
	background: rgba(255,255,255,.05);
	box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

body.dark .gsw-team-card:hover {
	box-shadow: 0 20px 48px rgba(0,0,0,.5);
}

body.dark .gsw-team-card__name     { color: rgba(255,255,255,.92); }
body.dark .gsw-team-card__subjects { color: rgba(255,255,255,.82); }
body.dark .gsw-team-card__role     { color: rgba(255,255,255,.38); }

/* ==========================================================================
   Bereichsübersicht — [gsw_section_overview]
   ========================================================================== */

.gsw-section-overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-block: 2rem 1rem;
}

.gsw-sov-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 180ms, border-color 180ms, transform 180ms;
}

.gsw-sov-card:hover,
.gsw-sov-card:focus-visible {
	border-color: var(--red);
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

.gsw-sov-card:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

.gsw-sov-card__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--paper-2);
	border-radius: var(--r-md);
	color: var(--red);
	transition: background 180ms;
}

.gsw-sov-card:hover .gsw-sov-card__icon,
.gsw-sov-card:focus-visible .gsw-sov-card__icon {
	background: color-mix(in srgb, var(--red) 10%, transparent);
}

.gsw-sov-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gsw-sov-card__title {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gsw-sov-card__desc {
	font-size: .78rem;
	color: var(--ink-2);
	line-height: 1.3;
}

.gsw-sov-card__arrow {
	flex-shrink: 0;
	color: var(--ink-3);
	transition: transform 180ms, color 180ms;
}

.gsw-sov-card:hover .gsw-sov-card__arrow,
.gsw-sov-card:focus-visible .gsw-sov-card__arrow {
	color: var(--red);
	transform: translateX(3px);
}

/* Intro-Text oberhalb der Karten */
.entry-content > p:last-of-type + .gsw-section-overview,
.entry-content > .gsw-section-overview:first-child {
	margin-top: 1.5rem;
}

/* Dark-Mode */
body.dark .gsw-sov-card {
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.1);
}

body.dark .gsw-sov-card:hover,
body.dark .gsw-sov-card:focus-visible {
	border-color: var(--red);
	box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

body.dark .gsw-sov-card__icon  { background: rgba(255,255,255,.07); }
body.dark .gsw-sov-card__title { color: rgba(255,255,255,.92); }
body.dark .gsw-sov-card__desc  { color: rgba(255,255,255,.5); }
body.dark .gsw-sov-card__arrow { color: rgba(255,255,255,.3); }

/* War auf 480px begrenzt, obwohl der Rest der Seite durchgaengig 860px als
   Mobile-Grenze nutzt (Bottom-Nav, alle Runde-1-bis-10-Anpassungen). Im
   Bereich 481-860px blieb dadurch das zweispaltige Basis-Grid aktiv --
   pro Karte oft nur ~150-170px breit, Titel/Beschreibung liefen sichtbar
   ab (z. B. "Beschwerdemanagement", "Sprechzeiten der Lehrkraefte" auf
   /service/, bei 600px Breite per Screenshot bestaetigt). Betrifft jede
   Seite mit [gsw_section_overview] (Service, Profilbereich u.a.). */
@media (max-width: 860px) {
	.gsw-section-overview {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Profilklassen — [gsw_profil_header]
   ========================================================================== */

/* Klassenfarben: --profil-* Tokens aus variables.css (dort dokumentiert als
   bewusste CI-Erweiterung, current-state.md 2026-08-15, Audit-Punkt 6). */
/* Berufsorientierung-Tabs */
.gsw-profil-tab--bo-konzept[aria-selected="true"]   { border-bottom-color: var(--profil-bo-konzept); color: var(--profil-bo-konzept); }
.gsw-profil-tab--bo-angebote[aria-selected="true"]  { border-bottom-color: var(--profil-bo-angebote); color: var(--profil-bo-angebote); }
.gsw-profil-tab--bo-woche[aria-selected="true"]     { border-bottom-color: var(--profil-bo-woche); color: var(--profil-bo-woche); }
.gsw-profil-tab--bo-downloads[aria-selected="true"] { border-bottom-color: var(--profil-bo-downloads); color: var(--profil-bo-downloads); }
body.dark .gsw-profil-tab--bo-konzept[aria-selected="true"]   { color: var(--profil-bo-konzept); border-bottom-color: var(--profil-bo-konzept); }
body.dark .gsw-profil-tab--bo-angebote[aria-selected="true"]  { color: var(--profil-bo-angebote); border-bottom-color: var(--profil-bo-angebote); }
body.dark .gsw-profil-tab--bo-woche[aria-selected="true"]     { color: var(--profil-bo-woche); border-bottom-color: var(--profil-bo-woche); }
body.dark .gsw-profil-tab--bo-downloads[aria-selected="true"] { color: var(--profil-bo-downloads); border-bottom-color: var(--profil-bo-downloads); }

/* MINT-Projekte-Tabs */
.gsw-profil-header--mint-lernorte { --pk-color: var(--profil-mint-lernorte); --pk-bg: var(--profil-mint-lernorte-bg); }
.gsw-profil-header--mint-kurse    { --pk-color: var(--profil-mint-kurse); --pk-bg: var(--profil-mint-kurse-bg); }
.gsw-profil-header--mint-events   { --pk-color: var(--profil-mint-events); --pk-bg: var(--profil-mint-events-bg); }
.gsw-profil-tab--mint-lernorte[aria-selected="true"] { border-bottom-color: var(--profil-mint-lernorte); color: var(--profil-mint-lernorte); }
.gsw-profil-tab--mint-kurse[aria-selected="true"]    { border-bottom-color: var(--profil-mint-kurse); color: var(--profil-mint-kurse); }
.gsw-profil-tab--mint-events[aria-selected="true"]   { border-bottom-color: var(--profil-mint-events); color: var(--profil-mint-events); }
body.dark .gsw-profil-tab--mint-lernorte[aria-selected="true"] { color: var(--profil-mint-lernorte); border-bottom-color: var(--profil-mint-lernorte); }
body.dark .gsw-profil-tab--mint-kurse[aria-selected="true"]    { color: var(--profil-mint-kurse); border-bottom-color: var(--profil-mint-kurse); }
body.dark .gsw-profil-tab--mint-events[aria-selected="true"]   { color: var(--profil-mint-events); border-bottom-color: var(--profil-mint-events); }

.gsw-profil-header--kulturscout { --pk-color: var(--profil-kulturscout); --pk-bg: var(--profil-kulturscout-bg); }
.gsw-profil-header--fit         { --pk-color: var(--profil-fit); --pk-bg: var(--profil-fit-bg); }
.gsw-profil-header--forscher    { --pk-color: var(--profil-forscher); --pk-bg: var(--profil-forscher-bg); }
.gsw-profil-header--blaeser     { --pk-color: var(--profil-blaeser); --pk-bg: var(--profil-blaeser-bg); }
/* Abteilungen */
.gsw-profil-header--abt-i      { --pk-color: var(--profil-abt-i); --pk-bg: var(--profil-abt-i-bg); }
.gsw-profil-header--abt-ii     { --pk-color: var(--profil-abt-ii); --pk-bg: var(--profil-abt-ii-bg); }
.gsw-profil-header--oberstufe  { --pk-color: var(--profil-oberstufe); --pk-bg: var(--profil-oberstufe-bg); }

.gsw-profil-header {
	--pk-color: var(--red);
	--pk-bg: var(--paper-2);
	background: var(--pk-bg);
	border-left: 4px solid var(--pk-color);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: 16px 20px;
	margin-bottom: 2rem;
}

.gsw-profil-header__sub {
	font-size: .9rem;
	font-weight: 600;
	color: var(--pk-color);
	margin: 0 0 12px;
	letter-spacing: .01em;
}

.gsw-profil-header__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.gsw-profil-fact {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: var(--ink-2);
}

.gsw-profil-fact svg {
	color: var(--pk-color);
	flex-shrink: 0;
}

/* Dark-Mode */
body.dark .gsw-profil-header {
	background: rgba(255,255,255,.05);
	border-left-color: var(--pk-color);
}

body.dark .gsw-profil-header__sub { color: var(--pk-color); filter: brightness(1.3); }
body.dark .gsw-profil-fact        { color: rgba(255,255,255,.6); }

/* Inhaltsseiten: Abschnittsüberschriften leicht abgesetzt */
.entry-content .gsw-profil-header + p { margin-top: 0; }

@media (max-width: 560px) {
	.gsw-profil-header__facts { flex-direction: column; gap: 6px; }
}
body.dark .gsw-team-card__email    { color: rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.1); }

/* ==========================================================================
   Profilklassen-Tabs — [gsw_profilklassen_tabs]
   ========================================================================== */

.gsw-profil-tabs {
	margin-block: 1.5rem;
}

/* Tab-Leiste */
.gsw-profil-tabs__bar {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 2px solid var(--line);
	padding-bottom: 0;
	scrollbar-width: none;
}

.gsw-profil-tabs__bar::-webkit-scrollbar { display: none; }

.gsw-profil-tab {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	background: none;
	font: inherit;
	font-size: .88rem;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
	border-radius: var(--r-btn) var(--r-btn) 0 0;
	transition: color 160ms, border-color 160ms, background 160ms;
}

.gsw-profil-tab:hover {
	color: var(--ink);
	background: var(--paper-2);
}

.gsw-profil-tab:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: -2px;
}

/* Aktiver Tab erhält die Klassenfarbe als Unterstrich */
.gsw-profil-tab[aria-selected="true"] {
	color: var(--ink);
	font-weight: 700;
}

.gsw-profil-tab--kulturscout[aria-selected="true"] { border-bottom-color: var(--profil-kulturscout); color: var(--profil-kulturscout); }
.gsw-profil-tab--fit[aria-selected="true"]         { border-bottom-color: var(--profil-fit); color: var(--profil-fit); }
.gsw-profil-tab--forscher[aria-selected="true"]    { border-bottom-color: var(--profil-forscher); color: var(--profil-forscher); }
.gsw-profil-tab--blaeser[aria-selected="true"]     { border-bottom-color: var(--profil-blaeser); color: var(--profil-blaeser); }
.gsw-profil-tab--abt-i[aria-selected="true"]       { border-bottom-color: var(--profil-abt-i); color: var(--profil-abt-i); }
.gsw-profil-tab--abt-ii[aria-selected="true"]      { border-bottom-color: var(--profil-abt-ii); color: var(--profil-abt-ii); }
.gsw-profil-tab--oberstufe[aria-selected="true"]   { border-bottom-color: var(--profil-oberstufe); color: var(--profil-oberstufe); }

/* Tab-Icons */
.gsw-profil-tab svg { flex-shrink: 0; }

/* Panels */
.gsw-profil-tabs__panels {
	padding-top: 1.5rem;
}

.gsw-profil-panel:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 4px;
	border-radius: var(--r-sm);
}

/* Direkt-Link am Panel-Ende */
.gsw-profil-panel__permalink {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.gsw-profil-panel__permalink a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	color: var(--ink-3);
	text-decoration: none;
}

.gsw-profil-panel__permalink a:hover,
.gsw-profil-panel__permalink a:focus-visible {
	color: var(--red);
	text-decoration: underline;
}

/* Dark-Mode */
body.dark .gsw-profil-tab         { color: rgba(255,255,255,.5); }
body.dark .gsw-profil-tab:hover   { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
body.dark .gsw-profil-tab[aria-selected="true"] { color: inherit; }
body.dark .gsw-profil-tab--kulturscout[aria-selected="true"] { color: var(--profil-kulturscout); border-bottom-color: var(--profil-kulturscout); }
body.dark .gsw-profil-tab--fit[aria-selected="true"]         { color: var(--profil-fit); border-bottom-color: var(--profil-fit); }
body.dark .gsw-profil-tab--forscher[aria-selected="true"]    { color: var(--profil-forscher); border-bottom-color: var(--profil-forscher); }
body.dark .gsw-profil-tab--blaeser[aria-selected="true"]     { color: var(--profil-blaeser); border-bottom-color: var(--profil-blaeser); }
body.dark .gsw-profil-tab--abt-i[aria-selected="true"]       { color: var(--profil-abt-i); border-bottom-color: var(--profil-abt-i); }
body.dark .gsw-profil-tab--abt-ii[aria-selected="true"]      { color: var(--profil-abt-ii); border-bottom-color: var(--profil-abt-ii); }
body.dark .gsw-profil-tab--oberstufe[aria-selected="true"]   { color: var(--profil-oberstufe); border-bottom-color: var(--profil-oberstufe); }

@media (max-width: 600px) {
	.gsw-profil-tab { padding: 8px 12px; font-size: .82rem; gap: 5px; }
	.gsw-profil-tab svg { display: none; }
}

/* ==========================================================================
   Padlet 2-Klick-Consent — [gsw_padlet]
   ========================================================================== */

.gsw-padlet-consent {
	margin-block: 1.5rem;
}

.gsw-padlet-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 24px;
	background: var(--paper-2);
	border: 2px dashed var(--line);
	border-radius: var(--r-md);
	text-align: center;
}

.gsw-padlet-icon { flex-shrink: 0; }

.gsw-padlet-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.gsw-padlet-pw {
	font-size: .9rem;
	color: var(--ink-2);
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	padding: 6px 12px;
}

.gsw-padlet-pw code {
	background: none;
	font-family: monospace;
	font-size: 1rem;
	color: var(--red);
	font-weight: 700;
	letter-spacing: .05em;
}

.gsw-padlet-notice {
	font-size: .78rem;
	color: var(--ink-3);
	max-width: 480px;
	margin: 0;
	line-height: 1.5;
}

.gsw-padlet-load-btn {
	padding: 10px 24px;
	background: var(--red);
	color: #fff;
	border: none;
	border-radius: var(--r-btn);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 160ms;
}

.gsw-padlet-load-btn:hover  { background: var(--red-deep); }
.gsw-padlet-load-btn:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

body.dark .gsw-padlet-placeholder { border-color: rgba(255,255,255,.12); }
body.dark .gsw-padlet-pw          { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

/* ==========================================================================
   YouTube Lite-Consent — [gsw_youtube]
   ========================================================================== */

.gsw-yt {
	position: relative;
	display: block;
	background: #000;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--r-md);
	cursor: pointer;
	margin-block: 1.5rem;
}

.gsw-yt__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	transition: opacity 200ms;
}

.gsw-yt:hover .gsw-yt__thumb { opacity: .7; }

.gsw-yt__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: transform 200ms;
}

.gsw-yt:hover .gsw-yt__play { transform: scale(1.08); }

.gsw-yt__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
	border-radius: var(--r-sm);
}

/* YouTube-roter Play-Button */
.gsw-yt__btn-bg   { fill: #ff0000; }
.gsw-yt__btn-arrow { fill: #fff; }

.gsw-yt__btn-icon {
	width: clamp(48px, 10vw, 68px);
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
	transition: filter 200ms;
}

.gsw-yt:hover .gsw-yt__btn-icon { filter: drop-shadow(0 4px 16px rgba(0,0,0,.7)); }

.gsw-yt__notice {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 8px 12px;
	background: linear-gradient(transparent, rgba(0,0,0,.7));
	color: rgba(255,255,255,.85);
	font-size: .72rem;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

.gsw-yt__notice a {
	color: rgba(255,255,255,.9);
	pointer-events: all;
}

.gsw-yt__notice a:hover { text-decoration: underline; }

.gsw-yt--loaded { cursor: default; aspect-ratio: auto; }

/* Alten Wrapper-Stil abwärtskompatibel halten */
.gsw-youtube-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--r-md);
	margin-block: 1.5rem;
}
.gsw-youtube-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ==========================================================================
   PDF-Vorschaukarte — [gsw_pdf]
   ========================================================================== */

.gsw-pdf-card {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-block: 1.5rem;
}

.gsw-pdf-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--paper-2);
	flex-wrap: wrap;
}

.gsw-pdf-card__icon {
	flex-shrink: 0;
	color: #c0392b;
}

.gsw-pdf-card__title {
	flex: 1;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink);
	word-break: break-word;
}

.gsw-pdf-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.gsw-pdf-toggle {
	padding: 7px 14px;
	border: 1px solid var(--red);
	border-radius: var(--r-btn);
	background: none;
	color: var(--red);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 150ms, color 150ms;
}

.gsw-pdf-toggle:hover,
.gsw-pdf-toggle[aria-expanded="true"] {
	background: var(--red);
	color: #fff;
}

.gsw-pdf-toggle:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

.gsw-pdf-dl {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	background: var(--paper);
	color: var(--ink-2);
	font-size: .82rem;
	text-decoration: none;
	transition: border-color 150ms, color 150ms;
}

.gsw-pdf-dl:hover { border-color: var(--red); color: var(--red); }

.gsw-pdf-card__preview {
	border-top: 1px solid var(--line);
	background: var(--paper);
}

.gsw-pdf-card__preview iframe { display: block; width: 100%; border: none; }

/* Dark-Mode */
body.dark .gsw-pdf-card        { border-color: rgba(255,255,255,.1); }
body.dark .gsw-pdf-card__head  { background: rgba(255,255,255,.04); }
body.dark .gsw-pdf-card__title { color: rgba(255,255,255,.9); }
body.dark .gsw-pdf-dl          { background: transparent; border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }

/* ==========================================================================
   Schulprogramm — rohe <details>/<summary>-Aufklappboxen
   Einzige Seite mit unformatierten details-Tags im Fließtext; ohne eigenes
   Styling nur das winzige native Browser-Dreieck, kaum erkennbar. Optik an
   das bestehende FAQ-Akkordeon angelehnt (.gsw-faq__*).
   ========================================================================== */

.post-446 details {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper-2);
	margin-block: 1.5rem;
	padding-inline: 16px;
}

.post-446 summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-block: 14px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color 140ms var(--ease);
}

.post-446 summary::-webkit-details-marker { display: none; }
.post-446 summary::marker { display: none; }

.post-446 summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	transform: rotate(45deg);
	transition: transform 200ms var(--ease);
}

.post-446 details[open] summary::after {
	transform: rotate(-135deg);
}

.post-446 summary:hover {
	color: var(--red);
}

.post-446 summary:focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 3px;
	border-radius: 3px;
}

.post-446 details > div {
	padding-bottom: 18px;
}

body.dark .post-446 details { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }

/* ==========================================================================
   Schul-IT-Anmeldung — [gsw_it_signup]
   ========================================================================== */

.gsw-it-signup__intro-steps {
	margin: 1rem 0;
	padding-left: 1.3rem;
}

.gsw-it-signup__intro-steps li { margin-bottom: .4rem; }

.gsw-it-signup__hint {
	background: var(--paper-2);
	border-left: 3px solid var(--red);
	border-radius: var(--r-md);
	padding: 12px 16px;
	font-size: .92rem;
	color: var(--ink-2);
	margin: 1rem 0;
}

.gsw-it-signup__download-link {
	font-weight: 600;
	color: var(--red);
	text-decoration: none;
}

.gsw-it-signup__download-link:hover { text-decoration: underline; }

.gsw-it-signup__steps {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsw-it-signup__step {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 20px 22px;
}

.gsw-it-signup__step h2 { margin: 0 0 .5rem; font-size: 1.15rem; }

.gsw-it-signup__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--line);
	font-weight: 600;
	cursor: pointer;
}

.gsw-it-signup__check input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--red);
}

.gsw-it-signup__submit-block {
	margin-top: 2rem;
	padding: 24px;
	background: var(--paper-2);
	border-radius: var(--r-md);
}

.gsw-it-signup__submit-block h2 { margin: 0 0 .3rem; }

.gsw-it-signup__field {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin: 1rem 0 0;
}

.gsw-it-signup__field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.gsw-it-signup__submit {
	margin-top: 1.4rem;
}

.gsw-it-signup__submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.gsw-it-signup__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gsw-it-signup__notice {
	padding: 14px 18px;
	border-radius: var(--r-md);
	margin-bottom: 1.2rem;
	font-weight: 600;
}

.gsw-it-signup__notice--error {
	background: color-mix(in srgb, var(--red) 12%, transparent);
	color: var(--red);
	border: 1px solid var(--red);
}

.gsw-it-signup__success {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-left: 4px solid var(--red);
	border-radius: var(--r-md);
	padding: 28px 26px;
}

.gsw-it-signup__success-eyebrow {
	margin: 0 0 8px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--red);
}

.gsw-it-signup__success h2 { margin: 0 0 .6rem; }

.gsw-it-signup__download-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 1rem;
	padding: 12px 22px;
	background: var(--red);
	color: #fff;
	border-radius: var(--r-btn);
	font-weight: 600;
	text-decoration: none;
}

.gsw-it-signup__download-btn:hover { opacity: .9; }

/* Dark-Mode */
body.dark .gsw-it-signup__step,
body.dark .gsw-it-signup__success   { border-color: rgba(255,255,255,.1); }
body.dark .gsw-it-signup__hint,
body.dark .gsw-it-signup__submit-block,
body.dark .gsw-it-signup__success   { background: rgba(255,255,255,.04); }
body.dark .gsw-it-signup__field input { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); }

/* ==========================================================================
   Newsfeed — [gsw_newsfeed]
   ========================================================================== */

.gsw-newsfeed {
	margin-block: 3rem 1rem;
	padding-top: 1.5rem;
	border-top: 3px solid var(--red);
}

.gsw-newsfeed__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}

.gsw-newsfeed__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--red);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.gsw-newsfeed__more {
	font-size: .8rem;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.gsw-newsfeed__more:hover { color: var(--red); text-decoration: underline; }

/* Kartenraster ohne eigenen Hintergrund -- an die Personenkarten
   angelehnt (Foto hochkant oben, Text darunter), aber bewusst ohne
   Karten-Flaeche/Schatten. auto-fit statt auto-fill: bei einer nicht
   durch die Spaltenzahl teilbaren Postanzahl blieb sonst eine leere
   Rasterzelle stehen, die durch den (jetzt entfernten) Grid-Hintergrund
   als haessliche Beige-Flaeche sichtbar wurde (current-state.md 2026-08-23).
   minmax(...,1fr) statt einem festen Max-Wert -- bei zwei definiten
   Laengen (z. B. minmax(200px,320px)) berechnet der Browser die
   auto-fit-Spaltenzahl aus dem MAX-Wert statt dem Min-Wert und haette
   hier auf 660px Breite nur 1 statt 3 Spalten ergeben (echt gemessen
   und nachvollzogen, current-state.md 2026-08-23) -- dasselbe Muster
   wie bereits bei .gsw-team-cards. */
.gsw-newsfeed__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 28px;
}

/* Ueberschreibt dieselbe globale "li + li"-Fliesstext-Regel wie bei
   .seals-row (siehe dortiger Kommentar) -- betraf hier jede Karte ausser
   der ersten in jeder Zeile, sichtbar sobald das Grid mehrspaltig wird. */
.gsw-newsfeed__list li {
	margin-top: 0;
}

.gsw-newsfeed__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.gsw-newsfeed__thumb {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--neutral);
	margin-bottom: 12px;
}

.gsw-newsfeed__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease);
}

.gsw-newsfeed__link:hover .gsw-newsfeed__thumb img { transform: scale(1.06); }

.gsw-newsfeed__thumb--placeholder {
	background: var(--paper-2);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
}

.gsw-newsfeed__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gsw-newsfeed__date {
	font-size: .72rem;
	color: var(--ink-3);
}

.gsw-newsfeed__post-title {
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsw-newsfeed__link:hover .gsw-newsfeed__post-title { color: var(--red); }

.gsw-newsfeed__excerpt {
	font-size: .8rem;
	color: var(--ink-2);
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsw-newsfeed__link:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* Mobile: statt hochkanter Karten (Bild oben, Text darunter) eine
   kompakte Liste mit kleinem Bild links -- die grosse 3:4-Kartenform
   sprengte auf schmalen Bildschirmen die Seite (current-state.md,
   Nutzer-Feedback 2026-08-27). */
@media (max-width: 560px) {
	.gsw-newsfeed__list {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.gsw-newsfeed__link {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.gsw-newsfeed__thumb {
		width: 84px;
		flex-shrink: 0;
		margin-bottom: 0;
	}

	.gsw-newsfeed__excerpt {
		display: none;
	}
}

/* ======================================================================
   Audit Runde 4 — Mobile-Nachbesserungen (nur ≤860px, Desktop unveraendert)
   Praezise per Playwright-Screenshot verifiziert, siehe current-state.md
   ====================================================================== */

@media (max-width: 860px) {

	/* ---- 1) News-Hero: Karte wieder so breit wie Termine-/Schulentwicklungs-
	   Karte, mit gerundeten Ecken -- Runde 5 liess Karte UND Bild randlos bis
	   an den Bildschirmrand ausbrechen ("randlos" war als Vorgabe missverstanden
	   worden); Nutzer-Feedback: Wrapper wirkt dadurch zu gross, alle Wrapper
	   sollen gleich breit sein (wie .events-col/.schulentwicklung-col) und
	   weiterhin abgerundete Ecken haben. Die eigentliche Karten-/Spaltenbreite
	   kam urspruenglich einheitlich von .gsw-top-row.wrap's eigenem, gemeinsamen
	   Innenabstand (var(--gutter)) -- Runde 4/5 hatten dieses Padding auf 0
	   gesetzt und mussten es fuer alle ANDEREN Spalten manuell wieder ergaenzen.
	   Jetzt komplett zurueckgebaut: .gsw-top-row.wrap behaelt seinen normalen
	   Innenabstand, wodurch News-Hero automatisch exakt dieselbe Breite wie
	   Termine-/Schulentwicklungs-Karte bekommt (beide Kinder desselben
	   gepolsterten Grids) -- kein separates margin-inline pro Spalte noetig,
	   dadurch auch kein Risiko einer Abweichung zwischen den Formeln.
	   Die Standard-Kartenrundung (border-radius) greift wieder automatisch. */

	/* ---- Bild: "etwas Abstand" von den Kartenraendern, aber deutlich
	   weniger als der volle Textinnenabstand (20-21px) -- Runde 5's Bild-
	   Fix (Breite exakt = Kartenbreite) war komplett randlos, das wirkte laut
	   Nutzer-Feedback zu gross/hart. Jetzt bricht nur noch das Bild leicht
	   (10px) aus .hero-feature's eigenem, unveraenderten Karten-Innenabstand
	   aus -- ein Mittelweg zwischen "randlos" (Runde 5) und "voll eingerahmt
	   wie der Text" (vor Runde 4). Explizite Breite statt auto noetig, da
	   Grid-Items mit aspect-ratio bei auto-Breite nicht zuverlaessig stretchen
	   (siehe vorherige Notiz zu Chromium). Eigene, dezente Rundung, da das
	   Bild die Kartenkante nicht mehr beruehrt. */
	.card-body-zone .hero-feature .media {
		width: calc(100% + 20px);
		margin-inline: -10px;
		border-radius: var(--r-md);
	}

	.card-body-zone .hero-feature__body {
		padding-top: clamp(16px, 2vw, 20px);
	}

	/* ---- 2) Ueberschrift vs. Teaser vs. Buttons: zu wenig Kontrast ----
	   Teaser lag mit --text-sm (15px) fast auf Hoehe der Ueberschrift
	   (min. 16.8px) -- Teaser und Buttons verkleinert statt Ueberschrift
	   zu vergroessern (Nutzer-Vorgabe: "Text etwas kleiner machen"). */
	.news-hero .hero-feature .teaser,
	.hero-feature__body .teaser {
		font-size: 13px;
	}

	.hero-feature__body .hero-btns .btn {
		padding: 9px 16px;
		font-size: 13px;
	}

	/* ---- 3) Sekundaere Aktuelles-Beitraege: deutlich groesseres Bild,
	   kein Excerpt. War mit 84px immer noch klein gegenueber der
	   verfuegbaren Kartenbreite (292px) -- jetzt 40 % der Kartenbreite,
	   Bild und Textspalte deutlich ausgewogener. */
	.news-item--compact {
		grid-template-columns: minmax(0, 40%) 1fr;
		gap: 14px;
	}

	.news-item--compact p {
		display: none;
	}

	/* ---- 5) Termine-Wrapper siehe vorherige Media-Query weiter oben
	   (Audit Runde "Mobile-Fixes" — Datumskreise/Schrift bereits kompakt) */

	/* ---- 6) Siegel: genau eine zentrierte Kachel, kein Scroll-Padding-
	   Versatz mehr. Vorherige Fassung liess .seals-row selbst per negativer
	   Marge ausbrechen UND ein eigenes padding-inline (fuer das alte
	   Mehr-Kacheln-Peek-Design) behalten -- bei width:100% je Kachel
	   ergab das durch den Scroll-Snap-Ausgangsversatz eine sichtbar nach
	   links gerutschte Kachel mit 40px Luecke rechts (per CDP-Messung
	   nachvollzogen). Jetzt bleibt .seals-row unausgebrochen, exakt so
	   breit wie die Ueberschrift daneben -- Kachel darin ist dadurch
	   automatisch zentriert/buendig, kein Restversatz mehr moeglich. */
	.seals-row {
		margin-inline: 0;
		padding-inline: 0;
	}

	.seals-row li {
		width: 100%;
		max-width: none;
		flex: 0 0 100%;
	}

	/* Runde 6: Der volle Bildschirm-Ausbruch der Hintergrundflaeche (Runde 5)
	   wirkte laut Nutzer-Feedback zu gross -- .seals .wrap bekam damals ein
	   eigenes, an die Kartenformel angeglichenes padding-inline, WEIL .seals
	   selbst noch keinen eigenen Rand hatte. Runde 7 gibt .seals jetzt (wie
	   allen anderen .gsw-card-Sektionen, siehe unten) direkt sein eigenes
	   margin-inline -- .seals .wrap braucht dadurch keine eigene Override
	   mehr und faellt zurueck auf sein normales .wrap-Standardpadding
	   (var(--gutter)), genau wie bei den anderen Sektionen auch. */

	/* Eyebrow, Ueberschrift und Textblock zentriert statt nebeneinander
	   (Desktop-Layout: Titel links, Beschreibung rechts daneben -- auf
	   schmalem Mobil-Bildschirm wirkte das gequetscht bzw. wie zufaellig
	   verteilter Text). Gilt fuer alle drei Teile gemeinsam. */
	.seals-head {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.seals-head h2,
	.seals-sub {
		margin-inline: auto;
	}

	.seals-sub {
		align-self: center;
	}

	/* ---- Runde 7: Alle weiteren Homepage-Abschnitte ab "Ausgezeichnet"
	   (Siegel, "Eine Schule. Tausend Geschichten.", "Was Sie haeufig
	   suchen", Profil, "Was kommt"/Termine, Kontakt-Abschluss) sind
	   .gsw-card-Sektionen direkt in .site-main.gsw-homepage und erbten
	   bislang nur dessen minimalen, sitebreiten Rand (8px) -- dadurch
	   wirkten sie deutlich breiter als News-Hero-/Termine-/Schulentwicklungs-
	   Karte (die zusaetzlich ihr eigenes margin-inline haben). Jetzt
	   bekommen alle betroffenen Abschnitte denselben zusaetzlichen Rand,
	   damit ihre sichtbare Kartenbreite ebenfalls exakt der Vergleichskarten
	   entspricht. Jede dieser Sektionen hat innen bereits einen eigenen
	   .wrap-Container mit eigenem Innenabstand (identischer Aufbau wie
	   .seals .wrap) -- der Inhalt bekommt dadurch automatisch ein zweites,
	   kleineres Innenpolster, genau wie bei den Termine-/Schulentwicklungs-
	   Karten (aussen Kartenrand, innen zusaetzliches Text-Padding).

	   Runde 8: .gsw-home-principal-welcome ("Willkommen") fehlte in dieser
	   Liste -- hat zwar keine .gsw-card-Klasse (kein sichtbarer Rahmen/
	   Rundung), war aber als eigene direkte .site-main-Sektion trotzdem
	   noch auf der vollen 374px-Breite und dadurch spuerbar breiter als die
	   Vergleichskarten. __inner hat (seit Runde 6) bereits sein eigenes
	   Innenabstand-Padding -- durch den jetzt ergaenzten Aussenrand entsteht
	   dasselbe zweistufige Innenpolster-Muster wie bei den anderen fuenf
	   Abschnitten. */
	.seals,
	.strip,
	.quicks-section,
	.profil,
	.termine-section,
	.service-end,
	.gsw-home-principal-welcome {
		margin-inline: clamp(20px, 2.5vw, 28px);
	}

	/* Runde 9: .gsw-home-principal-welcome war der einzige der jetzt gleich
	   breiten Wrapper ohne abgerundete Ecken/Kontur -- .events-col und
	   .schulentwicklung-col nutzen dafuer die Klassen-Kombination
	   .gsw-card.gsw-section--paper (border-radius + umlaufender Rahmen +
	   4px dunkler Akzent oben, siehe Zeile ~2829). .gsw-home-principal-
	   welcome hat keine dieser Klassen, sondern nur eine eigene Basisregel
	   mit border-block (nur oben/unten). Hier exakt dasselbe visuelle
	   Ergebnis nachgebaut, ohne die Klassen im Markup zu aendern. */
	.gsw-home-principal-welcome {
		border-radius: var(--r-lg);
		overflow: hidden;
		border: 1px solid var(--line);
		border-top: 4px solid var(--ink);
	}

	/* ---- 7) Untere Mobil-Navigation: "Menue"-Button war nur halb so breit
	   wie die <a>-Links (Browser-Default fuer <button> in Grid/Flex-Zellen
	   stretcht nicht automatisch) -- dadurch wirkte er nach rechts verschoben
	   und der Text war nicht mittig zu den anderen vier Eintraegen. ---- */
	.gsw-mobile-nav__btn {
		width: 100%;
	}

	/* Runde 7/9 vermuteten hier faelschlich einen Chromium-Grid/Flex-
	   Stretch-Rechenfehler und versuchten ihn mit align-items:start bzw.
	   einem Wechsel von Grid auf Flexbox zu umgehen -- beides linderte das
	   Symptom bei bestimmten Breiten, loeste es aber nicht zuverlaessig.
	   Runde 10, per CDP (CSS.getMatchedStylesForNode) endlich die
	   tatsaechliche Ursache gefunden: die globale Fliesstext-Regel
	   "li + li { margin-top: .35em }" (fuer normale Inhalts-Listen in
	   Beitraegen/Seiten gedacht) vererbte sich ungewollt auch in diese
	   Navigationsleiste -- betraf jeden Eintrag AUSSER dem ersten (der hat
	   keinen vorherigen li-Nachbarn, "li + li" greift nicht). Kein Browser-
	   Bug, sondern ein ganz gewoehnlicher CSS-Kaskaden-Konflikt, den keine
	   der bisherigen Höhen-Messungen aufgedeckt hatte (Hoehe war immer
	   gleich -- nur die Y-Position durch den Rand-Versatz nicht). Fix:
	   margin-top:0 direkt auf .gsw-mobile-nav__item (Basis-Regel, Zeile
	   ~957). display:flex + align-items:flex-start bleiben als robusterer
	   Layoutmodus bestehen, sind fuer den eigentlichen Fehler aber nicht
	   mehr die entscheidende Regel. Per Playwright erneut ueber den
	   gesamten sichtbaren Breitenbereich verifiziert: alle fuenf Eintraege
	   jetzt exakt gleiche Y-Position UND Hoehe. */

	/* Runde 9: Eintraege hoben sich laut Nutzer-Feedback zu wenig vom
	   Hintergrund ab -- duenner roter Rahmen ergaenzt. */
	.gsw-mobile-nav__link,
	.gsw-mobile-nav__btn {
		background: var(--neutral);
		border: 1px solid var(--red);
		border-radius: var(--r-sm);
	}

	.gsw-mobile-nav__link.is-current,
	.gsw-mobile-nav__btn:hover {
		background: var(--warm);
	}

	/* ---- 8) "Orientierung"-Wrapper: Foto und Willkommenstext gehoerten
	   optisch nicht mehr zusammen, da .aside (Foto+Zitat-Karte) komplett
	   VOR .content (Willkommen-Ueberschrift) lag. Loesung: beide Wrapper
	   sowie die Zitat-Karte werden per display:contents "aufgeloest", damit
	   jedes einzelne Element im gemeinsamen Grid eine eigene order-Position
	   bekommt -- Foto direkt gefolgt von "Willkommen", die bisherigen
	   Kartentexte (Ueberschrift/Absatz/Zitat/Kontakt-Link) wandern als zwei
	   Zitatkacheln in den Lesefluss, statt als separate Karte davor zu
	   stehen. DOM bleibt unveraendert (kein Duplikat-Content fuer
	   Screenreader), nur die visuelle Reihenfolge aendert sich.

	   Nachbesserung: .layout hatte weiterhin sein Desktop-gap von
	   clamp(32px,5vw,72px) -- galt vorher fuer genau 2 Kinder (.content/
	   .aside), wirkt nach dem Aufloesen aber zwischen JEDEM der jetzt ca.
	   10 einzelnen Elemente und riss die als eine Kachel gedachten
	   h3/p/Link-Bloecke sichtbar auseinander. Auf 0 gesetzt, Abstaende
	   jetzt bewusst einzeln per margin gesetzt. Zusaetzlich hatte
	   .inner sein eigenes padding-inline auf die nie definierte Variable
	   --gap gesetzt (rechnet zu 0) -- auf Mobile ergaenzt, betrifft
	   Desktop nicht (dort bleibt --gap weiterhin ungenutzt/0, wie zuvor).

	   Runde 6: Die "Willkommen"-Ueberschrift wirkte trotz text-align:center
	   (Runde 5) weiterhin zu weit links -- Ursache war nicht fehlende
	   Zentrierung, sondern ein zu breiter Wrapper: .inner nutzte
	   clamp(16px,4vw,24px), waehrend Termine-/Schulentwicklungs-Karte
	   effektiv ~20-28px Innenabstand haben -- der zentrierte Text sass
	   dadurch zwar mittig in SEINER EIGENEN, aber zu breiten Box, deren
	   linke Kante schon frueher begann als bei den Vergleichskarten. Auf
	   dieselbe Formel wie die uebrigen Wrapper vereinheitlicht, dadurch
	   jetzt exakt gleiche Breite wie Termine-/Schulentwicklungs-Karte. */
	.gsw-home-principal-welcome__inner {
		padding-inline: clamp(20px, 2.5vw, 28px);
	}

	.gsw-home-principal-welcome__layout {
		gap: 0;
	}

	.gsw-home-principal-welcome__content,
	.gsw-home-principal-welcome__aside,
	.gsw-home-principal-welcome__card {
		display: contents;
	}

	.gsw-home-principal-welcome__card-label {
		display: none;
	}

	.gsw-home-principal-welcome__portrait {
		order: 1;
		margin: 0 auto 20px;
	}

	.gsw-home-principal-welcome__header {
		order: 2;
		text-align: center;
		margin-bottom: 24px;
	}

	.gsw-home-principal-welcome__quote {
		order: 3;
		background: var(--neutral);
		border-radius: var(--r-md);
		border-left: 3px solid var(--red);
		padding: 16px 18px;
		margin: 0 0 24px;
	}

	.gsw-home-principal-welcome__text {
		order: 4;
		margin-bottom: 24px;
	}

	.gsw-home-principal-welcome__card h3 {
		order: 5;
		background: var(--neutral);
		border-radius: var(--r-md) var(--r-md) 0 0;
		border-left: 3px solid var(--yellow);
		padding: 16px 18px 0;
		margin: 0;
	}

	.gsw-home-principal-welcome__card > p {
		order: 5;
		background: var(--neutral);
		border-left: 3px solid var(--yellow);
		padding: 8px 18px 4px;
		margin: 0;
	}

	.gsw-home-principal-welcome__card .gsw-home-principal-welcome__actions-note {
		order: 5;
		background: var(--neutral);
		border-left: 3px solid var(--yellow);
		border-radius: 0 0 var(--r-md) var(--r-md);
		padding: 0 18px 16px;
		margin: 0 0 24px;
	}

	.gsw-home-principal-welcome__values {
		order: 6;
		margin-bottom: 24px;
	}

	.gsw-home-principal-welcome__signature {
		order: 7;
		margin-bottom: 24px;
	}

	.gsw-home-principal-welcome__actions {
		order: 8;
	}
}

/* ---- 9) "Einblicke"-Bildstreifen: Bildunterschrift wurde bei Hover rot ----
   Globales a:hover { color: var(--red) } (Zeile ~92) griff auch hier, da
   .tile selbst ein <a> ist -- rote Schrift auf einem unvorhersehbaren
   Foto-Hintergrund kann den Kontrast-Mindestwert reissen (BFSG/WCAG),
   waehrend die bisherige weisse Schrift bewusst gegen den dunklen
   Verlaufs-Overlay abgestimmt war. Betrifft alle Bildschirmgroessen mit
   Zeigergeraet, nicht nur Mobile. */
.tile:hover .cap {
	color: #fff;
}