/* NotesIT – Gestaltungsgrundlage: Schrift, Variablen, Kopf, Fuß, Bausteine. Keine externen Quellen. */

@font-face {
	font-family: "Saira";
	src: url("../fonts/saira-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 50% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--blau: #65a1d6;
	--orange: #fda419;
	--dunkelblau: #1c4374;
	--tinte: #11294a;           /* Text auf Orange, dunkler als das CI-Dunkelblau für Kontrast */
	--text: #1f2733;
	--grund: #fff;
	--grund-hell: #eef3f9;
	--linie: #d3dfec;
	--hell-auf-dunkel: #a9cbea; /* Überschriften im Fuß: 5:1 auf Dunkelblau */
	--font: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-breit: 118%;         /* font-stretch für Überschriften */
	--radius: 6px;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--kante-h: clamp(2rem, 5vw, 4.5rem);
	--rand: clamp(1rem, 4vw, 2rem);
	--breite: 1200px;
	--kopf-h: 4.75rem;
	--kopf-kompakt: 3.75rem;     /* sichtbare Höhe des Kopfs nach dem Einstieg */
	/* Bühne: Abstände, Radien, Schatten, Rahmen, Schriftgrößen */
	--tief: #142f52;
	--mute: #4a6078;
	--rahmen: #dde6f0;
	--tint: #eef4fa;
	--s1: .5rem;
	--s2: 1rem;
	--s3: 1.5rem;
	--s4: 2.5rem;
	--s5: 4rem;
	--s6: 6rem;
	--radius-karte: 16px;
	--radius-knopf: 10px;
	--schatten-karte: 0 1px 2px rgba(20, 47, 82, .05), 0 12px 32px -16px rgba(20, 47, 82, .18);
	/* Eine Schriftskala für alle Inhalte (nur diese fünf Stufen) */
	--fs-h1: clamp(1.875rem, 1.1rem + 3vw, 3.25rem);   /* 1: Seitentitel (H1 im Kopf der Bühne) */
	--fs-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);   /* 2: Abschnittsüberschrift (H2) */
	--fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);    /* 3: Zwischenüberschrift (H3, H4 bis H6 gleich) */
	--fs-text: 1.125rem;                               /* 4: Fließtext */
	--fs-klein: .875rem;                               /* 5: Klein/Meta (Datum, Bildunterschrift, Etiketten) */
	--fs-eyebrow: var(--fs-klein);
	--fs-lead: var(--fs-text);      /* Einstiegsabsatz = Fließtext */
	--fs-h1-buehne: var(--fs-h1);
	--fs-zahl: var(--fs-h1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 400 var(--fs-text)/1.65 var(--font);
	color: var(--text);
	background: var(--grund);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font);
	font-stretch: var(--font-breit);
	font-weight: 700;
	color: var(--dunkelblau);
	line-height: 1.15;
	letter-spacing: .005em;
	margin: 0 0 .6em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }

a { color: var(--dunkelblau); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; min-height: 44px; }
.skip-link:focus {
	left: 1rem; top: 1rem; z-index: 100; min-height: 44px; display: inline-flex; align-items: center;
	background: var(--orange); color: var(--tinte);
	padding: .75rem 1.25rem; border-radius: var(--radius);
	font-weight: 600; text-decoration: none;
}

.container { width: 100%; max-width: var(--breite); margin-inline: auto; padding: 2.5rem var(--rand); }

/* Abschnitte: abwechselnd weiß und hellblaugrau; .kante schneidet unten schräg ab wie das N im Logo */
.abschnitt { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--grund); }
.abschnitt--hell { background: var(--grund-hell); }
.abschnitt--dunkel { background: var(--dunkelblau); color: #fff; }
.abschnitt.abschnitt--weiss { background: var(--grund); }
.abschnitt.abschnitt--hell { background: var(--grund-hell); }
.abschnitt.abschnitt--dunkel { background: var(--dunkelblau); color: #fff; }
.abschnitt--dunkel :is(h1, h2, h3) { color: #fff; }

/* Block Text und Bild */
.text-bild__innen { display: grid; gap: 2rem; align-items: start; }
.text-bild__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 48em) {
	.text-bild--rechts .text-bild__innen, .text-bild--links .text-bild__innen { grid-template-columns: 1fr 1fr; }
	.text-bild--links .text-bild__bild { order: -1; }
}
.kante { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kante-h)), 0 100%); padding-bottom: calc(var(--kante-h) + 2rem); }
.kante--oben { clip-path: polygon(0 var(--kante-h), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--kante-h) + 2rem); }

/* Knöpfe: Orange nur als Fläche, Text dunkel */
.knopf {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: .55rem 1.35rem;
	background: var(--orange); color: var(--tinte);
	font: 650 var(--fs-text)/1.2 var(--font); font-stretch: 108%; letter-spacing: .02em;
	text-decoration: none; border: 0; border-radius: var(--radius-knopf);
	cursor: pointer;
	transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 41, 74, .22); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf--hell { background: transparent; color: var(--dunkelblau); box-shadow: inset 0 0 0 2px var(--dunkelblau); }
.knopf--hell:hover { box-shadow: inset 0 0 0 2px var(--dunkelblau), 0 6px 16px rgba(17, 41, 74, .15); }

/* ---------- Kopf ---------- */
.scroll-marke { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }
.site-header {
	position: sticky; top: 0; z-index: 50;
	color: var(--tinte);
	/* feste Höhe: Der Kopf wird nach dem Einstieg nur optisch kleiner (transform), der Fluss bleibt gleich, kein Sprung */
	height: var(--kopf-h);
}
/* Fläche, Rand und Schatten als eigene Ebene, damit nur transform/opacity animiert werden */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: #fff; border-bottom: 1px solid var(--rahmen);
	transform-origin: top; transition: transform .35s var(--ease-out);
}
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -2;
	box-shadow: 0 6px 20px -12px rgba(20, 47, 82, .35); opacity: 0;
	transform-origin: top; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
/* Beim Scrollen bleibt der Kopf weiß, bekommt aber einen feinen Schatten */
.site-header.ist-gescrollt::after { opacity: 1; }

.kopf-innen {
	max-width: var(--breite); margin-inline: auto;
	padding: .5rem var(--rand);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	height: var(--kopf-h);
	transition: transform .35s var(--ease-out);
}
/* Logo direkt auf dem weißen Kopf */
.site-logo { display: block; flex: none; padding-block: 2px; }
.site-logo:focus-visible { outline-offset: 3px; }
.site-logo picture { display: block; }
.site-logo img { display: block; height: 30px; width: auto; transform-origin: left center; transition: transform .35s var(--ease-out); }
/* Desktop: Kopf etwas höher; ab 68em Logo mit Claim (header.php, <picture>), groß genug, dass „Business Engineering“ lesbar bleibt.
   Zwischen 64em und 68em reicht der Platz neben dem Menü nur für das schmale Logo. */
@media (min-width: 64em) { :root { --kopf-h: 5rem; } }
@media (min-width: 68em) { .site-logo img { height: 46px; } }

/* Mobil: kompakter Kontakt-Knopf neben dem Burger; im Panel entfällt er dann, auf dem Desktop sitzt er im Panel */
.kopf-kontakt { margin-left: auto; min-height: 44px; padding: .4rem 1rem; font-size: .9375rem; flex: none; }
.kopf-kontakt + .burger { margin-left: 0; }
.kopf-aktionen__kontakt { display: none; }
@media (min-width: 64em) {
	.kopf-kontakt { display: none; }
	.kopf-aktionen__kontakt { display: inline-flex; }
}

/* Mobiles Menü: <details> ohne Skript; Panel folgt als Geschwister */
.burger { margin-left: auto; }
.burger summary {
	list-style: none; display: flex; align-items: center; gap: .6rem;
	min-height: 44px; min-width: 44px; padding: 0 .25rem 0 .75rem;
	cursor: pointer; font-weight: 600; font-stretch: 112%;
	border-radius: var(--radius);
}
.burger summary::-webkit-details-marker { display: none; }
.burger-linien, .burger-linien::before, .burger-linien::after {
	display: block; width: 24px; height: 2px; background: currentColor; border-radius: 1px;
	transition: transform .3s var(--ease-out), opacity .2s;
}
.burger-linien { position: relative; }
.burger-linien::before, .burger-linien::after { content: ""; position: absolute; left: 0; }
.burger-linien::before { top: -7px; }
.burger-linien::after { top: 7px; }
.burger[open] .burger-linien { background: transparent; }
.burger[open] .burger-linien::before { transform: translateY(7px) rotate(45deg); }
.burger[open] .burger-linien::after { transform: translateY(-7px) rotate(-45deg); }
/* Schmale Handys: Platz für das Logo. „Menü“ bleibt für Screenreader, das Logo wird etwas kleiner. */
@media (max-width: 29.999em) {
	.burger-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.burger summary { padding: 0 .25rem; justify-content: center; }
}
@media (max-width: 23.999em) { .site-logo img { height: 28px; } }
@media (max-width: 20.999em) { .site-logo img { height: 24px; } }

.kopf-panel {
	display: none;
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--dunkelblau); color: #fff;
	padding: 1rem var(--rand) 1.75rem;
	max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto;
	border-top: 3px solid var(--blau);
	box-shadow: 0 18px 30px rgba(17, 41, 74, .25);
}
.burger[open] ~ .kopf-panel { display: block; animation: panel-ein .3s var(--ease-out); }
@keyframes panel-ein { from { opacity: 0; transform: translateY(-8px); } }

.menue, .menue ul { list-style: none; margin: 0; padding: 0; }
.menue a {
	display: flex; align-items: center; min-height: 44px; padding: .4rem 0;
	color: inherit; text-decoration: none;
	font-weight: 500; font-stretch: 108%; letter-spacing: .01em;
}
.menue .sub-menu { padding-left: 1rem; border-left: 2px solid var(--blau); margin: 0 0 .5rem; }
.menue .sub-menu a { font-weight: 400; font-size: .95em; }
.menue > li { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.kopf-tel {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
	color: inherit; text-decoration: none; font-weight: 500; font-stretch: 108%;
}
.kopf-tel:hover span { text-decoration: underline; }
.kopf-tel svg { flex: none; }
.sprachwahl { margin-left: auto; }
.sprachwahl-nav { display: flex; }
.sprachwahl-nav a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
	color: inherit; text-decoration: none; font-weight: 500; font-stretch: 108%;
}
.sprachwahl-nav a:hover { text-decoration: underline; }
.sprachwahl-nav a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--blau); text-underline-offset: .3em; }

