/*
Theme Name:  Bitwerft
Theme URI:   https://www.bitwerft.de
Description: Eigenes Theme fuer die Bitwerft-Website. Schlank, barrierearm, ohne Seitenbaukasten.
Author:      Bitwerft GmbH
Version:     1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: bitwerft
*/

/* ==========================================================================
   1. Gestaltungs-Token
   Einzige Quelle fuer Farben, Schrift und Abstaende. Nichts weiter unten
   setzt Farbwerte direkt.
   ========================================================================== */

:root {
	/* Marke, aus dem Logo entnommen */
	--brand:       #0096D7;
	--brand-deep:  #02528F;
	--brand-ink:   #013A66;

	/* Text und Flaechen. Die Neutraltoene sind leicht ins Violette
	   gebrochen, passend zur CI-Textfarbe #565462. */
	--ink:         #2E2C39;
	--body:        #565462;
	--muted:       #7C7A88;
	--paper:       #FFFFFF;
	--surface:     #FFFFFF;
	--surface-2:   #F4F5F8;
	--line:        #E2E2EA;
	--line-soft:   #EDEDF3;
	--band:        #0B2E4D;
	--band-ink:    #DCE7F0;

	/* Schrift. CI ist DIN OT; solange keine Webfont-Lizenz vorliegt,
	   laeuft eine Systemschrift. Nur diese Zeile aendert sich dann. */
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
	        Menlo, Consolas, monospace;

	/* Groessen, fliessend zwischen kleinem und grossem Bildschirm */
	--step--1: clamp(0.80rem, 0.78rem + 0.12vw, 0.875rem);
	--step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
	--step-1:  clamp(1.16rem, 1.10rem + 0.30vw, 1.35rem);
	--step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
	--step-3:  clamp(1.85rem, 1.60rem + 1.15vw, 2.6rem);
	--step-4:  clamp(2.35rem, 1.85rem + 2.35vw, 3.9rem);

	/* Beschriftungen in Versalien: Eyebrow, Spaltenkoepfe, Formularlabels,
	   Statuspillen. Sie standen einzeln zwischen 0.6 und 1.1rem, vierundzwanzig
	   Regeln mit vierundzwanzig Zahlen, und liefen bei jeder Aenderung weiter
	   auseinander. Jetzt drei Stufen an einer Stelle. */
	--label-l:     1.1rem;   /* Abschnittskopf, die auffaelligste */
	--label:       0.9rem;   /* Regelgroesse */
	--label-s:     0.78rem;  /* enge Stellen: Pillen, Tabellenkoepfe, Daten */

	--wrap:        1180px;
	--header-h:    82px;
	--shadow:      0 1px 2px rgba(35,33,48,.05), 0 12px 28px -18px rgba(35,33,48,.28);
	--shadow-lift: 0 18px 40px -24px rgba(35,33,48,.45);
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.021em;
	margin: 0;
	text-wrap: balance;
	/* "Schulentwicklungsplanung", "Ganztagsrechtsanspruch",
	   "Direktauftragsschwellen": in dieser Fachsprache sind lange Komposita
	   der Normalfall. Ohne Silbentrennung schieben sie auf schmalen Geraeten
	   die ganze Seite seitwaerts. Gehoert an die Basis und nicht an einzelne
	   Ueberschriften, sonst fehlt es genau dort, wo niemand nachgesehen hat. */
	hyphens: auto;
	overflow-wrap: break-word;
}

p, ul, ol, figure, table, pre { margin: 0; }

a { color: var(--brand-deep); }

img, svg, video { max-width: 100%; height: auto; }

/* Tastaturbedienung muss sichtbar sein. Teil unserer Barrierefreiheits-
   Zusage und nicht verhandelbar. */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 3px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem; top: -100px;
	z-index: 200;
	background: var(--brand-deep);
	color: #fff;
	padding: 0.7rem 1.1rem;
	border-radius: 0 0 5px 5px;
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s;
}
.skip-link:focus { top: 0; }

.eyebrow {
	font-family: var(--mono);
	font-size: var(--label-l);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-deep);
}

.num, table td { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. Schaltflaechen
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font: inherit;
	font-size: 0.925rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 0.72rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
.btn .arrow { font-family: var(--mono); font-size: 0.9em; transition: transform 0.18s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   4. Kopfbereich
   Eine Flex-Reihe fester Hoehe. Logo und Navigationsblock werden auf volle
   Hoehe gestreckt und zentrieren ihren Inhalt selbst, damit haengt die
   Ausrichtung an keiner Schriftlinie.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: stretch;
	min-height: var(--header-h);
	gap: 2rem;
}

.site-brand { display: flex; align-items: center; flex: none; }
.site-brand a { display: flex; align-items: center; line-height: 0; }
.logo { width: 155px; height: 26px; display: block; }
.logo .lgw { fill: var(--body); }
.logo .lgm { fill: var(--brand); }

.header-nav { display: flex; align-items: center; margin-left: auto; gap: 1.75rem; }

.menu-main { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.menu-main > li { position: relative; display: flex; align-items: center; }
.menu-main > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--body);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.16s, border-color 0.16s;
}
.menu-main > li > a:hover,
.menu-main > li.is-open > a { color: var(--ink); border-bottom-color: var(--brand); }
.menu-main > li.current-menu-item > a { color: var(--ink); }

