/* Hooforia Landingpage – Layout und Komponenten
   Ergänzt assets/css/motion.css (Animationen). Aufbau:
   1 Schriften · 2 Design-Tokens · 3 Basis · 4 Layout und Textrollen · 5 Schalter und Buttons
   6 Kopfzeile · 7 Abschnitte (Hero bis Impressum) · 8 Maßstabsansichten · 9 Größere Bildschirme

   Mobile first: Die Regeln in den Abschnitten 1 bis 8 beschreiben das Telefon. Abschnitt 9 ergänzt sie
   mit min-width-Abfragen, aufsteigend nach Breite. Die Schwellen sind die alten max-width-Grenzen plus 1px
   (aus „bis 719px“ wird „ab 720px“), damit bei jeder Breite dasselbe Bild entsteht wie zuvor.
   Namen: Komponente__Teil--Variante. Inline-Styles bleiben nur dort, wo der Wert ein Datenwert ist:
   Balkenbreiten (summen.js schreibt sie ebenfalls), Position und Größe der Formate in den
   Maßstabsansichten sowie die Breite der Ansichtsrahmen (motion.js skaliert danach). */


/* ---------- 1 Schriften (Pfade relativ zu dieser Datei) ---------- */

/* cyrillic */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("https://jahrmedia.fsn1.your-objectstorage.com/hooforia.com/mediadaten/assets/fonts/jost-cyrillic.woff2") format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("https://jahrmedia.fsn1.your-objectstorage.com/hooforia.com/mediadaten/assets/fonts/jost-latin-ext.woff2") format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("https://jahrmedia.fsn1.your-objectstorage.com/hooforia.com/mediadaten/assets/fonts/jost-latin.woff2") format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- 2 Design-Tokens ---------- */

:root {
	--ink: #14140F;
	--ink-soft: #33322C;
	--muted: #55534A;
	--on-dark: #E3E1D6;
	--on-dark-muted: #CFCDBF;
	--black: #000;
	--white: #fff;
	--cream: #FAF9F5;
	--sand: #C1BC89;
	--olive: #6E6A3C;
	--olive-mid: #959059;
	--olive-pale: #DCDBC9;
	--track: #ECEBE2;
	--line: #E8E6DA;
	--line-strong: #E0DED2;

	--maxw: 1240px;
	--gutter: clamp(20px, 5vw, 64px);
	--section-y: clamp(72px, 9vw, 128px);
	--card-pad: clamp(24px, 3.5vw, 40px);
	--pill: 999px;
}


/* ---------- 3 Basis ---------- */

body { margin: 0 }
::selection { background: #C1BC89; color: #14140F }
::-moz-selection { background: #C1BC89; color: #14140F }
#partner::selection, #partner *::selection, #kontakt::selection, #kontakt *::selection { background: #C1BC89; color: #fff }
#partner::-moz-selection, #partner *::-moz-selection, #kontakt::-moz-selection, #kontakt *::-moz-selection { background: #C1BC89; color: #fff }

h1, h2, h3, p, dl, dd, figure { margin: 0 }
ul { margin: 0; padding: 0; list-style: none }
button { font-family: inherit }

/* Links ohne eigene Klasse. Die Spezifität ist null, damit jede Komponente (Buttons, Menü …)
   ihre Farbe ohne Zusatzregeln behält, auch beim Hover. Diese Regeln stehen deshalb vor den Komponenten. */
:where(a) { color: var(--olive) }
:where(a):hover { color: var(--ink) }

*:focus-visible { outline: 2px solid #000; outline-offset: 3px }
#kontakt a:focus-visible { outline-color: #fff }

/* Auszublendende Inhalte und Umschalter (Logik in assets/js/switch.js) */
[hidden] { display: none !important }
[data-swap] { display: grid }
[data-swap] > * { grid-area: 1/1 }
[data-swap] > [hidden] { display: block !important; visibility: hidden }
[data-switch][hidden] { display: inline-flex !important; visibility: hidden }
/* Print hat eigene Unterschalter: der Printformat-Schalter reserviert online keinen Platz, die Online-Schalter in Print auch nicht */
[data-switch="printform"][hidden] { display: none !important }
.switch-stack:has([data-switch="medium"] [data-value="print"][aria-pressed="true"]) .switch-row [data-switch][hidden]:not([data-switch="printform"]) { display: none !important }

.page {
	font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif;
	color: var(--ink);
	background: var(--white);
	min-width: 0;
	font-size: 17px;
	line-height: 1.5;
}


/* ---------- 4 Layout und Textrollen ---------- */

.container {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}
.section { padding: var(--section-y) 0 }
.section--cream { background: var(--cream) }
.section--dark { background: var(--ink); color: var(--white) }
.section--black { background: var(--black); color: var(--white) }
.section__inner { display: flex; flex-direction: column; gap: 48px }
.section__inner--lg { gap: 56px }
.section__inner--fluid { gap: clamp(48px, 6vw, 80px) }
.section__inner--sm { gap: 32px }

/* Abschnittskopf: Überschrift + Einleitung (links), Umschalter (rechts) */
.section-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px }
.section-bar--center { align-items: center; gap: 16px }
.section-head { display: flex; flex-direction: column; gap: 16px }
.section-head--grow { flex: 1 1 480px; min-width: 0 }
.section-head--grow-sm { flex: 1 1 320px; min-width: 0 }
/* Überschriften: Größe wächst gleichmäßig mit der Breite (320px ≈ 33px, 768px ≈ 48px, 1440px = 72px), lange Wörter brechen statt den Rand zu sprengen */
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance }
.section-title { font-weight: 800; font-size: clamp(32px, 1.4rem + 3.4vw, 72px); line-height: 1.02; letter-spacing: -0.02em }
.lead { font-size: 19px; color: var(--ink-soft) }
.lead--lg { font-size: 20px; line-height: 1.55 }
.lead--on-dark { color: var(--on-dark) }
.lead-swap { max-width: 640px }
.note { font-size: 14px; color: var(--muted) }
.note--on-dark { color: var(--on-dark-muted) }
.meta { font-size: 15px; color: var(--muted) }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand) }
.link--strong { font-weight: 600 }
.tnum { font-variant-numeric: tabular-nums }

