/* ==========================================================================
   BROTSMANN STUDIO — Design-System „Glut"
   Nachgebaut nach der Anmutung von midu.design: tiefes Schwarz, eine
   Grotesk in einem Schnitt, riesige leuchtende Wortmarke, große runde
   Karten, ein helles Panel als Kapitel, Wort-für-Wort-Aufhellen beim
   Scrollen. Eigene Inhalte, eigener Code, Markenfarbe Blau.

   Aufbau
   01 Tokens       Farben, Schrift, Raum, Radien, Bewegung
   02 Schrift      Inter Tight (variabel), selbst gehostet
   03 Grundlagen   Reset, Rollen, Container, Abschnitte
   04 Bausteine    Pill-Knöpfe, Chips, Karten, Häkchen, Akkordeon, Formular
   05 Kopf + Menü  fixer Kopf, Dropdown-Menü
   06 Startseite   Hero (Glut), Statement, Bühne, Beispiele, Beweis,
                   helles Panel (Branchen), Pakete, Fragen, Schluss
   07 Unterseiten  Seitenkopf, Vergleich, Pläne, Kontakt, Recht
   08 Bewegung     Ruhezustände, reduzierte Bewegung
   09 Breakpoints  640 / 900 / 1200
   ========================================================================== */

/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root {
  /* Grund und Flächen */
  --bg:          #050505;
  --card:        rgba(21, 21, 21, .8);   /* dunkle Karte auf Schwarz */
  --card-solid:  #121212;
  --panel:       #E6E6E6;                /* helles Kapitel-Panel */
  --white-card:  #FFFFFF;

  /* Schrift auf dunklem Grund */
  --ink:         #FFFFFF;
  --grey:        #8E8E93;                /* Sekundärtext */
  --dim:         #6E6E73;                /* Nebentext, Meta */
  --line:        rgba(255, 255, 255, .1);

  /* Schrift auf hellem Panel */
  --p-ink:       #0A0A0A;
  --p-grey:      #6E6E73;
  --p-line:      rgba(10, 10, 10, .12);

  /* Die Glut: Markenblau statt midu-Rot. Ein Token, ein Rebrand.
     --glow-rgb ist dieselbe Farbe als Zahlen. Ältere Browser (vor 2023)
     kennen color-mix() noch nicht und nehmen die rgba-Fassung; wer --glow
     ändert, ändert diese Zeile gleich mit. */
  --glow:        #3E7BFF;
  --glow-rgb:    62, 123, 255;
  --glow-soft:   #7FB0FF;
  --glow-warm:   #CFE0FF;                /* helle Mitte der Wortmarke */

  --focus:       #7FB0FF;

  /* Schrift */
  --font: "Inter Tight", "Inter Tight Ersatz", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Größenrollen (midu: 82px Display, 40px Hero-Zeile, 28px Titel, 18px Lauftext) */
  --t-display: clamp(2.6rem, 6vw, 5.125rem);      /* 82px */
  --t-hero:    clamp(1.75rem, 2.9vw, 2.5rem);     /* 40px */
  --t-title:   clamp(1.375rem, 2vw, 1.75rem);     /* 28px */
  --t-project: clamp(1.5rem, 2.3vw, 2rem);        /* 32px */
  --t-price:   clamp(3rem, 5.8vw, 5rem);          /* 80px */
  --t-body:    1.125rem;                          /* 18px */
  --t-small:   .9375rem;                          /* 15px */
  --t-caption: .8125rem;                          /* 13px */

  /* Raum */
  --gutter: clamp(20px, 3.3vw, 46px);
  --container: 1280px;
  --gap: 24px;
  --section: clamp(96px, 15vh, 200px);

  /* Form */
  --r-btn: 14px;
  --r-chip: 12px;
  --r-panel: 24px;
  --r-card: 32px;
  --r-white: 36px;

  /* Bewegung, gespiegelt in js/motion.js */
  --d-xs: .15s; --d-s: .3s; --d-m: .6s; --d-l: .9s; --d-xl: 1.4s;
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-in:    cubic-bezier(.7, 0, .84, 0);

  color-scheme: dark;
}

/* ==========================================================================
   02 SCHRIFT — ein variabler Schnitt, selbst gehostet
   ========================================================================== */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Zweimal dieselbe Datei: Browser, die "woff2-variations" nicht kennen,
     nehmen die zweite Zeile — sonst fiele die Schrift ganz aus. */
  src: url("../fonts/inter-tight-wght.woff2") format("woff2-variations"),
       url("../fonts/inter-tight-wght.woff2") format("woff2");
}
/* Die Wortmarke. Nur die Buchstaben von „BrotsmannStudio", 2 KB.
   Fredoka, SIL Open Font License — auch gewerblich frei verwendbar. */
