/* ==========================================================================
   Maßwerk – Websites nach Maß
   System: Creme (Flächen), dunkles Petrol (Buttons, Fließtext), Petrol (Logo,
   Überschriften, Interaktion), gedeckte Aubergine (sparsame Akzente).
   Raster, Zirkelkreise und Kugel (assets/js/kugel.js) haben ihre eigenen Töne.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  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: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
  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;
}
/* Fraunces (SIL Open Font License), variabel: opsz, wght, SOFT, WONK. Für Überschriften. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Fraunces";
  src: url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
/* Caveat (SIL Open Font License), variabel 400 bis 700: nur für das Gelenkwort „Aber“. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geistmono-latin.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Flächen: Creme. --paper entspricht exakt der Rasterfläche im WebGL. */
  --paper: #EDE6D8;
  --paper-2: #E5DDCC;
  --surface: #F6F1E7;
  /* Dunkles Petrol: primäre Buttons und Fließtext */
  --ink: #344F5A;
  --ink-hover: #2B434D;
  --fg-2: #344F5A;
  --fg-3: #4F6670;
  /* Petrol: Logo, Schriftzug, Überschriften, interaktive Elemente */
  --petrol: #436B78;
  --green: #436B78;
  --green-deep: #344F5A;
  --green-soft: rgba(67, 107, 120, 0.12);
  /* Gedeckte Aubergine: Maßlinie im Logo und ausgewählte Akzente */
  --aubergine: #795566;
  --aubergine-soft: rgba(121, 85, 102, 0.1);
  /* Warmes Dunkelgrau für Beschreibungen unter zweistufigen Überschriften */
  --body: #4A4643;

  --bg: var(--paper);
  --fg: var(--ink);
  --line: rgba(52, 79, 90, 0.16);
  --line-strong: rgba(52, 79, 90, 0.32);

  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* Schriftgrößen */
  --t-label: 0.875rem;
  --t-small: 0.9375rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.45vw, 1.3125rem);
  --t-h3: clamp(1.3rem, 1.9vw, 1.625rem);
  --t-h2: clamp(2.25rem, 5vw, 4.25rem);

  /* Zeilenlängen */
  --measure: 58ch;
  --measure-short: 42ch;

  /* Abstände */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px;
  --section: clamp(88px, 11vw, 168px);
  --max: 1360px;
  --gutter: clamp(16px, 4vw, 64px);
  --radius: 14px;

  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 1s;
}
.tone { --bg: var(--paper-2); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--petrol); text-wrap: balance; font-variation-settings: "SOFT" 50; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--green); color: var(--surface); }

.mono { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; font-weight: 500; }
/* Ruhige, gut lesbare Abschnittsbezeichnung */
.label { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--aubergine); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 16px; top: -100px;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  border-radius: 8px; z-index: 100;
}
.skip:focus { top: 16px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------- Atmosphäre: Korn, Fortschritt ---------- */
.grain {
  position: fixed; inset: -100%; width: 300%; height: 300%;
  pointer-events: none; z-index: 70;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 12.5% { transform: translate(-3%, 2%); } 25% { transform: translate(2%, -4%); }
  37.5% { transform: translate(-4%, -1%); } 50% { transform: translate(3%, 3%); } 62.5% { transform: translate(-1%, 4%); }
  75% { transform: translate(4%, -2%); } 87.5% { transform: translate(-2%, -3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Buttons ----------
   Licht folgt dem Zeiger innerhalb der Buttonfläche (--mx/--my aus main.js),
   nur bei feinem Zeiger. */
.btn {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  background: var(--ink); color: var(--surface);
  border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(52, 79, 90, 0.08);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.16), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.btn .btn-arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn-ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(52, 79, 90, 0.45); }
.btn-ghost::before { background: radial-gradient(120px circle at var(--mx) var(--my), rgba(67, 107, 120, 0.16), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-hover); box-shadow: 0 10px 24px -14px rgba(52, 79, 90, 0.6); }
  .btn:hover::before { opacity: 1; }
  .btn:hover .btn-arrow { transform: translateX(3px); }
  .btn-ghost:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--petrol), 0 10px 24px -16px rgba(52, 79, 90, 0.45); }
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 999px; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: -0.01em; padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: color 0.3s;
}
.link span { transition: transform 0.35s var(--ease); }
.link:hover { color: var(--green); }
.link:hover span { transform: translateX(3px); }

/* ---------- Motiv: Maßlinie ---------- */
.dim { display: flex; align-items: center; gap: 0.6em; color: var(--green); }
.dim-line { position: relative; flex: 1 1 0; min-width: 0.6em; height: 1px; background: currentColor; }
.dim-line-l { transform-origin: left center; }
.dim-line-r { transform-origin: right center; }
.dim-line::before { content: ""; position: absolute; top: 50%; width: 1px; height: 0.7em; background: currentColor; transform: translateY(-50%); }
.dim-line-l::before { left: 0; }
.dim-line-r::before { right: 0; }
.dim-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; line-height: 1; color: var(--green-deep); }
/* Gestapelt, wenn die Beschriftung nicht zwischen die Linien passt: Linie über
   die volle Wortbreite, Beschriftung zentriert darunter. */
.dim.is-stack { gap: 0; }
.dim.is-stack .dim-label { position: absolute; left: 50%; top: 0.75em; transform: translateX(-50%); }