/* Linie oben: Karten, Preislisten, Datenlisten (motion.js zeichnet sie beim Einblenden) */
.rule-top { border-top: 2px solid var(--black) }
.rule-top--sand { border-top-color: var(--sand) }

/* Einblendung der Ansichtsrahmen und Tabellen: nur waagerecht scrollen */
.scroll-x { overflow-x: auto; overflow-y: hidden }
.scroll-x--pad { padding-bottom: 24px }

/* Karte mit Linie oben */
.card-row { display: flex; flex-wrap: wrap; gap: 40px }
.card-row--lg { gap: 56px }
.card { flex: 1 1 280px; min-width: 0; padding-top: 20px; display: flex; flex-direction: column; gap: 16px }
.card--tight { gap: 8px }
.card--row { flex-direction: row; align-items: center }
.card__title { font-size: 17px; font-weight: 600 }
.card__title-note { font-weight: 400; color: var(--muted) }
.card__value { font-size: 36px; font-weight: 600; line-height: 1.1 }
.card__text { font-size: 16px; color: var(--muted) }
.card__big { font-size: clamp(56px, 24vw, 88px); font-weight: 600; line-height: 1; letter-spacing: -0.02em }
.card__lead { font-size: 17px; color: var(--ink-soft) }
.card__body { min-width: 0 }

/* Farbflächen für Balken und Legenden */
.bg-olive { background: var(--olive) }
.bg-olive-mid { background: var(--olive-mid) }
.bg-sand { background: var(--sand) }
.bg-pale { background: var(--olive-pale) }

/* Balken (Füllbreite steht als Datenwert inline) */
.bar-track { background: var(--track) }
.bar-track--md { height: 12px; border-radius: 6px }
.bar-track--sm { margin-top: 8px; height: 4px; border-radius: 2px }
.bar-fill { height: 100%; background: var(--olive-mid); border-radius: inherit }
.stack-bar { display: flex; gap: 3px; height: 14px }
.stack-bar__first { border-radius: 7px 0 0 7px }
.stack-bar__last { flex: 1 1 auto; border-radius: 0 7px 7px 0 }
.bar-placeholder { height: 14px; background: var(--olive-pale); border-radius: 7px }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px }
.legend__item { display: flex; align-items: center; gap: 8px }
.swatch { width: 12px; height: 12px; border-radius: 3px }
.age-list { display: flex; flex-direction: column; gap: 14px; padding-top: 8px }
.age-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px }
.age-row__label { font-size: 16px; font-weight: 500; white-space: nowrap }
.age-row__value { font-size: 14px; color: var(--muted); text-align: right }

/* Kennzahlen: auf dem Telefon untereinander, breitere Raster in Abschnitt 9 */
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px }
.kpi { flex: 1 1 max-content; min-width: 0; display: flex; flex-direction: column-reverse; gap: 6px }
.kpi__label { font-size: 16px; color: var(--muted) }
.kpi__value { font-size: clamp(40px, 4.4vw, 50px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }


/* ---------- 5 Schalter und Buttons ---------- */

/* Schalter: Zustände kommen aus aria-pressed (assets/js/switch.js), die Markierung aus motion.js.
   Auf dem Telefon füllt der Schalter die Breite und teilt sie unter den Buttons auf (ab 561px siehe Abschnitt 9). */
.switch { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; width: 100%; box-sizing: border-box; border-radius: var(--pill); background: var(--white) }
.switch--cream { background: var(--cream) }
.switch__btn { flex: 1 1 auto; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--pill); font-size: 15px; cursor: pointer }
.switch__btn--sm { font-size: 14px }
[role="group"] button { background: transparent; color: var(--ink); font-weight: 500 }
[role="group"] button[aria-pressed="true"] { background: var(--sand); font-weight: 600 }
[role="group"][data-variant="dark"] button[aria-pressed="true"] { background: #000; color: #fff }
/* Reichweite und Printformat haben vier Optionen: Auf dem Telefon 2 × 2 statt 3 + 1 (ab 561px wieder eine Zeile, Abschnitt 9) */
.switch:is([data-switch="reich"], [data-switch="printform"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 26px }
.switch-stack { width: 100%; margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px }
.switch-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px }

/* Buttons: Größe (--sm, --md), Farbe (--solid, --accent, --outline, --outline-light), Platz (--start, --tier).
   Hover und Klick-Effekt stehen in motion.css.
   Auf dem Telefon sind die Buttons in den Abschnitten gleich groß (48px) und füllen die Breite. Ihre Größen je Variante
   und die Breite nach Inhalt kommen erst ab 561px (Abschnitt 9). --sm gilt für die Kopfzeile und ist überall gleich. */
.btn {
	--btn-px: 20px;
	--btn-fit: 0px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 var(--btn-px);
	border-radius: var(--pill);
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	user-select: none;
}
.btn--sm { --btn-fit: 2px; min-height: 44px; font-size: 15px }
#top > :not(header) .btn { width: 100%; justify-content: center; align-self: stretch }
.btn--solid { background: var(--black); color: var(--white) }
.btn--accent { background: var(--sand); color: var(--ink); font-weight: 600 }
/* Der Rahmen nimmt 2 px der Fläche, die Innenabstände sind entsprechend kleiner (--btn-fit) */
.btn--outline { border: 1.5px solid var(--black); color: var(--ink); padding-inline: calc(var(--btn-px) - var(--btn-fit)) }
.btn--outline-light { border: 1.5px solid var(--white); color: var(--white); padding-inline: calc(var(--btn-px) - var(--btn-fit)) }
.btn--icon { gap: 10px }
.btn--sm.btn--icon { gap: 8px }
.btn--start { align-self: flex-start }
.btn--tier { align-self: flex-start; margin-top: auto; white-space: nowrap }
.btn__icon { display: block; width: auto }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px }


/* ---------- 6 Kopfzeile ---------- */

.site-header { background: var(--white); border-bottom: 1px solid var(--line) }
.site-header__inner { padding-block: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink) }
.brand__logo { width: 40px; height: 40px; display: block }
.brand__name { font-size: 15px; font-weight: 600; letter-spacing: 0.32em }
.site-nav { display: block }
.site-nav__link { display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500 }
.site-nav__link::after { display: none }
.site-nav__link.is-active { font-weight: 600 }
.site-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 20px }
.site-actions .btn { flex: 1 1 0; justify-content: center; min-height: 48px }

