/*
 * ilogixx — Bausteinschicht
 *
 * Regel: Hier steht NUR, was theme.json nicht ausdrücken kann.
 * Farben, Schriftgrößen und Abstände kommen ausschließlich aus den
 * --wp--preset--* Variablen. Keine Hex-Werte in dieser Datei.
 */

/* ---------------------------------------------------------
   1. Grundlagen
   --------------------------------------------------------- */

/*
   Alle Elemente rechnen die Innenabstände in ihre Breite ein.
   Ohne das werden Eingabefelder mit inline-size:100% um ihren Innenabstand
   breiter als der Container — sie überlappen und stehen rechts über.
   Der Prototyp hatte diese Zeile, beim Übertragen ins Theme ist sie
   verlorengegangen.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--il-radius: 14px;
	--il-line-dark: var(--wp--preset--color--anthrazit-3);
	--il-transition: 0.2s ease;
}

html {
	scroll-behavior: smooth;
}

/*
   WordPress setzt zwischen den Blöcken auf oberster Ebene einen Abstand von
   1,5rem. Zwischen zwei dunklen Abschnitten wird daraus ein heller Streifen,
   weil der Seitengrund durchscheint. Alle Abschnitte in diesem Theme bringen
   ihren Abstand als Innenabstand mit — der Zwischenraum ist also überflüssig.
*/
.wp-site-blocks > * {
	margin-block-start: 0;
}

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

/* Sichtbarer Fokus — gilt überall, auch in Patterns */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------
   2. Wiederkehrende Textbausteine
   --------------------------------------------------------- */

/* Kleines Label über einer Überschrift, mit vorangestelltem Strich */
.il-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-block-end: 1.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}

.il-eyebrow::before {
	content: "";
	flex: none;
	inline-size: 26px;
	block-size: 1px;
	background: currentColor;
}

/* Im Fuß ohne Strich und in Grau */
.il-footer .il-eyebrow {
	color: var(--wp--preset--color--base);
}

.il-footer .il-eyebrow::before {
	display: none;
}

/* Datum, Kategorien, Statuszeilen */
.il-meta {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--grau);
}

/* ---------------------------------------------------------
   3. Kopf- und Fußbereich
   --------------------------------------------------------- */

.il-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	border-block-end: 1px solid var(--wp--preset--color--linie);
	backdrop-filter: blur(12px);
}

.il-footer a {
	text-decoration: none;
	color: inherit;
}

.il-footer a:hover {
	color: var(--wp--preset--color--akzent);
}

.il-footer-nav {
	gap: 0.55rem;
}

/* ---------------------------------------------------------
   4. Karten (Beitragsübersicht, Modulkacheln)
   --------------------------------------------------------- */

.il-cards {
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.il-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	padding: 1.7rem 1.55rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	transition: border-color var(--il-transition), transform var(--il-transition);
}

.il-card:hover {
	border-color: var(--wp--preset--color--anthrazit);
	transform: translateY(-3px);
}

.il-card .wp-block-post-title a {
	text-decoration: none;
}

.il-card .wp-block-post-excerpt__more-link {
	margin-block-start: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
}

/* ---------------------------------------------------------
   5. Dunkle Abschnitte
   Auf Gruppen mit anthrazit-Hintergrund anwenden.
   --------------------------------------------------------- */

.il-dark {
	color: var(--wp--preset--color--base);
}

.il-dark :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--base);
}

.il-dark :where(p, li) {
	color: var(--wp--preset--color--grau-invers);
}

.il-dark .il-eyebrow {
	color: var(--wp--preset--color--akzent);
}

.il-dark hr {
	border-color: var(--il-line-dark);
}

/* ---------------------------------------------------------
   6. Hero und Routing-Grafik
   --------------------------------------------------------- */

.il-hero {
	padding-block: clamp(3.75rem, 7vw, 6.5rem) clamp(7rem, 12vw, 11rem);
}

.il-hero__grid {
	gap: clamp(1.875rem, 5vw, 4.5rem);
}

.il-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--akzent);
}

.il-hero__aktionen {
	margin-block-start: 2rem;
	gap: 0.85rem;
}

/* Zweiter Button auf dunklem Grund: Umriss statt Fläche */
.il-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 1.5px solid var(--il-line-dark);
}

.il-btn-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

/* Einsprünge zu den meistgesuchten Funktionen.
   Sie sehen aus wie Bedienelemente — also sind sie welche. */
.il-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 2.4rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--il-line-dark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
}

.il-chips a {
	padding: 0.45em 0.85em;
	border: 1px solid var(--il-line-dark);
	border-radius: 999px;
	color: var(--wp--preset--color--grau-invers);
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: border-color var(--il-transition), color var(--il-transition), background var(--il-transition);
}

.il-chips a:hover,
.il-chips a:focus-visible {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.il-chips__alle {
	border-color: transparent !important;
	color: var(--wp--preset--color--akzent) !important;
	padding-inline-start: 0.3em !important;
}

.il-chips__alle:hover { background: rgb(255 133 12 / 12%); }

/* Der Standort ist keine Funktion und steht deshalb für sich */
.il-herkunft {
	margin-block: 1.1rem 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.06em;
	color: #6E7C88;
}

.il-canvas svg {
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

.il-canvas__linien { stroke: var(--il-line-dark); }
.il-canvas__punkt { fill: var(--wp--preset--color--anthrazit); stroke: var(--il-line-dark); stroke-width: 1.5; }
.il-canvas__knoten { fill: var(--wp--preset--color--anthrazit); stroke: var(--wp--preset--color--akzent); }
.il-canvas__welle { stroke: var(--wp--preset--color--akzent); }
.il-canvas__vorgang { fill: var(--wp--preset--color--akzent); }
.il-canvas__ziel-ok { fill: var(--wp--preset--color--status-ok-hell); }
.il-canvas__ziel-wartend { fill: var(--wp--preset--color--akzent); }

.il-canvas__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	fill: var(--wp--preset--color--grau-invers);
	letter-spacing: 0.04em;
}

.il-canvas__knotenlabel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	fill: var(--wp--preset--color--akzent);
	letter-spacing: 0.12em;
}

.il-canvas__note {
	margin-block-start: 0.8rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--wp--preset--color--grau-invers);
}

/* ---------------------------------------------------------
   7. Wallboard
   Sitzt auf der Kante zwischen dunklem Hero und hellem Grund.
   --------------------------------------------------------- */

/*
   Das Wallboard ragt aus dem dunklen Hero in die helle Fläche.
   Umgesetzt über einen negativen Abstand statt über einen Verlauf:
   WordPress vergibt Gruppen einen eigenen Aussenabstand, gegen den
   ein Verlauf nicht ankommt.
*/
.il-boardzone {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1 * clamp(3.5rem, 7vw, 6rem)) !important;
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
	background: none;
}

.il-board {
	background: var(--wp--preset--color--anthrazit-2);
	border: 1px solid var(--il-line-dark);
	border-radius: var(--il-radius);
	overflow: hidden;
	color: var(--wp--preset--color--base);
	box-shadow: 0 40px 90px -50px rgb(0 0 0 / 85%);
}

.il-board__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.1rem;
	border-block-end: 1px solid var(--il-line-dark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau-invers);
}

.il-board__live {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.il-board__live i {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--status-ok-hell);
	animation: il-blinken 2s ease-in-out infinite;
}

@keyframes il-blinken {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.2; }
}

.il-board__kacheln {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--il-line-dark);
}

.il-kachel {
	background: var(--wp--preset--color--anthrazit-2);
	padding: 1.3rem 1.2rem 1.4rem;
}

.il-kachel b {
	display: block;
	margin-block-end: 0.55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau-invers);
}

