/* =========================================================================
   Sol Casino Österreich — Stylesheet
   Aufbau: Token → Reset → Basis → Hülle → Bausteine → Werkzeuge
   ========================================================================= */

/* --- Schriften, lokal ausgeliefert ------------------------------------- */
@font-face {
	font-family: "Outfit";
	src: url("/typeset/outfit-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Outfit";
	src: url("/typeset/outfit-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Outfit";
	src: url("/typeset/outfit-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/mont-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/mont-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/typeset/mont-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* --- Token ------------------------------------------------------------- */
:root {
	/* Farben (verschobene Endwerte aus der Spezifikation) */
	--ink-core: #f69c20;
	--ink-punch: #848484;
	--ink-spot-deep: #6e6e6e;
	--ink-back: #1b1b1b;
	--ink-layer: #232323;
	--ink-letters: #ffffff;
	--ink-quiet: #bdbdbd;
	--ink-border: #343434;
	--ink-rule-bold: #4a4a4a;
	--ink-blend-a: #c1c1c1;
	--ink-ramp-end: #9e9e9e;
	--ink-warn-band: #8b1e3f;
	--ink-deep: #151515;
	--ink-lift: #2f2f2f;

	/* Abstände (SPACE-03) */
	--gap-hair: 2px;
	--gap-tiny: 6px;
	--gap-snug: 10px;
	--gap-base: 14px;
	--gap-wide: 20px;
	--gap-roomy: 28px;
	--gap-vast: 48px;
	--gap-huge: 72px;
	--sec-y: 44px;

	/* Geometrie (GEO-06, gemischt asymmetrisch) */
	--crn-hair: 0;
	--crn-tiny: 0;
	--crn-snug: 4px;
	--crn-base: 12px;
	--crn-wide: 24px;
	--crn-roomy: 30px;
	--crn-vast: 36px;
	--crn-huge: 44px;
	--crn-stadium: 9999px;
	--crn-circle: 50%;
	--str-thin: 1px;
	--str-medium: 2px;
	--str-strong: 4px;
	--elev-hair: 0 1px 0 rgba(0, 0, 0, 0.10);
	--elev-tiny: 0 1px 0 rgba(0, 0, 0, 0.10);
	--elev-snug: 0 2px 8px rgba(0, 0, 0, 0.07);
	--elev-base: 0 6px 16px rgba(0, 0, 0, 0.10);
	--elev-wide: 0 12px 32px rgba(0, 0, 0, 0.14);
	--elev-roomy: 0 16px 40px rgba(0, 0, 0, 0.18);
	--elev-vast: 0 20px 48px rgba(0, 0, 0, 0.22);
	--elev-huge: 0 28px 64px rgba(0, 0, 0, 0.26);

	/* Typografie (TYPO-07, luftig) */
	--ff-title: "Outfit", "Trebuchet MS", sans-serif;
	--ff-base: "Montserrat", "Segoe UI", sans-serif;
	--sz-h1: clamp(28px, 4.6vw, 48px);
	--sz-h2: clamp(24px, 3.2vw, 36px);
	--sz-lg-2: clamp(20px, 2.2vw, 26px);
	--sz-sub-2: 21px;
	--sz-h5: 18px;
	--sz-micro-head: 16px;
	--sz-base: 19px;
	--sz-small: 16px;
	--sz-micro: 14px;
	--ln-snug: 1.2;
	--ln-base: 1.7;
	--ln-airy: 2;
	--trk-close: -0.01em;
	--trk-default: 0;
	--trk-open: 0.02em;
	--wt-regular: 400;
	--wt-semi: 500;
	--wt-strong: 600;

	/* Bewegung (leise Achsen, Zahlen aus der Spezifikation) */
	--spd-quick: 105ms;
	--spd-base: 230ms;
	--spd-easy: 395ms;
	--bz-land: cubic-bezier(0.33, 0.88, 0.5, 0.92);
	--bz-enter: cubic-bezier(0.66, 0.11, 0.54, 0.93);
	--bz-swing: cubic-bezier(0.66, 0.11, 0.54, 0.93);
	--bz-elastic: cubic-bezier(0.28, 1.1, 0.51, 0.95);

	/* Hülle (CONT-04, nach links versetzt) */
	--wrp-site: 1420px;
	--wrp-text: 1420px;
	--wrp-brief: 520px;
	--wrp-edge-wide: 56px;
	--wrp-padding-tablet: 24px;
	--wrp-padding-mobile: 16px;
	--wrp-gutter-s: var(--wrp-edge-wide);
	--wrp-gutter-e: var(--wrp-padding-tablet);

	/* Kopfzeile */
	--hd-tall: 80px;
	--hd-short: 64px;
	--pill-gap: 8px;
}

/* --- Mobile Werte ------------------------------------------------------ */
@media (max-width: 899px) {
	:root {
		--sz-sub-2: 19px;
		--sz-h5: 17px;
		--sz-micro-head: 15px;
		--sz-base: 18px;
		--sz-small: 15px;
		--sz-micro: 13px;
		--sec-y: 34px;
		--wrp-gutter-s: var(--wrp-padding-mobile);
		--wrp-gutter-e: var(--wrp-padding-mobile);
	}
}

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

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: auto;
	scroll-padding-block-start: 140px;
	background: var(--ink-back);
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-block-start: 96px;
	background: var(--ink-back);
	color: var(--ink-letters);
	font-family: var(--ff-base);
	font-size: var(--sz-base);
	font-weight: var(--wt-regular);
	line-height: var(--ln-airy);
	letter-spacing: var(--trk-default);
	-webkit-font-smoothing: antialiased;
}

main {
	flex: 1 0 auto;
	animation: enter var(--spd-easy) var(--bz-land) both;
}

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

img {
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0 0 var(--gap-base);
	font-family: var(--ff-title);
	color: var(--ink-letters);
}

h1 {
	font-size: var(--sz-h1);
	font-weight: var(--wt-strong);
	line-height: var(--ln-snug);
	letter-spacing: var(--trk-close);
}

h2 {
	font-size: var(--sz-h2);
	font-weight: var(--wt-strong);
	line-height: var(--ln-snug);
	letter-spacing: var(--trk-close);
}

h3 {
	font-family: var(--ff-base);
	font-size: var(--sz-lg-2);
	font-weight: var(--wt-strong);
	line-height: 1.35;
}

p {
	margin: 0 0 var(--gap-base);
}

a {
	color: var(--ink-core);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--spd-quick) var(--bz-land), background-color var(--spd-quick) var(--bz-land);
}

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

ul,
ol {
	margin: 0 0 var(--gap-base);
	padding-inline-start: var(--gap-roomy);
}

table {
	border-collapse: collapse;
}

button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: var(--str-medium) solid var(--ink-core);
	outline-offset: 2px;
}

/* --- Hülle: gemeinsame Breite aller Abschnitte ------------------------- */
.u46-inner,
.n06-inner,
.h62-inner,
.z17-inner,
.l23-inner,
.i04-inner,
.a24-inner,
.t33-inner,
.m26-inner,
.r97-inner,
.e16-inner,
.l42-inner,
.o34-inner,
.s15-inner {
	max-width: calc(var(--wrp-site) + 2 * var(--wrp-edge-wide));
	margin-inline: auto;
	padding-inline: var(--wrp-gutter-s) var(--wrp-gutter-e);
}

.skip-hop {
	position: absolute;
	inset-inline-start: var(--gap-base);
	z-index: 200;
	padding: var(--gap-snug) var(--gap-base);
	border-radius: var(--crn-snug);
	background: var(--ink-core);
	color: var(--ink-back);
	font-weight: var(--wt-strong);
	text-decoration: none;
}

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

/* =========================================================================
   Kopfzeile — HEAD-PILL: schwebende Tablette mit Abstand zum Fensterrand
   Ruhepunkte: sticky (fixiert), Schrumpfen beim Scrollen
   ========================================================================= */
.u46 {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	padding-block: var(--pill-gap);
	background: transparent;
	transition: background-color var(--spd-base) var(--bz-swing);
}

.u46.is-shrunk {
	background: var(--ink-back);
}

.u46-inner {
	padding-inline: var(--wrp-padding-mobile);
}

.u46-pill {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	height: 80px;
	padding-inline: var(--gap-base);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-stadium);
	background: var(--ink-layer);
	color: var(--ink-letters);
	box-shadow: var(--elev-base);
	transition: height var(--spd-base) var(--bz-swing);
}

