/*
 * Auros website — design system (ADR 0032, SERVER-169).
 * One stylesheet, no build step, no framework. Tokens are copied verbatim
 * from the "Übergabe" chapter of Auros-Website-Styleguide.pdf (Stand
 * 01.09.2026), which is the single visual authority (ADR 0032). Section
 * order, kept stable so later pages can find things:
 *
 *   1. Fonts        — self-hosted @font-face (see assets/fonts/LICENSE.txt)
 *   2. Tokens        — :root (light) + .is-dark (dark "Bühne" surfaces)
 *   3. Base          — reset, body, headings, links
 *   4. Type scale    — .display/.lead/.small/.caption/.overline utilities
 *   5. Layout        — .container, section rhythm
 *   6. Components    — .btn, .card, .highlight, .tag
 *   7. Site chrome   — .service-bar, .site-header, .site-nav, .site-footer
 *   8. Homepage      — .hero, .section-lead, .dach, .mandates, .insights
 *   9. Page: 404
 *  10. Responsive    — breakpoints 639 / 767 / 1023
 *  11. Pages: Weaver, Kontakt — .weaver-*, contact hero
 *  12. Pages: Rechtliches — .legal-header/.legal-content/.legal-row/.legal-callout
 *  13. Pages: Insights, Artikel — .insights-*, .article-*, closed by its own
 *      max-width: 479px heading-step block (it overrides .insights-featured__title,
 *      a section 13 class, so it cannot sit any earlier)
 *
 * Two rules make every other rule checkable (services/website/tests/design-system.bats):
 * gold is text only inside a dark "Bühne" (.is-dark, .site-footer, .service-bar,
 * .dach) — everywhere else it is a fill, a border or a rule, with --gold-deep
 * as the one gold that may sit as text on a light surface. On a gold fill the
 * text is always --ink-on-gold (anthracite), never white.
 */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/montserrat-700.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/lato-400.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/lato-700.woff2") format("woff2");
}

/* 2. Tokens ----------------------------------------------------------------
 * Verbatim from the styleguide's handover chapter (11 · Übergabe). */

:root {
	/* Marke */
	--gold: #E7B941;
	--gold-hover: #D9A82E;
	--gold-active: #C79422;
	--gold-deep: #8C6414; /* einziger Goldton, der auf Hell Text sein darf */
	--anthracite: #2C2B2B;

	/* Heller Modus */
	--surface: #FFFFFF;
	--surface-subtle: #F8F7F6;
	--surface-inverse: #2C2B2B;
	--line: #E4E2E0;
	--line-strong: #B4B0AC;
	--ink: #2C2B2B;
	--ink-muted: #6E6C72;
	--ink-subtle: #838188;
	--ink-on-gold: #2C2B2B;
	--focus: #2C2B2B;
	--danger: #B3261E;

	/* Typografie */
	--font-head: "Montserrat", system-ui, sans-serif;
	--font-body: "Lato", system-ui, sans-serif;
	--step-display: 64px;
	--step-h1: 48px;
	--step-h2: 36px;
	--step-h3: 27px;
	--step-h4: 21px;
	--step-lead: 21px;
	--step-body: 17px;
	--step-sm: 15px;
	--step-cap: 13px;

	/* Raum und Form */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--radius: 2px;
	--container: 1240px;

	--page-margin: var(--space-7); /* 48px Desktop, 20px Mobil (Breakpoint unten) */
	--section-gap: var(--space-9); /* 96px Desktop, 56px Mobil (Breakpoint unten) */
}

/* Dark "Bühne": Hero, Zwischenbänder und Footer stehen dunkel, unabhängig von
 * der Systemeinstellung des Besuchers — kein echter Dark Mode, sondern eine
 * per-Sektion gewählte Fläche. Dieselben Tokens wie im Styleguide-Kapitel 06,
 * hier unter .is-dark statt [data-theme="dark"], weil nichts auf dieser Seite
 * den Modus umschaltet. */
.is-dark {
	--surface: #1E1D1D;
	--surface-subtle: #2C2B2B;
	--surface-raised: #3A3838;
	--line: #4A4747;
	--ink: #FFFFFF;
	--ink-muted: #B5B2B0;
	--ink-subtle: #8F8C8A;
	--gold-hover: #EFC65E; /* auf Dunkel wird aufgehellt */
	--focus: #E7B941;

	background: var(--surface);
	color: var(--ink);
}

/* 3. Base ------------------------------------------------------------------ */

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

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

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

/* hyphens: auto trennt lange deutsche Komposita an der Silbengrenze und setzt
 * dabei einen Trennstrich; overflow-wrap: break-word bleibt der Fallback für
 * ein Wort, das kein Wörterbuch kennt. Beides greift nur, weil jede Seite
 * lang="de" auf <html> trägt — ohne das Attribut trennt kein Browser. */
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-head);
	color: var(--ink);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

h1 { font-size: var(--step-h1); line-height: 1.10; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--step-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--step-h3); line-height: 1.25; font-weight: 600; }
h4 { font-size: var(--step-h4); line-height: 1.35; font-weight: 600; }

p { margin: 0; }

/* Fließtext-Link: Gold ist auf Hell nie Schrift — --gold-deep ist die
 * ausgewiesene Ausnahme (Styleguide 05, "Warum --gold-deep?"). */
a {
	color: var(--gold-deep);
}

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

