/* ==========================================================================
   eclpt.de — Basis (Phase 2: aufpoliert, Identität behalten)
   Anker (EXTEND): Schwarz als Grund, Geist Mono als Hausschrift, Versal-Register
   für Labels/Titel, scharfe Kanten. Skala/Ketten/Physik aus der Library:
   Design-Playbook/library/tokens/tokens.css + motion.css.
   Breakpoints: Desktop ≥1200 · Tablet 810–1199.98 · Phone ≤809.98
   ========================================================================== */

/* ---- Fonts (Google-Fonts-Dateien lokal, latin + latin-ext, alle Gewichte) --- */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/GeistMono-400-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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/GeistMono-500-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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/GeistMono-600-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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/GeistMono-700-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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/GeistMono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/GeistMono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/GeistMono-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/GeistMono-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-400-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JetBrainsMono-500-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; }

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  /* §1 Skala [4,8,12,16,20,24,32,40,48,64,96] — tokens.css */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px; --s96: 96px;
  --section: var(--s64);        /* §1 SECTION desktop */
  --pad: var(--s24);            /* §1 PAD */
  --gap: var(--s24);            /* §1 GAP Objekte */
  --gap-board: var(--s12);      /* §1.0 Kacheln eines Bretts */
  --page: 1200px;               /* Seitenbreite (Anker: Framer-Seite 1200) */
  --page-pad: 24px;             /* Seitenrand (Anker: Nav-Padding links 24) */
  --nav-h: 90px;                /* Anker: Header 90 */

  /* §2.6 Dunkel-Welt — Anker ist die Marke: Grund #000 (bewusst, eclpt ist schwarz), Weiß-Rampe als Textsystem */
  --bg: #000;
  --bg-2: #0f0f0f;                                  /* Framer-Token 16084dc0 — Karten der Dunkel-Welt */
  --ink: #fff;                                      /* Weiß-Rampe voll */
  --ink-80: rgba(255, 255, 255, .80);               /* Sekundär */
  --ink-60: rgba(255, 255, 255, .60);               /* Meta */
  --ink-40: #666;                                   /* Anker der Seite: Sekundärtext #666 (≈40 %) — nur Labels/Meta */
  --hairline: rgba(255, 255, 255, .10);             /* §2.5 dunkle Welt 10 % */
  --hairline-control: rgba(255, 255, 255, .14);     /* Inputs */
  --light: #fff;                                    /* die EINE Licht-Gegenwelt: Kacheln, Buttons, Übergangs-Panel */
  --btn-1: #1f1f1f; --btn-1-hover: #262626;         /* Anker: Footer-Leiter der Framer-Seite */
  --btn-2: #2e2e2e; --btn-2-hover: #363636;
  --btn-3: #545454; --btn-3-hover: #7a7a7a;
  --btn-white: #fff; --btn-white-hover: #bfbfbf;

  /* §4 Radius — Anker: scharfe Kanten (Hero-Button, Cards, Footer). Controls 8. */
  --r-0: 0px; --r-control: 8px;

  /* Typo-Rollen (Anker: Geist Mono als Hausschrift; Versal-Register = Markenstil, vom Nutzer so gewünscht) */
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
  --track: .1px;                 /* Anker: Nav-Laufweite .1px */

  /* §5 Motion — motion.css */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);   /* Entrance expo-out */
  --ease-state: cubic-bezier(0.65, 0, 0.35, 1);     /* State inout */
  --ease-tween: cubic-bezier(.44, 0, .56, 1);       /* Anker: Framer-Button-Tween der Seite */
  --dur-color: 150ms; --dur-state: 250ms; --dur-plush: 450ms; --dur-reveal: 700ms;
  --rise: 10px; --stagger: 60ms;
  --focus: #fff;                 /* §8 eine Focus-Family: weißer Ring auf Schwarz */
}
@media (max-width: 1199.98px) { :root { --section: var(--s48); } }
@media (max-width: 809.98px) { :root { --section: var(--s40); --page-pad: 20px; } }