.il-zahl {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

.il-zahl--wartend { color: var(--wp--preset--color--akzent); }
.il-zahl--ok      { color: var(--wp--preset--color--status-ok-hell); }

.il-sub {
	margin-block-start: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	color: var(--wp--preset--color--grau-invers);
}

.il-board__zeilen { border-block-start: 1px solid var(--il-line-dark); }

.il-zeile {
	display: grid;
	grid-template-columns: 1.7fr 0.9fr 0.7fr 0.7fr;
	gap: 1rem;
	align-items: center;
	padding: 0.72rem 1.1rem;
	border-block-end: 1px solid var(--il-line-dark);
	font-size: 0.87rem;
}

.il-zeile:last-of-type { border-block-end: 0; }

.il-zeile--kopf {
	background: rgb(255 255 255 / 2%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.63rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau-invers);
}

.il-mono {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--grau-invers);
}

.il-pille {
	justify-self: start;
	padding: 0.24em 0.65em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
}

.il-pille--wartend { background: #3d2a0c; color: var(--wp--preset--color--akzent); }
.il-pille--ok      { background: #113029; color: var(--wp--preset--color--status-ok-hell); }

.il-board__note {
	margin: 0;
	padding: 0.65rem 1.1rem;
	border-block-start: 1px solid var(--il-line-dark);
	background: rgb(255 255 255 / 2%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--grau-invers);
}

/* ---------------------------------------------------------
   8. Kanaltabelle, Module, Ablaufschiene
   --------------------------------------------------------- */

.il-kopfzeile { margin-block-end: 3rem; align-items: flex-end; }

.il-tabelle table { border-collapse: collapse; }

.il-tabelle th,
.il-tabelle td {
	text-align: start;
	padding: 1.05rem 0.9rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
	vertical-align: top;
}

.il-tabelle th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	border-block-end-color: var(--wp--preset--color--anthrazit);
}

.il-tabelle td:first-child {
	color: var(--wp--preset--color--anthrazit);
	font-weight: 600;
	white-space: nowrap;
}

.il-tabelle tbody tr:hover td { background: var(--wp--preset--color--base); }

.il-modulreihe { gap: clamp(1.25rem, 2.4vw, 2rem); }

.il-modul {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	overflow: hidden;
	padding: 0 0 1.75rem;
	transition: transform var(--il-transition), box-shadow var(--il-transition);
}

.il-modul:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgb(35 38 40 / 45%);
}

.il-modul__bild { margin: 0 0 1.55rem; }

.il-modul__bild img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	inline-size: 100%;
}

.il-modul > :not(.il-modul__bild) { padding-inline: 1.5rem; }

.il-stichworte { color: var(--wp--preset--color--grau); margin-block-end: 0; }

.il-schiene {
	gap: 1px;
	margin-block-start: 2.6rem;
	background: var(--il-line-dark);
	border: 1px solid var(--il-line-dark);
	border-radius: var(--il-radius);
	overflow: hidden;
}

.il-schritt {
	background: var(--wp--preset--color--anthrazit);
	padding: 1.6rem 1.35rem 1.8rem;
}

.il-schritt__nr {
	color: var(--wp--preset--color--akzent);
	letter-spacing: 0.13em;
	margin-block-end: 0.75rem;
}

.il-schritt p:last-child { margin-block-end: 0; }

/* ---------------------------------------------------------
   9. Referenzen
   --------------------------------------------------------- */

.il-refs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	margin-block-start: 2rem;
	background: var(--wp--preset--color--linie);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	overflow: hidden;
}

.il-refs div {
	display: grid;
	place-items: center;
	padding: 1.6rem 1rem;
	background: var(--wp--preset--color--papier);
}

.il-refs img {
	block-size: 32px;
	inline-size: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	mix-blend-mode: multiply;
	transition: opacity var(--il-transition);
}

.il-refs div:hover img { opacity: 0.95; }

/* ---------------------------------------------------------
   10. Formular
   --------------------------------------------------------- */

.il-form { margin-block-start: 2rem; }

.il-form__zeile {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.il-form__feld { margin-block-end: 1.1rem; }

.il-form label {
	display: block;
	margin-block-end: 0.4rem;
	font-size: 0.92rem;
	font-weight: 500;
}

.il-form input[type="text"],
.il-form input[type="email"],
.il-form input[type="tel"],
.il-form select,
.il-form textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.72em 0.9em;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--anthrazit);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 8px;
	transition: border-color var(--il-transition);
}

.il-form input:focus,
.il-form select:focus,
.il-form textarea:focus {
	border-color: var(--wp--preset--color--anthrazit);
}

.il-form textarea { resize: vertical; }

.il-form__einwilligung {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	margin-block: 1.4rem;
}

.il-form__einwilligung label {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--wp--preset--color--grau);
}

.il-form__einwilligung a { color: var(--wp--preset--color--akzent-text); }

.il-form__aktion {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.il-form__pflicht {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--grau);
}

/* Honigtopf — für Menschen unsichtbar, für Screenreader ausgeblendet */
.il-form__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.il-form__fehler,
.il-form__danke {
	padding: 1.2rem 1.4rem;
	margin-block-end: 1.5rem;
	border-radius: var(--il-radius);
	border-inline-start: 3px solid;
}

.il-form__fehler {
	border-color: var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--base);
}

.il-form__danke {
	border-color: var(--wp--preset--color--status-ok);
	background: var(--wp--preset--color--base);
}

.il-form__danke-titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-block-end: 0.4rem;
}

.il-form__danke p:last-child,
.il-form__fehler { margin-block-end: 0; }

/* ---------------------------------------------------------
   11. Externe Einbettungen (Zwei-Klick)
   --------------------------------------------------------- */

.il-embed {
	margin-block-start: 2.5rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.il-embed__platzhalter { padding: clamp(1.75rem, 4vw, 3rem); max-inline-size: 58ch; }

.il-embed__titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-block-end: 0.6rem;
}

.il-embed__text { color: var(--wp--preset--color--grau); }

.il-embed__alternative {
	margin-block-start: 1.5rem;
	padding-block-start: 1.2rem;
	border-block-start: 1px solid var(--wp--preset--color--linie);
	font-size: 0.92rem;
	color: var(--wp--preset--color--grau);
}

.il-embed__alternative a { color: var(--wp--preset--color--akzent-text); }

.il-embed.is-geladen { padding: 0; }

.il-embed__rahmen {
	inline-size: 100%;
	block-size: min(78vh, 900px);
	border: 0;
	display: block;
}

/* ---------------------------------------------------------
   12. Responsiv
   --------------------------------------------------------- */

@media (max-width: 1000px) {
	.il-board__kacheln { grid-template-columns: 1fr 1fr; }
	.il-refs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 782px) {
	.il-boardzone { margin-block-start: 0 !important; }
	.il-hero { padding-block-end: clamp(3rem, 8vw, 4rem); }
	.il-zeile { grid-template-columns: 1.5fr 1fr; }
	.il-eng-weg { display: none; }
	.il-form__zeile { grid-template-columns: 1fr; gap: 0; }
	.il-refs { grid-template-columns: repeat(3, 1fr); }

	/* Tabelle bricht auf Karten um */
	.il-tabelle thead { display: none; }
	.il-tabelle tr { display: block; padding-block-end: 0.9rem; border-block-end: 1px solid var(--wp--preset--color--linie); }
	.il-tabelle td { display: block; border-block-end: 0; padding: 0.15rem 0.9rem; }
	.il-tabelle td:first-child { padding-block-start: 1rem; }
}

/* ---------------------------------------------------------
   13. Rueckfallebene fuer die Schriftgroessen

   theme.json ist die Quelle der Wahrheit. Diese Regeln greifen nur,
   wenn die Preset-Variablen nicht ankommen - dann steht die Seite
   trotzdem richtig da. Werte identisch mit theme.json.
   --------------------------------------------------------- */

h1, .has-h1-font-size {
	font-size: var(--wp--preset--font-size--h1, clamp(2.5rem, 1.4rem + 4.6vw, 4.4rem));
}