/* :not(.btn): a button always owns its own text colour (section 6) — without
 * this exclusion, .is-dark a's higher specificity (class+type beats .btn's
 * single class) overrode .btn--primary's --ink-on-gold with gold, rendering
 * gold text on a gold background invisible wherever a primary CTA sits inside
 * a dark hero (SERVER-170: weaver.html's/kontakt's first use of that
 * combination — no prior page nested a .btn inside .is-dark). */
.is-dark a:not(.btn) {
	color: var(--gold);
}

.is-dark a:not(.btn):hover {
	color: var(--gold-hover);
}

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

/* 4. Type scale utilities ---------------------------------------------------
 * Skala (Styleguide 07): Rolle / Größe / Zeile / Schrift / Laufweite. */

.display {
	font-family: var(--font-head);
	font-size: var(--step-display);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.lead {
	font-size: var(--step-lead);
	line-height: 1.55;
	color: var(--ink-muted);
	margin: 0;
}

.small {
	font-size: var(--step-sm);
	line-height: 1.55;
}

.caption {
	font-size: var(--step-cap);
	line-height: 1.45;
	color: var(--ink-muted);
}

.overline {
	font-family: var(--font-head);
	font-size: var(--step-cap);
	line-height: 1.20;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* 5. Layout ------------------------------------------------------------------ */

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--page-margin);
}

.section {
	padding-top: var(--section-gap);
}

.section:last-of-type {
	padding-bottom: var(--section-gap);
}

/* 6. Components -------------------------------------------------------------- */

/* Buttons: drei Varianten (Styleguide 09). Höhe 48px (Small 40px), Innenabstand
 * 14px/28px, Schrift Montserrat 600 16px, Radius 2px, Fokus 2px --focus + 2px
 * Abstand. Primär ist immer Gold-Fläche mit Anthrazit-Schrift (Regel 2:
 * niemals Weiß auf Gold). Sekundär und Textlink nehmen die Umgebungsfarbe
 * (currentColor) an, damit sie auf Hell wie auf .is-dark ohne Zusatzregel
 * funktionieren. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-6);
	border-radius: var(--radius);
	border: 1px solid transparent;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

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

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

.btn--primary:hover {
	background: var(--gold-hover);
	color: var(--ink-on-gold);
}

.btn--primary:active {
	background: var(--gold-active);
	color: var(--ink-on-gold);
}

.btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.btn--secondary:hover {
	color: var(--gold-deep);
}

.is-dark .btn--secondary:hover {
	color: var(--gold-hover);
}

.btn--text {
	height: auto;
	padding: 0;
	border-radius: 0;
	color: var(--gold-deep);
	text-decoration: underline;
}

.is-dark .btn--text {
	color: var(--gold);
}

.btn--text:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* Karte: eine 3px hohe Goldkante über dem Inhalt, sonst nichts — kein Kasten,
 * kein Rand, kein Schatten. Die Kante allein trennt die Karten voneinander und
 * trägt das Markenmerkmal. Startseite (Mandate), Weaver (Kernfähigkeiten,
 * Referenzprojekte) setzen dieselbe Regel. */
.card {
	border-top: 3px solid var(--gold);
	padding: var(--space-5) 0 var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

/* Fließtext einer Karte. flex: 1 drückt alles, was darunter folgt — eine
 * .card__list, ein Verweis — bei ungleich langen Texten auf gleiche Höhe. */
.card__text {
	color: var(--ink-muted);
	flex: 1;
}

/* Aufzählung am Fuß einer Karte, je Eintrag durch eine Haarlinie getrennt. */
.card__list {
	list-style: none;
	margin: 0;
	padding: var(--space-1) 0 0;
	display: flex;
	flex-direction: column;
	font-size: var(--step-sm);
}

.card__list li {
	border-top: 1px solid var(--line);
	padding: var(--space-3) 0;
}

.card__eyebrow {
	color: var(--gold-deep);
}

.is-dark .card__eyebrow {
	color: var(--gold);
}

/* Ein einzelnes Wort einer Überschrift in Gold, als Betonung innerhalb des
 * Satzes (Startseite: "DACH-Raum", weaver.html: "Compliance"). Nur auf der
 * dunklen Bühne — auf Hell erreicht Gold keinen tragfähigen Kontrast. */
.is-dark .accent {
	color: var(--gold);
}

/* Hervorhebungsblock / Abschlussblock: dieselbe abgesetzte Sektionsfläche mit
 * 3px goldener Kante links trägt beide Namen aus dem Styleguide — auf der
 * Startseite ein Fließtext-CTA (Assessment), am Ende von weaver.html und den
 * Artikelseiten ein Überschrift-plus-Button-Abschluss (Prototyp: identisches
 * Markup, nur der rechte Slot wechselt von Text zu Button). Kein eigener
 * Klassenname für den Abschluss — .highlight/.highlight__body plus ein
 * .btn--primary im rechten Slot ist der ganze Unterschied.
 *
 * Die goldene Kante sitzt oben, nicht links: der Block steht immer über die
 * volle Inhaltsbreite, und eine Oberkante nimmt dieselbe Linienführung auf wie
 * die Mandatskarten und die Ländernamen im DACH-Band. Die linksseitige Kante
 * bleibt dem .article__callout vorbehalten, der im Textfluss steht. */
.highlight {
	background: var(--surface-subtle);
	border-top: 3px solid var(--gold);
	padding: var(--space-8) var(--space-7);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-7);
	align-items: center;
}