/* ---- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: #fff; color: #000; }

/* Typo-Rollen */
.t-display { font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.t-label { font-size: 12px; font-weight: 500; letter-spacing: var(--track); line-height: 16px; color: var(--ink-40); white-space: pre; }
.t-body { font-size: 16px; line-height: 1.6; color: var(--ink-80); }
.t-meta { font-size: 12px; line-height: 16px; color: var(--ink-60); }

/* Layout-Primitive */
.page { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; width: 100%; background: var(--bg); overflow: clip; }
.wrap { position: relative; width: 100%; max-width: var(--page); padding: 0 var(--page-pad); }
.line { width: 100%; height: 1px; background: var(--hairline); }
html.js [data-appear="line"] { transform: translateX(-1520px); }
.header-spacer { width: 100%; height: var(--nav-h); }
main[data-page] { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ==========================================================================
   Header (Anker: fixed 90, Blur, Appear y −94 spring 300/60)
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--nav-h); }
html.js .site-header[data-appear="header"] { transform: translateY(-94px); }
.site-header__inner { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: var(--nav-h); background: rgba(0, 0, 0, .75); overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 89px; padding: 26px 140px 26px 24px; overflow: hidden; }
html.js .nav[data-appear="nav"] { opacity: .001; transform: translateY(-90px); }
.nav__items { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; justify-content: center; gap: 363px; width: max-content; }
.nav__info { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 37px; max-width: 300px; }
.nav__info--right { align-items: flex-end; }
.nav__name { font-size: 16px; font-weight: 600; letter-spacing: var(--track); line-height: 17px; color: var(--ink); white-space: pre; }
.nav__sub { font-size: 10px; letter-spacing: var(--track); line-height: 17px; height: 13.32px; color: var(--ink-40); white-space: pre; }
.nav__right { display: flex; align-items: center; justify-content: center; gap: 96px; }
.nav__links { display: flex; align-items: flex-end; justify-content: center; gap: 29px; max-width: 300px; }
.nav__links a { font-size: 15px; letter-spacing: var(--track); line-height: 17px; color: var(--ink); white-space: pre; transition: color var(--dur-color) var(--ease-state); }
.nav__links a:hover { color: var(--ink-60); }
.nav__sub--tablet { display: none; }

/* ---- Topbar-CTA: Geister-Button um „LET'S GET TO WORK" -------------------------
   Beim Hover zeichnet sich die Outline eines Buttons, der sonst nicht existiert, als Trim-Path
   (stroke-dashoffset 1 → 0, pathLength=1) von oben links im Uhrzeigersinn; der Strich trägt einen
   laufenden Gradient orange → dunkel (SVG-Gradient, SMIL-Rotation 2,4 s). SVG kommt aus main.js
   (initNavCta). Negative Ränder halten das Layout. Einzeichnen 700 ms expo-out (--dur-reveal,
   Design-Playbook motion.css), Rückzug 250 ms inout (--dur-state). */