h2, .has-h2-font-size {
	font-size: var(--wp--preset--font-size--h2, clamp(1.9rem, 1.3rem + 2.6vw, 2.85rem));
}

h3, .has-h3-font-size {
	font-size: var(--wp--preset--font-size--h3, clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem));
}

.has-lead-font-size {
	font-size: var(--wp--preset--font-size--lead, clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem));
}

/* Ueberschriften brauchen kurze Zeilen, sonst zerfaellt der Rhythmus. */
h1, h2 { text-wrap: balance; }
.il-hero h1 { max-inline-size: 14ch; }
.il-closer h2 { max-inline-size: 20ch; margin-inline: auto; }

/* ---------------------------------------------------------
   14. Seitenkopf

   Der dunkle Streifen unter der Navigation. Gibt jeder
   Unterseite denselben Einstieg wie der Startseite.
   --------------------------------------------------------- */

.il-band {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.il-band :where(h1, h2) {
	max-inline-size: 22ch;
	text-wrap: balance;
}

.il-band .wp-block-post-excerpt {
	max-inline-size: 58ch;
}

.il-band .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--grau-invers);
}

.il-band--eng :where(h1) {
	max-inline-size: 26ch;
}

/* Kategorie- und Gruppenlinks im Kopf sehen aus wie das Eyebrow */
.il-band .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

.il-beitragsmeta {
	margin-block-start: 1.4rem;
	padding-block-start: 1.2rem;
	border-block-start: 1px solid var(--il-line-dark);
	gap: 1.2rem;
	color: var(--wp--preset--color--grau-invers);
}

/* ---------------------------------------------------------
   15. Fließtext

   Lange Texte brauchen andere Regeln als Bausteinseiten:
   engere Zeilen, mehr Luft vor Überschriften, ruhige Listen.
   --------------------------------------------------------- */

.il-prose :where(p, ul, ol) {
	max-inline-size: 68ch;
}

.il-prose :where(h2, h3) {
	margin-block-start: 2.6rem;
	margin-block-end: 0.8rem;
}

.il-prose :where(h2)::after {
	content: "";
	display: block;
	inline-size: 32px;
	block-size: 2px;
	margin-block-start: 0.7rem;
	background: var(--wp--preset--color--akzent);
}

.il-prose :where(p) {
	margin-block-end: 1.15em;
}

.il-prose :where(ul, ol) {
	padding-inline-start: 1.1rem;
}

.il-prose :where(li) {
	margin-block-end: 0.5em;
	padding-inline-start: 0.3rem;
}

.il-prose :where(li)::marker {
	color: var(--wp--preset--color--akzent);
}

.il-prose :where(a) {
	color: var(--wp--preset--color--akzent-text);
	text-underline-offset: 0.15em;
}

.il-prose :where(strong) {
	font-weight: 600;
}

/* Der Absatz direkt nach einer Überschrift rückt näher heran */
.il-prose :where(h2, h3) + p {
	margin-block-start: 0;
}

/* ---------------------------------------------------------
   16. Gruppierte Abschnitte im Feature-Archiv
   --------------------------------------------------------- */

.il-gruppe {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.il-gruppe + .il-gruppe {
	border-block-start: 1px solid var(--wp--preset--color--linie);
}

.il-gruppe__titel {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
}

.il-gruppe__titel::before {
	content: "";
	flex: none;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--akzent);
}

.il-gruppe .wp-block-query { margin-block-start: 2rem; }

/* Feature-Karten ohne Bild brauchen eine andere Betonung */
.il-card--feature {
	border-block-start: 3px solid var(--wp--preset--color--akzent);
}

.il-card--feature .wp-block-post-title { margin-block-start: 0; }

/* ---------------------------------------------------------
   17. Beitragsübersicht
   --------------------------------------------------------- */

.il-card__meta {
	gap: 0.6rem 0.9rem;
	align-items: baseline;
	margin-block-end: 0.2rem;
}

.il-marke a {
	display: inline-block;
	padding: 0.24em 0.65em;
	border-radius: 999px;
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--grau);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.il-marke a:hover {
	background: var(--wp--preset--color--anthrazit);
	color: var(--wp--preset--color--base);
}

/* Kategorienavigation über der Übersicht */
.il-kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.il-kategorien li { margin: 0; }

.il-kategorien a {
	display: inline-block;
	padding: 0.45em 0.95em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	text-decoration: none;
	transition: border-color var(--il-transition), background var(--il-transition);
}

.il-kategorien a:hover {
	border-color: var(--wp--preset--color--anthrazit);
	background: var(--wp--preset--color--base);
	color: inherit;
}

.il-blaettern {
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--preset--color--linie);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
}

.il-blaettern a { text-decoration: none; }
.il-blaettern a:hover { color: var(--wp--preset--color--akzent-text); }

.il-zurueck { margin-block-end: 2rem; }
.il-zurueck a { text-decoration: none; color: var(--wp--preset--color--grau); }
.il-zurueck a:hover { color: var(--wp--preset--color--akzent-text); }

.il-weiter .il-cards { margin-block-start: 2rem; }

/* ---------------------------------------------------------
   18. Das Routing-Motiv im Seitenkopf

   Dieselbe Grafik wie im Hero, stark zurückgenommen und nach
   rechts geschoben. Sie soll nicht auffallen, sondern dafür
   sorgen, dass eine Unterseite zur Startseite gehört.
   --------------------------------------------------------- */

.il-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.il-band::before {
	content: "";
	position: absolute;
	inset-block: -20%;
	inset-inline-end: -6%;
	inline-size: min(52%, 620px);
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20620%20400%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%2343484B%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M110%2C60%20C215%2C60%20250%2C200%20305%2C200%20C365%2C200%20415%2C110%20520%2C110%22%2F%3E%3Cpath%20d%3D%22M110%2C150%20C220%2C150%20255%2C200%20305%2C200%20C365%2C200%20420%2C200%20520%2C200%22%2F%3E%3Cpath%20d%3D%22M110%2C250%20C220%2C250%20255%2C200%20305%2C200%20C365%2C200%20420%2C200%20520%2C200%22%2F%3E%3Cpath%20d%3D%22M110%2C340%20C215%2C340%20250%2C200%20305%2C200%20C365%2C200%20415%2C290%20520%2C290%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2343484B%22%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22250%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22340%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22290%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22283%22%20y%3D%22178%22%20width%3D%2244%22%20height%3D%2244%22%20rx%3D%2212%22%20stroke%3D%22%2343484B%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: contain;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 95%);
	mask-image: linear-gradient(to left, #000 30%, transparent 95%);
	pointer-events: none;
}

@media (max-width: 782px) {
	.il-band::before { display: none; }
}

/* ---------------------------------------------------------
   19. Position im Ablauf

   Auf jeder Feature-Seite: die fünf Stufen eines Kundenkontakts.
   Hervorgehoben ist die, zu der das Modul gehört — gesteuert
   über die Body-Klasse aus der Feature-Gruppe.
   --------------------------------------------------------- */

.il-position {
	margin: 0 0 3rem;
	padding: 1.5rem 1.6rem 1.7rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	background: var(--wp--preset--color--base);
	max-inline-size: none;
}

.il-position__titel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	margin-block-end: 1.2rem;
}

.il-position__kette {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: stufe;
	max-inline-size: none;
}

.il-position__kette li {
	position: relative;
	padding: 0 0.9rem 0 0;
	margin: 0;
	counter-increment: stufe;
}

/* Verbindungslinie zwischen den Stufen */
.il-position__kette li::before {
	content: "";
	position: absolute;
	inset-block-start: 6px;
	inset-inline: 0;
	block-size: 1px;
	background: var(--wp--preset--color--linie);
}

.il-position__kette li::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 0;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--linie);
}

.il-position__kette li:last-child::before { inset-inline-end: 100%; }

