/* =========================================================================
   Bizzo Casino AT — Stylesheet
   Aufbau: Tokens → Schriften → Reset → Zugänglichkeit → Bewegung → Bausteine
   Reihenfolge der Regeln: nach Komponente (css_rule_order = by-component)
   ========================================================================= */

/* --- Design-Tokens ------------------------------------------------------ */
:root {
	/* Farben */
	--core: #fbce12;
	--focus: #fbbe00;
	--key-active: #ce9400;
	--back: #281231;
	--layer: #3b2942;
	--glyph: #ffffff;
	--muted: #bdbdbd;
	--hairline: #4a3654;
	--edge-hard: #6b5175;
	--ramp-start: #22102b;
	--grad-2: #3b2942;
	--notice: #c1272d;
	--ink: #1d0b25;

	/* Abstände (SPACE-09 Twin Mode) */
	--s-hair: 2px;
	--s-tiny: 6px;
	--s-snug: 10px;
	--s-base: 16px;
	--s-wide: 48px;
	--s-roomy: 80px;
	--s-vast: 128px;
	--s-huge: 200px;
	--sec-y: 44px;

	/* Geometrie (GEO-06 Mixed Asymmetric) */
	--r-hair: 0;
	--r-tiny: 0;
	--r-snug: 4px;
	--r-base: 12px;
	--r-wide: 24px;
	--r-roomy: 28px;
	--r-vast: 32px;
	--r-huge: 40px;
	--stadium: 9999px;
	--circle: 50%;
	--slim: 1px;
	--medium: 2px;
	--wide: 4px;
	--d-hair: 0 1px 0 rgba(0, 0, 0, 0.10);
	--d-tiny: 0 1px 3px rgba(0, 0, 0, 0.18);
	--d-snug: 0 2px 8px rgba(0, 0, 0, 0.22);
	--d-base: 0 6px 16px rgba(0, 0, 0, 0.28);
	--d-wide: 0 12px 32px rgba(0, 0, 0, 0.34);
	--d-roomy: 0 16px 40px rgba(0, 0, 0, 0.38);
	--d-vast: 0 22px 52px rgba(0, 0, 0, 0.42);
	--d-huge: 0 28px 64px rgba(0, 0, 0, 0.46);

	/* Schrift (TYPO-04 Refined Calm) */
	--banner: 'Poppins', 'Arial', sans-serif;
	--text: 'Poppins', 'Arial', sans-serif;
	--h1: 38px;
	--h2: 30px;
	--lg-2: 24px;
	--h4: 20px;
	--sm-2: 17px;
	--h6: 15px;
	--body: 17px;
	--caption: 15px;
	--tiny: 13px;
	--compact: 1.25;
	--regular: 1.6;
	--roomy: 1.8;
	--base: 400;
	--demi: 500;
	--bold: 600;
	--close: 0;
	--e-regular: 0;
	--spread: 0.01em;

	/* Container (CONT-07 Dual-Lane) */
	--full: 1200px;
	--readable: 1200px;
	--brief: 560px;
	--inset-desktop: 48px;
	--padding-tablet: 24px;
	--padding-mobile: 16px;

	/* Kopfzeile */
	--tall: 42px;
	--size-mobile: 40px;
	--rg-height: 34px;
	--h-pad: 0px;

	/* Bewegung (Zahlen aus der Spezifikation, nicht runden) */
	--short: 131ms;
	--t-base: 230ms;
	--long: 377ms;
	--release: cubic-bezier(0.28, 0.55, 0.27, 1);
	--in: cubic-bezier(0.6, 0.05, 0.57, 0.97);
	--swing: cubic-bezier(0.6, 0.05, 0.57, 0.97);
	--bounce: cubic-bezier(0.2, 0.95, 0.5, 1.35);
}