.caret { width: 9px; height: 9px; flex: none; transition: transform 0.18s; }
.menu-main > li.is-open .caret { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.header-tel {
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
}
.header-tel:hover { color: var(--brand-deep); }

/* ---------- Klappmenues ---------- */

.submenu {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	list-style: none;
	margin: 0;
	padding: 0.6rem;
	min-width: 230px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 2px solid var(--brand);
	border-radius: 0 0 8px 8px;
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.menu-main > li.is-open > .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
	display: block;
	padding: 0.5rem 0.7rem;
	font-size: 0.92rem;
	color: var(--body);
	text-decoration: none;
	border-radius: 4px;
}
.submenu a:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Mega-Menue ---------- */

.menu-main > li.has-mega { position: static; }

.menu-main > li.has-mega > .submenu {
	display: flex;
	gap: 2.5rem;
	width: min(var(--wrap), calc(100vw - 2.5rem));
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	padding: 1.9rem 2.1rem;
}
.menu-main > li.has-mega.is-open > .submenu { transform: translateX(-50%); }

.mega-col { flex: 1 1 0; min-width: 0; }
.mega-head {
	display: block;
	font-family: var(--mono);
	font-size: var(--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 0.55rem;
	margin-bottom: 0.55rem;
	border-bottom: 1px solid var(--line);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a { padding: 0.55rem 0.6rem; }
.mi-title { display: block; font-weight: 600; color: var(--ink); font-size: 0.94rem; }
.mi-desc  { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; line-height: 1.45; }
.mega-col a:hover .mi-title { color: var(--brand-deep); }
.ext { color: var(--brand); font-size: 0.85em; }

/* ---------- Mobil ---------- */

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.85rem;
	color: var(--ink);
	cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
	.header-tel { display: none; }
	.menu-main { gap: 1.2rem; }
	.menu-main > li > a { font-size: 0.88rem; }
}

@media (max-width: 940px) {
	.nav-toggle { display: inline-flex; }
	.header-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem 1.25rem 1.5rem;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lift);
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
	}
	.site-header.nav-open .header-nav { display: flex; }
	.menu-main { flex-direction: column; align-items: stretch; gap: 0; }
	.menu-main > li { display: block; }
	.nav-toggle { align-self: center; }
	/* Trennlinie auf das Listenelement, nicht auf den Link: sonst endet sie
	   an der Textbreite und die Liste sieht unfertig aus. */
	.menu-main > li { border-bottom: 1px solid var(--line-soft); }
	.menu-main > li:last-child { border-bottom: 0; }
	.menu-main > li > a { display: flex; width: 100%; padding: 0.85rem 0; border-bottom: 0; }
	.menu-main > li.current-menu-item > a { color: var(--brand-deep); }
	.submenu, .menu-main > li.has-mega > .submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		flex-direction: column;
		width: auto;
		border: 0;
		box-shadow: none;
		padding: 0.3rem 0 0.6rem 0.8rem;
		gap: 0.8rem;
	}
	.menu-main > li.is-open > .submenu { display: flex; }
	.menu-main > li.has-mega.is-open > .submenu { transform: none; }
	.header-cta { padding-top: 1rem; }
	.header-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   5. Inhalt
   Gilt fuer alles, was aus dem WordPress-Editor kommt.
   ========================================================================== */

.site-main { display: block; }

.entry { padding-block: clamp(3rem, 6vw, 5rem); }
.entry-head { max-width: 62ch; margin-bottom: 2.5rem; }
.entry-head h1 { font-size: var(--step-3); }
.entry-head .lede { font-size: var(--step-1); line-height: 1.55; margin-top: 0.9rem; }

.entry-content { max-width: 72ch; }
.entry-content > * + * { margin-top: 1.15rem; }
.entry-content h2 { font-size: var(--step-2); margin-top: 2.8rem; }
.entry-content h3 { font-size: var(--step-1); margin-top: 2rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li + li { margin-top: 0.4rem; }
.entry-content a { text-underline-offset: 2px; }

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.2rem;
	border-left: 2px solid var(--brand);
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink);
}

.entry-content table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
.entry-content th, .entry-content td { padding: 0.6rem 0.7rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.entry-content th { color: var(--ink); font-weight: 600; }

/* Breite Inhalte scrollen in sich, die Seite scrollt nie seitwaerts. */
.entry-content .wp-block-table,
.entry-content pre { overflow-x: auto; }

.entry-content pre {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1rem 1.1rem;
	font-family: var(--mono);
	font-size: 0.86rem;
	line-height: 1.55;
}

.entry-content .alignwide { max-width: min(100%, 1000px); }
.entry-content .alignfull { max-width: none; }

/* Brotkrumen */
.breadcrumb { font-size: 0.82rem; color: var(--muted); padding-top: 1.5rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 0.4rem; color: var(--line); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); }