/* Menü: Schmal klappt es per Schalter unter der Kopfzeile auf (Logik in assets/js/switch.js).
   Wo Logo, Navigation und Buttons in eine Zeile passen (ab 1280px, Abschnitt 9), liegt es unsichtbar im Zeilenlayout (display: contents). */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1.5px solid var(--black); border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s }
.nav-toggle:hover { background: var(--black); color: #fff }
.nav-toggle .i-close, .nav-toggle[aria-expanded="true"] .i-open { display: none }
.nav-toggle[aria-expanded="true"] .i-close { display: block }
.site-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; box-sizing: border-box; padding: 4px var(--gutter) 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 32px -24px rgba(0, 0, 0, .35); max-height: calc(100vh - 80px); overflow-y: auto }
@supports (height: 100svh) {
	.site-menu { max-height: calc(100svh - 80px) }
}
.menu-open .site-menu { display: block }
#top > header.menu-open { background: #fff }
.social-links { display: flex; align-items: center; gap: 2px; padding-top: 20px }
.social-links a { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 0; border-radius: var(--pill); color: var(--ink); transition: background-color .2s, color .2s }
.social-links a:hover { background: var(--black); color: #fff }


/* ---------- 7 Abschnitte ---------- */

/* Hero */
.hero { display: flex; flex-direction: column; background: var(--cream) }
/* Hero-Bild. Schmal: Bild oben mit Dachzeile und Titel, der Text steht darunter auf Creme.
   Die Spalte mit dem Text löst sich auf (display: contents), ihre Kinder liegen im Raster der Figur:
   Zeile 1 gibt dem Bild die Höhe, Zeile 2 Dachzeile und Zeile 3 Titel (unten im Bild), Zeile 4 und 5 Text.
   Ab 720px liegt der Text im Bild (Abschnitt 9). */
.hero-media { margin: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto auto; min-height: 0 }
/* Rahmen schneidet Zoom und Parallaxe des Bildes ab (motion.css, motion.js) */
.hero-media__frame { grid-area: 1 / 1 / 4 / 2; position: relative; inset: 0; overflow: hidden; min-height: clamp(340px, 96vw, 480px) }
.hero-media__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 62% 30%); display: block }
/* Verlauf von unten: hält die weiße Überschrift auf hellem Untergrund lesbar */
.hero-media::after { content: ""; grid-area: 1 / 1 / 4 / 2; position: relative; z-index: 1; inset: auto; pointer-events: none; background: linear-gradient(to right, rgba(20, 20, 15, 0.5) 0%, rgba(20, 20, 15, 0.3) 55%, rgba(20, 20, 15, 0.1) 100%), linear-gradient(to top, rgba(20, 20, 15, 0.7) 0%, rgba(20, 20, 15, 0.34) 45%, rgba(20, 20, 15, 0) 80%) }
/* Text im Bild: Sand-Linie vor der Dachzeile */
.hero-media .hero__col--title { display: contents; pointer-events: none }
.hero-media .hero__col--title > * { grid-column: 1; min-width: 0; box-sizing: border-box; padding-inline: var(--gutter) }
.hero-media .hero__col--title .eyebrow { grid-row: 2; position: relative; z-index: 2; padding-top: 28px; display: flex; align-items: center; gap: 14px; color: var(--sand); text-shadow: 0 1px 12px rgba(20, 20, 15, 0.5) }
.hero-media .hero__col--title .eyebrow::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor }
.hero-media .hero__col--title .hero__title { grid-row: 3; position: relative; z-index: 2; margin-top: 14px; padding-bottom: 28px; color: var(--white); font-size: clamp(32px, 10.4vw, 56px); text-wrap: balance; text-shadow: 0 2px 28px rgba(20, 20, 15, 0.4); width: 60% }
.hero-media .hero__col--title .hero__sub { grid-row: 4; margin-top: 32px; font-size: clamp(20px, 6vw, 24px); color: var(--ink) }
.hero-media .hero__col--title .hero__lead { grid-row: 5; margin-top: 12px; max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--ink-soft) }
.hero-media__badge { grid-area: 1 / 1 / 4 / 2; align-self: end; justify-self: end; z-index: 2; right: 16px; bottom: 16px; margin: 0 16px 16px 0; font-size: 12px; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 5px 12px; border-radius: var(--pill); user-select: none }
.hero__inner { width: 100%; min-width: 0; padding-top: 40px; padding-bottom: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px 56px }
.hero__col { position: relative; flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 28px; max-width: 600px; z-index: 99 }
.hero__title { font-weight: 800; font-size: clamp(56px, 7.4vw, 82px); line-height: 0.94; letter-spacing: -0.025em }
.hero__lead { max-width: 34em }
.hero__story { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left }
.hero__story .hero__sub { font-size: clamp(22px, 2.2vw, 30px) }
.hero__story .hero__lead { max-width: 34em }
.hero__sub { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em }
.devider { display: grid; align-items: start; gap: 28px; padding-top: 28px }
.hero__deadline { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 48px }
.hero__deadline-date { font-size: 22px; font-weight: 600 }
.hero__deadline-link { font-size: 15px; font-weight: 500 }

/* Über Hooforia */
.about__intro { display: flex; flex-wrap: wrap; gap: 48px; align-items: center }
.about__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.about__lead { max-width: 30em }
.about__video { flex: 1.4 1 480px; min-width: 0; position: relative; aspect-ratio: 16 / 9; background: var(--black); border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center }
.about__video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.about__video.is-playing .video-play { display: none }
.video-play { position: absolute; width: 88px; height: 88px; border-radius: var(--pill); border: 0; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer }
.about__video-label { display: none; position: absolute; color: #fff; bottom: 10px; left: 10px; transition: opacity .3s; pointer-events: none }
.about__video.is-playing:not(.is-paused) .about__video-label { bottom: auto; top: 10px }
.about__video.is-playing:not(.is-paused):not(.is-hovered) .about__video-label { opacity: 0 }

/* Reichweite */
.channel { display: flex; align-items: center; gap: 16px }
.channel__logo { width: 56px; height: 56px; display: block }
.channel__name { font-size: 20px; font-weight: 600 }
.creator__avatar { width: 56px; height: 56px; border-radius: var(--pill); background: var(--track); flex: 0 0 auto }
.creator__name { font-size: 18px; font-weight: 600 }

/* Tabellen (Reichweite, Termine): schmal als Karten, ab 1025px als Tabelle (Abschnitt 9).
   Kartenregeln, die Abstand, Rahmen oder Schrift der Zellen berühren, stehen in :where() (Spezifität null):
   Die Zellregeln der Tabelle ab 1025px gewinnen dadurch ohne Zusatzaufwand. */
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.data-table--dates { font-size: 16px }
.data-table__caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: 14px; color: var(--muted) }
.data-table__th { text-align: left; font-weight: 600 }
.data-table__rowhead { text-align: left; font-weight: 500 }
.data-table__figure { font-size: 22px; font-weight: 500 }
.data-table__channel { display: inline-flex; align-items: center; gap: 12px }