.highlight__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* 7. Site chrome --------------------------------------------------------------- */

.service-bar {
	padding: var(--space-3) 0;
	font-size: var(--step-cap);
	letter-spacing: 0.06em;
}

/* Always paired with .is-dark in markup — qualified here so every gold-as-text
 * rule in this file names its dark context (services/website/tests/design-system.bats). */
.is-dark.service-bar {
	color: var(--gold);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--ink);
	text-decoration: none;
}

.brand:hover {
	color: var(--ink);
}

.brand__mark {
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: none;
}

.brand__mark--small {
	width: 24px;
	height: 24px;
}

.brand__name {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.brand__name--small {
	font-size: 17px;
}

.site-header {
	background: var(--surface-subtle);
	border-bottom: 3px solid var(--anthracite);
}

/* Das Element trägt .container und .site-header__inner zugleich, und diese Regel
 * steht später in der Datei. Eine Kurzschrift für padding setzt deshalb auch die
 * seitlichen Werte — mit `0` überschrieb sie den Seitenrand, den .container
 * mitbringt, und zwar auf jeder Breite. Unterhalb von --container erzeugt nichts
 * anderes diesen Rand, also lagen Logo und Menütaste dort direkt auf der Kante:
 * auf jedem Telefon. Oberhalb blieb es unsichtbar, weil die Zentrierung den Rand
 * ohnehin herstellt. Die Seitenwerte gehören darum ausgeschrieben. */
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5) var(--page-margin);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

/* Kopfnavigation. Aktiver Punkt: fett plus 2px goldene Unterlinie; inaktive
 * Punkte tragen dieselbe 2px Linie transparent, damit die Zeilenhöhe konstant
 * bleibt (Styleguide-Regel, "Gemeinsame Bausteine"). */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	display: inline-block;
	font-family: var(--font-head);
	font-size: var(--step-sm);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.4;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.site-nav__link:hover {
	color: var(--ink);
	border-bottom-color: var(--line-strong);
}

.site-nav__link.is-active {
	font-weight: 700;
	border-bottom-color: var(--gold);
}

/* Mobiles Menü ohne JavaScript: <summary> ist von Haus aus per Tastatur
 * bedienbar und trägt die ARIA-Rolle button. Die Linkliste ist bewusst NICHT
 * der Inhalt des <details> — Chrome/Firefox/Safari verstecken den Inhalt
 * eines geschlossenen <details> unterschiedlich (Chrome ab September 2025
 * über ein internes `::details-content`-Pseudoelement mit
 * content-visibility: hidden, ältere Browser schlicht über display: none),
 * und keine reine CSS-Regel schaltet das ab 1024px browserübergreifend
 * zuverlässig ab. Stattdessen ist `.site-nav__list` das nächste Geschwister
 * von `<details class="nav-toggle">` innerhalb `<nav>`, sichtbar per
 * `display` und unterhalb 1024px an [open] gekoppelt (Responsive-Abschnitt) —
 * unabhängig vom internen Verstecken des (dann leeren) <details>. */

.nav-toggle__summary {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-weight: 700;
}

.nav-toggle__summary::-webkit-details-marker {
	display: none;
}

.nav-toggle__summary::before {
	content: "\2630"; /* ☰ */
	font-size: 20px;
}

.nav-toggle[open] .nav-toggle__summary::before {
	content: "\2715"; /* ✕ */
}

.site-footer {
	padding: var(--space-8) 0 var(--space-6);
	border-bottom: 4px solid var(--gold);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-size: var(--step-sm);
}

.site-footer__col a:not(.btn) {
	color: var(--ink-muted);
	text-decoration: none;
}

/* Die Anschrift ist der einzige Fließtext im Footer; ohne diese Regel erbt sie
 * --ink und steht damit heller als jeder Link daneben und als das Copyright
 * unten, die alle --ink-muted tragen. */
.site-footer__col p {
	color: var(--ink-muted);
}

.is-dark .site-footer__col a:not(.btn):hover {
	color: var(--gold);
}

.site-footer__heading {
	margin-bottom: var(--space-2);
}

.is-dark .site-footer__heading {
	color: var(--gold);
}