/* Desktop: Panel fest in der Zeile, Burger weg */
@media (min-width: 64em) {
	.burger { display: none; }
	.kopf-panel {
		display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; flex: 1;
		position: static; background: none; color: inherit; padding: 0;
		max-height: none; overflow: visible; border: 0; box-shadow: none; animation: none;
	}
	.menue { display: flex; align-items: center; gap: .25rem; }
	.menue > li { border: 0; position: relative; }
	.menue > li > a {
		padding: .4rem .7rem; font-size: .98rem; position: relative;
	}
	/* Unterstreichung wächst per transform */
	.menue > li > a::after {
		content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .45rem; height: 2px;
		background: var(--blau); transform: scaleX(0); transform-origin: left;
		transition: transform .3s var(--ease-out);
	}
	.menue > li:hover > a::after, .menue > li:focus-within > a::after,
	.menue > .current-menu-item > a::after, .menue > .current-menu-ancestor > a::after { transform: scaleX(1); }
	.kopf-aktionen { margin: 0; flex-wrap: nowrap; }
	.kopf-tel span { white-space: nowrap; }
	/* Neben dem breiten Logo mit Claim reicht der Platz nicht für die ganze Nummer: nur der Hörer,
	   die Nummer steht in aria-label und title (sowie im Einstieg und im Fuß) */
	.kopf-tel { justify-content: center; min-width: 44px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rahmen); }
	.kopf-tel:hover { box-shadow: inset 0 0 0 2px var(--blau); }
	.kopf-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.sprachwahl { margin: 0; }

	/* Untermenü: ohne Skript per Hover und Tastatur (:focus-within) */
	.menue .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 16rem; margin: 0; padding: .5rem;
		background: #fff; color: var(--dunkelblau);
		border: 0; border-top: 3px solid var(--blau); border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: 0 16px 32px rgba(17, 41, 74, .2);
		visibility: hidden; opacity: 0; transform: translateY(-6px);
		transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
	}
	/* Brücke über die Lücke zwischen Eintrag und Untermenü, damit Hover nicht abreißt */
	.menue .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem; }
	.menue li:hover > .sub-menu, .menue li:focus-within > .sub-menu {
		visibility: visible; opacity: 1; transform: none;
		transition-delay: 0s;
	}
	/* Escape schließt das Untermenü (Klasse setzt ui.js), bis Maus oder Fokus den Eintrag verlassen */
	.menue li.ist-zu > .sub-menu {
		visibility: hidden; opacity: 0; transform: translateY(-6px);
		transition-delay: 0s, 0s, 0s;
	}
	.menue .sub-menu a { padding: .4rem .75rem; border-radius: 4px; min-height: 44px; }
	.menue .sub-menu a:hover { background: var(--grund-hell); }
}
@media (min-width: 64em) and (max-width: 78em) {
	.kopf-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Fuß ---------- */
/* Endet die Seite mit dem Kontaktband, schließt der Fuß ohne weißen Streifen direkt an */
main:has(> .kontaktband:last-child) + .site-footer { margin-top: 0; }
.site-footer {
	background: var(--dunkelblau); color: #e8eef6;
	margin-top: var(--s5);
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.fuss-innen { max-width: var(--breite); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) var(--rand) 1.5rem; }
.fuss-logo { display: inline-block; margin-bottom: 2rem; }
.fuss-logo img { display: block; height: 44px; width: auto; }
.fuss-spalten { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .fuss-spalten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .fuss-spalten { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 3rem; } }
.site-footer h2 {
	font-size: var(--fs-text); font-stretch: 120%; text-transform: uppercase; letter-spacing: .1em;
	color: var(--hell-auf-dunkel); margin-bottom: .8rem;
}
.site-footer a { color: #fff; text-underline-offset: .2em; }
.site-footer a:hover { color: var(--hell-auf-dunkel); }
.site-footer :focus-visible { outline-color: var(--orange); }
/* Dunkle Flächen: hellen Fokusring nehmen. Das Panel ist nur mobil dunkel; am Desktop sitzt der Kopf auf Weiß (Dunkelblau bleibt). */
@media (max-width: 63.999em) { .kopf-panel :focus-visible { outline-color: #fff; } }
.fuss-liste, .fuss-liste ul { list-style: none; margin: 0; padding: 0; }
.fuss-liste a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss-liste a:hover { text-decoration: underline; }
.fuss-kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-kontakt p:last-child { line-height: 1.2; }
.fuss-unten {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem;
	margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: var(--fs-klein);
}
.fuss-unten p { margin: 0; }
.fuss-unten a { display: inline-flex; align-items: center; min-height: 44px; }

/* Bewegung zurücknehmen, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Formular ---------- */
.formular { --f-fehler: #9b1c1c; --f-rand: #7d8da3; --f-grund: #fff; --f-text: var(--text); }
.abschnitt--dunkel .formular { --f-fehler: #ffd2cc; --f-rand: #fff; }
.formular-form { display: grid; gap: 1.1rem; }
.formular .feld { display: grid; gap: .35rem; }
.formular label { font-weight: 600; }
.formular .pflicht { font-weight: 400; }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular select, .formular textarea {
	width: 100%; min-height: 44px; padding: .6rem .8rem;
	font: 400 var(--fs-text)/1.4 var(--font); color: var(--f-text);
	background: var(--f-grund); border: 2px solid var(--f-rand); border-radius: var(--radius);
}
.formular select {
	appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--dunkelblau) 50%), linear-gradient(135deg, var(--dunkelblau) 50%, transparent 50%);
	background-repeat: no-repeat; background-size: .5rem .5rem, .5rem .5rem;
	background-position: calc(100% - 1.3rem) 50%, calc(100% - .8rem) 50%;
}
.abschnitt--dunkel .formular select { color: var(--f-text); }
.formular textarea { resize: vertical; min-height: 8rem; }
.formular [aria-invalid="true"] { border-color: var(--f-fehler); border-width: 3px; }
.abschnitt--dunkel .formular [aria-invalid="true"] { border-color: var(--orange); }
.formular :focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }
.abschnitt--dunkel .formular :focus-visible { outline-color: var(--orange); }
.formular-hinweis { margin: 0; font-size: var(--fs-klein); }
.feld-paar { display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.formular .feld--haken { grid-template-columns: auto 1fr; align-items: center; gap: .75rem; }
.formular .feld--haken input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--dunkelblau); }
.formular .feld--haken label { font-weight: 400; }
.feld-fehler { margin: 0; font-weight: 600; color: var(--f-fehler); }
.formular-fehler {
	padding: 1rem 1.25rem; border-radius: var(--radius);
	background: #fff; color: #7a1010; border-left: 6px solid var(--orange);
}
.formular-fehler p { margin: 0 0 .4rem; font-weight: 600; }
.formular-fehler ul { margin: 0; padding-left: 1.2rem; }
.formular-fehler a { color: #7a1010; }
.formular-fehler:focus-visible { outline: 3px solid var(--dunkelblau); }
.formular-form .knopf { justify-self: start; }
.formular-datenschutz { margin: 0; font-size: var(--fs-klein); }
.formular-datenschutz a { display: inline-flex; align-items: center; min-height: 44px; }
.abschnitt--dunkel .formular a { color: #fff; }
.formular-danke { padding: 1.25rem 1.5rem; border-radius: var(--radius); border-left: 6px solid var(--orange); background: rgba(255, 255, 255, .08); }
.abschnitt:not(.abschnitt--dunkel) .formular-danke { background: var(--grund-hell); }
.formular-danke h3 { margin-bottom: .4em; }
/* Lockfeld: für Menschen unsichtbar, aus dem Fluss genommen */
.feld-lock { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Block Kontaktband ---------- */
/* Helles Band mit großer Telefonnummer links und Formular als weiße Karte rechts */
.abschnitt.kontaktband { border-top: 1px solid var(--rahmen); }
.kontaktband .container { padding-block: 0; }
.kontaktband__innen { display: grid; gap: var(--s4); }
@media (min-width: 56em) { .kontaktband__innen--zwei { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s5); } }
.kontaktband h2 { font-size: var(--fs-h2); font-stretch: 115%; line-height: 1.1; letter-spacing: -.01em; max-width: 22ch; }
.kontaktband__info > p:not([class]) { color: var(--mute); max-width: 48ch; }
.kontaktband__person { display: flex; align-items: center; gap: 1.25rem; margin: var(--s3) 0 var(--s3); }
/* Ansprechpartner deutlich sichtbar (Frank, 27.10.2026): Foto groß, Name in Abschnittsgröße */
.kontaktband__foto img, .kontaktband__initialen {
	display: block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: none;
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rahmen);
}
.kontaktband:not(.kontaktband--seite) .kontaktband__name { font-size: var(--fs-h3); line-height: 1.3; }
.kontaktband:not(.kontaktband--seite) .kontaktband__name span { font-size: var(--fs-text); }
.kontaktband__initialen { overflow: hidden; }
.kontaktband__name { margin: 0; color: var(--tinte); }
.kontaktband__name span { color: var(--mute); }
/* Nummer bricht nie mitten in der Zahl um: ein Block, Schrift wächst mit der Breite */
.kontaktband__tel {
	margin: 0 0 var(--s2); white-space: nowrap;
	font: 600 var(--fs-h3)/1.3 var(--font); letter-spacing: 0;
}
.kontaktband__tel a { display: inline-block; min-height: 44px; color: var(--dunkelblau); text-decoration: none; }
.kontaktband__tel a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.kontaktband__zeile { margin: 0 0 .5rem; color: var(--mute); line-height: 1.8; }
.kontaktband__zeile a { color: var(--dunkelblau); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.kontaktband .formular-form {
	background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte);
	padding: clamp(1.25rem, 3vw, var(--s4)); gap: var(--s3);
}
.kontaktband .formular label { font-size: var(--fs-klein); color: var(--dunkelblau); }
.kontaktband .formular input[type="text"], .kontaktband .formular input[type="email"], .kontaktband .formular input[type="tel"],
.kontaktband .formular select, .kontaktband .formular textarea {
	min-height: 50px; padding: .75rem .875rem; border: 1px solid #b9cadc; border-radius: var(--radius-knopf);
}
.kontaktband .formular [aria-invalid="true"] { border: 3px solid var(--f-fehler); }
.kontaktband .formular input:hover, .kontaktband .formular textarea:hover { border-color: var(--dunkelblau); }

/* Kontaktband im Seitenaufbau (Kontaktseite): Ansprechpartner oben, darunter Bild links (klebt beim Scrollen) und Formular rechts */
.kontaktband--seite .kontaktband__ansprechpartner {
	display: grid; gap: var(--s4); margin-bottom: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--rahmen);
}
@media (min-width: 48em) { .kontaktband--seite .kontaktband__ansprechpartner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.kontaktband__label { margin: 0 0 .5rem; font-size: var(--fs-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.kontaktband__spalte .kontaktband__label:not(:first-child) { margin-top: var(--s2); }
.kontaktband__gross { margin: 0; font: 700 var(--fs-h3)/1.25 var(--font); font-stretch: var(--font-breit); }
.kontaktband__gross a { display: inline-block; min-height: 44px; color: var(--dunkelblau); text-decoration: none; white-space: nowrap; }
.kontaktband__gross--mail a { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-klein); }
.kontaktband__gross a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.kontaktband--seite .kontaktband__person { margin: 0; }
.kontaktband__foto--gross img { width: 96px; height: 96px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rahmen); }
.kontaktband--seite .kontaktband__name { font-size: var(--fs-text); line-height: 1.35; }
.kontaktband--seite h2 { margin-bottom: var(--s2); }
.kontaktband--seite .kontaktband__info > p, .kontaktband--seite .container > p:not([class]) { color: var(--mute); max-width: 52ch; }
.kontaktband__seite { display: grid; gap: var(--s4); margin-top: var(--s4); }
.kontaktband__bildspalte { display: none; }
@media (min-width: 56em) {
	.kontaktband__seite--bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: stretch; }
	.kontaktband__bildspalte { display: block; }
	/* Das Bild klebt unter dem Kopf, solange die Zeile (= das Formular) läuft, und bleibt dann mit ihr stehen */
	.kontaktband__bild {
		position: sticky; top: calc(var(--kopf-h) + var(--s3)); margin: 0;
		height: min(34rem, calc(100vh - var(--kopf-h) - var(--s5))); height: min(34rem, calc(100dvh - var(--kopf-h) - var(--s5)));
		border-radius: var(--radius-karte); overflow: hidden; background: var(--tint); box-shadow: var(--schatten-karte);
	}
	.kontaktband__bild picture, .kontaktband__bild img { display: block; width: 100%; height: 100%; }
	.kontaktband__bild img { object-fit: cover; object-position: 38% 50%; }
}

/* ---------- Seitenkopf: kleine Bühne (gleicher Verlauf und Raster wie der Einstieg) ---------- */
.abschnitt.seitenkopf {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, var(--dunkelblau), var(--tief)); color: #fff;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.seitenkopf::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.2px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
}
.seitenkopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .18); }
.seitenkopf .container { padding-block: 0; }
.seitenkopf__innen { display: grid; gap: var(--s4); align-items: center; }
.seitenkopf__text > :last-child { margin-bottom: 0; }
.seitenkopf h1 {
	color: #fff; font-size: var(--fs-h1); font-stretch: 120%; letter-spacing: -.015em;
	max-width: 20ch; margin: 0; text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.seitenkopf__text p:not(.eyebrow):not(.beitrag__meta) { margin: var(--s3) 0 0; font-size: var(--fs-lead); line-height: 1.6; color: #d3e3f4; max-width: 58ch; }
.seitenkopf__bild img { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: var(--radius-karte); opacity: .95; }
.seitenkopf :focus-visible { outline-color: #fff; }
.eyebrow {
	margin: 0 0 .6rem; font-weight: 600; font-stretch: 120%; font-size: var(--fs-klein);
	text-transform: uppercase; letter-spacing: .1em; color: var(--dunkelblau);
}
.seitenkopf .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .16em; margin-bottom: var(--s2); color: var(--hell-auf-dunkel); }
@media (min-width: 48em) { .seitenkopf--bild .seitenkopf__innen, .beitrag__kopf:has(.seitenkopf__bild) { grid-template-columns: 1.4fr .6fr; } }
@media (max-width: 51.25em) { .seitenkopf h1 { font-stretch: 108%; } }

/* ---------- Inhalt (Core-Blöcke) ---------- */
.inhalt { max-width: var(--breite); margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) var(--rand); }
.inhalt > * { max-width: 72ch; margin-inline: 0; }
.inhalt > :is(.wp-block-columns, .wp-block-table, .overflow-x, .wp-block-image, .wp-block-buttons, .wp-block-separator) { max-width: none; }
.inhalt > :first-child { margin-top: 0; }
.inhalt h2 { margin-top: 2.2em; }
.inhalt h3 { margin-top: 1.8em; }
.inhalt h4 { margin-top: 1.5em; font-size: var(--fs-h3); }
.inhalt :is(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.inhalt li { margin-bottom: .4em; }
.inhalt li::marker { color: var(--dunkelblau); }
.inhalt :is(img) { max-width: 100%; height: auto; }
.inhalt figure { margin: 1.5em 0; }
.inhalt figcaption { font-size: var(--fs-klein); margin-top: .5rem; color: var(--mute); }
.inhalt .wp-block-image img { border-radius: var(--radius-karte); }
.inhalt .wp-block-gallery img { border-radius: var(--radius-knopf); }
.inhalt blockquote, .inhalt .wp-block-quote {
	margin: 2em 0; padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 6px); position: relative;
	background: var(--tint); border: 1px solid var(--rahmen); border-radius: var(--radius-karte);
	font-size: var(--fs-text); font-stretch: 105%; color: var(--dunkelblau); overflow: hidden;
}
.inhalt blockquote::before, .inhalt .wp-block-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--blau); }
/* Zitat mit Porträt: Bild sitzt auf der oberen Kante der Karte */
.inhalt .zitat-bild { margin: 2em 0 0 var(--s3); width: 5rem; position: relative; z-index: 1; }
.inhalt .zitat-bild img { display: block; width: 5rem; height: 5rem; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--schatten-karte); }
.inhalt .zitat-bild + blockquote, .inhalt .zitat-bild + .wp-block-quote { margin-top: -2.5rem; padding-top: calc(var(--s3) + 2.75rem); }
.inhalt blockquote p:last-child { margin-bottom: 0; }
.inhalt blockquote cite { display: block; margin-top: .6em; font-size: var(--fs-klein); font-style: normal; color: var(--mute); }
.inhalt hr, .inhalt .wp-block-separator { border: 0; border-top: 1px solid var(--rahmen); margin: 2.5em 0; }