/* --- Schriften (selbst gehostet) ---------------------------------------- */
@font-face {
	font-family: 'Poppins';
	src: url('/kerne/pp-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('/kerne/pp-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('/kerne/pp-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('/kerne/pp-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

html,
body {
	overflow-x: clip;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body.sheet {
	margin: 0;
	background: var(--back);
	color: var(--glyph);
	font-family: var(--text);
	font-size: var(--body);
	font-weight: var(--base);
	line-height: var(--roomy);
	letter-spacing: var(--e-regular);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1,
h2,
h3 {
	font-family: var(--banner);
	font-weight: var(--bold);
	line-height: var(--compact);
	letter-spacing: var(--e-regular);
	color: var(--glyph);
}

h1 {
	font-size: clamp(27px, 3.4vw, var(--h1));
}

h2 {
	font-size: clamp(23px, 2.7vw, var(--h2));
}

h3 {
	font-size: clamp(19px, 2vw, var(--lg-2));
}

h4,
h5,
h6 {
	font-family: var(--text);
	font-weight: var(--demi);
}

p {
	margin: 0;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

ul,
ol,
dl,
dd {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

table {
	border-collapse: collapse;
}

a {
	color: var(--focus);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--short) var(--release), background-color var(--short) var(--release);
}

a:hover {
	color: var(--key-active);
	background-color: rgba(251, 190, 0, 0.12);
}

.ln {
	color: var(--focus);
	background-color: transparent;
	font-weight: var(--demi);
}

.ln:hover {
	color: var(--ink);
	background-color: var(--focus);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* --- Zugänglichkeit ----------------------------------------------------- */
.skip-hop {
	position: absolute;
	left: var(--s-base);
	z-index: 200;
	padding: var(--s-snug) var(--s-base);
	background: var(--focus);
	color: var(--ink);
	border-radius: var(--r-snug);
	font-weight: var(--bold);
	text-decoration: none;
}

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

.skip-hop:focus {
	top: var(--s-base);
}

:focus-visible {
	outline: var(--medium) solid var(--focus);
	outline-offset: 3px;
}

.hush {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

[hidden] {
	display: none !important;
}

/* --- Bewegung: Einblenden per Beobachter (slide, 24px, 0.15) ------------ */
[data-visible] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--t-base) var(--release), transform var(--t-base) var(--release);
}

[data-visible].is-shown {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}

	[data-visible] {
		opacity: 1;
		transform: none;
	}
}

/* --- Plakette 18+ (RG-01: Streifen über der Kopfzeile) ------------------ */
.r18 {
	display: block;
	text-align: center;
	background: var(--notice);
	color: #ffffff;
	font-size: var(--tiny);
	line-height: var(--regular);
	padding: var(--s-tiny) var(--s-base);
	margin: 0;
}

.r18-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 0 var(--s-tiny);
	border: var(--slim) solid #ffffff;
	border-radius: var(--stadium);
	background: var(--notice);
	color: #ffffff;
	font-weight: var(--bold);
}

.r18-anchor {
	color: #ffffff;
	background-color: var(--notice);
	text-decoration: underline;
	font-weight: var(--demi);
}

.r18-anchor:hover {
	color: var(--notice);
	background-color: #ffffff;
}

/* --- Kopfzeile: HEAD-BANNER (Logo-Banner, Menü als Zeile darunter) ------ */
.a37 {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ramp-start);
	box-shadow: var(--d-base);
	transition: box-shadow var(--t-base) var(--release);
}

.a37-crown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-base);
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--s-snug) var(--s-base);
	transition: padding var(--t-base) var(--release);
}

.a37-badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	background-color: transparent;
	color: var(--glyph);
	text-decoration: none;
}

.a37-badge:hover {
	background-color: transparent;
	color: var(--focus);
}

.a37-art {
	display: block;
	height: 76px;
	width: auto;
	flex-shrink: 0;
	transition: height var(--t-base) var(--release);
}

.a37.is-shrunk .a37-crown {
	padding-block: var(--s-tiny);
}

.a37.is-shrunk .a37-art {
	height: 54px;
}

.a37-mark {
	position: absolute;
	inset-inline-start: var(--s-base);
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 0 var(--s-snug);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-snug);
	background: var(--layer);
	color: var(--glyph);
	font-size: var(--tiny);
	font-weight: var(--demi);
	letter-spacing: var(--spread);
}

.a37-menu-opener {
	position: absolute;
	inset-inline-end: var(--s-base);
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
	padding: 0;
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-snug);
	background: var(--layer);
	color: var(--glyph);
	cursor: pointer;
}

.a37-menu-opener:hover {
	background: var(--hairline);
	color: var(--glyph);
}

.a37-lines,
.a37-lines::before,
.a37-lines::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--glyph);
	border-radius: var(--stadium);
}

.a37-lines {
	position: relative;
}

.a37-lines::before,
.a37-lines::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
}

.a37-lines::before {
	top: -6px;
}

.a37-lines::after {
	top: 6px;
}

/* Menüzeile: Höhe kommt aus der Spezifikation (42px) */
.a37-bar {
	height: 42px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	border-top: var(--slim) solid var(--hairline);
	background: var(--back);
}

.a37-index {
	display: flex;
	align-items: stretch;
	max-width: 1440px;
	width: 100%;
	padding-inline: var(--s-base);
	background-color: transparent;
}

.a37-index > ul {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--s-snug);
	width: 100%;
	margin: 0;
}

.a37-node {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
}

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

.a37-node + .a37-node::before {
	content: '';
	align-self: center;
	width: 1px;
	height: 14px;
	margin-inline-end: var(--s-snug);
	background: var(--hairline);
}