.site-footer__bottom {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

/* 8. Homepage --------------------------------------------------------------
 * .hero and .highlight above are homepage-first but not homepage-only: the
 * Kontakt page (SERVER-169 follow-up) reuses .hero with the .is-dark modifier
 * below for its own header, and weaver.html's/the article pages' closing CTA
 * is .highlight (see the Abschlussblock comment above). */

.hero {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	border-bottom: 1px solid var(--line);
}

/* text-wrap: balance gleicht die Zeilenlängen einer Überschrift aus, statt die
 * letzte Zeile als Rest stehen zu lassen. Die Regel steht nur an den beiden
 * Überschriften, für die der Entwurf sie vorsieht — Hero und Artikelkopf —,
 * nicht an jedem h1: zusammen mit hyphens: auto kauft balance sonst gleich
 * lange Zeilen mit einer Worttrennung, die ohne sie nicht nötig wäre
 * ("Sicherheitslü-cken melden" auf der Sicherheit-Seite). */
.hero__content h1,
.article__header h1 {
	text-wrap: balance;
}

/* Der Hero läuft randlos über die volle Fensterbreite, sein Text gehört aber in
 * die Flucht des übrigen Inhalts. Der beginnt im zentrierten .container, also
 * erst nach dem Rand, den die Zentrierung übrig lässt; die linke Hero-Spalte
 * beginnt dagegen am Fensterrand. Ohne den Zuschlag unten wandert der Text
 * deshalb mit jedem Pixel Fensterbreite weiter vom Rest der Seite weg — bei
 * 1920px um 340px. max() fängt jedes Fenster unter --container ab, wo der Term
 * negativ wird und der blanke Seitenrand gilt. Der Zuschlag kann die Spalte nie
 * aufbrauchen: er wächst mit halber, ihre Breite mit 0,56-facher Fensterbreite. */
.hero__content {
	padding: var(--space-9) var(--page-margin) var(--space-8);
	padding-left: max(
		var(--page-margin),
		calc((100vw - var(--container)) / 2 + var(--page-margin))
	);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	/* A grid item's default auto-minimum is its content's min-content width;
	 * for the h1's longest German compound word that exceeds a 375px
	 * viewport and forces the whole .hero grid wider than the page instead
	 * of letting the heading wrap (SERVER-169 acceptance criterion 12). */
	min-width: 0;
}

.hero__media {
	border-left: 1px solid var(--line);
	overflow: hidden;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dunkler Hero (Prototyp kontakt.html): anthrazitfarbene Bühne statt der
 * hellen Fläche. h1 (--ink), .lead (--ink-muted) und .btn--text/.overline
 * brauchen keine eigene Regel — sie lesen dieselben Custom Properties, die
 * .is-dark bereits auf Dunkel umstellt. */
.hero.is-dark {
	border-bottom: none;
}

/* Overline mit vorangestelltem 44x3px Goldstrich (Prototyp: "— Kontakt"). */
.hero__overline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.hero__overline::before {
	content: "";
	width: 44px;
	height: 3px;
	background: var(--gold);
	flex: none;
}

.is-dark .overline {
	color: var(--gold);
}

/* Zweispaltiger Abschnittskopf: Überschrift links, ein erläuternder Absatz
 * rechts. Die Startseite setzt ihn zweimal — über dem DACH-Band auf Dunkel und
 * über den Mandatskarten auf Hell —, weshalb er keine eigene Flächenfarbe
 * mitbringt, sondern die der umgebenden Sektion erbt. */
.section-lead {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-8);
	align-items: start;
	/* Der Kopf bringt den Abstand zu dem mit, was unter ihm steht — sonst
	 * stoßen die goldenen Oberkanten der Karten direkt an die Überschrift.
	 * Die Sektion selbst bleibt dadurch ohne eigene Abstandsregel. */
	margin-bottom: var(--space-7);
}

.section-lead > :last-child {
	color: var(--ink-muted);
	padding-top: var(--space-1);
}

/* DACH-Band: dunkle Bühne unter dem Hero, die die drei Länder nebeneinander
 * stellt. Der Ländername sitzt auf einer goldenen Grundlinie und ist über
 * min-height auf eine gemeinsame Höhe gestellt, damit die Linien der drei
 * Spalten auf gleicher Höhe liegen, auch wenn ein Name umbricht. */
.dach {
	padding: var(--space-8) 0;
	border-top: 3px solid var(--gold);
}

.dach__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.dach__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.dach__country {
	display: flex;
	align-items: flex-end;
	min-height: 38px;
	margin: 0 0 var(--space-1);
	padding-bottom: var(--space-4);
	border-bottom: 3px solid var(--gold);
	font-size: var(--step-h3);
	font-weight: 600;
	line-height: 1.25;
}

.dach__text {
	font-size: var(--step-sm);
	line-height: 1.65;
	color: var(--ink-muted);
}

.mandates__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.insights__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 3px solid var(--anthracite);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-6);
}

.insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.insight-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: var(--ink);
	text-decoration: none;
}

.insight-card:hover {
	color: var(--ink);
}

.insight-card:hover .insight-card__title {
	text-decoration: underline;
}

.insight-card__media {
	height: 150px;
	overflow: hidden;
	border: 1px solid var(--line);
}

.insight-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insight-card__title {
	font-size: var(--step-lead);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.insight-card__excerpt {
	font-size: var(--step-sm);
	color: var(--ink-muted);
}

/* 9. Page: 404 ------------------------------------------------------------------ */

.error-page {
	padding: var(--space-9) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

/* 10. Responsive ------------------------------------------------------------------
 * Breakpoints 639 / 767 / 1023. Seitenrand 48px Desktop, 20px Mobil.
 * Sektionsabstand 96px Desktop, 56px Mobil. Mehrspaltige Raster fallen unter
 * 768px auf eine Spalte. Display bis H2 fallen unter 768px eine Stufe.
 *
 * Dieser Block darf nur Klassen umschalten, die OBERHALB von ihm stehen, also
 * aus den Abschnitten 1 bis 9. Eine Media Query erhöht die Spezifität nicht:
 * steht die Grundregel weiter unten in der Datei, gewinnt sie, und die
 * Umschaltung feuert nie. Die Abschnitte 11, 12 und 13 bringen deshalb ihre
 * eigenen Media Queries an ihrem Ende mit — dort gehört die Umschaltung für
 * ihre Klassen hin. Der Fehler ist teuer, weil er nur schmal auffällt und
 * keinen Test rot macht: .page-header und .insights-featured standen einmal
 * hier und blieben auf jedem Telefon zweispaltig, bis 430px hinauf. Der
 * 479px-Breakpoint gehört aus demselben Grund nicht hierher: er schaltet
 * u.a. .insights-featured__title um (Abschnitt 13) und steht deshalb am Ende
 * von Abschnitt 13, nicht hier. */

@media (max-width: 1023px) {
	.nav-toggle__summary {
		display: inline-flex;
	}

	.site-nav__list {
		display: none;
	}

	.nav-toggle[open] + .site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--surface-subtle);
		border-bottom: 3px solid var(--anthracite);
		padding: var(--space-4) var(--page-margin);
		z-index: 10;
	}

	.site-header {
		position: relative;
	}
}