.il-position__kette b {
	display: block;
	margin-block-start: 1.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.il-position__kette span {
	display: block;
	margin-block-start: 0.3rem;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--wp--preset--color--grau);
}

/* Die zur Gruppe passende Stufe wird hervorgehoben */
.il-gruppe-arbeitsplatz   .il-position__kette li[data-stufe="arbeitsplatz"]::after,
.il-gruppe-sprache-und-ki .il-position__kette li[data-stufe="sprache-und-ki"]::after,
.il-gruppe-auswertung     .il-position__kette li[data-stufe="auswertung"]::after {
	background: var(--wp--preset--color--akzent);
	box-shadow: 0 0 0 4px rgb(255 133 12 / 18%);
}

.il-gruppe-arbeitsplatz   .il-position__kette li[data-stufe="arbeitsplatz"] b,
.il-gruppe-sprache-und-ki .il-position__kette li[data-stufe="sprache-und-ki"] b,
.il-gruppe-auswertung     .il-position__kette li[data-stufe="auswertung"] b {
	color: var(--wp--preset--color--anthrazit);
}

.il-gruppe-arbeitsplatz   .il-position__kette li[data-stufe="arbeitsplatz"] span,
.il-gruppe-sprache-und-ki .il-position__kette li[data-stufe="sprache-und-ki"] span,
.il-gruppe-auswertung     .il-position__kette li[data-stufe="auswertung"] span {
	color: var(--wp--preset--color--anthrazit);
}

@media (max-width: 782px) {
	.il-position__kette { grid-template-columns: 1fr 1fr; gap: 1.2rem 0.8rem; }
	.il-position__kette li::before { display: none; }
}

/* ---------------------------------------------------------
   20. Aufmacher in der Beitragsübersicht

   Der neueste Beitrag bekommt die Fläche, die ihm zusteht.
   Alles Weitere folgt im Raster darunter.
   --------------------------------------------------------- */

.il-aufmacher { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; }

.il-aufmacher__box {
	position: relative;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	border-inline-start: 3px solid var(--wp--preset--color--akzent);
	transition: box-shadow var(--il-transition);
}

.il-aufmacher__box:hover {
	box-shadow: 0 20px 45px -30px rgb(35 38 40 / 45%);
}

.il-aufmacher__box .wp-block-post-title { max-inline-size: 24ch; }
.il-aufmacher__box .wp-block-post-title a { text-decoration: none; }
.il-aufmacher__box .wp-block-post-excerpt { max-inline-size: 68ch; }

.il-neu {
	color: var(--wp--preset--color--akzent-text);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

/* ---------------------------------------------------------
   21. Lesefortschritt

   Dünner Balken am oberen Rand, nur auf Beiträgen.
   Rein informativ, deshalb auch bei reduzierter Bewegung aktiv.
   --------------------------------------------------------- */

.il-fortschritt {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	z-index: 80;
	background: var(--wp--preset--color--akzent);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}

/* ---------------------------------------------------------
   22. Nummerierung der Feature-Karten
   --------------------------------------------------------- */

.il-gruppe .il-cards { counter-reset: feature; }

.il-card--feature {
	counter-increment: feature;
	position: relative;
	padding-block-start: 2.6rem;
}

.il-card--feature::before {
	content: counter(feature, decimal-leading-zero);
	position: absolute;
	inset-block-start: 1.1rem;
	inset-inline-start: 1.55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--grau);
}

/* ---------------------------------------------------------
   23. Der Seitengrund

   Statt einer flachen grauen Fläche ein feines Raster — dieselbe
   Sprache wie das Wallboard. Es ist bewusst so schwach, dass man
   es erst bemerkt, wenn man darauf achtet.
   --------------------------------------------------------- */

body {
	background-color: var(--wp--preset--color--papier);
	background-image:
		linear-gradient(to right, rgb(35 38 40 / 4%) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(35 38 40 / 4%) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center top;
	background-attachment: fixed;
}

/* Dunkle Abschnitte decken das Raster ab, sonst schimmert es durch */
.il-dark,
.il-footer,
.il-header {
	position: relative;
}

/* ---------------------------------------------------------
   24. Der Text liegt als Blatt auf dem Raster

   Gibt Fließtextseiten eine Kante und trennt Inhalt von Grund.
   --------------------------------------------------------- */

.il-prose .entry-content {
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	box-shadow: 0 24px 60px -48px rgb(35 38 40 / 55%);
}

/* Erstes und letztes Element im Blatt ohne zusätzlichen Abstand */
.il-prose .entry-content > :first-child { margin-block-start: 0; }
.il-prose .entry-content > :last-child { margin-block-end: 0; }

/* Das Ablaufdiagramm steht über dem Blatt, nicht darin */
.il-position { box-shadow: 0 24px 60px -48px rgb(35 38 40 / 55%); }

/* Breite Bilder dürfen aus dem Blatt herausragen */
.il-prose .entry-content .alignwide,
.il-prose .entry-content .alignfull {
	margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.25rem));
	inline-size: auto;
	max-inline-size: none;
}

/* ---------------------------------------------------------
   25. Abschnitte nach dem Text

   Ohne eigene Fläche, dafür mit Trennlinie — so bleibt das
   Raster sichtbar und die Seite bekommt Rhythmus.
   --------------------------------------------------------- */

.il-weiter,
.wp-block-group.alignfull:has(> .il-eyebrow) { position: relative; }

.il-weiter::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: max(0px, calc((100% - 1220px) / 2));
	block-size: 1px;
	background: var(--wp--preset--color--linie);
}

/* ---------------------------------------------------------
   26. Redaktioneller Hinweis

   Für Anmerkungen, die vor dem Livegang abgearbeitet werden.
   Bewusst auffällig — der Kasten soll stören, bis er weg ist.
   --------------------------------------------------------- */

.il-hinweis {
	padding: 1.1rem 1.3rem;
	border-inline-start: 3px solid var(--wp--preset--color--akzent);
	border-radius: 0 8px 8px 0;
	background: rgb(255 133 12 / 8%);
	font-size: 0.94rem;
	color: var(--wp--preset--color--anthrazit);
}

.il-hinweis::before {
	content: "Redaktionshinweis";
	display: block;
	margin-block-end: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent-text);
}

/* ---------------------------------------------------------
   27. Downloadlinks

   Sollen als Datei erkennbar sein, nicht als normaler Link.
   --------------------------------------------------------- */

.il-dl {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86rem;
	text-decoration: none;
	color: var(--wp--preset--color--anthrazit);
	border-block-end: 1px solid var(--wp--preset--color--linie);
	padding-block-end: 0.15em;
	transition: border-color var(--il-transition);
}

.il-dl::before {
	content: "↓";
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 1.5em;
	block-size: 1.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--anthrazit);
	font-size: 0.8em;
}

.il-dl:hover { border-block-end-color: var(--wp--preset--color--anthrazit); }

.il-prose .il-tabelle td { vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════
   28. Kopfbereich und Mega-Menü
   ═══════════════════════════════════════════════════════════ */

/* ---- Kontaktzeile über dem Kopf ---- */

.il-topbar { padding-block: 0.45rem; }

.il-topbar__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.6rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--grau-invers);
}

.il-topbar__zeile a { text-decoration: none; color: inherit; }
.il-topbar__zeile a:hover { color: var(--wp--preset--color--akzent); }

/* ---- Kopfleiste ---- */

/*
   Sticky gehört auf den Rahmen, den WordPress um den Template-Part legt.
   Läge es auf der Leiste selbst, wäre nach der Höhe des Rahmens Schluss —
   das sind hier 34 Pixel, also praktisch sofort.
   Der negative Wert lässt die Kontaktzeile wegscrollen, die Navigation bleibt.
*/
header.wp-block-template-part {
	position: sticky;
	inset-block-start: -34px;
	z-index: 70;
}

.il-header {
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
	background: rgb(255 255 255 / 94%);
	backdrop-filter: blur(12px);
}