.u46.is-shrunk .u46-pill {
	height: 64px;
}

.u46-glyph {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	background: transparent;
	text-decoration: none;
}

.u46-glyph:hover {
	background: transparent;
}

.u46-glyph img {
	display: block;
	height: 60px;
	width: auto;
	flex-shrink: 0;
	transition: height var(--spd-base) var(--bz-swing);
}

.u46.is-shrunk .u46-glyph img {
	height: 48px;
}

/* Menü in der Zeile — priority+, die Vermessung macht das Skript */
.u46-links {
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-start: auto;
}

.u46-roll {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
}

.u46-unit {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* navDivider: bar — nur zwischen Punkten der oberen Zeile */
.u46-roll > .u46-unit + .u46-unit::before {
	content: "";
	display: block;
	width: var(--str-thin);
	height: 16px;
	margin-inline-end: var(--gap-base);
	background: var(--ink-rule-bold);
}

.u46-roll > .u46-unit[data-first]::before {
	content: none;
}

.u46-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--gap-tiny);
	border-radius: var(--crn-snug);
	background: var(--ink-layer);
	color: var(--ink-letters);
	font-family: var(--ff-base);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

/* hoverMark: tint */
.u46-link:hover {
	background: var(--ink-lift);
	color: var(--ink-core);
}

/* activeMark: dot */
.u46-link[aria-current]::after {
	content: "";
	position: absolute;
	inset-block-end: 6px;
	inset-inline-start: 50%;
	width: 5px;
	height: 5px;
	margin-inline-start: -2px;
	border-radius: var(--crn-circle);
	background: var(--ink-core);
}