.table-cards { display: flex; flex-direction: column; min-width: 0 }
.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.table-cards caption { order: 1 }
.table-cards tbody { display: block }
/* Die Zellen innerhalb einer Karte stehen zu zweit nebeneinander, ab 569px zu viert */
.table-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 12px; border-bottom: 1px solid var(--line) }
:where(.table-cards th[scope="row"]) { grid-column: 1/-1; padding: 0; border: 0 }
:where(.table-cards td) { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 0; border: 0 }
.table-cards:not(.data-table--dates) td::before { content: attr(data-label); font-size: 16px; font-weight: 500; color: var(--muted); hyphens: auto }
/* Der Balken ragt in den Zeilenabstand, damit der Wert auf einer Linie mit den Nachbarzellen steht */
.table-cards .bar-track--sm { margin-bottom: -12px }

/* Termine: statt Beschriftung in jeder Karte steht die Kopfzeile sticky unter der Navigation über den Karten.
   Sie hat dasselbe Raster wie die Karten, damit die Spalten übereinander liegen.
   .scroll-x darf hier nicht scrollen, sonst greift sticky nicht am Viewport. */
.scroll-x:has(.data-table--dates) { overflow: visible }
.data-table--dates thead { position: sticky; top: var(--header-h, 0px); z-index: 2; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; background: var(--white) }
.data-table--dates thead tr { padding-block: 10px; border-bottom: 2px solid var(--black) }
:where(.data-table--dates thead th) { padding: 0; border: 0; font-size: 13px; line-height: 1.25; hyphens: auto }
.data-table--dates thead th:first-child { grid-column: 1/-1 }

/* Preislisten */
.formats__prices { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.formats__prices .note + .note { margin-top: -16px }
.price-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 18px 0 18px 10px; border-bottom: 1px solid var(--line-strong) }
.price-row__swatch { width: 14px; height: 14px; border-radius: 3px; align-self: center }
.price-row__swatch--solid { background: var(--sand) }
.price-row__swatch--outline { border: 2px solid var(--olive); box-sizing: border-box }
.price-row__swatch--dashed { border: 1.5px dashed var(--olive); box-sizing: border-box }
.price-row__name { font-size: 18px; font-weight: 600 }
.price-row__price { font-weight: 600; text-align: right }
.price-row__price a { color: var(--ink) }
.price-row__price a:hover { color: var(--olive) }
.price-row__price--num { font-size: 20px; font-variant-numeric: tabular-nums }
.price-row__price--num span, .price-row__price--text span { font-size: 0.7em; vertical-align: top }
.price-row__price--text { font-size: 17px }
.price-row__detail { font-size: 15px; color: var(--muted) }
.price-row__detail--wide { grid-column: 2 / 4 }
.price-row__aux { font-size: 15px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }
.price-row__aux span { font-size: 0.9em; vertical-align: top }

/* Werbeformen */
.format-panel { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start }
.format-figure { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 14px }
.bundle-offers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px }
.bundle-offers__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: rgba(110, 106, 60, 0.05); border: 1px solid var(--line-strong); border-top: 3px solid var(--sand); border-radius: 6px }
.bundle-offers__book { font-size: 15px; color: var(--muted) }
.bundle-offers__pay { font-size: 20px; font-weight: 600; color: var(--ink) }
@media (max-width: 559px) {
	.bundle-offers { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) }
}

/* Academy */
.academy__intro { display: flex; flex-wrap: wrap; gap: 48px; align-items: center }
.academy__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.academy__text .lead--lg { max-width: 30em }
.academy__text .lead:not(.lead--lg) { max-width: 34em }
.academy__headline { font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--olive) }
.academy__media { flex: 1 1 380px; min-width: 0 }
.academy__team strong { font-weight: 600; color: var(--ink) }
.academy__statements { display: flex; flex-wrap: wrap; gap: 48px; align-items: center }
.academy__photo { flex: 1 1 380px; min-width: 0 }
.statements { flex: 1.2 1 380px; min-width: 0; padding-top: 24px; display: flex; flex-direction: column; gap: 20px }
.statements__lead { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-soft); max-width: 22em }
.statements strong { font-weight: 700; color: var(--ink) }
.statements .lead { max-width: 32em }
/* Academy Fotos */
.ap { position: relative; width: 100%; background: var(--track); border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; box-sizing: border-box }
.ap--tall { aspect-ratio: 4 / 5; max-height: 560px }
.ap--wide { aspect-ratio: 3 / 2; border-radius: 14px }
.ap__label { padding: 16px 20px; font-size: 15px; color: var(--muted) }
.ap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 10%; display: block }
.ap--tall .ap__img { object-position: 60% 60% }