@media (max-width: 767px) {
	:root {
		/* 20px/56px sind Rastermaße aus Styleguide-Kapitel 08, keine Stufen der
		 * --space-Skala — deshalb hier als Literale statt als Token. */
		--page-margin: 20px;
		--section-gap: 56px;
	}

	.display { font-size: var(--step-h1); }
	h1 { font-size: var(--step-h2); }
	h2 { font-size: var(--step-h3); }

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

	.hero__media {
		border-left: none;
		border-top: 1px solid var(--line);
		min-height: 240px;
	}

	/* Nebeneinander teilen Ueberschrift und Beschriftung die Breite: bei 360 px
	 * bekommt "Referenzprojekte" 187 px fuer ein Wort, das 240 px braucht. Unter
	 * der Ueberschrift gestapelt hat sie die volle Inhaltsbreite. */
	.insights__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.section-lead,
	.dach__grid,
	.mandates__grid,
	.insights__grid,
	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	/* Einspaltig steht der erläuternde Absatz unter der Überschrift; der
	 * Abstand kommt dann aus dem Rastergitter, nicht aus einem Innenabstand. */
	.section-lead > :last-child {
		padding-top: 0;
	}

	/* 48 px Innenabstand je Seite kosten auf einem 360-px-Telefon fast ein
	 * Drittel der Flaeche; die Ueberschrift des Abschlussblocks behaelt davon
	 * 224 px. Auf Mobil traegt der Block den Seitenrand statt des Sektionsmasses. */
	.highlight {
		grid-template-columns: 1fr;
		padding: var(--space-7) var(--space-5);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}
}

@media (max-width: 639px) {
	/* Brand + nav-toggle + an always-visible primary CTA don't fit one row at
	 * 375px (min-content sum ~440px). The nav's own Kontakt entry carries the
	 * path instead, at the top of the first screen once the menu opens — the
	 * homepage's .highlight button and the footer's Kontakt link are further
	 * paths, not the only ones — so dropping it here is nothing lost, not a
	 * degraded page (SERVER-169 acceptance criterion 12, SERVER-218). */
	.site-header__actions > .btn {
		display: none;
	}
}

/* 11. Pages: Weaver, Kontakt --------------------------------------------------
 * Page-specific classes for site/weaver.html and site/kontakt.html
 * (SERVER-170). Weaver reuses .hero.is-dark, Kontakt the light .page-header
 * from section 13. Both reuse .highlight, .card
 * and .container/.section from the sections above — see the numbered comment
 * headers. Own responsive rules at the end of this section rather than
 * touching section 10, to keep this a single contiguous block. */

.weaver-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-top: var(--space-2);
}

.weaver-hero__product {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	padding: var(--space-7);
	background: var(--surface-subtle);
	border-left: 1px solid var(--line);
}

.weaver-hero__product img {
	width: 160px;
	height: auto;
}

.weaver-hero__label {
	font-family: var(--font-head);
	font-size: var(--step-h3);
	font-weight: 700;
	letter-spacing: 0.2em;
	margin: 0;
}

.is-dark .weaver-hero__label {
	color: var(--gold);
}

/* Steht eine Überschrift direkt in der Sektion statt in einem .section-lead
 * oder .page-header, bringt sie den Abstand zum Folgenden selbst mit — sonst
 * stößt die goldene Oberkante der ersten Karte an sie an. */
.section > h2 {
	margin-bottom: var(--space-7);
}

.weaver-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

/* Die drei Überschriften stehen auf gleicher Höhe, auch wenn eine davon über
 * zwei Zeilen läuft. */
.weaver-capabilities__grid h3 {
	min-height: 68px;
}

/* Gleiche Fläche wie .highlight (Hervorhebungsblock), aber ein
 * Info-Callout statt eines CTA — deshalb eigene Klasse statt eines
 * dritten .highlight-Inhaltstyps (vgl. Kommentar bei .highlight). */
.weaver-tech {
	background: var(--surface-subtle);
	border-left: 3px solid var(--gold);
	padding: var(--space-8) var(--space-7);
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--space-7);
	align-items: center;
}

.weaver-tech__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.weaver-tech__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.weaver-tech__item {
	background: var(--surface);
	padding: var(--space-5) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.weaver-tech__item p {
	color: var(--ink-muted);
	font-size: var(--step-sm);
	margin: 0;
}

.weaver-tech__item--note {
	grid-column: span 3;
}

.weaver-references__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 3px solid var(--anthracite);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-6);
}

.weaver-references__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

/* Referenzkachel: das Bild sitzt in einem hellen Rahmen, darunter mit Abstand
 * die Karte mit dem, was das Projekt tut. */
