/* Anton (SIL OFL, siehe fonts/OFL.txt). Zwei Teildateien wie bei Google Fonts:
   der Browser lädt Latin-Ext nur, wenn ein Zeichen daraus auf der Seite vorkommt. */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Anton-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;
}
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Anton-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;
}
/* Schriften für die dünnen Texte und den Fliesstext (Schrift-Test, src/tools-ui.js), nicht bei Google oder Fontshare:
   selbst gehostet, alle SIL OFL (siehe fonts/OFL-*.txt). Geladen erst, wenn eine zu sehen ist. Martian und Overused
   variabel (eine Datei für alle Stärken), die anderen je Schnitt eine Datei. */
@font-face {
	font-family: 'Martian Grotesk';
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 75% 200%;
	font-display: swap;
	src: url('../fonts/MartianGrotesk-VF.woff2') format('woff2');
}
@font-face {
	font-family: 'Overused Grotesk';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/OverusedGrotesk-VF.woff2') format('woff2');
}
@font-face { font-family: 'Cotham Sans'; font-weight: 400; font-display: swap; src: url('../fonts/CothamSans-Regular.woff2') format('woff2'); } /* ohne Umlaute und ß */
@font-face { font-family: 'Absans'; font-weight: 400; font-display: swap; src: url('../fonts/Absans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Karrik'; font-weight: 400; font-display: swap; src: url('../fonts/Karrik-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Apfel Grotezk'; font-weight: 400; font-display: swap; src: url('../fonts/ApfelGrotezk-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Apfel Grotezk'; font-weight: 500; font-display: swap; src: url('../fonts/ApfelGrotezk-Mittel.woff2') format('woff2'); }
@font-face { font-family: 'Apfel Grotezk'; font-weight: 700; font-display: swap; src: url('../fonts/ApfelGrotezk-Fett.woff2') format('woff2'); }
@font-face { font-family: 'Apfel Grotezk'; font-weight: 900; font-display: swap; src: url('../fonts/ApfelGrotezk-Satt.woff2') format('woff2'); }

:root {
	--buzz-red: #ff0000;
	--buzz-blue: #000eff;
	--buzz-olive: #9e8801;
	--buzz-cyan: #8eecf6;
	--buzz-purple: #884ee1;
	--buzz-lime: #c8ff12;
	/* Laufweite aller 3D-Schrift ausser dem Hero, in em: die halbe mittlere Lücke von Anton (src/type/text3d.js, src/what/what.js) */
	--tracking-3d: -0.0265;
	/* Konturstärken der Textebenen 2 und 3 (in em, siehe .text-thick / .text-thin) */
	--outline-thick: 0.25;
	--outline-thin: 0.04;
	--color-bg: var(--buzz-red);
	--color-text: #111;
	--color-tagline: var(--buzz-olive);
	--color-tagline-outline: var(--buzz-cyan);
	--font-base: Anton, Impact, sans-serif;
	/* Raster: 5 Spalten. Die 3D-Views lesen diese Werte (src/what/what.js), Änderungen gelten also überall. */
	--grid-columns: 5;
	--grid-margin: 32px;
	--grid-gutter: 20px;
	--grid-max: 1280px; /* auf breiten Screens bleibt das Raster mittig, höchstens so breit */
	/* Innenabstand links und rechts, damit Inhalt im Raster liegt: Rand auf dem Handy, auf breiten Screens mittig in 1280px */
	--grid-inset: max(var(--grid-margin), calc((100% - var(--grid-max)) / 2 + var(--grid-margin)));
	/* Grösseneinheit der Views: auf dem Handy 1vw. Auf breiten Screens nach der Höhe, sonst würde die Schrift
	   mit der Fensterbreite riesig (ein Statement über 300px hoch). */
	--vu: 1vw;
	/* Breite einer Rasterspalte (in margin/padding: Prozent bezogen auf den Inhalt des Views) */
	--col: calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns));
	/* dieselbe Spaltenbreite als feste Länge (auch für Schriftgrössen nutzbar) */
	--col-px: calc((min(100vw, var(--grid-max)) - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns));
}

@media (min-width: 700px) {
	:root { --vu: min(1vw, 0.56svh); }
}

*, *::before, *::after { box-sizing: border-box; }
/* Sprungmarken gleiten statt zu springen. Zu sichtbaren Zielen (Claim -> View 2) gleitet src/glide.js langsamer, mit Ease-out. */
/* overflow-x: nie seitlich scrollen, auch wenn etwas über den Rand ragt (z. B. sehr grosse Schrift im Schrift-Test) */
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* manipulation: kein Zoomen per Doppeltipp (Doppeltipp ist das Pixel-Easteregg, src/pixel-egg.js), Zoomen mit zwei Fingern bleibt */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); touch-action: manipulation; }
img { max-width: 100%; height: auto; display: block; }

/* 3D-Leinwand fest hinter allen Views (siehe src/stage.js). lvh statt vh/dvh,
   damit sie nicht bei jedem Ein- und Ausblenden der mobilen Browserleiste neu skaliert.
   +100px: reicht unten über den Bildschirm hinaus, damit auch hinter Safaris Adressleiste Bild ist (z. B. das Video)
   und nicht nur die Seitenfarbe. */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: calc(100lvh + 100px); z-index: -1; pointer-events: none; }

/* Raster zum Einblenden (Orientierung beim Gestalten): ?grid in der Adresse oder zweimal schnell G (src/main.js).
   Zeigt das Raster oben: Spalten getönt, Rand und Abstände frei, höchstens --grid-max breit und mittig. */
html.show-grid body::after { content: ''; position: fixed; inset: 0 0 0 50%; z-index: 9999; width: min(100%, var(--grid-max)); translate: -50% 0; padding-inline: var(--grid-margin); pointer-events: none; background: repeating-linear-gradient(90deg, rgb(0 255 255 / 0.18) 0 calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)), transparent 0 calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + var(--grid-gutter))) content-box; outline: 1px solid rgb(0 255 255 / 0.5); outline-offset: calc(var(--grid-margin) * -1); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gutter); padding-inline: var(--grid-margin); max-width: var(--grid-max); margin-inline: auto; }
.grid > * { grid-column: 1 / -1; }

.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--grid-margin); }
.site-header nav ul { display: flex; gap: 1em; list-style: none; margin: 0; padding: 0; }

/* Views: jede füllt genau einen Bildschirm. svh ist die Höhe bei eingeblendeter Browserleiste,
   so verschwindet auf dem Handy nichts unter der Leiste.
   --view-bg: mit WebGL blendet der bildschirmfeste Hintergrund zu dieser Farbe über (src/stage.js), ohne WebGL färbt das CSS den Abschnitt. */
/* overflow-x: clip: was seitlich über den View ragt, macht die Seite nicht breiter (Handys würden sonst herauszoomen) */
.view { position: relative; overflow-x: clip; min-height: max(100svh, var(--view-min, 0px)); --v-face2: var(--v-side); --v-side2: var(--v-face); --v-copy: var(--v-face); --v-outline: var(--v-side); --v-metal2: 1; --metal: var(--v-metal, 0); }
/* Farbkombi je View, wählbar mit zweimal C oder ?colors (src/view-colors.js). Die Elemente lesen nur diese Variablen:
   --view-bg Fläche · --v-face/--v-side 3D (Vorderseite, Extrusion) · --v-face2/--v-side2 zweites 3D (falls es eins gibt,
   sonst die Farben getauscht) · --v-copy/--v-outline Text (Füllung, Kontur, sonst wie das 3D) ·
   --v-metal/--v-metal2 glänzendes Metall je 3D-Paar (1 oder 0, das zweite standardmässig an). */
/* Nur ohne JS oder ohne WebGL (no-webgl, src/main.js). Nicht schon beim Laden, bevor die Bühne steht: sonst blitzt
   der Hero kurz rot auf, statt mit dem grauen Intro zu beginnen. */
html:not(.js) .view, html.no-webgl .view { background: var(--view-bg); }

