/* ClearFlow-Systems — Editorial / Aussage · v2
   Monochrom auf warmem Papier, gesetzt wie ein Print-Dossier.
   Flächenleiter Papier→Greige→Weiß→Tinte, Haarlinien als Rhythmus,
   variable Schnitte (selbst gehostet), eine dunkle Schlussplatte pro Seite. */

/* ---- Schriften: selbst gehostet (Strict-EU, kein Font-CDN) ---- */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/NewsreaderItalicVariable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Flächenleiter — Papier ist der Grundton, Weiß ist eine bewusste Stufe. */
  --bg: #faf9f7;
  --surface: #f4f3ef;
  --elev: #ffffff;
  --ink: #1b1b18;
  --muted: #5c5c57;
  --faint: #737269; /* 4.6:1 auf Papier — WCAG AA für die Meta-Ebene */
  --line: #e8e7e2;
  --line-strong: #d6d5cf;
  --live: #15784a;
  --live-bg: #e7f3ec;
  --wip: #946400;
  --wip-bg: #f7efda;
  --maxw: 1120px;
  --pad: clamp(1.25rem, 6vw, 5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Typo-Skala — vier Stimmen statt fünf fast gleicher Clamps. */
  --t-display: clamp(2.8rem, 1.9rem + 4.5vw, 6.5rem);
  --t-h1: clamp(2.1rem, 1.55rem + 2.7vw, 3.6rem);
  --t-h2: clamp(1.55rem, 1.3rem + 1.5vw, 2.3rem);
  --t-h3: clamp(1.2rem, 1.08rem + .7vw, 1.55rem);

  /* Vertikaler Rhythmus — Information vs. Aussage. */
  --sp-3: clamp(64px, 9vw, 112px);
  --sp-4: clamp(104px, 13vw, 168px);

  /* Schatten — warme Ink-Schatten (nie reines Schwarz), sehr diffus. */
  --shadow-frame: 0 1px 2px rgba(27, 27, 24, .05), 0 10px 28px -10px rgba(27, 27, 24, .10), 0 28px 64px -28px rgba(27, 27, 24, .13);
  --shadow-frame-sm: 0 1px 2px rgba(27, 27, 24, .05), 0 12px 30px -16px rgba(27, 27, 24, .12);
  --shadow-frame-hover: 0 2px 4px rgba(27, 27, 24, .05), 0 28px 56px -22px rgba(27, 27, 24, .14);
  --shadow-phone: 0 2px 4px rgba(27, 27, 24, .10), 0 20px 44px -18px rgba(27, 27, 24, .18);
}

/* ============================================================
   cf MOTION TOKENS — single source of truth for the whole site.
   Every motion rule references these; no raw durations/distances.
   ============================================================ */
:root {
  /* Easing — keep --ease as the canonical entrance curve, add siblings. */
  --cf-ease: var(--ease);                         /* cubic-bezier(.16,1,.3,1) — reveals, masks */
  --cf-ease-out: cubic-bezier(.22, .61, .36, 1);  /* softer settle — hover/micro returns */
  --cf-ease-inout: cubic-bezier(.65, 0, .35, 1);  /* symmetric — curtain, two-way moves */

  /* Duration scale — 5 steps. Snap every effect to one of these. */
  --cf-dur-1: .25s;   /* micro: hover arrows, nav underline */
  --cf-dur-2: .45s;   /* short: proj-tile, idx number wipe */
  --cf-dur-3: .7s;    /* base reveal/stagger entrance — the heartbeat */
  --cf-dur-4: .9s;    /* emphatic: idx-rule draw */
  --cf-dur-5: 1.05s;  /* hero headline mask only */

  /* Stagger — one canonical step + cap (JS reads these; CSS ladder mirrors). */
  --cf-stagger: 90ms;
  --cf-stagger-cap: 420ms;

  /* Entrance distances. */
  --cf-rise: 28px;        /* section .reveal block rise */
  --cf-rise-child: 18px;  /* staggered child rise */
  --cf-mask-rise: 125%;   /* headline mask offset (>100% clears descenders) */

  /* Scroll-coupled magnitudes (JS-Fallback; nativ via scroll-driven animations). */
  --cf-idx-parallax: 14;  /* idx-num px travel, ± (unit added in JS) */
  --cf-hero-scale: 0.09;  /* hero canvas scale-down, 1 → .91 */

  /* Project frames "ziehen auf". */
  --cf-frame-scale: 0.03; /* frame opens from scale(.97) → 1 */
}

/* Wiederkehrer im selben Tab: kein Loader, halbierte Auftakt-Delays. */
html.cf-warm { --cf-stagger: 45ms; --cf-dur-3: .5s; --cf-dur-5: .8s; }
html.cf-warm .cf-loader { display: none; }