/* ---------- Logo (Header und Footer identisch, Größe über font-size) ---------- */
.logo { display: inline-flex; align-items: center; gap: 0.62em; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--petrol); }
.logo-mark { flex: none; width: 1.8em; height: 1.8em; overflow: visible; }
.logo-m { stroke: currentColor; }
.logo-line { stroke: var(--aubergine); }
.logo-text { display: block; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 95;
  padding: 18px 0;
  color: var(--ink);
  transition: padding 0.4s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(237, 230, 216, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; transition: opacity 0.4s;
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled { padding: 10px 0; }
.nav.is-scrolled::before { opacity: 1; }
.nav.is-open::before { opacity: 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Burger: zwei gleich lange Linien, die sich zum X kreuzen */
.burger { position: relative; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border-radius: 10px; }
.burger-icon { position: relative; width: 24px; height: 10px; display: block; }
.burger-icon i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out); }
.burger-icon i:first-child { top: 0; }
.burger-icon i:last-child { top: 8px; }
.nav.is-open .burger-icon i { top: 4px; }
.nav.is-open .burger-icon i:first-child { transform: rotate(45deg); }
.nav.is-open .burger-icon i:last-child { transform: rotate(-45deg); }

/* Menü: deckend, ohne Raster, beginnt direkt unter dem Header */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper); color: var(--ink);
  padding: calc(var(--header-h, 80px) + clamp(16px, 4vh, 40px)) 0 var(--s-4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s 0.35s;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s; }
.menu-links { display: grid; border-top: 1px solid var(--line); }
.menu-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: clamp(12px, 1.9vh, 20px) 0;
  font-family: var(--font-display); font-size: clamp(1.9rem, 5.2vh, 3.4rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; font-variation-settings: "SOFT" 60;
  border-bottom: 1px solid var(--line);
  transform: translateY(8px); opacity: 0;
  transition: color 0.25s, transform 0.5s var(--ease-out), opacity 0.4s;
  transition-delay: 0s, calc(var(--i) * 35ms), calc(var(--i) * 35ms);
}
.menu.is-open .menu-links a { transform: none; opacity: 1; }
.menu-links a::after { content: ""; width: 0.9em; height: 2px; background: var(--aubergine); opacity: 0; transform: scaleX(0.3); transform-origin: right; transition: opacity 0.25s, transform 0.3s var(--ease); }
.menu-links a { color: var(--petrol); }
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--ink); }
.menu-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--aubergine); padding-left: 14px; }
.menu-links a:hover::after { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 320svh; /* wird von kugel.js gesetzt */ }
.hero-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip;
  display: flex; align-items: center;
  background: var(--paper);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(42, 33, 24, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 33, 24, 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
}
/* Mit WebGL zeichnet kugel.js das Karopapier selbst */
.has-gl .hero-lines { display: none; }
.hero-content {
  position: relative; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  padding: calc(var(--header-h, 80px) + 24px) 0 clamp(40px, 8vh, 88px);
}
/* Der Startseiten-Block liegt auf dem Papier, kugel.js legt ihn in die Kamera */
/* Die (unsichtbare) Fläche von .hero-content liegt im 3D-Kontext vor dem Block – Klicks durchlassen */
.has-gl .hero-content { transform-style: preserve-3d; pointer-events: none; }
.has-gl .hero-part { pointer-events: auto; }
.hero-part { --d: 0; --pap: 1; transform-origin: 50% 50%; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.has-gl .hero-part.is-diving .line { clip-path: none; }
.ltr, .wrd { display: inline-block; }
/* Jeder Buchstabenkasten bekommt unsichtbare Luft (Innenabstand, durch negativen Außenabstand
   im Satz ausgeglichen): Kursive Überhänge, Häkchen und Oberlängen liegen so innerhalb des
   Kastens und werden von keiner Ebene beschnitten. */
.ltr { padding: 0.28em 0.3em; margin: -0.28em -0.3em; }
/* Der Lochbuchstabe bekommt nur so viel Luft wie sein Häkchen braucht: Ein größerer Kasten
   würde beim starken Vergrößern gröber gerastert (unscharfe Kante). */
/* Buchstaben weichen der Kugel aus: Versatz und Drehung aus kugel.js */
.ltr.sp { white-space: pre; }
.has-gl .hero-part.is-diving .btn { pointer-events: none; }
.hero-part { --tsz: clamp(2.5rem, 5.3vw, 5.6rem); }
.hero-title {
  font-size: var(--tsz);
  line-height: 1.02;
  max-width: 17ch;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}
.hero-title .line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
/* Während der Einblendung wird nur nach unten beschnitten (Text steigt aus der Zeile auf);
   oben und rechts bleibt Luft, damit Oberlängen, Häkchen und das Fragezeichen ganz bleiben. */
.js .hero-title .line { clip-path: inset(-0.45em -3em 0 -0.5em); }
.js .hero-part.intro-done .hero-title .line { clip-path: none; }
/* „Aber“ als Gelenk zwischen den Sätzen: handschriftlich (Caveat), leicht geneigt, in Petrol */
.hero-title .hero-aber { padding-left: 0.72em; margin-top: 0.02em; margin-bottom: calc(-0.14em - 0.04em); }
.hero-aber .line-in { font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive; font-size: 0.86em; font-style: normal; font-weight: 650; color: var(--petrol); letter-spacing: 0.01em; line-height: 1; font-variation-settings: normal; }
.hero-aber .aber-word { display: inline-block; transform: rotate(-5deg); transform-origin: 8% 100%; padding: 0 0.1em 0.02em 0.06em; }
.hero-title .line-in { display: inline-block; white-space: nowrap; }
/* Feste Zeilen: „Ihr Unternehmen / leistet gute Arbeit.“ und „wird das online / auch sichtbar?“;
   Wörter brechen nie in sich um */
.wd { white-space: nowrap; }

/* Maßlinie unter „Maß“ (ohne Satzpunkt): assets/js/main.js setzt --dim-l/--dim-r
   in px aus den Vor- und Nachbreiten von M und ß, damit die Linie exakt die
   sichtbare Wortbreite hat. */
.measured { position: relative; display: inline-block; font-style: normal; }
.measured .dim {
  position: absolute;
  left: var(--dim-l, 0.043em); right: var(--dim-r, -0.03em);
  top: calc(100% - 0.02em);
  font-size: clamp(0.6875rem, 0.085em, 0.95rem);
}
.hero-copy { max-width: 44rem; margin-left: calc(var(--tsz) * 2.6); }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--body); max-width: 54ch; letter-spacing: -0.005em; }
/* Fließtext im Hero: Papier hinter jedem Wort, die Kästen überlappen die Wortzwischenräume,
   so bleibt das Raster aus den Buchstaben, endet aber zeilenweise mit dem Text (kein Block).
   Beim Zerstreuen verblasst das Papier mit. */