.a37-anchor {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--s-tiny);
	border-top: var(--medium) solid transparent;
	background-color: transparent;
	color: var(--glyph);
	font-size: 13px;
	font-weight: 500;
	line-height: var(--compact);
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.a37-anchor:hover {
	background-color: transparent;
	color: var(--focus);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.a37-anchor[aria-current='page'] {
	border-top-color: var(--focus);
	color: var(--focus);
}

.a37-nodeMore {
	position: relative;
}

.a37-more-opener {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--s-tiny);
	border: 0;
	border-top: var(--medium) solid transparent;
	background: transparent;
	color: var(--glyph);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.a37-more-opener:hover {
	color: var(--focus);
}

.a37-more-opener::after {
	content: '';
	width: 6px;
	height: 6px;
	margin-inline-start: var(--s-tiny);
	border-right: var(--medium) solid currentColor;
	border-bottom: var(--medium) solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.a37-more-menu {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	z-index: 30;
	min-width: 200px;
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--s-tiny);
	border: var(--slim) solid var(--hairline);
	border-radius: var(--r-snug);
	background: var(--layer);
	box-shadow: var(--d-wide);
}

.a37-more-menu.is-open {
	display: block;
}

.a37-more-menu .a37-node {
	display: block;
}

.a37-more-menu .a37-node::before {
	content: none;
}

.a37-more-menu .a37-anchor {
	display: block;
	width: 100%;
	padding: var(--s-snug);
	border-top: 0;
	background-color: var(--layer);
	color: var(--glyph);
	white-space: normal;
}

.a37-more-menu .a37-anchor:hover {
	background-color: var(--hairline);
	color: var(--focus);
}

/* Mobile Schublade — immer flache Liste aller Punkte */
.a37-panel {
	display: none;
	border-top: var(--slim) solid var(--hairline);
	background: var(--layer);
	padding: var(--s-snug) var(--s-base) var(--s-base);
}

.a37-panel.is-open {
	display: block;
}

.a37-panel-index {
	display: block;
	max-height: 66vh;
	overflow-y: auto;
	background-color: transparent;
}

.a37-panel-set {
	display: flex;
	flex-direction: column;
}

.a37-panel-node {
	display: block;
}

.a37-panel-anchor {
	display: block;
	padding: 12px var(--s-snug);
	border-bottom: var(--slim) solid var(--hairline);
	background-color: transparent;
	color: var(--glyph);
	font-size: var(--caption);
	font-weight: var(--demi);
	text-decoration: none;
}

.a37-panel-anchor:hover,
.a37-panel-anchor[aria-current='page'] {
	background-color: var(--hairline);
	color: var(--focus);
}

/* --- Fußzeile: FOOT-05 (vier Spalten, informationsdicht) ---------------- */
.b43 {
	background: var(--core);
	color: var(--ink);
	margin-top: var(--s-wide);
}

.b43-shell {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--s-base) var(--s-wide);
	max-width: calc(var(--full) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding: var(--s-wide) var(--inset-desktop);
}

.b43-part {
	min-width: 0;
	background-color: transparent;
	color: var(--ink);
}

.b43-part--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-snug);
}

.b43-art {
	display: block;
	height: 96px;
	width: auto;
	margin-inline-start: -14px;
}

.b43-line {
	color: var(--ink);
	font-size: var(--caption);
	line-height: var(--regular);
	max-width: 42ch;
}

.b43-head {
	margin-bottom: var(--s-snug);
	color: var(--ink);
	font-family: var(--banner);
	font-size: var(--caption);
	font-weight: var(--bold);
	line-height: var(--compact);
	letter-spacing: var(--spread);
	text-transform: uppercase;
}

.b43-set {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
}

.b43-node {
	display: block;
}

.b43-anchor {
	display: inline-block;
	background-color: transparent;
	color: var(--ink);
	font-size: var(--caption);
	line-height: var(--regular);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.b43-anchor:hover {
	background-color: var(--ink);
	color: var(--core);
	text-decoration: underline;
}

.b43-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-snug);
	max-width: calc(var(--full) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding: var(--s-base) var(--inset-desktop);
	border-top: var(--slim) solid rgba(29, 11, 37, 0.35);
}

.b43-copy,
.b43-note {
	background-color: transparent;
	color: var(--ink);
	font-size: var(--tiny);
	line-height: var(--regular);
}

.b43-note {
	font-weight: var(--demi);
}

/* --- Cookie-Hinweis: COOK-13 (kompakter Toast mit Symbol) --------------- */
.c46 {
	position: fixed;
	inset-block-end: var(--s-wide);
	inset-inline-end: var(--s-wide);
	z-index: 90;
	max-width: 320px;
}

.c46-block {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--s-snug);
	padding: var(--s-base);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-wide);
	background: var(--layer);
	color: var(--glyph);
	box-shadow: var(--d-base);
}

.c46-say {
	grid-column: 2;
	background-color: transparent;
	color: var(--glyph);
	font-size: var(--tiny);
	line-height: var(--regular);
}

.c46-buttons {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-snug);
}

.c46-accept {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 var(--s-base);
	border: 0;
	border-radius: var(--stadium);
	background: var(--focus);
	color: var(--ink);
	font-size: var(--tiny);
	font-weight: var(--bold);
	cursor: pointer;
}

.c46-accept:hover {
	background: var(--key-active);
	color: var(--ink);
}

.c46-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 var(--s-snug);
	border: 0;
	border-radius: var(--stadium);
	background: var(--layer);
	color: var(--glyph);
	font-size: var(--tiny);
	font-weight: var(--demi);
	text-decoration: underline;
	cursor: pointer;
}

.c46-skip:hover {
	background: var(--hairline);
	color: var(--focus);
}

/* --- Gemeinsame Sektionsbreite ------------------------------------------ */
.y06-stuff,
.s41-shell,
.d20-shell,
.l66-shell,
.n27-shell,
.q50-shell,
.v03-shell,
.h24-shell,
.w20-shell,
.c77-shell,
.x50-shell,
.t42-shell,
.t42-abox,
.f66-shell,
.y04-frame {
	max-width: calc(var(--full) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--inset-desktop);
	width: 100%;
}

/* --- Erster Bildschirm: HERO-01 (Full-Bleed, kinoartig) ----------------- */
.y06 {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, calc(100vh - 190px), 760px);
	background: var(--ramp-start);
	color: var(--glyph);
	overflow: hidden;
}

.y06-art {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform var(--long) var(--release);
}

.y06:hover .y06-art {
	transform: scale(1.025);
}

.y06-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background-image: linear-gradient(to bottom, rgba(34, 16, 43, 0.25) 0%, rgba(34, 16, 43, 0.78) 62%, rgba(34, 16, 43, 0.94) 100%);
}

.y06-stuff {
	position: relative;
	z-index: 3;
	padding-block: var(--s-wide);
	background-color: transparent;
	color: var(--glyph);
}

.y06-eyebrow {
	display: inline-block;
	margin-bottom: var(--s-snug);
	padding: var(--s-hair) var(--s-snug);
	border-radius: var(--r-snug);
	background: var(--focus);
	color: var(--ink);
	font-size: var(--tiny);
	font-weight: var(--bold);
	letter-spacing: var(--spread);
	text-transform: uppercase;
}

.y06-lede {
	color: #ffffff;
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: var(--compact);
	max-width: 18ch;
}

.y06-sub {
	max-width: var(--brief);
	margin-top: var(--s-base);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--sm-2);
	line-height: var(--regular);
}

.y06-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-base);
	margin-top: var(--s-base);
}

.y06-terms {
	display: block;
	margin-top: var(--s-snug);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--tiny);
	line-height: var(--regular);
}

/* --- Seitenkopf: PHEAD-05 (Krümelpfad + Titel) -------------------------- */
.s41 {
	padding-block: var(--sec-y);
	background: var(--ramp-start);
}

.s41-lede {
	margin-top: var(--s-snug);
}

.s41-sub {
	max-width: 70ch;
	margin-top: var(--s-base);
	color: var(--muted);
	font-size: var(--sm-2);
	line-height: var(--regular);
}

.s41-moment {
	display: inline-block;
	margin-top: var(--s-snug);
	color: var(--muted);
	font-size: var(--tiny);
	letter-spacing: var(--spread);
}

.s41-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-base);
	margin-top: var(--s-base);
}

/* --- Krümelpfad: BREAD-05 (Schrägstriche, Display-Schrift) -------------- */
.o66 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-tiny);
	padding-block: var(--s-tiny);
}

.o66-anchor {
	background-color: transparent;
	color: var(--muted);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	letter-spacing: var(--close);
	text-transform: uppercase;
	text-decoration: none;
}

.o66-anchor:hover {
	background-color: transparent;
	color: var(--focus);
	text-decoration: underline;
}

.o66-slash {
	color: var(--focus);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	margin-inline: var(--s-tiny);
}

.o66-here {
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	text-transform: uppercase;
}

/* --- Tabelle: TABLE-06 (redaktionell mit Bildunterschrift) -------------- */
.d20 {
	padding-block: var(--sec-y);
	background: var(--back);
}

.d20-head {
	margin-bottom: var(--s-base);
}

.d20-scroll {
	overflow-x: auto;
	border: var(--slim) solid var(--hairline);
	border-radius: var(--r-base);
	background: var(--layer);
	padding: var(--s-base);
}

.d20-grid {
	width: 100%;
	min-width: 520px;
	background-color: var(--layer);
	color: var(--glyph);
	caption-side: top;
}

.d20-cap {
	padding-bottom: var(--s-base);
	color: var(--muted);
	background-color: var(--layer);
	font-family: var(--banner);
	font-size: var(--h4);
	font-style: italic;
	line-height: var(--regular);
	text-align: center;
}

.d20-cap::before {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto var(--s-snug);
	background: var(--focus);
}

.d20-bar {
	border-bottom: var(--slim) solid var(--hairline);
}

.d20-th {
	padding: var(--s-snug) var(--s-base);
	background-color: var(--layer);
	color: var(--focus);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	letter-spacing: var(--spread);
	text-align: start;
	text-transform: uppercase;
	white-space: nowrap;
}

.d20-cell {
	padding: var(--s-snug) var(--s-base);
	background-color: var(--layer);
	color: var(--glyph);
	font-size: var(--caption);
	font-weight: var(--base);
	line-height: var(--regular);
	text-align: start;
	vertical-align: top;
}

.d20-bar th.d20-cell {
	color: var(--focus);
	font-weight: var(--demi);
}

/* --- Kartenband: GRID-09 (waagerechtes Scroll-Band) --------------------- */
.l66 {
	padding-block: var(--sec-y);
	background: var(--ramp-start);
	scroll-margin-top: 110px;
}

.l66-head {
	margin-bottom: var(--s-base);
}

.l66-rail {
	display: flex;
	gap: var(--s-base);
	overflow-x: auto;
	padding-block: var(--s-tiny) var(--s-base);
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--focus) var(--layer);
}

.l66-block {
	flex: 0 0 320px;
	min-height: 200px;
	scroll-snap-align: start;
	padding: var(--s-base);
	border: var(--slim) solid var(--hairline);
	border-radius: var(--r-wide);
	background: var(--layer);
	color: var(--glyph);
	box-shadow: var(--d-snug);
	transition: box-shadow var(--t-base) var(--release), border-color var(--t-base) var(--release);
}

.l66-block:hover {
	border-color: var(--focus);
	box-shadow: var(--d-wide);
}

.l66-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: var(--s-snug);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-base);
	background: var(--ramp-start);
	color: var(--focus);
}

.l66-icon svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

.l66-lede {
	margin-bottom: var(--s-tiny);
	color: var(--glyph);
	font-size: var(--h4);
}

.l66-line {
	color: var(--muted);
	font-size: var(--caption);
	line-height: var(--regular);
}

.l66-hint {
	margin-top: var(--s-snug);
	color: var(--muted);
	font-size: var(--tiny);
}

/* --- Fließtext: PROSE-04 (Initiale, stark, roomy) ----------------------- */
.n27 {
	padding-block: var(--sec-y);
	background: var(--back);
}

.n27-head {
	margin-bottom: var(--s-base);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: var(--bold);
	text-align: start;
}

.n27-stuff {
	display: flex;
	flex-direction: column;
	gap: var(--s-base);
}

.n27-line {
	color: var(--glyph);
	font-size: var(--body);
	line-height: var(--roomy);
}

.n27-stuff > .n27-line:first-child::first-letter {
	float: left;
	margin: 6px var(--s-snug) 0 0;
	color: var(--focus);
	font-family: var(--banner);
	font-size: 5.5em;
	font-weight: var(--bold);
	line-height: 0.8;
}

.n27-set {
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
}

.n27-cell {
	position: relative;
	padding-inline-start: 26px;
	color: var(--glyph);
	font-size: var(--body);
	line-height: var(--regular);
}

.n27-cell::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 12px;
	width: 10px;
	height: 2px;
	background: var(--focus);
}

.n27-steps {
	counter-reset: schritt;
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
}

.n27-step {
	counter-increment: schritt;
	position: relative;
	padding-inline-start: 42px;
	color: var(--glyph);
	font-size: var(--body);
	line-height: var(--regular);
}

.n27-step::before {
	content: counter(schritt);
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--circle);
	background: var(--focus);
	color: var(--ink);
	font-family: var(--banner);
	font-size: var(--tiny);
	font-weight: var(--bold);
}

.n27-figure {
	margin: 0 0 var(--s-base);
}

.n27-art {
	display: block;
	width: 100%;
	max-height: 46vh;
	object-fit: cover;
	border-radius: var(--r-base);
}

.n27-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-base);
	margin-top: var(--s-base);
}

.n27-terms {
	color: var(--muted);
	font-size: var(--tiny);
	line-height: var(--regular);
}

/* --- Fragen: FAQ-09 (Magazin-Q&A) --------------------------------------- */
.q50 {
	padding-block: var(--sec-y);
	background: var(--ramp-start);
}

.q50-head {
	margin-bottom: var(--s-base);
}

.q50-set {
	display: flex;
	flex-direction: column;
}

.q50-cell {
	padding-block: var(--s-base);
	border-bottom: var(--slim) solid var(--hairline);
}

.q50-ask {
	display: grid;
	grid-template-columns: 34px 1fr 20px;
	align-items: baseline;
	gap: var(--s-snug);
	cursor: pointer;
	list-style: none;
}

.q50-ask::-webkit-details-marker {
	display: none;
}

.q50-ask::after {
	content: '';
	align-self: center;
	width: 9px;
	height: 9px;
	border-right: var(--medium) solid var(--focus);
	border-bottom: var(--medium) solid var(--focus);
	transform: rotate(45deg);
	transition: transform var(--t-base) var(--release);
}

.q50-cell[open] .q50-ask::after {
	transform: rotate(-135deg);
}

.q50-mark {
	color: var(--focus);
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--bold);
}

.q50-lede {
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-style: italic;
	font-weight: var(--bold);
	line-height: var(--regular);
}

.q50-reply {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: var(--s-snug);
	margin-top: var(--s-snug);
}

.q50-line {
	color: var(--muted);
	font-size: var(--body);
	line-height: var(--roomy);
}

/* --- Meinungen: REV-07 (Raster mit farbcodierten Wertungen) ------------- */
.v03 {
	padding-block: var(--sec-y);
	background: var(--back);
}

.v03-head {
	margin-bottom: var(--s-base);
}

.v03-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-base);
}

.v03-block {
	padding: var(--s-base);
	border: var(--slim) solid var(--hairline);
	border-radius: var(--r-base);
	background: var(--layer);
	color: var(--glyph);
	box-shadow: var(--d-snug);
	transition: box-shadow var(--t-base) var(--release);
}

.v03-block:hover {
	box-shadow: var(--d-wide);
}

.v03-block--high {
	background: #3a2a20;
	border-color: var(--focus);
}

.v03-block--mid {
	background: var(--layer);
}

.v03-block--low {
	background: #35243d;
}

.v03-score {
	display: flex;
	align-items: baseline;
	gap: var(--s-snug);
	margin-bottom: var(--s-snug);
}

.v03-num {
	color: var(--focus);
	font-family: var(--banner);
	font-size: var(--h2);
	font-weight: var(--bold);
	line-height: 1;
}

.v03-pips {
	color: var(--focus);
	font-size: var(--caption);
	letter-spacing: var(--spread);
}

.v03-say {
	margin: 0;
	color: var(--glyph);
	font-size: var(--caption);
	line-height: var(--regular);
}

.v03-tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-tiny);
	margin-top: var(--s-snug);
}

.v03-byname {
	color: var(--glyph);
	font-size: var(--tiny);
	font-weight: var(--demi);
}

.v03-moment {
	color: var(--muted);
	font-size: var(--tiny);
}

/* --- Aufruf: CTA-01 (Streifen in Akzentfarbe) --------------------------- */
.h24 {
	padding-block: var(--sec-y);
	background: var(--focus);
	color: var(--ink);
}

.h24-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-base);
}

.h24-stuff {
	flex: 1 1 420px;
	background-color: transparent;
	color: var(--ink);
}

.h24-lede {
	max-width: var(--brief);
	color: var(--ink);
	font-size: clamp(24px, 3vw, 32px);
	line-height: var(--compact);
}

.h24-line {
	max-width: var(--brief);
	margin-top: var(--s-snug);
	color: var(--ink);
	font-size: var(--caption);
	line-height: var(--regular);
}

.h24-goto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-height: 52px;
	min-width: 220px;
	padding: 0 var(--s-base);
	border-radius: var(--stadium);
	background: var(--ink);
	color: var(--core);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	text-decoration: none;
}

.h24-goto:hover {
	background: var(--back);
	color: var(--core);
}

/* --- Zwischenaufruf: INLINE-CTA-05 (hervorgehobenes Zitat) -------------- */
.w20 {
	padding-block: var(--sec-y);
	background: var(--layer);
}

.w20-shell {
	text-align: center;
}

.w20-quote {
	max-width: var(--brief);
	margin: 0 auto var(--s-base);
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--lg-2);
	font-style: italic;
	line-height: var(--regular);
}

/* --- Autorenzeile: BYLINE-01 (kompakt am Textende) ---------------------- */
.y04 {
	padding-block: var(--s-base);
	background: var(--back);
}

.y04-frame {
	display: flex;
	align-items: center;
	gap: var(--s-snug);
}

.y04-face {
	display: inline-flex;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--circle);
	background-color: var(--layer);
}

.y04-art {
	width: 48px;
	height: 48px;
	object-fit: cover;
	object-position: center top;
}

.y04-line {
	min-width: 0;
}

.y04-credit {
	color: var(--muted);
	font-size: var(--caption);
	line-height: var(--regular);
}

.y04-byname {
	background-color: transparent;
	color: var(--focus);
	font-weight: var(--demi);
	text-decoration: underline;
}

.y04-byname:hover {
	background-color: var(--focus);
	color: var(--ink);
}

.y04-job {
	color: var(--muted);
	font-size: var(--tiny);
	font-style: italic;
	line-height: var(--regular);
	margin-top: var(--s-hair);
}

/* --- Rechtstexte: LEGAL-05 (Definitionsliste) --------------------------- */
.c77 {
	padding-block: var(--sec-y);
	background: var(--back);
}

.c77-intro {
	color: var(--glyph);
	font-size: var(--sm-2);
	line-height: var(--roomy);
}

.c77-set {
	margin-top: var(--s-base);
}

.c77-term {
	position: relative;
	margin-top: var(--s-wide);
	margin-bottom: var(--s-tiny);
	padding-top: var(--s-snug);
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--h4);
	font-weight: var(--bold);
	line-height: var(--compact);
}

.c77-term::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 30px;
	height: 2px;
	background: var(--focus);
}

.c77-def {
	margin-inline-start: 0;
	margin-bottom: var(--s-base);
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
}

.c77-line {
	color: var(--muted);
	font-size: var(--body);
	line-height: var(--roomy);
}

.c77-notes {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
	margin-top: var(--s-base);
	padding: var(--s-base);
	border: var(--slim) solid var(--hairline);
	border-radius: var(--r-base);
	background: var(--layer);
}

.c77-note {
	color: var(--glyph);
	font-size: var(--caption);
	line-height: var(--regular);
}

.c77-small {
	margin-top: var(--s-base);
	color: var(--muted);
	font-size: var(--caption);
	line-height: var(--regular);
}

.c77-stamp {
	margin-top: var(--s-snug);
	color: var(--muted);
	font-size: var(--tiny);
}

/* --- Formular: FORM-05 (redaktionell mit Rahmen) ------------------------ */
.x50 {
	padding-block: var(--sec-y);
	background: var(--back);
}

.x50-head {
	margin-bottom: var(--s-base);
}

.x50-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-base);
	padding: var(--s-base);
	border: var(--medium) solid var(--focus);
	border-radius: var(--r-base);
	background-color: transparent;
}

.x50-slot {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
}

.x50-cap {
	color: var(--muted);
	font-size: var(--tiny);
	letter-spacing: var(--spread);
	text-transform: uppercase;
}

.x50-input {
	padding: var(--s-snug) 0;
	border: 0;
	border-bottom: var(--slim) solid var(--edge-hard);
	border-radius: var(--r-tiny);
	background-color: transparent;
	color: var(--glyph);
	font-size: var(--sm-2);
}

.x50-input:focus {
	border-bottom-color: var(--focus);
	outline: none;
}

.x50-area {
	resize: vertical;
	min-height: 120px;
}

.x50-send {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--s-base);
	border: 0;
	border-radius: var(--stadium);
	background: var(--focus);
	color: var(--ink);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	cursor: pointer;
}

.x50-send:hover {
	background: var(--key-active);
	color: var(--ink);
}

.x50-done {
	margin-top: var(--s-base);
	padding: var(--s-base);
	border-radius: var(--r-base);
	background: var(--layer);
	color: var(--glyph);
	font-size: var(--caption);
}

.x50-mail {
	margin-top: var(--s-base);
	color: var(--muted);
	font-size: var(--caption);
}

.x50-anchor {
	background-color: transparent;
	color: var(--focus);
	overflow-wrap: anywhere;
}

.x50-anchor:hover {
	background-color: var(--focus);
	color: var(--ink);
}

/* --- Autorenseite: AUTH-06 (Poster mit großem Porträt) ------------------ */
.t42 {
	padding-block: var(--s-wide);
	background-image: linear-gradient(135deg, #3b2942 0%, #281231 100%);
	background-color: var(--ramp-start);
}

.t42-shell {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--s-wide);
	align-items: start;
}

.t42-face {
	width: 280px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--r-wide);
	box-shadow: var(--d-wide);
	background-color: var(--layer);
}

.t42-stuff {
	min-width: 0;
	background-color: transparent;
	color: var(--glyph);
}

.t42-job {
	display: block;
	color: var(--focus);
	font-size: var(--caption);
	font-weight: var(--demi);
	letter-spacing: var(--spread);
	text-transform: uppercase;
}

.t42-lede {
	margin-top: var(--s-snug);
	font-size: clamp(32px, 5vw, 56px);
}

.t42-bio {
	margin-top: var(--s-base);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--sm-2);
	line-height: var(--regular);
}

.t42-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	margin-top: var(--s-base);
}

.t42-skill {
	padding: var(--s-hair) var(--s-snug);
	border: var(--slim) solid var(--edge-hard);
	border-radius: var(--stadium);
	background: var(--layer);
	color: var(--glyph);
	font-size: var(--tiny);
}

.t42-articles {
	padding-block: var(--sec-y);
	background: var(--back);
}

.t42-ahead {
	margin-bottom: var(--s-base);
}

.t42-alist {
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
}

.t42-acell {
	padding: var(--s-snug) var(--s-base);
	border-inline-start: var(--wide) solid var(--focus);
	border-radius: var(--r-snug);
	background: var(--layer);
	color: var(--glyph);
	font-size: var(--caption);
	line-height: var(--regular);
}

/* --- Fehlerseite: ERR-01 (zentriert, hero-artig) ------------------------ */
.f66 {
	padding-block: var(--s-wide);
	background: var(--back);
	flex: 1 0 auto;
	display: flex;
	align-items: center;
}

.f66-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-base);
	text-align: center;
}

.f66-digits {
	color: var(--focus);
	font-family: var(--banner);
	font-size: clamp(76px, 16vw, 190px);
	font-weight: var(--bold);
	line-height: var(--compact);
}

.f66-lede {
	max-width: var(--brief);
}

.f66-line {
	max-width: var(--brief);
	color: var(--muted);
	font-size: var(--sm-2);
	line-height: var(--regular);
}

.f66-goto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--s-base);
	border-radius: var(--stadium);
	background: var(--focus);
	color: var(--ink);
	font-family: var(--banner);
	font-size: var(--h6);
	font-weight: var(--bold);
	text-decoration: none;
}

.f66-goto:hover {
	background: var(--key-active);
	color: var(--ink);
}

/* --- Schmale Bildschirme (desktop-first, BP-10) ------------------------- */
@media (max-width: 1136px) {
	.y06-stuff,
	.s41-shell,
	.d20-shell,
	.l66-shell,
	.n27-shell,
	.q50-shell,
	.v03-shell,
	.h24-shell,
	.w20-shell,
	.c77-shell,
	.x50-shell,
	.t42-shell,
	.t42-abox,
	.f66-shell,
	.y04-frame {
		padding-inline: var(--padding-tablet);
	}

	.b43-shell,
	.b43-strip {
		padding-inline: var(--padding-tablet);
	}

	.a37-art {
		height: 64px;
	}

	.a37.is-shrunk .a37-art {
		height: 48px;
	}

	.t42-shell {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--s-base);
	}

	.t42-face {
		width: 220px;
	}
}

@media (max-width: 832px) {
	.a37-bar {
		display: none;
	}

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

	.a37-crown {
		justify-content: flex-start;
		padding-inline-start: 66px;
		padding-inline-end: 68px;
	}

	.a37-art {
		height: 52px;
	}

	.a37.is-shrunk .a37-art {
		height: 46px;
	}

	.b43-shell {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-base);
	}

	.v03-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.t42-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.t42-face {
		width: 200px;
	}

	.n27-stuff > .n27-line:first-child::first-letter {
		font-size: 3.4em;
	}

	.h24-goto {
		width: 100%;
	}

	.d20-cap {
		font-size: var(--sm-2);
	}
}

@media (max-width: 720px) {
	.c46 {
		inset-inline: var(--s-snug);
		inset-block-end: var(--s-snug);
		max-width: none;
	}

	.c46-block {
		padding: 12px 14px;
		gap: 8px;
		font-size: 13px;
		line-height: 1.35;
	}

	.c46-accept,
	.c46-skip {
		flex: 1 1 auto;
		min-height: 40px;
		padding: 8px 14px;
		font-size: 12px;
	}
}

@media (max-width: 488px) {
	.y06-stuff,
	.s41-shell,
	.d20-shell,
	.l66-shell,
	.n27-shell,
	.q50-shell,
	.v03-shell,
	.h24-shell,
	.w20-shell,
	.c77-shell,
	.x50-shell,
	.t42-shell,
	.t42-abox,
	.f66-shell,
	.y04-frame {
		padding-inline: var(--padding-mobile);
	}

	.b43-shell,
	.b43-strip {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--padding-mobile);
	}

	.a37-crown {
		padding-inline-start: 60px;
		padding-inline-end: 62px;
	}

	.a37-art {
		height: 46px;
	}

	.l66-block {
		flex-basis: 264px;
	}

	.q50-ask {
		grid-template-columns: 26px 1fr 16px;
	}

	.q50-reply {
		grid-template-columns: 26px 1fr;
	}

	.b43-art {
		height: 72px;
	}

	.y06-buttons,
	.n27-buttons,
	.s41-buttons {
		width: 100%;
	}

	.f66-digits {
		font-size: clamp(64px, 22vw, 120px);
	}
}
/* Offer CTA */
.jlcs-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border:2px solid #1D0B25;border-radius:999px;
  background:#65A30D;color:#1D0B25;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:1.8px;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.jlcs-act:hover{background:#4D7C0F;color:#FFFFFF;animation:none}
.jlcs-act:hover::after{animation:none}
.jlcs-act:active{background:#3F6212;color:#FFFFFF}
.jlcs-act:focus-visible{outline:3px solid #1D0B25;outline-offset:3px}
.jlcs-act{animation:breathe_jlcs 3.3s linear infinite}
@keyframes breathe_jlcs{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}12.121%{transform:scale(1.065);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}39.394%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.jlcs-act,.jlcs-act::after{animation:none!important;transition:none!important}}

/* --- Angebotsknöpfe: Grundmaße (Aussehen kommt aus cta-style) ----------- */
.a37-set {
	display: flex;
	align-items: stretch;
}

.y06-offer,
.s41-offer,
.n27-offer,
.h24-offer,
.w20-offer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-align: center;
	text-decoration: none;
}

/* --- Cookie-Symbol ohne SVG (Icon-Set der Spezifikation ist für Karten) - */
.c46-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: var(--circle);
	background: var(--focus);
	color: var(--ink);
	flex-shrink: 0;
}

.c46-crumb {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: var(--circle);
	background: var(--ink);
}

.c46-crumb:nth-child(1) {
	top: 4px;
	left: 4px;
}

.c46-crumb:nth-child(2) {
	top: 11px;
	left: 9px;
}

.c46-crumb:nth-child(3) {
	top: 5px;
	left: 12px;
}

@media (max-width: 507px) {
  .a37-bar,
  .a37-index,
  .a37-set,
  .a37-anchor { display: none !important; }
  .a37-more-opener { display: inline-flex !important; }
}