/* ══════════════════════════════════════════════════════════════
   pario — Website der pario innovation GmbH
   CI-Farben laut CI-Guide (Stand 09/2026). Farbwechsel NUR im :root-Block.
   Barrierefreiheit: Sage (#5C9371) erreicht mit Weiß nur 3,58:1 und wird
   deshalb nie als Textfarbe oder Texthintergrund verwendet — nur für Flächen,
   Punkte, Ränder und das Punktraster.
   ══════════════════════════════════════════════════════════════ */
:root {
	/* — CI-Farben — */
	--forest: #365C43;
	--sage: #5C9371;
	--weiss: #FFFFFF;
	--mint: #E4F5E9;
	--anthrazit: #2E3234;
	/* — abgeleitet, jeweils kontrastgeprüft (test/seite.test.mjs) — */
	--forest-tief: #2A4834;       /* Hover für Primär-Knöpfe */
	--text-leise: #50575A;        /* Nebentext auf Weiß und Mint */
	--text-hell-leise: #C9CDCC;   /* Nebentext auf Anthrazit */
	--linie: #D3E6D9;
	--logo-hell: #EDECEC;         /* helle Blöcke der Bildmarke */
	/* — Ende Farben — */

	--schrift: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	--radius: 14px;
	--radius-klein: 8px;
	--breite: 72rem;
	--rand: clamp(1.25rem, 5vw, 3rem);
	--abstand: clamp(4rem, 9vw, 7rem);
	--kopfhoehe: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); -webkit-text-size-adjust: 100%; }
body {
	background: var(--mint);
	color: var(--anthrazit);
	font-family: var(--schrift);
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--forest); line-height: 1.15; font-weight: 800; hyphens: auto; }
/* Einzelne Wörter in Überschriften nie trennen (z. B. „Berufsträgern“, Kerstin 28.09.2026) */
.ohne-trennung { hyphens: manual; }
img, svg { display: block; max-width: 100%; }
ul[role='list'], ol[role='list'] { list-style: none; }
a { color: var(--forest); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--forest); color: var(--weiss); }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--mint); }

.skip {
	position: absolute; left: 1rem; top: -10rem; z-index: 100;
	background: var(--forest); color: var(--weiss);
	padding: .75rem 1.25rem; font-weight: 700; border-radius: var(--radius-klein);
}
.skip:focus { top: 1rem; }
.visuell-versteckt {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sektion { padding-block: var(--abstand); }
.sektion--weiss { background: var(--weiss); }
.sektion--mint { background: var(--mint); }
.sektion--anthrazit { background: var(--anthrazit); color: var(--weiss); }
.sektion--forest { background: var(--forest); color: var(--weiss); }

.etikett {
	display: inline-block; margin-bottom: 1rem;
	font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--anthrazit);
}
.dunkel .etikett { color: var(--mint); }
.titel { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); max-width: 24ch; margin-bottom: 1.25rem; }
/* Sehr schmale Handys (bis 360 px): etwas kleiner, damit Wortgruppen wie „nicht von Investoren.“ in eine Zeile passen */
@media (max-width: 22.5em) { .titel { font-size: 1.625rem; } }
.dunkel .titel, .dunkel h3, .dunkel h4 { color: var(--weiss); }
.einleitung { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--text-leise); max-width: 40rem; }
.dunkel .einleitung { color: var(--text-hell-leise); }

/* ── Knöpfe ───────────────────────────────────────────── */
.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 2.875rem; padding: .7rem 1.5rem;
	border: 2px solid var(--forest); border-radius: var(--radius-klein);
	background: var(--forest); color: var(--weiss);
	font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .15s ease;
}
.knopf:hover { background: var(--forest-tief); border-color: var(--forest-tief); transform: translateY(-1px); }
.knopf--rand { background: transparent; color: var(--forest); }
.knopf--rand:hover { background: var(--forest); color: var(--weiss); }
.knopf--hell { background: var(--mint); border-color: var(--mint); color: var(--forest); }
.knopf--hell:hover { background: var(--weiss); border-color: var(--weiss); }

/* ── Kopf ─────────────────────────────────────────────── */
.kopf {
	position: sticky; top: 0; z-index: 50;
	background: rgb(255 255 255 / .94);
	-webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopfhoehe); flex-wrap: wrap; }