/* Hero: Papier hinter Überschrift und Fließtext verblasst beim Zerstreuen mit. Während der
   Einblendung beim Laden ist es aus (die aufsteigenden Zeilen lägen sonst mit ihrem Papier
   kurz über „Aber“) und wird danach weich eingeblendet (--ink-on). */
@property --ink-on { syntax: '<number>'; inherits: true; initial-value: 1; }
.has-gl .hero-part { --ink-on: 0; transition: --ink-on 0.6s ease; }
.has-gl .hero-part.intro-done { --ink-on: 1; }
.has-gl .hero-part .ink { --cut: calc(var(--ink-on) * var(--pap, 1)); }
.has-gl .hero-title .ltr { position: relative; z-index: 1; }
.has-gl .hero-aber .aber-word { background: rgb(237 230 216 / calc(var(--ink-on) * var(--pap, 1))); box-shadow: 0 0 0 0.12em rgb(237 230 216 / calc(var(--ink-on) * var(--pap, 1))); border-radius: 0.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); }

/* ---------- Zweistufige Überschrift (Referenz) ----------
   Erste Zeile leicht in dunklem Petrol, zweite Zeile fett in Aubergine und
   eingerückt, Beschreibung darunter weiter eingerückt in warmem Dunkelgrau.
   Die Größe kommt aus --tsz des jeweiligen Abschnitts. */
.tt { font-size: var(--tsz, 3rem); line-height: 1.02; text-wrap: balance; }
.tt .t1, .tt .t2 { display: block; }
.tt .t1 { font-weight: 340; color: var(--ink); letter-spacing: -0.02em; font-variation-settings: "SOFT" 60, "WONK" 0; }
.tt .t2 { font-weight: 620; font-style: italic; color: var(--aubergine); letter-spacing: -0.015em; padding-left: 1.3em; margin-top: 0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.tt-body { color: var(--body); margin-left: calc(var(--tsz, 3rem) * 2.6); max-width: 40ch; line-height: 1.6; }
@media (max-width: 860px) {
  .tt .t2 { padding-left: 0.9em; }
  .tt-body { margin-left: calc(var(--tsz, 3rem) * 0.9); }
}

/* ---------- Bühne: Stationen und Projektkarten im 3D-Raum ----------
   Position und Bewegung setzt assets/js/kugel.js. Hier nur die
   innere Gestaltung. Ohne WebGL liegen sie als normale Abschnitte untereinander. */
.hero-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; overflow: clip; perspective-origin: 50% 50%; }
.hero-stage .st, .hero-stage .gal {
  position: absolute; left: 50%; top: 50%; transform-origin: 0 0;
  opacity: 0; visibility: hidden; will-change: transform, opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.hero-stage .is-on { visibility: visible; }
.hero-stage .gal.is-on { pointer-events: auto; }

/* Station: steht flach im Bild neben der ruhenden Kugel (Position aus kugel.js). Die Zeilen
   steigen aus ihrer Maske auf (--r von 0 bis 1) und sinken wieder ab, bevor die Kugel
   weiterrollt; der nächste Text erscheint erst an der nächsten Station. Keine Nummerierung. */
.hero-stage .st { width: max-content; max-width: min(760px, 90vw); padding: 24px 28px; text-align: left; }
.has-gl .hero-stage .st { left: 0; top: 0; padding: 0; isolation: isolate; }
.has-gl .hero-stage .st.is-on { opacity: 1; }
.has-gl .hero-stage .st .rv { display: block; clip-path: inset(-0.6em -3em 0 -0.8em); }
.has-gl .hero-stage .st .rv-in { display: block; transform: translate3d(0, calc((1 - var(--r, 0)) * 118%), 0); }
.has-gl .hero-stage .st .st-text .rv-in { opacity: var(--r, 0); }
/* Weicher Papierhof hinter dem Text, damit das Karo die Schrift nicht stört */
.has-gl .hero-stage .st::before {
  content: ""; position: absolute; z-index: -1; inset: -34% -14%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(237, 230, 216, 0.92), rgba(237, 230, 216, 0.7) 55%, rgba(237, 230, 216, 0));
  opacity: var(--g, 0);
}
.hero-stage .st-wide { width: min(860px, 90vw); }
.st .label { margin-bottom: 14px; font-size: 1rem; color: var(--green-deep); }
.hero-stage .st { --tsz: clamp(2.1rem, 4.4vw, 3.9rem); }
.st-title { font-size: var(--tsz); line-height: 1.02; }
.st-title-sm { font-size: clamp(1.8rem, 3.4vw, 2.9rem); max-width: 18ch; }
.st-text { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(1.125rem, 1.55vw, 1.4rem); line-height: 1.6; max-width: 34ch; }
/* Zusammenarbeit: drei Aspekte */
.st-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.st-cols > div { padding-top: 14px; border-top: 1px solid var(--line-strong); }
.st-cols h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin-bottom: 8px; }
.st-cols p { font-size: var(--t-small); color: var(--fg-2); line-height: 1.5; }
/* Schritte: wer übernimmt was */
.st-roles { margin-top: 24px; display: grid; }
.st-roles > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-strong); }
.st-roles dt { font-size: var(--t-small); font-weight: 600; color: var(--green-deep); line-height: 1.5; padding-top: 0.05em; }
.st-roles dd { font-size: var(--t-body); color: var(--fg-2); line-height: 1.5; max-width: 42ch; }