.u46-unit--more {
	position: relative;
}

.u46-more-tap {
	min-height: 44px;
	padding-inline: var(--gap-snug);
	border: var(--str-thin) solid var(--ink-rule-bold);
	border-radius: var(--crn-stadium);
	background: var(--ink-lift);
	color: var(--ink-letters);
	font-family: var(--ff-base);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.u46-more-tap:hover {
	background: var(--ink-core);
	color: var(--ink-back);
}

.u46-more-roll {
	display: none;
	position: absolute;
	inset-block-start: calc(100% + var(--gap-tiny));
	inset-inline-end: 0;
	z-index: 120;
	min-width: 220px;
	max-height: 60vh;
	margin: 0;
	padding: var(--gap-tiny);
	overflow-y: auto;
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-base);
	background: var(--ink-layer);
	box-shadow: var(--elev-wide);
	list-style: none;
}

.u46-more-roll.is-open {
	display: block;
}

.u46-more-roll > .u46-unit {
	display: block;
}

.u46-more-roll > .u46-unit::before {
	content: none;
}

.u46-more-roll .u46-link {
	display: flex;
	width: 100%;
}

/* Kopf-Knöpfe */
.u46-actions {
	display: flex;
	align-items: center;
	gap: var(--gap-snug);
	flex-shrink: 0;
	margin-inline-start: var(--gap-snug);
}

.u46-goto {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--gap-wide);
	border: var(--str-thin) solid var(--ink-rule-bold);
	border-radius: var(--crn-stadium);
	background: var(--ink-lift);
	color: var(--ink-letters);
	font-family: var(--ff-title);
	font-size: var(--sz-micro);
	font-weight: var(--wt-strong);
	text-decoration: none;
	white-space: nowrap;
}

.u46-goto:hover {
	background: var(--ink-letters);
	color: var(--ink-back);
}

.u46-offer {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Menüknopf: Zeichen + Wort, mit Kontur */
.u46-menu-tap {
	display: none;
	align-items: center;
	gap: var(--gap-tiny);
	order: -1;
	min-height: 44px;
	padding-inline: var(--gap-snug);
	border: var(--str-thin) solid var(--ink-rule-bold);
	border-radius: var(--crn-stadium);
	background: var(--ink-lift);
	color: var(--ink-letters);
	font-family: var(--ff-base);
	font-size: var(--sz-micro);
	font-weight: var(--wt-semi);
	flex-shrink: 0;
}

.u46-menu-tap:hover {
	background: var(--ink-core);
	color: var(--ink-back);
}

.u46-bars {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.u46-bars::before,
.u46-bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.u46-bars::before {
	inset-block-start: -6px;
}

.u46-bars::after {
	inset-block-start: 6px;
}

/* Auszugsfeld für schmale Fenster */
.u46-sheet {
	display: none;
	margin-block-start: var(--gap-tiny);
	padding: var(--gap-snug);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-wide);
	background: var(--ink-layer);
	box-shadow: var(--elev-wide);
}

.u46-sheet.is-open {
	display: block;
}

.u46-sheet-roll {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u46-sheet-roll > .u46-unit {
	display: block;
	border-block-end: var(--str-thin) solid var(--ink-border);
}

.u46-sheet-roll > .u46-unit:last-child {
	border-block-end: none;
}

.u46-sheet-roll > .u46-unit::before {
	content: none;
}

.u46-sheet-roll .u46-link {
	display: flex;
	width: 100%;
	min-height: 48px;
	border-radius: var(--crn-snug);
	font-size: var(--sz-small);
}

@media (max-width: 899px) {
	.u46-menu-tap {
		display: inline-flex;
	}

	.u46-links {
		display: none;
	}

	.u46-pill {
		height: 64px;
		gap: var(--gap-snug);
		padding-inline: var(--gap-snug);
	}

	.u46-glyph img {
		height: 44px;
	}

	.u46-actions {
		margin-inline-start: auto;
	}

	body {
		padding-block-start: 82px;
	}
}

@media (min-width: 900px) {
	.u46-sheet {
		display: none !important;
	}
}

@media (max-width: 420px) {
	.u46-menu-tap span {
		display: none;
	}
}

/* =========================================================================
   Erster Bildschirm — HERO-11: kompakt, Bild rechts
   ========================================================================= */
.h62 {
	padding-block: var(--sec-y);
}

.h62-inner {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	gap: var(--gap-vast);
	align-items: center;
	min-height: 480px;
}

.h62-fill {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.h62-subtitle {
	max-width: var(--wrp-brief);
	color: var(--ink-quiet);
	font-size: var(--sz-sub-2);
	line-height: var(--ln-base);
}

.h62-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-snug);
	margin-block-start: var(--gap-snug);
}

.h62-offer {
	align-self: flex-start;
}

.h62-figure {
	margin: 0;
	aspect-ratio: 1 / 1;
	padding: var(--gap-base);
	border-radius: var(--crn-wide);
	background: var(--ink-layer);
}

.h62-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--crn-base);
}