/* Tabellen: eigener Container scrollt waagerecht, nie die Seite */
.overflow-x { overflow-x: auto; max-width: 100%; margin: 1.5em 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte); }
.overflow-x:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }
.overflow-x figure { margin: 0; }
.inhalt table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-text); }
.inhalt table { border-spacing: 0; }
.inhalt th, .inhalt td { padding: .7rem 1rem; border: 0; border-bottom: 1px solid var(--rahmen); border-right: 1px solid var(--rahmen); text-align: left; vertical-align: top; }
.inhalt tr > :last-child { border-right: 0; }
.inhalt tr:last-child > * { border-bottom: 0; }
.inhalt thead th, .inhalt th { background: var(--tint); color: var(--dunkelblau); font-weight: 600; }
.inhalt tbody tr:nth-child(even) td { background: #f8fafc; }

/* Akkordeon: core/details */
.inhalt .wp-block-details { margin: 0 0 .75rem; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 47, 82, .04); }
.inhalt .wp-block-details summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 52px; padding: .7rem 1.25rem; cursor: pointer; list-style: none;
	font-weight: 600; font-stretch: 108%; color: var(--dunkelblau);
}
.inhalt .wp-block-details summary::-webkit-details-marker { display: none; }
.inhalt .wp-block-details summary::after {
	content: ""; flex: none; width: .6rem; height: .6rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.inhalt .wp-block-details[open] summary::after { transform: rotate(-135deg); }
.inhalt .wp-block-details summary:hover { background: var(--tint); }
.inhalt .wp-block-details summary:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: -3px; }
.inhalt .wp-block-details > :not(summary) { margin-inline: 1.25rem; }
.inhalt .wp-block-details > :last-child { margin-bottom: 1.25rem; }

/* Datei: Download-Zeile */
.inhalt .wp-block-file {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
	margin: 1.2em 0; padding: .75rem 1.25rem; border: 1px solid var(--rahmen);
	border-radius: var(--radius-karte); background: var(--tint);
}
.inhalt .wp-block-file > a:not(.wp-block-file__button) { font-weight: 600; word-break: break-word; display: inline-flex; align-items: center; min-height: 44px; }
.inhalt .wp-block-file__button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1.2rem;
	background: var(--orange); color: var(--tinte); font-weight: 600; text-decoration: none; border-radius: var(--radius-knopf);
}
.inhalt .wp-block-file__button:hover { box-shadow: 0 6px 16px rgba(17, 41, 74, .22); }
.inhalt .wp-block-file object, .inhalt .wp-block-file embed { display: none; }

/* Knöpfe */
.inhalt .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5em 0; }
.inhalt .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.35rem;
	background: var(--orange); color: var(--tinte); font: 600 var(--fs-text)/1.2 var(--font); font-stretch: 112%;
	text-decoration: none; border-radius: var(--radius-knopf);
}
.inhalt .wp-block-button__link:hover { box-shadow: 0 6px 16px rgba(17, 41, 74, .22); }
.inhalt .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--dunkelblau); box-shadow: inset 0 0 0 2px var(--dunkelblau); }

/* Spalten: unter 782 px gestapelt, Inhalt beginnt oben, einheitlicher Abstand */
.inhalt .wp-block-columns { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin: 1.5em 0; }
.inhalt .wp-block-column { min-width: 0; align-self: flex-start; width: 100%; }
.inhalt .wp-block-column > :first-child { margin-top: 0; }
.inhalt .wp-block-column > :last-child { margin-bottom: 0; }
/* Überschriften in Spalten brechen nicht mitten im Wort */
.inhalt .wp-block-column :is(h2, h3, h4, h5, h6) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Bilder und Logos in Spalten: ruhige Höhe, bestimmen nicht die Zeilenhöhe */
.inhalt .wp-block-column :is(figure, .wp-block-image) { margin: 0 0 var(--s2); }
.inhalt .wp-block-column img { display: block; width: auto; max-width: 100%; max-height: 16rem; object-fit: contain; }
@media (min-width: 782px) {
	.inhalt .wp-block-columns { flex-direction: row; align-items: flex-start; gap: var(--s4); }
	.inhalt .wp-block-column { flex: 1 1 0; align-self: flex-start; width: auto; }
	.inhalt .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
}

/* ---------- Eine Schriftskala für Inhalte (alte Enfold-Inhalte, Core-Blöcke) ----------
   Feste Größen aus dem Inhalt (Schriftgrößen-Klassen, style="font-size/line-height") gelten nicht.
   !important nur hier: Inline-Stile und die Voreinstellungs-Klassen von WordPress sind selbst !important. */
:where(.inhalt) :is(h1, h2) { font-size: var(--fs-h2); }
:where(.inhalt) :is(h3, h4, h5, h6) { font-size: var(--fs-h3); }
:where(.inhalt) :is(h1, h2, h3, h4, h5, h6) { line-height: 1.2; font-weight: 700; }
:where(.inhalt) :is(p, li, td, th, dd, dt, summary, pre, label, address, .wp-block-file > a:not(.wp-block-file__button), .wp-block-button__link, .wp-block-file__button) { font-size: var(--fs-text); line-height: 1.65; }
:where(.inhalt) :is(.wp-block-button__link, .wp-block-file__button) { line-height: 1.2; }
:where(.inhalt) :is(figcaption, cite, small, .wp-element-caption) { font-size: var(--fs-klein); line-height: 1.5; }
:where(.inhalt) :is(blockquote, .wp-block-quote, .wp-block-pullquote) :is(p, li) { font-size: var(--fs-text); line-height: 1.55; }
.inhalt :is([class*="-font-size"], [style*="font-size"], [style*="line-height"], .is-large-text, .is-larger-text, .is-regular-text, .has-drop-cap) { font-size: inherit !important; line-height: inherit !important; }
.inhalt :is(h1, h2):is([class*="-font-size"], [style*="font-size"], [style*="line-height"]) { font-size: var(--fs-h2) !important; line-height: 1.2 !important; }
.inhalt :is(h3, h4, h5, h6):is([class*="-font-size"], [style*="font-size"], [style*="line-height"]) { font-size: var(--fs-h3) !important; line-height: 1.2 !important; }
.inhalt :is(p, li, td, th, dd, dt, summary, pre, label, address, div, blockquote):is([class*="-font-size"], [style*="font-size"], [style*="line-height"], .is-large-text, .is-larger-text, .is-regular-text) { font-size: var(--fs-text) !important; line-height: 1.65 !important; }
.inhalt :is(figcaption, cite, small):is([class*="-font-size"], [style*="font-size"], [style*="line-height"]) { font-size: var(--fs-klein) !important; line-height: 1.5 !important; }
.inhalt .has-drop-cap:not(:focus)::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; font-weight: inherit; }

