/* =========================================================================
   RockySpin Casino — Stylesheet
   Skalen: TYPO-04 (refined calm) · SPACE-07 (fibonacci) · CONT-10 · BP-05 · GEO-08
   Aufbau: Tokens → Basis → Bausteine (nach Komponente) → schmale Schirme
   ========================================================================= */

/* ---------- Schrift: eigener Host, keine externen Stylesheets ---------- */
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/mont-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/mont-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/mont-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeface/mont-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens: alle Werte dieser Sammlung an einer Stelle ---------- */
:root {
	/* Farben (verschobene Endwerte aus der Spezifikation) */
	--sd-main: #181123;
	--sd-focus: #23c767;
	--sd-action-down: #1a9e48;
	--sd-field: #0f0b1a;
	--sd-card: #1a1230;
	--sd-letters: #ffffff;
	--sd-dim: #c1c0c0;
	--sd-line: #2b2140;
	--sd-rule-bold: #3d3057;
	--sd-gradient-light: #f8d215;
	--sd-fade-bottom: #7434eb;
	--sd-caution: #d00000;

	/* Abstände — fibonacci-artig */
	--sd-2xs: 3px;
	--sd-xs: 8px;
	--sd-sm: 13px;
	--sd-md: 21px;
	--sd-lg: 34px;
	--sd-xl: 55px;
	--sd-2xl: 89px;
	--sd-3xl: 144px;
	--band-y: 46px;

	/* Rundungen: oben weich, unten scharf */
	--r-2xs: 2px 2px 0 0;
	--r-xs: 4px 4px 0 0;
	--r-sm: 6px 6px 0 0;
	--r-md: 12px 12px 0 0;
	--r-lg: 20px 20px 0 0;
	--r-xl: 28px 28px 0 0;
	--r-2xl: 36px 36px 0 0;
	--r-3xl: 44px 44px 0 0;
	--sd-capsule: 9999px 9999px 0 0;
	--sd-circle: 50%;

	/* Schatten */
	--d-2xs: 0 1px 0 rgba(0, 0, 0, 0.2);
	--d-xs: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
	--d-sm: 0 2px 4px rgba(0, 0, 0, 0.28);
	--d-md: 0 4px 12px rgba(0, 0, 0, 0.34);
	--d-lg: 0 10px 28px rgba(0, 0, 0, 0.42);
	--d-xl: 0 16px 40px rgba(0, 0, 0, 0.46);
	--d-2xl: 0 22px 52px rgba(0, 0, 0, 0.5);
	--d-3xl: 0 30px 70px rgba(0, 0, 0, 0.55);

	/* Schrift */
	--sd-banner: "Montserrat", "Trebuchet MS", sans-serif;
	--sd-prose: "Montserrat", "Trebuchet MS", sans-serif;
	--sd-display-1: clamp(27px, 3.4vw, 38px);
	--sd-xl-2: clamp(23px, 2.6vw, 30px);
	--sd-h3: 24px;
	--sd-md-2: 20px;
	--sd-h5: 17px;
	--sd-micro-head: 15px;
	--sd-reading: 17px;
	--sd-small: 15px;
	--sd-tiny: 13px;
	--sd-snug: 1.25;
	--sd-even: 1.6;
	--sd-relaxed: 1.8;
	--sd-normal: 400;
	--sd-half: 500;
	--sd-heavy: 600;
	--sd-packed: 0;
	--e-normal: 0;
	--sd-airy: 0.01em;

	/* Breiten */
	--v-main: 1100px;
	--sd-column: 1100px;
	--sd-pad-lg: 32px;
	--sd-padding-tablet: 24px;
	--sd-edge-narrow: 16px;
	--tight-run: 530px;

	/* Linien */
	--sd-hair: 1px;
	--sd-mid: 2px;
	--sd-strong: 3px;

	/* Kopfzeile */
	--sd-height-desktop: 52px;
	--sd-h-sm: 52px;
	--cookie-room: 0px;

	/* Bewegung */
	--sd-snap: 159ms;
	--sd-base: 340ms;
	--sd-long: 556ms;
	--sd-out: cubic-bezier(0.31, 0.74, 0.34, 0.99);
	--sd-take-off: cubic-bezier(0.55, 0.02, 0.75, 0.35);
	--sd-in-out: cubic-bezier(0.36, 0.06, 0.34, 0.88);
	--sd-spring: cubic-bezier(0.45, 1.4, 0.68, 1.05);

	/* Ebenen */
	--lift-head: 60;
	--lift-band: 90;
	--lift-cookie: 95;
}

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

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sd-height-desktop) + var(--sd-md));
}

body {
	margin: 0;
	padding-top: var(--cookie-room);
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-prose);
	font-size: var(--sd-reading);
	font-weight: var(--sd-normal);
	line-height: var(--sd-relaxed);
	letter-spacing: var(--e-normal);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.shell {
	flex: 1 0 auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--sd-banner);
	color: var(--sd-letters);
	line-height: var(--sd-snug);
	overflow-wrap: anywhere;
}

h1 {
	font-size: var(--sd-display-1);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-packed);
}

h2 {
	font-size: var(--sd-xl-2);
	font-weight: var(--sd-heavy);
}

h3 {
	font-size: var(--sd-h3);
	font-weight: var(--sd-heavy);
}

h4 {
	font-family: var(--sd-prose);
	font-size: var(--sd-md-2);
	font-weight: var(--sd-half);
}

h5 {
	font-family: var(--sd-prose);
	font-size: var(--sd-h5);
	font-weight: var(--sd-half);
}

h6 {
	font-family: var(--sd-banner);
	font-size: var(--sd-micro-head);
	font-weight: var(--sd-heavy);
}