@media (max-width: 899px) {
	.h62-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-wide);
		min-height: 0;
	}

	.h62-figure {
		order: 2;
		aspect-ratio: auto;
		height: 240px;
		padding: var(--gap-snug);
	}
}

/* =========================================================================
   Seitenkopf — PHEAD-02: kompakt, zentriert
   ========================================================================= */
.z17 {
	padding-block: var(--sec-y);
	background: var(--ink-back);
}

.z17-inner {
	text-align: center;
}

.z17-rule {
	width: 72px;
	height: var(--str-strong);
	margin: var(--gap-base) auto;
	background: var(--ink-core);
}

.z17-line {
	max-width: var(--wrp-brief);
	margin-inline: auto;
	color: var(--ink-quiet);
	font-size: var(--sz-sub-2);
	line-height: var(--ln-base);
}

/* =========================================================================
   Textstrecke — PROSE-05: Dokumentationsoptik
   headScale normal · headWeight semibold · density normal · lineWeight thick
   ========================================================================= */
.m26 {
	padding-block: var(--sec-y);
}

.m26-fill {
	margin-block-end: var(--gap-roomy);
}

.m26-fill h2 {
	margin-block-start: var(--gap-roomy);
	font-family: var(--ff-base);
	font-size: var(--sz-lg-2);
	font-weight: var(--wt-semi);
	line-height: var(--ln-snug);
	letter-spacing: var(--trk-open);
	text-transform: uppercase;
	color: var(--ink-letters);
}

.m26-fill h2::before {
	content: "";
	display: block;
	width: 56px;
	height: var(--str-strong);
	margin-block-end: var(--gap-snug);
	background: var(--ink-core);
}

.m26-fill p {
	margin-block-end: var(--gap-base);
	color: var(--ink-quiet);
	font-size: var(--sz-base);
	line-height: var(--ln-base);
}

.m26-fill strong {
	color: var(--ink-letters);
	font-weight: var(--wt-strong);
}

.m26-roll {
	margin-block-end: var(--gap-base);
	color: var(--ink-quiet);
	line-height: var(--ln-base);
}

.m26-roll li {
	margin-block-end: var(--gap-tiny);
}

.m26-figure {
	margin: var(--gap-wide) 0;
	background: var(--ink-back);
	text-align: center;
}

.m26-figure img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 52vh;
	margin-inline: auto;
	border-radius: var(--crn-base);
}

/* =========================================================================
   Kartenband — GRID-09: waagerechtes Laufband
   ========================================================================= */
.l23 {
	padding-block: var(--sec-y);
}

.l23-rail {
	display: flex;
	gap: var(--gap-base);
	margin-inline: calc(-1 * var(--wrp-gutter-s)) calc(-1 * var(--wrp-gutter-e));
	padding-inline: var(--wrp-gutter-s) var(--wrp-gutter-e);
	padding-block: var(--gap-tiny);
	overflow-x: auto;
	list-style: none;
}

.l23-card {
	display: flex;
	flex-direction: column;
	gap: var(--gap-tiny);
	flex-shrink: 0;
	width: 320px;
	min-height: 200px;
	padding: var(--gap-base);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-base);
	background: var(--ink-layer);
}

.l23-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 36px;
	height: 36px;
	border-radius: var(--crn-snug);
	background: var(--ink-deep);
	color: var(--ink-core);
}

.l23-mark svg {
	width: 18px;
	height: 18px;
}

.l23-card h3 {
	margin: 0;
	font-size: var(--sz-h5);
	color: var(--ink-letters);
}

.l23-line {
	margin: 0;
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

.l23-hint {
	margin-block-start: var(--gap-snug);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
}

/* =========================================================================
   Stimmen — REV-03: Laufband mit Bewertungsbalken
   ========================================================================= */
.a24 {
	padding-block: var(--sec-y);
}

.a24-rail {
	display: flex;
	gap: var(--gap-base);
	margin-inline: calc(-1 * var(--wrp-gutter-s)) calc(-1 * var(--wrp-gutter-e));
	padding-inline: var(--wrp-gutter-s) var(--wrp-gutter-e);
	padding-block: var(--gap-tiny);
	overflow-x: auto;
	list-style: none;
}

.a24-card {
	display: flex;
	flex-direction: column;
	gap: var(--gap-snug);
	flex-shrink: 0;
	width: 360px;
	min-height: 240px;
	padding: var(--gap-wide);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-base);
	background: var(--ink-deep);
}

.a24-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gap-snug);
}

.a24-author {
	color: var(--ink-letters);
	font-family: var(--ff-title);
	font-weight: var(--wt-strong);
}

.a24-score {
	color: var(--ink-core);
	font-size: var(--sz-small);
	font-weight: var(--wt-semi);
}

.a24-meter {
	width: 60%;
	height: 4px;
	border-radius: var(--crn-stadium);
	background: var(--ink-rule-bold);
}