.il-header__reihe { gap: 2rem; }

.il-navzone {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin-inline-start: auto;
}

.il-header__cta {
	flex: none;
	padding: 0.6em 1.2em;
	border-radius: 999px;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--anthrazit);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--il-transition);
}

.il-header__cta:hover { background: var(--wp--preset--color--akzent-hell); }

/* ---- Erste Menüebene ---- */

.il-nav__liste {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.il-nav__item { position: relative; margin: 0; }

.il-nav__knopf,
.il-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 0.85em;
	border: 0;
	border-radius: 8px;
	background: none;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--il-transition), color var(--il-transition);
}

.il-nav__knopf:hover,
.il-nav__link:hover,
.il-nav__item--offen .il-nav__knopf {
	background: var(--wp--preset--color--papier);
}

/* Pfeil, der sich beim Öffnen dreht */
.il-nav__pfeil {
	inline-size: 0.45em;
	block-size: 0.45em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--il-transition);
	opacity: 0.6;
}

.il-nav__item--offen .il-nav__pfeil {
	transform: rotate(-135deg) translate(-2px, -2px);
	opacity: 1;
}

/* Aktiver Bereich bekommt eine Markierung */
.il-nav__knopf[aria-current],
.il-nav__link[aria-current] { color: var(--wp--preset--color--akzent-text); }

/* ---- Die aufklappende Fläche ---- */

.il-mega {
	position: absolute;
	inset-block-start: calc(100% + 0.7rem);
	inset-inline-start: 0;
	inline-size: min(74vw, 860px);
	padding: 1.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	box-shadow: 0 30px 70px -40px rgb(35 38 40 / 55%);
	z-index: 5;
}

.il-mega--schmal { inline-size: min(60vw, 560px); }

/* Orangene Kante oben — greift die Signalfarbe auf */
.il-mega::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 1.75rem;
	block-size: 2px;
	background: var(--wp--preset--color--akzent);
	border-radius: 2px;
}

.il-mega[hidden] { display: none; }

.il-mega__raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 1.15fr;
	gap: 1.5rem 2rem;
}

.il-mega__raster--zwei { grid-template-columns: 1fr 1fr; }

.il-mega__titel {
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.il-mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.il-mega li { margin: 0; }

.il-mega ul a {
	display: block;
	padding: 0.35em 0.5em;
	margin-inline-start: -0.5em;
	border-radius: 6px;
	font-size: 0.92rem;
	text-decoration: none;
	color: inherit;
	transition: background var(--il-transition), color var(--il-transition);
}

.il-mega ul a:hover {
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--akzent-text);
}

/* Rechte Spalte abgesetzt */
.il-mega__seite {
	padding-inline-start: 1.75rem;
	border-inline-start: 1px solid var(--wp--preset--color--linie);
}

.il-mega__raster--zwei .il-mega__seite { padding-inline-start: 1.5rem; }

/* Hervorgehobener Kasten für die Downloads */
.il-mega__hervor {
	display: block;
	margin-block-start: 1.2rem;
	padding: 0.95rem 1.05rem;
	border-radius: 10px;
	background: var(--wp--preset--color--anthrazit);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: transform var(--il-transition);
}

.il-mega__hervor:hover { transform: translateY(-2px); color: var(--wp--preset--color--base); }

.il-mega__hervor-titel {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--akzent);
}

.il-mega__hervor-text {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--wp--preset--color--grau-invers);
}

/* ---- Menüknopf für schmale Bildschirme ---- */

.il-burger {
	display: none;
	align-items: center;
	gap: 0.6rem;
	margin-inline-start: auto;
	padding: 0.5em 0.9em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	cursor: pointer;
}

.il-burger__striche,
.il-burger__striche::before,
.il-burger__striche::after {
	display: block;
	inline-size: 16px;
	block-size: 1.5px;
	background: currentColor;
	transition: transform var(--il-transition), opacity var(--il-transition);
}

.il-burger__striche { position: relative; }
.il-burger__striche::before,
.il-burger__striche::after { content: ""; position: absolute; }
.il-burger__striche::before { inset-block-start: -5px; }
.il-burger__striche::after { inset-block-start: 5px; }

.il-burger[aria-expanded="true"] .il-burger__striche { background: transparent; }
.il-burger[aria-expanded="true"] .il-burger__striche::before { transform: translateY(5px) rotate(45deg); }
.il-burger[aria-expanded="true"] .il-burger__striche::after { transform: translateY(-5px) rotate(-45deg); }

/* ---- Unter 1080 Pixel: Menü klappt auf ---- */

@media (max-width: 1080px) {
	.il-burger { display: inline-flex; }

	.il-navzone {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem var(--gutter, 1.25rem) 1.5rem;
		background: var(--wp--preset--color--base);
		border-block-end: 1px solid var(--wp--preset--color--linie);
		box-shadow: 0 24px 40px -30px rgb(35 38 40 / 45%);
		max-block-size: calc(100vh - 100%);
		overflow-y: auto;
	}

	.il-navzone.ist-offen { display: flex; }

	.il-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }

	.il-nav__knopf,
	.il-nav__link {
		inline-size: 100%;
		justify-content: space-between;
		padding: 0.85em 0.2em;
		border-radius: 0;
		border-block-end: 1px solid var(--wp--preset--color--linie);
		font-size: 1rem;
	}

	.il-mega,
	.il-mega--schmal {
		position: static;
		inline-size: auto;
		padding: 0.9rem 0 1.2rem;
		border: 0;
		border-block-end: 1px solid var(--wp--preset--color--linie);
		border-radius: 0;
		box-shadow: none;
	}

	.il-mega::before { display: none; }

	.il-mega__raster,
	.il-mega__raster--zwei { grid-template-columns: 1fr; gap: 1.2rem; }

	.il-mega__seite {
		padding-inline-start: 0;
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--linie);
		padding-block-start: 1.2rem;
	}

	.il-header__cta { margin-block-start: 1.2rem; text-align: center; }

	.il-header__reihe { position: relative; }
}

@media (max-width: 620px) {
	.il-topbar__zeile { justify-content: center; gap: 1rem; font-size: 0.7rem; }
}

/* ---------------------------------------------------------
   29. Logo

   Fest im Theme statt in der Mediathek: als SVG skaliert es
   verlustfrei, und es geht bei einem Datenbankumzug nicht verloren.
   --------------------------------------------------------- */

.il-logo {
	flex: none;
	display: block;
	line-height: 0;
}

.il-logo img {
	inline-size: clamp(118px, 12vw, 152px);
	block-size: auto;
}

.il-logo-fuss {
	display: inline-block;
	margin-block-end: 1.2rem;
	line-height: 0;
	transition: opacity var(--il-transition);
}

.il-logo-fuss:hover { opacity: 0.75; }

.il-logo-fuss img {
	inline-size: 160px;
	block-size: auto;
}

/* ---------------------------------------------------------
   30. Preispakete und Vergleichstabelle
   --------------------------------------------------------- */

.il-pakete {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-block: 2.5rem 3rem;
	max-inline-size: none;
}

.il-paket {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.6rem 1.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
}

.il-paket--hervor {
	border-color: var(--wp--preset--color--akzent);
	box-shadow: 0 24px 55px -40px rgb(35 38 40 / 55%);
	position: relative;
}

.il-paket--hervor::before {
	content: "Meist gewählt";
	position: absolute;
	inset-block-start: -0.7rem;
	inset-inline-start: 1.6rem;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--anthrazit);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.il-paket__name {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.il-paket__preis {
	margin: 0 0 0.8rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.il-paket__preis span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--grau);
}

.il-paket__text { margin: 0 0 0.5rem; font-weight: 600; }

.il-paket__zusatz {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--grau);
}

.il-paket__knopf {
	margin-block-start: auto;
	padding: 0.75em 1.3em;
	border-radius: 999px;
	background: var(--wp--preset--color--anthrazit);
	color: var(--wp--preset--color--base);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background var(--il-transition);
}