p {
	margin: 0 0 var(--sd-sm);
	overflow-wrap: anywhere;
}

ul,
ol {
	margin: 0 0 var(--sd-sm);
	padding-left: var(--sd-md);
}

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

figure {
	margin: 0;
}

a {
	color: var(--sd-focus);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--sd-snap) var(--sd-out);
}

a:hover {
	color: var(--sd-action-down);
}

button {
	font-family: inherit;
	font-size: inherit;
}

section {
	position: relative;
}

/* Sprungmarke — im Ruhezustand weit außerhalb des Bildes */
.skipHop {
	position: absolute;
	left: var(--sd-sm);
	z-index: 120;
	padding: var(--sd-xs) var(--sd-sm);
	background: var(--sd-focus);
	color: var(--sd-field);
	font-size: var(--sd-small);
	font-weight: var(--sd-heavy);
	border-radius: var(--r-sm);
	text-decoration: none;
}

.skipHop:not(:focus) {
	top: -200px !important;
}

.skipHop:focus {
	top: var(--sd-sm);
}

/* Einblenden der Blöcke — Schiebebewegung, Abstand 32px */
[data-step] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity var(--sd-base) var(--sd-out), transform var(--sd-base) var(--sd-out);
}

[data-step].is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Auftritt der ersten Bildschirmseite: Aufsteigen */
.h70-wrap > * {
	animation: riseIn var(--sd-long) var(--sd-out) both;
}

@keyframes riseIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
	[data-step] {
		opacity: 1;
		transform: none;
	}
	.h70-wrap > * {
		animation: none;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Kopfzeile — HEAD-RIGHT: Marke links, Menü nach rechts geschoben
   Höhe 52px · statisch · Haarlinie unten · breite Seitenluft
   ========================================================================= */
.u45 {
	position: relative;
	z-index: var(--lift-head);
	height: 52px;
	background: var(--sd-main);
	border-bottom: var(--sd-hair) solid var(--sd-line);
}

.u45.is-shrunk {
	box-shadow: var(--d-sm);
}

.u45-band {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--sd-lg);
	display: flex;
	align-items: center;
	gap: var(--sd-md);
}

.u45-glyph {
	order: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.u45-plate {
	display: inline-flex;
	align-items: center;
	padding: var(--sd-2xs) var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-letters);
	border-radius: var(--r-sm);
}

.u45-mark {
	display: block;
	height: 40px;
	width: auto;
	flex-shrink: 0;
}

.u45-menu {
	order: 3;
	margin-left: auto;
	min-width: 0;
}

.u45-stack {
	display: flex;
	align-items: center;
	gap: var(--sd-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.u45-node {
	position: relative;
	display: flex;
	align-items: center;
}

.u45-node[hidden] {
	display: none;
}

.u45-cluster {
	position: relative;
}

.u45-href,
.u45-cluster-opener,
.u45-more-opener {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sd-2xs);
	min-height: 44px;
	padding: 0 var(--sd-xs);
	background: var(--sd-main);
	color: var(--sd-letters);
	font-family: var(--sd-prose);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition: background var(--sd-snap) var(--sd-out), color var(--sd-snap) var(--sd-out);
}

/* Tönung unter dem Zeiger */
.u45-href:hover,
.u45-cluster-opener:hover,
.u45-more-opener:hover {
	background: var(--sd-card);
	color: var(--sd-letters);
}

.u45-href:focus-visible,
.u45-cluster-opener:focus-visible,
.u45-more-opener:focus-visible,
.u45-menu-opener:focus-visible,
.u45-flyout-href:focus-visible,
.u45-cluster-href:focus-visible {
	outline: var(--sd-mid) solid var(--sd-focus);
	outline-offset: -2px;
}

/* Aktiver Punkt — Linie oben (activeMark: topline) */
body[data-current="/"] .u45-href[data-nav="/"]::before,
body[data-current="/mobile-app/"] .u45-href[data-nav="/mobile-app/"]::before,
body[data-current="/bonus/"] .u45-href[data-nav="/bonus/"]::before,
body[data-current="/gutschein/"] .u45-href[data-nav="/gutschein/"]::before,
body[data-current="/member-login/"] .u45-href[data-nav="/member-login/"]::before,
body[data-current="/unser-team/"] .u45-href[data-nav="/unser-team/"]::before,
body[data-current="/hilfe/"] .u45-href[data-nav="/hilfe/"]::before {
	content: "";
	position: absolute;
	top: 6px;
	left: var(--sd-xs);
	right: var(--sd-xs);
	height: var(--sd-mid);
	background: var(--sd-focus);
}

body[data-current="/"] .u45-href[data-nav="/"],
body[data-current="/mobile-app/"] .u45-href[data-nav="/mobile-app/"],
body[data-current="/bonus/"] .u45-href[data-nav="/bonus/"],
body[data-current="/gutschein/"] .u45-href[data-nav="/gutschein/"],
body[data-current="/member-login/"] .u45-href[data-nav="/member-login/"],
body[data-current="/unser-team/"] .u45-href[data-nav="/unser-team/"],
body[data-current="/hilfe/"] .u45-href[data-nav="/hilfe/"] {
	color: var(--sd-focus);
	background: var(--sd-main);
}

.u45-chevron {
	width: 7px;
	height: 7px;
	border-right: var(--sd-mid) solid currentColor;
	border-bottom: var(--sd-mid) solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}

/* Aufklappen nur per Klick — Gruppen und «Mehr anzeigen» */
.u45-cluster-stack,
.u45-more-stack {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 2;
	min-width: 190px;
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: var(--sd-xs) 0;
	list-style: none;
	background: var(--sd-card);
	border: var(--sd-hair) solid var(--sd-line);
	border-radius: var(--r-sm);
	box-shadow: var(--d-md);
}

.u45-cluster-stack.is-open,
.u45-more-stack.is-open {
	display: block;
}

.u45-cluster-href,
.u45-more-stack .u45-href {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--sd-sm);
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-tiny);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.u45-cluster-href:hover,
.u45-more-stack .u45-href:hover {
	background: var(--sd-main);
	color: var(--sd-focus);
}