.a24-fill {
	display: block;
	height: 100%;
	border-radius: var(--crn-stadium);
	background: var(--ink-core);
}

.a24-line {
	margin: 0;
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	font-style: normal;
	line-height: var(--ln-base);
}

.a24-dots {
	display: flex;
	gap: var(--gap-tiny);
	justify-content: center;
	margin-block-start: var(--gap-base);
}

.a24-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--crn-circle);
	background: var(--ink-rule-bold);
}

.a24-dot.is-on {
	background: var(--ink-core);
}

/* =========================================================================
   Fragen — FAQ-09: Magazin-Q&A
   ========================================================================= */
.i04 {
	padding-block: var(--sec-y);
}

.i04-roll {
	display: block;
}

.i04-unit {
	padding-block: var(--gap-wide);
	border-block-end: var(--str-thin) solid var(--ink-border);
}

.i04-drop {
	display: block;
}

.i04-ask {
	display: flex;
	align-items: baseline;
	gap: var(--gap-snug);
	list-style: none;
	cursor: pointer;
}

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

.i04-ask h3 {
	margin: 0;
	font-family: var(--ff-title);
	font-size: var(--sz-h5);
	font-weight: var(--wt-strong);
	font-style: italic;
	color: var(--ink-letters);
}

.i04-mark {
	flex-shrink: 0;
	font-family: var(--ff-title);
	font-size: var(--sz-h5);
	font-weight: var(--wt-strong);
	color: var(--ink-punch);
}

.i04-reply {
	margin: var(--gap-snug) 0 0;
	color: var(--ink-quiet);
	font-size: var(--sz-base);
	line-height: var(--ln-airy);
}

.i04-reply .i04-mark {
	margin-inline-end: var(--gap-tiny);
}

/* =========================================================================
   Tabelle — TABLE-01: klassisch gestreift
   ========================================================================= */
.r97 {
	padding-block: var(--sec-y);
}

.r97-frame {
	overflow-x: auto;
	border-radius: var(--crn-base);
	background: var(--ink-layer);
}

.r97 table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	background: var(--ink-layer);
}

.r97 th {
	padding: var(--gap-base);
	background: var(--ink-core);
	color: var(--ink-back);
	font-family: var(--ff-base);
	font-size: var(--sz-micro-head);
	font-weight: var(--wt-semi);
	letter-spacing: var(--trk-open);
	text-align: start;
	text-transform: uppercase;
}

.r97 td {
	padding: var(--gap-base);
	background: var(--ink-layer);
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	text-align: start;
}

.r97 tr:nth-child(even) td {
	background: var(--ink-lift);
}

.r97 td:first-child {
	color: var(--ink-letters);
	font-weight: var(--wt-semi);
}

.r97 tbody tr:hover td {
	background: var(--ink-rule-bold);
	color: var(--ink-letters);
	transition: background-color var(--spd-quick) var(--bz-land);
}

.r97-line {
	margin-block-start: var(--gap-snug);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
}

/* =========================================================================
   Aufruf — CTA-02: zentrierter Kasten
   ========================================================================= */
.t33 {
	padding-block: var(--sec-y);
}

.t33--strip {
	padding-block: var(--gap-wide);
}

.t33-box {
	max-width: var(--wrp-brief);
	margin-inline: auto;
	padding: var(--gap-vast);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-wide);
	background: var(--ink-layer);
	text-align: center;
}

.t33-box h2 {
	font-size: var(--sz-h2);
	font-weight: var(--wt-strong);
}

.t33-line {
	margin-block: var(--gap-base);
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

.t33-plug {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-snug);
	margin-block: var(--gap-wide);
	padding: var(--gap-wide);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-base);
	background: var(--ink-layer);
	text-align: center;
}

.t33-terms {
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
	line-height: var(--ln-base);
}

.t33-age {
	color: var(--ink-punch);
	font-size: var(--sz-micro);
	line-height: var(--ln-base);
}

/* =========================================================================
   Einschub — INLINE-CTA-02: zentrierte Aufforderungskarte
   ========================================================================= */
.c73 {
	display: block;
	padding-block: var(--gap-wide);
}

.c73-card {
	max-width: 600px;
	margin-inline: auto;
	padding: var(--gap-wide);
	border: var(--str-thin) solid var(--ink-border);
	border-radius: var(--crn-base);
	background: var(--ink-layer);
	text-align: center;
}

.c73-top {
	margin: 0 0 var(--gap-snug);
	font-family: var(--ff-title);
	font-size: var(--sz-sub-2);
	font-weight: var(--wt-strong);
	color: var(--ink-letters);
}

.c73-line {
	margin: 0 0 var(--gap-base);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
}

/* =========================================================================
   Rechtstexte — LEGAL-08: schlicht
   ========================================================================= */
.e16 {
	padding-block: var(--sec-y);
	background: var(--ink-back);
}

.e16-fill {
	margin-block-end: var(--gap-roomy);
}

.e16-fill h2 {
	margin-block-start: var(--gap-wide);
	font-family: var(--ff-base);
	font-size: var(--sz-lg-2);
	font-weight: var(--wt-strong);
	letter-spacing: var(--trk-default);
	text-transform: none;
	color: var(--ink-letters);
}

.e16-fill p {
	color: var(--ink-quiet);
	font-size: var(--sz-base);
	line-height: var(--ln-airy);
}

.e16-roll {
	color: var(--ink-quiet);
	line-height: var(--ln-base);
}

.e16-unit {
	margin-block-end: var(--gap-snug);
}

.e16-note {
	display: block;
	margin-block-start: var(--gap-wide);
	color: var(--ink-punch);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

/* =========================================================================
   Kontakt — FORM-02: zwei Spalten nebeneinander
   ========================================================================= */
.l42 {
	padding-block: var(--sec-y);
}

.l42-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--gap-roomy);
	align-items: start;
}

.l42-col {
	display: flex;
	flex-direction: column;
	gap: var(--gap-snug);
	padding: var(--gap-wide);
	border-radius: var(--crn-base);
	background: var(--ink-layer);
}

.l42-shape {
	background: var(--ink-deep);
}

.l42-line {
	margin: 0;
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

.l42-roll {
	margin: 0;
	padding: 0;
	list-style: none;
}

.l42-unit {
	margin-block-end: var(--gap-tiny);
	color: var(--ink-quiet);
	font-size: var(--sz-small);
}

.l42-link {
	color: var(--ink-core);
	background: transparent;
}

.l42-label {
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	font-weight: var(--wt-semi);
}

.l42-entry {
	width: 100%;
	padding: var(--gap-snug) var(--gap-base);
	border: var(--str-thin) solid var(--ink-rule-bold);
	border-radius: var(--crn-tiny);
	background: var(--ink-back);
	color: var(--ink-letters);
	font: inherit;
	font-size: var(--sz-small);
}

.l42-area {
	resize: vertical;
	line-height: var(--ln-base);
}

.l42-send {
	align-self: flex-start;
	min-height: 44px;
	padding-inline: var(--gap-roomy);
	border: none;
	border-radius: var(--crn-stadium);
	background: var(--ink-core);
	color: var(--ink-back);
	font-family: var(--ff-title);
	font-weight: var(--wt-strong);
}

.l42-send:hover {
	background: var(--ink-letters);
	color: var(--ink-back);
}

.l42-done {
	margin: 0;
	padding: var(--gap-snug) var(--gap-base);
	border-radius: var(--crn-snug);
	background: var(--ink-core);
	color: var(--ink-back);
	font-size: var(--sz-small);
	font-weight: var(--wt-semi);
}

@media (max-width: 899px) {
	.l42-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   Autorenzeile — BYLINE-01 · Autorenkarte — AUTH-07
   ========================================================================= */
.s15 {
	display: block;
	padding-block: var(--gap-base);
}

.s15-inner {
	display: flex;
	align-items: center;
	gap: var(--gap-snug);
}

.s15-portrait {
	display: block;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--crn-circle);
	background: var(--ink-layer);
}

.s15-portrait img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	object-position: center top;
}

.s15-fill {
	display: block;
}

.s15-author {
	margin: 0;
	color: var(--ink-quiet);
	font-size: var(--sz-small);
}

.s15-link {
	color: var(--ink-core);
	background: transparent;
}

.s15-post {
	margin-block-start: var(--gap-hair);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
	font-style: italic;
}

.o34 {
	display: block;
	padding-block: var(--sec-y);
}

.o34-card {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	gap: var(--gap-wide);
	padding: var(--gap-roomy);
	border-radius: var(--crn-base);
	border-inline-start: var(--str-strong) solid var(--ink-core);
	background: var(--ink-layer);
}

.o34-portrait {
	display: block;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: var(--crn-circle);
	background: var(--ink-deep);
}

.o34-portrait img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: cover;
	object-position: center top;
}

.o34-fill {
	display: block;
}

.o34-quote {
	display: block;
	font-family: var(--ff-title);
	font-size: var(--sz-h1);
	line-height: 0.8;
	color: var(--ink-core);
}

.o34-bio {
	margin-block-start: var(--gap-snug);
	color: var(--ink-letters);
	font-size: var(--sz-h5);
	font-style: italic;
	line-height: var(--ln-base);
}

.o34-attrib {
	margin-block-start: var(--gap-base);
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	letter-spacing: var(--trk-open);
}

.o34-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-tiny);
	margin: var(--gap-base) 0 0;
	padding: 0;
	list-style: none;
}

.o34-skill {
	padding: var(--gap-hair) var(--gap-snug);
	border-radius: var(--crn-stadium);
	background: var(--ink-deep);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
}

.o34-articles {
	margin-block-start: var(--gap-roomy);
}

.o34-top {
	font-family: var(--ff-base);
	font-size: var(--sz-lg-2);
	font-weight: var(--wt-semi);
	letter-spacing: var(--trk-open);
	text-transform: uppercase;
}

.o34-roll {
	margin: 0;
	padding: 0;
	list-style: none;
}