.il-paket--hervor .il-paket__knopf {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--anthrazit);
}

.il-paket__knopf:hover { background: var(--wp--preset--color--akzent-hell); color: var(--wp--preset--color--anthrazit); }

/* ---- Vergleichstabelle ---- */

.il-preistabelle table { border-collapse: collapse; inline-size: 100%; }

.il-preistabelle :where(th, td) {
	padding: 0.7rem 0.9rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
	text-align: center;
}

.il-preistabelle thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
	border-block-end-color: var(--wp--preset--color--anthrazit);
}

.il-preistabelle tbody th {
	text-align: start;
	font-weight: 500;
	color: var(--wp--preset--color--anthrazit);
}

.il-preistabelle tbody tr:hover :where(th, td) { background: var(--wp--preset--color--base); }

.il-ja { color: var(--wp--preset--color--status-ok); font-weight: 700; }
.il-nein { color: var(--wp--preset--color--linie); }

@media (max-width: 782px) {
	.il-pakete { grid-template-columns: 1fr; }
	.il-preistabelle :where(th, td) { padding: 0.55rem 0.4rem; font-size: 0.86rem; }
}

/* ---------------------------------------------------------
   31. Schaubilder in Feature-Texten

   Gemessen am bisherigen Auftritt: Dort werden die Screenshots
   mit 320 bis 396 Pixeln dargestellt. Sie sind Belege neben dem
   Text, keine Hauptdarsteller. Der helle Rahmen trennt sie vom
   Blatt — Oberflächen-Screenshots sind selbst überwiegend hell.
   --------------------------------------------------------- */

.il-schaubild {
	max-inline-size: min(100%, 380px);
	margin-block: 2rem 2.25rem;
	margin-inline: 0;
	padding: 0.5rem;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 12px;
}

/* Die Breitenaufhebung aus Abschnitt 24 gilt für Schaubilder nicht */
.il-prose .entry-content .il-schaubild.alignwide {
	margin-inline: 0;
	inline-size: auto;
	max-inline-size: min(100%, 380px);
}

.il-schaubild img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: 7px;
}

.il-schaubild figcaption {
	margin-block: 0.6rem 0.1rem;
	padding-inline-start: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.71rem;
	line-height: 1.45;
	color: var(--wp--preset--color--grau);
	text-align: start;
	border-inline-start: 2px solid var(--wp--preset--color--akzent);
}

/* Erstes Schaubild direkt nach dem Einstieg etwas höher setzen */
.il-prose .entry-content > .il-schaubild:first-of-type { margin-block-start: 1.6rem; }

/* Fotos statt Oberflächen brauchen keinen hellen Rahmen */
.il-schaubild:has(img[src*=".jpg"]),
.il-schaubild:has(img[src*=".jpeg"]) {
	padding: 0;
	background: none;
	border: 0;
}

.il-schaubild:has(img[src*=".jpg"]) img,
.il-schaubild:has(img[src*=".jpeg"]) img {
	border-radius: 10px;
}

/* Aufmacherbilder in Beiträgen dürfen breiter sein — sie tragen
   keine Detailinformation, sondern setzen den Ton. */
.il-prose .entry-content > .wp-block-image.alignwide:not(.il-schaubild) {
	margin-inline: 0;
	inline-size: auto;
	max-inline-size: 100%;
}

.il-prose .entry-content > .wp-block-image img { border-radius: 10px; }

/* ---------------------------------------------------------
   32. Abschlussblock und Fußbereich mit durchlaufendem Foto

   Beide sind getrennte Elemente — der eine kommt aus einem
   Pattern, der andere aus einem Template-Part. Ein gemeinsamer
   Rahmen ist deshalb nicht möglich.

   Der Trick: background-attachment: fixed bezieht den Hintergrund
   nicht auf das Element, sondern auf den Sichtbereich. Damit
   greifen beide Elemente denselben Bildausschnitt ab, und das
   Motiv läuft über die Kante hinweg durch.

   Auf Touchgeräten wird der feste Hintergrund unruhig oder gar
   nicht unterstützt — dort greift ein einfacher dunkler Grund.
   --------------------------------------------------------- */

.il-closer--bild,
.il-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

@media (min-width: 783px) and (prefers-reduced-motion: no-preference) {

	.il-closer--bild,
	.il-footer {
		background-image: url("/wp-content/uploads/2022/07/Call-To-Action-scaled-1-scaled.jpg");
		background-attachment: fixed;
		/*
		   Deutlich größer als nötig skaliert: Bei 400 Pixel Verschiebung würde
		   ein nur deckend skaliertes Bild unten einen Streifen freilegen.
		*/
		background-size: cover;
		background-size: auto 160%;

		/*
		   Zentriert schneidet der Ausschnitt durch die Köpfe der abgebildeten
		   Personen. Der Zuschlag verschiebt das Motiv um 400 Pixel nach unten,
		   sodass die Gesichter vollständig im Bild bleiben.
		*/
		background-position: center calc(50% + 400px);
	}

	/* Abdunkeln, damit der Text trägt. Der Verlauf wird nach unten
	   dichter, sodass der Fußbereich ruhig ausläuft. */
	.il-closer--bild::after,
	.il-footer::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.il-closer--bild::after {
		background: linear-gradient(
			to bottom,
			rgb(35 38 40 / 72%) 0%,
			rgb(35 38 40 / 86%) 100%
		);
	}

	.il-footer::after {
		background: linear-gradient(
			to bottom,
			rgb(35 38 40 / 86%) 0%,
			rgb(35 38 40 / 97%) 70%,
			var(--wp--preset--color--anthrazit) 100%
		);
	}
}

/* ---------------------------------------------------------
   33. Umflossene Schaubilder

   Ab 1000 Pixel stehen die Screenshots rechts im Textfluss.
   Das spart Höhe und stellt Bild und zugehörigen Absatz auf
   dieselbe Ebene, statt sie hintereinander zu legen.
   --------------------------------------------------------- */

@media (min-width: 1000px) {

	/* Das Blatt muss die schwebenden Elemente umschließen */
	.il-prose .entry-content { display: flow-root; }

	.il-prose .entry-content .il-schaubild,
	.il-prose .entry-content .il-schaubild.alignwide {
		float: inline-end;
		inline-size: clamp(230px, 32%, 310px);
		max-inline-size: clamp(230px, 32%, 310px);
		margin-block: 0.3rem 1.4rem;
		margin-inline: 2rem 0;
		shape-outside: margin-box;
	}

	/* Überschriften setzen wieder auf ganzer Breite an, sonst
	   rutschen Abschnitte ineinander. Die Bilder stehen jeweils
	   hinter einer Überschrift, nicht davor. */
	.il-prose .entry-content :where(h2, h3) { clear: both; }

	/* Die Textbreite darf hier über die 68 Zeichen hinaus, sonst
	   bleibt neben dem Bild zu wenig übrig */
	.il-prose .entry-content :where(p, ul, ol) { max-inline-size: none; }

	/* Ohne Bild daneben bleibt es bei der ruhigen Lesebreite */
	.il-prose .entry-content > :where(p, ul, ol) { max-inline-size: 68ch; }
}

/* Unter 1000 Pixel bleibt alles untereinander */
@media (max-width: 999px) {
	.il-prose .il-schaubild { float: none; margin-inline: 0; }
}