.u45-more[hidden] {
	display: none;
}

/* Menüschalter — Wortmarke statt Streifen (burgerStyle: text) */
.u45-menu-opener {
	order: 2;
	display: none;
	align-items: center;
	min-height: 44px;
	margin-left: auto;
	padding: 0 var(--sd-xs);
	background: var(--sd-main);
	color: var(--sd-letters);
	font-size: var(--sd-tiny);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
}

.u45-menu-opener:hover {
	color: var(--sd-focus);
	background: var(--sd-main);
}

/* Ausfahrbare Leiste — flache Liste aller Punkte */
.u45-flyout {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	max-height: 74vh;
	overflow-y: auto;
	background: var(--sd-main);
	border-bottom: var(--sd-hair) solid var(--sd-line);
	box-shadow: var(--d-lg);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity var(--sd-base) var(--sd-out), transform var(--sd-base) var(--sd-out), visibility var(--sd-base) var(--sd-out);
}

.u45-flyout.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.u45-flyout-stack {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding: var(--sd-xs) var(--sd-lg) var(--sd-md);
	list-style: none;
}

.u45-flyout-href {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--sd-xs);
	background: var(--sd-main);
	color: var(--sd-letters);
	font-size: var(--sd-small);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	text-decoration: none;
}

.u45-flyout-href[aria-current="page"] {
	color: var(--sd-focus);
	background: var(--sd-main);
}

.u45-flyout-href:hover {
	color: var(--sd-focus);
	background: var(--sd-card);
}

/* Kopfzeilen-Knöpfe: leise Kontur + gefüllter Angebotsknopf */
.u45-acts {
	order: 4;
	display: flex;
	align-items: center;
	gap: var(--sd-sm);
	flex-shrink: 0;
}

.u45-quiet-go {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 var(--sd-md);
	background: var(--sd-card);
	color: var(--sd-letters);
	border: var(--sd-hair) solid var(--sd-rule-bold);
	border-radius: 0;
	font-size: var(--sd-tiny);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--sd-snap) var(--sd-out), color var(--sd-snap) var(--sd-out);
}

.u45-quiet-go:hover {
	background: var(--sd-letters);
	color: var(--sd-field);
}

.u45-quiet-go:focus-visible {
	outline: var(--sd-mid) solid var(--sd-focus);
	outline-offset: 2px;
}

.u45-go {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Der Angebotsknopf kommt aus cta-style.mjs (0,1,0) — in der Kopfzeile
   braucht es (0,2,0), sonst gewinnt die zuletzt geschriebene Regel */
.u45-acts .hvoi-act {
	min-height: 44px;
	padding: 0 var(--sd-md);
	font-size: 14px;
	letter-spacing: 1.6px;
}

.u45-acts .u45-quiet-go {
	min-height: 40px;
}

/* =========================================================================
   Fußzeile — FOOT-05: vier Spalten, dichte Information
   erste Zeile: Hinweis 18+ (RG-07)
   ========================================================================= */
.z26 {
	background: var(--sd-main);
	border-top: var(--sd-mid) solid var(--sd-line);
}

.z26-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding: var(--band-y) var(--sd-pad-lg);
}

.z26-rg {
	display: block;
	padding-bottom: var(--sd-md);
	margin-bottom: var(--sd-md);
	border-bottom: var(--sd-hair) solid var(--sd-line);
	color: var(--sd-letters);
	font-size: var(--sd-small);
	line-height: var(--sd-even);
	text-align: center;
}

.z26-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 26px;
	margin-right: var(--sd-xs);
	padding: 0 var(--sd-xs);
	background: var(--sd-caution);
	color: var(--sd-letters);
	font-size: var(--sd-tiny);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	border-radius: var(--r-2xs);
	vertical-align: middle;
}

.z26-warn {
	background: var(--sd-main);
	color: var(--sd-letters);
}

.z26-rg-href {
	margin-left: var(--sd-xs);
	background: var(--sd-main);
	color: var(--sd-focus);
	font-weight: var(--sd-heavy);
	text-decoration: underline;
}

.z26-rg-href:hover {
	background: var(--sd-main);
	color: var(--sd-gradient-light);
}

.z26-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sd-xl);
}

.z26-lane {
	min-width: 0;
}

.z26-lane-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sd-sm);
}

.z26-glyph {
	display: inline-flex;
	align-items: center;
	padding: var(--sd-2xs) var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-letters);
	border-radius: var(--r-sm);
}

.z26-mark {
	display: block;
	height: 44px;
	width: auto;
}

.z26-note {
	margin: 0;
	background: var(--sd-main);
	color: var(--sd-dim);
	font-size: var(--sd-small);
	line-height: var(--sd-even);
}

.z26-go {
	align-self: flex-start;
}

.z26-terms {
	display: block;
	background: var(--sd-main);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
	line-height: var(--sd-even);
}

.z26-hdr {
	margin-bottom: var(--sd-sm);
	background: var(--sd-main);
	color: var(--sd-letters);
	font-size: var(--sd-small);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
}