/* Brandpartnerschaften */
.partners__lead { max-width: 40em }
.partners__headline { font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--sand); max-width: 24em }
/* Fließtext: erster Absatz sichtbar, Absätze 2 und 3 hinter dem Aufklapper, Schlusszeile immer sichtbar */
.partners__copy { display: flex; flex-direction: column; gap: 20px; max-width: 46em; font-size: 17px; line-height: 1.55; color: var(--on-dark) }
.partners__more-body { display: flex; flex-direction: column; gap: 20px; padding-top: 20px }
.partners__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--sand); list-style: none }
.partners__toggle::-webkit-details-marker { display: none }
/* Plus/Minus als Linien statt Textzeichen: sitzt exakt mittig im Kreis, unabhängig von der Schriftmetrik */
.partners__toggle::after { content: ""; flex: none; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: var(--pill); background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat }
.partners__more[open] > .partners__toggle::after { background-size: 10px 1.5px, 1.5px 0 }
#partner :focus-visible { outline-color: #fff }
.partners__closer { font-size: clamp(19px, 2vw, 22px); font-weight: 600; color: var(--white); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16) }
.tiers { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch }
/* Silber und Bronze haben keine Füllung auf dem Mouse-Glow: Sie bekommen die Abschnittsfarbe (siehe motion.css) */
.tier { flex: 1 1 300px; min-width: 0; background-color: var(--ink); border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 24px; padding: var(--card-pad); display: flex; flex-direction: column; gap: 24px; box-sizing: border-box }
.tier--gold { flex: 1.25 1 340px; background: #B3AC76; color: var(--ink); border: 0 }
.tier__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.16) }
.tier--gold .tier__head { border-bottom-color: rgba(20, 20, 15, 0.25) }
.tier__name { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em }
.tier__dot { width: 14px; height: 14px; border-radius: var(--pill) }
.tier__dot--gold { background: var(--olive) }
.tier__dot--silver { background: #C9C9C9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) }
.tier__dot--bronze { background: #CE8946; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) }
.tier__price { font-size: clamp(44px, 5vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.tier__price span { font-size: 0.4em; vertical-align: top }
.tier__list { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--on-dark) }
.tier--gold .tier__list { color: inherit }
.tier__item { display: flex; gap: 12px; align-items: flex-start }
.tier__check { flex: none; margin-top: 3px }
.partners__cta { display: flex; flex-direction: column; gap: 20px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.16); max-width: 46em }
.partners__cta .partners__closer { padding-top: 0; border-top: 0 }

/* Banner vor den Terminen: Kachel aus Covern und Tablets (832×548), die langsam nach rechts läuft.
   Die Kachel wiederholt sich nahtlos. Die Spur ist eine Kachelbreite breiter als das Banner und wandert um genau
   eine Kachelbreite, Anfang und Ende der Animation sehen gleich aus. Ohne Bewegung (reduced motion) steht sie still. */
.banner { --banner-h: clamp(300px, 36vw, 520px); --tile-w: calc(var(--banner-h) * 1712 / 548); position: relative; margin: 0; height: var(--banner-h); overflow: hidden; background: var(--white) }
.banner__track { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--tile-w) * -1); background: url("https://jahrmedia.fsn1.your-objectstorage.com/hooforia.com/mediadaten/assets/img/hooforia-banner-tile.jpg?v=5") repeat-x 0 0 / auto 100% }
@keyframes banner-scroll { from { transform: translateX(0) } to { transform: translateX(var(--tile-w)) } }
@media (prefers-reduced-motion: no-preference) {
	.banner__track { animation: banner-scroll 45s linear infinite; will-change: transform }
}

/* Termine */
.date-cards { display: flex; flex-wrap: wrap; gap: 20px }
.date-card { flex: 1 1 300px; min-width: 0; background: var(--cream); border-radius: 24px; padding: var(--card-pad); display: flex; flex-direction: column; gap: 12px }
.date-card--booking { flex: 1.3 1 380px; background: var(--sand) }
.date-card__label { font-size: 16px; font-weight: 500 }
.date-card__value { font-size: clamp(32px, 11.5vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -0.02em }
.date-card__text { font-size: 17px }
.date-card__text--narrow { max-width: 32em }
.date-card__cta { margin-top: 8px }

/* Status-Badges und Hervorhebungen in der Terminliste (termine.js setzt die Klassen) */
.t-badge { display: inline-block; margin: 2px 0 2px 8px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); white-space: nowrap }
.t-badge--released { font-weight: 500; padding-left: 0; padding-right: 0 }
.t-badge--next { background: var(--sand); border: 1px solid var(--sand) }
.t-badge--book { background: var(--cream); border: 1px solid var(--cream) }
.is-released { color: #6F6D63 }
.is-booking th[scope="row"], .is-booking td[data-label="Anzeigenschluss"] { font-weight: 600 }
/* Die Zeile des nächsten Anzeigenschlusses behält ihre Farbe auch beim Hover (siehe motion.css) */
#termine tbody tr.is-booking, #termine tbody tr.is-booking:hover { background-color: rgba(193, 188, 137, 0.8) }

/* Druckunterlagen */
.print-specs { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start }
/* Die Maßstabszeichnung ist fest 324px breit: Auf dem Telefon wird sie verkleinert wie die Ansichten in motion.js */
.print-figure { flex: 0 1 auto; display: flex; flex-direction: column; gap: 16px; zoom: .72 }
.print-figure__body { display: flex; gap: 14px; align-items: stretch }
.print-figure__col { display: flex; flex-direction: column; gap: 10px }
.print-figure__side { display: flex; gap: 6px; height: 330px; align-items: center }
.print-figure__caption { max-width: 300px }
.print-sheet { position: relative; width: 276px; height: 330px; background: var(--white); border: 1.5px solid var(--black); box-sizing: border-box; border-radius: 2px }
.print-sheet__area { position: absolute; border: 1.5px dashed var(--olive); box-sizing: border-box; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center }
.print-sheet__label { font-size: 14px; font-weight: 600 }
.print-sheet__size { font-size: 13px; color: var(--ink-soft) }
.dim { box-sizing: border-box }
.dim--h { width: 276px; height: 8px; border-left: 1px solid var(--black); border-right: 1px solid var(--black); border-bottom: 1px solid var(--black) }
.dim--v { width: 8px; height: 330px; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); border-right: 1px solid var(--black) }
.dim-label { font-size: 13px; font-weight: 500 }
.dim-label--h { width: 276px; text-align: center }
.dim-label--v { writing-mode: vertical-rl }
.spec-list { flex: 1 1 420px; min-width: 0 }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line-strong) }
.spec-row__term { font-size: 15px; color: var(--muted) }
.spec-row__value { font-size: 17px; font-weight: 500 }
.spec-row__value--wrap { overflow-wrap: anywhere }