/* ---------------------------------------------------------
   34. Schaubilder beim Überfahren vergrößern

   Die Vergrößerung läuft über transform, nicht über die Breite —
   sonst würde der Text bei jeder Mausbewegung neu umbrechen.
   Der Ursprung liegt oben rechts, damit das Bild nach innen
   wächst und nicht aus dem Blatt herausragt.

   Zusätzlich ist die Lightbox aktiv (theme.json): ein Klick zeigt
   die volle Auflösung. Das ist der Weg für Touchgeräte und
   Tastaturbedienung, wo es kein Überfahren gibt.
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {

	.il-prose .entry-content .il-schaubild {
		transition: box-shadow 0.22s ease;
	}

	.il-prose .entry-content .il-schaubild img {
		transform-origin: 100% 0;
		transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
		cursor: zoom-in;
	}

	.il-prose .entry-content .il-schaubild:hover,
	.il-prose .entry-content .il-schaubild:focus-within {
		position: relative;
		z-index: 40;
		box-shadow: 0 30px 70px -35px rgb(35 38 40 / 65%);
	}

	.il-prose .entry-content .il-schaubild:hover img,
	.il-prose .entry-content .il-schaubild:focus-within img {
		transform: scale(2.2);
		box-shadow: 0 0 0 1px var(--wp--preset--color--linie);
	}

	/* Fotos wachsen weniger stark — bei ihnen gibt es keine Details
	   zu erkennen, sie würden nur den Text verdecken. */
	.il-prose .entry-content .il-schaubild:has(img[src*=".jpg"]):hover img,
	.il-prose .entry-content .il-schaubild:has(img[src*=".jpeg"]):hover img {
		transform: scale(1.6);
	}

	/* Damit der vergrößerte Screenshot deckend bleibt */
	.il-prose .entry-content .il-schaubild img {
		background: var(--wp--preset--color--base);
	}
}

/* Bei reduzierter Bewegung ohne Übergang, aber weiterhin vergrößert */
@media (prefers-reduced-motion: reduce) {
	.il-prose .entry-content .il-schaubild img { transition: none; }
}

/* Hinweis, dass ein Klick die volle Auflösung zeigt */
.il-schaubild figcaption::after {
	content: " · Klicken für volle Größe";
	color: var(--wp--preset--color--akzent-text);
	white-space: nowrap;
}

/* ---------------------------------------------------------
   35. Trennlinie zwischen Abschnitten

   Als Klasse statt als Inline-Stil im Blockmarkup: WordPress
   prüft beim Öffnen im Editor, ob das gespeicherte HTML zu den
   Blockattributen passt. Ein Inline-Stil ohne passendes Attribut
   führt dort zur Meldung über ungültigen Inhalt.
   --------------------------------------------------------- */

.il-trennlinie { border-block-start: 1px solid var(--wp--preset--color--linie); }

/* ---------------------------------------------------------
   36. Breite Inhalte im Textblatt

   Fließtext liest sich auf 68 Zeichen am besten, ein Buchungs-
   kalender oder ein Formular braucht dagegen Platz. Beide dürfen
   deshalb die volle Breite des Blattes nutzen, ohne dass die
   Seite selbst breiter wird.
   --------------------------------------------------------- */

.il-prose .entry-content > .il-embed,
.il-prose .entry-content > .il-form,
.il-prose .entry-content > .il-form__danke,
.il-prose .entry-content > .il-pakete,
.il-prose .entry-content > .wp-block-table {
	margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.25rem));
	inline-size: auto;
	max-inline-size: none;
}

/* Innenabstand ausgleichen, damit nichts an der Kante klebt */
.il-prose .entry-content > .il-embed,
.il-prose .entry-content > .il-form,
.il-prose .entry-content > .il-pakete,
.il-prose .entry-content > .wp-block-table {
	padding-inline: clamp(1.5rem, 4vw, 3.25rem);
}

/* Der Kalender selbst bekommt keine zusätzliche Kante */
.il-prose .entry-content > .il-embed {
	padding-inline: 0;
	margin-block: 2rem;
}

.il-prose .entry-content > .il-embed .il-embed__platzhalter {
	padding-inline: clamp(1.5rem, 4vw, 3.25rem);
	max-inline-size: 58ch;
}

/* ---------------------------------------------------------
   37. Karten vollständig anklickbar machen

   Bisher hob sich die ganze Karte beim Überfahren an, anklickbar
   war aber nur die Überschrift. Das Flächenversprechen wird jetzt
   eingelöst: Ein unsichtbarer Bereich über der Karte führt zum
   selben Ziel wie die Überschrift.

   Verschachtelte Links — Kategorie, Weiterlesen — liegen darüber
   und bleiben einzeln erreichbar.
   --------------------------------------------------------- */

.il-card,
.il-aufmacher__box,
.il-modul {
	position: relative;
}

.il-card .wp-block-post-title a::after,
.il-aufmacher__box .wp-block-post-title a::after,
.il-modul .il-modul__mehr a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.il-card :where(.il-marke a, .wp-block-post-excerpt__more-link),
.il-aufmacher__box :where(.il-marke a, .wp-block-post-excerpt__more-link) {
	position: relative;
	z-index: 1;
}

/* Tastaturbedienung: Der Rahmen gehört um die Karte, nicht um die Zeile */
.il-card:has(.wp-block-post-title a:focus-visible),
.il-aufmacher__box:has(.wp-block-post-title a:focus-visible),
.il-modul:has(.il-modul__mehr a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
}

.il-card .wp-block-post-title a:focus-visible,
.il-aufmacher__box .wp-block-post-title a:focus-visible,
.il-modul .il-modul__mehr a:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------
   38. Verweis in den Modulkacheln
   --------------------------------------------------------- */

.il-modul__mehr {
	margin-block: 1.1rem 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.04em;
}

.il-modul__mehr a {
	color: var(--wp--preset--color--akzent-text);
	text-decoration: none;
}

.il-modul:hover .il-modul__mehr a { text-decoration: underline; }

/* ---------------------------------------------------------
   39. Partnerverzeichnis
   --------------------------------------------------------- */

.il-partner__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.2rem 1.6rem;
	padding: 1.3rem 1.4rem;
	margin-block-end: 1.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
}

.il-partner__gruppe { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.il-filter {
	padding: 0.45em 0.95em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
	cursor: pointer;
	transition: border-color var(--il-transition), background var(--il-transition), color var(--il-transition);
}

.il-filter:hover { border-color: var(--wp--preset--color--anthrazit); color: var(--wp--preset--color--anthrazit); }

.il-filter.ist-aktiv {
	background: var(--wp--preset--color--anthrazit);
	border-color: var(--wp--preset--color--anthrazit);
	color: var(--wp--preset--color--base);
}

.il-partner__feld { margin: 0; }

.il-partner__feld label {
	display: block;
	margin-block-end: 0.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.il-partner__feld :where(select, input) {
	padding: 0.5em 0.8em;
	font-family: inherit;
	font-size: 0.92rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	min-inline-size: 12rem;
}

.il-partner__zahl {
	margin-block-end: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grau);
}

.il-partner__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--linie);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	overflow: hidden;
}

.il-partner__eintrag {
	margin: 0;
	padding: 1.3rem 1.35rem 1.4rem;
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.il-partner__eintrag[hidden] { display: none; }

.il-partner__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.il-partner__ort,
.il-partner__hinweis {
	margin: 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--grau);
}

.il-partner__hinweis { font-style: italic; }

.il-partner__arten { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0; }

.il-partner__arten span {
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.67rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--grau);
}

.il-partner__link { margin: auto 0 0; padding-block-start: 0.7rem; }

.il-partner__link a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--akzent-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.il-partner__link a:hover { text-decoration: underline; }

.il-partner__leer {
	padding: 1.5rem;
	margin-block-start: 1rem;
	border: 1px dashed var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	color: var(--wp--preset--color--grau);
}

/* Die Liste braucht die volle Blattbreite */
.il-prose .entry-content > .il-partner {
	margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.25rem));
	padding-inline: clamp(1.5rem, 4vw, 3.25rem);
	inline-size: auto;
	max-inline-size: none;
}

@media (max-width: 620px) {
	.il-partner__filter { flex-direction: column; align-items: stretch; }
	.il-partner__feld :where(select, input) { inline-size: 100%; }
}

/* Adresse und Kontaktwege in der Partnerkachel */