.z26-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sd-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.z26-href {
	display: inline-block;
	background: var(--sd-main);
	color: var(--sd-dim);
	font-size: var(--sd-small);
	font-weight: var(--sd-normal);
	line-height: 1.4;
	text-decoration: none;
}

.z26-href:hover {
	background: var(--sd-main);
	color: var(--sd-focus);
	text-decoration: underline;
}

.z26-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-sm);
	margin-top: var(--sd-lg);
	padding-top: var(--sd-md);
	border-top: var(--sd-hair) solid var(--sd-line);
	flex-wrap: wrap;
}

.z26-copy {
	background: var(--sd-main);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
}

.z26-top-href {
	background: var(--sd-main);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
	text-decoration: none;
}

.z26-top-href:hover {
	background: var(--sd-main);
	color: var(--sd-focus);
	text-decoration: underline;
}

/* =========================================================================
   Cookie-Hinweis — COOK-12: fährt von oben herein, liegt über der Kopfzeile
   ========================================================================= */
.z61 {
	display: none;
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--lift-cookie);
	background: var(--sd-card);
	border-bottom: var(--sd-hair) solid var(--sd-rule-bold);
}

.z61.is-open {
	display: block;
}

.z61-box {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding: var(--sd-sm) var(--sd-pad-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-md);
	animation: noteFade var(--sd-long) var(--sd-out) both;
}

@keyframes noteFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.z61-copy {
	margin: 0;
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-tiny);
	line-height: var(--sd-even);
}

.z61-acts {
	display: flex;
	align-items: center;
	gap: var(--sd-xs);
	flex-shrink: 0;
}

.z61-approve,
.z61-later {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 var(--sd-md);
	font-size: var(--sd-tiny);
	font-weight: var(--sd-heavy);
	white-space: nowrap;
	border: 0;
	border-radius: var(--r-2xs);
	cursor: pointer;
}

.z61-approve {
	background: var(--sd-focus);
	color: var(--sd-field);
}

.z61-approve:hover {
	background: var(--sd-action-down);
	color: var(--sd-field);
}

.z61-later {
	background: var(--sd-line);
	color: var(--sd-letters);
}

.z61-later:hover {
	background: var(--sd-rule-bold);
	color: var(--sd-letters);
}

/* =========================================================================
   Erster Bildschirm — HERO-12: langer Lesetext oben, Bild als Abschluss
   ========================================================================= */
.h70 {
	padding-block: 0;
}

.h70-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding: var(--sd-xl) var(--sd-pad-lg) var(--sd-lg);
	text-align: center;
}

.h70-eyebrow {
	display: inline-block;
	margin-bottom: var(--sd-sm);
	background: var(--sd-field);
	color: var(--sd-focus);
	font-size: var(--sd-small);
	font-style: italic;
	letter-spacing: var(--sd-airy);
}

.h70 h1 {
	margin-bottom: var(--sd-md);
}

.h70-lead {
	max-width: var(--tight-run);
	margin: 0 auto var(--sd-md);
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-h5);
	font-style: italic;
	line-height: var(--sd-even);
}

.h70-facts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-xs);
	flex-wrap: wrap;
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
}

.h70-dot {
	color: var(--sd-focus);
	background: var(--sd-field);
}

.h70-frame {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding: 0 var(--sd-pad-lg) var(--band-y);
}

.h70-shot {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--r-lg);
}

.h70-cap {
	padding-top: var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
	font-style: italic;
	text-align: center;
}

/* =========================================================================
   Seitenkopf — PHEAD-07: große Ziffer links, Titel rechts
   ========================================================================= */
.f56 {
	padding-block: var(--band-y);
}

.f56-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--sd-lg);
	align-items: start;
}

.f56-num {
	align-self: start;
	background: var(--sd-field);
	color: var(--sd-focus);
	font-family: var(--sd-banner);
	font-size: calc(var(--sd-display-1) * 1.4);
	font-weight: var(--sd-heavy);
	line-height: var(--sd-snug);
	letter-spacing: var(--sd-packed);
}

.f56-main {
	min-width: 0;
}

.f56-lead {
	margin: var(--sd-sm) 0 0;
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-h5);
	line-height: var(--sd-even);
}

/* =========================================================================
   Textblock — PROSE-27: große Ziffer als Hintergrund, Ecke oben links
   ========================================================================= */
.u54 {
	padding-block: var(--band-y);
}

.u54-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
	counter-reset: u54seq;
}

.u54-unit {
	position: relative;
	counter-increment: u54seq;
	padding-top: calc(var(--sd-xl) + var(--sd-sm));
	margin-bottom: var(--sd-lg);
}

/* die Ziffer selbst — hinter dem Text, ohne Klickfang */
.u54-num {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	color: var(--sd-letters);
	opacity: 0.09;
	font-family: var(--sd-banner);
	font-size: 4em;
	font-weight: var(--sd-heavy);
	line-height: 1;
	letter-spacing: var(--sd-packed);
}

.u54-num::before {
	content: counter(u54seq) ".";
}

.u54-head {
	position: relative;
	margin-bottom: var(--sd-sm);
}

.u54-sub {
	margin: var(--sd-md) 0 var(--sd-xs);
	color: var(--sd-letters);
}

.u54-line {
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-reading);
	line-height: var(--sd-relaxed);
}