.marke {
	display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem;
	font-weight: 800; font-size: 1.375rem; letter-spacing: -.01em;
	color: var(--forest); text-decoration: none;
}
.marke img { width: 2.5rem; height: 2.5rem; flex: none; }
@media (min-width: 70em) and (max-width: 80em) { .kopf-innen { gap: 1rem; } .hauptnav ul { column-gap: 1rem; } }
.hauptnav { margin-left: auto; }
.hauptnav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; }
.hauptnav a {
	display: inline-flex; align-items: center; min-height: 2.75rem;
	color: var(--anthrazit); font-weight: 600; font-size: .96875rem; text-decoration: none;
}
.hauptnav a:hover { color: var(--forest); text-decoration: underline; }
.kopf-aktion { white-space: nowrap; }
.menue-schalter { display: none; }

/* Ohne JavaScript bleibt die Navigation einfach sichtbar (umgebrochen).
   Mit JavaScript klappt sie unterhalb von 70em (1120 px) als Menü zusammen — seit „Sicherheit und Technik“ passt das Menü erst ab dort in eine Zeile. */
@media (max-width: 69.99em) {
	.js .menue-schalter {
		display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
		margin-left: auto; min-width: 2.875rem; min-height: 2.875rem; padding: 0 .75rem;
		background: transparent; color: var(--forest);
		border: 2px solid var(--forest); border-radius: var(--radius-klein);
		font: inherit; font-weight: 700; cursor: pointer;
	}
	.menue-symbol, .menue-symbol::before, .menue-symbol::after {
		display: block; width: 1.125rem; height: 2px; background: currentColor; border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
	.menue-symbol { position: relative; }
	.menue-symbol::before, .menue-symbol::after { content: ''; position: absolute; left: 0; }
	.menue-symbol::before { top: -6px; }
	.menue-symbol::after { top: 6px; }
	.menue-schalter[aria-expanded='true'] .menue-symbol { background: transparent; }
	.menue-schalter[aria-expanded='true'] .menue-symbol::before { transform: translateY(6px) rotate(45deg); }
	.menue-schalter[aria-expanded='true'] .menue-symbol::after { transform: translateY(-6px) rotate(-45deg); }

	.js .hauptnav { display: none; order: 5; flex-basis: 100%; margin: 0; padding-bottom: 1rem; }
	.js .hauptnav.offen { display: block; max-height: calc(100dvh - var(--kopfhoehe)); overflow-y: auto; overscroll-behavior: contain; }
	.js .hauptnav ul { flex-direction: column; gap: 0; }
	.js .hauptnav li + li { border-top: 1px solid var(--linie); }
	.js .hauptnav a { display: flex; width: 100%; min-height: 3rem; font-size: 1.0625rem; }
	/* Knopf im aufgeklappten Menü: immer weiße Schrift auf Grün (Kerstin, 28.09.2026). Sichtbar ist er dort nur auf schmalen Handys (siehe unten), sonst steht er schon oben im Kopf. */
	.js .hauptnav .nav-aktion { padding-top: .75rem; border-top: 0; }
	.js .hauptnav .nav-aktion .knopf, .js .hauptnav .nav-aktion .knopf:hover { color: var(--weiss); text-decoration: none; }
}
/* „Kontakt aufnehmen“ steht immer im Kopf; nur auf sehr schmalen Handys wandert er ins Menü. */
.kopf-aktion { order: 3; }
.nav-aktion { display: none; }
@media (max-width: 29.99em) {
	.kopf-aktion { display: none; }
	.nav-aktion { display: block; }
	.nav-aktion .knopf, .js .hauptnav .nav-aktion .knopf { width: 100%; justify-content: center; color: var(--weiss); }
	.nav-aktion .knopf:hover, .js .hauptnav .nav-aktion .knopf:hover { color: var(--weiss); text-decoration: none; }
}

/* ── Einstieg ─────────────────────────────────────────── */
.held { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
/* Etikett und Überschrift oben über die ganze Breite; darunter Text links und Bühne rechts, oben bündig. */
.held-raster { display: grid; column-gap: clamp(2.5rem, 5vw, 4rem); row-gap: 2rem; align-items: start; }
.held-kopf h1 { margin-bottom: 0; }
.held .etikett {
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px;
	padding: .35rem 1rem; letter-spacing: .08em;
}
.held h1 { font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.625rem); letter-spacing: -.02em; margin-bottom: 1.25rem; max-width: 18ch; }
.held-text { font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); color: var(--text-leise); max-width: 32rem; margin-bottom: 2rem; }
.held-aktionen { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Stilisierte Plattform-Ansicht, nimmt das Logo-Motiv auf (Balken + Blöcke). */
.buehne-rahmen { width: 100%; max-width: 48rem; justify-self: center; display: grid; }
/* Die Bühne selbst hat keinen Innenabstand: Der Bildwechsel füllt sie ganz aus. Das grüne Startbild
   bringt Rand, Leiste und Karten selbst mit, die Bildschirmfotos liegen randlos auf der ganzen Fläche. */
.buehne {
	position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
	background: var(--forest); border-radius: 22px;
	box-shadow: 0 30px 60px -30px rgb(54 92 67 / .55);
}
.buehne-start { display: grid; grid-template-columns: 22% 1fr; gap: 4%; padding: 5%; background: var(--forest); }
.buehne-leiste { background: var(--sage); border-radius: 12px; display: grid; align-content: start; gap: 9%; padding: 18% 16%; }
.buehne-leiste i { display: block; height: .5rem; border-radius: 4px; background: rgb(255 255 255 / .55); }
.buehne-leiste i:first-child { background: var(--weiss); }
.buehne-flaeche { display: grid; grid-template-rows: 1.3fr 1fr; gap: 6%; }
.buehne-karte { background: var(--weiss); border-radius: 12px; padding: 7%; display: grid; align-content: start; gap: .55rem; }
.buehne-karte i { display: block; height: .45rem; border-radius: 4px; background: var(--linie); }
.buehne-karte i:nth-child(1) { width: 45%; background: var(--forest); }
.buehne-karte i:nth-child(2) { width: 90%; }
.buehne-karte i:nth-child(3) { width: 75%; }
.buehne-karte i:nth-child(4) { width: 60%; background: var(--sage); }
.buehne-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.buehne-zeile .buehne-karte { background: var(--logo-hell); }

/* Bildwechsel in der Grafik: alle Bilder liegen übereinander und blenden nacheinander ein (je 5 s).
   Läuft nur mit JavaScript (dann gibt es den Knopf zum Anhalten), hält bei Maus und Tastaturfokus an
   und steht bei „Bewegung reduzieren“ still auf dem ersten Bild. */
.schau { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.schau-bild { grid-area: 1 / 1; min-height: 0; overflow: hidden; }
/* Bildschirmfotos liegen ganz sichtbar und genau mittig auf weißem Grund: nichts wird abgeschnitten,
   der weiße Rand ist links und rechts gleich groß und oben und unten gleich groß. */
figure.schau-bild { display: flex; align-items: center; justify-content: center; padding: 3%; background: var(--weiss); }
.schau .bild-platz { aspect-ratio: auto; height: 100%; border-radius: 12px; font-size: .9375rem; }
.schau img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; }
/* Bildunterschrift nur für Vorleseprogramme, sichtbar ist allein das Foto. */
.schau figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .schau-bild:not(:first-child) { display: none; }
.js .schau-bild { opacity: 0; animation: schau-wechsel 25s linear infinite; }
.js .schau-bild:nth-child(2) { animation-delay: 5s; }
.js .schau-bild:nth-child(3) { animation-delay: 10s; }
.js .schau-bild:nth-child(4) { animation-delay: 15s; }
.js .schau-bild:nth-child(5) { animation-delay: 20s; }
.schau.angehalten .schau-bild, .schau:hover .schau-bild, .schau:focus-within .schau-bild { animation-play-state: paused; }
/* Das vorige Bild bleibt deckend, bis das nächste ganz eingeblendet ist — so scheint nichts durch. */
@keyframes schau-wechsel { 0% { opacity: 0; } 3%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }
.js .schau { cursor: pointer; }
.schau:focus-visible { outline: none; }
.buehne:has(.schau:focus-visible) { outline: 3px solid var(--forest); outline-offset: 4px; }
/* Etikett im Einstieg: nur Text, in Großbuchstaben, ohne Fläche und Rahmen.
   Im HTML steht der Satz normal geschrieben; die Großschreibung macht nur das CSS,
   damit Screenreader ihn nicht Buchstabe für Buchstabe vorlesen. */
.held .held-etikett {
	display: block; padding: 0; background: none; border: 0; border-radius: 0;
	color: var(--anthrazit); font-size: clamp(.875rem, .8rem + .3vw, 1rem); font-weight: 800;
	letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; margin-bottom: 1.25rem;
}
@media (max-width: 30em) { .held .etikett { border-radius: var(--radius-klein); } }

/* Breite Bildschirme: Text schmaler, Bühne mit den Bildschirmfotos breiter. */
@media (min-width: 56em) {
	.held-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.held-kopf { grid-column: 1 / -1; grid-row: 1; }
	/* Grafik oben bündig mit dem Einstiegstext und unten bündig mit dem Knopf „Module ansehen“ (Kerstin, 30.09.2026). */
	.held-inhalt { display: contents; }
	.held-text { grid-column: 1; grid-row: 2; margin-bottom: 0; }
	.held-aktionen { grid-column: 1; grid-row: 3; }
	.buehne-rahmen { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
	.buehne { aspect-ratio: auto; height: 100%; min-height: 16rem; }
	.held h1 { max-width: none; }
}

/* ── Punktraster-Übergänge (CI-Motiv) ─────────────────── */
.raster { display: block; height: 72px; line-height: 0; overflow: hidden; }
.raster svg { width: 100%; height: 100%; }
.raster rect { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: transform .8s ease; }
.raster:hover rect { transform: scale(1.35); }
.raster--mint-weiss { background: var(--mint); color: var(--weiss); }
.raster--weiss-mint { background: var(--weiss); color: var(--mint); }
.raster--weiss-anthrazit { background: var(--weiss); color: var(--anthrazit); }
.raster--anthrazit-mint { background: var(--anthrazit); color: var(--mint); }
.raster--mint-anthrazit { background: var(--mint); color: var(--anthrazit); }
.raster--mint-forest { background: var(--mint); color: var(--forest); }
.raster--forest-anthrazit { background: var(--forest); color: var(--anthrazit); }

/* ── Zahlen ───────────────────────────────────────────── */
.zahlen { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.zahlen-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.5rem 2rem; }
/* Wert oben (order), Beschriftung darunter; alle Werte gleich hoch, damit die Zahlen auf einer Linie stehen. */
.zahl { --wert-hoehe: clamp(2.75rem, 2.3rem + 1.8vw, 3.5rem); display: flex; flex-direction: column; justify-content: flex-start; gap: .35rem; padding-left: 1.25rem; border-left: 4px solid var(--sage); }
.zahl dd { order: -1; height: var(--wert-hoehe); display: flex; align-items: center; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1; color: var(--forest); }
.zahl dt { font-size: .96875rem; color: var(--text-leise); }
.zahl dd.platzhalter {
	font-size: 1.125rem; font-weight: 700; color: var(--text-leise);
	border: 2px dashed var(--linie); border-radius: var(--radius-klein);
	padding: 0 .75rem; align-self: flex-start;
}
.zahlen-fussnote { margin-top: 1.5rem; font-size: .875rem; color: var(--text-leise); }

/* ── Problem ──────────────────────────────────────────── */
/* So breit wie die Kacheln darüber. */
.entstehung { margin-top: 1rem; padding: 1.25rem 1.5rem; background: var(--weiss); border-left: 4px solid var(--forest); border-radius: var(--radius-klein); }
.entstehung strong { color: var(--forest); }
/* Sechs Kacheln: am Computer 2 Reihen à 3, auf dem Tablet 3 Reihen à 2, auf dem Handy untereinander. */
.problem-liste { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 36em) { .problem-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .problem-liste { grid-template-columns: repeat(3, 1fr); } }
.problem-liste li {
	background: var(--weiss); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.25rem 3rem;
	position: relative; line-height: 1.5;
}
.problem-liste li strong { display: block; margin-bottom: .35rem; color: var(--forest); font-size: 1.0625rem; }
.problem-liste li::before {
	content: ''; position: absolute; left: 1.25rem; top: 1.6rem;
	width: .75rem; height: .75rem; border-radius: 3px; background: var(--sage);
}

/* ── Nutzen ───────────────────────────────────────────── */
.nutzen-gitter { display: grid; gap: 1.25rem; margin-top: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 36em) { .nutzen-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .nutzen-gitter { grid-template-columns: repeat(3, 1fr); } }
.nutzen {
	background: var(--mint); border-radius: var(--radius); padding: 1.75rem 1.5rem;
	transition: transform .25s ease, box-shadow .25s ease;
}
.nutzen:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgb(46 50 52 / .45); }
.nutzen h3 { font-size: 1.1875rem; margin-bottom: .6rem; }
.nutzen p { color: var(--text-leise); font-size: 1rem; }
.symbol { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; background: var(--forest); color: var(--weiss); border-radius: 10px; }
.symbol svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Module (weiße Sektion, helle Karten) ─────────────── */
.modul-gruppe { margin-top: 2.75rem; }
.gruppe-titel { font-size: 1.25rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .75rem; }
.gruppe-titel::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
.gruppe-text { color: var(--text-leise); max-width: 40rem; margin: -.4rem 0 1.1rem; }
/* Module als Karten: Handy eine Spalte, Tablet zwei, Computer drei. Längere Texte hinter „Mehr lesen“ (details, ohne JS). */
.modul-gitter { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 36em) { .modul-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .modul-gitter { grid-template-columns: repeat(3, 1fr); } }
.modul {
	display: flex; flex-direction: column; gap: .75rem;
	background: var(--mint); border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 1.5rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.modul-text { display: flex; flex-direction: column; gap: .6rem; }
.modul:hover { transform: translateY(-2px); border-color: var(--sage); box-shadow: 0 12px 28px -18px rgb(46 50 52 / .45); }
.modul h4 { font-size: 1.1875rem; display: flex; align-items: center; gap: .65rem; }
.modul h4::before { content: ''; flex: none; width: .75rem; height: .75rem; border-radius: 3px; background: var(--sage); }
.modul p { color: var(--text-leise); font-size: 1rem; }
.modul-mehr p { margin-top: .6rem; }
.modul-mehr summary {
	align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem;
	color: var(--forest); font-weight: 700; font-size: .96875rem; cursor: pointer; list-style: none;
}
.modul-mehr summary::-webkit-details-marker { display: none; }
.modul-mehr summary::after {
	content: ''; width: .5rem; height: .5rem; margin-top: -.2rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease;
}
.modul-mehr[open] summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.modul-mehr summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.modul--neu { background: var(--weiss); border-style: dashed; border-color: var(--sage); }
.marker {
	display: inline-block; align-self: flex-start; font-size: .75rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--forest); border: 1px solid var(--forest); border-radius: 999px; padding: .15rem .6rem;
}
.basis { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.basis h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.basis ul { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }
.basis li {
	font-size: .9375rem; font-weight: 600; color: var(--forest);
	background: var(--mint); border: 1px solid var(--linie); border-radius: 999px; padding: .4rem .9rem;
}

/* ── Einblicke (Bilder aus dem Live-Betrieb) ───────────── */
.einblick-hinweis { margin-top: .5rem; }
.einblick-gruppe { font-size: 1.25rem; margin: 2.5rem 0 1.1rem; display: flex; align-items: center; gap: .75rem; }
.einblick-gruppe::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
/* Ein Bildschirmfoto pro Zeile in voller Breite: kleiner wäre die Schrift in den Fotos nicht lesbar. */
.einblick-gitter { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.einblick-link { display: block; border-radius: var(--radius); }
.einblick-link:hover img { transform: translateY(-2px); box-shadow: 0 24px 44px -26px rgb(54 92 67 / .75); }
.einblick { display: flex; flex-direction: column; gap: .9rem; }
.einblick figcaption { order: -1; }
.bild-platz { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); }
/* Originalformat des Fotos, nichts abgeschnitten, volle Auflösung der hochgeladenen Datei. */
.einblick img { width: 100%; height: auto; border-radius: var(--radius); }
.einblick img { display: block; background: var(--weiss); border: 1px solid var(--linie); box-shadow: 0 24px 48px -30px rgb(54 92 67 / .6); transition: transform .2s, box-shadow .2s; }
.bild-platz {
	display: grid; place-items: center; padding: 1rem; text-align: center;
	background: var(--weiss); border: 2px dashed var(--sage);
	font-weight: 700; color: var(--text-leise);
}
.einblick figcaption { color: var(--anthrazit); font-size: 1rem; line-height: 1.45; max-width: 44rem; }
.einblick figcaption strong { display: block; font-size: 1.125rem; }

/* ── Sicherheit und Technik ─────────────────────────────
   Überschrift oben über die ganze Breite, darunter zwei Kartenspalten
   (links Berufsgeheimnis, rechts Technik, ohne eigene Überschriften), ab 56em nebeneinander (Kerstin, 28.09.2026). */
.sicherheit-kopf { max-width: 48rem; }
.sicherheit-gruppen { display: grid; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pruef-liste { display: grid; gap: .75rem; list-style: none; }
.pruef-liste li { background: var(--weiss); border-radius: var(--radius); padding: 1rem 1.25rem; border-left: 4px solid var(--sage); }
.pruef-liste strong { display: block; color: var(--forest); margin-bottom: .25rem; font-size: 1.0625rem; }
.pruef-liste span { color: var(--text-leise); font-size: 1rem; }
@media (min-width: 56em) {
	.sicherheit-gruppen { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
	/* Beide Spalten oben und unten bündig: die fünf Karten liegen in gemeinsamen Zeilen,
	   Karte 1 links ist so hoch wie Karte 1 rechts usw. (Kerstin, 28.09.2026).
	   Ältere Browser ohne „subgrid“ zeigen die Spalten einfach nebeneinander. */
	@supports (grid-template-rows: subgrid) {
		.sicherheit-gruppen { grid-template-rows: repeat(5, auto); row-gap: .75rem; }
		.sicherheit-gruppe { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
		.sicherheit-gruppe .pruef-liste { grid-row: span 5; grid-template-rows: subgrid; }
	}
}

/* ── Gründungskanzleien ───────────────────────────────── */
.gruender-text { max-width: 44rem; }
.gruender-text p + p { margin-top: 1rem; }
.kanzlei-gitter { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); list-style: none; }
.kanzlei-platz {
	display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; min-height: 6rem;
	border: 2px dashed var(--linie); border-radius: var(--radius); padding: 1.25rem; background: var(--weiss);
}
.kanzlei-logo { flex: none; width: 3rem; height: 3rem; border-radius: 10px; background: var(--mint); display: grid; place-items: center; font-weight: 800; color: var(--forest); }
/* Logos oben in der Kachel, alle in einem gleich hohen Feld; breite Schriftzüge dürfen breiter werden */
.kanzlei-logo.mit-bild { background: none; border-radius: 0; width: auto; height: 3.5rem; display: flex; align-items: center; }
.kanzlei-logo img { display: block; width: auto; height: auto; max-height: 100%; max-width: 12rem; object-fit: contain; }
.kanzlei-text { min-width: 0; }
.kanzlei-name { display: block; font-weight: 700; line-height: 1.35; hyphens: manual; }
.kanzlei-link { display: inline-block; margin-top: .25rem; font-size: .875rem; color: var(--text-leise); text-decoration-color: var(--linie); overflow-wrap: anywhere; }
.kanzlei-link:hover { color: var(--forest); text-decoration-color: currentColor; }
/* Zweite, kleine Zeile in einer Kachel, z. B. „Consulting: BARKai GmbH“ bei Wahler (Kerstin, 30.09.2026) */
.kanzlei-zusatz { display: block; margin-top: .25rem; font-size: .875rem; color: var(--text-leise); }
.kanzlei-zusatz a { color: inherit; text-decoration-color: var(--linie); }
.kanzlei-zusatz a:hover { color: var(--forest); text-decoration-color: currentColor; }

/* ── Preise ───────────────────────────────────────────── */
.preis-gitter { display: grid; gap: 1.25rem; margin-top: 2.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.preis {
	display: flex; flex-direction: column; gap: 1rem;
	background: var(--weiss); border-radius: var(--radius); padding: 1.75rem 1.5rem;
	border: 1px solid var(--linie);
}
.preis--hervor { border: 2px solid var(--forest); }
.preis h3 { font-size: 1.25rem; }
.preis-betrag { font-size: 1.5rem; font-weight: 800; color: var(--forest); }
.preis-betrag small { display: block; font-size: .875rem; font-weight: 600; color: var(--text-leise); }
.preis ul { display: grid; gap: .5rem; list-style: none; }
.preis li { position: relative; padding-left: 1.5rem; font-size: 1rem; }
.preis li::before { content: ''; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 2px; background: var(--sage); }
.preis .knopf { margin-top: auto; }
.preis-hinweis { margin-top: 2rem; color: var(--text-leise); max-width: 46rem; }
.preis li a { color: var(--forest); }
/* Partner-Logo als Link in der Karte „Einführung“ (BARKai, Kerstin/Benny, 30.09.2026) */
/* Das Logo-Bild hat links weißen Rand (Bildschirmfoto, Datei bleibt unverändert): nach links gerückt, damit das Zeichen bündig mit dem Text darüber steht (Kerstin, 30.09.2026). */
.partner-link { display: inline-block; margin-top: .375rem; margin-left: -.8rem; border-radius: var(--radius-klein); }
.partner-link img { display: block; width: auto; height: 3rem; max-width: 100%; }

/* ── Kontakt ──────────────────────────────────────────── */
.kontakt { text-align: center; }
.kontakt .titel, .kontakt .einleitung { margin-inline: auto; }
.kontakt .einleitung { color: var(--mint); margin-bottom: 2rem; }
.kontakt-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ── Fuß ──────────────────────────────────────────────── */
.fuss { background: var(--anthrazit); color: var(--text-hell-leise); padding-block: 3rem; font-size: .9375rem; }
/* „Rechtliches“ und „Kontakt“ bleiben in jeder Breite ein Paar rechts; „Kontakt“ schließt bündig mit der Trennlinie darunter ab (Kerstin, 30.09.2026).
   Schmal: Logo oben über die ganze Breite, das Paar darunter rechts. Ab Tablet-Breite: alles in einer Zeile. */
.fuss-raster { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2rem; }
.fuss-raster > :first-child { flex: 1 1 100%; }
@media (min-width: 48em) {
	.fuss-raster { display: grid; grid-template-columns: 1fr auto auto; column-gap: 5rem; }
}
.fuss .marke { color: var(--weiss); }
.fuss h2 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); margin-bottom: .75rem; }
.fuss ul { list-style: none; display: grid; gap: .25rem; }
.fuss a { color: var(--weiss); display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Links in den Fußleisten-Listen enger (Kerstin, 28.09.2026); 1.75rem bleibt über der Mindestgröße von 24 px zum Antippen (WCAG 2.2, 2.5.8). */
.fuss li a { min-height: 1.75rem; }
.fuss-unten { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .15); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }

/* ── Unterseiten (Impressum, Datenschutz, 404) ────────── */
.rechtstext { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-bottom: 1.5rem; }
.rechtstext h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem; }
.rechtstext p, .rechtstext ul, .rechtstext address { margin-bottom: 1rem; font-style: normal; }
.rechtstext ul { padding-left: 1.25rem; }
.platzhalter-text {
	background: var(--weiss); border: 2px dashed var(--sage); border-radius: 6px;
	padding: 0 .35rem; font-weight: 700; color: var(--forest);
}
.hinweis-kasten { background: var(--weiss); border-left: 4px solid var(--forest); border-radius: var(--radius-klein); padding: 1rem 1.25rem; margin-bottom: 2rem; }

/* ── Bewegung reduzieren ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.raster:hover rect, .nutzen:hover, .modul:hover, .knopf:hover, .einblick-link:hover img { transform: none; }
	.js .schau-bild { opacity: 0; }
	.js .schau-bild:first-child { opacity: 1; }
}

/* ── Druck ────────────────────────────────────────────── */
@media print {
	.kopf, .raster, .buehne, .skip { display: none !important; }
	.sektion--anthrazit, .sektion--forest, .fuss { background: none; color: #000; }
}