/* Kontakt */
/* Mobil eine Spalte: Text, Ansprechpartnerin, Team, Marken. Ab 960px stehen Text und Ansprechpartnerin nebeneinander (siehe Abschnitt 9) */
.contact__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px) clamp(32px, 5vw, 72px) }
.contact__main { min-width: 0; display: flex; flex-direction: column; gap: 24px }
.contact__lead { line-height: 1.55; max-width: 30em }
.contact__aside { min-width: 0; display: flex; flex-direction: column }
.contact__primary, .team-member { min-width: 0; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; padding: clamp(20px, 5vw, 32px); border: 1.5px solid var(--ink-soft); border-radius: 24px; background: rgba(255, 255, 255, 0.03) }
.contact__primary { border-color: rgba(193, 188, 137, 0.45); background: rgba(193, 188, 137, 0.07) }
.contact__stack { display: flex; flex-direction: column; gap: 16px }
.contact__team { min-width: 0; display: flex; flex-direction: column; gap: 20px }
.contact__brands { min-width: 0; border-top: 1px solid var(--ink-soft); padding-top: clamp(40px, 6vw, 70px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px clamp(40px, 8vw, 128px) }
.contact-list { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ink-soft) }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.team-member { gap: 12px }
.person { display: flex; align-items: center; gap: 16px; min-width: 0 }
.person__info { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.person__name { font-size: 20px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere }
.person__name--lg { font-size: clamp(22px, 5.5vw, 26px) }
.person__role { font-size: 15px; line-height: 1.45; color: var(--on-dark-muted) }
.brand-lockup { display: flex; align-items: center; gap: 12px }
.brand-presented { display: flex; flex-direction: column; align-items: center; gap: 6px }
.brand-presented__label { font-size: 16px; color: var(--on-dark-muted) }
.brand-logo { display: block; max-width: 100%; height: auto }
.team-member > .contact-link { padding-top: 12px; border-top: 1px solid var(--ink-soft) }
.contact-link { display: flex; align-items: center; gap: 14px; min-height: 44px; color: var(--on-dark); text-decoration: none; font-size: 16px; line-height: 1.35 }
.contact-link > span:first-child { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--muted); border-radius: var(--pill); color: var(--sand); box-sizing: border-box; transition: background-color .2s, border-color .2s, color .2s }
.contact-link > span:last-child { min-width: 0; overflow-wrap: anywhere }
.contact-link:hover { color: #fff }
.contact-link:hover > span:first-child { background: var(--sand); border-color: var(--sand); color: var(--ink) }
.avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--muted); border-radius: var(--pill); overflow: hidden; background: #1F1F1A; color: var(--sand); font-weight: 600; box-sizing: border-box }
.avatar-lg { width: 72px; height: 72px; font-size: 24px }
.avatar-sm { width: 64px; height: 64px; font-size: 20px }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

/* Impressum */
.site-footer { background: var(--white); padding: clamp(48px, 6vw, 80px) 0 }
.footer__cols { display: flex; flex-wrap: wrap; gap: 32px 48px; font-size: 15px; line-height: 1.6; color: var(--ink-soft) }
.footer__col { flex: 1 1 240px; min-width: 0 }
.footer__col--narrow { flex-basis: 200px }
.footer__title { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink) }
.footer__legal { border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 72em }
.footer__legal-title { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink) }


/* ---------- 8 Maßstabsansichten (Werbeformen, Druckunterlagen) ----------
   Position und Größe jedes Formats stehen inline: Sie sind die Maßangaben der Ansicht. */