.nav__cta { position: relative; height: 53px; padding: 8px 12px; margin: -8px -12px; border-radius: var(--r-0); text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.nav__cta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nav__cta rect { fill: none; stroke: url(#cta-grad); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset var(--dur-state) var(--ease-state), opacity var(--dur-color) var(--ease-state) 100ms; }
.nav__cta:hover rect, .nav__cta:focus-visible rect { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--dur-reveal) var(--ease-entrance), opacity var(--dur-color) var(--ease-state); }
.nav__cta:focus-visible { outline: none; }
.nav__cta .nav__sub { transition: color var(--dur-color) var(--ease-state); }
.nav__cta:hover .nav__sub { color: var(--ink-80); }
@media (prefers-reduced-motion: reduce) { .nav__cta rect, .nav__cta:hover rect { transition-duration: 0s; } }

.nav__line { position: relative; width: 100%; height: 1px; background: var(--hairline); overflow: hidden; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav__items { gap: 186px; }
  .nav__right { flex-direction: column; align-items: flex-end; gap: 0; }
  .nav__links { gap: 18px; max-width: none; }
  .nav__info--right { display: none; }
  .nav__sub--tablet { display: block; order: 1; }
}
@media (max-width: 809.98px) {
  .nav__items { gap: 0; }
  .nav__info--left, .nav__info--right { display: none; }
  .nav__right { flex-direction: column; align-items: flex-end; gap: 0; }
  .nav__links { gap: 20px; max-width: none; align-self: stretch; }
}

/* ==========================================================================
   Buttons (Anker: Framer-Button, Tween .8s; Register Versal)
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--s32); height: 56px; cursor: pointer; background: var(--bg-c); color: var(--fg-c, #fff); border-radius: var(--r-0); transition: background-color var(--dur-plush) var(--ease-tween), color var(--dur-color) var(--ease-state); }
.btn:hover { background: var(--bg-c-hover); }
.btn h4, .btn span { font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 21px; white-space: pre; }
.btn--white { --bg-c: var(--btn-white); --bg-c-hover: var(--btn-white-hover); --fg-c: #000; }
.btn--1 { --bg-c: var(--btn-1); --bg-c-hover: var(--btn-1-hover); }
.btn--2 { --bg-c: var(--btn-2); --bg-c-hover: var(--btn-2-hover); }
.btn--3 { --bg-c: var(--btn-3); --bg-c-hover: var(--btn-3-hover); }
.btn--ghost { --bg-c: transparent; --bg-c-hover: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hairline-control); }
.btn .arrow { display: inline-block; transition: transform var(--dur-state) var(--ease-state); }
.btn:hover .arrow { transform: translateX(2px); } /* motion.css --nudge 2px */

/* ==========================================================================
   Reveals — motion.css .reveal (700ms expo-out, 10px, Stagger 60ms), IO threshold .1
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-reveal) var(--ease-entrance), transform var(--dur-reveal) var(--ease-entrance); transition-delay: calc(var(--stagger) * var(--i, 0)); }
.reveal.in { opacity: 1; transform: none; }
/* Bild-/Kachel-Eintritt — elevenlabs image-reveal: 700ms cubic-bezier(.31,.325,0,.92), Opacity + Scale auf einer Kurve */
.tile-reveal { opacity: 0; transform: scale(1.025) translateZ(0); transition: opacity .7s cubic-bezier(.31, .325, 0, .92), transform .7s cubic-bezier(.31, .325, 0, .92); transition-delay: calc(var(--stagger) * var(--i, 0)); }
.tile-reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal, html:not(.js) .tile-reveal { opacity: 1; transform: none; }

/* ---- Projekt-Brett (buck.co-Anordnung) --------------------------------------
   Prinzip: sechs gleichartige Kacheln lesen als EIN Brett → GAP 12 (§1.0); Radius 0 (Anker:
   scharfe Kanten der Marke). Reihen wechseln 1/3 + 2/3 und 2/3 + 1/3; Bildunterschrift wie
   bei Buck in zwei Spalten (Label | Titel + Teaser). Kachel-Fläche weiß = Licht-Gegenwelt.
   ---------------------------------------------------------------------------- */
.projects { width: 100%; max-width: var(--page); padding: var(--section) var(--page-pad); }
.projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s24); margin-bottom: var(--s24); }
.projects__head h2 { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.projects__head .t-label { margin-bottom: 10px; }  /* Eyebrow→Heading 10 */
.projects__all { display: inline-flex; align-items: center; gap: var(--s8); font-size: 14px; letter-spacing: var(--track); color: var(--ink-60); transition: color var(--dur-color) var(--ease-state); }
.projects__all:hover { color: var(--ink); }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s64) var(--gap-board); }  /* Reihenabstand 64 = SECTION, mehr Luft zwischen den Projekten */
.tile { display: block; color: inherit; }
.tile--large { grid-column: span 2; }
.tile--small { grid-column: span 1; }
.tile--wide { grid-column: 1 / -1; }
.tile--wide .tile__media { aspect-ratio: 21 / 9; }
.tile__media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--light); overflow: hidden; border-radius: var(--r-0); }
.tile--small .tile__media { aspect-ratio: 3 / 2; }
.tile__media img, .tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-plush) var(--ease-state); }
.tile:hover .tile__media img, .tile:hover .tile__media video { transform: scale(1.03); } /* Anker: Card-Zoom der Framer-Seite, hier ruhig */
.tile__placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s16); font-size: 11px; letter-spacing: var(--track); color: rgba(0, 0, 0, .4); }
.tile__caption { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s24); padding-top: var(--s16); }  /* Buck: Label | Titel + Teaser */
.tile--small .tile__caption { grid-template-columns: 1fr 1fr; }
.tile__label { font-size: 14px; line-height: 20px; color: var(--ink-40); white-space: pre; }
.tile__title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); }
.tile__teaser { margin-top: var(--s4); font-size: 13px; line-height: 20px; color: var(--ink-60); }
@media (max-width: 1199.98px) {
  .board { gap: var(--s48) var(--gap-board); }
  .projects__head h2 { font-size: 32px; }
}
@media (max-width: 809.98px) {
  .board { grid-template-columns: 1fr; gap: var(--s24); }
  .tile--large, .tile--small, .tile--wide { grid-column: auto; }
  .tile--wide .tile__media { aspect-ratio: 16 / 9; }
  .tile--small .tile__media { aspect-ratio: 16 / 9; }
  .tile__caption, .tile--small .tile__caption { grid-template-columns: 1fr; gap: var(--s4); }
  .projects__head { flex-direction: column; align-items: flex-start; gap: var(--s12); }
  .projects__head h2 { font-size: 26px; }
}