/* Beitragsliste */
.post-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: border-color 0.18s, box-shadow 0.18s;
}
.post-card:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--shadow); }
.post-card h2 { font-size: 1.1rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card time { font-family: var(--mono); font-size: var(--label-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.post-card p { font-size: 0.92rem; }

/* ==========================================================================
   6. Fussbereich
   ========================================================================== */

.site-footer {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	padding-block: 3.5rem 2rem;
	margin-top: 4rem;
}

.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h2 {
	font-family: var(--mono);
	font-size: var(--label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 0.5rem; }
.footer-col a { font-size: 0.9rem; color: var(--body); text-decoration: none; }
.footer-col a:hover { color: var(--brand-deep); }

.footer-brand .logo { margin-bottom: 1.1rem; }
.footer-address, .footer-contact { font-style: normal; font-size: 0.9rem; line-height: 1.7; color: var(--muted); }
.footer-contact { margin-top: 0.7rem; }
.footer-contact a { color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: var(--brand-deep); }

.footer-bar {
	margin-top: 2.75rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
	font-size: 0.82rem;
	color: var(--muted);
}
.footer-bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0; padding: 0; }
.footer-bar a { color: var(--muted); text-decoration: none; }
.footer-bar a:hover { color: var(--brand-deep); }
.footer-claim { margin-left: auto; }
@media (max-width: 760px) { .footer-claim { margin-left: 0; } }

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

/* ==========================================================================
   7. Startseite
   ========================================================================== */

.sec { padding-block: clamp(4rem, 7vw, 6.5rem); border-top: 1px solid var(--line-soft); }
.sec-alt { background: var(--surface-2); }
.sec-head { max-width: 62ch; margin-bottom: 3rem; }
.sec-head h2 { font-size: var(--step-3); margin-top: 0.5rem; }
.sec-head .lede { font-size: var(--step-1); line-height: 1.55; margin-top: 0.9rem; }
.lede { max-width: 62ch; }

/* Planraster, Anspielung auf Karten und Millimeterpapier */
.plan { position: relative; overflow: hidden; }
.plan::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(86,84,98,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(86,84,98,.08) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 85% at 78% 12%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 85% at 78% 12%, #000 0%, transparent 72%);
}
.plan > * { position: relative; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 6.5vw, 6rem) clamp(3rem, 5vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(2.5rem,5vw,4.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero h1 { font-size: var(--step-4); letter-spacing: -.032em; }
.hero h1 .dot { color: var(--brand); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.hero-note { font-size: var(--step--1); color: var(--muted); }

.chart-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.chart-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .2rem; }
.chart-top h2 { font-size: .98rem; letter-spacing: -.01em; }
.chart-tag { font-family: var(--mono); font-size: var(--label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.chart-body { padding: .4rem .5rem 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; padding: .35rem 1.25rem 1.1rem; }
.lg { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--muted); }
.sw { width: 14px; border-top: 2px solid var(--brand); }
.sw-d { border-top-style: dashed; }
.sw-b { width: 14px; height: 9px; background: color-mix(in srgb, var(--brand) 20%, transparent); border-radius: 2px; }
.chart-foot { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-soft); margin: 0; }
.kpi { padding: .85rem 1.25rem; border-left: 1px solid var(--line-soft); }
.kpi:first-child { border-left: 0; }
.kpi dt { font-family: var(--mono); font-size: var(--label-s); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi dd { margin: .15rem 0 0; font-size: 1.12rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .up { color: var(--brand-deep); font-size: .8rem; }
.chart-note { margin: 0; padding: .8rem 1.25rem 1rem; border-top: 1px solid var(--line-soft); font-size: .78rem; line-height: 1.55; color: var(--muted); }

/* ---------- Vertrauensband ---------- */
.trust { border-top: 1px solid var(--line-soft); padding-block: 1.6rem; }
.trust-in { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2.2rem; }
.trust-label { font-size: .95rem; font-weight: 600; color: var(--ink); }
.trust-item { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
/* Der Verweis auf /referenzen/ am Ende des Bandes. Bewusst leiser als die
   Namen, er ist Ausweg, nicht Eintrag. */
.trust-more { font-size: .9rem; font-weight: 600; color: var(--brand-deep); text-decoration: none; }
.trust-more:hover,
.trust-more:focus-visible { text-decoration: underline; }
.pin { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
/* Fussnote zur Zahl im Band: eigene Zeile unterhalb der Namen. */
.trust-stand { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--muted); }

/* ---------- Segmentweiche ---------- */
.switch { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (max-width: 780px) { .switch { grid-template-columns: 1fr; } }
.switch-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; gap: .8rem; }
.switch-card-primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); }
.switch-for { font-family: var(--mono); font-size: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); }
.switch-card h3 { font-size: var(--step-2); }
.switch-link { margin-top: auto; padding-top: .6rem; font-weight: 600; font-size: .93rem; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }

/* ---------- Planungsspuren ---------- */
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
@media (max-width: 940px) { .tracks { grid-template-columns: 1fr; } }
.track { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.9rem; display: flex; flex-direction: column; gap: .7rem; }
.track-head { font-family: var(--mono); font-size: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.track h3 { font-size: var(--step-1); }
.track p { font-size: .94rem; }
.track-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.track-list li { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.5; }
/* Hier stand bis zum 16.09.2026 ein Komma als Aufzaehlungszeichen. Das war
   kein Gestaltungsmittel, sondern ein Versehen aus dem ersten Commit: In den
   drei Produktspur-Karten der Startseite stand vor jedem Punkt ein blaues
   Komma. Die Monospace-Angabe ist mit weg, sie sollte gleich breite Marker
   sichern, und das tut ein einzelnes Zeichen von sich aus. */
.track-list li::before { content: "\2022"; color: var(--brand); flex: none; }
.track-link { margin-top: auto; padding-top: .8rem; font-weight: 600; font-size: .92rem; text-decoration: none; }

/* ---------- Methodik ---------- */
.method-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2.5rem,5vw,4rem); align-items: start; }
@media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; } }
.method-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.method-copy h2 { font-size: var(--step-3); }
/* Modulseiten sind bewusst rein textlich, das ist der Regelfall und kein Zwischenstand:
   Textspalte allein, mit Zeilenlaenge wie anderswo begrenzt. */
.method-solo .method-copy { max-width: 62ch; }
.method-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.method-list li { padding-left: 1rem; border-left: 2px solid var(--brand); font-size: .94rem; line-height: 1.55; }
.method-list strong { color: var(--ink); }

/* Platzhalter fuer fehlendes Bildmaterial. Bewusst grau und beschriftet, ein Stockfoto wuerde verdecken, was noch fehlt. */
.ph {
	margin: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
	background: repeating-linear-gradient(45deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
	border: 1px dashed var(--line);
	border-radius: 8px;
	min-height: 260px;
	text-align: center;
	padding: 2rem;
}
.ph-tall { min-height: 340px; }
.ph-label { font-family: var(--mono); font-size: var(--label-s); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep); }
.ph-text { font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* Eingebundenes Bildmaterial an derselben Stelle wie ein Platzhalter. */
.shot { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.shot img { display: block; width: 100%; height: auto; }

/* Kachelkarte auf der Referenzenseite, Farbton als lokale Variable statt im Wurzelbereich. */
.refmap { position: relative; padding: 1.5rem; background: var(--surface); --rm-tint: #BEE3F5; --rm-tint-line: #8FCBEA; }
.refmap svg { display: block; width: 100%; height: auto; }
.ref-map-caption { margin-top: .75rem; font-size: .8rem; color: var(--muted); text-align: center; }

/* Vier Farbstufen, dieselben Klassen fuer Karte und Legende. Vorher standen
   die Farben als fill-Attribut an 16 Pfaden und 4 Rechtecken. */
.rm-s0 { fill: var(--surface-2); stroke: var(--line); }
.rm-s1 { fill: var(--rm-tint); stroke: var(--rm-tint-line); }
.rm-s2 { fill: var(--brand-deep); stroke: var(--surface); }
.rm-s3 { fill: var(--brand-ink); stroke: var(--surface); }
.rm-land { stroke-width: 1; cursor: default; }
.rm-c0 { fill: var(--muted); }
.rm-c1 { fill: var(--brand-ink); }
.rm-c2, .rm-c3 { fill: #fff; }
/* Das Kuerzel liegt auf dem Land. Ohne das faende der Zeiger dort die
   Beschriftung statt des Landes und der Hinweis verschwaende. */
.rm-code { pointer-events: none; }

/* Hervorhebung des angewaehlten Landes. Eigener Pfad statt eines Zustands
   auf dem Land selbst: dessen Rand wuerde von jedem spaeter gezeichneten
   Nachbarn zur Haelfte ueberdeckt. Ohne d ist das Element leer. */
.rm-hl { fill: #fff; fill-opacity: .18; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.rm-land:focus { outline: none; }
.rm-land:focus-visible { stroke: var(--ink); stroke-width: 2; }

/* Hinweis am Land. Ohne Verzoegerung, im Gegensatz zum Tooltip des Browsers. */
.rm-tip { position: absolute; z-index: 2; max-width: 15rem; padding: .5rem .7rem; border-radius: 6px;
	background: var(--ink); color: #fff; font-size: .8rem; line-height: 1.35; text-align: center;
	pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); box-shadow: var(--shadow); }
.rm-tip[hidden] { display: none; }
.rm-tip-unten { transform: translate(-50%, 10px); }
.rm-tip b { display: block; }
.rm-tip span { color: rgba(255,255,255,.78); }

/* ---------- Referenzband ---------- */
.band { background: var(--band); color: var(--band-ink); border-top: 0; }
.band h2, .band h3 { color: #fff; }
.band .eyebrow { color: color-mix(in srgb, var(--brand) 70%, #fff); }
/* Das Band ist ein Karussell, sobald die Zitate nicht mehr nebeneinander
   passen, und bis dahin ein Raster. Kein automatischer Vorlauf: Wer liest,
   soll nicht weitergeschoben werden, und ohne Vorlauf braucht es weder eine
   Pausetaste noch eine Ausnahme fuer prefers-reduced-motion.
   Der Wischhinweis haengt NICHT an dieser Breite, sondern an der Messung in
   nav.js. Sonst behauptet er "wischbar", wenn alles sichtbar ist. */
.quotewrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.quotewrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.quotes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; }
@media (max-width: 940px) {
	.quotes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(min(19rem, 76vw), 1fr); }
}
.quote { margin: 0; display: flex; flex-direction: column; gap: 1rem; padding-top: 1.4rem; border-top: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); scroll-snap-align: start; }
.quote blockquote { margin: 0; font-size: 1.06rem; line-height: 1.55; color: #fff; letter-spacing: -.012em; }
.quote blockquote::before { content: "\201E"; }
.quote blockquote::after { content: "\201C"; }
.quote figcaption { font-size: .86rem; color: color-mix(in srgb, var(--band-ink) 80%, transparent); display: flex; flex-direction: column; gap: .1rem; }
.quote figcaption b { color: #fff; font-weight: 600; }
.band-foot { margin-top: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; font-size: .92rem; }
.btn-light { background: #fff; border-color: #fff; color: var(--band); }
.btn-light:hover { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; gap: .6rem; }
.step-n { font-family: var(--mono); font-size: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.step h3 { font-size: 1.08rem; }
.step p { font-size: .93rem; }

/* ---------- Rahmenbedingungen ---------- */
.assure { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
@media (max-width: 920px) { .assure { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .assure { grid-template-columns: 1fr; } }
.as { display: flex; flex-direction: column; gap: .4rem; padding-left: 1rem; border-left: 2px solid var(--brand); }
.as b { color: var(--ink); font-size: .95rem; }
.as span { font-size: .86rem; color: var(--muted); line-height: 1.5; }

.mig { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.mig-badge { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .85rem 1.1rem; flex: none; line-height: 0; }
.mig-badge img { width: 150px; height: auto; display: block; }
.mig-text { font-size: .9rem; line-height: 1.6; max-width: 56ch; }

/* ---------- Demo-CTA ---------- */
.cta-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(2.5rem,5vw,4rem); align-items: start; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.cta-copy h2 { font-size: var(--step-3); }
.cta-points { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cta-points li { display: flex; gap: .7rem; font-size: .95rem; }
.tick { color: var(--brand); font-weight: 700; flex: none; }

.cta-box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.9rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .9rem; }
.cta-box h3 { font-size: 1.05rem; }
.cta-lead { font-size: .9rem; color: var(--muted); line-height: 1.55; }
.cta-btn { justify-content: center; }
.cta-note { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.cta-kita { font-size: .85rem; line-height: 1.6; color: var(--muted); }
.cta-kita a { font-weight: 600; }
.cta-or { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-family: var(--mono); font-size: var(--label-s); letter-spacing: .1em; text-transform: uppercase; }
.cta-or::before, .cta-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cta-alt { font-size: .95rem; line-height: 1.8; }
.cta-alt a { text-decoration: none; font-weight: 600; }

/* Claim als Markenzeile ueber der Kernaussage */
.claim { color: var(--muted); letter-spacing: .18em; }
.claim .dot { color: var(--brand); }
.hero h1 { max-width: 20ch; }

/* Lange Komposita brechen sonst aus ihrer Spalte aus, im Deutschen der
   Normalfall, nicht die Ausnahme. Silbentrennung plus etwas mehr Breite
   fuer die Textspalte, dazu eine ruhigere Maximalgroesse. */
@media (min-width: 901px) {
	.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.hero h1 {
	max-width: none;
	font-size: clamp(2.1rem, 1.55rem + 2.1vw, 3.15rem);
	hyphens: auto;
	overflow-wrap: break-word;
}
.hero .lede { max-width: 46ch; }

/* ==========================================================================
   8. Produktseiten
   ========================================================================== */

.page-hero { padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } }
.page-hero h1 { font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem); margin: 0.5rem 0 0; hyphens: auto; }
.page-hero .lede { margin-top: 1rem; font-size: var(--step-1); line-height: 1.55; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

/* Abweiser zu EDUNOS. Steht bewusst weit oben: Wer hier falsch ist,
   soll es erfahren, bevor er sich durch die Seite arbeitet. */
.divert {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: 6px;
	padding: 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.divert-head { font-weight: 700; color: var(--ink); font-size: 1rem; }
.divert p { font-size: 0.92rem; line-height: 1.6; }
.divert-link { font-weight: 600; font-size: 0.92rem; text-decoration: none; }

/* Ausgangslage */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
@media (max-width: 760px) { .pains { grid-template-columns: 1fr; } }
.pain { padding-left: 1.1rem; border-left: 2px solid var(--line); }
.pain h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.pain p { font-size: 0.93rem; line-height: 1.6; }

/* Anwendung */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
@media (max-width: 760px) { .feat { grid-template-columns: 1fr; } }
.feat-item { background: var(--surface); padding: 1.7rem 1.6rem; }
.feat-item h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.feat-item p { font-size: 0.93rem; line-height: 1.6; }
/* Fragenabschnitt (bw_faq): bei ungerader Fragenzahl fuellt die letzte
   Kachel die Reihe, sonst bliebe eine leere Rasterzelle in Linienfarbe. */
.bw-faq .feat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Module */
.modcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1000px) { .modcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .modcards { grid-template-columns: 1fr; } }
.modcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.18s, box-shadow 0.18s; }
.modcard:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--shadow); }
.modcard h3 { font-size: 1rem; }
.modcard p { font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.modcard a { margin-top: auto; padding-top: 0.5rem; font-size: 0.86rem; font-weight: 600; text-decoration: none; }

/* Erzaehlabschnitt im dunklen Band */
.story { max-width: 74ch; }
.story h2 { font-size: var(--step-3); margin: 0.6rem 0 1.2rem; }
.story .lede { color: var(--band-ink); max-width: none; }
.story .lede + .lede { margin-top: 1rem; }

/* ==========================================================================
   9. Korrekturen aus der Sichtpruefung
   ========================================================================== */

/* Der Erzaehlabschnitt sass eingerueckt, weil die Breitenbegrenzung auf dem
   Wrapper lag und der zentriert. Die Begrenzung gehoert an den Text,
   damit die linke Kante mit allen anderen Abschnitten fluchtet. */
.story { max-width: none; }
.story h2, .story .lede { max-width: 74ch; }

/* In Schaugroessen keine automatische Silbentrennung: Bildungs-ausschuss
   im Titel lenkt ab. Der Umbruch soll an Wortgrenzen erfolgen; die
   Notbremse fuer ueberlange Woerter bleibt bestehen. */
.hero h1,
.page-hero h1,
.sec-head h2 { hyphens: manual; overflow-wrap: break-word; }

/* Modulkacheln, wenn es nur zwei sind */
.modcards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
@media (max-width: 640px) { .modcards-2 { grid-template-columns: 1fr; } }

/* Prozesskette */
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: schritt; }
@media (max-width: 820px) { .chain { grid-template-columns: 1fr; } }
.chain-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.chain-step::before {
	counter-increment: schritt;
	content: counter(schritt);
	font-family: var(--mono);
	font-size: 0.7rem;
	color: var(--brand-deep);
	letter-spacing: 0.1em;
}
.chain-step h3 { font-size: 1.05rem; }
.chain-step p { font-size: 0.92rem; line-height: 1.55; }
.chain-step a { margin-top: auto; padding-top: 0.5rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; }

/* ==========================================================================
   10. Produktuebersicht
   ========================================================================== */

.page-hero .lede { max-width: 62ch; }

/* Prozesskette. Die Pfeile sind rein dekorativ und liegen deshalb im CSS,
   nicht im Markup: als Text vorgelesen waeren sie nur Laerm. */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 880px) { .flow { grid-template-columns: 1fr; gap: 2.5rem; } }

.flow-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.7rem; }
.flow-step + .flow-step::before {
	content: "";
	position: absolute;
	left: -2rem; top: 50%;
	width: 1rem; height: 1rem;
	margin-top: -0.5rem;
	border-top: 2px solid var(--brand);
	border-right: 2px solid var(--brand);
	transform: rotate(45deg);
}
@media (max-width: 880px) {
	.flow-step + .flow-step::before { left: 50%; top: -1.75rem; margin-left: -0.5rem; transform: rotate(135deg); }
}
.flow-label { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); }
.flow-step h3 { font-size: 1.1rem; margin: 0.4rem 0 0.5rem; }
.flow-step p { font-size: 0.92rem; line-height: 1.55; }
.flow-note { margin-top: 2rem; font-size: 0.95rem; max-width: 70ch; }
.flow-note a { font-weight: 600; text-decoration: none; }

/* Produkte nach Aufgabe */
.prodgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
@media (max-width: 980px) { .prodgroups { grid-template-columns: 1fr; } }
.prodgroup { display: flex; flex-direction: column; gap: 1rem; }
.prodgroup-head {
	font-family: var(--mono);
	font-size: var(--label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}
.prodcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.18s, box-shadow 0.18s; }
.prodcard:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--shadow); }
.prodcard h4 { font-size: 1.08rem; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.prodcard-for { font-size: 0.8rem; color: var(--brand-deep); font-weight: 600; }
.prodcard p { font-size: 0.9rem; line-height: 1.55; }
.prodcard a { margin-top: auto; padding-top: 0.5rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; }

/* Modulmatrix */
.matrix { border-collapse: collapse; width: 100%; font-size: 0.92rem; min-width: 640px; }
.matrix th, .matrix td { padding: 0.7rem 0.8rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.matrix thead th { font-size: var(--label-s); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.matrix tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.matrix tbody th a { text-decoration: none; }
.matrix .mark { text-align: center; width: 8rem; color: var(--brand); font-weight: 700; }
.matrix .mark .no { color: var(--line); }
.matrix-desc { color: var(--muted); }

/* ==========================================================================
   11. Module
   ========================================================================== */

.divert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.divert-list a { font-weight: 600; font-size: 0.93rem; text-decoration: none; }
.divert-note { font-size: 0.82rem; color: var(--muted); }
.abgrenzung { font-size: 0.92rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.abgrenzung strong { color: var(--ink); }

.modlist { display: flex; flex-direction: column; }
.modrow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.modrow:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .modrow { grid-template-columns: 1fr; gap: 0.6rem; } }
.modrow-head h3 { font-size: 1.15rem; }
.modrow-for { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
.modrow-body { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.modrow-body p { font-size: 0.95rem; line-height: 1.6; }
.modrow-body a { font-size: 0.92rem; font-weight: 600; text-decoration: none; }

/* ==========================================================================
   12. Leistungen
   ========================================================================== */

.servicegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .servicegrid { grid-template-columns: 1fr; gap: 2rem; } }

.servicebox { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.servicerow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line-soft); }
.servicerow:last-child { border-bottom: 0; }
@media (max-width: 520px) { .servicerow { grid-template-columns: 1fr; gap: 0.25rem; } }
.servicerow dt { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.servicerow dd { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.servicerow dd a { text-decoration: none; font-weight: 600; }

.servicenote { border-left: 2px solid var(--brand); padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.servicenote h3 { font-size: 1.02rem; }
.servicenote p { font-size: 0.93rem; line-height: 1.6; }

.feat-item a { font-weight: 600; text-decoration: none; }

/* Die Kopfzeile klebt oben. Ohne Ausgleich springt ein Ankerlink genau
   dahinter, das Ziel ist dann verdeckt. Betrifft #support, #methodik,
   #datenschutz und den Sprunglink zum Inhalt. */
html { scroll-padding-top: calc(var(--header-h) + 1.5rem); }
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ==========================================================================
   13. Formulare, Unterlagen, Hinweise
   ========================================================================== */

.bwform { display: flex; flex-direction: column; gap: 0.9rem; }
.bwform .field { display: flex; flex-direction: column; gap: 0.35rem; }
.bwform label { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bwform input[type="text"],
.bwform input[type="email"],
.bwform select,
.bwform textarea {
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.62rem 0.7rem;
	width: 100%;
}
.bwform textarea { resize: vertical; min-height: 4.6rem; line-height: 1.5; }
/* Hinweis unter der Beschriftung. Bewusst nicht im Stil von .bwform label:
   der ist mono, gesperrt und in Grossbuchstaben, ein ganzer Satz darin ist
   nicht lesbar. */
.bwform .field-hint { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
/* Feste Angabe statt Auswahlfeld, siehe bw_form( ..., $vorgabe ). Die
   Beschriftung sieht aus wie ein label, ist aber keines: Es gibt kein Feld,
   auf das sie zeigen koennte. */
.bwform .field-fest-label { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bwform .field-fest-wert { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.bwform input:focus-visible,
.bwform select:focus-visible,
.bwform textarea:focus-visible { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 0; }
.bwform button { justify-content: center; }
.formnote { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.formnote a { color: var(--brand-deep); }

/* Falle gegen automatisierte Eintraege: unsichtbar, aber nicht display:none,
   damit auch einfache Skripte sie ausfuellen. */
.bw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formmeldung { padding: 0.8rem 1rem; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
.formmeldung-gut { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--ink); }
.formmeldung-warn { background: #FDF6E7; border: 1px solid #E4C87A; color: #6B4F12; }

.formsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .formsplit { grid-template-columns: 1fr; } }
.formsplit-note { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin-top: 1rem; }
.formbox { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.8rem; box-shadow: var(--shadow); }
/* Nur dort noetig, wo neben der Karte etwas anderes steht als das Formular,
   etwa die Aufzeichnung auf der Webinarseite. Sonst sagt die Ueberschrift
   links schon, worum es geht. */
.formbox-head { font-weight: 700; color: var(--ink); margin-bottom: 1rem; }

/* Unterlagen */
.docgrid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .docgrid { grid-template-columns: 1fr; } }
.doccard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
.doccard-lead { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); }
.doc-kind { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); }
.doccard h3 { font-size: 1.2rem; }
.doccard > p { font-size: 0.93rem; line-height: 1.6; }
.docform { margin-top: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }

.doclist { display: flex; flex-direction: column; }
.doc { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.doc:first-child { border-top: 1px solid var(--line-soft); }
.doc h3 { font-size: 1rem; }
.doc h3 a { color: inherit; text-decoration: none; }
.doc h3 a:hover { color: var(--brand-deep); text-decoration: underline; }
.doc p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin-top: 0.2rem; }
.doc-state { flex: none; font-family: var(--mono); font-size: var(--label-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0.25rem 0.6rem; white-space: nowrap; }
/* "Aufzeichnung" ist ein Angebot, "gelaufen" nur eine Feststellung. Die
   Plakette bekommt deshalb Farbe, sobald es etwas zu holen gibt. */
.doc-state-an { color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
/* Der Herunterladen-Link sitzt an derselben Stelle wie die Plakette
   "in Vorbereitung", damit die Zeile nicht springt, je nachdem ob eine
   Unterlage schon da ist. Die Groessenangabe steht darunter: Wer eine Datei in
   eine Vergabeakte legt, will vorher wissen, was er anklickt. */
/* Ankreuzfelder im Formular. fieldset bringt von Haus aus Rahmen und
   Innenabstand mit, beides wird zurueckgesetzt, damit die Gruppe aussieht wie
   die uebrigen Felder daneben. */
.bw-checks { border: 0; padding: 0; margin: 0; }
.bw-checks legend { padding: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.55rem; }
.bw-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; padding: 0.18rem 0; cursor: pointer; }
.bw-check input { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--brand); }
.bw-check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.doc-link { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; font-size: 0.88rem; font-weight: 600; color: var(--brand-deep); text-decoration: none; white-space: nowrap; }
.doc-link:hover, .doc-link:focus-visible { text-decoration: underline; }
.doc-meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 400; }

/* Offener Hinweis */
.hinweis { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; padding: 1.5rem 1.7rem; max-width: 74ch; display: flex; flex-direction: column; gap: 0.7rem; }
.hinweis-head { font-weight: 700; color: var(--ink); }
.hinweis p { font-size: 0.93rem; line-height: 1.6; }

/* Der Kasten stand bisher immer direkt unter einem Abschnittskopf, dessen
   Aussenabstand den Abstand mitbrachte. Auf /beschaffung/ folgt er jetzt auf
   einen Fliesstext und klebte daran. Der Wert ist derselbe wie der obere
   Abstand von .flow-note, damit die Folge gleichmaessig steht. */
.flow-note + .hinweis { margin-top: 2rem; }

/* Kontaktband */
.kontaktband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.kontaktband h2 { font-size: var(--step-2); }
.kontaktband .lede { margin-top: 0.6rem; }
.kontaktband-tel a { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }

/* ==========================================================================
   14. Kontakt, Karriere, Textseiten
   ========================================================================== */

.kontaktgrid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .kontaktgrid { grid-template-columns: 1fr; } }
.kontaktspalte h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.kontaktadresse { font-style: normal; font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.4rem; }
.kontaktbox { margin-bottom: 1.2rem; }
.kontakt-hinweis { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.wege { display: flex; flex-direction: column; gap: 1.2rem; }
.weg { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
.weg h3 { font-size: 1.02rem; }
.weg p { font-size: 0.92rem; line-height: 1.55; }
.weg a { font-size: 0.9rem; font-weight: 600; text-decoration: none; margin-top: 0.2rem; }

/* Textseiten mit ruhiger Zeilenbreite */
.textseite { max-width: 68ch; }
.textseite h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.textseite h2:first-child { margin-top: 0; }
.textseite p { margin-top: 1rem; font-size: 1rem; line-height: 1.7; }
.textseite a { text-underline-offset: 2px; }

.prinzip { margin: 1.4rem 0 0; padding: 1.2rem 1.4rem; background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; font-size: var(--step-1); line-height: 1.5; color: var(--ink); }

/* Werte */
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 940px) { .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .werte { grid-template-columns: 1fr; } }
.wert { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wert h3 { font-size: 1.05rem; }
.wert-satz { font-size: 0.93rem; line-height: 1.55; color: var(--body); }
.wert-frage { font-size: 0.86rem; line-height: 1.55; color: var(--muted); font-style: italic; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); margin-top: auto; }

/* ==========================================================================
   15. Webinare
   ========================================================================== */

.terminliste { display: flex; flex-direction: column; }
.termin { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr); gap: 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.termin:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .termin { grid-template-columns: 1fr; gap: 0.6rem; } }
.termin-datum time { display: block; font-weight: 700; color: var(--ink); font-size: 0.98rem; line-height: 1.4; }
.termin-dauer { display: inline-block; margin-top: 0.35rem; font-family: var(--mono); font-size: var(--label-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.termin-body { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.termin-body h3 { font-size: 1.15rem; }
.termin-ziel { font-size: 0.84rem; color: var(--brand-deep); font-weight: 600; }
.termin-body p { font-size: 0.94rem; line-height: 1.6; }
.termin-body a { font-size: 0.92rem; font-weight: 600; text-decoration: none; margin-top: 0.2rem; }
.termin-body h3 a { font-size: inherit; font-weight: inherit; color: inherit; margin-top: 0; }
.termin-body h3 a:hover { color: var(--brand-deep); text-decoration: underline; }

/* Einzelseite eines Webinars, single-webinar.php. Der Termin steht dort an
   der Stelle, an der bei einem Beitrag das Datum steht, ist aber die
   wichtigste Angabe der Seite und darum nicht klein und grau. */
.webinar-termin { margin-top: 0.9rem; font-size: var(--step-1); font-weight: 700; color: var(--ink); line-height: 1.4; }
.webinar-meta { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.webinar-dauer { font-family: var(--mono); font-size: var(--label-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.webinar-ziel { font-size: 0.84rem; color: var(--brand-deep); font-weight: 600; }
.webinar-kern { max-width: 62ch; font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.weiter-alle { margin-top: 1.6rem; font-size: 0.92rem; font-weight: 600; }
.weiter-alle a { text-decoration: none; }

/* ==========================================================================
   16. Über uns und Referenzen
   ========================================================================== */

.gross { font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.textseite .gross { margin-top: 0; }

.teamgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
@media (max-width: 900px) { .teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Die letzte Reihe des Vierspalters bleibt links buendig, wenn die
   Kachelzahl nicht aufgeht. Das ist so gewollt: jede Loesung, die auf eine
   bestimmte Kopfzahl optimiert, zerbricht beim naechsten Personalwechsel. */
.team-kachel { margin: 0; }
.team-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.team-kachel figcaption { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; }
.team-kachel b { font-size: 0.95rem; letter-spacing: -0.01em; }
.team-kachel figcaption span { font-size: 0.83rem; color: var(--muted); }

.refgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 940px) { .refgrid { grid-template-columns: 1fr; } }
.refcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ref-land { font-family: var(--mono); font-size: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.refcard h3 { font-size: 1.15rem; }
.ref-produkt { font-size: 0.84rem; color: var(--brand-deep); font-weight: 600; }
.refcard blockquote { margin: 0.6rem 0; padding-left: 0.9rem; border-left: 2px solid var(--brand); font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.refcard blockquote::before { content: "\201E"; }
.refcard blockquote::after { content: "\201C"; }
.ref-quelle { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.ref-status { display: inline-block; margin-top: 0.35rem; font-family: var(--mono); font-size: var(--label-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0.15rem 0.5rem; }
.refcard a { margin-top: auto; padding-top: 0.7rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; }

/* Aufbau einer Case Study */
.caseskelett { display: flex; flex-direction: column; }
.caseblock { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.caseblock:last-child { border-bottom: 1px solid var(--line); }
.case-n { font-family: var(--mono); font-size: 0.85rem; color: var(--brand); font-weight: 700; }
.caseblock h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.caseblock p { font-size: 0.93rem; line-height: 1.6; }

.zitatvorschau { margin: 2.5rem 0 0; padding: 1.6rem 1.8rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; max-width: 74ch; }
.zitatvorschau blockquote { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.zitatvorschau blockquote::before { content: "\201E"; }
.zitatvorschau blockquote::after { content: "\201C"; }
.zitatvorschau figcaption { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); }

/* ==========================================================================
   17. Eingebundene Rechtsdokumente
   Der Anbieter liefert eigene Stile mit. Wir nehmen nur die Zentrierung
   und die Zentimeter-Innenabstaende heraus, damit das Dokument mit dem
   uebrigen Satzspiegel fluchtet.
   ========================================================================== */

.dsdokument .contractDetails {
	max-width: 74ch !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-family: var(--sans) !important;
	color: var(--body);
}
.dsdokument h1, .dsdokument h2, .dsdokument h3 { color: var(--ink); }
.dsdokument a { color: var(--brand-deep); }
.dsstand { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.dsstand a { color: var(--brand-deep); }

/* ==========================================================================
   18. Kontrastkorrekturen
   --------------------------------------------------------------------------
   Gemessen am 16.08.2026. Drei Kombinationen lagen unter den Anforderungen
   der WCAG 2.1 AA und wurden ersetzt. Das Logo-Blau bleibt unveraendert,
   es wird nur nicht mehr als Untergrund fuer weissen Text verwendet.
   ========================================================================== */

:root {
	/* Untergrund fuer weissen Text: 4,62:1 statt 3,31:1 */
	--brand-btn: #007CB5;
	/* Gedaempfter Text: 5,14:1 auf Weiss und 4,71:1 auf Grau statt 4,20 und 3,86 */
	--muted:     #6E6C7A;
	/* Rahmen von Bedienelementen: 3,22:1 statt 1,29:1 */
	--line-form: #8E8E9E;
}

.btn-primary { background: var(--brand-btn); border-color: var(--brand-btn); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); }

/* Das Textfeld fehlte hier. Es stand seit der Messung im Formular der
   Webinarseite und trug weiter --line, also 1,29:1, weil die Regel nur drei
   Bedienelemente nannte. Die Anforderung liegt bei 3:1. Seit dem 11.09.2026
   steht ein Textfeld auch in der Demo-Anfrage. */
.bwform input[type=text],
.bwform input[type=email],
.bwform select,
.bwform textarea { border-color: var(--line-form); }
.textseite ul { margin-top: 1rem; padding-left: 1.3rem; }
.textseite li { margin-top: 0.55rem; line-height: 1.65; }
.textseite code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 3px; }

/* ==========================================================================
   19. Korrekturen aus dem Breitentest
   ========================================================================== */

/* Die Modulmatrix hat eine Mindestbreite von 640px. Der Rahmen darum trug
   bisher gar keine Regel: die Klasse existierte im Markup, aber nicht im
   Stylesheet. Damit schob die Tabelle die ganze Seite auf. Breite Inhalte
   scrollen in sich, die Seite scrollt nie seitwaerts. */
.tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Unterlagenliste: der Statushinweis darf nicht umbrechen, die Zeile schon. */
@media (max-width: 560px) {
	.doc { flex-wrap: wrap; gap: 0.6rem; }
	.doc-state { order: -1; }
}

/* Die Falle gegen automatisierte Eintraege lag bei -9999px und tauchte
   dadurch in jeder Layoutpruefung als Ausreisser auf. Sie ist jetzt
   genauso versteckt wie unsere Screenreader-Texte. */
.bw-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	left: auto;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Vertrauensband auf schmalen Bildschirmen untereinander. In einer Zeile
   entstehen sonst ungleiche Luecken: die Beschriftung bleibt beim ersten
   Eintrag haengen, der Rest bricht einzeln um. Gestapelt liest es sich
   als Liste und wirkt gesetzt statt zufaellig. */
@media (max-width: 760px) {
	.trust { padding-block: 1.4rem; }
	.trust-in { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
	.trust-label { margin-bottom: 0.3rem; }
}

/* Auf breiten Bildschirmen ist Silbentrennung in Schaugroessen unschoen,
   dort bricht die Zeile an Wortgrenzen. Auf schmalen Bildschirmen passt
   ein Wort wie "Schulentwicklungsplanung" aber in keine Zeile. Dann ist
   eine Trennung mit Strich deutlich besser als ein Bruch mittendrin. */
@media (max-width: 760px) {
	.hero h1,
	.page-hero h1,
	.sec-head h2,
	.method-copy h2,
	.cta-copy h2,
	.story h2 { hyphens: auto; }
}

/* Teamfotos bleiben auch auf schmalen Bildschirmen zweispaltig. Vier
   untereinander ergaeben knapp 900 Pixel Bildstrecke am Stueck, durch die
   man nur scrollt. */
@media (max-width: 520px) {
	.teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.9rem; }
	.team-kachel b { font-size: 0.88rem; }
}

/* Breite Tabellen scrollen in sich. Ohne Hinweis merkt das niemand, deshalb
   ein Verlauf am rechten Rand und eine Zeile darunter, sobald es eng wird. */
.tablewrap { position: relative; }
@media (max-width: 700px) {
	.tablewrap::after {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 2.5rem;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255,255,255,0), var(--surface-2));
	}
	.sec-alt .tablewrap::after { background: linear-gradient(to right, rgba(244,245,248,0), var(--surface-2)); }
}
.tablehinweis {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--mono);
	font-size: var(--label-s);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Reihenfolge zaehlt: die Grundregel oben setzt display:none und stand
   hinter der Medienabfrage, hat sie also ueberschrieben. Deshalb hier am
   Ende noch einmal. */
@media (max-width: 700px) {
}

/* ==========================================================================
   20. Made in Germany in der Fussleiste
   Das Siegel ist an Bedingungen geknuepft: ein erklaerender Text zum
   Unternehmen und eine Verlinkung des Begriffs auf german-ma.de. Beides
   steht hier und darf nicht entfernt werden, sonst entfaellt die
   Nutzungserlaubnis.
   ========================================================================== */

.footer-mig {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 1.75rem;
}
.footer-mig-badge {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	flex: none;
	line-height: 0;
}
.footer-mig-badge img { width: 132px; height: auto; display: block; }
.footer-mig-text { font-size: 0.85rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.footer-mig-text a { color: var(--brand-deep); font-weight: 600; }
.site-footer .footer-bar { margin-top: 1.75rem; }

/* Textseiten linksbuendig statt zentriert.
   Ursache war dieselbe wie beim Erzaehlabschnitt: die Breitenbegrenzung
   lag auf dem Element, das gleichzeitig .wrap ist, und .wrap zentriert
   sich. Die Begrenzung gehoert an die Absaetze, nicht an den Rahmen. */
.textseite { max-width: none; }
.textseite > * { max-width: 68ch; }
.textseite > .eyebrow { max-width: none; }

/* Abstaende im Textblock: die Ueberschrift schliesst eng an ihre
   Beschriftung an, der erste Absatz braucht dagegen Luft nach der
   Ueberschrift. Die Regel .gross { margin-top: 0 } galt bisher auch
   direkt nach einer Ueberschrift und klebte dort. */
.textseite > .eyebrow + h2 { margin-top: 0.55rem; }
.textseite h2 + .gross,
.textseite h2 + p { margin-top: 1rem; }

/* Siegelzeile kompakter und ueber die volle Breite. Der Text ist ein
   Pflichthinweis, kein Lesetext, deshalb hier bewusst ohne die sonst
   uebliche Begrenzung der Zeilenlaenge. */
.footer-mig {
	margin-top: 2rem;
	padding-top: 1.4rem;
	gap: 0.9rem 1.25rem;
	align-items: center;
}
.footer-mig-badge { padding: 0.5rem 0.65rem; border-radius: 4px; }
.footer-mig-badge img { width: 96px; }
.footer-mig-text {
	flex: 1 1 320px;
	max-width: none;
	font-size: 0.78rem;
	line-height: 1.55;
}
.site-footer .footer-bar { margin-top: 1.4rem; }

/* Zweispaltiger Fliesstext fuer Abschnitte ohne Bild. Nutzt die Flaeche,
   ohne dass rechts eine leere Haelfte entsteht, und haelt die Zeilenlaenge
   trotzdem im lesbaren Bereich. */
.zweispalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 3rem; }
@media (max-width: 820px) { .zweispalt { grid-template-columns: 1fr; } }
.zweispalt p { font-size: 1rem; line-height: 1.7; }
/* Das Zitat sitzt zwischen Ueberschrift und Fliesstext, nicht daneben. */
.sec-head + .prinzip { margin: 0 0 1.6rem; max-width: 74ch; }

/* --- Ratgeberbeitraege ------------------------------------------------- */
/* Die Breitenbegrenzung sitzt auf den Kindern, nicht auf .wrap selbst,
   sonst kollidiert sie mit dessen margin-inline:auto. */
.entry-head { padding-block: 3rem 0; }
.entry-head > * { max-width: 42rem; }
.entry-content { padding-block: 1.5rem 3rem; }
.entry-content > * { max-width: 42rem; }
.entry-content > p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.15rem; }
.entry-content > p.lede { font-size: 1.25rem; line-height: 1.55; color: var(--muted); margin-bottom: 2rem; }
.entry-content > h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.5rem 0 .85rem; }
.entry-content > ul { margin: 0 0 1.4rem; padding-left: 1.15rem; }
.entry-content > ul li { font-size: 1.0625rem; line-height: 1.7; margin-bottom: .3rem; }
.entry-weiter .post-card h3 { font-size: 1.125rem; line-height: 1.3; margin: .3rem 0 .5rem; }

/* --- Klappmenue und Mega-Menue auf eine Formensprache bringen ----------- */
/* Beide Panels nutzen jetzt dieselbe Typografie und dasselbe Innenmass.
   Ohne das las sich das einfache Klappmenue wie ein fremdes Bauteil. */
.submenu { min-width: 272px; padding: 1rem; }
.submenu a { padding: 0.55rem 0.6rem; }
.menu-main > li.has-mega > .submenu { padding: 1.9rem 2.1rem; }
.submenu a:hover .mi-title { color: var(--brand-deep); }

/* Beide Panels an derselben Kante aufhaengen.
   Der Menuepunkt war nur so hoch wie sein Text, deshalb begann das einfache
   Klappmenue 22px oberhalb der Headerkante, das Mega-Menue aber genau darauf. */
.menu-main { align-self: stretch; align-items: stretch; }
.menu-main > li { align-items: center; }

/* Kontakt- und Formularbaender: linke Spalte mit Beschriftung und
   Ueberschrift. Bewusst kleiner als ein Abschnittskopf, weil daneben ein
   Kasten steht, aber untereinander identisch. Vorher waren es 25,8px und
   29,6px fuer denselben Zweck. */
.formsplit > div > h2,
.kontaktband > div > h2 { font-size: 1.6rem; line-height: 1.2; margin: 0.45rem 0 0.7rem; }

/* Ohne JavaScript bleibt der Hinweis verborgen, mit JavaScript
   entscheidet die tatsaechliche Scrollbreite. */
.tablehinweis[hidden] { display: none; }
.tablehinweis { display: none; }
html.js .tablewrap.scrollt + .tablehinweis,
.tablewrap.scrollt ~ .tablehinweis,
html.js .quotewrap.scrollt + .tablehinweis,
.quotewrap.scrollt ~ .tablehinweis { display: block; }