.o34-unit {
	padding-block: var(--gap-snug);
	border-block-end: var(--str-thin) solid var(--ink-border);
}

.o34-link {
	color: var(--ink-core);
	background: transparent;
}

@media (max-width: 899px) {
	.o34-card {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--gap-wide);
	}
}

/* =========================================================================
   Fehlerseite — ERR-05: Glitch
   ========================================================================= */
.z37 {
	padding-block: var(--gap-huge);
}

.z37-inner {
	max-width: calc(var(--wrp-site) + 2 * var(--wrp-edge-wide));
	margin-inline: auto;
	padding-inline: var(--wrp-gutter-s) var(--wrp-gutter-e);
	text-align: center;
}

.z37-glitch {
	position: relative;
	max-width: var(--wrp-brief);
	margin-inline: auto;
	color: var(--ink-letters);
}

.z37-glitch::before,
.z37-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--ink-core);
	opacity: 0.6;
}

.z37-glitch::before {
	transform: translate(2px, -2px);
}

.z37-glitch::after {
	transform: translate(-2px, 2px);
	color: var(--ink-spot-deep);
}

.z37-line {
	max-width: var(--wrp-brief);
	margin-inline: auto;
	color: var(--ink-quiet);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

.z37-goto {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block-start: var(--gap-base);
	padding-inline: var(--gap-roomy);
	border-radius: var(--crn-stadium);
	background: var(--ink-core);
	color: var(--ink-back);
	font-family: var(--ff-title);
	font-weight: var(--wt-strong);
	text-decoration: none;
}

.z37-goto:hover {
	background: var(--ink-letters);
	color: var(--ink-back);
}

/* =========================================================================
   Fußzeile — FOOT-08: Zeitungskopf · RG-07: 18+ als erste Zeile
   ========================================================================= */
.n06 {
	padding-block: var(--sec-y);
	background: var(--ink-back);
}

.n06-rg {
	display: flex;
	align-items: baseline;
	gap: var(--gap-snug);
	padding-block-end: var(--gap-base);
	border-block-end: var(--str-thin) solid var(--ink-border);
}

.n06-badge {
	flex-shrink: 0;
	padding: var(--gap-hair) var(--gap-snug);
	border-radius: var(--crn-snug);
	background: var(--ink-warn-band);
	color: var(--ink-letters);
	font-family: var(--ff-title);
	font-size: var(--sz-micro);
	font-weight: var(--wt-strong);
}

.n06-note {
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
	line-height: var(--ln-base);
}

.n06-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-base);
	margin-block-start: var(--gap-wide);
	padding-block: var(--gap-base);
	border-block: var(--str-strong) solid var(--ink-rule-bold);
}

.n06-glyph {
	display: inline-flex;
	background: transparent;
}

.n06-glyph:hover {
	background: transparent;
}

.n06-glyph img {
	display: block;
	height: 56px;
	width: auto;
}

.n06-issue {
	margin: 0;
	color: var(--ink-quiet);
	font-family: var(--ff-title);
	font-size: var(--sz-micro);
	letter-spacing: var(--trk-open);
	text-transform: uppercase;
}

.n06-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-wide);
	margin-block-start: var(--gap-wide);
}

.n06-col {
	display: block;
}

.n06-top {
	margin: 0 0 var(--gap-snug);
	font-family: var(--ff-title);
	font-size: var(--sz-micro-head);
	font-weight: var(--wt-strong);
	letter-spacing: var(--trk-open);
	text-transform: uppercase;
	color: var(--ink-letters);
}

.n06-roll {
	margin: 0;
	padding: 0;
	list-style: none;
}

.n06-unit {
	margin-block-end: var(--gap-tiny);
	color: var(--ink-quiet);
	font-size: var(--sz-small);
}

.n06-link {
	color: var(--ink-core);
	background: transparent;
	text-decoration: none;
}

.n06-link:hover {
	background: var(--ink-lift);
	color: var(--ink-letters);
	text-decoration: underline;
}

.n06-bottom {
	margin-block-start: var(--gap-wide);
	padding-block-start: var(--gap-base);
	border-block-start: var(--str-thin) solid var(--ink-border);
	color: var(--ink-quiet);
	font-size: var(--sz-micro);
	text-align: center;
}

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

/* =========================================================================
   Cookie-Hinweis — COOK-09: linksbündige Platte
   ========================================================================= */
.n42 {
	position: fixed;
	inset-block-end: var(--gap-wide);
	inset-inline-start: var(--gap-wide);
	inset-inline-end: auto;
	z-index: 90;
	max-width: min(420px, calc(100vw - 2 * var(--gap-wide)));
	padding: var(--gap-wide);
	border-inline-start: var(--str-strong) solid var(--ink-core);
	border-start-end-radius: var(--crn-snug);
	border-end-end-radius: var(--crn-snug);
	background: var(--ink-layer);
	color: var(--ink-letters);
	box-shadow: var(--elev-wide);
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--spd-base) var(--bz-swing);
}

.n42[hidden] {
	display: none;
}