/* Galerie
   Aussparungen im Raster: Textblöcke tragen die Flächenfarbe mit etwas Luft, die
   Linien enden davor und laufen dahinter weiter. --cut blendet sie ein, sobald
   die Ebene flach vor der Kamera liegt (dann ist sie exakt --paper). */
.gal-head, .gal-project { text-align: left; }
/* Aussparung nur am Text: .ink trägt das Papier zeilenweise (box-decoration-break), jede Zeile
   so breit wie ihr Text. Die Streifen sind so hoch wie der Zeilenabstand, schließen also
   lückenlos aneinander: Keine Linie läuft zwischen den Zeilen durch den Text, rechts neben
   kürzeren Zeilen und um den Text herum läuft das Raster weiter (unregelmäßiger Umriss).
   Vertikaler Innenabstand von Inline-Elementen verändert den Satz nicht, der waagerechte
   wird durch negativen Außenabstand ausgeglichen. Der Text liegt immer über allen Streifen
   (.ink-t positioniert, im Hero sind die Buchstaben ohnehin eigene Ebenen). */
.ink {
  --ink-v: 0.34em;
  background: rgb(237 230 216 / var(--cut, 1));
  padding: var(--ink-v) 0.34em; margin: 0 -0.34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ink-t { position: relative; }
html:not(.has-gl) .ink { background: none; }
/* Überschriften mit engem Zeilenabstand: kleiner Überstand genügt */
.sec-title .ink, .project-title .ink, .hero-title .ink { --ink-v: 0.14em; }
.project-cat .ink { --ink-v: 0.3em; }
/* Galerie: Überschrift und Einleitung schließen aneinander an */
.gal-head .t2 .ink { padding-bottom: 0.5em; }
.gal-meta { width: fit-content; max-width: 100%; }
.gal-head .sec-title { max-width: 14ch; }
.gal-head .sec-intro { margin-top: 16px; }
.gal-media { position: relative; display: block; padding: 0 9% 10% 0; }
.gal-media .phone { width: 26%; }
.gal-project { --lift: 0; }
.gal-project .browser { box-shadow: 0 calc(40px + 28px * var(--lift)) calc(80px + 40px * var(--lift)) -40px rgba(52, 79, 90, calc(0.45 + 0.3 * var(--lift))); }
/* Projektangaben: keine rechteckige Fläche, sondern Papier nur eng um jede Zeile, jeweils
   unterschiedlich weit. Das Raster läuft dazwischen und daneben durch, aber nicht durch den Text. */
.gal-meta { padding: 0; margin: 18px 0 0; }
.gal-meta > * { position: relative; }
.gal-meta .project-cat { margin: 0 0 6px; font-size: var(--t-label); font-weight: 600; color: var(--aubergine); }
.project-title { font-size: clamp(1.75rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; }
.project-facts { margin-top: 16px; display: grid; gap: 10px; max-width: 46ch; }
.project-facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; }
.project-facts dt { font-size: var(--t-label); font-weight: 600; color: var(--aubergine); line-height: 1.55; padding-top: 0.12em; }
.project-facts dd { color: var(--fg-2); font-size: var(--t-small); line-height: 1.55; }
.gal-meta .btn { margin-top: 20px; }

/* „Platz für dein Projekt“: dauerhaft deckend, kein Hover auf der Fläche */
.gal-cta { display: block; }
.project-cta-frame {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.project-cta-title { font-size: clamp(1.9rem, 3.8vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.project-cta-text { color: var(--fg-2); max-width: 36ch; }
.project-cta-frame .btn { margin-top: 6px; }

@media (max-width: 860px) {
  .hero-stage .st { padding: 18px 18px; }
  .st-cols { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .st-cols > div { padding-top: 10px; }
  .st-cols h3 { margin-bottom: 4px; }
  .st-roles > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .st-roles dd { font-size: var(--t-small); }
  .st-text { font-size: 1.0625rem; }
}

/* Ohne WebGL: normale Seite */
html:not(.has-gl) .hero-sticky { position: relative; height: auto; min-height: 100svh; display: block; }
html:not(.has-gl) .hero-content { padding-top: 140px; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
html:not(.has-gl) .hero-stage { position: static; overflow: visible; pointer-events: auto; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: var(--section) 0 0; }
html:not(.has-gl) .hero-stage .st, html:not(.has-gl) .hero-stage .gal {
  position: static; transform: none !important; opacity: 1; visibility: visible; width: auto !important; margin: 0 0 clamp(56px, 8vw, 112px); padding-left: 0; padding-right: 0;
}
html:not(.has-gl) .hero-stage .st { max-width: 760px; }
html:not(.has-gl) .hero-stage .st-wide { max-width: 980px; }
html:not(.has-gl) .gal-head { max-width: 820px; }
html:not(.has-gl) .gal-project { max-width: 640px; }
html:not(.has-gl) .gal-cta { max-width: 640px; }


/* Hero-Choreografie beim Laden */
.js .hero-title .line-in, .js .hero-copy { opacity: 0; animation: rise 1.2s var(--ease-out) forwards; }
.js .hero-title .line-in { transform: translateY(140%); opacity: 1; animation-name: riseMask; }
.js .measured .dim-line { transform: scaleX(0); animation: draw 1s var(--ease) forwards; }
.js .measured .dim-label { opacity: 0; animation: fade 0.6s ease forwards; }
.hero-title .line:nth-child(1) .line-in { animation-delay: 0.15s; }
.hero-title .line:nth-child(2) .line-in { animation-delay: 0.27s; }
.hero-title .line:nth-child(3) .line-in { animation-delay: 0.39s; }
.hero-copy { animation-delay: 0.55s; }
.measured .dim-line { animation-delay: 1.05s; }
.measured .dim-label { animation-delay: 1.6s; }
.dim.is-stack .dim-label { animation-name: fadeCentered; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes riseMask { from { transform: translateY(140%); } to { transform: none; } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes fade { to { opacity: 1; } }
@keyframes fadeCentered { from { opacity: 0; transform: translateX(-50%); } to { opacity: 1; transform: translateX(-50%); } }
/* Nach der Einblendung: Endzustand fest (schlägt die Choreografie), damit Messungen und Streuung exakt sind */
.js .hero-part.intro-done .hero-title .line-in, .js .hero-part.intro-done .hero-copy { animation: none !important; transform: none !important; opacity: 1 !important; }

/* ---------- Laufband ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; background: var(--paper); position: relative; z-index: 2; }
.section, .footer { z-index: 1; }
.marquee-track { display: flex; width: max-content; color: var(--fg-2); font-size: var(--t-small); font-weight: 500; }
.marquee-group { display: flex; flex: none; animation: marquee 40s linear infinite; }
.marquee-group span { padding: 0 30px; white-space: nowrap; position: relative; }
.marquee-group span::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--green); transform: translateY(-50%); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Abschnitte ---------- */
.section { position: relative; padding: var(--section) 0; background: var(--bg); color: var(--fg); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head .label { margin-bottom: 14px; }
.sec-title { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.04em; line-height: 1; max-width: 16ch; }
.sec-intro { margin-top: 20px; max-width: var(--measure); font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); }

/* Maskierte Wort-Enthüllung */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split .wi { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms); }
.split.is-in .wi { transform: none; }
.split.reveal { opacity: 1; transform: none; }

/* ---------- Unterseiten-Kopf ---------- */
.page-head { padding: clamp(140px, 18vh, 200px) 0 clamp(32px, 5vw, 64px); }
.page-head .sec-head { margin-bottom: 0; }
.page-head + .section { padding-top: clamp(32px, 5vw, 64px); }

/* ---------- Browser- und Telefonrahmen ---------- */
[data-parallax] { --plx: 0px; will-change: transform; }
.browser {
  position: relative;
  transform: translate3d(0, var(--plx), 0);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(34, 37, 42, 0.45);
}
.browser-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #D6CFC1; }
.url { justify-self: center; padding: 4px 12px; border-radius: 999px; background: var(--paper); color: var(--fg-3); }
.browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.phone {
  position: absolute; right: 0; bottom: 0; width: 24%; max-width: 200px; min-width: 96px;
  transform: translate3d(0, var(--plx), 0);
  border-radius: 12% / 6.5%; padding: 3.5%;
  background: #0E0F11;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.phone img { border-radius: 9% / 5%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }

/* ---------- Nach dem Start: zwei Optionen ---------- */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.option { padding: clamp(28px, 3.5vw, 44px) 0; }
.option + .option { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
.option:first-child { padding-right: clamp(24px, 4vw, 56px); }
.option .label { margin-bottom: 12px; }
.option h3 { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.15; }
.option p { margin-top: 12px; color: var(--fg-2); max-width: 44ch; }
.options-note { margin-top: var(--s-3); color: var(--fg-2); font-size: var(--t-small); max-width: var(--measure); }

/* ---------- Hosting und Betreuung ---------- */
.section-compact { padding: clamp(72px, 8vw, 120px) 0; }
.section-compact .sec-head { margin-bottom: clamp(28px, 3vw, 40px); }
.sec-title-md { font-size: clamp(2rem, 3.8vw, 3.25rem); max-width: 20ch; }
.infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); align-items: start; }
.info { padding: clamp(20px, 2.2vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.info h3 { font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.25; }
.info p { margin-top: 10px; color: var(--ink); font-size: var(--t-small); line-height: 1.55; }
.price { margin-top: clamp(20px, 2.4vw, 32px); padding: 18px 0 0 18px; border-left: 3px solid var(--aubergine); max-width: 72ch; }
.price-main { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--petrol); }
.price-terms { margin-top: 8px; color: var(--ink); font-size: var(--t-small); line-height: 1.6; }
.price-source { margin-top: 10px; color: var(--fg-3); font-size: var(--t-label); }
.price-source a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
.price-source a:hover { color: var(--ink); }

/* ---------- Vergleich ---------- */
.cmp { border-top: 1px solid var(--line-strong); }
.cmp-row { display: grid; grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.cmp-row > * { padding: 16px 18px; }
.cmp-head > * { font-size: var(--t-small); font-weight: 600; color: var(--ink); padding-top: 14px; padding-bottom: 14px; }
.cmp-topic { font-weight: 600; color: var(--petrol); padding-left: 0; }
.cmp-head .cmp-topic { color: var(--fg-3); font-weight: 500; }
.cmp-cell { color: var(--ink); line-height: 1.5; }
.cmp-m { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--petrol); }
.cmp-head .cmp-m { color: var(--petrol); }
.cmp-tag { display: none; font-size: var(--t-label); font-weight: 600; margin-bottom: 2px; }
.cmp-m .cmp-tag { color: var(--petrol); }
.cmp-o .cmp-tag { color: var(--fg-3); }
.cmp-note { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--aubergine); color: var(--ink); font-size: var(--t-small); max-width: 72ch; }
.cmp-note strong { color: var(--aubergine); font-weight: 600; }

/* ---------- Einführungskonditionen ---------- */
.intro-offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px;
  padding: clamp(24px, 3.2vw, 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--aubergine);
}
.intro-offer .label { margin-bottom: 10px; }
.intro-offer > .sec-title-md, .intro-offer .sec-title { max-width: none; }
.intro-offer h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: -0.035em; }
.intro-offer p:not(.label) { margin-top: 12px; color: var(--ink); max-width: 60ch; }

/* ---------- Leistungen (Unterseite) ---------- */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.service { padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--line); }
.service:nth-child(odd) { padding-right: clamp(24px, 4vw, 56px); border-right: 1px solid var(--line); }
.service:nth-child(even) { padding-left: clamp(24px, 4vw, 56px); }
.service h2, .service h3 { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.15; }
.service p { margin-top: 12px; color: var(--fg-2); max-width: 44ch; }

/* ---------- Fragen ---------- */
.faq-list { border-top: 1px solid var(--line-strong); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25;
  transition: color 0.25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { color: var(--petrol); }
.faq-item summary:hover { color: var(--ink); }
.faq-icon { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform 0.4s var(--ease), background 0.25s, border-color 0.25s, color 0.25s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.faq-icon::before { width: 13px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 13px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--green); border-color: var(--green); color: var(--surface); }
.faq-body { padding: 0 0 clamp(20px, 2.4vw, 28px); color: var(--fg-2); max-width: var(--measure); }
.faq-item[open] .faq-body { animation: rise 0.5s var(--ease-out); }

/* ---------- Über mich ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--line-strong); color: var(--fg-3);
  max-width: 460px;
  transform: translate3d(0, var(--plx), 0);
}
.about-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
/* Über uns: Text und Abschlussbox rücken näher zusammen */
.about-section { padding-bottom: clamp(40px, 5vw, 72px); }
.about-cta { padding-top: 0; }
/* Gleichmäßiger Rhythmus: Seitentitel, Foto und Text rücken zusammen */
.page-head-tight { padding-bottom: clamp(12px, 1.6vw, 20px); }
.page-head-tight + .about-section { padding-top: clamp(20px, 2.4vw, 36px); }
/* Desktop: Das Foto begleitet den längeren Text, statt darunter eine Lücke zu lassen */
@media (min-width: 861px) {
  .about-media { position: sticky; top: calc(var(--header-h, 80px) + 32px); }
}
@media (max-width: 860px) {
  .wrap.about { row-gap: 56px; }
}
.about-text { display: grid; gap: 18px; font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); max-width: var(--measure); }
.facts { margin-top: var(--s-4); border-top: 1px solid var(--line-strong); max-width: 480px; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--t-label); font-weight: 600; color: var(--green); padding-top: 0.2em; }
.facts dd { color: var(--fg-2); }

/* ---------- CTA-Band (Unterseiten) ---------- */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 64px; }
.cta-band .sec-title { max-width: 14ch; }
.cta-band .sec-intro { margin-top: 16px; }
.cta-band .label { margin-bottom: 14px; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact-copy .sec-head { margin-bottom: 0; }
/* Kontakt: zwei große Karten. Die Mailkarte ist ganz anklickbar, die Nummernkarte (.contact-duo) hat zwei Wege. */
.contact { align-items: center; }
.contact-ways { display: grid; gap: 16px; }
.contact-way {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.cw-icon {
  display: grid; place-items: center; width: clamp(48px, 5vw, 60px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--surface);
}
.cw-icon svg { width: 46%; height: 46%; }
.cw-body { display: grid; gap: 4px; min-width: 0; }
.cw-label { font-size: var(--t-label); font-weight: 600; color: var(--aubergine); letter-spacing: 0.01em; }
.cw-value { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 420; letter-spacing: -0.02em; line-height: 1.15; color: var(--petrol); overflow-wrap: anywhere; }
.cw-arrow { font-size: 1.4rem; color: var(--petrol); transition: transform 0.35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .contact-way:hover { border-color: var(--petrol); box-shadow: 0 18px 40px -26px rgba(52, 79, 90, 0.55); transform: translateY(-2px); }
  .contact-way:hover .cw-arrow { transform: translateX(4px); }
}
.contact-way:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Eine Nummer, zwei Wege: oben die Nummer, darunter gleichwertig Anrufen (tel:) und WhatsApp (wa.me mit vorbereiteter Nachricht) */
.contact-duo { display: block; padding: 0; overflow: hidden; }
.cd-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 24px); padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px); }
.cd-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cd-act {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 17px clamp(16px, 2.6vw, 32px); font-weight: 600; color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cd-act + .cd-act { border-left: 1px solid var(--line); }
.cd-act svg { width: 20px; height: 20px; color: var(--aubergine); transition: color 0.3s var(--ease); }
.cd-act .cw-arrow { font-size: 1.15rem; transition: transform 0.35s var(--ease), color 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  /* Der Pfeil bewegt sich nur in der Hälfte, auf der der Zeiger steht */
  .contact-duo:hover .cw-arrow { transform: none; }
  .cd-act:hover { background: var(--ink); color: var(--surface); }
  .cd-act:hover svg, .cd-act:hover .cw-arrow { color: var(--surface); }
  .contact-duo .cd-act:hover .cw-arrow { transform: translateX(4px); }
}
.cd-act:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
@media (max-width: 480px) {
  .contact-way { grid-template-columns: auto minmax(0, 1fr); }
  .cd-act { grid-template-columns: auto minmax(0, 1fr); }
  .cw-arrow { display: none; }
  .cw-value { font-size: 1.2rem; }
}

/* ---------- Footer ---------- */
.footer { position: relative; padding: clamp(56px, 7vw, 96px) 0 36px; background: var(--bg); color: var(--fg); }
.footer-brand { margin-bottom: clamp(32px, 4vw, 56px); }
.footer-brand .logo { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.footer-rule { height: 1px; background: var(--line-strong); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 40px; padding-top: 22px; color: var(--fg-2); font-size: var(--t-small); }
.footer-grid nav { display: flex; gap: 24px; }
.footer-grid a { color: var(--ink); transition: color 0.2s; }
.footer-grid a:hover { color: var(--green); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 860px) {
  /* Projekt anfragen bleibt im Header sichtbar, kompakt neben dem Burger */
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { min-height: 38px; padding: 0 15px; font-size: 0.875rem; }
  .options, .services, .infos { grid-template-columns: 1fr; }
  .intro-offer { grid-template-columns: 1fr; align-items: start; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; padding: 14px 0; gap: 8px; }
  .cmp-row > * { padding: 10px 14px; }
  .cmp-topic { padding: 0 0 2px; }
  .cmp-o { box-shadow: inset 3px 0 0 var(--line-strong); }
  .cmp-tag { display: block; }
  .option + .option { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .option:first-child { padding-right: 0; }
  .service:nth-child(odd) { padding-right: 0; border-right: 0; }
  .service:nth-child(even) { padding-left: 0; }
  .about { grid-template-columns: 1fr; }
  .about-media { max-width: 340px; }
  .cta-band { grid-template-columns: 1fr; align-items: start; }
  .contact { grid-template-columns: 1fr; }

  /* Startbereich: kompakt unter dem Header, Block mittig im freien Raum */
  .hero-sticky { align-items: stretch; }
  .hero-content { display: flex; padding: calc(var(--header-h, 76px) + 8px) 0 24px; }
  .hero-part { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; }
  .hero-part { --tsz: min(9.8vw, 3.2rem); }
  .hero-title { margin-bottom: clamp(18px, 3vh, 28px); max-width: none; }
  .hero-copy { margin-left: 0; }
  .hero-title .t2, .hero-title .hero-aber { padding-left: 0; }
  .lead { font-size: 1.0625rem; line-height: 1.6; }
  .btn-row { margin-top: clamp(20px, 3vh, 28px); }
  html:not(.has-gl) .hero-content { padding-top: 96px; min-height: 0; }
}

/* Kleine, niedrige Handys: Startblock etwas kompakter, damit er unter die Kopfzeile passt */
@media (max-width: 700px) and (max-height: 700px) {
  .lead { font-size: 0.97rem; line-height: 1.5; }
  .hero-title { margin-bottom: 14px; }
  .btn-row { margin-top: 16px; gap: 10px; }
  .btn-row .btn { min-height: 46px; }
}

@media (max-width: 380px) {
  .nav .logo { font-size: 1.0625rem; }
  .nav-actions .btn { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; letter-spacing: -0.015em; }
}

@media (max-width: 480px) {
  .hero-title { letter-spacing: -0.045em; }
  .btn-row { display: grid; }
  .btn-row .btn { width: 100%; }
  .facts div, .project-facts div { grid-template-columns: 1fr; gap: 2px; }
  .phone { min-width: 88px; }
  .footer-grid { flex-direction: column; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .marquee-group { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .split .wi { transform: none; transition: none; }
  .js .hero-title .line-in, .js .hero-copy, .js .measured .dim-line, .js .measured .dim-label { opacity: 1; animation: none; }
  .js .hero-title .line-in, .js .hero-copy, .js .measured .dim-line { transform: none; }
  [data-parallax] { --plx: 0px; }
  .menu, .menu.is-open, .menu-links a { transition: none; }
}

/* ==========================================================================
   Zweistufige Überschriften in Abschnitten, Vorteile und Grenzen, Einführung
   ========================================================================== */
.sec-title.tt, .project-cta-title.tt, .offer-title.tt { font-size: var(--tsz); max-width: none; font-weight: 400; }
.sec-title-md { --tsz: clamp(2.2rem, 4.4vw, 3.9rem); }
.gal-head { --tsz: clamp(2.4rem, 5vw, 4.25rem); }
.page-head .sec-title.tt { --tsz: clamp(2.4rem, 5.4vw, 4.8rem); }
.project-cta-frame { --tsz: clamp(2rem, 3.4vw, 3rem); }
.sec-intro.tt-body { max-width: 44ch; }
.gal-head > .tt-body { margin-left: calc(var(--tsz) * 2.6); max-width: 66ch; }
@media (max-width: 860px) { .gal-head > .tt-body { margin-left: calc(var(--tsz) * 0.9); } }

/* Vorteile und Grenzen */
.pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.pc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 2.8vw, 40px); }
.pc-m { box-shadow: inset 0 4px 0 var(--petrol); }
.pc-o { box-shadow: inset 0 4px 0 rgba(52, 79, 90, 0.28); }
.pc-kicker { font-size: var(--t-label); font-weight: 600; color: var(--fg-3); }
.pc-head h3 { margin-top: 6px; font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: -0.03em; }
.pc-m .pc-head h3 { color: var(--petrol); }
.pc-o .pc-head h3 { color: var(--ink); font-weight: 500; }
.pc-group { margin-top: clamp(20px, 2.2vw, 28px); padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--line); }
.pc-label { font-size: var(--t-small); font-weight: 700; letter-spacing: 0.01em; }
.pc-label-plus { color: var(--petrol); }
.pc-label-minus { color: var(--aubergine); }
.pc-list li { position: relative; padding-left: 32px; margin-top: 12px; color: var(--body); line-height: 1.5; }
.pc-list li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px; border-radius: 50%; }
.pc-list li::after { content: ""; position: absolute; left: 5px; top: calc(0.12em + 9px); width: 10px; height: 2px; border-radius: 1px; }
.pc-plus li::after { background: var(--petrol); }
.pc-plus li::before { background:
  linear-gradient(var(--petrol), var(--petrol)) center / 2px 10px no-repeat,
  var(--green-soft); }
.pc-minus li::before { background: var(--aubergine-soft); }
.pc-minus li::after { background: var(--aubergine); }

/* Einführungskonditionen */
.offer {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 60px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.offer::after {
  content: ""; position: absolute; right: clamp(-40px, -2vw, -12px); bottom: clamp(-60px, -3vw, -24px);
  width: clamp(180px, 22vw, 320px); aspect-ratio: 1; opacity: 0.07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 45V16L32 38L54 16V45' fill='none' stroke='%23436B78' stroke-width='6'/%3E%3Cpath d='M10 54H54M10 50V58M54 50V58' fill='none' stroke='%23795566' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offer-rule { position: relative; display: flex; align-items: center; gap: 16px; color: var(--aubergine); }
.offer-rule i { position: relative; flex: 1 1 0; height: 1px; background: currentColor; }
.offer-rule i::before { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor; }
.offer-rule i:first-child::before { left: 0; }
.offer-rule i:last-child::before { right: 0; }
.offer-rule span { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.offer-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(28px, 3.4vw, 48px); }
.offer-title { --tsz: clamp(2.4rem, 4.8vw, 4.4rem); }
.offer-copy p { color: var(--body); line-height: 1.6; max-width: 46ch; }
.offer-copy .btn { margin-top: 24px; }

@media (max-width: 860px) {
  .pc { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; align-items: start; }
  .offer-rule span { letter-spacing: 0.08em; }
}

/* Vergleich: Maßwerk als klare Empfehlung (nur Pluspunkte), Baukasten zum Vergleich */
.pc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pc-m { background: #F4F2EC; border: 1px solid rgba(67, 107, 120, 0.35); box-shadow: inset 0 4px 0 var(--petrol), 0 24px 48px -32px rgba(52, 79, 90, 0.45); }
.pc-o { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.pc-m .pc-kicker { color: var(--aubergine); }
.pc-m .pc-head h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; }
.pc-o .pc-head h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 400; color: var(--fg-3); }
.pc-card > .pc-list { margin-top: clamp(16px, 1.8vw, 22px); padding-top: clamp(6px, 0.8vw, 10px); border-top: 1px solid var(--line); }
.pc-m .pc-list li { color: var(--ink); }
.pc-m .btn { margin-top: clamp(22px, 2.4vw, 30px); }
/* Symbole: Plus in Petrol, Minus in Aubergine; zusätzlich per Screenreader-Text benannt */
.pc-plus-item::before { background: linear-gradient(var(--petrol), var(--petrol)) center / 2px 10px no-repeat, var(--green-soft); }
.pc-plus-item::after { background: var(--petrol); }
.pc-minus-item::before { background: var(--aubergine-soft); }
.pc-minus-item::after { background: var(--aubergine); }
@media (max-width: 860px) { .pc { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal { padding: clamp(128px, 16vw, 184px) 0 var(--section); }
.legal .sec-head { margin-bottom: 0; }
.legal .sec-title.tt { --tsz: clamp(2.3rem, 5vw, 4.2rem); }
.legal-lead { margin-top: clamp(18px, 2vw, 26px); max-width: 60ch; font-size: var(--t-lead); line-height: 1.55; color: var(--body); }
.legal-stand { margin-top: 12px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.02em; color: var(--aubergine); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: clamp(36px, 4vw, 56px); }
.legal-body { max-width: 68ch; margin-top: 40px; display: grid; gap: 16px; color: var(--body); line-height: 1.65; }
.legal-layout .legal-body { margin-top: 0; gap: 0; }
.legal-body section { padding: clamp(26px, 3vw, 36px) 0; border-top: 1px solid var(--line); display: grid; gap: 14px; scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.legal-body section:first-child { border-top: 0; padding-top: 0; }
.legal-body h2 { display: flex; align-items: baseline; gap: 12px; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 450; line-height: 1.2; letter-spacing: -0.015em; color: var(--petrol); margin-top: 18px; }
.legal-layout .legal-body h2 { margin-top: 0; }
.legal-no { flex: none; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; color: var(--aubergine); min-width: 1.6em; }
.legal-body p, .legal-body li { overflow-wrap: anywhere; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul { display: grid; gap: 8px; padding-left: 0; list-style: none; }
.legal-body ul li { position: relative; padding-left: 20px; }
.legal-body ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 1px; background: var(--aubergine); }
.legal-body a { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--ink); }
.legal-card { padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); line-height: 1.7; }
.legal-note { margin: 8px 0; padding: clamp(22px, 3vw, 30px) !important; background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--aubergine); }
.legal-note + section { border-top: 0; }
/* Deutlich erkennbare Platzhalter, bis die Angaben ergänzt sind */
.ph { display: inline; padding: 0.05em 0.35em; border-radius: 3px; background: rgba(121, 85, 102, 0.12); color: var(--aubergine); font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.82em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Inhaltsverzeichnis */
.legal-toc { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.legal-toc-title { font-size: var(--t-label); font-weight: 600; color: var(--aubergine); margin-bottom: 10px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 5px 0; font-size: var(--t-small); color: var(--ink); line-height: 1.35; text-decoration: none; }
.legal-toc a::before { content: counter(toc); flex: none; min-width: 1.6em; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.78em; color: var(--aubergine); padding-top: 0.18em; }
.legal-toc a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .legal-toc ol { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 20px; }
}
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h, 80px) + 24px); max-height: calc(100vh - var(--header-h, 80px) - 48px); overflow: auto; }
}
/* Nummerierte Klauseln (AGB) */
.legal-ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: cl; }
.legal-ol > li { counter-increment: cl; position: relative; padding-left: 2.2em; overflow-wrap: anywhere; }
.legal-ol > li::before { content: counter(cl) "."; position: absolute; left: 0; top: 0.2em; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8em; color: var(--aubergine); }
.footer-grid nav { flex-wrap: wrap; }
/* Kontakt: Hinweis auf gewerbliche Kunden und AGB */
.contact-b2b {
  margin-top: 22px; padding: 2px 0 2px 16px; max-width: 42ch;
  border-left: 2px solid rgba(121, 85, 102, 0.55);
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 1rem; line-height: 1.5; color: var(--fg-2);
}
.contact-b2b a { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-b2b a:hover { color: var(--ink); }
/* Porträt auf „Über uns“: füllt den 4:5-Rahmen, Gesicht im oberen Drittel */
.portrait:has(img) { border: 0; background: var(--paper-2); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }