/* ══════════════════════════════════════════════════════════════════════════════
   busapp.ch — Gestaltung des Produktauftritts.

   Farben und Schrift folgen der busapp-Oberfläche (docs/designprofile.md im CRM):
   derselbe Dunkelkern, derselbe Hausverlauf grün → petrol → blau in der Fusszeile,
   dieselbe Ubuntu-Familie. Dunkel ist hier die Grundfassung, hell die Alternative
   über den Umschalter oben rechts.

   Alle Farben in rgb() — Hausregel aus dem CRM-Projekt.
   Schriften und Skripte liegen auf diesem Server, es wird zur Laufzeit nichts
   von fremden Adressen nachgeladen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Schriften (lokal, woff2, Subsets latin + latin-ext) ──────────────────── */

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-300-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-300-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-400-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-400-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-500-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-500-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-700-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-700-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-200-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-200-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-400-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-700-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-sans-700-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ubuntu Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-condensed-400-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ubuntu Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/ubuntu-condensed-400-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Farbkern ─────────────────────────────────────────────────────────────
   Dunkel ist die Grundfassung. Die helle Fassung setzt dieselben Variablen neu —
   Selektoren gibt es dort keine, damit sie nichts anderes verschieben kann.
   Jedes Schrift/Flächen-Paar liegt über 4.5:1 (WCAG AA), die Fliesstexte über 7:1. */

:root {
	--grund:          rgb(18, 20, 22);
	--grund-tief:     rgb(13, 15, 17);
	--flaeche:        rgb(28, 32, 35);
	--flaeche-hoch:   rgb(37, 42, 46);
	--rahmen:         rgb(52, 57, 62);
	--rahmen-stark:   rgb(84, 91, 98);
	--schrift:        rgb(226, 229, 233);
	--schrift-zart:   rgb(163, 171, 179);
	--schrift-still:  rgb(130, 138, 146);
	/* Eigene Textfarbe für die Modulkarten: deren Grund ist die getönte Modulfarbe und bei
	   Adressen (Limette) und Projekte (Türkis) deutlich heller als eine normale Fläche.
	   Mit --schrift-zart läge der Fliesstext dort bei rund 4:1 — hiermit über 5:1. */
	--modul-schrift:  rgb(185, 192, 199);
	--akzent:         rgb(64, 182, 232);
	--akzent-flaeche: rgb(64, 182, 232);
	--auf-akzent:     rgb(12, 20, 26);
	--link:           rgb(125, 190, 230);
	--schatten:       rgba(0, 0, 0, 0.45);

	/* Hausverlauf aus der CRM-Fusszeile — grün → petrol → blau */
	--haus-1: rgb(0, 132, 59);
	--haus-2: rgb(0, 110, 120);
	--haus-3: rgb(0, 102, 204);

	/* Die Wortmarke steht bewusst nicht im Grauton des Fliesstextes, sondern in Reinweiss
	   bzw. Reinschwarz — ohne Farbe, wie abgemacht. */
	--marke-schrift: rgb(255, 255, 255);

	--breite: 1180px;
	--rund: 4px;
}

html[data-theme="light"] {
	--grund:          rgb(238, 239, 241);
	--grund-tief:     rgb(225, 226, 229);
	--flaeche:        rgb(252, 252, 252);
	--flaeche-hoch:   rgb(245, 246, 248);
	--rahmen:         rgb(203, 207, 212);
	--rahmen-stark:   rgb(148, 155, 162);
	--schrift:        rgb(28, 31, 34);
	--schrift-zart:   rgb(84, 90, 97);
	--schrift-still:  rgb(100, 107, 114);
	--modul-schrift:  rgb(84, 90, 97);
	--akzent:         rgb(0, 100, 140);
	--akzent-flaeche: rgb(0, 108, 150);
	--auf-akzent:     rgb(255, 255, 255);
	--link:           rgb(0, 88, 150);
	--schatten:       rgba(0, 0, 0, 0.14);
	--marke-schrift:  rgb(0, 0, 0);
}

:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ── Grundgerüst ──────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
	margin: 0;
	background-color: var(--grund);
	color: var(--schrift);
	font-family: 'Ubuntu', 'Segoe UI', Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); }
a:hover { color: var(--akzent); }

:focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 3px;
	border-radius: 2px;
}

.bahn {
	width: 100%;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0 24px;
}

/* Nur für Screenreader — Sprungmarke, Beschriftungen */
.nur-vorlesen {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sprungmarke {
	position: absolute;
	left: 12px; top: -60px;
	z-index: 200;
	padding: 10px 16px;
	background-color: var(--akzent-flaeche);
	color: var(--auf-akzent);
	text-decoration: none;
	transition: top .15s ease;
}
.sprungmarke:focus { top: 12px; color: var(--auf-akzent); }

/* ── Kopfleiste ───────────────────────────────────────────────────────────── */

.kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(13, 15, 17, 0.92);
	border-bottom: 1px solid var(--rahmen);
	backdrop-filter: blur(10px);
}
html[data-theme="light"] .kopf { background-color: rgba(248, 249, 250, 0.92); }

.kopf-innen {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 62px;
}

/* Wortmarke: das busapp-„b" wie in der CRM-Menüleiste — als CSS-Maske, damit es
   die Schriftfarbe des jeweiligen Modus annimmt. */
.marke {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--marke-schrift);
	text-decoration: none;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-right: auto;
}
.marke:hover { color: var(--marke-schrift); }

.marke-b {
	display: block;
	/* Bewusst OHNE eigene Neigung: Das Zeichen in b.svg steht schon schräg. Eine zusätzliche
	   Scherung legte die Schräge doppelt darauf und liess das „b" umfallen. */
	width: 20px;
	height: 34px;
	padding: 0;
	background-color: var(--marke-schrift);
	-webkit-mask: url('/assets/img/b.svg') center / 11px auto no-repeat;
	        mask: url('/assets/img/b.svg') center / 11px auto no-repeat;
	border: 1px solid var(--rahmen-stark);
	border-radius: 11px;
	box-sizing: border-box;
}

/* Zwei Silben, ein Farbwert: Die Marke trägt allein der Gewichtssprung 200 → 700, kursiv
   geschrieben. Ohne eigene Farbe steht sie auf der Schriftfarbe des Grundtextes — über 12:1
   in beiden Fassungen, und sie bleibt lesbar, wo eine Hausfarbe zu blass würde.
   Die beiden Schnitte sind echte Kursive (Ubuntu Sans 200/700 italic), keine vom Browser
   geneigte Aufrechte: eine schräg gestellte 200er franst an den Rundungen aus. */
.marke-wort { display: block; font-style: italic; }
.marke-bus {
	font-weight: 200;
	color: inherit;
	letter-spacing: 0;
}
.marke-app {
	font-weight: 700;
	color: inherit;
	letter-spacing: -0.02em;
}

.marke-zusatz {
	display: block;
	font-size: 11px;
	line-height: 1;
	font-weight: 400;
	color: var(--schrift-still);
	letter-spacing: .04em;
}

.hauptnav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hauptnav a {
	display: block;
	padding: 8px 12px;
	color: var(--schrift-zart);
	text-decoration: none;
	font-size: 15px;
	border-radius: var(--rund);
}
.hauptnav a:hover { color: var(--schrift); background-color: var(--flaeche-hoch); }
.hauptnav a.aktiv { color: var(--schrift); box-shadow: inset 0 -2px 0 var(--akzent); }

/* Hell/Dunkel-Umschalter — Form aus dem CRM übernommen */
.schalter {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background-color: var(--flaeche-hoch);
	border: 1px solid var(--rahmen);
	border-radius: 999px;
	cursor: pointer;
	color: var(--schrift-zart);
}
.schalter span {
	display: grid;
	place-items: center;
	width: 26px; height: 22px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
}
.schalter .an {
	background-color: var(--akzent-flaeche);
	color: var(--auf-akzent);
}