.mock-window { border: 1px solid #D9D7CB; border-radius: 14px; background: var(--white); overflow: hidden; box-sizing: border-box }
.mock-bar { height: 30px; background: var(--track); display: flex; align-items: center; padding: 0 12px; gap: 6px; position: relative }
.mock-bar__dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--white) }
.mock-bar__url { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted) }
.mock-mailhead { padding: 10px 16px; background: var(--track); display: flex; flex-direction: column; gap: 2px }
.mock-canvas { position: relative }
.mock-canvas--cream { background: var(--cream) }
.mock-canvas--phone { border-radius: 28px; background: var(--white); overflow: hidden }
.mock-canvas--phone-sm { border-radius: 20px; background: var(--white); overflow: hidden }
.mock-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px }
.mock-phone { background: var(--black) }
.mock-phone--lg { margin: 0 auto; padding: 12px; border-radius: 40px; box-sizing: border-box }
.mock-phone--sm { padding: 6px; border-radius: 26px }
.mock-head { position: absolute; border-bottom: 1px solid var(--track) }
.mock-logo { position: absolute; font-size: 9px; font-weight: 600; letter-spacing: 0.3em }
.mock-logo--center { font-size: 10px; text-align: center }
.mock-burger { position: absolute; background: #CFCDBF; border-radius: 1px; box-shadow: 0 5px 0 #CFCDBF, 0 10px 0 #CFCDBF }
.mock-column { position: absolute; background: var(--white) }
.mock-handle { position: absolute; font-size: 9px; font-weight: 600 }
.mock-sponsored { position: absolute; font-size: 8px; color: var(--muted) }
.mock-progress { position: absolute; background: var(--white); border-radius: 1px; opacity: 0.7 }

/* Platzhalter für Seiteninhalt */
.skel { position: absolute; border-radius: 2px }
.skel--nav { background: var(--line) }
.skel--head { background: #CFCDBF }
.skel--text { background: var(--track) }
.skel--img { background: var(--track); border-radius: 3px }
.skel--avatar { background: var(--track); border-radius: var(--pill) }

/* Werbeformate */
.ad-slot { position: absolute; background: var(--sand); display: flex; align-items: center; justify-content: center }
.ad-slot--col { flex-direction: column; gap: 2px }
.ad-slot--row { gap: 8px }
.ad-slot--round { border-radius: 3px }
.ad-slot--round-top { border-radius: 3px 3px 0 0 }
.ad-slot--print { border-radius: 1px }
.ad-slot--center { text-align: center }
.ad-slot__vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; white-space: nowrap }
.ad-native { position: absolute; border: 2px solid var(--olive); border-radius: 4px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px }
.ad-native--lg { gap: 10px; padding: 8px }
.ad-native__thumb { width: 52px; height: 44px; background: var(--sand); border-radius: 2px; flex: 0 0 auto }
.ad-native__thumb--lg { width: 120px; height: 80px }
.ad-native__text { display: flex; flex-direction: column; gap: 3px }
.ad-advertorial { position: absolute; border: 1.5px dashed var(--olive); border-radius: 4px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; gap: 2px }
.mock-title { font-size: 13px; font-weight: 600 }
.mock-title--sm { font-size: 12px }
.mock-subtitle { font-size: 11px; font-weight: 600 }
.mock-subtitle--tight { line-height: 1.2 }
.mock-size { font-size: 11px }
.mock-size--sm { font-size: 10px }
.mock-desc { font-size: 10px; color: var(--ink-soft) }

/* Heftseiten im Verhältnis (Print) */
.mock-pages { display: grid; grid-template-columns: repeat(auto-fill, 138px); justify-content: center; gap: 28px 32px }
.mock-page { display: flex; flex-direction: column; gap: 10px }
.mock-sheet { position: relative; width: 138px; height: 165px; background: var(--white); border: 1px solid var(--black); box-sizing: border-box; border-radius: 2px }
.mock-sheet__area { position: absolute; left: 14px; top: 16px; width: 108px; height: 132px; border: 1px dashed #CFCDBF; box-sizing: border-box }


/* ---------- 9 Größere Bildschirme ----------
   Aufsteigend nach Breite. Jede Schwelle ist die frühere Obergrenze plus 1px („bis 719px“ wurde „ab 720px“). */

/* Druckunterlagen: Die Maßstabszeichnung ist fest 324px breit und wird erst ab 360px nicht mehr verkleinert */
@media (min-width: 320px) {
	.print-figure { zoom: .85 }
}
@media (min-width: 360px) {
	.print-figure { zoom: 1 }
}

@media (min-width: 480px) {
	.date-card__value { font-size: clamp(44px, 5vw, 64px) }
}

/* Kennzahlen: 2 × 2, ab 1100px vier in einer Reihe (solange die breiteste Zahl hineinpasst) */
@media (min-width: 560px) {
	.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Telefon-Ausnahmen enden: Menü-Buttons nebeneinander, Buttons nach Variante und Inhalt, Schalter nach Inhalt, Datenlisten zweispaltig */
@media (min-width: 561px) {
	.site-actions { flex-direction: row }
	#top > :not(header) .btn { --btn-px: 28px; --btn-fit: 2px; width: auto; align-self: auto; min-height: 52px; font-size: 17px }
	#top > :not(header) .btn--md { --btn-px: 24px; min-height: 48px; font-size: 16px }
	#top > :not(header) :is(.btn--start, .btn--tier) { align-self: flex-start }
	.switch, .switch:is([data-switch="reich"], [data-switch="printform"]) { display: inline-flex; width: auto; box-sizing: content-box }
	.switch:is([data-switch="reich"], [data-switch="printform"]) { border-radius: var(--pill) }
	.switch-stack { width: auto; align-items: flex-end }
	.switch__btn { flex: 0 1 auto; padding: 0 22px }
	.switch__btn--wide { padding: 0 26px }
	.switch__btn--sm { padding: 0 18px }
	.spec-row { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 8px 24px }
}

/* Karten der Tabellen: Die Zellen stehen zu viert nebeneinander */
@media (min-width: 569px) {
	.table-cards tr { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* Kontakt: Buttons nebeneinander (die Regel für Button-Zeilen bis 835px würde sie sonst über die volle Breite ziehen), größere Avatare */
@media (min-width: 560px) {
	#top > #kontakt .btn-row .btn { width: auto }
	.avatar-lg { width: 96px; height: 96px; font-size: 30px }
	.avatar-sm { width: 72px; height: 72px; font-size: 22px }
	.person { gap: 20px }
	.person__name { font-size: 22px }
	.contact-link { font-size: 17px }
}

/* Kontakt: Auf dem Handy beide Buttons gleich hoch und gleich groß (zwischen 433px und 559px gelten sonst unterschiedliche Regeln) */
@media (max-width: 559px) {
	#top > #kontakt .btn-row .btn { min-height: 52px; font-size: 16px; line-height: 1.2 }
}

/* Kontakt: Team in zwei Spalten, Trennlinie und E-Mail sitzen in beiden Karten auf gleicher Höhe */
.team-member { justify-content: space-between }
@media (min-width: 720px) {
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
	.team-member .person { align-items: flex-start }
	.brand-presented { align-items: flex-start }
}

/* Kontakt: Text links, Ansprechpartnerin rechts; Team und Marken laufen über die volle Breite */
@media (min-width: 960px) {
	.contact__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center }
	.contact__team, .contact__brands { grid-column: 1 / -1 }
}

/* Ab 433px stehen die Buttons nebeneinander, solange sie in die Spalte passen, sonst umbrechen sie untereinander.
   Wichtig bei 720–900px: Der Hero ist dort zweispaltig, die rechte Spalte (~250px) ist schmaler als beide Buttons. */
@media (min-width: 433px) {
	.btn-row.devider { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px }
}

/* Bis 835px füllen die Buttons in den Button-Zeilen die volle Breite ihrer Spalte (untereinander) */
@media (max-width: 835px) {
	#top > :not(header) .btn-row .btn { width: auto; justify-content: center }
}
@media (max-width: 403px) {
	#top > :not(header) .btn-row .btn { width: 100% }
}

/* Buttons auf kleinen Handys (unter 433px): untereinander, volle Breite, engerer Abstand, 52px hoch für sichere Treffer, Text bricht nie aus dem Button */
@media (max-width: 432px) {
	/* Die kurzen Beschriftungen (Anfragen, Mediadaten) passen nebeneinander, beide Buttons gleich breit */
	.devider { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 24px; align-self: stretch; width: 100% }
	.btn-row { gap: 12px }
	#top > :not(header) .btn-row .btn { min-height: 52px; padding-inline: 16px; font-size: 16px; line-height: 1.2; text-wrap: balance }
	#top > :not(header) .btn-row .btn--outline { padding-inline: 14.5px }
}

/* Hero: Der Text liegt im Bild, die Spalte mit dem Text ist wieder ein eigener Kasten.
   Die Höhe des Bildes richtet sich nach dem Fenster, damit der Text darunter im ersten Blick anschneidet.
   Platz = Fensterhöhe − Kopfzeile (misst motion.js) − 120px Vorschau auf den Text darunter.
   Gewünscht sind 46vw (420px bis 620px); der Text im Bild gibt bei Bedarf mehr Höhe vor. */
@media (min-width: 720px) {
	.hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-top: clamp(48px, 7vw, 104px) }
	.hero-media { display: block; min-height: clamp(420px, 46vw, 620px) }
	@supports (height: 100svh) {
		.hero-media {
			--hero-room: calc(100svh - var(--header-full, 72px) - 120px);
			min-height: max(420px, min(clamp(420px, 46vw, 620px), var(--hero-room)));
		}
	}
	.hero-media__frame { position: absolute; min-height: auto }
	.hero-media__img { object-position: var(--hero-pos-d, 58% 30%) }
	/* Verlauf von oben und von links: hält die weiße Überschrift und den Text auf dem hellen Himmel lesbar, das Motiv rechts bleibt frei */
	.hero-media::after { position: absolute; z-index: auto; inset: 0; background: linear-gradient(to right, rgba(20, 20, 15, 0.5) 0%, rgba(20, 20, 15, 0.28) 25%, rgba(20, 20, 15, 0) 50%), linear-gradient(to bottom, rgba(20, 20, 15, 0.66) 0%, rgba(20, 20, 15, 0.34) 16%, rgba(20, 20, 15, 0) 52%) }
	/* Tablet: Der Text reicht weiter ins Bild, der Schatten von links läuft länger und bleibt rechts leicht bestehen */
	@media (max-width: 1024px) {
		.hero-media::after { background: linear-gradient(to right, rgba(20, 20, 15, 0.58) 0%, rgba(20, 20, 15, 0.38) 55%, rgba(20, 20, 15, 0.1) 100%), linear-gradient(to bottom, rgba(20, 20, 15, 0.66) 0%, rgba(20, 20, 15, 0.34) 36%, rgba(20, 20, 15, 0) 72%) }
	}
	/* Text im Bild: bündig mit dem Inhaltsraster */
	.hero-media .hero__col--title { display: flex; max-width: var(--maxw); margin-inline: auto; padding: clamp(28px, 5vw, 72px) var(--gutter) clamp(36px, 5vw, 72px); box-sizing: border-box; gap: 12px }
	.hero-media .hero__col--title > * { min-width: auto; box-sizing: content-box; padding-inline: 0 }
	.hero-media .hero__col--title .eyebrow { position: static; z-index: auto; padding-top: 0 }
	.hero-media .hero__col--title .hero__title { position: static; z-index: auto; margin-top: 0; padding-bottom: 0; font-size: clamp(40px, 7.4vw, 82px) }
	.hero-media .hero__col--title .hero__sub { margin-top: 20px; font-size: clamp(22px, 2.6vw, 30px); color: var(--white); text-shadow: 0 1px 14px rgba(20, 20, 15, 0.6) }
	.hero-media .hero__col--title .hero__lead { margin-top: 0; max-width: 28em; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 14px rgba(20, 20, 15, 0.6) }
	.hero-media__badge { position: absolute; margin: 0 }
	/* Zwischenüberschriften in einer Zeile */
	.hero__sub--line { white-space: nowrap }
}

/* Tabellen statt Karten (Reichweite, Termine) */
@media (min-width: 1025px) {
	.data-table--reach { min-width: 760px }
	.data-table--dates { min-width: 820px }
	.table-cards { display: table }
	.table-cards thead, .data-table--dates thead { display: table-header-group; position: static; top: auto; z-index: auto; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; background: transparent }
	.table-cards tbody { display: table-row-group }
	.table-cards tr { display: table-row; padding: 0; border-bottom: 0 }
	.data-table--dates thead tr { padding-block: 0; border-bottom: 0 }
	.table-cards td { display: table-cell }
	.table-cards:not(.data-table--dates) td::before { content: none }
	.table-cards .bar-track--sm { margin-bottom: 0 }
	.scroll-x:has(.data-table--dates) { overflow-x: auto; overflow-y: hidden }
	.data-table__th { padding: 12px 16px; border-bottom: 2px solid var(--black); font-size: 14px; line-height: inherit; hyphens: manual }
	.data-table__th--flush { padding-left: 0 }
	.data-table__rowhead { padding: 14px 16px; border-bottom: 1px solid var(--line) }
	.data-table__rowhead--roomy { padding: 20px 16px 20px 0; font-size: 17px }
	.data-table__cell { padding: 14px 16px; border-bottom: 1px solid var(--line) }
	.data-table__cell--roomy { padding: 20px 16px }
}

/* Kennzahlen: vier in einer Reihe */
@media (min-width: 1100px) {
	.kpis { display: flex; flex-wrap: wrap }
}

/* Kopfzeile: Logo, Navigation und Buttons in einer Zeile, kein Menü-Schalter */
@media (min-width: 1280px) {
	.nav-toggle { display: none }
	.site-menu, .menu-open .site-menu { display: contents }
	.site-nav { display: flex; flex-wrap: wrap; gap: 4px 15px; flex: 1 1 auto }
	.site-nav__link { display: block; align-items: normal; min-height: auto; box-sizing: content-box; padding: 10px 0; border-bottom: 0; font-size: 15px }
	.site-nav__link::after { display: block }
	.site-nav__link.is-active { font-weight: 500 }
	.site-actions { flex-wrap: wrap; padding-top: 0 }
	.site-actions .btn { flex: 0 1 auto; justify-content: normal; min-height: 44px }
	.social-links { order: 1; margin-right: -24px; padding-top: 0 }
	.social-links a { flex: 0 1 auto; width: 35px; height: 35px; min-height: auto }
	.site-menu > div:not(.social-links) { order: 2 }
}

/* Alleinstehende Textlinks bekommen auf Touch-Geräten eine Trefferfläche von 44px */
@media (pointer: coarse) {
	.hero__deadline-link { display: inline-flex; align-items: center; min-height: 44px }
}

/* „Über Hooforia" in einer Zeile: Die Wörter sind einzelne Inline-Blöcke (motion.js), daher bricht die Zeile sonst zwischen ihnen um */
#marke-titel { white-space: nowrap; font-size: min(clamp(32px, 1.4rem + 2.4vw, 60px), calc((100vw - 2 * var(--gutter)) / 7.6)) }