.u54-href {
	background: var(--sd-field);
	color: var(--sd-focus);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.u54-href:hover {
	background: var(--sd-field);
	color: var(--sd-action-down);
	text-decoration-thickness: 2px;
}

.u54-steps,
.u54-bullets {
	margin: 0 0 var(--sd-sm);
	padding-left: var(--sd-md);
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

.u54-steps li,
.u54-bullets li {
	margin-bottom: var(--sd-xs);
}

.u54-steps li::marker,
.u54-bullets li::marker {
	color: var(--sd-focus);
}

.u54-frame {
	margin: var(--sd-md) 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.u54-shot {
	display: block;
	width: 100%;
	max-height: 56vh;
	object-fit: cover;
	transition: transform var(--sd-base) var(--sd-out);
}

.u54-frame:hover .u54-shot {
	transform: scale(1.02);
}

.u54-frameTall .u54-shot {
	max-height: 52vh;
}

/* wiederholter Angebotsknopf mitten im langen Text */
.u54-prompt {
	display: flex;
	align-items: center;
	gap: var(--sd-md);
	flex-wrap: wrap;
	margin: var(--sd-lg) 0;
	padding: var(--sd-md);
	background: var(--sd-card);
	border-left: 5px solid var(--sd-focus);
	border-radius: var(--r-sm);
}

.u54-go {
	flex-shrink: 0;
}

.u54-terms {
	flex: 1 1 260px;
	background: var(--sd-card);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
	line-height: var(--sd-even);
}

/* =========================================================================
   Kartenreihe — GRID-02: nummerierter Streifen, eine Spalte
   ========================================================================= */
.n22 {
	padding-block: var(--band-y);
}

.n22-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.n22-hdr {
	margin-bottom: var(--sd-md);
}

.n22-stack {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.n22-unit {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: var(--sd-md);
	padding-block: var(--sd-md);
	border-bottom: var(--sd-hair) solid var(--sd-line);
}

.n22-unit:last-child {
	border-bottom: 0;
}

.n22-num {
	align-self: start;
	background: var(--sd-field);
	color: var(--sd-focus);
	font-family: var(--sd-banner);
	font-size: var(--sd-display-1);
	font-weight: var(--sd-heavy);
	line-height: var(--sd-snug);
	letter-spacing: var(--sd-packed);
	transition: transform var(--sd-base) var(--sd-out);
}

.n22-unit:hover .n22-num {
	transform: scale(1.1);
}

.n22-main {
	min-width: 0;
}

.n22-head {
	display: flex;
	align-items: center;
	gap: var(--sd-xs);
	margin-bottom: var(--sd-xs);
}

.n22-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	fill: currentColor;
	color: var(--sd-gradient-light);
}

.n22-line {
	margin: 0;
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

.n22-href {
	background: var(--sd-field);
	color: var(--sd-focus);
}

/* =========================================================================
   Tabelle — TABLE-02: ohne Rahmen, redaktionell
   ========================================================================= */
.o39 {
	padding-block: var(--band-y);
}

.o39-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.o39-scroll {
	overflow-x: auto;
}

.o39-grid {
	width: 100%;
	border-collapse: collapse;
	background: var(--sd-field);
	color: var(--sd-letters);
}

.o39-grid th {
	padding-block: var(--sd-sm);
	padding-inline: var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-banner);
	font-size: var(--sd-small);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	text-align: left;
	border-bottom: var(--sd-mid) solid var(--sd-focus);
}

.o39-grid tbody th {
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-prose);
	font-size: var(--sd-reading);
	font-weight: var(--sd-half);
	text-transform: none;
	letter-spacing: var(--e-normal);
	border-bottom: var(--sd-hair) solid var(--sd-line);
}

.o39-grid td {
	padding-block: var(--sd-sm);
	padding-inline: var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-reading);
	border-bottom: var(--sd-hair) solid var(--sd-line);
}

.o39-grid tbody tr:last-child th,
.o39-grid tbody tr:last-child td {
	border-bottom: 0;
}

/* =========================================================================
   Stimmen — REV-10: leise Liste, nur feine Trennlinien
   ========================================================================= */
.q94 {
	padding-block: var(--band-y);
}

.q94-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.q94-hdr {
	margin-bottom: var(--sd-md);
}

.q94-stack {
	display: block;
}

.q94-unit {
	margin: 0;
	padding-block: var(--sd-md);
	border-bottom: var(--sd-hair) dotted var(--sd-rule-bold);
}

.q94-unit:last-child {
	border-bottom: 0;
}

.q94-credit {
	display: flex;
	align-items: baseline;
	gap: var(--sd-xs);
	flex-wrap: wrap;
}

.q94-byname {
	background: var(--sd-field);
	color: var(--sd-letters);
	font-size: var(--sd-reading);
	font-weight: var(--sd-half);
	font-style: normal;
}

.q94-score {
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-small);
}

.q94-line {
	margin: var(--sd-2xs) 0 0;
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

/* =========================================================================
   Fragen — FAQ-01: klassisches Aufklappen, sofort (accordion: instant)
   ========================================================================= */
.x82 {
	padding-block: var(--band-y);
}

.x82-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.x82-hdr {
	margin-bottom: var(--sd-md);
}

.x82-stack {
	margin: 0;
}

.x82-unit {
	padding-block: var(--sd-sm);
	border-bottom: var(--sd-hair) solid var(--sd-line);
}

.x82-ask {
	margin: 0;
	font-size: var(--sd-h5);
}

.x82-opener {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-sm);
	width: 100%;
	min-height: 44px;
	padding: 0;
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-prose);
	font-size: var(--sd-h5);
	font-weight: var(--sd-heavy);
	line-height: var(--sd-even);
	text-align: left;
	border: 0;
	cursor: pointer;
}

.x82-opener:hover {
	background: var(--sd-field);
	color: var(--sd-focus);
}

.x82-opener:focus-visible {
	outline: var(--sd-mid) solid var(--sd-focus);
	outline-offset: 3px;
}