.nav-knopf {
	display: none;
	width: 40px; height: 36px;
	padding: 0;
	background-color: var(--flaeche-hoch);
	border: 1px solid var(--rahmen);
	border-radius: var(--rund);
	color: var(--schrift);
	font-size: 17px;
	cursor: pointer;
}

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */

.knopf {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--rund);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.knopf-voll {
	background-color: var(--akzent-flaeche);
	color: var(--auf-akzent);
}
.knopf-voll:hover { filter: brightness(1.1); color: var(--auf-akzent); }
.knopf-rand {
	background-color: transparent;
	border-color: var(--rahmen-stark);
	color: var(--schrift);
}
.knopf-rand:hover { background-color: var(--flaeche-hoch); color: var(--schrift); }

/* ── Abschnitte ───────────────────────────────────────────────────────────── */

.block { padding: 84px 0; }
.block-getoent { background-color: var(--grund-tief); border-block: 1px solid var(--rahmen); }

.block-kopf { max-width: 760px; margin-bottom: 44px; }

.vorzeile {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--akzent);
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
/* Auf den rechtlichen Seiten trägt die Überschrift ein h1 — ohne eigene Angabe hinge ihre
   Grösse am Vorgabewert des Browsers. */
.block-kopf h1 { font-size: clamp(30px, 3.6vw, 38px); }
h3 { font-size: 20px; }

.block-kopf p {
	margin: 14px 0 0;
	font-size: 18px;
	color: var(--schrift-zart);
}

/* ── Bühne ────────────────────────────────────────────────────────────────── */

.buehne {
	position: relative;
	padding: 76px 0 64px;
	overflow: hidden;
}
.buehne::before {
	content: "";
	position: absolute;
	inset: -40% 0 auto -10%;
	height: 620px;
	background: radial-gradient(60% 60% at 30% 40%, rgba(0, 110, 120, 0.22), transparent 70%),
	            radial-gradient(50% 50% at 78% 20%, rgba(0, 102, 204, 0.18), transparent 70%);
	pointer-events: none;
}
html[data-theme="light"] .buehne::before {
	background: radial-gradient(60% 60% at 30% 40%, rgba(0, 110, 120, 0.10), transparent 70%),
	            radial-gradient(50% 50% at 78% 20%, rgba(0, 102, 204, 0.09), transparent 70%);
}

.buehne .bahn { position: relative; }

.buehne h1 {
	max-width: 16em;
	font-size: clamp(34px, 5.4vw, 56px);
	font-weight: 300;
}
.buehne h1 strong { font-weight: 700; }

.buehne-text {
	max-width: 40em;
	margin: 20px 0 0;
	font-size: 19px;
	color: var(--schrift-zart);
}

.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.merkmale {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--schrift-zart);
}
.merkmale li { display: flex; align-items: center; gap: 8px; }
.merkmale li::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background-color: var(--akzent);
}

/* Bildschirmfoto im Fensterrahmen */
.fenster {
	margin-top: 48px;
	border: 1px solid var(--rahmen-stark);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--flaeche);
	box-shadow: 0 24px 60px var(--schatten);
}
.fenster-leiste {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	background-color: var(--flaeche-hoch);
	border-bottom: 1px solid var(--rahmen);
}
.fenster-punkt {
	width: 10px; height: 10px;
	border-radius: 50%;
	background-color: var(--rahmen-stark);
}
.fenster-adresse {
	margin-left: 8px;
	font-size: 12.5px;
	color: var(--schrift-zart);
}
.fenster img { width: 100%; }

/* ── Bedürfnis → Lösung ───────────────────────────────────────────────────── */