/* ---------- Beitrag, Karten, Archiv ---------- */
.beitrag__meta { margin: 0 0 .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; font-size: var(--fs-klein); }
.beitrag__meta { color: #d3e3f4; margin-bottom: var(--s2); }
/* Rubriken: eine schlichte Linkzeile, kein Chip-Look */
.beitrag__rubriken { font-size: var(--fs-klein); }
.beitrag__rubrik { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.beitrag__rubrik:hover { text-decoration-thickness: 2px; }
.beitrag__mehr { color: #d3e3f4; }
.beitrag__alle-rubriken { padding-block: 0 1rem; font-size: var(--fs-klein); color: var(--mute); }
.beitrag__alle-rubriken a { display: inline-flex; align-items: center; min-height: 44px; }
.beitrag-nav { display: grid; gap: 1rem; padding-block: 1rem 3rem; }
@media (min-width: 40em) { .beitrag-nav { grid-template-columns: 1fr 1fr; } .beitrag-nav__weiter { text-align: right; } }
.beitrag-nav a {
	display: block; padding: 1rem 1.25rem; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); background: #fff; box-shadow: var(--schatten-karte);
	text-decoration: none; font-weight: 600; color: var(--dunkelblau);
}
.beitrag-nav a:hover { border-color: var(--blau); }
.beitrag-nav a span { display: block; font-size: var(--fs-klein); font-weight: 400; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }

.archiv { padding-block: clamp(2rem, 5vw, 3.5rem); }
.rubriken ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rubriken a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 99px;
	text-decoration: none; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rahmen);
}
.rubriken a:hover { box-shadow: inset 0 0 0 2px var(--dunkelblau); }
.rubriken a[aria-current] { background: var(--dunkelblau); color: #fff; box-shadow: none; }
.karten { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.karte {
	display: flex; flex-direction: column; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); overflow: hidden; background: #fff;
	box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 8px 24px -16px rgba(20, 47, 82, .14);
}
/* Einheitliche Bildhöhe: Rahmen 16:9, Bild füllt ihn (absolut), damit das Bildformat die Höhe nicht bestimmt */
.karte__bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grund-hell); }
.karte__bild img, .karte__bild picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.karte__text { padding: var(--s3); display: flex; flex-direction: column; flex: 1; }
.karte__datum { margin: 0 0 .4rem; font-size: var(--fs-klein); color: var(--mute); }
.karte__titel { font-size: var(--fs-h3); font-stretch: 112%; margin-bottom: .5em; }
.karte__titel a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.karte__titel a:hover { text-decoration: underline; }
.karte__auszug { margin: 0; color: var(--mute); }
.navigation.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .9rem;
	border-radius: var(--radius-knopf); text-decoration: none; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--rahmen);
}
.pagination a.page-numbers:hover { box-shadow: inset 0 0 0 2px var(--dunkelblau); }
.pagination .current { background: var(--dunkelblau); color: #fff; box-shadow: none; }

/* Suchformular, Fehlerseite */
.suchform { max-width: 36rem; margin-bottom: 2rem; }
.suchform label { display: block; font-weight: 600; margin-bottom: .35rem; }
.suchform__zeile { display: flex; gap: .5rem; }
.suchform input[type="search"] {
	flex: 1; min-width: 0; min-height: 44px; padding: .6rem .8rem; font: 400 var(--fs-text)/1.4 var(--font);
	border: 1.5px solid #8a9bb0; border-radius: var(--radius-knopf);
}
.fehlerseite { padding-block: clamp(2rem, 5vw, 3.5rem); }
.fehlerseite__wege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Startseite: Einstieg, Zahlen, Säulen, DomMCP ---------- */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Einstieg: vollflächige Bühne (Verlauf + Punktraster), N-Zeichen vor der Eyebrow */
.abschnitt.einstieg {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, var(--dunkelblau), var(--tief));
	color: #fff;
	padding: var(--s6) 0;
}
.einstieg::before {
	content: ""; position: absolute; inset: -48px 0; z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.2px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 25%, #000 100%);
}
.einstieg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .18); }
.einstieg .container { padding-block: 0; position: relative; }
.einstieg__innen { display: grid; gap: var(--s4); align-items: center; }
.einstieg__text > :last-child { margin-bottom: 0; }
.einstieg .eyebrow {
	display: flex; align-items: center; gap: .875rem; margin: 0 0 var(--s4);
	font-size: var(--fs-eyebrow); font-weight: 600; font-stretch: 115%; letter-spacing: .16em; color: var(--hell-auf-dunkel);
}
.einstieg__n { flex: none; width: 26px; height: 35px; }
.einstieg h1 {
	color: #fff; font-size: var(--fs-h1-buehne); font-stretch: 122%; letter-spacing: -.02em;
	max-width: 15ch; margin: 0; text-wrap: auto; hyphens: manual; overflow-wrap: break-word;
}
.einstieg__text > p:not(.eyebrow) { margin: var(--s4) 0 0; font-size: var(--fs-lead); line-height: 1.6; color: #d3e3f4; max-width: 58ch; }
.einstieg__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.einstieg .knopf { min-height: 52px; padding-inline: 26px; }
.einstieg .knopf--hell { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.einstieg .knopf--hell:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px #fff; transform: none; }
.einstieg :focus-visible { outline-color: #fff; }
/* Bild nur, wenn eines gesetzt ist: klein und dezent rechts */
.einstieg__bild { display: flex; justify-content: center; }
.einstieg__bild img { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: var(--radius-karte); opacity: .92; }
@media (min-width: 48em) { .einstieg--foto .einstieg__innen { grid-template-columns: 1.6fr .6fr; } }
@media (max-width: 51.25em) {
	.einstieg { padding: var(--s5) 0; }
	.einstieg h1 { font-stretch: 108%; font-size: var(--fs-h1); }
	.einstieg__bild img { max-height: 12rem; }
}

/* Zahlenband: weiße Karte mit vier Spalten; direkt nach dem Einstieg ragt sie über die Bühnenkante */
.zahlen { padding-block: var(--s4) 0; }
.zahlen .container { padding-block: 0; }
.zahlen__liste {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
	grid-template-columns: 1fr 1fr;
	background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte);
	position: relative;
}
/* Platz unter dem Einstieg, in den die Karte hineinragt */
.abschnitt.einstieg:has(+ .zahlen) { padding-bottom: calc(var(--s6) + var(--s4)); }
.abschnitt.einstieg + .abschnitt.zahlen { background: transparent; }
.einstieg + .zahlen { padding-top: 0; position: relative; z-index: 1; }
.einstieg + .zahlen .zahlen__liste { margin-top: calc(var(--s5) * -1); }
.zahlen__eintrag { display: flex; flex-direction: column; padding: var(--s3) var(--s3); }
.zahlen__eintrag:nth-child(even) { border-left: 1px solid var(--rahmen); }
.zahlen__eintrag:nth-child(n+3) { border-top: 1px solid var(--rahmen); }
.zahlen__wert { font: 700 var(--fs-zahl)/1 var(--font); font-stretch: 118%; letter-spacing: -.02em; color: var(--dunkelblau); }
.zahlen__text { margin-top: 10px; font-size: var(--fs-klein); font-weight: 500; line-height: 1.45; color: var(--mute); }
@media (min-width: 51.25em) {
	.zahlen__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
	.zahlen__eintrag { padding: var(--s4) var(--s3); }
	.zahlen__eintrag:nth-child(n) { border-top: 0; border-left: 1px solid var(--rahmen); }
	.zahlen__eintrag:first-child { border-left: 0; }
}

/* Abschnittsköpfe der Startseiten-Blöcke: Eyebrow mit blauem Quadrat, breite Überschrift */
.saeulen .container > h2, .karten-block .container > h2, .team .container > h2, .schritte .container > h2, .aktuelles .container > h2 {
	font-size: var(--fs-h2); font-stretch: 115%; line-height: 1.1; letter-spacing: -.01em;
	max-width: 22ch; margin-bottom: var(--s4);
}
.karten-block .eyebrow {
	display: block; margin: 0 0 .75rem;
	font-size: var(--fs-eyebrow); font-weight: 650; font-stretch: 115%; letter-spacing: .14em;
}
.karten-block .eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--blau); margin-right: 10px; }

/* Säulen: Bento-Kacheln, beide gleich breit und gleich hoch, Link unten */
.saeulen .container, .dommcp-hinweis .container { padding-block: 0; }
.abschnitt.saeulen:has(+ .dommcp-hinweis) { padding-bottom: 0; }
.saeulen__raster { display: grid; gap: var(--s2); }
@media (min-width: 56em) { .saeulen__raster { grid-template-columns: 1fr 1fr; } }
.saeule {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte);
	box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 8px 24px -16px rgba(20, 47, 82, .14);
	padding: clamp(1.5rem, 3vw, var(--s4));
}
.saeule h3 { font-size: var(--fs-h3); font-stretch: 112%; max-width: 20ch; margin-bottom: .25em; }
.saeule__region { color: var(--dunkelblau); font-weight: 600; margin-bottom: 0; }
.saeule__punkte {
	list-style: none; margin: var(--s4) 0 var(--s3); padding: 0;
	display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.saeule__punkte li {
	display: flex; align-items: center; gap: .875rem; min-height: 56px; padding: .35rem 1.125rem;
	background: var(--tint); border-radius: var(--radius-knopf); font-weight: 550; color: var(--tinte); line-height: 1.3;
}
.saeule__punkte li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--blau); }
.saeule__link { margin: auto 0 0; }