.x82-line {
	flex: 1 1 auto;
}

.x82-sign {
	position: relative;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform var(--sd-snap) var(--sd-out);
}

.x82-sign::before,
.x82-sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: var(--sd-mid);
	background: var(--sd-focus);
	transform: translate(-50%, -50%);
}

.x82-sign::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.x82-opener[aria-expanded="true"] .x82-sign {
	transform: rotate(45deg);
}

.x82-answer {
	padding-top: var(--sd-xs);
	background: var(--sd-field);
	color: var(--sd-dim);
	margin-inline-start: 0;
}

.x82-answer p {
	margin: 0;
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

/* =========================================================================
   Aufruf — CTA-06: klebendes Band am unteren Rand
   ========================================================================= */
.t14 {
	position: sticky;
	bottom: 0;
	z-index: var(--lift-band);
	background: var(--sd-focus);
	box-shadow: var(--d-lg);
}

.t14.is-gone {
	display: none;
}

.t14-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	min-height: 80px;
	margin-inline: auto;
	padding: var(--sd-xs) var(--sd-pad-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-md);
}

.t14-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.t14-head {
	background: var(--sd-focus);
	color: var(--sd-field);
	font-family: var(--sd-banner);
	font-size: var(--sd-reading);
	font-weight: var(--sd-heavy);
	line-height: var(--sd-even);
}

.t14-terms {
	background: var(--sd-focus);
	color: var(--sd-main);
	font-size: var(--sd-tiny);
	line-height: var(--sd-even);
}

.t14-go {
	flex-shrink: 0;
}

.t14-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: var(--sd-field);
	color: var(--sd-letters);
	font-size: var(--sd-md-2);
	line-height: 1;
	border: 0;
	border-radius: var(--r-2xs);
	cursor: pointer;
}

.t14-close:hover {
	background: var(--sd-main);
	color: var(--sd-focus);
}

/* =========================================================================
   Zwischenruf — INLINE-CTA-02: zentrierte Karte
   ========================================================================= */
.t70 {
	display: block;
	padding-block: var(--sd-md);
}

.t70-box {
	max-width: var(--tight-run);
	margin-inline: auto;
	padding: var(--sd-md);
	background: var(--sd-card);
	border: var(--sd-hair) solid var(--sd-line);
	border-radius: var(--r-md);
	text-align: center;
}

.t70-head {
	margin-bottom: var(--sd-xs);
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-md-2);
}

.t70-line {
	margin-bottom: var(--sd-sm);
	background: var(--sd-card);
	color: var(--sd-dim);
	font-size: var(--sd-small);
	line-height: var(--sd-even);
}

.t70-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--sd-lg);
	background: var(--sd-focus);
	color: var(--sd-field);
	font-size: var(--sd-small);
	font-weight: var(--sd-heavy);
	letter-spacing: var(--sd-airy);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--r-sm);
}

.t70-go:hover {
	background: var(--sd-action-down);
	color: var(--sd-field);
}

.t70-go:focus-visible {
	outline: var(--sd-mid) solid var(--sd-gradient-light);
	outline-offset: 3px;
}

/* =========================================================================
   Signatur — BYLINE-04: Zitat mit Redaktionsangabe
   ========================================================================= */
.f93 {
	display: block;
	padding-block: var(--sd-xl);
	background: var(--sd-field);
}

.f93-copy {
	max-width: var(--tight-run);
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
	text-align: center;
}

.f93-line {
	margin-bottom: var(--sd-sm);
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-banner);
	font-size: var(--sd-md-2);
	font-style: italic;
	line-height: var(--sd-even);
}

.f93-credit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-xs);
	flex-wrap: wrap;
}

.f93-face {
	width: 32px;
	height: 32px;
	border-radius: var(--sd-circle);
	object-fit: cover;
}

.f93-byname {
	background: var(--sd-field);
	color: var(--sd-letters);
	font-style: normal;
	font-weight: var(--sd-heavy);
}

.f93-href {
	background: var(--sd-field);
	color: var(--sd-focus);
	text-decoration: none;
}

.f93-href:hover {
	background: var(--sd-field);
	color: var(--sd-action-down);
	text-decoration: underline;
}

.f93-post {
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-small);
	font-style: italic;
}

/* =========================================================================
   Redaktionskarte — AUTH-08: Bild, Name, Rolle
   ========================================================================= */
.b47 {
	padding-block: var(--band-y);
}

.b47-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.b47-box {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-sm);
}

.b47-face {
	width: 96px;
	height: 96px;
	border-radius: var(--sd-circle);
	object-fit: cover;
	flex-shrink: 0;
}

.b47-main {
	display: flex;
	flex-direction: column;
}

.b47-byname {
	background: var(--sd-field);
	color: var(--sd-letters);
	font-size: var(--sd-reading);
	font-weight: var(--sd-heavy);
}

.b47-post {
	background: var(--sd-field);
	color: var(--sd-dim);
	font-size: var(--sd-tiny);
}

.b47-bio {
	margin-top: var(--sd-md);
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

.b47-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-xs);
	margin: 0 0 var(--sd-md);
	padding: 0;
	list-style: none;
}

.b47-skills li {
	padding: var(--sd-2xs) var(--sd-sm);
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-tiny);
	border-radius: var(--r-sm);
}

.b47-articles {
	display: block;
	padding-block: var(--sd-lg);
	border-top: var(--sd-hair) solid var(--sd-line);
}

.b47-articles-hdr {
	margin-bottom: var(--sd-sm);
	font-size: var(--sd-md-2);
}