.paare {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.paar {
	padding: 24px 26px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: var(--rund);
}
/* Der Selektor trägt das p absichtlich mit: `.paar p { margin: 0 }` weiter unten ist
   spezifischer als `.paar-frage` allein und hat den Abstand bisher weggeräumt — die Aussage
   klebte am Titel. */
.paar p.paar-frage {
	margin: 0 0 26px;
	padding-left: 16px;
	border-left: 3px solid var(--rahmen-stark);
	font-size: 17px;
	font-style: italic;
	color: var(--schrift-zart);
}
/* Die Titel in den Kästchen laufen oft über zwei Zeilen: 1.2 wie bei den grossen
   Überschriften klebt dort, und der Fliesstext darunter braucht eigene Luft. */
.paar h3 { margin-bottom: 16px; font-size: 18px; line-height: 1.35; }
.paar p { margin: 0; font-size: 16px; color: var(--schrift-zart); }

/* ── Module ───────────────────────────────────────────────────────────────── */

/* 330px statt 270: Bei neun Modulen ergeben sich so drei Spalten zu drei Reihen — mit vier
   Spalten bliebe das neunte Modul allein in der letzten Zeile stehen. */
.module {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/* --mc trägt die Modulfarbe aus der busapp-Datenbank, --mc-flaeche den daraus
   gemischten Kachelgrund — dieselbe Rechnung wie in components/util/Farbe.cfc. */
.modul {
	padding: 22px 24px;
	background-color: var(--mc-flaeche, var(--flaeche));
	border: 1px solid var(--rahmen);
	border-left: 4px solid var(--mc, var(--rahmen-stark));
	border-radius: var(--rund);
}
html[data-theme="light"] .modul { background-color: var(--flaeche); }

.modul-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.modul-punkt {
	width: 11px; height: 11px;
	border-radius: 50%;
	background-color: var(--mc, var(--rahmen-stark));
	flex: 0 0 auto;
}
.modul h3 { font-size: 19px; line-height: 1.35; }
.modul > p { margin: 0 0 14px; font-size: 15.5px; color: var(--modul-schrift); }

.modul ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Die Merkmal-Pillen werden nach unten abgedunkelt statt aufgehellt: Auf den hellen
   Modultönen (Limette, Türkis) bliebe die Schrift sonst unter der Lesbarkeitsschwelle. */
.modul li {
	padding: 3px 9px;
	background-color: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--rahmen);
	border-radius: 999px;
	font-size: 13px;
	color: var(--schrift-zart);
}
html[data-theme="light"] .modul li { background-color: var(--flaeche-hoch); }

/* ── Einblicke (Bildergalerie) ────────────────────────────────────────────── */

.reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
	padding: 0;
	list-style: none;
}
.reiter button {
	padding: 9px 18px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: 999px;
	color: var(--schrift-zart);
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}
.reiter button:hover { color: var(--schrift); border-color: var(--rahmen-stark); }
.reiter button[aria-selected="true"] {
	background-color: var(--akzent-flaeche);
	border-color: var(--akzent-flaeche);
	color: var(--auf-akzent);
}

.blatt[hidden] { display: none; }
.blatt-bild {
	border: 1px solid var(--rahmen-stark);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--flaeche);
	box-shadow: 0 18px 44px var(--schatten);
	cursor: zoom-in;
}
.blatt-text {
	margin: 16px 0 0;
	max-width: 62em;
	font-size: 16px;
	color: var(--schrift-zart);
}
.blatt-text strong { color: var(--schrift); font-weight: 500; }

.lupe-hinweis {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--schrift-still);
}

/* Die Bildschirmfotos gibt es zweimal — aus der hellen und aus der dunklen Fassung des
   Programms. Sichtbar ist immer genau EINES: das, welches zur gewählten Darstellung passt;
   das andere hat keine Fläche und wird darum (loading="lazy") gar nicht erst geholt.
   Der Umschalter braucht dafür kein Skript: es entscheidet allein data-theme am <html>.

   Die Grundregel versteckt das helle Bild, ohne nach data-theme zu fragen — so bleibt es auch
   dann bei einem Bild, wenn das Attribut fehlen sollte. Wichtig ist das vor allem, solange ein
   Browser noch eine ältere Fassung dieser Datei im Speicher hat: ohne diese Regeln stünden
   beide Bilder untereinander. Dagegen hilft zusätzlich der Versionsparameter am
   Stylesheet-Verweis in index.html — der ist bei jeder Änderung hier nachzuziehen. */