@font-face {
  font-family: "Fredoka Marke";
  src: url("../fonts/fredoka-marke.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight Ersatz";
  src: local("Arial Narrow"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ==========================================================================
   03 GRUNDLAGEN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.03em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
strong, b { font-weight: 500; color: var(--ink); }
::selection { background: var(--glow); color: #04101F; }

a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Typo-Rollen */
.display {
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -.04em;
}
.t-hero { font-size: var(--t-hero); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.t-title { font-size: var(--t-title); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.t-body { font-size: var(--t-body); }
.t-small { font-size: var(--t-small); letter-spacing: -.02em; }
.t-caption { font-size: var(--t-caption); letter-spacing: -.01em; }
.grey { color: var(--grey); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 58ch; }

/* Wort-Aufhellen (midu-typisch): Wörter starten grau, werden beim Scrollen weiß.
   Weiße Betonungen im Markup bleiben weiß. */
.scrub-w { color: var(--grey); }
.scrub-w b, .scrub-w strong { color: var(--ink); font-weight: inherit; }
.on-panel .scrub-w { color: #9A9A9E; }
.on-panel .scrub-w b { color: var(--p-ink); }

/* Container */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .55); }

/* Abschnittskopf: kleine weiße Zeile + graue Unterzeile (midu: "Retainer model") */
.kicker { font-size: var(--t-title); font-weight: 500; letter-spacing: -.02em; margin-bottom: 28px; }
.kicker small { display: block; margin-top: 4px; font-size: var(--t-small); font-weight: 400; color: var(--grey); }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r-btn);
  background: #fff; color: #000; font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--d-s) var(--ease-out);
}
.skip:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   04 BAUSTEINE
   ========================================================================== */

/* Pill-Knöpfe: dunkel (Menü), hell (Haupt), grau (auf Panel) */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--r-btn);
  background: #1D1D1F; color: #F5F5F7;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em;
  line-height: 1.2;
  transition: background-color var(--d-s) var(--ease-out), color var(--d-s) var(--ease-out), transform var(--d-s) var(--ease-out);
}
.btn:hover { background: #2A2A2D; }
.btn:active { transform: scale(.98); }
.btn--light { background: #FFFFFF; color: #050505; }
.btn--light:hover { background: #E2E2E4; }
.btn--panel { background: rgba(10, 10, 10, .08); color: var(--p-ink); }
.btn--panel:hover { background: rgba(10, 10, 10, .14); }
.btn .spark { font-size: .9em; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kleine Icon-Kachel (↗) unten rechts in weißen Karten */
.jump {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(10, 10, 10, .07); color: var(--p-ink);
  transition: background-color var(--d-s) var(--ease-out), transform var(--d-s) var(--ease-out);
}
.jump svg { width: 16px; height: 16px; }
a:hover .jump, .jump:hover { background: rgba(10, 10, 10, .13); transform: translate(2px, -2px); }

/* Tag-Chips auf Projektkarten */
.tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tag {
  display: inline-flex; align-items: center;
  padding: 9px 14px; border-radius: var(--r-chip);
  font-size: var(--t-small); font-weight: 500; letter-spacing: -.02em;
  background: rgba(28, 28, 30, .78); color: #F5F5F7;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tag--light { background: rgba(160, 160, 160, .45); color: #fff; }
.chip {
  display: inline-flex; align-items: center;
  padding: 10px 16px; border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .08); color: #F5F5F7;
  font-size: var(--t-small); font-weight: 500; letter-spacing: -.02em;
}

/* Dunkle Karte */
.dcard {
  position: relative;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 40px;
}

/* Häkchenliste (midu-Preise) */
.checks { display: grid; gap: 14px; color: var(--grey); font-size: var(--t-body); }
.checks li { display: flex; gap: 14px; align-items: baseline; }
.checks svg { flex: none; width: 15px; height: 15px; transform: translateY(2px); color: #D5D5D7; }
.on-panel .checks { color: var(--p-grey); }
.on-panel .checks svg { color: var(--p-ink); }

/* Akkordeon */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq__item { background: var(--card); border-radius: 20px; overflow: hidden; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 28px; text-align: left;
  font-size: var(--t-body); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
.faq__q span:first-child { flex: 1; }
.faq__plus { position: relative; flex: none; width: 14px; height: 14px; transition: transform var(--d-s) var(--ease-inout); color: var(--grey); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
.faq__plus::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }
.faq__a { overflow: hidden; }
.faq__a[hidden] { display: none; }
.faq__a p { padding: 0 28px 26px; max-width: 62ch; color: var(--grey); }
.faq__a p + p { margin-top: -8px; }

/* Formular (Kontakt) */
.form { display: grid; gap: 14px; max-width: 640px; }
.form__row { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--t-small); color: var(--grey); }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--card-solid); color: var(--ink);
  font: inherit; letter-spacing: -.02em;
  transition: border-color var(--d-s) var(--ease-out);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--glow-soft);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.field .error { display: none; color: #FF9A9A; font-size: var(--t-caption); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #FF9A9A; }
.field.is-invalid .error { display: block; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-small); color: var(--grey); }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--glow); }
.form__note { font-size: var(--t-small); color: var(--dim); }
.form__done { padding: 32px; border-radius: 20px; background: var(--card); display: grid; gap: 10px; }

/* Link im Fließtext */
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); transition: text-decoration-color var(--d-s); }
.link:hover { text-decoration-color: var(--ink); }
.on-panel .link { color: var(--p-ink); text-decoration-color: rgba(10,10,10,.3); }
.on-panel .link:hover { text-decoration-color: var(--p-ink); }

/* ==========================================================================
   05 KOPF + MENÜ  (midu: immer sichtbar, kein Grundwechsel)
   ========================================================================== */
.header { position: fixed; inset: 0 0 auto; z-index: 60; padding-top: 22px; pointer-events: none; }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header a, .header button { pointer-events: auto; }

/* Die Marke sitzt wie der Menü-Knopf auf einer dunklen Pille. Vorher stand
   die Wortmarke frei und mischte sich (mix-blend-mode) in den Untergrund —
   über großen weißen Überschriften sah das aus wie ein Fehler. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 14px;
  border-radius: var(--r-btn);
  background: #161618;
  transition: background-color var(--d-s) var(--ease-out);
}
.brand:hover { background: #232326; }
.brand__sign { height: 26px; width: auto; }
/* Die Wortmarke war eine Bilddatei mit 624 x 68 Pixeln — für den Bildschirm
   gemacht und gedruckt matschig. Jetzt ist sie echte Schrift: gestochen scharf
   auf jedem Gerät und in jeder Größe, und die Datei ist mit 2 KB sogar kleiner
   als das Bild mit 14 KB. Der Zeichensatz enthält nur die zwölf Buchstaben,
   die im Namen vorkommen. */
.brand__word {
  font-family: "Fredoka Marke", var(--font);
  /* 14 px Versalhöhe wie beim Bild vorher: Fredoka hat 0,7 — also 20 px. */
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.02em;
  color: #F5F5F7;
  white-space: nowrap;
}

.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--r-btn);
  background: #161618; color: #F5F5F7;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em;
  transition: background-color var(--d-s) var(--ease-out);
}
.menu-btn:hover { background: #232326; }
.menu-btn i { position: relative; width: 14px; height: 14px; flex: none; }
.menu-btn i::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 2.1px, currentColor 98%, transparent) 1px 1px / 6px 6px no-repeat,
    radial-gradient(circle 2.1px, currentColor 98%, transparent) 9px 1px / 6px 6px no-repeat,
    radial-gradient(circle 2.1px, currentColor 98%, transparent) 1px 9px / 6px 6px no-repeat,
    radial-gradient(circle 2.1px, currentColor 98%, transparent) 9px 9px / 6px 6px no-repeat;
  transition: transform var(--d-s) var(--ease-inout);
}
.menu-btn[aria-expanded="true"] i::before { transform: rotate(45deg); }