.weaver-reference {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.weaver-reference__media {
	background: var(--surface-subtle);
	border: 1px solid var(--line);
	padding: var(--space-2);
}

.weaver-reference__media img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.weaver-reference > .card {
	margin-top: var(--space-5);
}

/* .section trägt nur padding-top (Sektion 5), und padding-bottom gibt es allein
 * über .section:last-of-type — das trifft #referenzprojekte nicht, weil auf
 * dieses Band noch der Abschlussblock folgt. Die Karten klebten deshalb an der
 * goldenen Oberkante. Der Abstand sitzt hier am Vollbreiten-Band, das ihn
 * braucht, statt in der geteilten .section-Regel, und bleibt damit für jede
 * andere Seite wirkungslos (SERVER-176). */
.weaver-security {
	margin-top: var(--section-gap);
	padding: var(--space-9) 0;
	border-top: 3px solid var(--gold);
}

.weaver-security__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-8);
	align-items: start;
}

.weaver-security__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	/* A grid item that is itself a grid takes its own min-content as the
	 * default auto-minimum, ignoring the parent's 1fr track — the same
	 * shrink-to-fit issue .hero__content's min-width: 0 already fixes above
	 * (SERVER-169 acceptance criterion 12), here on .weaver-security__grid's
	 * right-hand item. */
	min-width: 0;
}

.weaver-security__item {
	/* Same shrink-to-fit fix as .hero__content and .weaver-security__items
	 * above: without it, "Nachvollziehbarkeit"'s min-content keeps this grid
	 * item — and with it the whole row — wider than the viewport instead of
	 * letting the heading's overflow-wrap: break-word (section 3) apply. */
	min-width: 0;
}

.weaver-security__item h3 {
	border-bottom: 3px solid var(--gold);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-3);
}

.weaver-security__item p {
	color: var(--ink-muted);
}

/* Die Spalte trägt denselben senkrechten Innenabstand wie .hero__content neben
 * ihr: .hero ist das Raster und hat selbst keinen, also muss jede Spalte ihren
 * eigenen mitbringen. Ohne das klebt "E-Mail" an der Kopfzeile, und die
 * Trennlinien laufen bis an den Fensterrand, weil rechts der Seitenrand fehlt —
 * anders als der Hero der Startseite, dessen rechte Spalte ein randlos
 * laufendes Bild ist. */
/* Die Kontaktdaten stehen als dreispaltige Reihe unter dem Seitenkopf. Jede
 * Spalte trägt ihre Haarlinie oben, wie die Karten der übrigen Seiten. */
.kontakt-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-7);
}

/* Die Anschrift hält einen langen Straßennamen, der ohne min-width: 0 die
 * ganze Reihe breiter zöge als die Spalte. */
.kontakt-details__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border-top: 1px solid var(--line);
	padding-top: var(--space-5);
	min-width: 0;
}

/* Schrift statt Gold: E-Mail und Telefon stehen bewusst in --ink, nicht in der
 * für Fließtext-Links üblichen Farbe --gold-deep. */
.kontakt-details__value {
	font-family: var(--font-head);
	font-size: var(--step-h4);
	font-weight: 600;
	color: var(--ink);
}

.kontakt-details__address {
	color: var(--ink-muted);
	margin: 0;
}

@media (max-width: 767px) {
	.weaver-capabilities__grid,
	.weaver-tech,
	.weaver-tech__grid,
	.weaver-references__grid,
	.weaver-security__grid,
	.weaver-security__items {
		grid-template-columns: 1fr;
	}

	.weaver-tech__item--note {
		grid-column: span 1;
	}

	.weaver-hero__product {
		border-left: none;
		border-top: 1px solid var(--line);
	}

	/* Gleiche Begruendung wie .insights__header oben (Abschnitt 10): das
	 * Nebeneinander von Ueberschrift und Beschriftung kostet bei 360 px zu
	 * viel Breite fuer "Referenzprojekte". */
	.weaver-references__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	/* Die drei Kontaktangaben stehen untereinander: nebeneinander bleibt für
	 * "kontakt@auros-consulting.de" auf einem 360-px-Telefon keine Breite. */
	.kontakt-details {
		grid-template-columns: 1fr;
	}
}

/* 12. Pages: Rechtliches (Impressum, Datenschutz, Security) --------------------
 * Ein Langtext-Layout für alle drei Seiten: Brotkrümel, .page-header aus
 * Abschnitt 13, darunter die Textspalte. Datenschutz und Sicherheit stellen ihr
 * ein Inhaltsverzeichnis zur Seite — dasselbe .with-sidebar/.sidebar/.toc wie
 * auf den Artikelseiten. Das Impressum kommt ohne aus: es gliedert sich in
 * .legal-row statt in Abschnitte mit Überschrift. */