.bild-hell { display: none; }                                 /* dunkel ist die Grundfassung */
html[data-theme="light"] .bild-hell   { display: block; }
html[data-theme="light"] .bild-dunkel { display: none; }

/* Grossansicht */
.lupe {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	place-items: center;
	padding: 28px;
	background-color: rgba(8, 10, 12, 0.88);
	cursor: zoom-out;
}
.lupe img {
	max-width: 100%;
	max-height: 88vh;
	border: 1px solid var(--rahmen-stark);
	border-radius: 6px;
}
.lupe-zu {
	position: absolute;
	top: 18px; right: 22px;
	width: 40px; height: 40px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen-stark);
	border-radius: var(--rund);
	color: var(--schrift);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* ── Ablaufkette ──────────────────────────────────────────────────────────── */

.kette {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kette li {
	flex: 1 1 150px;
	position: relative;
	padding: 18px 16px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-top: 3px solid var(--kf, var(--akzent));
	border-radius: var(--rund);
}
.kette b {
	display: block;
	font-size: 15.5px;
	font-weight: 500;
}
.kette span {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--schrift-zart);
}
.kette li::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: -12px;
	transform: translateY(-50%);
	z-index: 1;
	color: var(--rahmen-stark);
	font-size: 22px;
	line-height: 1;
}
.kette li:last-child::after { content: none; }

.kette-nachsatz {
	margin: 24px 0 0;
	max-width: 60em;
	font-size: 16px;
	color: var(--schrift-zart);
}

/* ── Was neu ist ──────────────────────────────────────────────────────────── */

.neu-liste {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
}
.neu-eintrag {
	padding: 22px 24px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-left: 4px solid var(--mc, var(--akzent));
	border-radius: var(--rund);
}
.neu-eintrag h3 { margin-bottom: 14px; font-size: 18px; line-height: 1.35; }
.neu-eintrag p { margin: 0; font-size: 15.5px; color: var(--schrift-zart); }
.neu-modul {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--schrift-still);
}
.neu-fuss {
	margin: 26px 0 0;
	max-width: 60em;
	font-size: 15.5px;
	color: var(--schrift-still);
}

/* ── Technik ──────────────────────────────────────────────────────────────── */

.technik {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	background-color: var(--rahmen);
	border: 1px solid var(--rahmen);
	border-radius: var(--rund);
	overflow: hidden;
}
.technik > div {
	padding: 24px 26px;
	background-color: var(--flaeche);
}
.technik h3 { margin-bottom: 12px; font-size: 17px; line-height: 1.35; }
.technik p { margin: 0; font-size: 15.5px; color: var(--schrift-zart); }

/* ── Datenschutz ──────────────────────────────────────────────────────────── */

.schutz {
	position: relative;
	padding: 40px 40px 40px 44px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: var(--rund);
	overflow: hidden;
}
.schutz::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: linear-gradient(to bottom, var(--haus-1) 0%, var(--haus-2) 60%, var(--haus-3) 100%);
}
.schutz h2 { max-width: 14em; }
.schutz-liste {
	display: grid;
	gap: 20px 40px;
	/* Bewusst zwei Spalten: bei drei bliebe der vierte Punkt allein in der Zeile stehen. */
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.schutz-liste li {
	display: flex;
	gap: 12px;
	font-size: 16px;
	color: var(--schrift-zart);
}
.schutz-liste b { color: var(--schrift); font-weight: 500; }
.haken {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	margin-top: 3px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--haus-1);
	color: rgb(255, 255, 255);
	font-size: 12px;
	line-height: 1;
}
.schutz-fuss {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--rahmen);
	font-size: 15px;
	color: var(--schrift-still);
}

/* ── Ausblick cms.busapp ──────────────────────────────────────────────────── */