/* DomMCP-Hinweis: dunkle Breitkarte unter den Säulen */
.abschnitt.dommcp-hinweis { background: transparent; padding-block: var(--s2) 0; }
.abschnitt.saeulen:not(:has(+ .dommcp-hinweis)) + .abschnitt.dommcp-hinweis { padding-top: clamp(3rem, 7vw, 6rem); }
.dommcp-hinweis__innen {
	display: grid; gap: var(--s3); align-items: center;
	background: var(--dunkelblau); color: #fff; border-radius: var(--radius-karte);
	padding: clamp(1.5rem, 3vw, var(--s4));
}
.dommcp-hinweis .eyebrow {
	display: block; margin: 0 0 var(--s2);
	font-size: var(--fs-eyebrow); font-weight: 650; font-stretch: 115%; letter-spacing: .14em; color: var(--hell-auf-dunkel);
}
.dommcp-hinweis h2 { font-size: var(--fs-h2); font-stretch: 112%; max-width: 22ch; margin-bottom: 0; }
.dommcp-hinweis__text > p:not(.dommcp-hinweis__aktion) { color: #d3e3f4; font-size: var(--fs-text); max-width: 60ch; margin-bottom: 0; }
.dommcp-hinweis__aktion { margin: var(--s2) 0 0; }
/* Link statt Knopf wie im Entwurf: weiß, orange unterstrichen */
.dommcp-hinweis .knopf {
	justify-content: flex-start; background: transparent; padding: 0; color: #fff; border-radius: 0;
	text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.dommcp-hinweis .knopf:hover { transform: none; box-shadow: none; }
.dommcp-hinweis :focus-visible { outline-color: #fff; }
@media (min-width: 56em) { .dommcp-hinweis__innen { grid-template-columns: 1fr 1.2fr; gap: var(--s4); } }

/* ---------- Startseite: Karten, Team, Schritte, Aktuelles ---------- */
.karten-block .container > p:not(.eyebrow), .team .container > p { max-width: 56ch; color: var(--mute); }
.karten-block .container > h2 + p, .team .container > h2 + p { margin-top: calc(var(--s3) * -1); margin-bottom: var(--s4); }

/* Software-Kacheln: Bento-Raster, die erste Kachel ist groß; der Titel-Link füllt die ganze Kachel */
.kachel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40em) { .kachel-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
	.kachel-liste:not([class*="kachel-liste--"]) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.kachel-liste:not([class*="kachel-liste--"]) .kachel { grid-column: span 4; }
	.kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child { grid-column: span 8; grid-row: span 2; padding: var(--s4); }
	.kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child .kachel__titel { font-size: var(--fs-h3); }
	.kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child .kachel__text { font-size: var(--fs-text); max-width: 40ch; }
	/* Pfeil füllt die große Kachel unten, statt Leerraum zu lassen */
	.kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child:has(a)::after { content: "→" / ""; margin-top: auto; padding-top: var(--s3); font-size: 2.5rem; line-height: 1; color: var(--blau); }
}
.kachel {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte);
	box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 8px 24px -16px rgba(20, 47, 82, .14);
	padding: var(--s3); overflow: hidden;
	transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.kachel__bild { margin: 0 0 var(--s2); }
.kachel__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-knopf); }
/* Kopf der Kachel: Logo oder Linien-Symbol, gleich hohe Box, ruhig auf Weiß */
.kachel__marke { display: flex; align-items: center; height: 3.5rem; margin: 0 0 var(--s3); }
.kachel__marke picture { display: flex; align-items: center; height: 100%; }
.kachel__marke img { display: block; height: auto; width: auto; max-height: 100%; max-width: 9.5rem; object-fit: contain; border-radius: 6px; }
.kachel__marke--logo img { mix-blend-mode: multiply; filter: grayscale(.45); transition: filter .3s var(--ease-out); }
@media (hover: none) { .kachel__marke--logo img { filter: none; } }
@media (hover: hover) { .kachel:hover .kachel__marke--logo img, .kachel:focus-within .kachel__marke--logo img { filter: none; } }
.kachel__marke--symbol { width: 3.5rem; justify-content: center; background: var(--tint); border-radius: 14px; color: var(--dunkelblau); }
.kachel__marke--symbol .symbol { width: 1.9rem; height: 1.9rem; }
@media (min-width: 64em) { .kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child .kachel__marke { height: 4.25rem; margin-bottom: var(--s4); } .kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child .kachel__marke--symbol { width: 4.25rem; } .kachel-liste:not([class*="kachel-liste--"]) .kachel:first-child .kachel__marke--symbol .symbol { width: 2.25rem; height: 2.25rem; } }
.kachel__titel { font-size: var(--fs-h3); font-stretch: 112%; margin-bottom: .5em; }
.kachel__titel a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.kachel__titel a::after { content: ""; position: absolute; inset: 0; }
.kachel__titel a:focus-visible { outline: none; }
.kachel:has(.kachel__titel a:focus-visible) { outline: 3px solid var(--dunkelblau); outline-offset: 3px; }
.kachel__text { margin: 0; color: var(--mute); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.kachel:has(a):hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(20, 47, 82, .28); }
}
.kachel:has(a):hover .kachel__titel a { text-decoration: underline; }
.abschnitt--dunkel .kachel, .abschnitt--dunkel .kachel__titel a { color: var(--text); }
.abschnitt--dunkel .kachel__titel { color: var(--dunkelblau); }

/* Partner-Logos: jedes Logo auf einer weißen Kachel (wie die Karten), Kachelhöhe einheitlich.
   Ohne Skript und bei reduzierter Bewegung: umbrechendes Raster. Passen alle Kacheln in die Breite, stehen sie still
   in einer Reihe; sonst schaltet das Skript (erlebnis.js) ein Schritt-Karussell ein (.ist-lauf). */
.partner-band { --partner-b: 13.5rem; --partner-h: 8rem; --partner-gap: var(--s2); }
.partner-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--partner-gap); }
.partner { display: flex; min-width: 0; }
.partner__link {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: var(--partner-h);
	padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte);
	text-decoration: none; color: var(--dunkelblau); text-align: center;
}
a.partner__link { transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
a.partner__link:hover { border-color: var(--blau); }
.partner__link:focus-visible { outline-offset: -3px; }
.partner-band .partner__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 4.5rem; max-width: 100%; }
.partner__logo picture { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 100%; }
.partner-band .partner__logo img { mix-blend-mode: multiply; display: block; width: auto; height: 2.75rem; max-width: 100%; object-fit: contain; }
.partner__name { font-size: var(--fs-klein); font-weight: 600; line-height: 1.3; color: var(--mute); }
.partner__link:not(:has(.partner__logo)) .partner__name { font-size: var(--fs-text); color: var(--dunkelblau); }
/* Alle Kacheln passen: eine ruhige Reihe */
.partner-band.ist-reihe .partner-liste { display: flex; flex-wrap: nowrap; }
.partner-band.ist-reihe .partner { flex: 1 1 0; }
/* Karussell: ein Schritt = genau eine Kachel nach links, keine Lücke (Kopien füllen auf) */
.partner-band.ist-lauf { overflow: hidden; border-radius: var(--radius-karte); margin: 0 -4px -22px; padding: 6px 4px 28px; }
.partner-band.ist-lauf .partner-liste { display: flex; flex-wrap: nowrap; width: max-content; }
.partner-band.ist-lauf .partner { flex: none; width: var(--partner-b); }
.partner-band.ist-lauf .partner-liste.laeuft { transition: transform .7s var(--ease-out); }
@media (max-width: 40em) { .partner-band { --partner-b: 11.5rem; --partner-h: 7.5rem; } }
@media (prefers-reduced-motion: reduce) {
	.partner-band.ist-lauf { overflow: visible; margin: 0; padding: 0; }
	.partner-band.ist-lauf .partner-liste { display: grid; width: auto; transform: none !important; }
	.partner-band.ist-lauf .partner { width: auto; }
	.partner-band .partner[aria-hidden="true"] { display: none; }
}

/* Team: Fotokarten mit Rahmen, Hochformat, Name und Rolle darunter */
.team__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .team__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .team__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.team__person { display: flex; flex-direction: column; border: 1px solid var(--rahmen); border-radius: 12px; overflow: hidden; background: #fff; }
.team__foto { position: relative; flex: none; width: 100%; aspect-ratio: 3 / 4; background: var(--tint); }
.team__foto picture { display: block; position: absolute; inset: 0; }
.team__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.team__silhouette { position: absolute; inset: 0; display: block; }
.silhouette { display: block; width: 100%; height: 100%; }
.team__name { margin: 0; padding: .75rem .75rem 0; font-size: var(--fs-klein); font-weight: 600; line-height: 1.25; color: var(--dunkelblau); }
.team__rolle { margin: 0; padding: .2rem .75rem .75rem; font-size: var(--fs-klein); line-height: 1.35; color: var(--mute); }
.team__name:last-child { padding-bottom: .75rem; }

/* Schritte: großzügige, zentrierte Karten; das Symbol im runden Feld ist der Blickfang. Keine sichtbaren Nummern
   (die <ol> bleibt für die Reihenfolge in Vorlesegeräten). Der Weg verbindet die Symbolfelder auf deren Mittelhöhe;
   erlebnis.js setzt beim Scrollen .ist-an und --s, ohne Skript stehen alle Felder und Linien voll. */
.schritte__liste {
	--feld: 7.5rem; --ico: 5rem; --pad: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); --luecke: var(--s3);
	list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luecke);
}
@media (min-width: 48em) { .schritte__liste { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); --luecke: var(--s4); } }
.schritt {
	position: relative; padding: var(--pad); text-align: center;
	background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte);
	box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 8px 24px -16px rgba(20, 47, 82, .14);
}
.schritt__kopf { display: flex; justify-content: center; }
.schritt__symbol {
	position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: none;
	width: var(--feld); height: var(--feld); border-radius: 50%;
	background: radial-gradient(closest-side, #fff 55%, var(--tint)); box-shadow: inset 0 0 0 2px #cfe0f1;
	color: var(--dunkelblau);
}
.schritt__symbol .symbol { width: var(--ico); height: var(--ico); stroke-width: 1.15; }
.symbol__akzent { stroke: var(--blau); }
.schritt h3 { margin: var(--s4) 0 .6em; font-size: var(--fs-h3); font-stretch: 112%; line-height: 1.2; text-wrap: balance; }
.schritt p { margin: 0 auto; max-width: 32ch; line-height: 1.65; color: var(--mute); }
.schritt__weg { display: none; }
.schritt:not(:last-child) .schritt__weg { display: block; }

/* Aktuelles: Karten im selben Stil */
.aktuelles .karten { margin-top: 0; }
.aktuelles__alle { margin: var(--s4) 0 0; }

/* Einblenden beim Scrollen: nur was ui.js markiert; ohne Skript bleibt alles sichtbar */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
	[data-reveal].ist-sichtbar { opacity: 1; transform: none; }
}

/* =====================================================================
   Erlebnis (Startseite): Themen-Wechsler, Zeichnungen, Zähler, Weg, Chat, Logo-Lauf,
   Lichtschein, magnetische Knöpfe, kompakter Kopf. Gesteuert von assets/js/erlebnis.js.
   Ohne Skript bleibt alles sichtbar und benutzbar; bewegt wird nur transform/opacity.
   ===================================================================== */

/* ---------- Kopf: nach dem Einstieg optisch kompakter ---------- */
.site-header { --kopf-verhaeltnis: .79; --kopf-diff: calc(var(--kopf-h) - var(--kopf-kompakt)); }
@media (min-width: 64em) { .site-header { --kopf-verhaeltnis: .75; } } /* 3.75rem / 5rem */
.site-header.ist-kompakt { pointer-events: none; }
.site-header.ist-kompakt::before, .site-header.ist-kompakt::after { transform: scaleY(var(--kopf-verhaeltnis)); }
.site-header.ist-kompakt::before { pointer-events: auto; }
.site-header.ist-kompakt .kopf-innen { transform: translateY(calc(var(--kopf-diff) / -2)); pointer-events: none; }
.site-header.ist-kompakt .kopf-innen > * { pointer-events: auto; }
.site-header.ist-kompakt .site-logo img { transform: scale(.82); }
@media (max-width: 63.999em) {
	.site-header.ist-kompakt .kopf-panel { top: calc(100% - var(--kopf-diff) / 2); }
}