.legal-content {
	max-width: 68ch;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Datenschutz's supervisory-authorities sentence carries a long plain-text
 * URL (services/website/AGENTS.md) that a normal line box won't break —
 * wraps it inside the viewport instead of overflowing (SERVER-167 review
 * finding). */
.legal-content p {
	overflow-wrap: anywhere;
}

.legal-content h2 {
	border-top: 3px solid var(--anthracite);
	padding-top: var(--space-5);
}

/* Impressum's Angabenliste: Bezeichnung links, Wert rechts, wie im Prototyp. */
.legal-row {
	display: grid;
	grid-template-columns: minmax(200px, 300px) 1fr;
	gap: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}

.legal-row h3 {
	font-size: var(--step-sm);
}

/* Datenschutz's verantwortliche-Stelle-Kasten: gleiche Fläche wie .highlight,
 * ohne dessen zweispaltiges CTA-Raster (hier reiner Fließtext). */
.legal-callout {
	background: var(--surface-subtle);
	border-left: 3px solid var(--gold);
	padding: var(--space-5) var(--space-6);
	line-height: 1.7;
}

/* Kontaktkasten am Fuß der Inhaltsspalte: an wen die Seite verweist. */
.legal-aside {
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
	font-size: var(--step-cap);
	line-height: 1.6;
	color: var(--ink-muted);
}

/* Aufzählung gleichartiger Angaben als zweispaltiges Feld: die Haarlinien
 * entstehen als 1px-Abstand über der Flächenfarbe des Rasters, nicht als Rahmen
 * an jeder Zelle. Bei ungerader Anzahl läuft die letzte Zelle über beide
 * Spalten, damit keine leere Fläche in der Farbe der Linien stehen bleibt. */
.legal-table {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.legal-table li {
	background: var(--surface);
	padding: var(--space-3) var(--space-4);
	line-height: 1.5;
}

.legal-table li:last-child:nth-child(odd) {
	grid-column: span 2;
}

@media (max-width: 639px) {
	.legal-row {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.legal-table {
		grid-template-columns: 1fr;
	}
}

/* 13. Pages: Insights, Artikel -----------------------------------------------
 * insights.html (Übersicht) führt den jüngsten Beitrag als .insights-featured
 * über die volle Breite und stellt die beiden übrigen darunter nebeneinander.
 * Beide Formen sind .insight-card aus Abschnitt 8 — dieselbe Karte aus Bild,
 * goldener Rubrik, Titel, einem Satz und dem Verweis "Beitrag lesen", ohne
 * Rahmen, Schatten oder Datum. Die drei Artikelseiten unter
 * insights/<slug>.html bringen ihr eigenes zweispaltiges Layout mit: eine
 * mitlaufende Inhaltsverzeichnis-Spalte plus eine 68ch breite Textspalte
 * (SERVER-172). */

/* Seitenkopf: Titel links, Einordnung rechts auf gemeinsamer Grundlinie, unten
 * abgeschlossen durch eine Haarlinie. Die Übersicht und die drei
 * Rechtliches-Seiten setzen ihn gleich. */
.page-header {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-7);
	align-items: end;
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--line);
}

.page-header > :last-child {
	color: var(--ink-muted);
}

/* Der Aufmacher der Übersicht schließt bündig an die Haarlinie des Kopfs an,
 * eine Textspalte mit Seitenleiste braucht dort Luft. */
.page-header + .with-sidebar {
	margin-top: var(--space-8);
}

/* Aufmacher: Bild und Text nebeneinander über die volle Inhaltsbreite, unten
 * durch die kräftige Anthrazitlinie vom Rest der Liste getrennt. */
.insights-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	/* Kein Abstand nach oben: der Aufmacher schließt unmittelbar an die
	 * Haarlinie des Seitenkopfs an, wie im Entwurf. */
	border-bottom: 3px solid var(--anthracite);
	color: var(--ink);
	text-decoration: none;
}

.insights-featured:hover {
	color: var(--ink);
}

.insights-featured:hover .insights-featured__title {
	text-decoration: underline;
}

.insights-featured__media {
	border-right: 1px solid var(--line);
	min-height: 300px;
	overflow: hidden;
	min-width: 0;
}

.insights-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.insights-featured__body {
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-4);
	min-width: 0;
}

.insights-featured__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.18;
	font-weight: 600;
}

/* Zwei Karten nebeneinander statt dreier: die Übersicht stellt so ihre beiden
 * übrigen Beiträge unter den Aufmacher, und jede Artikelseite ihre zwei
 * Verweise. Ohne diese Regel stünden am Artikelfuß zwei Karten in einem
 * Dreispalter und ließen ein Drittel der Breite leer. */
.insights__grid--pair {
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-7);
}

/* Trennlinie und höhere Bildfläche gehören der Übersicht allein — dort sind die
 * beiden Karten der Hauptinhalt, am Artikelfuß nur ein Verweis. Die Linie sitzt
 * als linke Kante an der zweiten Karte statt als leeres Element im Markup. Der
 * obere Abstand gehört hier dazu statt zu .insights__grid--pair: er trennt nur
 * .insights-featured von diesem Paar auf der Übersicht. Am Artikelfuß, wo nur
 * --pair steht, folgt das Raster stattdessen auf .insights__header, dessen
 * eigener margin-bottom (32px) mit einem hier gesetzten margin-top (64px)
 * kollabiert und den Abstand verdoppelt hätte. */
.insights__grid--divided {
	margin-top: var(--space-8);
}

.insights__grid--divided > :last-child {
	border-left: 1px solid var(--line);
	padding-left: var(--space-7);
}

.insights__grid--divided .insight-card__media {
	height: 240px;
}

/* "Beitrag lesen →" schließt jede Karte ab und sitzt unten bündig, damit die
 * Zeile bei ungleich langen Titeln auf gleicher Höhe steht. */
.insight-card__more {
	margin-top: auto;
	padding-top: var(--space-1);
}

.article__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 900px;
}

.article__hero {
	margin: var(--space-8) 0;
	border: 1px solid var(--line);
	overflow: hidden;
}

.article__hero img {
	width: 100%;
	height: 420px;
	object-fit: cover;
}

