/* Version 3: Nachbau von herasymenkox.com. Maße bei 1440 px Breite (1 Einheit = --px), eigene Inhalte und Motive.
   Schriften: freie Ersatzschriften von Google (Vorlage nutzt kostenpflichtige PP Neue Montreal und FH Phemister). */

/* Schriften liegen auf unserem Server, nicht bei Google (DSGVO). Nur der Zeichensatz "latin": reicht für Deutsch inkl. ÄÖÜß, „“ und €. */
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: block; src: url(fonts/inter-tight-700.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: block; src: url(fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: block; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400 700; font-display: block; src: url(fonts/lora.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: block; src: url(fonts/lora-italic.woff2) format("woff2"); }

:root {
  --design-width: 1440;
  --container: clamp(1440px, 100vw, 2560px);
  --px: calc(var(--container) / var(--design-width));
  --green: #cee49f;
  --black: #0b0b0b;
  --green-12: rgb(206 228 159 / .12);
  --green-20: rgb(206 228 159 / .2);
  --bold: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif; /* Menü in der Glasleiste (Daniel, 2026-10-22) */
  --g: min(var(--px), 1px); /* Kopfzeile (Logo, Leiste, Ecke oben rechts): wächst nicht über die Größe bei 1440 px */
  --serif: "Lora", Georgia, serif; /* Akzentschrift (2026-10-22: Max stellte auf Outfit, Daniel zurück auf Lora, Strich 400) */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--black); color: var(--green); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
button { all: unset; cursor: pointer; }
:focus-visible { outline: 1px solid var(--green); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

canvas.gl, .orbit { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.blend { position: fixed; z-index: 11; mix-blend-mode: difference; color: var(--green); }
.h3 { font: 700 calc(14 * var(--px))/.8 var(--bold); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.mono { font: 500 calc(10 * var(--px))/1 var(--mono); text-transform: uppercase; white-space: nowrap; }

/* Ecken und Menü */
.corner--tl { top: calc(18 * var(--g)); left: calc(16 * var(--px)); }
.logo svg { display: block; height: calc(28 * var(--g)); width: auto; fill: currentColor; }
.corner--tr { top: calc(26 * var(--g)); right: calc(16 * var(--px)); text-align: right; font-size: calc(14 * var(--g)); }
.corner--br { top: calc(100% - 26 * var(--px)); right: calc(16 * var(--px)); text-align: right; transition: opacity .3s; }

.pill { position: relative; display: flex; align-items: center; justify-content: space-between; width: calc(120 * var(--px)); height: calc(16 * var(--px)); padding: 0 calc(4.5 * var(--px));
  border-radius: calc(2 * var(--px)); background: var(--green-12); color: var(--green); font: 500 calc(10 * var(--px))/1 var(--mono); text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s ease-in-out, color .2s ease-in-out; }
.pill:hover, .pill.is-active { background: var(--green); color: var(--black); }
.pill sup { margin-left: calc(1 * var(--px)); font-size: calc(6 * var(--px)); vertical-align: top; line-height: 1; }
.pill i { display: none; width: calc(3.9 * var(--px)); height: calc(5 * var(--px)); border-radius: 50%; background: var(--black); }
.pill.is-active i { display: block; }

/* Kopfleiste aus Glas: Logo und Menü in einer Leiste, der Hintergrund bricht sich darin (Verzerrung: Filter #glas aus ui.js) */
.glass { position: fixed; z-index: 11; top: calc(12 * var(--g)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: calc(18 * var(--g));
  height: calc(40 * var(--g)); padding: 0; border-radius: 999px; isolation: isolate; box-shadow: 0 calc(6 * var(--g)) calc(18 * var(--g)) rgb(0 0 0 / .35); }
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.glass::before { backdrop-filter: blur(4px) saturate(1.5); -webkit-backdrop-filter: blur(4px) saturate(1.5); filter: url(#glas); }
.glass::after { background: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .03));
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / .5), inset -1px -1px 1px rgb(255 255 255 / .18), inset 0 0 calc(14 * var(--g)) rgb(206 228 159 / .1); }
/* Menüpunkte so hoch wie die Leiste, ohne Rand: die Blase füllt die ganze Höhe (Daniel, 2026-10-24) */
.glass-nav { position: relative; display: flex; gap: calc(2 * var(--g)); height: 100%; }
.glass-nav :is(a, button) { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 calc(22 * var(--g)); border-radius: 999px;
  font: 500 calc(12 * var(--g))/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* Blase unter dem Menüpunkt: im Kopfmenü eine einzige (.glass-pill, ui.js), die von Punkt zu Punkt gleitet und einrastet
   (Daniel, 2026-10-24). Erscheint sie aus dem Nichts, wächst sie weich auf Knopfgröße. Beim Schließen-Knopf sitzt sie direkt
   am Knopf. Ohne Überschwingen (Max, 2026-10-23: das Feld wurde größer als der Knopf) */
.glass-pill { position: absolute; left: 0; top: 0; isolation: isolate; border-radius: 999px; pointer-events: none;
  transition: translate .35s cubic-bezier(.16, 1, .3, 1), width .35s cubic-bezier(.16, 1, .3, 1); }
:is(.glass-nav button, .glass-pill)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(206 228 159 / .14);
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / .35), inset -1px -1px 1px rgb(255 255 255 / .12); opacity: 0; scale: .7;
  transition: opacity .25s, scale .5s cubic-bezier(.16, 1, .3, 1); }
.glass-nav button:hover::before, .glass-pill.on::before { opacity: 1; scale: 1; }
/* Glanz (nach dem „Shiny Button“): ein Lichtstreifen läuft um den Rand, innen glüht es. Im Kopfmenü nur, wenn die Blase
   aus dem Nichts erscheint (.shine); gleitet sie von einem Punkt zum nächsten, leuchtet sie nicht neu auf. */
@property --nav-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --nav-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --nav-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --nav-shine { syntax: "<color>"; initial-value: #cee49f; inherits: false; }
:is(.glass-nav button, .glass-pill)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from calc(var(--nav-angle) - var(--nav-offset)), transparent, #9cc05a var(--nav-percent),
    var(--nav-shine) calc(var(--nav-percent) * 2), #9cc05a calc(var(--nav-percent) * 3), transparent calc(var(--nav-percent) * 4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; animation: nav-spin 3s linear infinite paused;
  transition: opacity .4s, --nav-offset .8s cubic-bezier(.25, 1, .5, 1), --nav-percent .8s cubic-bezier(.25, 1, .5, 1), --nav-shine .8s cubic-bezier(.25, 1, .5, 1); }
:is(.glass-nav button:is(:hover, :focus-visible), .glass-pill.shine)::after { opacity: 1; animation-play-state: running; --nav-percent: 20%; --nav-offset: 95deg; --nav-shine: #eef7d6; }
:is(.glass-nav button:is(:hover, :focus-visible), .glass-pill.shine)::before { opacity: 1; scale: 1;
  box-shadow: inset 1px 1px 1px rgb(255 255 255 / .35), inset -1px -1px 1px rgb(255 255 255 / .12), inset 0 -1ex 1.1em 1px rgb(156 192 90 / .55); }
@keyframes nav-spin { to { --nav-angle: 360deg; } }
.glass-nav sup { margin-left: calc(3 * var(--g)); font-size: calc(7 * var(--g)); line-height: 1; vertical-align: top; }


/* Einblenden: Inhalt steigt aus einer Maske */
.mask { clip-path: inset(-.15em 0 -.3em); }
.mask > .in { display: block; will-change: transform; }

/* Stufenanzeige unten (Slider) */
/* Hinweis im Startbild: zum Runterscrollen */
.hint { top: calc(100% - 26 * var(--px)); left: 50%; transform: translateX(-50%); }
/* Stufenanzeige der Leistungen: Punkte wie am iPhone-Startbildschirm (Daniel, 2026-10-24) */
.stepper { position: fixed; z-index: 11; top: calc(100% - 25 * var(--px)); left: 50%; display: flex; align-items: center; gap: calc(10 * var(--px)); transform: translateX(-50%); pointer-events: none; }
/* Punkte sind Knöpfe: sichtbar 7 px, anklickbar 17 px (Polster ringsum, Hintergrund nur innen, Rand gleicht das Polster aus) */
.stepper button { display: block; box-sizing: content-box; width: calc(7 * var(--px)); height: calc(7 * var(--px)); padding: calc(5 * var(--px)); margin: calc(-5 * var(--px));
  border-radius: 50%; background: var(--green); background-clip: content-box; opacity: .35; transition: opacity .15s linear; pointer-events: auto; cursor: pointer; }
.stepper button:hover { opacity: .65; }
.stepper.mask { clip-path: inset(calc(-6 * var(--px))); } /* Maske weit genug, dass sie das Klick-Polster nicht abschneidet */
.stepper button.on { opacity: 1; }

/* Slider: Titel und Zeile mittig, Buchstaben laufen mit dem Scrollen */
.slide-title, .slide-meta { left: 0; right: 0; top: calc(50% + var(--y) * var(--px)); text-align: center; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.slide-title { font: 700 calc(112 * var(--px))/.8 var(--bold); letter-spacing: -.045em; }
.slide-meta { font: 500 calc(10 * var(--px))/1 var(--mono); }
.line { display: block; overflow: hidden; }
.line > span { display: flex; justify-content: center; will-change: transform; }
.title-line { margin-bottom: -.125em; }
.ch { display: block; padding-bottom: .125em; white-space: pre; will-change: transform; }

/* Zeiger, der dem Mauszeiger folgt */
.cursor { top: 0; left: 0; z-index: 12; pointer-events: none; transform: translate(-200px, -200px); }
.cursor > span { display: block; transform: scale(0); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.cursor.on > span { transform: scale(1); }
.cursor.pill-style > span { display: flex; align-items: center; height: calc(16 * var(--px)); padding: 0 calc(4.5 * var(--px)); border-radius: calc(2 * var(--px)); background: var(--green); color: var(--black); font: 500 calc(10 * var(--px))/1 var(--mono); letter-spacing: 0; }

/* Orbit: Karten auf einem Zylinder um das h */
/* --os = Größe des Rings, setzt start.js: am Desktop wie --px, bei flachen Fenstern kleiner, damit er ganz ins Bild passt */
.orbit-wrap { position: fixed; inset: 0; z-index: 2; touch-action: none; perspective: calc(1500 * var(--os, var(--px))); overflow: hidden; visibility: hidden; }
.orbit-wrap.on { visibility: visible; }
.cyl { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ocard { will-change: transform; position: absolute; left: 0; top: 0; width: calc(190 * var(--os, var(--px))); height: calc(124 * var(--os, var(--px))); margin: calc(-62 * var(--os, var(--px))) 0 0 calc(-95 * var(--os, var(--px))); cursor: pointer; }
.ocard img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.ocard:hover img { filter: brightness(1.15); }
.mark3d { position: absolute; left: 50%; top: 50%; width: calc(290 * var(--px)); height: calc(200 * var(--px)); margin: calc(-100 * var(--px)) 0 0 calc(-145 * var(--px)); transform-style: preserve-3d; pointer-events: none; }
.mark3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Hülle trägt das Ein- und Ausblenden des Logos: opacity < 1 direkt an .mark3d drückt die Lagen flach (preserve-3d wird flat) */
.mark-fade { position: absolute; inset: 0; perspective: inherit; pointer-events: none; }
.orbit-wrap .mark3d { width: calc(290 * var(--os, var(--px))); height: calc(200 * var(--os, var(--px))); margin: calc(-100 * var(--os, var(--px))) 0 0 calc(-145 * var(--os, var(--px))); }

/* Detail einer Leistung */
/* --side = rechte Spalte: ab 1440 px wie entworfen (459), darunter schmaler (34 % der Breite, mindestens 300 px). Bild links füllt den Rest. */
.work { --side: clamp(300px, 34vw, calc(459 * var(--px))); position: fixed; inset: 0; z-index: 10; overflow: hidden; visibility: hidden; background: var(--black); }
.work.is-open { visibility: visible; }
.work-content { position: absolute; top: 0; left: 0; width: 100%; padding: calc(400 * var(--px)) 0 calc(16 * var(--px)); will-change: transform; }
.work-title { position: absolute; top: calc(214 * var(--px) + 1.6em); left: calc(16 * var(--px)); transform: translateY(-100%); font: 700 calc(112 * var(--px))/.8 var(--bold); letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.work-title .line { margin: 0 -.1em; padding: 0 .1em; }
.work-title .line > span { justify-content: flex-start; }
.work-media { display: flex; flex-direction: column; gap: calc(16 * var(--px)); width: calc(100% - 48 * var(--px) - var(--side)); margin-left: calc(16 * var(--px)); }
.work-item { position: relative; aspect-ratio: 933 / 672; overflow: hidden; }
.work-item img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.work-side { position: absolute; top: calc(400 * var(--px)); right: calc(16 * var(--px)); width: var(--side); text-transform: uppercase; }
.work-about { position: relative; display: flex; flex-direction: column; gap: calc(16 * var(--px)); padding-top: calc(12 * var(--px)); border-top: 1px solid var(--green-20); }
.work-overview { font: 700 calc(24 * var(--px))/1 var(--bold); letter-spacing: -.01em; }
.work-info { margin-top: calc(64 * var(--px)); border-bottom: 1px solid var(--green-20); }
.work-row { display: flex; align-items: flex-start; gap: calc(var(--side) * 92 / 459); padding: calc(8 * var(--px)) 0; border-top: 1px solid var(--green-20); font: 700 calc(14 * var(--px))/1.1 var(--bold); letter-spacing: -.01em; }
.work-row-key { display: flex; flex-shrink: 0; align-items: center; gap: calc(24 * var(--px)); width: calc(var(--side) * 146 / 459); }
.work-row-key .mono { width: calc(6 * var(--px)); }
.work-row-cell { display: flex; flex: 1 0 0; justify-content: space-between; min-width: 0; transition: opacity .5s ease-out; }
a.work-row-cell:hover { opacity: .5; }
.work-row-cell svg { width: calc(10 * var(--px)); height: calc(10 * var(--px)); fill: currentColor; flex-shrink: 0; }
.work-progress { position: absolute; z-index: 11; top: calc(100% - 39 * var(--px)); right: calc(79 * var(--px)); width: calc(var(--side) - 63 * var(--px)); height: calc(23 * var(--px)); transition: opacity .3s; }
.work-progress-track { position: absolute; top: calc(22 * var(--px)); left: 0; width: 100%; height: 1px; background: var(--green-20); }
.work-progress-fill { height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
/* Schließen: runder Glasknopf oben rechts mit X, gleicher Stil wie die Menüleiste */
.glass.close { z-index: 12; top: calc(12 * var(--g)); bottom: auto; left: auto; right: calc(16 * var(--px)); translate: none; display: none; width: calc(40 * var(--g)); }
.work.is-open ~ .close { display: flex; }
/* Knopf füllt den ganzen Kreis: kein Rand im Glas, damit Leuchten und Blase beim Drüberfahren die volle Fläche nehmen (Daniel, 2026-10-24) */
.glass.close { padding: 0; }
.glass.close .glass-nav { flex: 1; height: 100%; }
.glass.close button { width: 100%; height: 100%; padding: 0; }
.close svg { width: calc(12 * var(--g)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* gedrückt: das Glas wird hell wie beim Zurück-Knopf in iOS 26 (Größe macht start.js) */
.glass.close::after { transition: background .15s, box-shadow .15s; }
.glass.close.pressed::after { background: rgb(255 255 255 / .45); box-shadow: inset 1px 1px 1px rgb(255 255 255 / .8), inset -1px -1px 1px rgb(255 255 255 / .4); }

/* Ladebild */
.load { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; color: var(--green); }
.load-bg { position: absolute; inset: 0; background: var(--black); }
.load-no { position: relative; overflow: hidden; }

/* Wechsel zwischen den Seiten: schwarzer Schleier */
.veil { position: fixed; inset: 0; z-index: 9990; background: var(--black); opacity: 0; pointer-events: none; }
.veil-in .veil { opacity: 1; }

/* Profil */
/* Fußzeile links: Impressum, Datenschutz (Gegenstück zu ©2026 rechts) */
.corner--bl { top: calc(100% - 26 * var(--px)); left: calc(16 * var(--px)); }
.corner--bl a:hover { opacity: .7; }
/* Profil: Fußzeile steht am Ende des Textes und scrollt mit, statt fest am Rand (Daniel, 2026-10-24) */
.page-foot { display: flex; justify-content: space-between; padding: 0 calc(16 * var(--px)) calc(26 * var(--px) - .8em); }
.page-foot a:hover { opacity: .7; }
/* In der offenen Leistung nicht zeigen: nach dem Schließen sind die Links wieder da, also höchstens 2 Klicks */
body:has(.work.is-open) .corner--bl { visibility: hidden; }

/* Impressum, Datenschutz: schlichte Textseite. Sie scrollt selbst, weil html und body nicht scrollen. */
.recht { position: fixed; inset: 0; overflow-y: auto; padding: calc(140 * var(--g)) calc(16 * var(--px)) calc(120 * var(--g)); }
.recht-text { max-width: 68ch; margin: 0 auto; font: 500 16px/1.6 var(--sans); }
.recht-text h1 { margin-bottom: 1em; font: 700 calc(48 * var(--g))/1 var(--bold); letter-spacing: -.02em; text-transform: uppercase; }
.recht-text h2 { margin: 2em 0 .6em; font: 700 18px/1.2 var(--bold); }
.recht-text p, .recht-text ul { margin: 0 0 1em; }
.recht-text a { text-decoration: underline; }

.page { position: fixed; inset: 0; overflow: hidden; }
.page-content { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.profile-head { position: relative; height: calc(620 * var(--px)); }
.profile-head { perspective: calc(1200 * var(--px)); }
.mark3d.profile-mark { top: calc(150 * var(--px)); width: calc(480 * var(--px)); height: calc(331 * var(--px)); margin: 0; }
/* Zeilenabstand 1: Umlaut-Punkte reichen bis .95em über die Grundlinie, bei .84 stießen sie an die Zeile darüber */
.statement { padding: 0 calc(16 * var(--px)) calc(120 * var(--px)); font: 700 calc(84 * var(--px))/1 var(--bold); letter-spacing: -.035em; text-transform: uppercase; }
.statement .ind { padding-left: calc(355 * var(--px)); }
.statement .s { font: 400 calc(80 * var(--px))/.8 var(--serif); font-style: normal; letter-spacing: -.02em; }
.statement a.s > span { border-bottom: calc(2 * var(--px)) solid currentColor; }
.statement a.s:hover { opacity: .7; }
.statement .w { display: inline-block; }

/* Kontakt */
.connect { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--px)); text-align: center; }
.big-serif, .big-bold { display: inline-block; }
.big-serif { font: 400 calc(100 * var(--px))/.95 var(--serif); letter-spacing: -.03em; padding-bottom: calc(10 * var(--px)); border-bottom: calc(3 * var(--px)) solid currentColor; }
.big-bold { font: 700 calc(118 * var(--px))/.8 var(--bold); letter-spacing: -.045em; text-transform: uppercase; padding: calc(8 * var(--px)) calc(6 * var(--px)) calc(14 * var(--px)); border-bottom: calc(3 * var(--px)) solid currentColor; transition: opacity .3s; }
a.big-bold:hover { opacity: .7; }
.side-l { top: 50%; left: calc(16 * var(--px)); transform: translateY(-50%); }
.side-r { top: 50%; right: calc(16 * var(--px)); transform: translateY(-50%); }
/* Fuß der Kontaktseite: Logo und Schriftzug nebeneinander. Logo etwa 1,45 × so hoch wie die Großbuchstaben,
   Abstand etwa eine halbe Logobreite, beide auf derselben Mittellinie */
.globe { bottom: calc(12 * var(--px)); left: 50%; display: flex; align-items: center; gap: calc(14 * var(--px)); transform: translateX(-50%); }
.globe svg { display: block; width: calc(36 * var(--px)); height: calc(25 * var(--px)); } /* Seitenverhältnis 724:500 */
.lockup-word { font: 700 calc(24 * var(--px))/.73 var(--bold); letter-spacing: .02em; padding-top: calc(1 * var(--px)); }

/* Kontakt: Banner mit Lamellen-Licht (nach dem „Final CTA Banner“ von 21st.dev, ohne React, in den Seitenfarben).
   Füllt den ganzen Bildschirm, der Text steht mittig (Daniel, 2026-10-24: wie am Handy).
   Schriften und Abstände wachsen mit dem Banner (Container-Einheiten). Licht: cta-banner.js */
.fcb-banner {
  --cta-void: #0e110a; --cta-paper: var(--green); --cta-signal: var(--green);
  --cta-pad-y: clamp(1.1rem, 8cqh, 3.75rem); --cta-pad-x: clamp(1.15rem, 4.5cqw, 3.25rem); --cta-gap: clamp(.45rem, 2.8cqh, 1rem);
  --cta-eyebrow: clamp(.58rem, 1.35cqw, .68rem); --cta-heading: clamp(1.35rem, 4.6cqw + 1.2cqh, 3.35rem);
  --cta-body: clamp(.82rem, 1.35cqw + .55cqh, 1.08rem); --cta-action: clamp(.78rem, 1.2cqw + .4cqh, .92rem);
  --cta-btn-y: clamp(.55rem, 2.2cqh, .85rem); --cta-btn-x: clamp(.95rem, 2.8cqw, 1.35rem);
  position: relative; isolation: isolate; container-type: size; overflow: hidden; display: flex; align-items: center;
  width: 100vw; height: 100vh; height: 100dvh; padding: var(--cta-pad-y) var(--cta-pad-x);
  background: var(--cta-void); color: var(--cta-paper); text-align: left;
}
.fcb-blinds { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.fcb-blindsCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fcb-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgb(14 17 10 / .78) 0%, rgb(14 17 10 / .42) 42%, rgb(14 17 10 / .18) 100%),
    radial-gradient(90% 80% at 78% 50%, rgb(206 228 159 / .14), transparent 62%); }
.fcb-copy { position: relative; z-index: 2; display: grid; gap: var(--cta-gap); width: min(100%, 36rem); max-width: 58cqw; pointer-events: none; }
.fcb-copy a { pointer-events: auto; }
.fcb-eyebrow { display: inline-flex; align-items: center; gap: .7rem; font: 500 var(--cta-eyebrow)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(206 228 159 / .65); }
.fcb-eyebrowRule { width: clamp(1rem, 3cqw, 1.6rem); height: 1px; background: rgb(206 228 159 / .7); }
.fcb-heading { max-width: 14ch; font: 500 var(--cta-heading)/1.05 var(--serif); letter-spacing: -.03em; color: var(--cta-paper); text-wrap: balance; }
.fcb-body { max-width: 34ch; font: 400 var(--cta-body)/1.45 var(--sans); color: rgb(206 228 159 / .75); }
.fcb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.45rem, 2cqh, .85rem) clamp(.65rem, 2cqw, 1.1rem); margin-top: clamp(.2rem, 1.5cqh, .65rem); }
.fcb-primary { display: inline-flex; align-items: center; gap: .35rem; padding: var(--cta-btn-y) var(--cta-btn-x); border-radius: 999px; background: var(--cta-signal); color: var(--black);
  font: 600 var(--cta-action)/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 10px 28px -12px rgb(206 228 159 / .7); transition: background .16s, transform .16s; }
.fcb-primary:hover { background: #e2f0c0; transform: translateY(-1px); }
.fcb-secondary { display: inline-flex; padding: calc(var(--cta-btn-y) * .85) .35rem; font: 500 var(--cta-action)/1 var(--sans); color: rgb(206 228 159 / .8);
  text-decoration: underline; text-decoration-color: rgb(206 228 159 / .3); text-underline-offset: .28em; transition: color .16s, text-decoration-color .16s; }
.fcb-secondary:hover { color: var(--cta-paper); text-decoration-color: rgb(206 228 159 / .6); }
.fcb-primary:focus-visible, .fcb-secondary:focus-visible { outline: 2px solid #e2f0c0; outline-offset: 3px; }
@container (max-height: 18rem) { .fcb-eyebrow { letter-spacing: .12em; } .fcb-body { line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
@container (max-height: 13rem) { .fcb-eyebrow { display: none; } .fcb-body { -webkit-line-clamp: 1; } .fcb-actions { margin-top: 0; } }
@media (max-width: 600px) {
  /* Am Handy: Schriften nach Bildschirmbreite, der Text steht mittig zwischen Logo und Menü */
  .fcb-banner { container-type: inline-size;
    --cta-heading: clamp(1.75rem, 8vw, 2.35rem); --cta-body: clamp(.95rem, 3.2vw, 1.05rem); --cta-action: .9rem; --cta-pad-y: 5rem; --cta-pad-x: 1.35rem; --cta-gap: .85rem; }
  .fcb-copy { max-width: none; }
  .fcb-actions { flex-direction: column; align-items: flex-start; }
}
/* Kleine Handys: Seitenlabels und Globus haben neben dem Banner keinen Platz */
@media (max-width: 600px) and (max-height: 760px) { .side-l, .side-r, .globe { display: none; } }
@media (prefers-reduced-motion: reduce) { .fcb-primary { transition: none; } .fcb-primary:hover { transform: none; } }

/* Knopf „Leistung ansehen“, nur am Handy (dort gibt es keinen Mauszeiger) */
.tap { display: none; position: fixed; z-index: 11; left: 50%; bottom: calc(52 * var(--px)); transform: translateX(-50%); }

/* Handy (wie die Vorlage ab 600 px) */
@media (max-width: 600px) {
  :root { --design-width: 375; --container: 100vw; }
  .pill { flex: 1 1 0; width: auto; height: calc(19 * var(--px)); font-size: calc(12 * var(--px)); }
  .corner--br, .cursor, .work-progress { display: none; }
  .stepper { top: auto; bottom: calc(126 * var(--px)); } /* über dem Knopf „Leistung ansehen“ */
  /* Impressum, Datenschutz: kleine Zeile unter dem Menü. Menü und alles darüber sind dafür 20 px höher gerückt. */
  .corner--bl { top: auto; bottom: calc(13 * var(--px)); left: 50%; transform: translateX(-50%); font: 500 calc(10 * var(--px))/1 var(--mono); }
  /* --fs setzt start.js: die längste Titelzeile füllt die Breite. Abstände wie Vorlage. */
  .slide-title { font-size: var(--fs, calc((100vw - 32 * var(--px)) / 5.6)); top: calc(50% + var(--y) * var(--fs, 15vw) / 112); }
  .slide-meta { font-size: calc(12 * var(--px)); top: calc(50% + (var(--y) - 38.8) * var(--fs, 15vw) / 112 + 24 * var(--px)); }
  .work { overscroll-behavior: contain; scrollbar-width: none; }
  .work-media--rest { margin-top: calc(55 * var(--px)); }
  .work-row { gap: 0; }
  .work-row-key { width: calc(147 * var(--px)); gap: 0; }
  .work-row-key .mono { flex-shrink: 0; width: calc(30 * var(--px)); }
  .work-info { margin-top: calc(43 * var(--px)); }
  .work { overflow-y: auto; }
  .work-content { position: relative; padding: calc(139 * var(--px)) calc(16 * var(--px)) calc(84 * var(--px)); }
  .work-title { position: relative; top: auto; left: auto; transform: none; font-size: calc(41 * var(--px)); }
  .work-media { width: auto; margin: calc(7 * var(--px)) 0 0; }
  .work-item { height: auto; aspect-ratio: 1.39; }
  .work-side { position: relative; top: auto; right: auto; width: auto; margin-top: calc(16 * var(--px)); }
  .statement { font-size: calc(30 * var(--px)); }
  .statement .s { font-size: calc(29 * var(--px)); }
  .statement .ind { padding-left: 0; }
  .big-serif { font-size: calc(36 * var(--px)); }
  .big-bold { font-size: calc(27 * var(--px)); }
  .side-l, .side-r { left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
  .side-l { top: calc(172 * var(--px)); } .side-r { top: calc(188 * var(--px)); }
  .globe { bottom: calc(116 * var(--px)); } /* Platz für das Kontakt-Banner */
  .profile-head { height: calc(360 * var(--px)); }
  .mark3d.profile-mark { top: calc(70 * var(--px)); width: calc(300 * var(--px)); height: calc(207 * var(--px)); }
  .statement { padding-bottom: calc(150 * var(--px)); }
  .page-foot { padding-bottom: calc(100 * var(--px)); font: 500 calc(10 * var(--px))/1 var(--mono); } /* unten Platz fürs Menü */
  .tap { display: block; bottom: calc(92 * var(--px)); }
  .hint { top: auto; bottom: calc(96 * var(--px)); }
  /* Orbit am Handy halb so groß (start.js rechnet mit derselben Einheit) */
  .orbit-wrap { bottom: calc(110 * var(--px)); } /* Ring 45 px höher, mittig über Hinweis und Menü; Größe über --os */
  /* Glasleiste unten über die ganze Breite, nur die drei Menüpunkte (Logo steht oben links) */
  .glass { top: auto; bottom: calc(36 * var(--px)); left: calc(16 * var(--px)); right: calc(16 * var(--px)); translate: none; height: calc(44 * var(--g)); }
  .glass-nav { flex: 1; }
  .glass-nav :is(a, button) { flex: 1; height: 100%; padding: 0; font-size: calc(11.5 * var(--g)); letter-spacing: .02em; }
  .corner--tl { top: calc(16 * var(--g)); }
  .logo svg { height: calc(24 * var(--g)); }
  .corner--tr { top: calc(22 * var(--g)); }
  .glass.close { top: calc(6 * var(--g)); width: calc(44 * var(--g)); }
}
@media (prefers-reduced-motion: reduce) { .cursor > span, .glass-pill, :is(.glass-nav button, .glass-pill)::before, :is(.glass-nav button, .glass-pill)::after { transition: none; animation: none; } }