/* ==========================================================================
   Ticker (Anker: Framer-Ticker, px/s, WAAPI)
   ========================================================================== */
.ticker { display: flex; align-items: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; padding: 10px; }
.ticker__track { display: flex; align-items: center; position: relative; max-width: 100%; max-height: 100%; will-change: transform; }
.ticker__track > * { flex-shrink: 0; }
.ticker--fade { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 12.5%, #000 87.5%, rgba(0,0,0,0) 100%); }

/* ==========================================================================
   Footer — Statement im Blocksatz (Echo des Hero-Titels), E-Mail als Hauptlink, Status mit Live-Uhr
   Kette: Label-Zeile → Titel 24 · Titel → Aktionen 32 · Aktionen → Meta 48 · pt 64 pb 32
   ========================================================================== */
.site-footer { width: 100%; display: flex; justify-content: center; padding: var(--s64) var(--page-pad) var(--s32); border-top: 1px solid var(--hairline); background: var(--bg); }
.footer__inner { width: 100%; max-width: var(--page); display: flex; flex-direction: column; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s24); margin-bottom: var(--s24); }
.footer__status { display: inline-flex; align-items: center; gap: var(--s8); font-size: 12px; letter-spacing: var(--track); line-height: 16px; color: var(--ink-60); white-space: pre; }
.footer__dot { width: 6px; height: 6px; background: var(--ink); animation: footer-pulse 2.4s var(--ease-state) infinite; } /* Anker: Status-LED, langsamer Ambient-Puls */
@keyframes footer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.footer__clock { font-variant-numeric: tabular-nums; color: var(--ink); }
.footer__title { display: flex; flex-direction: column; width: 100%; font-size: 87px; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; color: var(--ink); margin-bottom: var(--s32); }
.footer__title span { display: block; text-align: justify; text-align-last: justify; }  /* derselbe Blocksatz wie der Hero-Titel */
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s24); padding: var(--s24) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s48); }
.footer__mail { display: inline-flex; align-items: center; gap: var(--s12); font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); transition: color var(--dur-color) var(--ease-state); }
.footer__mail .arrow { display: inline-block; font-weight: 400; transition: transform var(--dur-state) var(--ease-state); }
.footer__mail:hover { color: var(--ink-60); }
.footer__mail:hover .arrow { transform: translateX(4px); } /* motion.css --nudge (2–4px) */
.footer__actions { display: flex; align-items: center; gap: var(--s24); }
.footer__actions .btn { height: 48px; padding: 0 var(--s24); }
.footer__link { display: inline-flex; align-items: center; gap: var(--s8); font-size: 13px; letter-spacing: var(--track); color: var(--ink-60); white-space: pre; transition: color var(--dur-color) var(--ease-state); }
.footer__link .arrow { display: inline-block; transition: transform var(--dur-state) var(--ease-state); }
.footer__link:hover { color: var(--ink); }
.footer__link:hover .arrow { transform: translateX(2px); }
.footer__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s24); }
.footer__legal { display: flex; gap: var(--s24); font-family: var(--font-code); font-size: 12px; line-height: 16px; color: var(--ink-60); }
.footer__legal a { color: var(--ink); transition: color var(--dur-color) var(--ease-state); }
.footer__legal a:hover { color: var(--ink-60); }
.footer__social { display: flex; gap: var(--s20); }
.social { display: flex; align-items: center; gap: 4px; width: 28px; height: 28px; overflow: hidden; cursor: pointer; }
.social__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; width: 24px; height: 100%; padding: 2px 0; overflow: hidden; }
.social__stack { display: flex; flex-direction: column; gap: 4px; }
.social__stack svg { display: block; width: 24px; height: 24px; fill: var(--ink-60); color: var(--ink-60); flex-shrink: 0; transition: fill var(--dur-color) var(--ease-state); }
.social:hover .social__stack svg { fill: var(--ink); }
@media (max-width: 1199.98px) { .footer__title { font-size: 56px; } .footer__mail { font-size: 24px; } }
@media (max-width: 809.98px) {
  .site-footer { padding-top: var(--s40); }
  .footer__top { flex-direction: column; align-items: flex-start; gap: var(--s8); }
  .footer__title { font-size: 28px; letter-spacing: -.02em; }
  .footer__row { flex-direction: column; align-items: flex-start; gap: var(--s16); margin-bottom: var(--s32); }
  .footer__mail { font-size: 20px; }
  .footer__actions { flex-wrap: wrap; gap: var(--s16); }
  .footer__meta { flex-direction: column; align-items: flex-start; gap: var(--s16); }
}