.with-sidebar {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

/* Brotkrümel über dem Artikelkopf: wo die Seite in der Website steht, als
 * Textzeile ohne eigenes Element für das Trennzeichen. Der Rubrikname ist kein
 * Link, weil es keine Seite je Rubrik gibt. */
.breadcrumb {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--step-cap);
	color: var(--ink-muted);
}

.breadcrumb__sep {
	padding: 0 var(--space-2);
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	position: sticky;
	top: var(--space-6);
}

/* Autorenzeile: das Bild sitzt in einem hellen Rahmen, wie die Referenzbilder
 * auf der Weaver-Seite. Die goldene Oberkante der Spalte gehört zu diesem
 * ersten Block; das Inhaltsverzeichnis darunter trennt nur eine Haarlinie. */
.article__author {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 3px solid var(--gold);
}

.article__author-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.article__author-portrait {
	flex: none;
	padding: var(--space-1);
	background: var(--surface-subtle);
	border: 1px solid var(--line);
	line-height: 0;
}

.article__author-portrait img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.article__author-name {
	font-size: var(--step-sm);
	font-weight: 600;
	line-height: 1.3;
}

.article__author-role,
.article__author-note {
	font-size: var(--step-cap);
	color: var(--ink-muted);
	line-height: 1.6;
}

.toc {
	list-style: none;
	margin: 0;
	/* Ohne Aufzählungszeichen braucht die Liste auch den Einzug nicht, den der
	 * Browser einer <ol> von sich aus gibt. */
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.toc__heading {
	display: block;
	color: var(--gold-deep);
	margin-bottom: var(--space-1);
}

.toc a {
	font-size: var(--step-sm);
	line-height: 1.45;
}

/* Bild im Fließtext: über die ganze Textspalte, auf feste Höhe beschnitten,
 * damit unterschiedliche Seitenverhältnisse den Lesefluss nicht verschieben. */
.article__image {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
}

.article__body {
	max-width: 68ch;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	font-size: var(--step-lead);
	line-height: 1.7;
}

/* Nummerierte Abschnittsüberschrift (Prototyp: "01" neben der h2). Fazit/
 * Schlusswort teilen sich denselben Rahmen ohne Nummer. */
.article__step {
	display: flex;
	align-items: baseline;
	gap: var(--space-5);
	border-top: 3px solid var(--anthracite);
	padding-top: var(--space-5);
	margin-top: var(--space-3);
}

/* A flex item's default min-width is its own min-content, which for an
 * unbreakable German compound word ("Medikationsstammdaten") is the whole
 * word — wider than a 375px viewport — regardless of the heading's own
 * overflow-wrap: break-word (services/website/AGENTS.md's grid/flex
 * min-width pattern). */
.article__step h2 {
	min-width: 0;
}

.article__step-num {
	font-family: var(--font-head);
	font-size: var(--step-h2);
	font-weight: 700;
	color: var(--gold-deep);
	line-height: 1;
}

.article__quote {
	margin: 0;
	border-left: 3px solid var(--gold);
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	font-size: var(--step-h3);
	line-height: 1.45;
	font-style: italic;
}

.article__callout {
	background: var(--surface-subtle);
	border-left: 3px solid var(--gold);
	padding: var(--space-5) var(--space-6);
	font-size: var(--step-body);
	line-height: 1.6;
}

.article__callout ol,
.article__callout ul {
	margin: 0;
	padding-left: var(--space-6);
}

.article__signature {
	border-top: 1px solid var(--line);
	padding-top: var(--space-5);
}

@media (max-width: 1023px) {
	.with-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar {
		position: static;
	}
}

@media (max-width: 767px) {
	.article__hero img {
		height: 240px;
	}

	.page-header,
	.insights-featured,
	.insights__grid--pair {
		grid-template-columns: 1fr;
	}

	.page-header {
		align-items: start;
		gap: var(--space-3);
	}

	.insights-featured__media {
		border-right: none;
		border-bottom: 1px solid var(--line);
		min-height: 240px;
	}

	.insights-featured__body {
		padding: var(--space-6) 0;
	}

	/* Einspaltig steht die zweite Karte unter der ersten — eine linke Kante
	 * träfe dann nichts mehr, und der Innenabstand liefe ins Leere. */
	.insights__grid--divided > :last-child {
		border-left: none;
		padding-left: 0;
	}

	/* Die Schrittziffer steht ueber der Ueberschrift statt daneben — neben ihr
	 * kostet sie das h2 rund 73 px einer ohnehin schmalen Spalte, und bei 360 px
	 * bleiben "Medikationsstammdaten" 247 px fuer 350 px Wortbreite. */
	.article__step {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}

/* Telefone sind 360 bis 430 px breit. Selbst gestapelt bleiben dort sieben
 * Ueberschriften mit einem Wort, das laenger ist als seine Spalte; der letzte
 * Hebel ist die Groesse. hyphenate-limit-chars ist keiner: Safari kennt die
 * Eigenschaft in keiner Version — Desktop bis 27, iOS bis 26.6 —, es wuerde also
 * nur Android betreffen. Ab 480 px passt jedes Wort ohne diesen Block. */
@media (max-width: 479px) {
	h1 { font-size: var(--step-h3); }
	h2 { font-size: var(--step-h4); }
	h3 { font-size: var(--step-h4); }

	.insights-featured__title {
		font-size: var(--step-h3);
	}
}