.n42.is-gone {
	clip-path: inset(0 0 100% 0);
	pointer-events: none;
}

.n42-fill {
	display: flex;
	flex-direction: column;
	gap: var(--gap-snug);
}

.n42-mark {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	border: var(--str-medium) solid var(--ink-core);
	border-radius: var(--crn-circle);
}

.n42-mark::before,
.n42-mark::after {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: var(--crn-circle);
	background: var(--ink-core);
}

.n42-mark::before {
	inset-block-start: 4px;
	inset-inline-start: 4px;
}

.n42-mark::after {
	inset-block-start: 9px;
	inset-inline-start: 9px;
}

.n42-note {
	margin: 0;
	color: var(--ink-letters);
	font-size: var(--sz-small);
	line-height: var(--ln-base);
}

.n42-actions {
	display: flex;
	gap: var(--gap-snug);
	justify-content: flex-start;
}

.n42-allow,
.n42-refuse {
	min-height: 40px;
	padding-inline: var(--gap-wide);
	border-radius: var(--crn-stadium);
	font-family: var(--ff-title);
	font-size: var(--sz-micro);
	font-weight: var(--wt-strong);
}

.n42-allow {
	border: none;
	background: var(--ink-core);
	color: var(--ink-back);
}

.n42-allow:hover {
	background: var(--ink-letters);
	color: var(--ink-back);
}

.n42-refuse {
	border: var(--str-thin) solid var(--ink-rule-bold);
	background: var(--ink-lift);
	color: var(--ink-letters);
}

.n42-refuse:hover {
	background: var(--ink-letters);
	color: var(--ink-back);
}

@media (max-width: 720px) {
	.n42 {
		inset-inline: var(--gap-snug);
		max-width: none;
		padding: 12px 14px;
	}

	.n42-note {
		font-size: 13px;
		line-height: 1.35;
	}

	.n42-allow,
	.n42-refuse {
		flex: 1 1 auto;
		min-height: 36px;
		padding-inline: 14px;
		font-size: 12px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	main {
		opacity: 1;
	}
}

/* =========================================================================
   Offer-Knopf — Farbe, Form und Bewegung aus scripts/cta-style.mjs
   ========================================================================= */
.sakoru-hit{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--gap-tiny);min-height:44px;border-radius:var(--crn-snug);font-size:15px;font-weight:500}
.sakoru-hit{
  background:#059669;color:#151515;text-decoration:none;text-transform:none;
  transition:background 0.22s ease-out,transform 0.22s ease-out;}
.sakoru-hit.sakoru-hit{color:#151515;text-decoration:none;}
.sakoru-hit:hover{background:#047857;color:#FFFFFF;animation:none}
.sakoru-hit.sakoru-hit:hover{color:#FFFFFF;text-decoration:none}
.sakoru-hit:hover::after{animation:none}
.sakoru-hit:active{background:#065F46;color:#FFFFFF}
.sakoru-hit:focus-visible{outline:3px solid #151515;outline-offset:3px}
.sakoru-hit{animation:sakoru-glow 1.75s ease-in-out infinite}
@keyframes sakoru-glow{0%{transform:translateY(0)}18.286%{transform:translateY(-2px)}51.429%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sakoru-hit,.sakoru-hit::after{animation:none!important;transition:none!important}}

/* Geometrie nachgezogen: der Generator erbt den waagerechten Innenabstand von
   den Menüpunkten, für eine Aktionsfläche ist das zu schmal. */
.sakoru-hit {
	padding-inline: var(--gap-roomy);
	font-family: var(--ff-title);
	font-weight: var(--wt-strong);
	letter-spacing: var(--trk-open);
	border-radius: var(--crn-stadium);
}

.h62-offer,
.t33-offer,
.c73-offer {
	min-height: 52px;
	font-size: var(--sz-small);
}

/* Sehr schmale Fenster: Logo, Menüknopf und Offer-Knopf treten eine Stufe zurück,
   damit die Zeile der Tablette bei 320px nicht über den Rand läuft. */
@media (max-width: 480px) {
	.u46-glyph img {
		height: 38px;
	}

	.u46-offer {
		padding-inline: var(--gap-base);
		font-size: 13px;
		letter-spacing: var(--trk-default);
	}
}

@media (max-width: 380px) {
	.u46-pill {
		gap: var(--gap-tiny);
		padding-inline: var(--gap-tiny);
	}

	.u46-glyph img {
		height: 34px;
	}

	.u46-menu-tap {
		padding-inline: var(--gap-tiny);
	}

	.u46-offer {
		padding-inline: var(--gap-snug);
		font-size: 11.5px;
	}
}

/* Das Attribut `hidden` muss die Anzeigeregel der Menüpunkte schlagen —
   sonst steht „Mehr anzeigen“ mit leerer Liste in der Zeile. */
.u46-unit[hidden] {
	display: none;
}

@media (max-width: 917px) {
  .u46-links,
  .u46-roll { display: none !important; }
  .u46-menu-tap { display: flex !important; }
}