.il-partner__adresse {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

.il-partner__kontakt {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: auto 0 0;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid var(--wp--preset--color--linie);
}

.il-partner__weg {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--anthrazit);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.il-partner__weg:hover { color: var(--wp--preset--color--akzent-text); text-decoration: underline; }

.il-partner__weg--web { color: var(--wp--preset--color--akzent-text); }

/* ---------------------------------------------------------
   40. Weitere Standorte eines Partners

   Als Aufklappbereich statt als eigene Kacheln: Ein Partner mit
   zwanzig Standorten würde die Liste sonst dominieren. Zugeklappt
   ist er eine Zeile, aufgeklappt ein Raster.

   Umgesetzt mit details/summary — das funktioniert ohne JavaScript
   und ist von der Tastatur aus bedienbar.
   --------------------------------------------------------- */

.il-standorte {
	margin-block-start: 0.6rem;
	border-block-start: 1px solid var(--wp--preset--color--linie);
	padding-block-start: 0.7rem;
}

.il-standorte > summary {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--akzent-text);
	cursor: pointer;
	list-style: none;
}

.il-standorte > summary::-webkit-details-marker { display: none; }

.il-standorte > summary::before {
	content: "";
	flex: none;
	inline-size: 0.4em;
	block-size: 0.4em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--il-transition);
}

.il-standorte[open] > summary::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.il-standorte > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
	border-radius: 3px;
}

.il-standorte__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 1px;
	list-style: none;
	margin: 0.9rem 0 0.2rem;
	padding: 0;
	background: var(--wp--preset--color--linie);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 9px;
	overflow: hidden;
}

.il-standort {
	margin: 0;
	padding: 0.65rem 0.7rem 0.7rem;
	background: var(--wp--preset--color--papier);
}

.il-standort p { margin: 0; }

.il-standort__ort {
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.25;
}

.il-standort__adresse,
.il-standort__firma {
	font-size: 0.74rem;
	line-height: 1.35;
	color: var(--wp--preset--color--grau);
	margin-block-start: 0.15rem;
}

.il-standort__firma { font-style: italic; }

.il-standort__tel {
	margin-block-start: 0.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
}

.il-standort__tel a { color: var(--wp--preset--color--anthrazit); text-decoration: none; }
.il-standort__tel a:hover { color: var(--wp--preset--color--akzent-text); text-decoration: underline; }

/* Eine Kachel mit Standorten darf breiter werden */
.il-partner__eintrag:has(.il-standorte[open]) { grid-column: 1 / -1; }

/* ---------------------------------------------------------
   41. Downloadübersicht

   Wird aus dem Dateiverzeichnis erzeugt. Die aktuelle Version
   steht oben und ist hervorgehoben; ältere folgen ruhiger.
   --------------------------------------------------------- */

.il-version {
	margin-block: 1.6rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.il-version--aktuell { border-color: var(--wp--preset--color--akzent); }

.il-version__kopf {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	margin: 0;
	padding: 0.85rem 1.2rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--papier);
	font-size: 1rem;
}

.il-version__nummer {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.il-version__marke {
	padding: 0.2em 0.65em;
	border-radius: 999px;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--anthrazit);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.il-version__dateien {
	list-style: none;
	margin: 0;
	padding: 0;
}

.il-version__dateien li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0.8rem 1.2rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
}

.il-version__dateien li:last-child { border-block-end: 0; }

.il-dl__plattform {
	margin-inline-start: 0.5em;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	background: var(--wp--preset--color--papier);
	font-size: 0.72rem;
	color: var(--wp--preset--color--grau);
}

.il-dl__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	color: var(--wp--preset--color--grau);
	white-space: nowrap;
}

.il-dl-leer {
	padding: 1.4rem;
	border: 1px dashed var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	color: var(--wp--preset--color--grau);
}

.il-prose .entry-content > .il-version {
	margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.25rem));
	inline-size: auto;
	max-inline-size: none;
}

/* Versionshinweise neben dem Download */

.il-dl__readme {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-inline-end: 0.8rem;
	padding: 0.25em 0.7em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	color: var(--wp--preset--color--akzent-text);
	text-decoration: none;
	transition: border-color var(--il-transition), background var(--il-transition);
}

.il-dl__readme:hover {
	border-color: var(--wp--preset--color--akzent);
	background: rgb(255 133 12 / 8%);
}

.il-version__dateien li .il-dl__meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* ---------------------------------------------------------
   42. Ältere Versionen

   Derselbe Aufbau wie oben, nur eingerückt und ruhiger — es soll
   erkennbar bleiben, dass hier nichts anderes steht, sondern
   dasselbe in älter.
   --------------------------------------------------------- */

.il-aeltere {
	margin-block: 1.6rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--il-radius);
	background: var(--wp--preset--color--papier);
}

.il-aeltere > summary {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9rem 1.2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	color: var(--wp--preset--color--akzent-text);
	cursor: pointer;
	list-style: none;
}

.il-aeltere > summary::-webkit-details-marker { display: none; }

.il-aeltere > summary::before {
	content: "";
	flex: none;
	inline-size: 0.42em;
	block-size: 0.42em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--il-transition);
}

.il-aeltere[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }

.il-aeltere > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: -3px;
	border-radius: var(--il-radius);
}

.il-aeltere__inhalt {
	padding: 0 1.2rem 1.2rem;
	border-block-start: 1px solid var(--wp--preset--color--linie);
}

.il-aeltere__hinweis {
	margin-block: 1rem 0.4rem;
	font-size: 0.88rem;
	color: var(--wp--preset--color--grau);
}

/* Ältere Blöcke zurückgenommen */
.il-aeltere__inhalt .il-version {
	margin-block: 0.9rem;
	background: var(--wp--preset--color--base);
}

.il-aeltere__inhalt .il-version__kopf {
	padding-block: 0.6rem;
	font-size: 0.92rem;
}

.il-aeltere__inhalt .il-version__dateien li { padding-block: 0.6rem; }

/* Dateigröße hervorheben — bei knapp 2 GB pro Paket ist das relevant */
.il-dl__groesse {
	font-weight: 600;
	color: var(--wp--preset--color--anthrazit);
}

.il-dl__stand::before { content: "· "; color: var(--wp--preset--color--linie); }

/* ---------------------------------------------------------
   43. Hauptversionen als Gruppe

   Aktueller Stand, Dokumentation und ältere Stände gehören
   zusammen. Eine gemeinsame Klammer macht das sichtbar, ohne
   einen weiteren Rahmen zu ziehen.
   --------------------------------------------------------- */

.il-hauptversion {
	margin-block: 2rem;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--wp--preset--color--linie);
}

.il-hauptversion:first-of-type { border-inline-start-color: var(--wp--preset--color--akzent); }

.il-hauptversion > .il-version:first-child { margin-block-start: 0; }
.il-hauptversion > :last-child { margin-block-end: 0; }

/* Dokumentation ruhiger als die Pakete */
.il-version--handbuch {
	border-style: dashed;
	background: none;
}

.il-version--handbuch .il-version__kopf { background: none; }

.il-dl--doku::before { content: "↗"; }

@media (max-width: 620px) {
	.il-hauptversion { padding-inline-start: 0.7rem; }
}

/* Preisklarstellung — muss lesbar sein, ohne zu dominieren */

/*
   Rechtlich notwendig, inhaltlich Kleingedrucktes. Es muss lesbar sein —
   deshalb nicht unter 0,78rem und mit ausreichendem Kontrast —, darf aber
   nicht mit den Preisen konkurrieren.
*/
.il-preishinweis {
	margin-block: 1rem 2rem;
	padding: 0;
	border: 0;
	max-inline-size: 72ch;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

/* Der Zusatz in der Preiszeile darf umbrechen */
.il-paket__preis span { display: inline; }
.il-paket__preis { text-wrap: balance; font-size: 1.9rem; }