.b47-articles-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sd-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.b47-articles-unit {
	background: var(--sd-field);
	color: var(--sd-dim);
	line-height: var(--sd-even);
}

/* =========================================================================
   Rechtstexte — LEGAL-04: alles in einem umrandeten Kasten
   ========================================================================= */
.m07 {
	padding-block: var(--band-y);
}

.m07-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.m07-box {
	position: relative;
	padding: var(--sd-lg);
	background: var(--sd-card);
	border: var(--sd-hair) solid var(--sd-rule-bold);
	border-radius: var(--r-lg);
	box-shadow: var(--d-sm);
}

.m07-lead {
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-h5);
	line-height: var(--sd-even);
}

.m07-unit {
	margin-top: var(--sd-lg);
}

.m07-head {
	margin-bottom: var(--sd-xs);
	font-size: var(--sd-md-2);
}

.m07-line {
	background: var(--sd-card);
	color: var(--sd-dim);
	line-height: var(--sd-relaxed);
}

.m07-href {
	background: var(--sd-card);
	color: var(--sd-focus);
}

.m07-stack {
	margin: 0;
	padding: 0;
	list-style: none;
}

.m07-strip {
	display: flex;
	align-items: flex-start;
	gap: var(--sd-xs);
	margin-bottom: var(--sd-xs);
	background: var(--sd-card);
	color: var(--sd-dim);
	line-height: var(--sd-even);
}

.m07-icon {
	width: 20px;
	height: 20px;
	margin-top: var(--sd-2xs);
	flex-shrink: 0;
	fill: currentColor;
	color: var(--sd-focus);
}

.m07-note {
	margin: var(--sd-lg) 0 0;
	padding-top: var(--sd-sm);
	border-top: var(--sd-hair) solid var(--sd-line);
	background: var(--sd-card);
	color: var(--sd-dim);
	font-size: var(--sd-small);
	line-height: var(--sd-even);
}

/* =========================================================================
   Kontaktformular — FORM-08: breiter Absendeknopf
   ========================================================================= */
.t92 {
	padding-block: var(--band-y);
}

.t92-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.t92-box {
	padding: var(--sd-lg);
	background: var(--sd-card);
	border-radius: var(--r-md);
}

.t92-lead {
	margin-bottom: var(--sd-md);
	background: var(--sd-card);
	color: var(--sd-dim);
	line-height: var(--sd-even);
}

.t92-form {
	display: block;
}

.t92-entry {
	display: flex;
	flex-direction: column;
	gap: var(--sd-2xs);
	margin-bottom: var(--sd-sm);
}

.t92-cap {
	background: var(--sd-card);
	color: var(--sd-letters);
	font-size: var(--sd-small);
	font-weight: var(--sd-half);
}

.t92-input {
	width: 100%;
	min-height: 46px;
	padding: var(--sd-xs) var(--sd-sm);
	background: var(--sd-field);
	color: var(--sd-letters);
	font-family: var(--sd-prose);
	font-size: var(--sd-reading);
	border: var(--sd-hair) solid var(--sd-rule-bold);
	border-radius: var(--r-sm);
}

.t92-input:focus-visible {
	outline: var(--sd-mid) solid var(--sd-focus);
	outline-offset: 1px;
}

.t92-area {
	min-height: 150px;
	line-height: var(--sd-even);
	resize: vertical;
}

.t92-go {
	width: 100%;
	min-height: 72px;
	margin-top: var(--sd-sm);
	background: var(--sd-focus);
	color: var(--sd-field);
	font-family: var(--sd-banner);
	font-size: var(--sd-md-2);
	font-weight: var(--sd-heavy);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background var(--sd-snap) var(--sd-out);
}

.t92-go:hover {
	background: var(--sd-action-down);
	color: var(--sd-field);
}

.t92-done {
	margin-top: var(--sd-sm);
	padding: var(--sd-sm);
	background: var(--sd-field);
	color: var(--sd-focus);
	border-left: 5px solid var(--sd-focus);
	font-size: var(--sd-small);
}

.t92-mails {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-sm);
	margin-top: var(--sd-md);
}

.t92-href {
	background: var(--sd-card);
	color: var(--sd-focus);
	font-size: var(--sd-small);
	text-decoration: none;
}

.t92-href:hover {
	background: var(--sd-card);
	color: var(--sd-action-down);
	text-decoration: underline;
}

/* =========================================================================
   Fehlerseite — ERR-06: umrandete Karte
   ========================================================================= */
.e11 {
	padding-block: var(--sd-xl);
}

.e11-wrap {
	max-width: calc(var(--v-main) + 2 * var(--sd-pad-lg));
	margin-inline: auto;
	padding-inline: var(--sd-pad-lg);
}

.e11-box {
	max-width: var(--tight-run);
	margin-inline: auto;
	padding: var(--sd-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sd-sm);
	background: var(--sd-card);
	border: var(--sd-mid) solid var(--sd-focus);
	border-radius: var(--r-lg);
	box-shadow: var(--d-md);
	text-align: center;
}

.e11-line {
	margin: 0;
	background: var(--sd-card);
	color: var(--sd-dim);
	line-height: var(--sd-even);
}

.e11-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 var(--sd-lg);
	background: var(--sd-focus);
	color: var(--sd-field);
	font-size: var(--sd-small);
	font-weight: var(--sd-heavy);
	text-decoration: none;
	border-radius: var(--r-sm);
}

.e11-go:hover {
	background: var(--sd-action-down);
	color: var(--sd-field);
}

/* Unterstreichung von der Mitte aus — Textlinks im Fließtext */
.u54-line a,
.m07-line a {
	position: relative;
	text-decoration: none;
}