*, *::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: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 480; }
h1, h2, h3, .invite, .cta-line { text-wrap: balance; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Seitenwechsel: Cross-Document View Transitions (progressive) ----
   Der Header steht still (eigener Snapshot), das "Papier" blättert ruhig. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: cfVtOut .2s var(--cf-ease-inout) both; }
  ::view-transition-new(root) { animation: cfVtIn .32s var(--cf-ease) both; }
}
@keyframes cfVtOut { to { opacity: 0; } }
@keyframes cfVtIn { from { opacity: 0; transform: translateY(10px); } }
/* Reduced motion: Cross-Document-Transitions komplett aus (auch der UA-Crossfade). */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- Meta-Ebene — EIN Stil: gesperrte Versalien + Tabellenziffern ---- */
.eyebrow, .idx-num, .hero-meta span, .hero-scroll span,
.fact-k, .flow-step, .ci-k, .footer-col .k {
  font-size: .72rem; font-weight: 530; letter-spacing: .14em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.eyebrow { margin: 0; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 15px var(--pad); gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
/* logo.png hat weißen Grund — multiply lässt ihn auf Papier verschwinden */
.brand-logo, .footer-logo, .cf-loader-logo { mix-blend-mode: multiply; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.brand-name { font-size: 16px; font-weight: 530; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-link { font-size: 14px; color: var(--muted); transition: color .15s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-cta {
  font-size: 13px; font-weight: 530; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px; padding: 8px 18px;
  transition: background-color var(--cf-dur-1) ease, color var(--cf-dur-1) ease;
}
.nav-cta:hover, .nav-cta.active { background: var(--ink); color: var(--bg); }
.nav-cta--bar { display: none; }
.nav-toggle {
  display: none; position: relative; background: none; border: 0; color: var(--ink);
  cursor: pointer; width: 44px; height: 44px; margin-right: -10px;
}
.nav-toggle .nt-bar {
  position: absolute; left: 13px; right: 13px; height: 1px; background: var(--ink);
  transition: transform var(--cf-dur-2) var(--cf-ease), top var(--cf-dur-2) var(--cf-ease);
}
.nav-toggle .nt-bar:nth-child(1) { top: 18px; }
.nav-toggle .nt-bar:nth-child(2) { top: 25px; }
.site-header.open .nav-toggle .nt-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.site-header.open .nav-toggle .nt-bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ---- Buttons ---- */
.btn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 530; color: var(--bg); background: var(--ink);
  border-radius: 999px; padding: 14px 26px;
  transition: background-color var(--cf-dur-1) ease, color var(--cf-dur-1) ease,
    box-shadow var(--cf-dur-1) ease, transform var(--cf-dur-1) ease;
}
.btn-pill:hover {
  background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: translateY(-1px);
}
.btn-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 530; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
.arr { transition: transform .15s ease; }
.btn-link:hover .arr, .more:hover .arr { transform: translateX(3px); }

/* ---- Section index (nummerierte Haarlinien-Header) ---- */
.idx { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.idx-num { white-space: nowrap; }
.idx-rule { flex: 1; height: 0; border-top: 1px solid var(--line-strong); }

/* ---- Hero (Passepartout — volles Blatt) ---- */
.hero { padding: 0; }
.hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--pad); }
.hero-frame {
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: clamp(56px, 8vw, 96px) 0; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 200px);
}
@supports (min-height: 100svh) {
  .hero-frame { min-height: calc(100svh - 200px); }
}
.hero-frame h1 {
  font-size: var(--t-display); line-height: 1.03; font-weight: 440;
  letter-spacing: -0.035em; margin: 0 auto; max-width: 20ch;
}
.hero-frame h1 .emph { font-size: 1.04em; letter-spacing: -0.01em; }
.hero-frame .sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; color: var(--muted);
  margin: 28px auto 0; max-width: 46ch;
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.hero-scroll { display: flex; justify-content: center; padding: 16px var(--pad) 6px; }
.hero-scroll span { font-size: .66rem; }

/* ---- Generic section ---- */
.section { padding: var(--sp-3) 0; }
.section--stage { padding: var(--sp-4) 0; }

/* Getönte Vollbreiten-Platte (Projekt-Teaser) */
.section--tint {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Invertierte Schlussplatte — scoped Token-Flip, eine pro Seite, immer am Ende. */
.section--invert, .site-footer {
  --bg: #161613;
  --surface: #1a1a17;
  --elev: #1d1d1a;
  --ink: #f4f3ef;
  --muted: #a8a79f;
  --faint: #8a897f;
  --line: #2b2a26;
  --line-strong: #3a3934;
  background: var(--bg);
  color: var(--ink);
}
.section--invert { padding: var(--sp-4) 0 clamp(72px, 9vw, 112px); }

/* ---- Haltung ---- */
.stance {
  font-size: var(--t-h2); line-height: 1.4; font-weight: 450; letter-spacing: -0.015em;
  max-width: 760px; margin: 0 0 0 auto;
}
.emph { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 420; }

/* ============================================================
   LEISTUNGEN-STORY — Sticky-Bühne mit Mini-Demos (Startseite).
   Die Bühne klebt links und wechselt die Szene, die Kapitel
   scrollen rechts vorbei. Mobil & ohne JS: gestapelte Inline-
   Demos pro Kapitel. Miniaturen = reine CSS-Loops, beschriftet
   als „Beispieldaten" — keine erfundenen Kunden oder Zahlen.
   ============================================================ */
.sty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sty-stage-wrap { position: sticky; top: clamp(84px, 14vh, 150px); }
.sty-stage {
  background: var(--elev); box-shadow: var(--shadow-frame);
  padding: 20px; min-height: 330px; position: relative;
}
.sty-scene {
  position: absolute; inset: 20px 20px 48px;
  opacity: 0; transition: opacity var(--cf-dur-2) var(--cf-ease);
  pointer-events: none;
}
.sty-scene.is-active { opacity: 1; }
.sty-ticks { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 6px; }
.sty-ticks i { width: 22px; height: 1px; background: var(--line-strong); transition: background-color var(--cf-dur-2) var(--cf-ease); }
.sty-ticks i.is-active { background: var(--ink); }
.sty-tag {
  position: absolute; right: 18px; bottom: 14px;
  font-size: .6rem; font-weight: 530; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.sty-chapters { display: flex; flex-direction: column; }
.sty-chapter {
  min-height: 56vh; display: flex; flex-direction: column; justify-content: center;
  padding: 7vh 0; border-top: 1px solid var(--line);
}
.sty-chapter:first-child { border-top: 0; padding-top: 2vh; }
.sty-chapter h2 { font-size: var(--t-h2); font-weight: 470; letter-spacing: -0.02em; line-height: 1.12; margin: 14px 0 12px; max-width: 18ch; }
.sty-chapter > p { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 46ch; }
.sty-chapter .btn-link { font-size: 14px; align-self: flex-start; }
html.js .sty-chapter { opacity: .55; transition: opacity var(--cf-dur-2) var(--cf-ease); }
html.js .sty-chapter.is-active { opacity: 1; }
.sty-inline { display: none; background: var(--surface); border: 1px solid var(--line); padding: 14px; margin: 0 0 20px; position: relative; }

/* ---- System-Schema: EINE Grammatik für alle drei Szenen.
   Eingang → System → Ausgang; ein Signal wandert die Haarlinie entlang,
   das System arbeitet, der Ausgang bestätigt. Ruhig, monochrom, technisch. ---- */
.sys { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sys-node { border: 1px solid var(--line-strong); background: var(--bg); padding: 9px 13px; }
.sys-node .k {
  display: block; font-size: .56rem; font-weight: 530; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}
.sys-node b { display: block; font-size: 12.5px; font-weight: 530; line-height: 1.3; }
.sys-node i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.sys-core { border-color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); }
.sys-core i { animation: sysWork 7s infinite; }
@keyframes sysWork { 0%, 22% { color: var(--muted); } 26%, 42% { color: var(--ink); } 48%, 100% { color: var(--muted); } }
.sys-link { position: relative; width: 1px; height: 22px; background: var(--line-strong); margin-left: 28px; }
.sys-sig { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0; }
.sys-l1 .sys-sig { animation: sysSig1 7s infinite; }
.sys-l2 .sys-sig { animation: sysSig2 7s infinite; }
@keyframes sysSig1 { 0%, 6% { opacity: 0; transform: translateY(-2px); } 10% { opacity: 1; } 22% { opacity: 1; transform: translateY(18px); } 26%, 100% { opacity: 0; transform: translateY(18px); } }
@keyframes sysSig2 { 0%, 44% { opacity: 0; transform: translateY(-2px); } 48% { opacity: 1; } 60% { opacity: 1; transform: translateY(18px); } 64%, 100% { opacity: 0; transform: translateY(18px); } }
.sys-node .sys-ok { color: var(--live); animation: sysOk 7s infinite; }
@keyframes sysOk { 0%, 60% { opacity: .3; } 68%, 96% { opacity: 1; } 100% { opacity: .3; } }
.sys-out2 { display: flex; gap: 8px; }
.sys-out2 .sys-node { flex: 1; }
.sys-alt { opacity: .55; }

/* Story mobil: Bühne klebt oben unterm Header, Kapitel scrollen darunter
   durch — gleiche Dramaturgie wie am Desktop, nur vertikal gestapelt. */
@media (max-width: 860px) {
  .sty { grid-template-columns: 1fr; gap: 18px; }
  .sty-stage-wrap { position: sticky; top: 62px; z-index: 5; }
  .sty-stage { padding: 14px; min-height: 330px; overflow: hidden; }
  .sty-scene { inset: 14px 14px 40px; }
  .sty-ticks { left: 14px; bottom: 15px; }
  .sty-tag { right: 12px; bottom: 10px; }
  .sty-chapter { min-height: 52vh; padding: 5vh 0; }
  .sty-chapter:first-child { padding-top: 10px; }
  .sty-chapter h2 { max-width: none; }
}
html:not(.js) .sty { grid-template-columns: 1fr; }
html:not(.js) .sty-stage-wrap { display: none; }
html:not(.js) .sty-inline { display: block; }
html:not(.js) .sty-chapter { min-height: 0; padding: 30px 0; justify-content: flex-start; }

/* ---- Badges (Live / In Arbeit) ---- */
.badge {
  font-size: 11px; font-weight: 530; border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge-live { color: var(--live); background: var(--live-bg); }
.badge-live .dot { background: var(--live); animation: cfPulse 2.4s ease-out infinite; }
.badge-wip { color: var(--wip); background: var(--wip-bg); }
.badge-wip .dot { border: 1.5px solid var(--wip); }
@keyframes cfPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 35%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* ---- Studio ---- */
.studio { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; }
.studio p { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; margin: 0; max-width: 50ch; }
.facts { display: flex; flex-direction: column; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); align-items: baseline; }
.fact:first-child { border-top: 0; }
.fact-v { font-size: 14px; color: var(--ink); text-align: right; }
.geo { font-size: .72rem; font-weight: 530; letter-spacing: .14em; color: var(--faint); margin: 20px 0 0; font-variant-numeric: tabular-nums; }

/* ---- Kontakt-CTA (Schlussplatte) ---- */
.invite { font-size: var(--t-h1); line-height: 1.14; font-weight: 450; letter-spacing: -0.03em; max-width: 20ch; margin: 0 0 32px; }
.kontakt-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.mail-link { font-size: 15px; font-weight: 530; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }

/* ---- Footer — editorialer Vertrauens-Block auf der Tintenplatte ---- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 64px) 0 26px; }
.footer-wordmark {
  font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 520; letter-spacing: -0.03em;
  line-height: 1; margin: 0 0 clamp(28px, 4vw, 44px);
}
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-bottom: clamp(28px, 4vw, 44px);
}
.footer-col .k { display: block; margin-bottom: 12px; }
.footer-col a, .footer-col span.v { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; }
.footer-col a { transition: color .15s ease; }
.footer-col a:hover { color: var(--ink); }
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); margin-right: 8px; vertical-align: 1px;
  animation: cfPulse 2.4s ease-out infinite;
}
.footer-meta {
  border-top: 1px solid var(--line); padding-top: 18px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--faint);
}
.footer-meta a:hover { color: var(--ink); }

/* ---- Shared page intro (inner pages) ---- */
.page-intro { padding: 64px 0 40px; }
.page-intro h1 { font-size: var(--t-h1); line-height: 1.08; font-weight: 450; letter-spacing: -0.03em; margin: 18px 0 0; max-width: 18ch; }
.page-intro .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; color: var(--muted); margin: 24px 0 0; max-width: 56ch; }
.page-intro .badge { margin-bottom: 18px; }

/* ---- Zweispalter — Unterseiten-Sektionen (h2 links, Inhalt rechts) ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 18px 48px; align-items: start; }

/* ---- Inner-page content ---- */
.section h2 { font-size: var(--t-h2); font-weight: 480; letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 16px; max-width: 24ch; }
.section .body { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.section .body:last-child { margin-bottom: 0; }
.section .body strong { color: var(--ink); font-weight: 530; }
.list { list-style: none; padding: 0; margin: 10px 0 0; max-width: 64ch; }
.list li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--muted); }
.list li:first-child { border-top: 0; }
.list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 1px; background: var(--ink); }
.list li strong { color: var(--ink); font-weight: 530; display: block; margin-bottom: 2px; }
.cta-line { font-size: var(--t-h1); font-weight: 450; letter-spacing: -0.03em; line-height: 1.14; max-width: 20ch; margin: 0 0 28px; }

/* ---- Status-Panel (Projektseiten): Datenblatt-Moment, nur Fakten ---- */
.status-panel {
  border: 1px solid var(--line); background: var(--elev);
  padding: 8px 24px; margin-top: 22px; max-width: 460px;
  box-shadow: var(--shadow-frame-sm);
}
.status-panel .fact-v a { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.status-panel .fact-v a:hover { border-color: var(--ink); }

/* ---- Prinzipien-Raster (Über uns): gezeichnete Tabelle, Serif-Ziffern ---- */
.principles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.principle { background: var(--bg); padding: 26px 28px; }
.principle .num {
  font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 420;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--line-strong);
  display: block; margin-bottom: 14px;
}
.principle h3 { font-size: 1.05rem; font-weight: 530; margin: 0 0 6px; }
.principle p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .nav-cta--bar { display: inline-flex; align-items: center; }
  .nav .nav-cta--bar { margin-left: auto; }

  /* Editoriales Overlay-Menü — große nummerierte Zeilen, gestaffelt. */
  .nav-links {
    position: fixed; left: 0; right: 0; top: 61px; bottom: 0; z-index: 39;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px var(--pad) 28px; overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--cf-dur-2) var(--cf-ease), visibility 0s linear var(--cf-dur-2);
  }
  .site-header.open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--cf-dur-2) var(--cf-ease);
  }
  .nav-links a {
    display: flex; align-items: baseline; gap: 14px;
    font-size: clamp(1.5rem, 7vw, 1.9rem); font-weight: 450; letter-spacing: -0.02em;
    color: var(--ink); padding: 18px 0; border-top: 1px solid var(--line);
    border-radius: 0; border-right: 0; border-left: 0; border-bottom-width: 0;
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--cf-dur-3) var(--cf-ease), transform var(--cf-dur-3) var(--cf-ease), color .15s ease;
  }
  .nav-links a:first-child { border-top: 0; }
  .nav-links a::before {
    content: attr(data-idx);
    font-size: .72rem; font-weight: 530; letter-spacing: .16em;
    color: var(--faint); font-variant-numeric: tabular-nums;
  }
  .site-header.open .nav-links a { opacity: 1; transform: none; }
  .site-header.open .nav-links a:nth-child(1) { transition-delay: 40ms; }
  .site-header.open .nav-links a:nth-child(2) { transition-delay: calc(40ms + var(--cf-stagger)); }
  .site-header.open .nav-links a:nth-child(3) { transition-delay: calc(40ms + var(--cf-stagger) * 2); }
  .site-header.open .nav-links a:nth-child(4) { transition-delay: calc(40ms + var(--cf-stagger) * 3); }
  .site-header.open .nav-links a:nth-child(5) { transition-delay: calc(40ms + var(--cf-stagger) * 4); }
  .nav-links .nav-cta, .nav-links .nav-cta:hover, .nav-links .nav-cta.active {
    background: transparent; color: var(--ink); padding: 18px 0;
  }
  body.menu-open { overflow: hidden; }

  /* Ohne JS: kein Overlay-Toggle möglich → Toggle weg, Links als statische Liste. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav-links {
    position: static; width: 100%;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 4px 0 14px;
  }
  html:not(.js) .nav-links a {
    opacity: 1; transform: none;
    font-size: 16px; padding: 12px 0;
  }

  .hero { min-height: auto; padding: 0; }
  .hero-frame { min-height: 58vh; }
  @supports (min-height: 100svh) { .hero-frame { min-height: 60svh; } }
  .hero-meta span, .hero-scroll span { letter-spacing: .1em; font-size: .62rem; }
  .studio { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 12px; }
  .stance { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .principles { grid-template-columns: 1fr; }
}

/* ---- Korn — statisches Papier-Rauschen, nur wo Fläche es trägt.
   Einmaliger Paint (kein fixed Layer, kein blend-mode), pointer-events frei. ---- */