/* ==========================================================================
   Seitenübergang (Buff Motion, live gemessen: leave 0,65 s panel yPercent 0→−100 power4.out,
   Seite y→−10dvh power2.inOut; enter ab 0,85 s: panel −100→−200 ease panelOut
   "M0,0 C1,0 0.831,0.992 1,1", neue Seite aus 7dvh 0,9 s power3.inOut ab 1,0 s).
   Panel = Licht-Gegenwelt (weiß) mit schwarzer Wortmarke.
   ========================================================================== */
.transition { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.transition__panel { position: absolute; top: 100%; left: 0; width: 100%; height: 100dvh; background: var(--light); display: flex; align-items: center; justify-content: center; visibility: hidden; }
.transition__logo { width: 180px; height: auto; opacity: 0; }
.transition.is-active { pointer-events: auto; }
.transition.is-active .transition__panel { visibility: visible; }

/* ==========================================================================
   Cookie-Banner (Anker: Framer-Komponente, Register beibehalten)
   ========================================================================== */
.cookie-trigger { display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 11px; height: 11px; color: var(--ink); cursor: pointer; }
.cookie-trigger-wrap { width: 100%; display: flex; justify-content: center; padding: var(--s24) 0; }
.cookie { position: fixed; inset: auto 20px 20px auto; z-index: 100; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 40px); }
.cookie[hidden] { display: none; }
.cookie__box { width: 100%; max-width: 360px; background: #000; box-shadow: inset 0 0 0 .5px #fff; overflow: auto; }
.cookie__pad { padding: 20px; }
.cookie__title { margin: 0 0 10px; font-size: 16px; font-weight: 600; line-height: 1em; color: #fff; }
.cookie__body { margin: 0; font-size: 7px; line-height: 1em; color: var(--ink-40); }
.cookie__body a { color: #999; }
.cookie__buttons { display: flex; gap: 10px; margin-top: 16px; }
.cookie__btn { width: 100%; padding: 8px; font-size: 12px; font-weight: 500; line-height: 1em; cursor: pointer; }
.cookie__btn--reject { background: #eee; color: #000; }
.cookie__btn--accept { background: #000; color: #fff; }
@media (max-width: 809.98px) { .cookie { left: 20px; right: 20px; } .cookie__box { max-width: none; } }

/* §5 Reduced Motion = Endzustand */
@media (prefers-reduced-motion: reduce) {
  html.js [data-appear] { transform: none !important; opacity: 1 !important; }
  .reveal, .tile-reveal { opacity: 1; transform: none; transition: none; }
  [data-ambient] { animation: none !important; }
}

/* ---- Video-Warmup: animiertes Mux-WebP (≈0,5 MB) liegt über dem Stream und blendet aus,
   sobald das Video wirklich Frames liefert („playing"). 250 ms inout (--dur-state). */
.warm { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity var(--dur-state) var(--ease-state); }
.is-playing > .warm { opacity: 0; }

/* ---- Video-Viewer: Loop stumm im Layout, Klick öffnet den Viewer mit Ton --------
   Pill wie Parloa-Produkttour (erscheint beim Hover), Overlay wie Ravie (Video + CLOSE).
   Physik: Reveal 700 ms expo-out (Design-Playbook motion.css), Zustände 250 ms inout. */
[data-viewer] { cursor: pointer; }
.viewer-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(6px); z-index: 2; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 var(--s20) 0 var(--s24); font-size: 12px; font-weight: 600; letter-spacing: var(--track); line-height: 1; white-space: nowrap; color: #000; background: rgba(255,255,255,.92); border: 0; border-radius: var(--r-0); cursor: pointer; opacity: 0; transition: opacity var(--dur-state) var(--ease-state), transform var(--dur-state) var(--ease-state), background-color var(--dur-color) var(--ease-state); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.viewer-pill::after { content: ""; width: 0; height: 0; border-left: 9px solid #000; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
[data-viewer]:hover .viewer-pill, .viewer-pill:focus-visible { opacity: 1; transform: translate(-50%, -50%); }
.viewer-pill:hover { background: #fff; }
@media (hover: none) { .viewer-pill { opacity: 1; transform: translate(-50%, -50%); } }
.viewer { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 64px); background: rgba(0,0,0,.985); opacity: 0; transition: opacity var(--dur-plush) var(--ease-state); }
.viewer.is-open { opacity: 1; }
.viewer__stage { position: relative; width: min(100%, calc((100vh - 2 * clamp(16px, 4vw, 64px) - 56px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; transform: translateY(var(--rise)) scale(.985); opacity: 0; transition: transform var(--dur-reveal) var(--ease-entrance), opacity var(--dur-reveal) var(--ease-entrance); }
.viewer.is-open .viewer__stage { transform: none; opacity: 1; }
.viewer__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.viewer__stage video::-webkit-media-controls { display: flex !important; }
.viewer__close { position: absolute; right: 0; bottom: 100%; margin-bottom: var(--s16); display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: var(--track); color: var(--ink-60); background: none; border: 0; cursor: pointer; transition: color var(--dur-color) var(--ease-state); }
.viewer__close:hover { color: var(--ink); }
.viewer__close .x { position: relative; width: 14px; height: 14px; }
.viewer__close .x::before, .viewer__close .x::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: currentColor; transform: rotate(45deg); }
.viewer__close .x::after { transform: rotate(-45deg); }
.viewer__label { position: absolute; left: 0; bottom: 100%; margin-bottom: var(--s16); font-size: 12px; letter-spacing: var(--track); line-height: 32px; color: var(--ink-40); }
html.viewer-open, html.viewer-open body { overflow: hidden; }