.u54-line a::after,
.m07-line a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform var(--sd-snap) var(--sd-out);
}

.u54-line a:hover::after,
.m07-line a:hover::after {
	transform: scaleX(1);
}

/* =========================================================================
   Schmale Schirme — Umschaltpunkte: 1040 · 900 · 720 · 460
   ========================================================================= */
@media (max-width: 1040px) {
	.z26-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sd-lg);
	}

	.u45-band {
		padding-inline: var(--sd-md);
	}

	.u45-stack {
		gap: var(--sd-sm);
	}

	.u45-acts .u45-quiet-go {
		display: none;
	}
}

@media (max-width: 900px) {
	.u45-menu {
		display: none;
	}

	.u45-menu-opener {
		display: inline-flex;
	}

	.u45-mark {
		height: 34px;
	}

	.f56-wrap {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--sd-md);
	}

	.f56-num {
		font-size: calc(var(--sd-display-1) * 1.1);
	}
}

@media (max-width: 720px) {
	:root {
		--sd-display-1: clamp(24px, 6.4vw, 28px);
		--sd-xl-2: 24px;
		--sd-h3: 20px;
		--sd-md-2: 18px;
		--sd-h5: 16px;
		--sd-micro-head: 14px;
		--sd-reading: 16px;
		--sd-small: 14px;
		--sd-tiny: 12px;
		--sd-pad-lg: 16px;
		--band-y: 34px;
	}

	.u45-band {
		padding-inline: var(--sd-edge-narrow);
		gap: var(--sd-xs);
	}

	.u45-flyout-stack {
		padding-inline: var(--sd-edge-narrow);
	}

	.h70-wrap {
		padding: var(--sd-lg) var(--sd-edge-narrow) var(--sd-md);
	}

	.h70-frame {
		padding-inline: var(--sd-edge-narrow);
	}

	.h70-shot {
		aspect-ratio: 3 / 2;
	}

	.f56-wrap,
	.u54-wrap,
	.n22-wrap,
	.o39-wrap,
	.q94-wrap,
	.x82-wrap,
	.b47-wrap,
	.m07-wrap,
	.t92-wrap,
	.e11-wrap,
	.z26-wrap,
	.t14-wrap {
		padding-inline: var(--sd-edge-narrow);
	}

	.f56-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sd-xs);
	}

	.u54-unit {
		padding-top: var(--sd-lg);
	}

	.u54-num {
		font-size: 2.2em;
	}

	.n22-unit {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: var(--sd-sm);
	}

	.z26-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sd-md);
	}

	.z61-box {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sd-xs);
		padding: var(--sd-sm) var(--sd-edge-narrow);
		font-size: var(--sd-tiny);
		line-height: 1.35;
	}

	.z61-copy {
		font-size: var(--sd-tiny);
		line-height: 1.35;
	}

	.z61-acts {
		gap: var(--sd-xs);
	}

	.z61-approve,
	.z61-later {
		flex: 1 1 auto;
		min-height: 38px;
		padding: 0 var(--sd-sm);
		font-size: 12px;
	}

	.t14-wrap {
		min-height: 64px;
		gap: var(--sd-xs);
		padding: var(--sd-xs) var(--sd-edge-narrow);
		flex-wrap: wrap;
	}

	.t14-terms {
		display: none;
	}

	.m07-box,
	.t92-box,
	.e11-box {
		padding: var(--sd-md);
	}

	.b47-box {
		gap: var(--sd-xs);
	}

	.b47-face {
		width: 72px;
		height: 72px;
	}

	.u54-shot {
		max-height: 46vh;
	}
}

/* Auf sehr schmalen Schirmen rutscht der Angebotsknopf in eine zweite Kopfzeile */
@media (max-width: 580px) {
	.u45 {
		height: auto;
		min-height: 64px;
	}

	.u45-band {
		height: auto;
		flex-wrap: wrap;
		padding-block: var(--sd-xs);
		row-gap: var(--sd-xs);
	}

	.u45-acts {
		order: 5;
		flex-basis: 100%;
	}

	.u45-acts .hvoi-act {
		width: 100%;
		min-height: 46px;
		padding: 0 var(--sd-sm);
		font-size: 13px;
		letter-spacing: 1px;
	}
}

@media (max-width: 460px) {
	.u45-acts {
		gap: var(--sd-xs);
	}

	.h70-facts {
		flex-direction: column;
		gap: var(--sd-2xs);
		font-size: 11px;
	}

	/* der Trennpunkt hängt sonst am Zeilenende */
	.h70-dot {
		display: none;
	}

	.n22-unit {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.n22-num {
		font-size: var(--sd-xl-2);
	}

	.t14-main {
		flex: 1 1 100%;
	}
}
/* Offer CTA */
.hvoi-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 32px;border:2px solid #0F0B1A;border-radius:2px;
  background:#0284C7;color:#0F0B1A;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.hvoi-act:hover{background:#0369A1;color:#FFFFFF;animation:none}
.hvoi-act:hover::after{animation:none}
.hvoi-act:active{background:#075985;color:#FFFFFF}
.hvoi-act:focus-visible{outline:3px solid #0F0B1A;outline-offset:3px}
.hvoi-act{animation:lift_hvoi 2.55s ease-in-out infinite}
@keyframes lift_hvoi{0%{transform:translateY(0)}15.686%{transform:translateY(-5px)}37.255%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hvoi-act,.hvoi-act::after{animation:none!important;transition:none!important}}

@media (max-width: 494px) {
  .u45-menu,
  .u45-stack,
  .u45-href,
  .u45-quiet-go { display: none !important; }
  .u45-more-opener { display: flex !important; }
}