.hero-frame::after, .section--invert::after, .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04;
}
.section--invert, .site-footer { position: relative; }
.section--invert::after, .site-footer::after { opacity: .06; }

/* ---- Motion: hero background + scroll reveals + micro-interactions ----
   overflow: clip statt hidden — hidden macht den Frame zum Scroll-Container,
   woran sonst die view()-Timeline des Hero-Fades bindet (und ewig bei 0 steht).
   Browser ohne clip-Support fallen auf hidden zurück (die haben eh kein view()). */
.hero-frame { position: relative; overflow: hidden; overflow: clip; }
.hero-frame > .container { position: relative; z-index: 1; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  /* Maske: unterm Text (Mitte) nur ein Hauch der Welle, voller Ring außen,
     weiche Kante zum Rand — die Punkte laufen nicht mehr über die Headline. */
  -webkit-mask-image: radial-gradient(ellipse 95% 92% at 50% 52%, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .22) 24%, #000 56%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 92% at 50% 52%, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .22) 24%, #000 56%, #000 72%, transparent 100%);
}

html.js .reveal { opacity: 0; transform: translateY(var(--cf-rise)); transition: opacity var(--cf-dur-3) var(--cf-ease), transform var(--cf-dur-3) var(--cf-ease); }
html.js .reveal.in { opacity: 1; transform: none; }

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
@media (max-width: 760px) { .nav-link::after { display: none; } }