/* ---------- Einstieg: Themen ---------- */
.einstieg--themen { padding-block: var(--s4) calc(var(--s5) + var(--s4) + var(--s1)); }
.einstieg--themen h1 { font-size: var(--fs-h1); max-width: 17ch; }
.einstieg--themen .eyebrow { margin-bottom: var(--s3); }
.einstieg--themen .einstieg__text > p:not(.eyebrow) { margin-top: var(--s3); }
.einstieg--themen .einstieg__knoepfe { margin-top: var(--s3); }
@media (min-width: 64em) {
	.einstieg--themen .einstieg__innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s5); }
}

.einstieg__innen { grid-template-columns: minmax(0, 1fr); }
.einstieg__text { min-width: 0; }
.themen { margin-top: var(--s3); }
.themen__titel { margin: 0 0 .25rem; font-weight: 700; font-stretch: 112%; color: #fff; }
.einstieg__text .themen__text { margin: 0; font-size: var(--fs-text); line-height: 1.55; color: #d3e3f4; max-width: 46ch; }
.themen__link {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem;
	color: #fff; font-weight: 650; font-stretch: 108%; text-decoration: underline;
	text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.themen__link span { margin-left: .35em; text-decoration: none; display: inline-block; }
.themen__link:hover { text-decoration-color: #fff; }
/* Ohne Skript: alle Themen als Liste untereinander, Reiterleiste versteckt */
.themen__tabs { display: none; }
.themen__panels { display: grid; gap: var(--s2); }
.themen__panel { padding-top: var(--s2); border-top: 1px solid rgba(255, 255, 255, .18); }

/* Mit Skript: Reiter, Felder übereinander (Höhe = höchstes Feld, kein Sprung) */
.themen.ist-aktiv .themen__tabs {
	display: flex; gap: .25rem; margin: 0 -.25rem; padding: 0 .25rem;
	overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.themen.ist-aktiv .themen__tabs::-webkit-scrollbar { display: none; }
.themen__tab {
	position: relative; flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: .5rem 1rem;
	font: 600 var(--fs-text)/1.2 var(--font); font-stretch: 110%; letter-spacing: .01em; white-space: nowrap;
	color: #b9d2ec; background: none; border: 0; border-radius: var(--radius-knopf) var(--radius-knopf) 0 0; cursor: pointer;
	transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.themen__tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.themen__tab[aria-selected="true"] { color: #fff; }
.themen__tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* Fortschrittsbalken: unter dem aktiven Reiter; ohne Autoplay steht er voll */
.themen__balken {
	position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
	background: var(--blau); transform: scaleX(0); transform-origin: left center;
}
.themen__tab[aria-selected="true"] .themen__balken { transform: scaleX(var(--b, 1)); }
.themen.ist-aktiv .themen__panels { margin-top: var(--s3); gap: 0; }
.themen.ist-aktiv .themen__panel {
	grid-area: 1 / 1; padding-top: 0; border-top: 0;
	visibility: hidden; opacity: 0; transform: translateY(10px);
	transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.themen.ist-aktiv .themen__panel.ist-aktiv { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.themen.ist-aktiv .themen__titel { display: none; }
@media (min-width: 48em) and (hover: none), (min-width: 48em) {
	.themen:not(.ist-aktiv) .themen__panels { grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
}

/* ---------- Einstieg: Zeichnung rechts ---------- */
.einstieg__buehne {
	position: relative; justify-self: center; width: min(100%, 11rem); aspect-ratio: 480 / 420;
	transform: translate3d(0, calc(var(--p, 0) * -32px), 0);
}
.einstieg__buehne::before {
	content: ""; position: absolute; inset: -18% -14%; z-index: -1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(101, 161, 214, .28), transparent);
}
@media (min-width: 64em) {
	.einstieg__buehne { width: min(100%, 27rem); }
}
.illu-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.illu { opacity: 0; transition: opacity .5s var(--ease-out); }
.illu.ist-aktiv { opacity: 1; }
.illu .teil {
	opacity: 0; transform: translateY(14px); transform-box: fill-box; transform-origin: center;
	transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.illu.ist-aktiv .teil { opacity: 1; transform: none; }
.il-flaeche { fill: rgba(255, 255, 255, .07); stroke: var(--blau); stroke-width: 2.5; }
.il-schild-aussen { stroke: rgba(101, 161, 214, .45); stroke-dasharray: 3 9; stroke-linecap: round; fill: none; }
.il-linie { stroke: var(--blau); stroke-width: 2.5; fill: none; }
.il-fein { stroke-opacity: .4; stroke-dasharray: 4 6; }
.il-fuell { stroke: none; }
.il-blau { fill: var(--blau); }
.il-orange { fill: var(--orange); }
.il-weiss { fill: #fff; }
.il-weiss-fein { fill: rgba(255, 255, 255, .22); }
.il-tinte { fill: var(--tinte); opacity: .75; }
.il-haken { stroke: var(--orange); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.il-haken--klein { stroke: var(--tinte); stroke-width: 10; }

/* N-Zeichen zeichnet sich einmal beim Laden */
@media (prefers-reduced-motion: no-preference) {
	.einstieg__n .n-teil { stroke-width: 22; stroke-linejoin: round; stroke-dasharray: 1; animation: n-zeichnen 1.5s var(--ease-out) .15s both; }
	.einstieg__n .n-teil--orange { animation-delay: .45s; }
}
@keyframes n-zeichnen {
	0% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
	65% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; }
	100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
}
.einstieg__n .n-teil { stroke-width: 0; }

/* Hero-Bewegung beim Scrollen: Punktraster wandert leicht mit */
@media (prefers-reduced-motion: no-preference) {
	.einstieg::before { transform: translate3d(0, calc(var(--p, 0) * 48px), 0); will-change: transform; }
}

/* ---------- Zahlen ---------- */
.zahlen__wert { font-variant-numeric: tabular-nums; display: block; }

/* ---------- Schritte: Weg zwischen den Symbolfeldern ---------- */
/* Die Linie läuft vom Rand eines Feldes zum Rand des nächsten, auf Mittelhöhe der Felder.
   Füllung: --s je Schritt (0 bis 1), setzt erlebnis.js beim Scrollen; ohne Skript steht sie voll. */
.schritt__weg { position: absolute; z-index: 1; pointer-events: none; }
.schritt__weg::before, .schritt__weg::after { content: ""; position: absolute; inset: 0; border-radius: 2px; }
.schritt__weg::before { background: var(--linie); }
.schritt__weg::after { background: var(--blau); transform: scaleX(var(--s, 1)); transform-origin: left center; }
@media (min-width: 48em) {
	.schritt__weg {
		top: calc(var(--pad) + var(--feld) / 2 - 1.5px); height: 3px;
		left: calc(50% + var(--feld) / 2 + var(--s2)); width: calc(100% + var(--luecke) - var(--feld) - 2 * var(--s2));
	}
}
.schritte__liste.mit-weg .schritt__weg::after { transform: scaleX(var(--s, 0)); }
.schritte__liste.mit-weg .schritt__symbol { transition: box-shadow .4s var(--ease-out), color .4s var(--ease-out), background-color .4s var(--ease-out); }
.schritte__liste.mit-weg .schritt:not(.ist-an) .schritt__symbol { color: var(--mute); background: #fff; box-shadow: inset 0 0 0 2px var(--linie); }
.schritte__liste.mit-weg .schritt:not(.ist-an) .symbol__akzent { stroke: #9bb3cc; }
.schritte__liste.mit-weg .schritt.ist-an .schritt__symbol { box-shadow: inset 0 0 0 2px var(--blau), 0 0 0 7px rgba(101, 161, 214, .22); }
@media (min-width: 48em) {
	.schritte__liste.mit-weg .schritt { transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out); }
	.schritte__liste.mit-weg .schritt.ist-an { border-color: #c4d8ec; box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 14px 32px -18px rgba(28, 67, 116, .3); }
}

/* Mobil: Karten untereinander, senkrechte Linie links verbindet die Symbolfelder (Knoten auf Feldmitte) */
@media (max-width: 47.999em) {
	.schritte__liste { --feld: 6.5rem; --ico: 4.5rem; padding-left: 2rem; }
	.schritt__weg {
		left: -2rem; width: 3px; margin-left: 6px; top: calc(var(--pad) + var(--feld) / 2); height: calc(100% + var(--luecke));
	}
	.schritt__weg::after { transform: scaleY(var(--s, 1)); transform-origin: center top; }
	.schritte__liste.mit-weg .schritt__weg::after { transform: scaleY(var(--s, 0)); }
	.schritt::before {
		content: ""; position: absolute; z-index: 2; left: calc(-2rem + 1px); top: calc(var(--pad) + var(--feld) / 2 - 7px);
		width: 13px; height: 13px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 4px #fff;
	}
	.schritte__liste.mit-weg .schritt:not(.ist-an)::before { background: #b9cadc; }
}

/* ---------- DomMCP: Beispiel-Gespräch ---------- */
.dommcp-hinweis__innen { grid-template-areas: "kopf" "text" "chat"; }
.dommcp-hinweis__kopf { grid-area: kopf; }
.dommcp-hinweis__text { grid-area: text; }
@media (min-width: 56em) {
	.dommcp-hinweis__innen { grid-template-areas: "kopf chat" "text chat"; align-items: start; }
	.dommcp-hinweis__innen:not(:has(.chat)) { grid-template-areas: "kopf text"; align-items: center; }
}
.chat {
	grid-area: chat; align-self: center; width: 100%; max-width: 34rem; justify-self: center;
	background: rgba(10, 28, 52, .45); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6);
}
.chat__kopf { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.chat__punkte { display: inline-flex; gap: 6px; }
.chat__punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.chat__beispiel {
	font-size: var(--fs-klein); font-weight: 700; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase;
	padding: .15rem .6rem; border-radius: 999px; color: var(--hell-auf-dunkel); box-shadow: inset 0 0 0 1px var(--hell-auf-dunkel);
}
.chat__buehne { display: grid; padding: var(--s3) var(--s2) var(--s3); }
/* Ohne Skript und bei reduzierter Bewegung stehen alle Beispiele ruhig untereinander */
.chat__fall { display: grid; gap: var(--s2); }
.chat__fall + .chat__fall { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, .12); }
.chat__zeile { display: flex; flex-direction: column; gap: .3rem; }
.chat__zeile--frage { align-items: flex-end; }
.chat__zeile--antwort { align-items: flex-start; }
.chat__blase { position: relative; margin: 0; padding: .7rem 1rem; border-radius: 16px; font-size: var(--fs-klein); line-height: 1.5; max-width: 92%; }
.chat__zeile--frage .chat__blase { background: var(--blau); color: var(--tinte); border-bottom-right-radius: 4px; }
.chat__blase--antwort { background: rgba(255, 255, 255, .1); color: #fff; border-bottom-left-radius: 4px; }
.chat__blase--antwort p { margin: 0; }
.chat__werkzeug { display: flex; align-items: center; gap: .5rem; margin: 0; padding-left: .25rem; }
.chat__quelle { font-size: var(--fs-klein); font-weight: 600; font-stretch: 110%; letter-spacing: .04em; color: var(--hell-auf-dunkel); }
.chat__denkt { display: none; gap: 4px; flex: none; }
.chat__denkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--hell-auf-dunkel); }
.chat__hinweis { margin: 0; padding: 0 var(--s2) var(--s2); font-size: var(--fs-klein); text-align: center; color: var(--hell-auf-dunkel); }
.chat__wahl { display: flex; justify-content: center; gap: .25rem; padding: 0 var(--s2) .35rem; }
.chat__wahl[hidden] { display: none; }
.chat__dot { display: grid; place-items: center; min-width: 2.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.chat__fuell { position: relative; width: 1.5rem; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .25); transition: background-color .3s var(--ease-out); }
.chat__fuell::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.chat__dot:hover .chat__fuell { background: rgba(255, 255, 255, .5); }
.chat__dot[aria-current="true"] .chat__fuell { background: rgba(255, 255, 255, .35); }
.chat .z { transition: none; }
/* Tippen: Buchstaben liegen von Anfang an im Text (kein Umbruch-Sprung), nur ihre Deckkraft ändert sich */
.chat.tippt .z:not(.da) { opacity: 0; }
.chat.tippt .chat__zeile, .chat.tippt .chat__werkzeug { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.chat.tippt .chat__zeile:not(.da), .chat.tippt .chat__werkzeug:not(.da) { opacity: 0; transform: translateY(6px); }
.chat.tippt .chat__denkt { display: inline-flex; opacity: 0; transition: opacity .2s var(--ease-out); }
.chat.tippt .chat__denkt.an { opacity: 1; }
.chat.tippt .chat__denkt.an i { animation: chat-punkt 1s ease-in-out infinite; }
.chat.tippt .chat__denkt.an i:nth-child(2) { animation-delay: .15s; }
.chat.tippt .chat__denkt.an i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punkt { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Wechsel: alle Beispiele liegen in derselben Zelle, die höchste bestimmt die Höhe (kein Höhensprung); sichtbar ist eines */
.chat.wechselt .chat__fall { grid-area: 1 / 1; align-content: start; margin: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; }
.chat.wechselt .chat__fall.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out), visibility 0s; }
@media (pointer: coarse) { .chat__dot { height: 2.75rem; } }

/* ---------- Lichtschein auf Karten, magnetische Knöpfe (nur feine Zeiger) ---------- */
.saeule, .kachel { position: relative; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.saeule::before, .kachel::before {
		content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
		background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(101, 161, 214, .2), transparent 65%);
		transition: opacity .35s var(--ease-out);
	}
	.saeule:hover::before, .kachel:hover::before { opacity: 1; }
	.knopf.magnet { translate: var(--tx, 0) var(--ty, 0); }
}

/* Bewegung zurücknehmen: Wechsel ohne Verzögerung */
@media (prefers-reduced-motion: reduce) {
	.themen.ist-aktiv .themen__panel { transition-delay: 0s !important; transform: none; }
	.illu .teil { transition-delay: 0s !important; transform: none; }
}

/* ---------- Rechtstexte und Kontaktseite ---------- */
/* Offener Platzhalter in Impressum und Datenschutz: gelb, gut lesbar (dunkelbraun auf hellgelb, über 10:1) */
mark.offen { background: #fff1a8; color: #3b2f00; padding: .05em .3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Kontaktdaten der Kontaktseite: drei Spalten, Nummer und Adresse groß */
.inhalt > .kontakt-info { max-width: none; gap: var(--s4); }
.kontakt-info__label { margin: 0 0 .25rem; font-size: var(--fs-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.kontakt-info__gross { margin: 0 0 var(--s2); font: 700 var(--fs-h3)/1.2 var(--font); font-stretch: var(--font-breit); }
.kontakt-info__gross:has(a[href^="tel:"]) { white-space: nowrap; }
.kontakt-info__gross a[href^="mailto:"] { overflow-wrap: anywhere; }
.kontakt-info__gross a { display: inline-block; min-height: 44px; color: var(--dunkelblau); text-decoration: none; }
.kontakt-info__gross a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.kontakt-info a[rel~="noopener"] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Lange deutsche Wörter in Überschriften und Text brechen, statt die Seite zu verbreitern (Verbraucherstreitbeilegung) */
.inhalt :is(h2, h3, h4, h5, h6, p, li) { overflow-wrap: break-word; }
.inhalt :is(p, li) { hyphens: auto; }
/* Überschriften nie trennen ("Do-mino"); im Text trennt der Browser nur Wörter ab 8 Buchstaben: Domino, Notes, NotesIT, HCL bleiben ganz */
:root { hyphenate-limit-chars: 8 3 3; }
:is(h1, h2, h3, h4, h5, h6, summary, nav a) { hyphens: manual; }
.nowrap { white-space: nowrap; }

/* ---------- Partner-Abschnitte (notesit/partner) und Chips (notesit/chips) ---------- */
.partner { scroll-margin-top: 6rem; }
.partner .container { padding-block: 0; }
.partner__innen { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 60em) { .partner__innen--produkte { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s5); } }
.partner__haupt { min-width: 0; }
.partner__haupt h2 { margin: 0 0 var(--s2); }
.partner__logos { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
/* Logo im festen Rahmen: gleiche Höhe für alle Partner, Logo immer vollständig sichtbar */
.partner__logos .partner__logo {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: 6rem; min-width: 11rem; max-width: 100%; padding: .75rem 1.25rem;
	background: #fff; border: 1px solid var(--rahmen); border-radius: 12px;
}
.partner__logos .partner__logo a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 44px; }
.partner__logos .partner__logo img { display: block; width: auto; height: auto; max-width: 14rem; max-height: 100%; object-fit: contain; }
.partner__logos .partner__logo--marke span { font-size: var(--fs-h3, 1.5rem); font-weight: 700; font-stretch: 125%; letter-spacing: .14em; color: var(--dunkelblau); }
.partner__logos .partner__logo--zusatz { flex-direction: column; gap: .15rem; }
.partner__logos .partner__logo--zusatz a { min-height: 0; height: auto; }
.partner__logos .partner__logo--zusatz img { width: 11rem; max-width: 100%; height: auto; max-height: 3.25rem; aspect-ratio: 615 / 158; }
.partner__zusatz { font-size: var(--fs-klein); font-weight: 600; line-height: 1.2; color: var(--mute); }
.partner__aktion { margin: var(--s3) 0 0; }
.partner__text p { max-width: 68ch; margin: 0 0 var(--s2); }
.partner__hinweis {
	max-width: 68ch; margin: var(--s3) 0 0; padding: var(--s2) var(--s3); font-weight: 600; color: var(--dunkelblau);
	background: var(--tint); border-left: 6px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0;
}
.abschnitt--hell .partner__hinweis { background: #fff; }
.partner__produkte { padding: var(--s3); background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); box-shadow: var(--schatten-karte); }
.abschnitt--hell .partner__produkte { border-color: var(--linie); }
.partner__produkte h3 { margin: 0 0 var(--s2); font-size: var(--fs-klein); font-weight: 600; font-stretch: 112%; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.partner__produktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.partner__produktliste li { margin: 0; }
.partner__produktliste :is(a, span) {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 44px; padding: .5rem 1rem; box-sizing: border-box;
	border-radius: var(--radius-knopf); background: var(--tint); font-weight: 600; text-decoration: none; color: var(--dunkelblau);
}
.partner__produktliste a::after { content: "\2192"; flex: none; color: var(--blau); transition: transform .2s var(--ease-out); }
.partner__produktliste a:hover { box-shadow: inset 0 0 0 2px var(--dunkelblau); }
.partner__produktliste a:hover::after { transform: translateX(3px); }
.partner__produktliste a:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }

.abschnitt.chips { padding-block: var(--s4); }
.chips .container { padding-block: 0; }
.chips h2 { margin: 0 0 var(--s2); }
.chips__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips__chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 99px; background: #fff;
	text-decoration: none; font-weight: 600; color: var(--dunkelblau); box-shadow: inset 0 0 0 1.5px var(--rahmen);
}
.chips__chip:hover { box-shadow: inset 0 0 0 2px var(--dunkelblau); }
.chips__chip:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }

/* ---------- Team mit Details (Über uns) ---------- */
.team--details .team__liste { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.team--details .team__person { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: stretch; }
.team--details .team__foto { aspect-ratio: auto; min-height: 100%; }
.team__koerper { display: flex; flex-direction: column; min-width: 0; padding: .75rem; gap: .3rem; }
.team--details .team__name { padding: 0; }
.team__funktion { margin: 0; font-size: var(--fs-klein); font-weight: 600; line-height: 1.3; color: var(--text); }
.team--details .team__rolle { padding: 0; }
.team__zertifikate { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.team__zertifikate li { margin: 0; padding: .2rem .55rem; border-radius: 99px; background: var(--tint); color: var(--dunkelblau); font-size: var(--fs-klein); line-height: 1.3; box-shadow: inset 0 0 0 1px var(--rahmen); }
.team__kontakt { list-style: none; margin: auto 0 0; padding: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.team__kontakt li { margin: 0; }
.team__knopf {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
	color: var(--dunkelblau); background: #fff; box-shadow: inset 0 0 0 1.5px var(--rahmen); transition: background-color .2s, color .2s;
}
.team__knopf:hover { background: var(--dunkelblau); color: #fff; box-shadow: none; }
.team__knopf:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }
.team__symbol { display: block; }
@media (min-width: 40em) {
	.team--details .team__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team--details .team__person { display: flex; }
	.team--details .team__foto { aspect-ratio: 3 / 4; min-height: 0; }
	.team__koerper { flex: 1; padding: 1rem; }
}
@media (min-width: 64em) { .team--details .team__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Seiten ordnen (HCL Notes / Domino und Produktseiten): Text mit Aufzählung, Karten als Raster, Ablauf ---------- */
.text-bild:not(.text-bild--rechts):not(.text-bild--links) .text-bild__text { max-width: 78ch; }
.text-bild__punkte { margin: 0 0 1em; padding-left: 1.4em; }
.text-bild__punkte li { margin-bottom: .4em; }
.text-bild__punkte li::marker { color: var(--blau); }
.abschnitt--dunkel .text-bild__punkte li::marker { color: #fff; }
.text-bild__text > :last-child { margin-bottom: 0; }
.text-bild__aktion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s3); }
.abschnitt--dunkel .knopf--hell { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.abschnitt--dunkel .knopf--hell:hover { box-shadow: inset 0 0 0 2px #fff; }
.text-bild--breit .text-bild__bild { margin: var(--s2) 0 0; }
.text-bild--breit .text-bild__bild img { width: auto; max-width: 100%; background: var(--tint); border-radius: var(--radius-karte); }
.text-bild--breit figcaption { margin-top: .6rem; font-size: var(--fs-klein); color: var(--mute); }
.seitenkopf__aktion { margin: var(--s4) 0 0; }
.seitenkopf__text p.seitenkopf__aktion { max-width: none; }

.karten-block--seite .container > h2 { max-width: none; }
.kachel-liste--raster, .kachel-liste--vier, .kachel-liste--fuenf, .kachel-liste--zwei { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .kachel-liste--raster, .kachel-liste--vier, .kachel-liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kachel-liste--fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .kachel-liste--raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kachel-liste--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kachel-liste--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kachel-liste--raster .kachel, .kachel-liste--vier .kachel, .kachel-liste--fuenf .kachel, .kachel-liste--zwei .kachel { padding: var(--s3); }
@media (min-width: 40em) { .kachel-liste--zwei .kachel { padding: var(--s4); } }
.kachel__kicker { margin: 0 0 .35rem; font-size: var(--fs-klein); font-weight: 650; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.kachel__text > p { margin: 0 0 .75em; }
.kachel__text > p:last-child { margin-bottom: 0; }
.kachel__text--nach { margin-top: .75em; }
.kachel__punkte { margin: .75em 0 0; padding-left: 1.2em; color: var(--mute); }
.kachel__text + .kachel__punkte { margin-top: .75em; }
.kachel__titel + .kachel__punkte { margin-top: 0; }
.kachel__punkte li { margin-bottom: .35em; }
.kachel__punkte li::marker { color: var(--blau); }
.kachel__bild--rund { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; margin-bottom: var(--s2); }
.kachel__bild--rund img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; }

/* Ablauf: nummerierte Schritte als Karten, Nummer links, Text oben bündig */
.ablauf :is(h2, h3) { margin-bottom: var(--s3); }
.ablauf > .container > p { max-width: 62ch; color: var(--mute); margin-top: calc(var(--s2) * -1); margin-bottom: var(--s3); }
.ablauf__liste { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) { .ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ablauf__liste--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ablauf__schritt {
	counter-increment: schritt; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s2); align-items: start;
	padding: var(--s3); background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius-karte);
	box-shadow: 0 1px 2px rgba(20, 47, 82, .04), 0 8px 24px -16px rgba(20, 47, 82, .14);
}
.ablauf__schritt::before {
	content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--dunkelblau); color: #fff; font-weight: 700; font-stretch: 112%; font-size: var(--fs-h3); line-height: 1;
}
.ablauf__inhalt h4 { margin: .5rem 0 .4em; }
.ablauf__inhalt p { margin: 0 0 .6em; color: var(--mute); }
.ablauf__punkte { margin: .4em 0 0; padding-left: 1.2em; color: var(--mute); }
.ablauf__punkte li { margin-bottom: .3em; }
.ablauf__punkte li::marker { color: var(--blau); }
.abschnitt--weiss:has(+ .abschnitt--weiss.ablauf), .abschnitt--hell:has(+ .abschnitt--hell.ablauf) { padding-bottom: var(--s4); }
.abschnitt--weiss + .abschnitt--weiss.ablauf, .abschnitt--hell + .abschnitt--hell.ablauf { padding-top: 0; }
.kachel__bild--marke { width: 4rem; height: 4rem; margin-bottom: var(--s2); }
.kachel__bild--marke img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-knopf); }
.kachel-liste--raster .kachel__titel, .kachel-liste--vier .kachel__titel, .kachel-liste--fuenf .kachel__titel, .kachel-liste--zwei .kachel__titel { display: flex; align-items: center; min-height: 44px; }
.seitenkopf__text a:not(.knopf) { color: #fff; }
.kachel__punkte, .ablauf__punkte { list-style: disc; }

/* ---------- IT-Betreuung (Gruppe 2): Dokument-Karten, weiße Symbole, Ablauf mit fünf Schritten, einzelne Person ---------- */
/* Dokument-Vorschau (Produktblatt): hochkantes Bild mit kleiner PDF-Marke */
.kachel__bild--blatt { position: relative; width: min(100%, 11rem); margin-bottom: var(--s2); }
.kachel__bild--blatt img { border-radius: 6px; border: 1px solid var(--rahmen); box-shadow: 0 8px 18px -10px rgba(20, 47, 82, .4); }
.kachel__badge {
	position: absolute; right: .5rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem .2rem .4rem;
	border-radius: 99px; background: var(--dunkelblau); color: #fff; font-size: var(--fs-klein); font-weight: 650; line-height: 1.2;
}
.kachel__badge .symbol { width: 1rem; height: 1rem; }
.kachel__badge .symbol__akzent { stroke: currentColor; }
/* weißes Symbol (z. B. 3CX-Piktogramme) auf dunkelblauer Kachel */
.kachel__bild--symbolhell { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s3); background: var(--dunkelblau); border-radius: 14px; }
.kachel__bild--symbolhell img { display: block; width: 2.1rem; height: 2.1rem; object-fit: contain; border-radius: 0; }
/* Ablauf mit fünf Schritten: drei Karten oben, zwei breite darunter */
@media (min-width: 64em) {
	.ablauf__liste--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ablauf__liste--fuenf .ablauf__schritt { grid-column: span 2; }
	.ablauf__liste--fuenf .ablauf__schritt:nth-child(n+4) { grid-column: span 3; }
}
/* Einzelne Person: waagerechte Karte (Foto links, Angaben rechts), höchstens 40rem breit; gilt auch ohne Details */
.team--einzeln .team__liste { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.team--einzeln .team__person { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: stretch; }
.team--einzeln .team__foto { aspect-ratio: auto; min-height: 100%; }
.team--einzeln:not(.team--details) .team__foto { grid-row: 1 / span 2; min-height: 7rem; }
.team--einzeln:not(.team--details) .team__name { align-self: end; padding-top: 1rem; }
.team--einzeln:not(.team--details) .team__rolle { align-self: start; padding-bottom: 1rem; }
@media (min-width: 40em) {
	.team--einzeln .team__person { grid-template-columns: 11rem minmax(0, 1fr); }
	.team--einzeln.team--details .team__liste { grid-template-columns: minmax(0, 1fr); }
	.team--einzeln.team--details .team__person { display: grid; }
	.team--einzeln.team--details .team__foto { aspect-ratio: auto; min-height: 100%; }
	.team--einzeln .team__koerper { padding: 1.25rem; }
}
@media (min-width: 64em) { .team--einzeln.team--details .team__liste { grid-template-columns: minmax(0, 1fr); } }
/* Tabellen als Matrix (Service-Pakete, MDM): erste Spalte links, übrige zentriert; Häkchen, Striche und "optional" ruhig abgesetzt */
.tabelle-matrix td:not(:first-child), .tabelle-matrix th:not(:first-child) { text-align: center; white-space: nowrap; }
.tabelle-matrix td:first-child { min-width: 14rem; }
.tabelle-matrix .detail { display: block; margin-top: .15rem; font-size: var(--fs-klein); color: var(--mute); font-weight: 400; }
.tabelle-matrix .ja { color: var(--dunkelblau); font-weight: 700; }
.tabelle-matrix .nein { color: #8a98aa; }
.tabelle-matrix .opt { color: var(--mute); font-size: var(--fs-klein); }
.tabelle-matrix .gruppe th { background: var(--dunkelblau); color: #fff; text-align: left; white-space: normal; }
.tabelle-matrix .angebot td { background: var(--tint); font-weight: 600; }
.tabelle-matrix .angebot td:first-child { min-width: 0; }
.tabelle-matrix figcaption { padding: .6rem 1rem; }
/* Raster mit genau fünf Karten: drei oben, zwei breite darunter (keine Lücke in der letzten Zeile) */
@media (min-width: 64em) {
	.kachel-liste--raster:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.kachel-liste--raster:has(> :nth-child(5):last-child) > .kachel { grid-column: span 2; }
	.kachel-liste--raster:has(> :nth-child(5):last-child) > .kachel:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- Stellenangebote: Kurzvorstellung mit aufklappbarer Beschreibung ---------- */
.inhalt .stelle { max-width: 72ch; margin: 0 0 1.5rem; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); background: #fff; box-shadow: 0 1px 2px rgba(20, 47, 82, .04); }
.inhalt .stelle h2 { margin: 0 0 .75rem; }
.inhalt .stelle > div > p { margin: 0 0 1rem; }
.inhalt .stelle__fakten { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.inhalt .stelle__fakten li { margin: 0; padding: .15rem .7rem; border-radius: 999px; background: var(--tint); color: var(--dunkelblau); font-size: var(--fs-klein); line-height: 1.5; font-weight: 600; }
.inhalt .stelle__details { margin: 0; border: 0; border-top: 1px solid var(--rahmen); border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.inhalt .stelle__details summary { min-height: 52px; padding: .7rem 0; border-radius: 6px; }
.inhalt .stelle__details summary:hover { background: transparent; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.inhalt .stelle__details summary:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 2px; }
.inhalt .stelle__details summary::after {
	width: 1.25rem; height: 1.25rem; border: 0; transform: none; flex: none;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: background-size .2s var(--ease-out);
}
.inhalt .stelle__details[open] summary::after { transform: none; background-size: 100% 2px, 2px 0; }
.inhalt .stelle__details > :not(summary) { margin-inline: 0; }
.inhalt .stelle__details > :last-child { margin-bottom: 0; }
.inhalt .stelle__details :is(ul, ol) { margin: 0 0 1rem; padding-left: 1.2em; }
.inhalt .stelle__details li { margin-bottom: .25em; font-size: var(--fs-text); line-height: 1.55; }
.inhalt .stelle__details h3 { margin: 1.25rem 0 .5rem; }
.inhalt .stelle__details h3:first-of-type { margin-top: .5rem; }
.inhalt .stelle__details .wp-block-buttons { margin-top: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
	:root { interpolate-size: allow-keywords; }
	.inhalt .stelle__details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete; }
	.inhalt .stelle__details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .inhalt .stelle__details summary::after { transition: none; } }
@media (max-width: 40em) { .inhalt .stelle { padding: 1.25rem 1rem 1rem; } }

/* Bildnachweise im Impressum: [notesit_bildnachweise] */
.inhalt .bildnachweise { margin: 1rem 0; border: 1px solid var(--rahmen); border-radius: var(--radius-karte); background: #fff; overflow: hidden; }
.inhalt .bildnachweise summary { min-height: 48px; padding: .7rem 1.25rem; cursor: pointer; font-weight: 600; color: var(--dunkelblau); }
.inhalt .bildnachweise summary:hover { background: var(--tint); }
.inhalt .bildnachweise summary:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: -3px; }
.inhalt .bildnachweise__inhalt { padding: 0 1.25rem 1rem; font-size: .9rem; overflow-wrap: anywhere; }
.inhalt .bildnachweise__gruppe { margin: 1.2em 0 .4em; font-size: 1rem; }
.inhalt .bildnachweise__gruppe span { font-weight: 400; opacity: .7; }
.inhalt .bildnachweise__liste { margin: 0; padding-left: 1.2rem; }
.inhalt .bildnachweise__liste li { margin: .2em 0; }