/* Dropdown-Menü oben rechts */
.menu {
  position: fixed; z-index: 55;
  top: 88px; right: var(--gutter);
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 22px;
  background: rgba(16, 16, 17, .92);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .06);
}
.menu[hidden] { display: none; }
.menu__list { display: grid; gap: 4px; }
.menu__list a { display: block; padding: 9px 10px; border-radius: 12px; font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; transition: background-color var(--d-xs); }
.menu__list a:hover { background: rgba(255, 255, 255, .06); }
.menu__list a[aria-current="page"] { color: var(--glow-soft); }
.menu__group { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.menu__group .label { display: block; padding: 0 10px 8px; font-size: var(--t-caption); color: var(--dim); }
.menu__group ul { display: grid; gap: 2px; }
.menu__group a { display: block; padding: 7px 10px; border-radius: 10px; font-size: 1.0625rem; font-weight: 500; color: #D9D9DC; transition: background-color var(--d-xs); }
.menu__group a:hover { background: rgba(255, 255, 255, .06); }
.menu__foot { margin-top: 20px; display: flex; }
.menu__foot .btn { flex: 1; justify-content: center; }

/* ==========================================================================
   06 STARTSEITE
   ========================================================================== */

/* --- HERO: schwarzer Raum, Klaim rechts der Mitte, unten die Glut ------- */
.hero {
  position: relative;
  min-height: 100vh;      /* Rückfall für Browser ohne svh */
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
/* DER AUSLAUF NACH UNTEN.
   Der Hero schneidet ab: Schein, Korn, Funken und der Staub der Wortmarke
   endeten alle an derselben geraden Kante — genau dort, wo der Schein am
   hellsten ist. Diese Fläche legt sich über den Fuß des Hero und führt
   alles in einer langen, flachen Rampe in den Seitengrund. Sie ist oben
   ganz durchsichtig und unten voll deckend, deshalb ist keine Kante mehr
   zu sehen, egal an welcher Stelle man gerade scrollt. */
.hero::after {
  content: "";
  position: absolute; inset: auto 0 -1px; z-index: 5;
  pointer-events: none;
  /* Kurz halten! Die Rampe fängt nur die letzten Pixel vor der Kante ab und
     dimmt die Glut nicht — die Vorstellung soll man ganz sehen.
     js/hero.js lässt sie beim Scrollen aus der Unterkante herauswachsen
     (--hero-fade geht von 0 auf 1). Wichtig: die HÖHE wächst, nicht die
     Deckkraft — eine halb durchsichtige Rampe ließe die Kante durchblitzen.
     Am Seitenanfang liegt die Kante auf der Fensterunterkante, da gibt es
     nichts zu kaschieren. Ohne JavaScript: volle Höhe. */
  height: calc(var(--hero-fade, 1) * min(clamp(120px, 16vw, 240px), 24svh));
  background: linear-gradient(to bottom,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, .06) 40%,
    rgba(5, 5, 5, .22) 64%,
    rgba(5, 5, 5, .55) 82%,
    rgba(5, 5, 5, .88) 92%,
    var(--bg) 97%);
}
/* Die Leinwand für Funken und Auflösung liegt über dem ganzen Hero, unter
   dem Satz. Sie fängt keine Zeiger — die Position kommt vom Fenster. */
.hero__spark { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* Ein Satz, zwei Zeilen, zwei Helligkeiten: die Zusage in Weiß, die
   Bedingung darunter in Grau. Mehr steht hier bewusst nicht. */
.hero__claim {
  grid-row: 1;
  position: relative; z-index: 3;
  align-self: center;
  /* Mittig, in jeder Breite: die Zeile steht auf der Mitte der Seite, und
     die Begrüßung darüber steht auf derselben Mitte. Nichts rückt aus. */
  justify-self: center;
  text-align: center;
  padding-top: 96px;
  /* Die Sätze im Hero wechseln je Besuch und sind unterschiedlich lang.
     Etwas mehr Breite, dazu text-wrap: balance — dann verteilt der Browser
     die Wörter selbst gleichmäßig auf die Zeilen, statt am Ende ein
     einzelnes Wort hängen zu lassen. */
  max-width: min(32ch, 100%);
  text-wrap: balance;
}
/* Beide Zeilen als Blöcke, damit Unschärfe und Bewegung sauber greifen. */
.hero__claim-a, .hero__claim-b { display: inline-block; }
.hero__claim-b { color: var(--grey); }
/* --- DIE BEGRÜSSUNG -------------------------------------------------------
   „Hallo." und „Ich bin Maxim." liegen exakt auf dem Satz, damit nichts
   springt, wenn die Begrüßung geht und der Satz kommt. Sie ist per hidden
   aus dem Weg, bis js/motion.js sie einschaltet — ohne JavaScript sieht man
   sie also nie, und der Satz steht sofort. */
/* Sie liegt als eigene Ebene über dem Satz. Lage und Breite übernimmt
   js/motion.js direkt vom <h1> — nur so stehen „Hallo." und „Ich baue Ihre
   Website." auf demselben Buchstaben, in jeder Fensterbreite. */
.hero__gruss {
  position: absolute; margin: 0; z-index: 4; pointer-events: none;
  max-width: none;
}
.hero__gruss [data-gruss-wort] { display: inline-block; }
/* Solange die Begrüßung läuft, ist der Satz da, aber unsichtbar: er hält den
   Platz, damit die Zeile beim Wechsel nicht umbricht oder wandert. */
html.gruss-laeuft .hero__claim:not(.hero__gruss) { opacity: 0; }

/* Die Glut: riesige Wortmarke, unten beschnitten, dahinter der Schein */
.ember {
  grid-row: 2;
  position: relative;
  /* Die Glut nimmt höchstens 44 % der Fensterhöhe ein. In einem flachen
     Fenster (Laptop mit geöffneter Konsole, Vorschaurahmen) füllte sie sonst
     mehr als die halbe Seite und drückte den Klaim unter den Kopf. */
  height: min(clamp(160px, 30vw, 430px), 44svh);
  min-height: 150px;
  /* KEIN overflow: hidden. Der Schein steigt beim Scrollen auf und wächst;
     an einer Kante hier bräche er hart ab. Beschnitten wird erst am Fuß des
     Hero — und dort liegt die weiche Rampe (.hero::after) darüber. */
  overflow: visible;
}
.ember__glow {
  position: absolute; inset: -60% -25% 0;
  z-index: 0;
  /* Erste Zeile: einfache Fassung für ältere Browser. Zweite Zeile: dieselbe
     Glut mit color-mix, moderne Browser überschreiben damit die erste. */
  background:
    radial-gradient(46% 74% at 50% 100%, #D7E5FF 0%, #4680FF 22%, var(--glow) 40%, rgba(var(--glow-rgb), .52) 62%, transparent 79%);
  background:
    radial-gradient(46% 74% at 50% 100%, #D7E5FF 0%, color-mix(in srgb, var(--glow) 96%, #fff) 22%, var(--glow) 40%, color-mix(in srgb, var(--glow) 52%, transparent) 62%, transparent 79%);
  filter: blur(clamp(16px, 2.6vw, 38px));
  transform-origin: 50% 88%;
}
.ember__word {
  position: absolute; left: 50%; bottom: clamp(-110px, -8.5vw, -34px); z-index: 1;
  transform: translateX(-50%);
  /* Die Wortmarke soll die Breite füllen und links und rechts nur einen
     Hauch hinauslaufen. Dieser Wert ist der Rückfall für den Fall, dass
     js/hero.js nicht läuft; sonst misst das Skript die tatsächliche Breite
     und setzt die Schriftgröße genau passend (siehe „Wortmarke einpassen“). */
  font-size: clamp(48px, 17vw, 420px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(180deg, rgba(191, 213, 255, .46) 0%, #CFE0FF 30%, #F2F0FF 62%, #FFFDF6 100%);
  background: linear-gradient(180deg, color-mix(in srgb, #BFD5FF 46%, transparent) 0%, #CFE0FF 30%, #F2F0FF 62%, #FFFDF6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .92;
}
/* Das Korn liegt im Mischmodus „overlay" über der Glut und hebt dabei auch
   reines Schwarz leicht an. Ohne Maske zeichnete sich dadurch das Rechteck
   der Leinwand als Kante ab — sichtbar als heller Kasten um die Glut.
   Die Maske gibt dem Korn dieselbe runde Form wie dem Schein: dort, wo kein
   Licht ist, liegt auch kein Korn. */
.ember__grain {
  position: absolute; inset: 0; z-index: 2;
  opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  -webkit-mask-image: radial-gradient(64% 104% at 50% 100%, #000 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,.22) 66%, transparent 84%);
  mask-image: radial-gradient(64% 104% at 50% 100%, #000 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,.22) 66%, transparent 84%);
}

/* --- BAHN: „Was ich für Sie bauen kann" ----------------------------------
   Am Rechner wird .reel__pin festgehalten, die Bahn fährt mit dem Scrollen
   nach links (js/motion.js, reel). Darunter (Handy, flache Fenster, ohne
   JS) ist die Bahn ein Wisch-Karussell mit Schnappstellen. */
.reel { position: relative; background: var(--bg); }
.reel__pin {
  min-height: 100svh;
  /* Eine Spalte, genau so breit wie das Fenster — die Bahn darunter ist
     breiter und ragt rechts hinaus; ohne minmax(0, 1fr) würde die Spalte
     auf Bahnbreite wachsen und Kopf und Leiste ins Off schieben. */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: center;
  padding-block: clamp(88px, 12vh, 140px) clamp(40px, 6vh, 72px);
  overflow: hidden;
}
.reel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.reel__nav { display: flex; align-items: center; gap: 10px; flex: none; }
.reel__count { font-size: var(--t-title); font-weight: 500; letter-spacing: -.02em; flex: none; margin-left: 6px; }
/* Die zwei Pfeile. Sie erscheinen nur, wenn js/motion.js die Bahn wirklich
   festhält (html.reel-pinned) — also am Rechner. Am Handy wischt man, dort
   wären sie Ballast. Bewusst leise: dieselbe Form wie die ↗-Kachel in den
   Karten, kein Rahmen, kein Schatten, am Ende der Bahn nur ausgegraut. */
.reel__arrow {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .06); color: #F5F5F7;
  transition: background-color var(--d-s) var(--ease-out),
              opacity var(--d-s) var(--ease-out),
              transform var(--d-s) var(--ease-out);
}
html.reel-pinned .reel__arrow { display: inline-flex; }
.reel__arrow svg { width: 16px; height: 16px; }
.reel__arrow:hover { background: rgba(255, 255, 255, .14); }
.reel__arrow:active { transform: scale(.94); }
.reel__arrow[disabled] { opacity: .25; pointer-events: none; }
html.ruhig .reel__arrow:active { transform: none; }
.reel__track {
  display: flex; gap: var(--gap);
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.reel__card {
  flex: none;
  width: clamp(300px, 30vw, 440px);
  min-height: clamp(380px, 52vh, 520px);
  transition: background-color var(--d-s) var(--ease-out), transform var(--d-s) var(--ease-out);
}
.reel__card:hover { background: #171718; transform: translateY(-4px); }
.reel__link { display: flex; flex-direction: column; height: 100%; padding: 30px 30px 26px; color: inherit; }
.reel__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reel__num { color: var(--dim); font-size: var(--t-small); }
.reel__icon { display: block; margin-top: clamp(28px, 5vh, 48px); color: var(--glow-soft); }
.reel__icon svg { width: 44px; height: 44px; }
.reel__body { display: block; margin-top: auto; padding-top: 28px; }
.reel__body h3 { font-size: var(--t-project); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.reel__body p { margin-top: 14px; color: var(--grey); font-size: var(--t-small); line-height: 1.45; }
.reel__foot { display: flex; justify-content: flex-end; padding-top: 22px; }
.reel .jump { background: rgba(255, 255, 255, .08); color: #F5F5F7; }
.reel a:hover .jump { background: rgba(255, 255, 255, .16); }
.reel__bar { margin-top: clamp(32px, 5vh, 56px); }
.reel__bar i { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; }
.reel__bar i::after { content: ""; position: absolute; inset: 0; background: var(--glow); transform: scaleX(var(--reel-progress, 0)); transform-origin: left; }

/* --- STATEMENT: 82px, Wort-Aufhellen, dann Über-Absatz ------------------ */
.statement__big { max-width: 24ch; }
.statement__big .accent { font-style: normal; color: var(--glow-soft); }
.about { margin-top: clamp(56px, 8vw, 96px); max-width: 62ch; }
.about p + p { margin-top: 22px; }
.about .lead b { color: var(--ink); }
.about__cta { margin-top: 34px; }

/* --- BÜHNE: großes Bild mit runden Ecken, fast randlos ------------------ */
.stage { padding-inline: 20px; }
.stage__media {
  position: relative;
  display: block;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--card-solid);
}
.stage__media img { width: 100%; height: auto; }
.stage__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); pointer-events: none; }
.stage__caption { display: flex; justify-content: space-between; gap: 16px; padding: 14px 26px 0; color: var(--dim); font-size: var(--t-small); }

/* --- BEISPIELE: Statement + zweispaltiger Vorspann + Karten-Raster ------ */
.workintro { display: grid; gap: 40px; margin-top: clamp(48px, 7vw, 88px); }
.workintro > div:last-child { color: var(--grey); max-width: 34ch; }

.works { display: grid; gap: var(--gap); margin-top: clamp(56px, 7vw, 88px); }
/* Die Autowerkstatt liegt quer und darf die volle Breite haben. */
.works li.is-wide .work { aspect-ratio: 1600 / 900; }
.works li.is-wide .work__shade { inset: 22% 0 0; }
.stage__link { display: block; border-radius: inherit; }
.work {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card-solid);
  aspect-ratio: 628 / 690;
  isolation: isolate;
}
.work__media { position: absolute; inset: 0; }
.work__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s var(--ease-out); }
.work:hover .work__media img { transform: scale(1.04); }
.work__tags { position: absolute; top: 20px; right: 20px; z-index: 2; }
.work__text { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; }
.work__text h3 { font-size: var(--t-project); font-weight: 500; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 16px rgba(0, 0, 0, .55); }
.work__text p { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: var(--t-body); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
/* Der Verlauf trägt die Bildunterschrift. Die Beispielseiten sind teils sehr
   hell — deshalb unten kräftig dunkel, sonst ist der Titel nicht zu lesen. */
.work__shade {
  position: absolute; inset: 34% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, .08) 30%, rgba(0, 0, 0, .34) 55%,
    rgba(0, 0, 0, .72) 78%, rgba(0, 0, 0, .93) 100%);
}
.works__note { margin-top: 28px; color: var(--dim); font-size: var(--t-small); max-width: 70ch; }

/* --- BEWEIS: dunkle Karten wie midu-Testimonials ------------------------ */
.proof { display: grid; gap: var(--gap); }
.proof__head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 44px 40px; }
.proof__mark { color: #2A2A2D; }
.proof__mark svg { width: 92px; height: 72px; }
.proof__head h3 { font-size: var(--t-title); }
.proof__head p { margin-top: 4px; color: var(--grey); }
.proof__body { padding: 44px 40px 40px; }
.proof__quote { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; max-width: 30ch; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: clamp(40px, 6vw, 72px); }
.stats__value { display: block; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.stats__value small { font-size: .45em; color: var(--grey); letter-spacing: -.02em; margin-left: .12em; }
.stats__caption { display: block; margin-top: 10px; color: var(--grey); font-size: var(--t-small); }
.proof__foot { display: flex; align-items: center; gap: 14px; margin-top: clamp(40px, 6vw, 64px); color: var(--grey); font-size: var(--t-small); }
.proof__foot .dot { width: 8px; height: 8px; border-radius: 50%; background: #6FE0A8; box-shadow: 0 0 12px #6FE0A8; }

/* --- HELLES PANEL: Branchen und Leistungen ------------------------------ */
.panel {
  background: var(--panel);
  color: var(--p-ink);
  border-radius: var(--r-panel);
  margin-inline: 0;
  padding: clamp(120px, 16vh, 200px) 0 clamp(140px, 18vh, 240px);
}
.panel .container { position: relative; }
.panel__title { color: var(--p-ink); max-width: 12ch; }
.panel__title--right { margin-left: auto; text-align: left; margin-top: clamp(40px, 9vw, 150px); max-width: 12ch; }
.panel__intro { margin-top: clamp(48px, 8vw, 110px); max-width: 34ch; color: var(--p-grey); }
.panel__cta { margin-top: 30px; }

.tools { display: grid; gap: var(--gap); margin-top: clamp(56px, 8vw, 96px); }
.tool {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white-card);
  color: var(--p-ink);
  border-radius: var(--r-white);
  padding: 42px 40px 28px;
  min-height: 320px;
  box-shadow: 0 30px 60px -40px rgba(10, 10, 10, .25);
}
.tool h3 { font-size: var(--t-title); letter-spacing: -.02em; }
.tool hr { width: 100%; border: 0; height: 1px; background: var(--p-line); margin: 26px 0 18px; }
.tool .info { font-size: var(--t-small); color: #9A9A9E; margin-bottom: 8px; }
.tool p { color: #3C3C40; font-size: var(--t-body); max-width: 40ch; }
.tool__foot { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 22px; }
/* Die offene Tür: keine gefüllte Karte, sondern ein gestrichelter Rahmen auf
   dem Panel. Sie sieht aus wie ein freier Platz, der noch belegt werden kann. */
.tool--offen {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed color-mix(in srgb, var(--p-ink) 26%, transparent);
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.tool--offen:hover { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 6%, transparent); }
.tool--offen .info { color: var(--glow); }
.tool--offen hr { background: color-mix(in srgb, var(--p-ink) 20%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .tool--offen { border-color: rgba(20, 20, 22, .26); }
  .tool--offen:hover { background: rgba(61, 123, 255, .06); }
}

/* --- PAKETE (dunkel, wie midu-Preise) ----------------------------------- */
.bridge {
  height: clamp(140px, 22vh, 260px);
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(var(--glow-rgb), .34) 0%, transparent 55%),
    radial-gradient(120% 100% at 80% 10%, rgba(var(--glow-rgb), .16) 0%, transparent 60%);
  background:
    radial-gradient(120% 130% at 18% 0%, color-mix(in srgb, var(--glow) 34%, transparent) 0%, transparent 55%),
    radial-gradient(120% 100% at 80% 10%, color-mix(in srgb, var(--glow) 16%, transparent) 0%, transparent 60%);
  filter: blur(2px);
}
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.plan { padding: 40px; display: flex; flex-direction: column; min-width: 0; min-height: 560px; }
.plan__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; }
.plan__deco { width: 96px; height: auto; transform: rotate(8deg); opacity: .9; }
.plan__price { margin-top: 44px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan__price .sum { font-size: var(--t-price); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.plan__price .per { color: var(--grey); }
.plan__inc { margin-top: 40px; }
.plan__inc h4 { font-size: var(--t-body); font-weight: 500; margin-bottom: 18px; }
.plan .checks { font-size: var(--t-body); }
.plan__note { margin-top: auto; padding-top: 28px; color: var(--dim); font-size: var(--t-small); }
/* Drei Pakete mit festem Preis: sie stehen ab 900 px nebeneinander (siehe
   Breakpoints). Das vierte, „Projekt“, liegt als breite Karte darunter. */
.plans--drei { margin-bottom: var(--gap); }
.plan__for { margin-top: 14px; color: var(--grey); font-size: var(--t-small); max-width: 34ch; }
.plan__mark {
  align-self: center; color: var(--glow);
  font-size: var(--t-caption); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.plan__why {
  margin-top: 24px; padding: 16px 18px; border-radius: 16px;
  background: rgba(var(--glow-rgb), .10);
  background: color-mix(in srgb, var(--glow) 10%, transparent);
  color: #CFE0FF; font-size: var(--t-small);
}
/* Der Knopf sitzt immer am Fuß der Karte, egal wie lang die Liste darüber
   ist — sonst stünden die drei Knöpfe auf verschiedenen Höhen. */
.plan__act { margin-top: auto; padding-top: 30px; }
.plan__act .btn { width: 100%; }
/* Anker: die Kopfzeile klebt oben, deshalb braucht jedes Sprungziel Luft,
   sonst verschwindet der Kartenkopf darunter. */
.plan[id] { scroll-margin-top: 104px; }
/* Auf der Startseite ist die ganze Karte der Link zur Preisseite. */
.plan--link {
  color: inherit; text-decoration: none;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.plan--link:hover { transform: translateY(-4px); }
.plan--link:hover .plan__go { color: #fff; }
.plan--link:hover .plan__go svg { transform: translate(3px, -3px); }
.plan__go {
  margin-top: auto; padding-top: 30px;
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  color: var(--grey); font-size: var(--t-small); white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.plan__go svg { width: 14px; height: 14px; flex: none; transition: transform .4s var(--ease-out); }
.plan--wide .plan__go { margin-top: 26px; }
.plan--wide { min-height: 0; }
/* Das Signet hängt in der Ecke der linken Spalte, ohne die Zeilenhöhe der
   Kopfzeile zu verändern — sonst klaffte darunter eine Lücke. */
.plan--wide .plan__grid > div:first-child { position: relative; }
/* -14px statt -4: die Preiszeile darunter ist 80 px groß, ihr Kasten
   reicht über die Oberkante der Buchstaben hinaus. Bei -4 px berührten
   sich die beiden Kästen auf sechs Pixeln — noch unsichtbar, aber eine
   etwas längere Preiszeile hätte gereicht. Jetzt ist Luft dazwischen. */
.plan--wide .plan__deco { position: absolute; top: -14px; right: 0; width: 74px; }
.plan--wide .plan__grid { display: grid; gap: 32px; }
.plan--featured { outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px; }
/* Maßarbeit: das offene Paket. Ein Schimmer in der Markenfarbe hebt es ab,
   ohne dass es lauter wird als der Rest. */
.plan--mass {
  outline: 1px solid rgba(var(--glow-rgb), .38);
  outline-offset: -1px;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(var(--glow-rgb), .16) 0%, transparent 58%),
    var(--card-solid);
}
.plan--mass .chip { background: rgba(var(--glow-rgb), .18); color: #CFE0FF; }
.plan__ask { color: #CFE0FF; }

.aftercare { margin-top: var(--gap); padding: 32px 40px; display: grid; gap: 10px; color: var(--grey); }
.aftercare b { color: var(--ink); }

/* --- SCHLUSS / FUSS ----------------------------------------------------- */
.outro { padding-top: var(--section); }
.outro__time { display: inline-flex; align-items: center; gap: 8px; color: #EDEDF0; font-size: var(--t-body); }
.outro__time .zz { color: var(--dim); font-size: .7em; transform: translateY(-6px); }
.outro__claim { margin-top: 18px; max-width: 24ch; }
.outro__cta { margin-top: 48px; }
.footer__grid {
  display: grid; gap: 40px;
  margin-top: clamp(80px, 12vh, 140px);
  padding-bottom: 28px;
}
.footer__col .label { display: block; margin-bottom: 14px; color: var(--dim); font-size: var(--t-body); }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a { font-size: var(--t-body); color: #EDEDF0; }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding: 26px 0 40px;
  color: var(--dim); font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase;
}
.footer__legal a:hover { color: var(--grey); }

/* --- NACHGLUT: die Wortmarke unter dem Seitenende ------------------------
   Dasselbe Bild wie im Kopf — Wortmarke, blauer Nebel, Korn — nur still.
   Keine Funken, kein Zeiger, kein Ziehen: sie liegt hinter der Fußzeile und
   kommt zum Vorschein, wenn man bis ans Ende scrollt. Reine Zierde.

   Beschnitten wird unten am Seitenrand, oben legt sich .nachglut::before als
   weicher Vorhang darüber, damit der Nebel aus dem Schwarz auftaucht statt
   an einer Kante zu beginnen. Höhe und Schriftgröße misst js/site.js; die
   Werte hier sind der Rückfall für Besucher ohne JavaScript. */
.nachglut {
  position: relative;
  height: min(clamp(150px, 24vw, 340px), 42svh);
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  contain: paint;
}
.nachglut__glow {
  position: absolute; inset: 4% -25% -14%;
  z-index: 0;
  background:
    radial-gradient(46% 80% at 50% 100%, #D7E5FF 0%, #4680FF 22%, var(--glow) 40%, rgba(var(--glow-rgb), .52) 62%, transparent 79%);
  background:
    radial-gradient(46% 80% at 50% 100%, #D7E5FF 0%, color-mix(in srgb, var(--glow) 96%, #fff) 22%, var(--glow) 40%, color-mix(in srgb, var(--glow) 52%, transparent) 62%, transparent 79%);
  filter: blur(clamp(16px, 2.6vw, 38px));
}
.nachglut__word {
  /* Prozent statt Pixel: die Wortmarke hängt immer gleich weit über die
     Unterkante der Fläche hinaus, egal wie hoch die Fläche gerade ist. */
  position: absolute; left: 50%; bottom: -6%; z-index: 1;
  transform: translateX(-50%);
  font-size: clamp(48px, 17vw, 420px);   /* Rückfall; js/site.js misst genau */
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(180deg, rgba(191, 213, 255, .46) 0%, #CFE0FF 30%, #F2F0FF 62%, #FFFDF6 100%);
  background: linear-gradient(180deg, color-mix(in srgb, #BFD5FF 46%, transparent) 0%, #CFE0FF 30%, #F2F0FF 62%, #FFFDF6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .92;
}
/* Der Vorhang oben: das Bild taucht aus dem Schwarz auf, keine harte Kante. */
.nachglut::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 3;
  height: 40%; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, rgba(5, 5, 5, .92) 18%, rgba(5, 5, 5, .66) 42%,
    rgba(5, 5, 5, .3) 68%, rgba(5, 5, 5, .08) 86%, transparent 100%);
}
/* Das Korn: ein stehendes SVG-Rauschen, gleiche runde Maske wie oben. */
.nachglut::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; mix-blend-mode: overlay; opacity: .40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(64% 104% at 50% 100%, #000 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,.22) 66%, transparent 84%);
  mask-image: radial-gradient(64% 104% at 50% 100%, #000 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,.22) 66%, transparent 84%);
}

/* ==========================================================================
   07 UNTERSEITEN
   ========================================================================== */
.page-hero { position: relative; padding-top: clamp(150px, 22vh, 230px); padding-bottom: clamp(56px, 9vh, 110px); overflow: hidden; isolation: isolate; }
.page-hero__glow {
  position: absolute; inset: -40% -20% auto; height: 130%; z-index: -1;
  background: radial-gradient(46% 52% at 72% 18%, rgba(var(--glow-rgb), .26), transparent 70%);
  background: radial-gradient(46% 52% at 72% 18%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 70%);
  filter: blur(30px);
}
.page-hero__title { max-width: 15ch; }
.page-hero__lede { margin-top: 26px; max-width: 52ch; color: var(--grey); }
.page-hero__actions { margin-top: 36px; }
.page-hero__meta { display: grid; gap: 8px; margin-top: 36px; color: var(--grey); font-size: var(--t-small); }
.page-hero__meta b { color: var(--ink); }

/* Panel-Varianten für Unterseiten */
.panel--page { padding-block: clamp(80px, 12vh, 150px); }
.panel h2.t-title { margin-bottom: 34px; }

/* Vergleichstabelle (Preise) */
/* --- VERGLEICH: die eigene Spalte ist eine weiße Karte ------------------
   Baukasten und Agentur stehen grau auf dem grauen Panel, die eigene Spalte
   auf Weiß, mit blauem Haken und kräftiger Schrift. Man sieht auf einen
   Blick, welche Spalte gemeint ist, ohne dass ein Wort es sagen muss. */
.compare-wrap { margin-top: 44px; overflow-x: auto; }
.compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; text-align: left; color: var(--p-ink); }
.compare th, .compare td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--p-line); vertical-align: top; font-size: var(--t-small); font-weight: 400; }
.compare thead th { padding-top: 0; padding-bottom: 14px; color: #9A9A9E; font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; }
.compare tbody th { font-weight: 500; width: 20%; }
.compare td { color: #6E6E73; width: 22%; padding-right: 30px; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }

.compare .is-me {
  width: 30%; padding-inline: 22px; padding-right: 22px;
  background: var(--white-card);
  border-bottom-color: rgba(10, 10, 10, .08);
  /* Nur seitliche Schatten — vertikale würden an jeder Zeilenkante eine
     sichtbare Naht ziehen. Kopf und Fuß bekommen ihre Kappe extra. */
  box-shadow: -24px 0 46px -34px rgba(10, 10, 10, .6), 24px 0 46px -34px rgba(10, 10, 10, .6);
}
.compare thead .is-me { box-shadow: -24px 0 46px -34px rgba(10, 10, 10, .6), 24px 0 46px -34px rgba(10, 10, 10, .6), 0 -20px 44px -34px rgba(10, 10, 10, .6); }
.compare tbody tr:last-child .is-me { box-shadow: -24px 0 46px -34px rgba(10, 10, 10, .6), 24px 0 46px -34px rgba(10, 10, 10, .6), 0 24px 48px -30px rgba(10, 10, 10, .5); }
.compare thead .is-me {
  padding-top: 18px; padding-bottom: 16px;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  color: var(--p-ink); font-size: var(--t-small); letter-spacing: -.02em; text-transform: none;
}
.compare tbody tr:last-child .is-me { border-radius: 0 0 var(--r-panel) var(--r-panel); padding-bottom: 22px; }
.compare__me { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.compare__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); flex: none; }
.compare__yes { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--p-ink); font-weight: 500; }
.compare__yes svg { width: 18px; height: 18px; color: var(--glow); margin-top: 1px; }
/* --- Paketvergleich: dieselbe Tabelle, aber vier gleich breite Spalten mit
   Häkchen statt Fließtext. Das Merkmal links darf breiter sein, weil die
   Zeilen dort ganze Sätze sind. -------------------------------------------- */
/* table-layout: fixed ist hier das Entscheidende. Ohne das nimmt sich die
   weiße Spalte (.is-me, 30 % breit) den Platz vom Nachbarn — „Nach Absprache"
   brach dann um, während Komplett Luft hatte. Feste Spalten: die vier Pakete
   sind gleich breit, egal welches gerade hervorgehoben ist. Und weil die
   Auswahl wandern kann, haben alle Zellen dieselben Innenabstände — sonst
   würde der Text beim Umschalten springen. */
.compare--pakete { table-layout: fixed; min-width: 780px; }
.compare--pakete th:first-child { width: 31%; }
.compare--pakete thead th + th { width: 17.25%; }
.compare--pakete tbody th { padding-right: 26px; }
.compare--pakete td { width: auto; padding-inline: 16px; }
.compare--pakete .is-me { width: auto; padding-inline: 16px; }
.compare--pakete thead th { white-space: nowrap; }
/* Der Paketname im Kopf ist ein Knopf: er schiebt die weiße Karte auf seine
   Spalte. Er sieht aus wie die Beschriftung daneben, bis man darauf zeigt —
   der blaue Punkt sagt, welche Spalte gerade gewählt ist. */
.pv-tab {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; cursor: pointer;
  transition: color var(--d-s) var(--ease-out);
}
.pv-tab .compare__dot { opacity: 0; transition: opacity var(--d-s) var(--ease-out); }
.pv-tab:hover { color: var(--p-ink); }
.compare--pakete .is-me .pv-tab { font-weight: 500; }
.compare--pakete .is-me .pv-tab .compare__dot { opacity: 1; }
.pv-tipp { color: #9A9A9E; }
.pv-ja { display: inline-flex; }
.pv-ja svg { width: 19px; height: 19px; color: var(--glow); }
.pv-nein { color: #C4C4C8; font-size: 15px; }
/* Die erste Zeile ist der Preis — die darf laut sein. */
.compare--pakete tbody tr:first-child td { color: var(--p-ink); font-weight: 500; font-size: var(--t-body); }
/* Luft zwischen den beiden Tabellen im hellen Kapitel. */
.vergleich-trenner { height: clamp(64px, 9vw, 120px); }
/* Die Zusammenfassung der überall gleichen Zeilen wird nur auf dem Handy
   gebraucht — am Rechner stehen sie ja in der Tabelle. */
.pv-immer { display: none; }

/* Nummernliste (Ablauf: was ich brauche) */
.needs { display: grid; gap: 0; max-width: 760px; }
.needs li { display: grid; grid-template-columns: 3em 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--grey); }
.on-panel .needs li { border-color: var(--p-line); color: var(--p-grey); }
.needs li span:first-child { color: var(--dim); font-variant-numeric: tabular-nums; }
.on-panel .needs li span:first-child { color: #9A9A9E; }

/* Ablauf-Schritte: dunkle Karten im Stapel */
.stack { display: grid; gap: var(--gap); }
.step { position: relative; padding: 40px; display: grid; gap: 18px; align-content: start; transform-origin: center top; }
.step__dim { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
.step__index { color: var(--dim); font-size: var(--t-small); }
.step__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.step__text { max-width: 46ch; color: var(--grey); }
.step__meta { color: var(--grey); font-size: var(--t-small); }
.step__meta b { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; color: var(--ink); margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* Kontakt */
.contact { display: grid; gap: 48px; }
.contact__phone { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.contact__phone:hover { color: var(--glow-soft); }
.contact__rows { display: grid; gap: 0; }
.contact__rows > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact__rows dt { color: var(--dim); font-size: var(--t-small); }
.contact__rows dd { font-size: var(--t-body); }

/* Recht */
.legal { max-width: 70ch; display: grid; gap: 40px; }
.legal h2 { font-size: var(--t-title); margin-bottom: 12px; }
.legal p { color: var(--grey); }
.legal p + p { margin-top: 12px; }
.legal .todo { display: inline-block; padding: 3px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--ink); font-size: var(--t-caption); }
.on-panel .legal p { color: #4A4A4E; }
.on-panel .legal .todo { background: rgba(10, 10, 10, .08); color: var(--p-ink); }

/* Einladung (Website-Check) */
.invite {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px; border-radius: var(--r-card);
  background: var(--card);
  transition: background-color var(--d-s) var(--ease-out);
}
.invite:hover { background: rgba(28, 28, 30, .9); }
.invite b { display: block; font-size: var(--t-title); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.invite span:first-child { color: var(--grey); }

/* ==========================================================================
   08 BEWEGUNG
   Ruhezustände gelten nur, solange JavaScript läuft (html.js). Kommt die
   Motion-Engine nicht, nimmt der Wächter im <head> die Klasse weg und alles
   ist sichtbar — versteckt bleibt nie etwas.
   ========================================================================== */
html.js [data-reveal]:not(.is-in) { opacity: 0; }
html.js [data-blur]:not(.is-in) { opacity: 0; }
html.js [data-hero]:not(.is-in) { opacity: 0; }
html.js .ember:not(.is-in) .ember__word,
html.js .ember:not(.is-in) .ember__glow { opacity: 0; }
/* Ohne JavaScript stehen die Wörter sofort in voller Farbe. */
html:not(.js) .scrub-w { color: var(--ink); }
html:not(.js) .on-panel .scrub-w { color: var(--p-ink); }

/* Gedämpfte Fassung — greift NUR, wenn js/motion.js die Klasse „ruhig"
   ans <html> setzt. Das tut es, wenn dort der Schalter RESPEKTIERE_SYSTEM
   auf true steht und der Besucher „Animationen reduzieren" eingestellt hat.
   Stand jetzt steht der Schalter auf false: die Seite animiert für alle,
   genau wie Framer-Seiten (z. B. midu.design) es tun. Dann bleiben diese
   Regeln wirkungslos, und der ganze Umschalter ist diese eine Zeile in
   js/motion.js. */
html.ruhig .work__media img { transition: none; }
html.ruhig .work:hover .work__media img { transform: none; }
html.ruhig a:hover .jump,
html.ruhig .jump:hover { transform: none; }
html.ruhig .btn:active { transform: none; }
html.ruhig .step { position: static !important; }
html.ruhig .proof__foot .dot { box-shadow: none; }

/* ==========================================================================
   09 BREAKPOINTS
   ========================================================================== */
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .works { grid-template-columns: 1fr 1fr; }
  .works li.is-wide { grid-column: 1 / -1; }
  .tools { grid-template-columns: 1fr 1fr; }
  .tools .tool:nth-child(even) { transform: translateY(56px); }
  .tools { padding-bottom: 56px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan--wide { grid-column: 1 / -1; }
  .plan--wide .plan__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Zwischenstufe: zwei Spalten, das dritte Paket darunter über die Breite. */
  .plans--drei .plan:last-child { grid-column: 1 / -1; }
  .workintro { grid-template-columns: 1.3fr 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .stage { padding-inline: 20px; }
}

@media (min-width: 900px) {
  .hero__claim { padding-top: 60px; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .step { position: sticky; top: 104px; min-height: 46vh; grid-template-columns: 1.5fr 1fr; }
  .step__index { grid-column: 1 / -1; }
  .step__meta { grid-row: 2 / span 2; grid-column: 2; text-align: right; }
  .panel--page .tools { grid-template-columns: 1fr 1fr; }
  /* Ab hier passen die drei Pakete nebeneinander. Weniger Polster, damit
     der Text in der schmaleren Spalte nicht auf drei Wörter je Zeile fällt. */
  .plans--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans--drei .plan:last-child { grid-column: auto; }
  .plans--drei .plan { padding: 32px 28px; min-height: 0; }
  .plans--drei .plan__price { margin-top: 30px; }
  .plans--drei .plan__inc { margin-top: 28px; }
}

/* Unter 900 px hat das Signet keinen freien Platz mehr: absolut gesetzt lag
   es über dem Chip „Projekt · Nach oben offen" und schnitt in die Preiszeile.
   Hier läuft es deshalb im Textfluss mit — .plan__top ist ohnehin eine
   Flex-Zeile mit space-between, also sitzt es weiter rechts oben, nur ohne
   etwas zu verdecken. margin-left: auto hält es rechts, auch wenn es auf
   schmalen Geräten in die zweite Zeile rutscht. */
@media (max-width: 899px) {
  .plan--wide .plan__deco { position: static; width: 68px; margin-left: auto; }
}

@media (max-width: 639px) {
  :root { --section: 96px; }
  /* Auf dem Handy wird jede Zeile zu einem Block. Die eigene Spalte bekommt
     dort ihre eigene weiße Karte, damit der Vorteil auch klein sichtbar ist. */
  .compare-wrap { overflow-x: visible; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; min-width: 0; width: auto; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tr { padding: 16px 0; border-bottom: 1px solid var(--p-line); }
  .compare tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: var(--t-body); }
  .compare td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; width: auto; padding: 3px 0; padding-right: 0; border: 0; }
  .compare td::before { content: attr(data-label); color: #9A9A9E; font-size: var(--t-caption); padding-top: 2px; }
  .compare .is-me {
    width: auto; margin-top: 12px; padding: 14px 16px;
    border-radius: 18px; border-bottom: 0;
    grid-template-columns: 1fr;
    box-shadow: 0 14px 34px -26px rgba(10, 10, 10, .7);
  }
  .compare .is-me::before { color: var(--glow); font-weight: 500; padding: 0 0 6px; }
  .compare tbody tr:last-child .is-me { border-radius: 18px; padding-bottom: 14px; }
  /* Beim Paketvergleich steht auf dem Handy je Zeile das Merkmal und darunter
     die vier Pakete mit ihrem Wert. Schmalere Beschriftungsspalte, weil die
     Paketnamen kurz sind. */
  /* Der Paketvergleich auf dem Handy: Zeilen, in denen alle vier dasselbe
     können, fallen weg — sie stehen als Satz unter der Tabelle. Und die
     hervorgehobene Spalte wird nicht zur weißen Karte, sonst hätte man
     neunzehn Karten untereinander. Nur der Name wird blau und fett. */
  .compare--pakete { min-width: 0; }
  .compare--pakete tr.is-gleich { display: none; }
  .compare--pakete tbody tr {
    display: grid; grid-template-columns: repeat(4, 1fr);
    column-gap: 8px; padding: 15px 0;
  }
  .compare--pakete tbody th {
    grid-column: 1 / -1; padding: 0 0 11px;
    font-size: var(--t-small); font-weight: 500;
  }
  .compare--pakete tbody td {
    display: block; width: auto; padding: 0; margin: 0;
    text-align: center; font-size: 13px; line-height: 1.35;
    background: none; box-shadow: none; border-radius: 0; border: 0;
  }
  .compare--pakete tbody td::before {
    content: attr(data-label); display: block;
    color: #9A9A9E; font-size: 11px; letter-spacing: 0;
    padding: 0 0 6px; text-transform: none;
  }
  .compare--pakete tbody td.is-me {
    background: none; box-shadow: none; border-radius: 0;
    margin: 0; padding: 0; color: var(--p-ink); font-weight: 500;
  }
  .compare--pakete tbody td.is-me::before { color: var(--glow); font-weight: 500; }
  .compare--pakete tbody tr:first-child td { font-size: 14px; }
  /* Am Rechner ist der Tabellenkopf die Auswahl. Auf dem Handy ist er
     versteckt (die Werte tragen ihre Beschriftung selbst) — deshalb kommt
     er hier als Reihe von vier Knöpfen zurück, über der Tabelle. */
  .compare--pakete thead {
    position: static; width: auto; height: auto;
    overflow: visible; clip-path: none; display: block;
  }
  .compare--pakete thead tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 0 0 18px; border: 0;
  }
  .compare--pakete thead th:first-child { display: none; }
  /* .is-me mitnennen: die Kopfzelle der gewählten Spalte trägt am Rechner
     die weiße Kappe mit Polster und Schatten. Hier ist der Knopf selbst der
     Chip, die Zelle darum muss nackt sein. */
  .compare--pakete thead th,
  .compare--pakete thead th + th,
  .compare--pakete thead th.is-me {
    width: auto; flex: none; padding: 0; border: 0;
    background: none; box-shadow: none; border-radius: 0;
  }
  /* Die festen Spaltenbreiten gelten nur für die echte Tabelle am Rechner:
     hier ist die Zeile ein Raster, die Merkmalszeile darf die volle Breite
     haben. Beide Selektoren müssen so spitz sein wie die Regeln oben. */
  .compare--pakete { table-layout: auto; }
  .compare--pakete tbody th,
  .compare--pakete tbody th:first-child { width: auto; }
  .compare--pakete thead .pv-tab {
    padding: 9px 15px; border-radius: var(--r-chip);
    background: rgba(10, 10, 10, .06); color: #6E6E73;
    font-size: var(--t-small); letter-spacing: -.02em; text-transform: none;
  }
  .compare--pakete thead .is-me .pv-tab {
    background: var(--white-card); color: var(--p-ink);
    box-shadow: 0 12px 26px -20px rgba(10, 10, 10, .7);
  }
  .pv-tipp { display: block; margin-top: 10px; }
  .pv-immer {
    display: block; margin-top: 22px; color: #6E6E73;
    font-size: var(--t-small); line-height: 1.6;
  }
  .pv-immer b { color: var(--p-ink); }
  .plan { min-height: 0; }
  .proof__head { grid-template-columns: 1fr; gap: 12px; }
  .proof__mark svg { width: 56px; height: 44px; }
  .menu { top: 84px; }
  /* Der versetzte zweite Titel im hellen Panel steht auf dem Handy links,
     sonst wirkt die Zeile verrutscht. */
  .panel__title--right { margin-left: 0; margin-top: 8px; max-width: none; }
  /* Bildunterschrift der Bühne untereinander statt gequetscht nebeneinander */
  .stage__caption { flex-direction: column; gap: 6px; padding-inline: 4px; }
  .stage { padding-inline: 16px; }
  /* Beispielkarten: mehr Luft für die Beschriftung */
  .work__text { left: 20px; right: 20px; bottom: 20px; }
}

@media (max-height: 640px) and (min-width: 900px) {
  .step { position: relative; top: auto; min-height: 0; }
}

/* Die Bahn als Wisch-Karussell: unter 900px, in flachen Fenstern, und
   immer dann, wenn kein JavaScript sie festhält (html ohne .reel-pinned). */
@media (max-width: 899px), (max-height: 640px) {
  .reel__pin { min-height: 0; padding-block: clamp(56px, 8vh, 96px) 48px; }
  .reel__head { margin-bottom: 24px; }
  .reel__count { display: none; }
  .reel__bar { display: none; }
  /* Auf dem Handy stehen die Karten untereinander im Blick statt bildschirm-
     hoch: keine Mindesthöhe, und der Text rückt direkt unter das Zeichen.
     Nur der Pfeil bleibt unten kleben, damit alle Karten gleich enden. */
  .reel__card { min-height: 0; }
  .reel__link { padding: 24px 24px 22px; }
  .reel__icon { margin-top: 22px; }
  .reel__icon svg { width: 38px; height: 38px; }
  .reel__body { margin-top: 24px; padding-top: 0; }
  .reel__foot { margin-top: auto; padding-top: 20px; }
}
html:not(.reel-pinned) .reel__track {
  width: auto;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 8px;
  scrollbar-width: none;
}
html:not(.reel-pinned) .reel__track::-webkit-scrollbar { display: none; }
html:not(.reel-pinned) .reel__card { scroll-snap-align: start; width: min(78vw, 400px); }