/* ---- Inner-page hover: das Lineal unter der Zeile ---- */
.list li { transition: transform .3s var(--ease), color .25s ease; }
.list li::before { transform-origin: left center; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .list li:hover { transform: translateX(6px); color: var(--ink); }
  .list li:hover::before { transform: scaleX(2.1); }
}

/* ---- Scroll-FX: Progress-Haarlinie ---- */
.cf-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}
html:not(.js) .cf-progress { display: none; }
html.js .hero-canvas {
  --cf-hero-o: 1; --cf-hero-s: 1;
  opacity: var(--cf-hero-o);
  transform: scale(var(--cf-hero-s));
  transform-origin: 50% 42%;
}
html.js .idx-num {
  --cf-idx-y: 0px;
  transform: translate3d(0, var(--cf-idx-y), 0);
}

/* Nativ, wo verfügbar: scroll-driven animations auf dem Compositor.
   script.js erkennt den Support und überspringt dann den JS-Pfad. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .cf-progress {
      animation: cfProgressGrow linear both;
      animation-timeline: scroll(root);
    }
    html.js .hero-canvas {
      animation: cfHeroAway linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 85%;
    }
    html.js .section .idx-num {
      animation: cfIdxDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes cfProgressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cfHeroAway { to { opacity: 0; transform: scale(.91); } }
@keyframes cfIdxDrift { from { transform: translateY(14px); } to { transform: translateY(-14px); } }

/* Feature-Reihen: ruhiger Gegen-Drift beim Durchscrollen (Desktop, nativ). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .feature-media {
      animation: cfMediaDrift linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 90%;
    }
  }
}
@keyframes cfMediaDrift { from { transform: translateY(18px); } to { transform: translateY(-18px); } }

/* ============================================================
   SITE-WIDE MOTION PASS — kohärentes System (alle Sektionen)
   Nur transform/opacity. Monochrom. html.js-gegatet.
   ============================================================ */

/* 1) Heading reveal — pro <br>-Zeile eine Clip-Maske (.cf-mask-line),
   deren Inner (.cf-mask-shift) hochwischt. */
html.js .cf-mask { overflow: hidden; }
html.js .cf-mask-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
html.js .cf-mask-line > .cf-mask-shift {
  display: block;
  transform: translateY(var(--cf-mask-rise));
  transition: transform var(--cf-dur-5) var(--cf-ease);
  transition-delay: var(--cf-d, 0ms);
  will-change: transform;
}
html.js .cf-mask-line > .cf-mask-shift.cf-wiped { transform: translateY(0); will-change: auto; }
html.js .cf-mask-line .emph,
html.js .cf-mask-shift .emph { display: inline; transform: none; }

/* .emph in §01 .stance: ruht in --muted, vertieft auf --ink + Haarlinie. */
html.js .stance .emph {
  position: relative;
  color: var(--muted);
  transition: color var(--cf-dur-3) var(--cf-ease);
  transition-delay: var(--cf-stagger-cap);
}
html.js .stance .emph::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.02em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cf-dur-3) var(--cf-ease);
  transition-delay: calc(var(--cf-stagger-cap) + 90ms);
  pointer-events: none;
}
html.js .reveal.in .stance .emph { color: var(--ink); }
html.js .reveal.in .stance .emph::after { transform: scaleX(1); }

/* 2) Gestaffelte Sektions-Kinder (das eine Entrance-System) */
html.js .reveal.section > .container > *:not(script):not(.cf-mask):not(.cf-frame),
html.js .reveal.page-intro > .container > *:not(script):not(.cf-mask):not(.cf-frame) {
  opacity: 0;
  transform: translateY(var(--cf-rise-child));
  transition: opacity var(--cf-dur-3) var(--cf-ease), transform var(--cf-dur-3) var(--cf-ease);
  transition-delay: var(--cf-d, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.section.in > .container > *:not(.cf-mask):not(.cf-frame),
html.js .reveal.page-intro.in > .container > *:not(.cf-mask):not(.cf-frame) {
  opacity: 1;
  transform: none;
  will-change: auto;
}
html.js .reveal.section.in > .container > *:nth-child(1),
html.js .reveal.page-intro.in > .container > *:nth-child(1) { --cf-d: 0ms; }
html.js .reveal.section.in > .container > *:nth-child(2),
html.js .reveal.page-intro.in > .container > *:nth-child(2) { --cf-d: var(--cf-stagger); }
html.js .reveal.section.in > .container > *:nth-child(3),
html.js .reveal.page-intro.in > .container > *:nth-child(3) { --cf-d: calc(var(--cf-stagger) * 2); }
html.js .reveal.section.in > .container > *:nth-child(4),
html.js .reveal.page-intro.in > .container > *:nth-child(4) { --cf-d: calc(var(--cf-stagger) * 3); }
html.js .reveal.section.in > .container > *:nth-child(n+5),
html.js .reveal.page-intro.in > .container > *:nth-child(n+5) { --cf-d: calc(var(--cf-stagger) * 4); }

/* 3) Index-Header zeichnet sich ein — .idx-num Clip-Wipe + retimter Strich. */
html.js .cf-idx-mask {
  display: inline-block;
  line-height: inherit;
  letter-spacing: inherit;
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.18em);
  transition: clip-path var(--cf-dur-2) var(--cf-ease), transform var(--cf-dur-2) var(--cf-ease);
  will-change: clip-path, transform;
}
html.js .section.in .cf-idx-mask,
html.js .cf-idx-drawn .cf-idx-mask {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  will-change: auto;
}
html.js .section .idx-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cf-dur-4) var(--cf-ease) var(--cf-dur-2);
}
html.js .section.in .idx-rule,
html.js .cf-idx-drawn .idx-rule {
  transform: scaleX(1);
}

/* ---- Touch: unsichtbare Trefferflächen-Erweiterung für Textlinks (44px-Ziel).
   Nur coarse pointer; auf .proj-tile .more bleibt das Underline-::after (höhere
   Spezifität) — die Kachel selbst ist dort das Tap-Ziel. ---- */
@media (pointer: coarse) {
  .btn-link, .mail-link, .footer-meta a, .contact-list a.ci-v, .proj-domain { position: relative; }
  .btn-link::after, .mail-link::after, .footer-meta a::after, .contact-list a.ci-v::after {
    content: ""; position: absolute; inset: -12px -8px;
  }
  .footer-col a { padding: 9px 0; }
}

/* ---- Fokus-Ringe (Tastatur) ---- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-pill:focus-visible { outline-offset: 4px; }
.btn-link:focus-visible, .mail-link:focus-visible, .more:focus-visible { outline-offset: 4px; }

/* ============================================================
   PROJEKT-SHOWCASE — Frames (Browser/Phone) + Feature-Reihen
   ============================================================ */

/* Browser frame (Dashboard-Screens) — Objekt auf Papier */
.bframe {
  border: 1px solid var(--line-strong); border-radius: var(--border-radius-lg);
  overflow: hidden; background: var(--elev);
  box-shadow: var(--shadow-frame);
}
.bframe-bar {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(#f7f6f2, #f1f0ec);
}
.bframe-bar .d { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid var(--line-strong); }
.bframe-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.02em; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px;
  background: #fbfaf8; line-height: 1.4;
}
.bframe img { display: block; width: 100%; height: auto; }

/* Phone frame (Gast-Screens) — dunkler Körper mit gedrehter Bezel-Kante */
.pframe {
  background: #161614; border-radius: 34px; padding: 9px; border: 0;
  width: 100%; max-width: 230px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .4), var(--shadow-phone);
}
.pframe img { display: block; width: 100%; height: auto; border-radius: 26px; }

/* Horizontale Flow-Leiste aus Phones — bricht rechts aus dem Container aus */
.flow-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(155px, 1fr);
  gap: 18px; overflow-x: auto; padding: 4px 0 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--pad), calc(50vw - 560px + var(--pad)));
  scroll-padding-left: max(var(--pad), calc(50vw - 560px + var(--pad)));
  grid-auto-columns: minmax(165px, 210px);
}
/* Scrollbar nur verstecken, wenn JS die Fortschrittslinie bespielen kann. */
html.js .flow-strip { scrollbar-width: none; }
html.js .flow-strip::-webkit-scrollbar { display: none; }
.flow-item { display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.flow-item .pframe { max-width: none; }
/* Kontaktbogen-Rhythmus: jede zweite Karte sitzt tiefer (nur Desktop). */
@media (min-width: 761px) {
  .flow-strip { align-items: start; }
  .flow-item:nth-child(even) { margin-top: 34px; }
}
.flow-cap { font-size: 13px; line-height: 1.5; color: var(--muted); }
.flow-cap b { display: block; color: var(--ink); font-weight: 530; margin-bottom: 2px; }

/* Fortschritts-Haarlinie unterm Strip (ersetzt die System-Scrollbar; nur mit JS) */
.flow-progress { height: 1px; background: var(--line); margin-top: 6px; overflow: hidden; }
.flow-progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
html:not(.js) .flow-progress { display: none; }

/* Feature-Reihe: Medium + Text, abwechselnd. Die Media-Seite liegt als
   Passepartout-Platte auf dem Papier (Frame nie nackt auf dem Grund). */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; align-items: center; }
.feature-media { padding: clamp(16px, 2.5vw, 30px); background: var(--surface); border: 1px solid var(--line); }
.feature + .feature { margin-top: 56px; }
.feature.flip .feature-media { order: 2; }
.feature-body h3 { font-size: var(--t-h3); font-weight: 480; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 14px; }
.feature-body .body { margin: 0; }
.feature-media .bframe-url-note { font-size: 12px; color: var(--faint); margin: 10px 2px 0; }

/* Screenshots „entwickeln“ sich beim Aufziehen (nur Projekt-Detailseiten). */
html.js .feature-media .cf-frame img,
html.js .flow-item .cf-frame img {
  filter: grayscale(1);
  transition: filter .9s var(--cf-ease) .25s;
}
html.js .feature-media .cf-frame.cf-frame-in img,
html.js .flow-item .cf-frame.cf-frame-in img { filter: none; }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 18px; }
  .feature.flip .feature-media { order: 0; }
  .pframe { max-width: 220px; margin: 0 auto; }
  .flow-strip { grid-auto-columns: 74%; gap: 14px; }
}

/* ---- Projekt-Teaser-Tafeln (Start/Projekte) — asymmetrisch, Farbe als Belohnung ---- */
.proj-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.proj-tile {
  display: block; overflow: hidden; background: var(--elev);
  box-shadow: var(--shadow-frame);
  transition: box-shadow .35s var(--ease);
}
.proj-tile:nth-child(2) { margin-top: clamp(28px, 6vw, 72px); }
.proj-tile:hover { box-shadow: var(--shadow-frame-hover); }
.proj-shot {
  height: clamp(240px, 26vw, 340px); overflow: hidden; background: var(--surface);
  display: flex; justify-content: center; align-items: flex-start;
  border-bottom: 1px solid var(--line);
}
.proj-shot.phone { padding-top: 30px; }
.proj-shot.browser { padding: 30px 30px 0; }
.proj-phone { width: clamp(140px, 13vw, 176px); max-width: none; }
.proj-browser { width: 100%; }
.proj-shot .pframe, .proj-shot .bframe {
  transition: transform .6s var(--cf-ease);
  box-shadow: var(--shadow-frame-sm);
}
.proj-body { padding: 20px 24px 22px; }
.proj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.proj-head h2, .proj-head h3 { font-size: 20px; font-weight: 480; letter-spacing: -0.01em; margin: 0; }
.proj-tile .proj-body p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.proj-tile .more { font-size: 13px; font-weight: 530; display: inline-flex; gap: 7px; align-items: center; position: relative; }
.proj-tile .more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--cf-dur-1) var(--cf-ease);
}
.proj-tile:hover .more::after { transform: scaleX(1); }
.proj-tile:hover .more .arr { transform: translateX(3px); }
.proj-domain {
  display: block; margin-top: 12px;
  font-size: .68rem; font-weight: 530; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums;
}
.more { font-size: 14px; font-weight: 530; display: inline-flex; gap: 7px; align-items: center; }

@media (hover: hover) and (pointer: fine) {
  .proj-tile img { filter: grayscale(1); transition: filter .45s var(--ease); }
  .proj-tile:hover img { filter: none; }
  .proj-tile:hover .pframe { transform: translateY(-6px); }
  .proj-tile:hover .bframe { transform: translateY(-4px); }
}
.proj-tile:active { opacity: .92; }

@media (max-width: 760px) {
  .proj-grid { grid-template-columns: 1fr; }
  .proj-tile:nth-child(2) { margin-top: 0; }
}

/* ============================================================
   PROJEKT-FRAMES "ziehen auf" — Clip-/Scale-Entrance
   Hook-Klasse .cf-frame kommt aus JS (script.js, IIFE F).
   ============================================================ */
html.js .cf-frame {
  clip-path: inset(0 0 100% 0);
  transform: scale(calc(1 - var(--cf-frame-scale)));
  transform-origin: 50% 0%;
  transition:
    clip-path var(--cf-dur-3) var(--cf-ease),
    transform var(--cf-dur-3) var(--cf-ease);
  transition-delay: var(--cf-fd, 0ms);
  will-change: clip-path, transform;
}
html.js .cf-frame.cf-frame-in {
  clip-path: inset(0 0 0 0);
  transform: none;
  will-change: auto;
}
/* Teaser-Frames: Entrance-Wipe (inkl. --cf-fd-Stagger) behalten, danach
   schneller Hover-Lift. Der Lift braucht höhere Spezifität als das
   `transform: none` von .cf-frame-in, sonst gewinnt die Entrance-Endlage. */
html.js .proj-shot .cf-frame.cf-frame-in {
  transition: clip-path var(--cf-dur-3) var(--cf-ease) var(--cf-fd, 0ms), transform .6s var(--cf-ease);
}
@media (hover: hover) and (pointer: fine) {
  html.js .proj-tile:hover .pframe.cf-frame-in { transform: translateY(-6px); }
  html.js .proj-tile:hover .bframe.cf-frame-in { transform: translateY(-4px); }
}

/* ============================================================
   KONTAKT — Split-Layout (Info + Formblatt) · Haarlinien-System
   ============================================================ */
.kontakt-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.kontakt-aside h2 { font-size: var(--t-h3); font-weight: 480; letter-spacing: -0.01em; margin: 0 0 14px; }
.kontakt-aside .body { margin: 0 0 26px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; }
.contact-list .ci { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.contact-list .ci:first-child { border-top: 0; }
.contact-list .ci-k { min-width: 92px; }
.contact-list .ci-v { font-size: 15px; color: var(--ink); }
.contact-list a.ci-v { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color .2s var(--cf-ease); }
.contact-list a.ci-v:hover { border-color: var(--ink); }

.cf-form { display: flex; flex-direction: column; gap: 22px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cf-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.cf-field > span {
  font-size: .68rem; font-weight: 530; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.cf-field input, .cf-field textarea, .cf-field select {
  font-family: inherit; font-size: 15px; color: var(--ink); width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: 10px 2px; outline: none;
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--faint); }
.cf-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--cf-dur-2) var(--cf-ease);
  pointer-events: none;
}
.cf-field:focus-within::after { transform: scaleX(1); }
.cf-field input:focus-visible, .cf-field textarea:focus-visible, .cf-field select:focus-visible { outline: none; }
.cf-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5c57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.cf-form button.btn-pill { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.cf-note { font-size: 13px; color: var(--faint); margin: 0; }

@media (max-width: 760px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-field input, .cf-field textarea, .cf-field select { font-size: 16px; } /* iOS: kein Auto-Zoom */
  .cf-form button.btn-pill { align-self: stretch; justify-content: center; padding: 16px 26px; }
}

/* ============================================================
   PROSE — Lauftext für Impressum / Datenschutz
   ============================================================ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--t-h3); font-weight: 480; letter-spacing: -0.01em; line-height: 1.2; margin: 40px 0 12px; }
.prose h3 { font-size: 1.05rem; font-weight: 530; margin: 24px 0 8px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 530; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color .2s var(--cf-ease); }
.prose a:hover { border-color: var(--ink); }
.prose ul { margin: 0 0 16px; padding-left: 18px; }
.prose li { font-size: 16px; line-height: 1.65; color: var(--muted); margin-bottom: 6px; }
.prose .updated { font-size: 13px; color: var(--faint); margin: -6px 0 22px; }

/* Kleingedrucktes — Impressum/Datenschutz als kompakter Spaltensatz.
   Inhaltlich unverändert (Transparenzgebot Art. 12 DSGVO), aber gesetzt
   wie das Kolophon eines Dossiers: klein, eng, Zeitungsspalten. */
.prose--fine { max-width: none; column-width: 34ch; column-gap: 44px; column-rule: 1px solid var(--line); }
.prose--fine .updated { column-span: all; margin: 0 0 18px; }
.prose--fine h2 { font-size: .92rem; margin: 0 0 8px; break-after: avoid; }
.prose--fine * + h2 { margin-top: 22px; }
.prose--fine h3 { font-size: .82rem; margin: 14px 0 5px; break-after: avoid; }
.prose--fine p, .prose--fine li { font-size: 13px; line-height: 1.55; }
.prose--fine p { margin: 0 0 10px; }
.prose--fine ul { margin: 0 0 10px; padding-left: 15px; }
.prose--fine li { margin-bottom: 3px; }

/* ---- Kontaktformular: Sende-Status (Laden / Erfolg / Fehler) ---- */
.cf-form-status {
  font-size: 14px; line-height: 1.5; margin: 4px 0 0;
  padding: 12px 14px; border-radius: var(--border-radius-md); border: 1px solid var(--line-strong);
}
.cf-form-status[hidden] { display: none; }
.cf-form-status.is-ok { color: var(--live); background: var(--live-bg); border-color: color-mix(in srgb, var(--live) 28%, transparent); }
.cf-form-status.is-err { color: #b42318; background: #fdecea; border-color: color-mix(in srgb, #b42318 28%, transparent); }
.cf-form-status a { color: inherit; text-decoration: underline; }
.btn-pill.is-loading { opacity: .72; cursor: progress; }
.cf-spin {
  display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cfSpin .6s linear infinite;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }

/* ============================================================
   LADESCREEN — nur beim Erstbesuch (sessionStorage-Gate im Head).
   Logo + Wortmarke + füllende Fortschrittslinie; CSS-Netz nach 5 s.
   ============================================================ */
.cf-loader {
  position: fixed; inset: 0; z-index: 9500; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  animation: cfLoaderSafety 0s linear 5s forwards;
}
html:not(.js) .cf-loader { display: none; }
.cf-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cf-loader-logo { width: 52px; height: 52px; display: block; opacity: 0; transform: translateY(6px); animation: cfLoaderIn .6s var(--cf-ease) .05s forwards; }
.cf-loader-name { font-size: 19px; font-weight: 530; letter-spacing: -0.01em; color: var(--ink); opacity: 0; transform: translateY(6px); animation: cfLoaderIn .6s var(--cf-ease) .16s forwards; }
.cf-loader-bar { width: 150px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cf-loader-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; animation: cfLoaderFill .85s var(--cf-ease) .24s forwards; }
.cf-loader.cf-loader-out { opacity: 0; pointer-events: none; transition: opacity .55s var(--cf-ease); }
@keyframes cfLoaderIn { to { opacity: 1; transform: none; } }
@keyframes cfLoaderFill { to { transform: scaleX(1); } }
@keyframes cfLoaderSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ============================================================
   Reduced motion: alles aus, sofort sichtbar
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .cf-mask { overflow: visible; }
  html.js .cf-mask-line { overflow: visible; }
  html.js .cf-mask-line > .cf-mask-shift { transform: none; transition: none; will-change: auto; }
  html.js .stance .emph { color: var(--ink); transition: none; }
  html.js .stance .emph::after { transform: scaleX(1); transition: none; }
  /* Selben Selektor wie die Basisregel verwenden — sonst verliert der
     Reduce-Block den Spezifitäts-Vergleich und die Kinder bleiben versteckt. */
  html.js .reveal.section > .container > *:not(script):not(.cf-mask):not(.cf-frame),
  html.js .reveal.page-intro > .container > *:not(script):not(.cf-mask):not(.cf-frame) {
    opacity: 1; transform: none; transition: none; will-change: auto;
  }
  .list li, .list li::before { transition: none; }
  .list li:hover, .list li:hover::before { transform: none; }
  /* Leistungen-Story: Miniaturen im lesbaren Endzustand einfrieren,
     Kapitel voll sichtbar; Szenenwechsel bleibt (Inhalt), nur ohne Fade. */
  .sys-sig, .sys-core i, .sys-node .sys-ok { animation: none; }
  .sys-sig { opacity: 0; }
  .sys-node .sys-ok { opacity: 1; }
  .sty-scene, .sty-ticks i { transition: none; }
  html.js .sty-chapter { opacity: 1; transition: none; }
  .cf-progress { display: none; }
  html.js .hero-canvas { opacity: 1; transform: none; will-change: auto; animation: none; }
  html.js .idx-num, html.js .section .idx-num { transform: none; will-change: auto; animation: none; }
  html.js .cf-idx-mask { clip-path: none; transform: none; transition: none; will-change: auto; }
  html.js .section .idx-rule { transform: scaleX(1); transition: none; }
  html.js .cf-frame { clip-path: none; transform: none; transition: none; will-change: auto; transition-delay: 0ms; }
  html.js .feature-media .cf-frame img, html.js .flow-item .cf-frame img { filter: none; transition: none; }
  .feature-media { animation: none; }
  .nav-link::after, .btn-pill, .proj-tile, .arr,
  .proj-shot .pframe, .proj-shot .bframe, .proj-tile img,
  .cf-field::after, .nav-toggle .nt-bar, .nav-links, .nav-links a { transition: none; }
  .btn-pill:hover { transform: none; }
  .proj-tile:hover .pframe, .proj-tile:hover .bframe { transform: none; }
  .badge-live .dot, .live-dot { animation: none; }
  .cf-spin { animation: none; }
  .cf-loader { display: none; }
}