.ausblick {
	display: grid;
	gap: 26px;
	grid-template-columns: 1fr;
	padding: 34px 36px;
	background-color: var(--flaeche);
	border: 1px dashed var(--rahmen-stark);
	border-radius: var(--rund);
}
.marke-etikett {
	display: inline-block;
	margin-bottom: 12px;
	padding: 3px 10px;
	border: 1px solid var(--rahmen-stark);
	border-radius: 999px;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--schrift-still);
}
.ausblick p { margin: 12px 0 0; color: var(--schrift-zart); max-width: 58em; }

/* ── Kontakt ──────────────────────────────────────────────────────────────── */

.kontakt {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.2fr .8fr;
	align-items: start;
}
.kontakt-karte {
	padding: 28px 30px;
	background-color: var(--flaeche);
	border: 1px solid var(--rahmen);
	border-radius: var(--rund);
}
.kontakt-karte h3 { margin-bottom: 14px; line-height: 1.35; }
.kontakt-zeilen { margin: 0; font-size: 16px; }
.kontakt-zeilen dt {
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--schrift-still);
}
.kontakt-zeilen dt:first-child { margin-top: 0; }
.kontakt-zeilen dd { margin: 2px 0 0; }

/* ── Rechtliche Seiten (Impressum, Datenschutz) ───────────────────────────── */

.recht {
	max-width: 820px;
	font-size: 16.5px;
	color: var(--schrift-zart);
}
.recht h2 {
	margin: 44px 0 0;
	font-size: 22px;
	color: var(--schrift);
}
.recht h2:first-of-type { margin-top: 0; }
.recht p { margin: 12px 0 0; }
.recht ul { margin: 12px 0 0; padding-left: 22px; }
.recht li { margin: 4px 0; }
.recht a { overflow-wrap: anywhere; }
.recht strong { color: var(--schrift); font-weight: 500; }

/* Anschriften und Kennzahlen: Bezeichnung links, Angabe rechts — auf schmalen
   Bildschirmen untereinander, sonst stünde die Angabe in einer Spalte von zwei Wörtern. */
.recht-zeilen {
	display: grid;
	gap: 4px 28px;
	grid-template-columns: 200px 1fr;
	margin: 16px 0 0;
}
.recht-zeilen dt {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--schrift-still);
	padding-top: 4px;
}
.recht-zeilen dd { margin: 0; }

.recht-stand {
	margin: 40px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--rahmen);
	font-size: 15px;
	color: var(--schrift-still);
}

@media (max-width: 700px) {
	.recht-zeilen { grid-template-columns: 1fr; }
	.recht-zeilen dt { margin-top: 12px; }
}

/* ── Fusszeile ────────────────────────────────────────────────────────────── */

.fuss-streifen {
	height: 4px;
	background: linear-gradient(to right, var(--haus-1) 0%, var(--haus-2) 60%, var(--haus-3) 100%);
}
.fuss {
	padding: 30px 0 40px;
	background-color: var(--grund-tief);
	font-size: 15px;
	color: var(--schrift-zart);
}
.fuss-innen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	align-items: center;
	justify-content: space-between;
}
/* Die Wortmarke steht in der Fusszeile mitten im Satz — also in der Zeile statt als Block. */
.fuss .marke-wort { display: inline; }
.fuss em { font-style: normal; }
.fuss em strong { font-weight: 700; }
.fuss ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Kleine Bildschirme ───────────────────────────────────────────────────── */

@media (max-width: 940px) {
	.kontakt { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
	body { font-size: 16px; }
	.block { padding: 60px 0; }
	.buehne { padding: 48px 0 44px; }

	.nav-knopf { display: block; order: 3; }
	.hauptnav {
		display: none;
		order: 4;
		width: 100%;
		padding-bottom: 14px;
	}
	.hauptnav.offen { display: block; }
	.hauptnav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.hauptnav a { padding: 11px 12px; border: 1px solid var(--rahmen); }
	.kopf-innen { flex-wrap: wrap; }

	.kette li::after { content: none; }
	.schutz { padding: 30px 26px 30px 30px; }
	.ausblick { padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}