/* Wortgruppen, die nicht umbrechen sollen (z. B. Lead-Agentur) */
.nowrap { white-space: nowrap; }
@media (min-width: 700px) { .br-narrow { display: none; } } /* ~ in Texten: Umbruch nur auf dem Handy */

/* Nur für Screenreader, nie sichtbar. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Was WebGL in 3D zeigt, steht im HTML nur noch für Screenreader und Suche. Von Anfang an versteckt (js steht schon
   im <head>), nicht erst wenn die Bühne steht: sonst blitzt beim Laden kurz das HTML auf (z. B. BUZZ als blaue
   Schrift). Sichtbar nur ohne JS oder ohne WebGL. */
.js:not(.no-webgl) .gl-replaced { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Textebene (src/text/label.js): das CSS bestimmt Lage und Look, WebGL zeichnet den Text mit Kontur nach.
   Bis die 3D-Version steht (und ohne WebGL) zeigt das HTML selbst die Kontur. Danach bleibt es unsichtbar im Dokument,
   für Screenreader und Suche. Kontur in em: --text-outline-width. */
.gl-text { -webkit-text-stroke: calc(var(--text-outline-width, 0) * 2em) var(--text-outline-color, transparent); paint-order: stroke fill; stroke-linejoin: round; } /* runde Ecken (Safari; Chrome bleibt bei normalem Text eckig) */
.gl-text.is-mirrored { opacity: 0; }
/* Als HTML gezeigt statt in der Textebene (.gl-html, src/text/label.js), z. B. Textblöcke, die fest zusammen scrollen
   sollen. Kontur wie oben (.gl-text): die echte Kontur des Browsers ist auch bei dicken Konturen glatt. Ein Kranz aus
   Schatten (früher hier) gab treppige Kanten, weil sich die weichen Ränder der Kopien zu harten aufsummieren. */
.gl-text.gl-html { opacity: 1 !important; will-change: translate; }
/* Runde Ecken auch in Chrome (src/text/round-outline.js): die SVG-Ebene zeichnet den Text nach, das HTML darunter bleibt
   unsichtbar im Dokument (Auswahl, Screenreader, Suche) */
.gl-text.has-outline-svg { position: relative; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0; }
.gl-outline { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } /* !important: auch wenn warmUp die Textebene einmal gezeichnet hat (is-mirrored) */
/* Unsichtbares HTML nicht per langem Druck markieren (iOS zeigt sonst Auswahlgriffe über leeren Stellen) */
.gl-text.is-mirrored, .gl-3d.is-mirrored { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Schrift-Ebenen des Auftritts, gelten überall:
   1 3D-Schrift (.gl-3d), in verschiedenen Grössen
   2 Text mit dicker Kontur (.text-thick): Füllung --ink-1, Kontur --ink-2
   3 Text mit dünner Kontur (.text-thin): dieselben Farben, nur dünner. Dick/dünn unterscheidet genug und ist ruhiger.
   4 Fliesstext (.text-plain): ohne Kontur, immer gross und klein, in der Konturfarbe von 2 und 3 (--ink-2). Schrift,
     Grösse und Stärke wie 3 (Schrift-Test, src/tools-ui.js).
   Ohne Ebene: Sonderbuchstaben wie Hero, drehende Zahlen, CTA.
   Ein View oder Quiz-Schritt setzt nur --ink-1 und --ink-2. */
.text-thick { color: var(--ink-1); --text-outline-color: var(--ink-2); --text-outline-width: var(--outline-thick); }
.text-thin { color: var(--ink-1); --text-outline-color: var(--ink-2); --text-outline-width: var(--outline-thin); }
.text-plain { color: var(--ink-2); --text-outline-width: 0; text-transform: none; }

/* 1 Hero: der Ring ist 3D (src/hero/hero.js), hier liegt nur die Fläche, die das Ziehen annimmt.
   pan-y: senkrecht scrollt der Browser weiter selbst, waagrecht dreht der Ring. */
.view--hero { --view-bg: #ff0000; --v-face: #5cc4ff; --v-side: #1f6ee8; --v-face2: #6a8fd0; --v-side2: #1a30d8; --v-copy: #fff4e0; --v-outline: #2233ff; --field: #5cc4ff; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; }
.view--hero.is-dragging { cursor: grabbing; }
.view--hero:is(.is-bubbles, .is-wave, .is-letters) { cursor: auto; } /* Bubbles, Wave, Letters (src/hero/): nichts zum Drehen */
/* Über einem Buchstaben des Rings: antippen dreht ihn nach vorne (src/hero/hero.js), auch auf /brand */
.js .is-over-letter:not(.is-dragging) { cursor: pointer; }
.hero__title { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-weight: 400; font-size: min(40vw, 30svh); color: var(--v-face); }
/* Claim: feste Farben, Dunkelrot mit roter Kontur (nicht --v-copy, das nutzt auch die Ergebniskarte im Kundentest) */
.hero__tagline { --ink-1: #af1510; --ink-2: #ff0000; position: absolute; inset: auto 0 var(--grid-margin); margin: 0; text-align: center; text-transform: uppercase; line-height: 1; font-size: min(8.1vw, 4.5svh); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero__tagline:focus-visible { outline: 3px solid var(--color-tagline-outline); outline-offset: 6px; }
/* Intro (src/hero/hero.js): die Seite beginnt hellgrau wie ein leerer Browser und blendet zu Rot, dann kommt BUZZ.
   Ist der Ring gelandet, ploppt der Claim Wort für Wort auf: schnell hoch, gestreckt, einmal weich über den Platz
   hinaus, beim Landen kurz gestaucht. Die Textebene macht die Bewegung mit (src/text/label.js). */
/* Das Grau ist eine eigene Fläche über der 3D-Ebene (darunter ist schon alles rot) und blendet als CSS-Animation aus:
   so weich, auch wenn die 3D-Ebene beim ersten Laden stockt. intro-go setzt hero.js, sobald die Seite geladen ist, mit
   den Zeiten aus dem Hero-Panel. Kommt das Skript nicht, blendet es nach 4.7 s von selbst aus (der Notausgang in
   functions.php nimmt das Intro nach 5 s weg). */
html.intro::after { content: ''; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: calc(100lvh + 100px); background: var(--intro-bg, #f2f2f2); pointer-events: none; will-change: opacity; animation: intro-grey 0.3s ease-in-out 4.7s both; }
html.intro.intro-go::after { animation: intro-grey-go var(--intro-fade, 0.3s) ease-in-out var(--intro-hold, 0.25s) both; }
@keyframes intro-grey { to { opacity: 0; } }
@keyframes intro-grey-go { to { opacity: 0; } } /* eigener Name: so beginnt die Animation beim Setzen von intro-go neu */
.hero__tagline > span { display: inline-block; transform-origin: 50% 100%; }
/* Versteckt als (kurze) Animation statt mit transform: so erfährt die Textebene davon (animationstart/-end). */
html.intro .hero__tagline > span { animation: claim-hidden 0.01s both; }
@keyframes claim-hidden { to { transform: scale(0); } }
html.intro.intro-claim .hero__tagline > span { animation: claim-pop 0.45s both; animation-delay: calc(var(--i) * 0.08s); }
@keyframes claim-pop {
	0% { transform: translateY(0.6em) scale(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
	45% { transform: translateY(-0.14em) scale(0.92, 1.12); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
	72% { transform: translateY(0.02em) scale(1.07, 0.93); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
	100% { transform: none; }
}

/* 2 What: Textblock und Drehwort sind 3D (src/what/what.js). */
/* margin-top: View 2 beginnt erst nach der vollen Bildschirmhöhe (auch mit eingeklappten Leisten, lvh) plus 40 %.
   Sonst ragt die hintere Zeile wegen der Parallaxe schon unten in den Hero, auch unter die Adressleiste.
   Hintergrund: das Hellblau der Kontur von "We level up your socials". */
.view--what { --view-bg: #e0f62a; --v-face: #fffff0; --v-side: #888e9e; --v-face2: #cfd1d3; --v-side2: #888e9e; --v-copy: #3a3550; --v-outline: #888e9e; --field: #fffff0; margin-top: calc(100lvh - 100svh + 40lvh); display: grid; place-items: center; padding-inline: var(--grid-margin); touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; }
.view--what.is-dragging { cursor: grabbing; }
.what__text { margin: 0; font-weight: 400; font-size: min(14vw, 8svh); line-height: 1; text-align: center; text-transform: uppercase; color: var(--v-face); }

/* 3D-Schrift aus dem CSS (src/type/text3d.js): color = Flächen, --extrude = Extrusion, Raum über data-Attribute.
   Ohne WebGL zeigt eine Kontur in Extrusionsfarbe ungefähr den Look des Layouts. */
.gl-3d { display: block; width: max-content; white-space: nowrap; letter-spacing: calc(var(--tracking-3d) * 1em); -webkit-text-stroke: 0.12em var(--extrude, transparent); paint-order: stroke fill; }
.has-webgl .gl-3d.is-mirrored, .has-webgl .gl-image.is-mirrored { opacity: 0; }
/* Drehende 3D-Elemente kann man selbst drehen (src/spin-drag.js): waagrecht ziehen dreht, senkrecht scrollt. */
.is-spinnable { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-spinnable:not(a) { cursor: grab; }
.is-spinnable.is-dragging { cursor: grabbing; }

/* 3 Beliefs: darf länger als ein Bildschirm sein. Fliesstext in der Textebene, These mit dicker, Erklärung mit dünner Kontur. */
.view--beliefs { --view-bg: #fff4e0; --v-face: #ff2b2b; --v-side: #2233ff; --v-face2: #2233ff; --v-side2: #0e0e2c; --v-copy: #fff4e0; --v-outline: #2233ff; --field: #ff2b2b; padding: var(--grid-margin) var(--grid-inset) calc(var(--grid-margin) * 2); }
/* Titel wie die Statements (Views 4 und 7): gleiche Grösse und Zeilenhöhe, ein Wort pro Zeile, jedes auf eigener Tiefe.
   Treppe: SIND rechts unter WIR, auf dem Handy ZEUGT rechts unter ÜBER-, jeweils etwas hochgezogen. Die Wörter
   liegen in der Tiefe hintereinander, das spätere (vordere) überdeckt das frühere. */
.beliefs__title { margin: 0 0 20vh; font-weight: 400; font-size: calc(23.7 * var(--vu)); line-height: 1.05; text-transform: uppercase; color: var(--v-face); --extrude: var(--v-side); }
.beliefs__title .beliefs__sind { margin: -0.24em 0 0 1em; }
.beliefs__title .beliefs__narrow { display: none; }
@media (max-width: 699px) {
	.beliefs__title .beliefs__wide { display: none; }
	.beliefs__title .beliefs__narrow { display: block; }
	.beliefs__title .beliefs__uber { margin-left: 0.67em; }
	.beliefs__title .beliefs__zeugt { margin: -0.28em 0 0 1.24em; }
}
.beliefs { display: grid; gap: calc(var(--grid-gutter) * 2.4); margin: 0; padding: 0; list-style: none; }
/* minmax(0, 1fr): alle Spalten gleich breit, auch wenn eine grosse Zahl breiter ist als ihre Spalte. */
.belief { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--grid-gutter); align-items: start; }
.belief__number { grid-column: 1; grid-row: 1 / span 2; justify-self: center; font-size: calc(43.8 * var(--vu)); line-height: 0.92; color: var(--v-face2); --extrude: var(--v-side2); --metal: var(--v-metal2, 0); }
.belief__copy { grid-column: 2 / -1; }
.belief__claim, .belief__text { margin: 0; font-size: calc(8 * var(--vu)); line-height: 1.12; --ink-1: var(--v-copy); --ink-2: var(--v-outline); }
.belief__claim { text-transform: uppercase; line-height: 1.22; } /* Platz für die dicke Kontur (siehe .quiz__question) */
.belief__text { margin-top: 1em; } /* em = Grösse der Erklärung selbst */
.belief--flip .belief__number { grid-column: -2; }
.belief--flip .belief__copy { grid-column: 1 / -2; }
/* grid-template-rows oben: ist die Zahl höher als These und Erklärung, geht der Rest unter die Erklärung, sie bleibt nah an der These. */
@media (min-width: 700px) {
	/* Titel ab Spalte 2 */
	.beliefs__title { margin-left: calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) + var(--grid-gutter)); }
	/* Alle Blöcke ab Spalte 2, bündig mit dem Titel. Zahl | 3 Spalten Text */
	.belief__number { grid-column: 2; }
	.belief__copy { grid-column: 3 / span 3; }
	/* Spalte 1 frei | 3 Spalten Text | Zahl: der Text nimmt höchstens 3 Spalten, schrumpft aber auf seine längste Zeile,
	   die Zahl folgt direkt */
	.belief--flip { grid-template-columns: calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)) fit-content(calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) * 3 + 2 * var(--grid-gutter))) auto; justify-content: start; }
	.belief--flip .belief__copy { grid-column: 2; }
	.belief--flip .belief__number { grid-column: 3; justify-self: start; }
}

/* 4, 5, 8 Statements: grosse 3D-Zeilen, jede auf eigener Tiefenebene, Block knapp über der Mitte. */
.view--statement, .view--culture { display: flex; flex-direction: column; justify-content: center; gap: 0.35em; padding: var(--grid-margin) var(--grid-inset); font-size: calc(23.7 * var(--vu)); line-height: 1.05; }
.statement { margin: 0; font-size: inherit; font-weight: 400; color: var(--v-face); --extrude: var(--v-side); }
.view--statement { --view-bg: #ff2b2b; --v-face: #fff4e0; --v-side: #0e0e2c; --v-face2: #0e0e2c; --v-side2: #0e0e2c; --v-copy: #0e0e2c; --v-outline: #fff4e0; --field: #fff4e0; margin-top: 18vh; /* halber Abstand zu Überzeugung 3 darüber (früher 33vh) */ padding-bottom: calc(var(--grid-margin) + 24svh); }
/* 7 Kunden: «Und» wie die Statements oben, der ganze View ist die Spielfläche des Logo-Minispiels (src/logo-game.js):
   3D = «Und» und Plattform, Text = Hinweis unter der Plattform, Logos in ihren eigenen Farben. Plattform bei 75 % der
   Höhe, ein Streifen darum steuert sie, dort scrollt die Seite nicht. Genau ein ganzer Bildschirm hoch
   (lvh: mit eingeklappten Leisten), so ragt der nächste View nicht herein, wenn das «Und» oben steht.
   margin-top: das Rivella-Video steht länger. */
.view--clients { --view-bg: #fff3c4; --v-face: #007a73; --v-side: #2a0a3d; --v-face2: #e8173a; --v-side2: #2a0a3d; --v-copy: #2a0a3d; --v-outline: #ffcfd8; --field: #007a73; --view-min: 100lvh; margin-top: 20vh; padding: var(--grid-margin) var(--grid-inset) 0; font-size: calc(23.7 * var(--vu)); line-height: 1.05; }
.clients__title { position: relative; z-index: 1; text-transform: uppercase; }
.clients__game { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; }
.clients__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2vw; margin: 0; padding: 32svh var(--grid-inset) 0; list-style: none; }
.clients__logos img { display: block; width: 28vw; max-width: 200px; height: auto; }
.clients__pad, .clients__score { display: none; }
.has-webgl .clients__logos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.has-webgl .clients__pad { display: block; position: absolute; left: 0; right: 0; touch-action: none; } /* Höhe: src/logo-game.js */
/* Zähler in einer Zeile unter «Kunden», in den Textfarben des Views: Level links, gerettete Logos mittig, verlorene
   rechts, zusammen so breit wie «Kunden» (left, width und top setzt src/logo-game.js). Jeder ein eigener Block in
   seiner Spalte: eine wachsende Zahl verschiebt nur ihn selbst. */
.has-webgl .clients__score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: absolute; margin: 0; font-size: calc(5.2 * var(--vu)); line-height: 1.2; white-space: nowrap; --ink-1: var(--v-copy); --ink-2: var(--v-outline); pointer-events: none; }
.clients__stat { display: flex; gap: 0.25em; }
.clients__stat:nth-child(2) { justify-self: center; }
.clients__stat:nth-child(3) { justify-self: end; }

.view--culture { --view-bg: #6ae826; --v-face: #b18cfe; --v-side: #ff2600; --v-face2: #478cc8; --v-side2: #ff0000; --v-copy: #ff0000; --v-outline: #478cc8; --field: #b18cfe; margin-top: 25vh; padding-bottom: calc(var(--grid-margin) + 24svh); } /* margin-top: Luft zum Logo-Game darüber */
/* Desktop: erster Teil eines Statements ab Spalte 2, zweiter ab Spalte 3 */
@media (min-width: 700px) {
	.statement { margin-left: calc(var(--col) + var(--grid-gutter)); }
	.statement + .statement { margin-left: calc(2 * (var(--col) + var(--grid-gutter))); }
}

/* 6 Case: Teaser-Video als Hintergrund, Titel und Link-Block im oberen Teil. Mit WebGL zeichnet es die Leinwand (bildschirmfest, blendet über),
   das Video-Element bleibt nur als Quelle im Dokument. Ohne WebGL liegt es selbst hinter dem Inhalt. */
/* margin-top: rückt an "Be more like" heran (Lücke halb so gross wie ursprünglich).
   --view-min: Scrollstrecke über das Video, 1,16 Bildschirme (vorher 1,29). */
.view--case { --view-bg: #2233ff; --v-face: #ff9ecf; --v-side: #0e0e2c; --v-face2: #fff4e0; --v-side2: #0e0e2c; --v-copy: #fff4e0; --v-outline: #0e0e2c; --field: #ff9ecf; --cu: 1vw; --view-min: 116svh; margin-top: 21vh; /* rund 50vh mehr Abstand zu «No one likes ads» darüber als früher (-29svh), erst dann Rivella und Teaser */ isolation: isolate; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--grid-margin) + 8svh) var(--grid-margin) var(--grid-margin); overflow: hidden; }
.view__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.has-webgl .view__video { width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.case__title { margin: 0; padding-left: calc(10 * var(--cu)); font-weight: 400; font-size: calc(13 * var(--cu)); line-height: 1.03; text-transform: uppercase; color: var(--v-face); --extrude: var(--v-side); transition: opacity 0.3s; }
/* Blendet im Takt des Teasers aus (src/case-video.js). Das 3D folgt der Klasse selbst, das hier gilt fürs HTML ohne WebGL */
.case__title.is-out { opacity: 0; }
.case__link { display: block; width: max-content; white-space: nowrap; margin: 0.5em 0 0 calc(10 * var(--cu)); font-size: calc(7.4 * var(--cu)); line-height: 1; text-transform: uppercase; text-decoration: none; --ink-1: var(--v-copy); --ink-2: var(--v-outline); }
/* Desktop: Titel und Link im selben Verhältnis wie auf dem Handy. Block ab Spalte 2 wie die Statements. */
@media (min-width: 700px) {
	.view--case { --cu: calc(var(--col-px) / 40); --case-start: calc(var(--col) + var(--grid-gutter)); padding-inline: var(--grid-inset); }
	.case__title { margin-left: var(--case-start); }
	.case__link { margin-left: calc(var(--case-start) + 10 * var(--cu)); }
}

/* CTA (template-parts/cta.php): Satz im Kreis, dreht gegen den Uhrzeigersinn. Lime #c8ff12. */
.cta { display: block; aspect-ratio: 1; color: var(--buzz-lime); border-radius: 50%; -webkit-tap-highlight-color: transparent; transition: scale 0.2s cubic-bezier(0.2, 0, 0, 1); }
.cta svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; font-family: var(--font-base); }
.cta__ring { font-size: 38px; /* gleich gross wie TEST STARTEN */ transform-box: view-box; transform-origin: 100px 100px; animation: cta-spin 20s linear infinite; }
.cta__label { font-size: 38px; text-anchor: middle; }
.cta:hover { scale: 1.15; } /* kommt näher: der 3D-CTA folgt der Grösse des SVG (src/cta3d.js) */
.cta:active { scale: 0.95; }
.cta:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.has-webgl .cta.is-mirrored svg { opacity: 0; }
/* Das unsichtbare SVG muss sich nicht mitdrehen, das 3D-Objekt dreht selbst */
.cta.is-mirrored .cta__ring { animation: none; }
@keyframes cta-spin { to { rotate: -360deg; } }

/* Kleiner CTA fest unten rechts. Mit JS (src/cta.js) nicht über dem Hero, dem Case und dem Footer, ohne JS immer.
   Erscheinen mit weichem Überschwinger, Verschwinden mit kurzem Ausholen (wie die Hero-Akronyme). */
.cta--fixed { position: fixed; right: var(--grid-margin); bottom: calc(var(--grid-margin) + env(safe-area-inset-bottom)); z-index: 10; width: clamp(120px, 34vw, 168px); }
.js .cta--fixed:not(.is-shown) { visibility: hidden; }
.js .cta--fixed.is-shown { animation: cta-in 0.45s both; }
.js .cta--fixed.is-leaving { visibility: visible; animation: cta-out 0.3s both; }
/* Übergabe an den grossen CTA im Footer: ohne eigene Animation, der grosse läuft aus ihm heraus bzw. in ihn hinein. */
.js .cta--fixed.is-quiet { animation: none; }
/* Grosser CTA im Footer: wächst aus dem kleinen heraus, sobald der Footer den halben Bildschirm füllt (src/cta.js). */
.cta--big { width: calc(67 * var(--vu)); max-width: 420px; justify-self: center; }
.js .cta--big:not(.is-shown) { visibility: hidden; }
@keyframes cta-in {
	0% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
	60% { opacity: 1; transform: scale(1.08); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
	100% { transform: scale(1); }
}
@keyframes cta-out {
	0% { transform: scale(1); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
	30% { transform: scale(1.06); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
	100% { opacity: 0; transform: scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
	.cta__ring, .js .cta.is-shown, .js .cta.is-leaving { animation: none; }
}

/* 9 Footer: Titel und Social-Icons in 3D (src/type/text3d.js), Kontakt, grosser CTA, Impressum klappt darunter auf. */
/* Von unten aufgebaut (align-content: end): Metalinks knapp über dem unteren Rand, darüber Kontakt und Icons, Team und
   Titel. Der freie Platz bleibt oben: blendet der Browser unten eine Leiste ein (Safari), fehlt ganz unten auf der Seite
   höchstens etwas davon, der Titel bleibt im Bild. */
/* Textfarben des Footers gelten auch fürs Impressum darunter: es ist so gefärbt wie die Links im Footer */
.view--footer, .impressum { --v-copy: #ffffff; --v-outline: #1a30d8; }
.view--footer { --view-bg: #1f6ee8; --v-face: #ff7575; --v-side: #ff0000; --v-face2: #ff0000; --v-side2: #0e0e2c; --field: #ff7575; --ink-1: var(--v-copy); --ink-2: var(--v-outline); display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; row-gap: calc(var(--grid-margin) * 0.75); align-items: center; padding: var(--grid-margin) var(--grid-inset) calc(var(--grid-margin) / 2); color: var(--ink-1); font-size: calc(4.58 * var(--vu)); /* 18px auf dem iPhone (393px) */ line-height: 1.55; text-transform: uppercase; }
/* Titel «Wir sind» so gross wie die Statements, Farben wie das Instagram-Logo (.statement: --v-face/--v-side). Jedes
   Wort für sich, das zweite etwas tiefer versetzt */
.footer__title { font-size: calc(23.7 * var(--vu)); line-height: 1.05; }
.footer__title-line { display: flex; flex-wrap: wrap; column-gap: 0.22em; }
.footer__title-line > .gl-3d:nth-child(2n) { margin-top: 0.2em; }
/* Team (src/team.js): Porträts auf einem Ring in der 3D-Ebene. Er kreist um «Buzz», das senkrecht darunter steht, so
   gross wie der Titel, Buchstabe für Buchstabe leicht versetzt und etwas ineinander (Zeilenabstand unter der
   Versalhöhe 0.86). Name (Ebene 2, dicke Kontur, anders als sonst im Footer mit Kontur) und Position (Fliesstext) der
   Person vorne wie bei den Überzeugungen, linksbündig über der linken unteren Ecke des Porträts (Lage aus team.js),
   ploppen auf wie der Claim im Hero. Unten in der Bühne Platz dafür. Ohne WebGL eine Reihe mit allen, waagrecht
   scrollbar. */
.team { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-transform: none; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.team__stage { position: relative; display: grid; place-items: center; width: 100%; padding-bottom: calc(12 * var(--vu)); }
.team__word { margin: 0; padding-block: 0.1em; font-size: calc(23.7 * var(--vu)); font-weight: 400; line-height: 0.72; text-transform: uppercase; color: var(--v-face); --extrude: var(--v-side); }
.team__letter:nth-child(4n + 2) { margin-left: 0.3em; }
.team__letter:nth-child(4n + 3) { margin-left: 0.14em; }
.team__letter:nth-child(4n + 4) { margin-left: 0.48em; }
html:not(.has-webgl) .team__stage { display: none; }
.has-webgl .team { cursor: grab; }
.has-webgl .team.is-dragging { cursor: grabbing; }
.team__list { display: flex; gap: var(--grid-gutter); width: 100%; margin: 0; padding: 0; overflow-x: auto; list-style: none; }
.team__member { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.team__member img { display: block; height: calc(60 * var(--vu)); width: auto; }
.team__member-body { display: block; height: calc(60 * var(--vu)); aspect-ratio: 0.9; background: var(--v-face); border-radius: 50% 50% 0 0 / 35% 35% 0 0; } /* ohne Foto */
.team__member-name { text-transform: uppercase; }
.has-webgl .team__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.has-webgl) .team__caption { display: none; }
.team__caption { position: absolute; left: var(--caption-x, 0); top: var(--caption-y, 0); right: 0; margin: 0; text-align: left; pointer-events: none; }
.team__name, .team__role { display: block; width: fit-content; max-width: 100%; transform-origin: 0 100%; }
.team__name { font-size: calc(8 * var(--vu)); line-height: 1.22; text-transform: uppercase; }
.view--footer .team__name { --text-outline-width: var(--outline-thick); }
.team__role { font-size: calc(8 * var(--vu)); line-height: 1.12; color: var(--ink-1); white-space: pre-line; } /* Farbe wie die Füllung des Namens */
.team__caption > span { animation: team-out 0.25s both; }
.team__caption.is-shown > span { animation: claim-pop 0.45s both; }
.team__caption.is-shown > .team__role { animation-delay: 0.08s; }
@keyframes team-out { 30% { transform: scale(1.06); } to { transform: scale(0); } } /* holt kurz aus, dann weg */
.footer__top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--grid-gutter); }
.footer__address { font-style: normal; }
.footer__address-link, .footer__mail { display: block; width: max-content; text-decoration: none; }
.footer__address-link + .footer__mail { margin-top: 1em; } /* mehrere Adressen direkt untereinander */
.social { display: grid; grid-template-columns: repeat(2, calc(16 * var(--vu))); gap: calc(8.4 * var(--vu)) calc(9 * var(--vu)); margin: 0 calc(3 * var(--vu)) 0 0; padding: 0; list-style: none; }
/* Das dritte Icon mittig darunter, ein einzelnes mittig im selben Platz (die Adresse bleibt, wo sie ist) */
.social li:nth-child(3), .social li:only-child { grid-column: 1 / -1; justify-self: center; }
/* Nur ein Icon (vorerst Instagram): eine Spalte, sonst ist der Block neben der Adresse zu breit fürs Handy */
.social:has(> li:only-child) { grid-template-columns: calc(16 * var(--vu)); }
.social__link { display: block; width: calc(16 * var(--vu)); color: var(--v-face); --extrude: var(--v-side); }
.social__link svg { display: block; width: 100%; height: auto; fill: currentColor; }
.has-webgl .gl-3d-svg.is-mirrored svg { opacity: 0; }
/* Metalinks: auf dem Handy über die ganze Breite verteilt, auf Desktop zusammen in der Mitte */
.footer__bottom { display: flex; justify-content: space-between; align-items: baseline; } /* gleiche Grundlinie, auch wenn die Links kleiner sind als die Leiste */
@media (min-width: 700px) { .footer__bottom { justify-content: center; gap: 2.5em; } }
/* Handy: Adresse, Mail und Metalinks anderthalbmal so gross wie gestaltet (die dünnen Texte dann rund 12 statt 8 px) */
@media (max-width: 699px) { .footer__top, .footer__bottom { font-size: 1.5em; } }
/* Footer: Text und Links ohne Kontur */
.view--footer .gl-text { --text-outline-width: 0; }
/* Metalinks beim Hover und Impressum offen: 2px-Strich 0.6rem unter der Grundlinie, links und rechts 0.15rem kürzer
   (Hülle .meta-link, Grundlinie misst src/impressum.js). Auf mit ease-out, zu dreimal so schnell mit ease-in, wie das
   Impressum selbst. */
.meta-link { position: relative; }
.meta-link::after { content: ''; position: absolute; top: calc(var(--baseline, 1em) + 0.6rem); left: 0.15rem; right: 0.15rem; height: 2px; background: var(--ink-1); scale: 0 1; transition: scale 0.1s cubic-bezier(0.55, 0, 1, 0.45); }
.meta-link.is-open::after { scale: 1 1; transition: scale 0.3s cubic-bezier(0, 0.55, 0.45, 1); }
@media (hover: hover) { .meta-link:hover::after { scale: 1 1; transition: scale 0.3s cubic-bezier(0, 0.55, 0.45, 1); } }
.footer__bottom a, .impressum a { color: inherit; text-decoration: none; }

/* Impressum: auf und zu per Klick (src/impressum.js, is-open / is-closed), ohne JS über :target */
.impressum:not(:target):not(.is-open), .impressum.is-closed { display: none; }
.impressum { padding: var(--grid-margin) var(--grid-inset) 20svh; color: var(--v-copy); font-size: calc(4.58 * var(--vu)); line-height: 1.55; }
/* Text aus dem Editor (inc/home.php): Überschriften in Anton, Absätze als Fliesstext in der Schrift der dünnen Texte
   (Schrift-Test, src/tools-ui.js). Weiss wie bisher: die Konturfarbe von Ebene 4 wäre hier das Blau des Hintergrunds */
html.font-alt .impressum { font-family: var(--thin-font); font-weight: var(--thin-weight, 400); }
.impressum :is(h1, h2, h3, h4) { margin: 0; font: 400 1em/1.55 var(--font-base); }
.impressum p { margin: 0 0 1em; }
.impressum h3 { font-size: 0.85em; }
/* Credit so klein wie die Adresse im Footer (dünne Texte dort auf 44 %, src/tools-ui.js), Abstand rund 2,5 Zeilen des Impressums */
.impressum .impressum__credit { margin-top: 5.7em; font-size: 0.44em; }
/* Handy: mit der Adresse anderthalbmal so gross, Abstand gleich */
@media (max-width: 699px) { .impressum .impressum__credit { margin-top: 3.8em; font-size: 0.66em; } }
/* Desktop: Textblock ab Spalte 2 */
@media (min-width: 700px) { .impressum { padding-left: calc(var(--grid-inset) + var(--col-px) + var(--grid-gutter)); } }


/* Kundentest im Popover (template-parts/quiz.php, src/quiz/quiz.js). Jeder Schritt bringt sein Farbschema mit:
   die Variablen stehen auf dem Schritt (für seinen Inhalt) und auf dem Popover (für die Fläche, die überblendet).
   A, B, C drehen sich in 3D (color, --extrude), Fragen und Antworten laufen über die Textebene mit Kontur.
   Beides zeichnet eine eigene kleine Bühne im Popover (src/overlay-stage.js), weil es über der Seite liegt.
   Frage = Ebene 2, Antworten und Ergebnissatz = Ebene 3, A/B/C = Ebene 1 in den Farben der Frage.
   1 und 2 aus dem Layout, 3 wie «Wir sind überzeugt», 4 wie «Hype dies», 5 eigenes Schema aus Farben der Seite,
   das Ergebnis wie der Hero (src/quiz/quiz.js). */
/* Jeder Schritt hat seine eigenen 3D-Farben oder keine: nichts vom gerade gezeigten Schritt erben (Dialog) */
.quiz__step { --quiz-face: initial; --quiz-side: initial; }
.quiz[data-step="0"], .quiz__step[data-step="0"] { --quiz-bg: #c9a4e9; --ink-1: #734617; --ink-2: #60a13a; }
.quiz[data-step="1"], .quiz__step[data-step="1"] { --quiz-bg: #ffcfd8; --ink-1: #f93f03; --ink-2: #223df2; }
/* Frage 3 in den Farben von «Wir sind überzeugt»: die Frage wie die Thesen (Creme, blaue Kontur), die Antworten blau wie
   der Fliesstext dort, A B C wie der Titel (Rot, blaue Extrusion) */
.quiz[data-step="2"], .quiz__step[data-step="2"] { --quiz-bg: #fff4e0; --ink-1: #fff4e0; --ink-2: #2233ff; --quiz-face: #ff2b2b; --quiz-side: #2233ff; }
.quiz__step[data-step="2"] .quiz__text { --ink-1: #2233ff; --ink-2: #fff4e0; }
/* Frage 4 in den Farben von «Hype dies. Culture lives!»: Text dunkelviolett mit rosa Kontur, A B C wie die 3D-Zeilen
   (Petrol, violette Extrusion) */
.quiz[data-step="3"], .quiz__step[data-step="3"] { --quiz-bg: #fff3c4; --ink-1: #2a0a3d; --ink-2: #ffcfd8; --quiz-face: #007a73; --quiz-side: #2a0a3d; }
/* Frage 5: eigenes Schema aus den Farben der Seite, leitet zum roten Ergebnis (Hero) über: Himmelblau wie die
   Buchstaben im Hero, Text tiefblau mit cremefarbener Kontur, A B C rot */
.quiz[data-step="4"], .quiz__step[data-step="4"] { --quiz-bg: #5cc4ff; --ink-1: #1a30d8; --ink-2: #fff4e0; --quiz-face: #ff2b2b; --quiz-side: #1a30d8; }
.quiz[data-step="5"], .quiz__step[data-step="5"] { --quiz-bg: #46b028; --ink-1: #da1de0; --ink-2: #4137a1; }

[hidden] { display: none !important; }
/* Seite dahinter fest, auch kein Nachfedern (iOS). Die Stelle merkt sich src/scroll-anchor.js. */
html.is-quiz-open, html.is-popover-open { overflow: hidden; overscroll-behavior: none; }
.video-popover, .quiz { overscroll-behavior: contain; }
.video-popover { touch-action: none; }

/* Das Popover füllt den Bildschirm bis auf einen Rand, auf breiten Screens bleibt es handybreit. */
/* Bis unter die Leisten des Browsers wie die 3D-Fläche (.stage): so hoch wie der grosse Viewport und etwas mehr, der
   Inhalt bleibt im sichtbaren Bereich (Innenabstand unten = was unter der Leiste liegt) */
.quiz { --quiz-ink: #4d3f12; position: fixed; inset: 0 auto auto 0; width: 100%; max-width: none; height: calc(100lvh + 100px); max-height: none; margin: 0; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(100lvh + 100px - 100dvh + max(20px, env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); border: 0; background: transparent; overflow: hidden; color: var(--buzz-lime); font-family: var(--font-base); }
.quiz::backdrop { background: var(--buzz-red); }
/* Untergrund um die Karte: rot, beim Ergebnis ganz blau (src/quiz/quiz.js). Der Dialog selbst trägt die Farbe, damit sie
   bis unter die Leisten reicht; blendet beim Öffnen und Schliessen mit dem Hintergrund (::backdrop) */
.quiz { background: var(--quiz-backdrop, var(--buzz-red)); transition: background-color 0.6s; }
.quiz[open] { animation: quiz-bg-in 0.2s backwards; }
.quiz.is-closing { --quiz-backdrop: transparent; transition-duration: 0.3s; }
@keyframes quiz-bg-in { from { background-color: transparent; } }
.quiz__card { --quiz-size: clamp(22px, 8vw, 34px); --quiz-pad: 12px; --quiz-indent: calc(var(--quiz-pad) + 1.85em); /* Spalte der Antworttexte */ position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; max-width: 440px; margin-inline: auto; border-radius: 22px; background: var(--quiz-bg); transition: background-color 0.3s 0.1s; overflow: hidden; }
.quiz__stage { grid-area: 1 / 1; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.quiz__body { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; align-content: start; min-height: 0; padding: 16px var(--quiz-pad) var(--quiz-pad); overflow: hidden auto; overscroll-behavior: contain; }

/* Logo: der CTA-Satz im Kreis, in der Mitte der Schritt. */
.quiz__logo { position: relative; width: 120px; aspect-ratio: 1; margin: 14px auto 28px; }
.quiz__logo svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; font-family: var(--font-base); }
.quiz__ring { font-size: 34px; transform-box: view-box; transform-origin: 100px 100px; animation: cta-spin 20s linear infinite; }
.quiz__count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; line-height: 1; text-transform: uppercase; white-space: nowrap; }

/* Schritte liegen übereinander, damit beim Wechsel der alte hinaus- und der neue hereingleiten kann. */
.quiz__steps { display: grid; align-items: start; }
.quiz__step { grid-area: 1 / 1; font-size: calc(var(--quiz-size) * var(--quiz-fit, 1)); line-height: 1.1; text-transform: uppercase; outline: none; }
.quiz__question { margin: 0 0 0.3em; padding: 0 var(--quiz-pad) 0 var(--quiz-indent); font: inherit; }
/* Überschriften mit dicker Kontur: mehr Zeilenabstand, sonst deckt die Kontur (0.3 em) die Zeile darüber zu
   (Anton-Versalien sind 0.86 em hoch: bei 1.1 blieben nur 0.24 em dazwischen) */
.quiz__question, .quiz__match { line-height: 1.22; }
.quiz__answer { position: relative; display: grid; grid-template-columns: 1.6em 1fr; column-gap: 0.25em; align-items: start; margin-bottom: 0.15em; padding: 0.3em var(--quiz-pad); border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quiz__answer > span { position: relative; }
.quiz__text, .quiz__sentence, .quiz__punchline { font-size: 0.85em; } /* Antworten und Fliesstext im Ergebnis etwas kleiner als die Frage */
.quiz__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* A B C: eigene 3D-Farben je Schritt (--quiz-face/--quiz-side), sonst die Textfarben */
.quiz__letter { justify-self: center; margin-top: 0.035em; font-size: 3.15em; line-height: 0.86; color: var(--quiz-face, var(--ink-1)); --extrude: var(--quiz-side, var(--ink-2)); }
/* Gewählte Antwort: Lime-Fläche ploppt auf, kurz etwas breiter und flacher, dann in Form. */
.quiz__answer::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--buzz-lime); opacity: 0; scale: 0.94; transition: opacity 0.15s, scale 0.15s; }
.quiz__answer:has(:checked)::before { opacity: 1; scale: 1; animation: quiz-pick 0.4s both; }
.quiz__answer:has(:focus-visible) { outline: 2px solid var(--buzz-lime); outline-offset: 2px; }
@media (hover: hover) {
	.quiz__answer:hover:not(:has(:checked))::before { opacity: 0.3; scale: 1; }
}
@keyframes quiz-pick {
	0% { opacity: 0; scale: 0.9 0.9; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
	55% { opacity: 1; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
	100% { scale: 1; }
}

/* Ergebnis: in der Spalte der Antworttexte. */
.quiz__result { padding: 0 var(--quiz-pad) 0 var(--quiz-indent); }
/* Das Formular steht im Ergebnis-Schritt mittig im Platz unter dem Text: der Schritt füllt die Höhe, das Formular hat
   oben und unten automatischen Abstand. Seitlich so breit wie die Karte (ohne den Einzug der Texte) */
.quiz__result { display: flex; flex-direction: column; align-self: stretch; }
.quiz__result .quiz__send { margin: auto calc(-1 * var(--quiz-pad)) auto calc(-1 * var(--quiz-indent)); padding: 1em 0 0; text-transform: none; }
.quiz__match { margin: 0 0 0.9em; }
.quiz__match span { display: block; }
.quiz__outcome p { margin: 0; }
.quiz__punchline { margin: 0.9em 0 0; }

/* Unten: Zurück und Weiter, im Ergebnis stattdessen das Formular. */
.quiz__nav, .quiz__send { display: grid; gap: 12px; padding: 0 var(--quiz-pad) var(--quiz-pad); }
.quiz__nav { grid-template-columns: 52px 1fr; }
.quiz.is-result .quiz__nav, .quiz:not(.is-result) .quiz__send { display: none; }
.quiz__button { height: 46px; padding: 0 16px; border: 1.5px solid var(--buzz-lime); border-radius: 8px; background: var(--buzz-lime); color: var(--quiz-ink); font: 20px/1 var(--font-base); text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s, color 0.15s, scale 0.2s cubic-bezier(0.2, 0, 0, 1); }
.quiz__button:active:not(:disabled) { scale: 0.96; }
.quiz__button:disabled { background: transparent; color: color-mix(in srgb, var(--buzz-lime) 55%, transparent); cursor: default; }
.quiz__button:focus-visible, .quiz__close:focus-visible { outline: 2px solid var(--buzz-lime); outline-offset: 3px; }
/* Eingabe wie der Fliesstext im Ergebnis: dieselbe Schrift, Grösse und Farbe (Schrift-Test, src/tools-ui.js) */
.quiz__email { height: 46px; padding: 0 16px; border: 1.5px solid var(--buzz-lime); border-radius: 8px; background: transparent; color: var(--ink-1); font: var(--thin-weight, 400) 0.85em/1.2 var(--thin-font, var(--font-base)); }
.quiz__email::placeholder { color: var(--ink-1); opacity: 1; }
.quiz__email:focus { outline: 2px solid var(--buzz-lime); outline-offset: 2px; }
.quiz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Hinweis unter dem Abschicken, klein und ruhig */
.quiz__privacy { margin: -2px 0 0; font: 13px/1.4 system-ui, -apple-system, sans-serif; text-align: center; opacity: 0.85; }
.quiz__privacy a { color: inherit; }
.quiz.is-sent .quiz__privacy { display: none; }
.quiz__status { margin: 0; font-size: 18px; line-height: 1.2; text-align: center; text-transform: uppercase; }
.quiz__status:empty { display: none; }
.quiz.is-sending .quiz__submit { opacity: 0.6; cursor: progress; }
.quiz.is-sent .quiz__email, .quiz.is-sent .quiz__submit { display: none; }
.quiz.is-sent .quiz__status { padding: 8px 0 4px; font-size: 26px; }

.quiz__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--buzz-lime); border-radius: 50%; background: none; color: var(--buzz-lime); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quiz__close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Auf: ploppt mit weichem Überschwinger auf. Zu: kurzes Ausholen, dann weg. */
.quiz[open] .quiz__card { animation: quiz-in 0.5s both; }
.quiz[open]::backdrop { animation: quiz-fade 0.2s both; }
.quiz.is-closing .quiz__card { animation: quiz-out 0.3s both; }
.quiz.is-closing::backdrop { animation: quiz-fade 0.3s reverse both; }
@keyframes quiz-in {
	0% { opacity: 0; transform: translateY(6%) scale(0.86); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
	60% { opacity: 1; transform: translateY(-0.5%) scale(1.02); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
	100% { transform: none; }
}
@keyframes quiz-out {
	0% { transform: none; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
	30% { transform: scale(1.02); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
	100% { opacity: 0; transform: translateY(6%) scale(0.86); }
}
@keyframes quiz-fade { from { opacity: 0; } }

/* Case-Video im Kino-Modus (template-parts/video.php, src/video-popover.js): alles blendet zu Schwarz, das Video
   steht mittig, so gross wie es in 16:9 passt, der Schliessen-Knopf oben rechts am Bildschirm. */
.video-popover { position: fixed; inset: 0; display: grid; place-items: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border: 0; background: transparent; overflow: hidden; }
.video-popover:not([open]) { display: none; }
.video-popover::backdrop { background: #000; }
/* So breit wie möglich, aber in der Höhe mit Platz für den Knopf oben (je 64px oben und unten) */
.video-popover__card { width: min(100%, calc((100svh - 128px) * 16 / 9)); }
.video-popover__frame { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video-popover__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-popover__close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); border-color: #c8c8c8; color: #c8c8c8; }
.video-popover__close:focus-visible { outline-color: #c8c8c8; }
/* Auf: erst wird es schwarz, dann blendet das Video weich ein. Zu: Video aus, dann das Schwarz. */
.video-popover[open]::backdrop { animation: cinema-fade 0.4s both; }
.video-popover[open] .video-popover__card, .video-popover[open] .video-popover__close { animation: cinema-in 0.5s 0.25s both; }
.video-popover.is-closing .video-popover__card, .video-popover.is-closing .video-popover__close { animation: cinema-out 0.25s both; }
.video-popover.is-closing::backdrop { animation: cinema-fade 0.4s 0.1s reverse both; }
@keyframes cinema-fade { from { opacity: 0; } }
@keyframes cinema-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cinema-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.quiz__ring, .quiz[open] .quiz__card, .quiz[open]::backdrop, .quiz__answer:has(:checked)::before { animation: none; }
	.video-popover[open] .video-popover__card, .video-popover[open] .video-popover__close, .video-popover[open]::backdrop { animation: none; }
}

/* Einstell-Panels (src/dial.js, DialKit). Etwas breiter als DialKit vorgibt, damit die Farbreihen Platz haben.
   Farben und Schrift ohne die Leiste von DialKit (Versionen, Werte kopieren): beide stehen in der Adresse, der
   Link-Knopf bei den Farben kopiert sie zusammen. */
.dialkit-root .dialkit-panel-inner[data-collapsed="false"] { width: min(380px, calc(100vw - 24px)) !important; }
.dialkit-folder-section:has(> .dialkit-folder-header :is([aria-label^="Farben"], [aria-label="Schrift"], [aria-label="Logo-Game"], [aria-label="Hero"])) .dialkit-panel-section-toolbar-clip { display: none; }

/* Farben (src/view-colors.js): eigener Inhalt im Stil von DialKit. Kürzel, aktuelle Farben mit Metall-Haken, Knöpfe,
   darunter die Paletten des Views als Farbreihen. Alle Reihen im selben Raster (--bz-cols), die Felder stehen
   untereinander. */
/* Logo-Game (src/game-panel.js): Level als Knöpfe im Stil der DialKit-Schalter, je zehn in einer Reihe; Verloren als
   Schalter wie bei DialKit */
.bz-game { display: grid; gap: var(--dial-row-gap); }
/* Schalter mit eigenen Werten (segmentedRow in src/dial.js): Hero, Verloren, Level-Knöpfe */
:is(.bz-game, .bz-seg) .dialkit-segmented-button { border-radius: 6px; }
:is(.bz-game, .bz-seg) .dialkit-segmented-button[data-active="true"] { background: var(--dial-surface-active); }
:is(.bz-game, .bz-seg) .dialkit-segmented-button[data-active="false"]:hover { color: var(--dial-text-primary); }
/* Hero-Variante: Bubbles ist geparkt, hinten und etwas abgesetzt */
.bz-hero-mode .dialkit-segmented-button[data-value="bubbles"] { margin-left: 6px; }
.bz-hero-mode .dialkit-segmented-button[data-value="bubbles"][data-active="false"] { opacity: 0.55; }
.bz-level { display: grid; gap: 4px; padding: 8px 8px 6px 12px; background: var(--dial-surface); border-radius: var(--dial-radius); }
.bz-level__label { font-size: 13px; font-weight: 500; line-height: 17px; color: var(--dial-text-label); }
.bz-level .bz-level__buttons { display: grid; grid-template-columns: repeat(10, 1fr); padding: 0; margin-left: -4px; } /* doppelte Klasse: DialKits CSS lädt später */
.bz-level .dialkit-segmented-button { padding: 6px 0; font-variant-numeric: tabular-nums; }
.bz-pal { --bz-sw: 22px; display: grid; gap: var(--dial-row-gap); color: var(--dial-text-label); font: 12px/1.2 system-ui, -apple-system, sans-serif; }
.bz-pal__grid { display: grid; grid-template-columns: var(--bz-cols); column-gap: 2px; align-items: center; }
.bz-pal__labels span { text-align: center; color: var(--dial-text-tertiary); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.bz-pal__current { padding: 6px 8px; border-radius: var(--dial-radius); background: var(--dial-surface); }
.bz-pal__labels { padding: 0 8px; }
.bz-pal__swatch { position: relative; height: var(--bz-sw); border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); cursor: pointer; }
.bz-pal__swatch input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
/* Haken M: glänzendes Metall für das 3D-Paar davor */
.bz-pal__metal { display: grid; place-items: center; height: var(--bz-sw); cursor: pointer; }
.bz-pal__metal input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid var(--dial-text-tertiary); border-radius: 4px; background: none; cursor: pointer; }
.bz-pal__metal input:checked { border-color: var(--dial-text-primary); background: var(--dial-text-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.bz-pal__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dial-row-gap); }
.bz-pal button { display: grid; place-items: center; padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bz-pal__actions button { height: 32px; border-radius: var(--dial-radius); background: var(--dial-surface); }
.bz-pal__actions button:hover:not(:disabled), .bz-pal__icons button:hover { background: var(--dial-surface-hover); color: var(--dial-text-primary); }
.bz-pal__actions button:disabled { opacity: 0.35; cursor: default; }
.bz-pal svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bz-pal__list { display: grid; gap: 2px; }
/* Klickfläche einer Palette: ihre Farben und die Nummer bzw. der Name, in denselben Spalten wie oben (subgrid).
   Hervorgehoben (Hover, aktiv) wird nur sie, nicht die Knöpfe daneben. */
.bz-pal__row { display: flex; align-items: center; gap: 2px; }
.bz-pal__apply { flex: 1; min-width: 0; display: grid; grid-template-columns: var(--bz-hit); column-gap: 2px; align-items: center; padding: 4px 8px; border-radius: var(--dial-radius); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bz-pal__apply:hover { background: var(--dial-surface-hover); }
.bz-pal__apply:focus-visible { outline: 2px solid var(--dial-focus-ring); outline-offset: -2px; }
.bz-pal__row.is-active .bz-pal__apply { background: var(--dial-surface-active); box-shadow: inset 0 0 0 1px var(--dial-border-hover); }
/* eigene Paletten nach den festen, mit Trennlinie */
.bz-pal__row.is-first-own { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--dial-border); }
.bz-pal__chip { position: relative; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.bz-pal__mark { display: grid; place-items: center; color: var(--dial-text-secondary); }
.bz-pal__mark svg { width: 13px; height: 13px; stroke-width: 2.4; }
/* Metall: Glanz auf den Feldern des Paars */
.bz-pal .is-metal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgb(255 255 255 / 0.55) 0 18%, rgb(0 0 0 / 0.25) 46%, rgb(255 255 255 / 0.3) 46.5%, rgb(0 0 0 / 0.3)); pointer-events: none; }
.bz-pal__name { min-width: 0; margin-left: 4px; padding: 3px 5px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--dial-text-secondary); font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.bz-pal__name { width: 100%; }
input.bz-pal__name:hover { border-color: var(--dial-border-hover); }
input.bz-pal__name:focus { border-color: var(--dial-focus-ring); outline: none; color: var(--dial-text-primary); }
.bz-pal__icons { display: flex; }
.bz-pal__icons button { width: 26px; height: 26px; border-radius: 6px; color: var(--dial-text-tertiary); }

/* Schrift-Test: dünne Texte und Fliesstext als HTML in der gewählten Schrift, mit derselben Kontur (die Textebene lässt
   sie dann aus). Gross/klein schaltet nur die dünnen Texte um, Fliesstext ist immer gemischt. */
html.font-alt .gl-text:is(.text-thin, .text-plain) { font-family: var(--thin-font); font-weight: var(--thin-weight, 400); opacity: 1 !important; }
html.case-mixed .gl-text.text-thin { text-transform: none !important; }
html.case-mixed .hero__tagline .gl-text.text-thin { text-transform: uppercase !important; } /* Claim immer in Versalien */

/* Seiten aus dem Backend (page.php): Rechtstexte. Auf dem Rot des Footers in dessen Textfarbe (Dunkelblau, Kontrast
   5:1). Titel in der Hausschrift, langer Text in der Systemschrift: Anton ist für Fliesstext zu eng. */
.page:not(.home) { --color-bg: #1a30d8; --legal-ink: #ffffff; --legal-width: 46rem; color: var(--legal-ink); } /* Farben des Footers */
.page:not(.home) .site-header { position: fixed; inset: 0 0 auto; z-index: 10; justify-content: center; padding: 16px 0 14px; background: var(--color-bg); }
.page:not(.home) .site-header .logo { color: var(--legal-ink); font: 400 34px/1 var(--font-base); text-decoration: none; }
.legal { max-width: var(--legal-width); margin: 0 auto; padding: 64px var(--grid-margin) 0; }
.legal__title { margin: 0.5em 0 0.5em; font: 400 clamp(56px, 15vw, 128px)/0.9 var(--font-base); text-transform: uppercase; overflow-wrap: anywhere; }
.legal__text { font: 17px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.legal__text h2 { margin: 2em 0 0.5em; font: 400 28px/1.05 var(--font-base); text-transform: uppercase; }
.legal__text h3 { margin: 1.3em 0 0.3em; font: 400 21px/1.1 var(--font-base); text-transform: uppercase; }
/* Absätze als Fliesstext in der Schrift der dünnen Texte (Schrift-Test), Überschriften in Anton */
html.font-alt .legal__text { font-family: var(--thin-font); font-weight: var(--thin-weight, 400); }
.legal__text p, .legal__text ul, .legal__text ol { margin: 0 0 0.9em; }
.legal__text ul, .legal__text ol { padding-left: 1.3em; }
.legal__text a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
/* Unten: eigener Link zur Startseite in der Mitte, darunter die Metalinks genau wie im Footer der Startseite (dieselbe
   Grösse und Verteilung: Handy über die ganze Breite, Desktop mittig). Die Startseite zeichnet sie mit der Textebene,
   hier ist es HTML in der Hausschrift. */
.legal__home { display: block; width: max-content; margin: 3rem auto 0; color: var(--legal-ink); font: 400 calc(4.58 * var(--vu))/1.55 var(--font-base); text-transform: uppercase; text-decoration: none; }
.legal__meta { --ink-1: var(--legal-ink); --baseline: 1.2em; padding: 2rem var(--grid-inset) var(--grid-margin); color: var(--ink-1); font-size: calc(4.58 * var(--vu)); line-height: 1.55; text-transform: uppercase; }
.legal__meta a { color: inherit; text-decoration: none; }
.legal__meta .gl-text { --text-outline-width: 0; } /* wie im Footer der Startseite: ohne Kontur */
.legal__home:hover { text-decoration: underline; }
.page:not(.home) .site-footer { display: none; }