/* ============================================================
   JF JUST FUTURE – STYLESHEET
   Editorial-Design: warmes Creme auf Anthrazit, riesige
   Display-Serif, Laufschriften, weicher Scroll, eigener Cursor.

   Aufbau
   0.  Schriften
   1.  Farben, Typo-Skala, Abstände (:root)
   2.  Basis und Grundtypografie
   3.  Display-Typografie und Textmasken
   4.  Loader, Cursor, Körnung
   5.  Buttons und Links
   6.  Header und Navigation
   7.  Sektionen, Hell-/Dunkel-Wechsel
   8.  Laufschrift (Marquee) und Textring
   9.  Hero
   10. Leistungen
   11. Für wen
   12. Ablauf
   13. Projekte
   14. Preise
   15. Über mich
   16. FAQ
   17. Kontakt
   18. Footer
   19. Mobile CTA-Leiste
   20. Themenseiten, 404, Rechtliches
   21. Reveal-Animationen und reduzierte Bewegung

   Branding anpassen: alle Farben und Maße liegen im :root-Block
   unter Punkt 1.
   ============================================================ */


/* ============================================================
   0. SCHRIFTEN, selbst gehostet
   Es geht kein einziger Aufruf an Google raus, damit werden auch
   keine Besucher-IP-Adressen dorthin übertragen. Beide Familien
   stehen unter der SIL Open Font License 1.1, Selbst-Hosting ist
   damit ausdrücklich erlaubt.
   Zeichensatz: latin (enthält Umlaute, ß, Euro und die deutschen
   Anführungszeichen).
   ============================================================ */

/* Display: hoher Strichkontrast, wirkt in großen Graden edel.
   Aufrecht ausschließlich in Versalien, kursiv ausschließlich
   klein geschrieben. Beide Schnitte kommen aus derselben Familie,
   dadurch bleibt der Wechsel im Satz ruhig. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-italic-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Fließtext, Bedienelemente und Kleinschrift. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   1. FARBEN, TYPO-SKALA, ABSTÄNDE
   ============================================================ */

:root {
  /* Grundpalette */
  --ink: #0d0d11;           /* tiefstes Schwarz, Text auf Creme */
  --charcoal: #1e2125;      /* Hauptuntergrund */
  --charcoal-2: #26292e;    /* angehobene Flächen, Karten */
  --charcoal-3: #2f3238;    /* Hover, Formularfelder */
  --cream: #f5efe5;         /* heller Untergrund */
  --cream-warm: #e9dfce;    /* warmes Creme, Text auf Anthrazit */
  --grey: #81818b;

  /* Markenfarbe, sparsam eingesetzt: Fokus, Kennzahlen, Hervorhebung */
  --accent: #8b7cf7;
  --accent-strong: #a396ff;
  --accent-tint: rgba(139, 124, 247, 0.12);

  /* Lokale Farben. Werden in hellen Sektionen überschrieben, alle
     Bausteine darunter greifen nur noch auf diese vier Variablen zu
     und funktionieren dadurch auf beiden Untergründen.
     Die Deckkraft von muted/faint bewusst hoch halten: darunter wird
     das Kleingedruckte auf dem dunklen Grund schwer lesbar. */
  --bg: var(--charcoal);
  --fg: var(--cream-warm);
  --fg-muted: rgba(233, 223, 206, 0.93);
  --fg-faint: rgba(233, 223, 206, 0.76);
  --line: rgba(233, 223, 206, 0.14);
  --line-strong: rgba(233, 223, 206, 0.28);
  --surface: rgba(233, 223, 206, 0.045);
  --surface-2: rgba(233, 223, 206, 0.08);

  /* Schriftfamilien: genau zwei. Eine Serifenschrift für alles
     Große (aufrecht und kursiv), eine Grotesk für alles Kleine.
     Wer eine dritte Familie ergänzen will, sollte stattdessen
     erst mit Schnitt, Grad und Laufweite arbeiten. */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Avenir Next", "Segoe UI", sans-serif;

  /* Typo-Skala. Die Display-Größen sind bewusst groß, das ist der
     Kern des Designs. */
  --fs-display: clamp(2.4rem, 7.8vw, 8.2rem);
  --fs-h2: clamp(2.1rem, 6vw, 5rem);
  --fs-h3: clamp(1.35rem, 1vw + 1.05rem, 1.85rem);
  /* Die drei Textgrößen bewusst großzügig: Ein Betrieb liest hier
     Preise und Bedingungen, das darf nicht nach Kleingedrucktem
     aussehen. --fs-small ist der eigentliche Fließtext in Karten,
     Listen und Antworten, --fs-label alles in Versalien. */
  --fs-body: 1.125rem;
  --fs-small: 1.0625rem;
  --fs-label: 0.8125rem;

  /* Zwischenüberschriften in der Display-Schrift. Vorher hatte fast
     jede Sektion ihren eigenen Wert (32, 35, 37, 38, 48, 50, 51 px),
     die Unterschiede waren zu klein, um als Stufe zu wirken, aber
     groß genug, um unruhig auszusehen. Jetzt drei klare Stufen. */
  --fs-h3-lg: clamp(1.75rem, 3.2vw, 2.9rem);   /* Projekte, Leistungen */
  --fs-h3: clamp(1.5rem, 2.4vw, 2.1rem);       /* Karten, Ablauf, Preise */
  --fs-h3-sm: clamp(1.15rem, 1.9vw, 1.65rem);  /* FAQ-Fragen */

  /* Große Zahlen: Schrittnummern, Preise, Kennzahlen. */
  --fs-num: clamp(2.2rem, 3.9vw, 3.3rem);
  --fs-num-sm: clamp(1.7rem, 2.6vw, 2.2rem);

  /* Kleines Versalien-Etikett. Genau ein Schnitt und genau eine
     Laufweite für alle: Eyebrow, Buttons, Formularlabels, Kennzahlen-
     Beschriftungen. Minimal abweichende Werte lesen sich sonst wie
     eine weitere Schriftart. */
  --weight-label: 600;
  --track-label: 0.18em;

  /* Abstände und Form */
  --section-pad: clamp(5.5rem, 13vw, 11rem);
  --inner-max: 82rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 4px;
  --radius-small: 3px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur: 0.8s;
}


/* ============================================================
   2. BASIS
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  interpolate-size: allow-keywords; /* für die FAQ-Höhenanimation */
}
/* Der eigene Sanftscroll übernimmt, sobald JavaScript läuft.
   Beides gleichzeitig würde sich gegenseitig ausbremsen. */
html.has-smooth-scroll { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* Ein dünner Schnitt wirkt auf dunklem Grund schnell blass und
     ausgefranst. 430 ist noch leicht, steht aber sauber. */
  font-weight: 430;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Solange der Loader läuft und solange das Mobil-Menü offen ist,
   bleibt die Seite stehen. Beide Elemente, weil je nach Browser mal
   <html> und mal <body> das scrollende Element ist. */
html.is-locked,
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--cream-warm); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10050;
  padding: 0.7rem 1.2rem;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
.skip-link:focus-visible { top: 0; }

#main:focus { outline: none; }


/* ============================================================
   3. DISPLAY-TYPOGRAFIE UND TEXTMASKEN

   .display  = riesige Versalien in der Serifenschrift
   .it       = kursives Kleingeschriebenes als Gegenpol, gleiche
               Familie, nur anderer Schnitt
   .line     = eine Zeile, .line > span wird beim Reveal
               hinter der Maske hochgeschoben (js/main.js)
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
}

.it {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Auch die kursiven Wörter stehen in Versalien: In einer Überschrift
     soll nie ein Wort groß und das nächste klein geschrieben sein.
     Den Gegenpol setzt jetzt allein der kursive Schnitt. */
  text-transform: uppercase;
  letter-spacing: -0.015em;
  font-size: 1em;
}

/* Sektions-Überschriften: gleiche Sprache, eine Stufe kleiner */
.section-head h2,
.about-copy h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Kleine Versalien-Etiketten über den Überschriften */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.6rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

/* Textmaske: der Inhalt startet unter der Kante und fährt hoch.

   Die Polsterung macht den Maskenrahmen etwas höher als die
   Zeilenhöhe, sonst würden Ober- und Unterlängen der Serifenschrift
   abgeschnitten. Der gleich große negative Außenabstand holt den
   engen Zeilenfall wieder zurück. */
/* Die Polsterung schafft Platz für Ober- und Unterlängen, das
   negative Außenmaß nimmt sie fürs Layout wieder zurück. Die
   Kursive der Bodoni hat tiefe Unterlängen (g, j, y), unten
   deshalb reichlich Luft, sonst schneidet die Maske sie ab. */
.line {
  display: block;
  overflow: hidden;
  padding: 0.14em 0 0.26em;
  margin: -0.14em 0 -0.26em;
}
.line > span {
  display: block;
}
/* Nur Zeilen in einem [data-lines]-Block starten versteckt. Ohne
   JavaScript greift die Regel gar nicht, dann steht alles sofort da.
   135 % statt 100 %, damit die Zeile auch hinter der Polsterung
   vollständig verschwindet. */
html.js [data-lines] .line > span {
  transform: translateY(135%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--line-delay, 0s);
}
html.js [data-lines].is-revealed .line > span { transform: translateY(0); }


/* ============================================================
   4. LOADER, CURSOR, KÖRNUNG
   ============================================================ */

/* ----- Ladeschirm: nur das Logo, mittig. Es blendet weich ein,
   hält kurz und löst sich dann zusammen mit dem Schirm auf, während
   darunter schon die Hero-Zeilen hochfahren. Dadurch gibt es keinen
   harten Schnitt zwischen Intro und Seite.
   Ohne JavaScript wird er nie eingeblendet (hidden bleibt stehen). */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 1s var(--ease-out);
}
.loader[hidden] { display: none; }
.loader picture { display: flex; }

.loader-logo {
  width: min(66vw, 21rem);
  height: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.loader.is-in .loader-logo {
  opacity: 1;
  transform: none;
}

/* Ausblenden: der Schirm löst sich auf, das Logo schwebt dabei ein
   Stück weiter nach oben, damit die Bewegung nicht einfach stehen
   bleibt. Beides nur Deckkraft und Transform, läuft also flüssig. */
.loader.is-done {
  opacity: 0;
  pointer-events: none;
}
.loader.is-done .loader-logo {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}

/* ----- Eigener Cursor: Punkt plus Ring, beide laufen dem Zeiger
   verzögert nach. mix-blend-mode invertiert ihn über jedem
   Untergrund. Nur auf Geräten mit Maus, nie auf Touch. */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor summary,
  html.has-cursor input,
  html.has-cursor textarea,
  html.has-cursor label { cursor: none; }

  html.has-cursor .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: block;
    pointer-events: none;
    mix-blend-mode: difference;
    /* Erst sichtbar, sobald die Maus das erste Mal bewegt wurde,
       sonst klebt der Ring beim Laden in der Bildmitte. */
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
  }

  .cursor-dot,
  .cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--cream);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
                opacity 0.3s var(--ease-out);
  }

  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(245, 239, 229, 0.55);
    transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
                border-color 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
  }

  /* Über Links und Knöpfen wächst der Ring, der Punkt verschwindet.
     Über Bildern bleibt der Cursor bewusst unverändert. */
  .cursor.is-hover .cursor-ring { width: 68px; height: 68px; border-color: var(--cream); }
  .cursor.is-hover .cursor-dot { width: 0; height: 0; }
}

/* ----- Filmkorn über der ganzen Seite. Sehr dezent, gibt den
   großen Flächen Textur. Die Textur steckt als SVG in der URL,
   es wird also keine Bilddatei geladen. */

/* Der Überstand ist absichtlich knapp: Bei inset -50% wäre die
   Grafikebene viermal so groß wie das Fenster, was auf schwächeren
   Geräten spürbar Speicher und Zeichenleistung kostet. 8 % reichen
   für die Verschiebung von höchstens 4 % in den Keyframes. */
.grain {
  position: fixed;
  inset: -8%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.026;
  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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-2%, -3%); }
  33%  { transform: translate(-4%, 2%); }
  50%  { transform: translate(2%, -4%); }
  66%  { transform: translate(-1%, 3%); }
  83%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}


/* ============================================================
   5. BUTTONS UND LINKS
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

/* Füllung wächst beim Überfahren von unten nach oben hoch */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-inout);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { color: var(--bg); border-color: var(--fg); }

.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-primary::before { background: transparent; }
/* Bei der gefüllten Variante läuft die Umkehrung andersherum */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-inout);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { transform: scaleY(1); }
.btn-primary:hover { color: var(--fg); }

.btn-ghost { background: transparent; }

.btn-small { padding: 0.8rem 1.5rem; font-size: 0.75rem; letter-spacing: 0.14em; }
.btn-large { padding: 1.25rem 2.6rem; font-size: 0.875rem; }

/* Textlink mit Unterstrich, der von links nach rechts durchläuft */
.link-line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-inout);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }


/* ============================================================
   6. HEADER UND NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  color: var(--cream-warm);
  transition: color 0.5s var(--ease-out), background-color 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out), transform 0.6s var(--ease-inout);
  border-bottom: 1px solid transparent;
}

/* Kopfzeile passt sich der Sektion an, die gerade unter ihr liegt */
.site-header.on-light { color: var(--ink); }

/* Die Weichzeichnung hinter der Kopfzeile ist der teuerste Effekt
   beim Scrollen, weil der Bereich in jedem Frame neu berechnet wird.
   10 px sehen praktisch aus wie 16 px, kosten aber deutlich weniger.
   Der etwas kräftigere Hintergrund gleicht das optisch aus. */
.site-header.is-scrolled {
  background: rgba(30, 33, 37, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(233, 223, 206, 0.1);
}
.site-header.is-scrolled.on-light {
  background: rgba(245, 239, 229, 0.86);
  border-bottom-color: rgba(13, 13, 17, 0.1);
}

/* Beim Runterscrollen fährt die Kopfzeile weg, beim Hochscrollen
   kommt sie sofort zurück. */
.site-header.is-hidden { transform: translateY(-102%); }

.header-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; }
.brand picture { display: flex; }

/* Das Zeichen (Monogramm) ist fast quadratisch, deshalb etwas höher
   als das alte Querformat-Logo, damit es gleich präsent wirkt. */
.brand-mark {
  height: 2.75rem;
  width: auto;
  max-width: none;
  transition: opacity 0.4s var(--ease-out), filter 0.5s var(--ease-out);
}
@media (min-width: 900px) {
  .brand-mark { height: 3.4rem; }
}

/* Im Footer liegt die Marke mit Schriftzug, die braucht mehr Platz */
.footer-brand .brand-mark { height: 5.25rem; }
/* Auf hellem Grund würde der helle Teil des Logos verschwinden.
   brightness(0) färbt alle Bildpunkte schwarz und lässt die
   Transparenz stehen, das ergibt eine saubere Silhouette. */
.site-header.on-light .brand-mark { filter: brightness(0); }
.brand:hover .brand-mark { opacity: 0.65; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Navigationslinks: der Text rollt beim Überfahren nach oben weg,
   darunter kommt dieselbe Beschriftung wieder hoch. Die zweite
   Fassung setzt js/main.js aus dem data-text-Attribut. */
.site-nav a:not(.btn) {
  position: relative;
  display: block;
  overflow: hidden;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.5;
}
.site-nav a:not(.btn) .nav-roll {
  display: block;
  transition: transform 0.55s var(--ease-inout);
}
.site-nav a:not(.btn) .nav-roll::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover .nav-roll { transform: translateY(-100%); }

.site-nav .nav-phone a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.nav-phone svg { flex: none; }

/* Unter 900px steht die Nummer im aufklappbaren Menü, ab 1120px
   wieder in der Kopfzeile. Dazwischen wäre die Zeile zu eng. */
@media (min-width: 900px) and (max-width: 1119px) {
  .nav-phone { display: none; }
}

/* ----- Menüknopf und Vollbildmenü unter 900px ----- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 0.45s var(--ease-inout), opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

@media (max-width: 899px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: flex-start;
    /* Auf kleinen Geräten kann die Liste höher als der Bildschirm
       werden, dann muss sie scrollbar bleiben. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6.5rem var(--gutter) 3rem;
    background: var(--ink);
    color: var(--cream-warm);
    /* Menü klappt als Vorhang von oben herunter */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.75s var(--ease-inout);
  }
  .site-nav.is-open { clip-path: inset(0 0 0 0); }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
  }
  .site-nav li { width: 100%; overflow: hidden; }

  /* Die Punkte fahren nacheinander hoch, sobald das Menü offen ist */
  .site-nav li > * {
    display: block;
    transform: translateY(110%);
    transition: transform 0.7s var(--ease-out);
    transition-delay: 0s;
  }
  .site-nav.is-open li > * { transform: translateY(0); }
  .site-nav.is-open li:nth-child(1) > * { transition-delay: 0.18s; }
  .site-nav.is-open li:nth-child(2) > * { transition-delay: 0.24s; }
  .site-nav.is-open li:nth-child(3) > * { transition-delay: 0.30s; }
  .site-nav.is-open li:nth-child(4) > * { transition-delay: 0.36s; }
  .site-nav.is-open li:nth-child(5) > * { transition-delay: 0.42s; }
  .site-nav.is-open li:nth-child(6) > * { transition-delay: 0.48s; }
  .site-nav.is-open li:nth-child(7) > * { transition-delay: 0.54s; }

  .site-nav a:not(.btn) {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 10vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .site-nav a:not(.btn) .nav-roll::after { display: none; }
  .site-nav a:not(.btn):hover .nav-roll { transform: none; }
  .site-nav a:not(.btn):hover { opacity: 0.55; }

  .nav-phone { margin-top: 1.5rem; }
  .site-nav .nav-phone a {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .nav-cta { margin-top: 1.25rem; }
}


/* ============================================================
   7. SEKTIONEN, HELL-/DUNKEL-WECHSEL

   Jede Sektion bringt ihre eigenen vier Farbvariablen mit.
   .section-light dreht die Seite auf Creme, alles darin
   (Karten, Linien, Knöpfe) folgt automatisch.
   ============================================================ */

.section {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--bg);
  color: var(--fg);
}

.section-light {
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-muted: rgba(13, 13, 17, 0.88);
  --fg-faint: rgba(13, 13, 17, 0.7);
  --line: rgba(13, 13, 17, 0.13);
  --line-strong: rgba(13, 13, 17, 0.26);
  --surface: rgba(13, 13, 17, 0.035);
  --surface-2: rgba(13, 13, 17, 0.06);
}

/* Bestandsklasse aus der alten Fassung, damit die Themenseiten
   weiterhin korrekt aussehen. */
.section-alt { background: var(--charcoal-2); }

.section-inner {
  position: relative;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Etwas breiter als der Fließtext darunter: Die Überschriften stehen
   komplett in Versalien und brauchen die Zeile, sonst rutscht ein
   einzelnes Wort um. Die Absätze bleiben über ihre eigene Maximalbreite
   trotzdem schmal und gut lesbar. */
.section-head {
  max-width: 52rem;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.section-head p {
  color: var(--fg-muted);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3rem);
  max-width: 34rem;
}
.section-head-center {
  margin-inline: auto;
  text-align: center;
}
.section-head-center .eyebrow { justify-content: center; }
.section-head-center p { margin-inline: auto; }

/* Dünne Trennlinie, die beim Hereinscrollen von links durchläuft.
   Ohne JavaScript liegt sie einfach da. */
.rule {
  height: 1px;
  background: var(--line);
}
html.js .rule[data-reveal] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-inout);
}
html.js .rule[data-reveal].is-revealed { transform: scaleX(1); }


/* ============================================================
   8. LAUFSCHRIFT UND TEXTRING
   ============================================================ */

/* Endlos laufendes Band. js/main.js dupliziert den Inhalt so oft,
   bis er die Breite füllt, und schiebt ihn per rAF weiter. Beim
   Scrollen wird die Laufschrift schneller und dreht die Richtung. */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: clamp(1.1rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  user-select: none;
}
.marquee-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* Trennzeichen zwischen den Wiederholungen */
.marquee-item .dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: 0.55;
}

/* Rotierender Textring als Blickfang beim Hauptaufruf */
.ring {
  position: relative;
  width: clamp(9rem, 15vw, 12.5rem);
  height: clamp(9rem, 15vw, 12.5rem);
  flex: none;
  display: grid;
  place-items: center;
}
.ring svg {
  width: 100%;
  height: 100%;
  animation: ring-spin 22s linear infinite;
}
.ring text {
  font-family: var(--font-body);
  font-size: 6.6px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: currentColor;
}
.ring-center {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.ring:hover .ring-center { background: var(--fg); color: var(--bg); }
.ring-center svg { width: 34%; height: auto; animation: none; }

@keyframes ring-spin { to { transform: rotate(360deg); } }


/* ============================================================
   9. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 9rem 0 clamp(2rem, 5vw, 4rem);
  overflow: clip;
  background: var(--charcoal);
}

/* Weicher Lichtschein hinter dem Portrait */
.hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -20% auto;
  width: min(70rem, 110%);
  height: 75%;
  background: radial-gradient(closest-side at 70% 60%, rgba(139, 124, 247, 0.16), transparent 72%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.hero h1 {
  position: relative;
  z-index: 3;
  margin: 0;
}

/* Das Portrait steht immer neben oder unter der Schrift, nie
   dahinter: auf schmalen Schirmen unter dem Text, ab 900px in
   einer eigenen Rasterspalte rechts. */
.hero-visual {
  position: relative;
  margin-top: clamp(1rem, 3vw, 2rem);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.hero-glow { display: none; }

.hero-portrait {
  width: min(62vw, 22rem);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
  /* Läuft nach unten weich aus, statt hart abgeschnitten zu wirken */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}

.hero-foot {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.hero-sub {
  max-width: 30rem;
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

/* Die beiden Knöpfe stehen untereinander und mittig zueinander:
   „Projekte ansehen“ sitzt genau unter „Kostenloses Erstgespräch“.
   Gleiche Breite, damit die Kanten sauber übereinanderliegen. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 21rem;
}
.hero-actions .btn { width: 100%; }

/* Scroll-Hinweis am unteren Rand */
.hero-scroll {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero-scroll svg { animation: nudge 2.2s var(--ease-inout) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.35; }
}

/* Ab 900px steht das Portrait in einer eigenen Spalte rechts neben
   der Schrift. Die Überschrift bekommt dadurch weniger Breite und
   ist eine Spur kleiner gesetzt, dafür liegt kein Buchstabe mehr
   auf dem Gesicht. */
@media (min-width: 900px) {
  .hero { padding-top: 9rem; }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 23vw, 21rem);
    grid-template-areas:
      "kicker visual"
      "titel  visual"
      "fuss   fuss";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
  }
  .hero-kicker { grid-area: kicker; align-self: start; }
  .hero h1 {
    grid-area: titel;
    font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  }
  .hero-visual {
    grid-area: visual;
    align-self: end;
    justify-content: center;
    margin: 0;
  }
  .hero-portrait { width: 100%; }
  .hero-foot {
    grid-area: fuss;
    flex-wrap: nowrap;
    align-items: center;
  }
  /* Der Fließtext gibt nach, die Knöpfe behalten ihre Breite,
     sonst bricht die Beschriftung mitten im Wort um. */
  .hero-sub { flex: 1 1 18rem; }
  .hero-actions { flex: none; }
  .hero-scroll { display: flex; flex: none; }
}

/* Tablets: das Portrait steht noch unter der Schrift, darf dort
   aber nicht die halbe Höhe fressen. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-portrait { width: min(42vw, 18rem); }
}

/* Ganz schmale Schirme: Portrait kleiner, sonst drückt es die
   Schrift aus dem Bild. */
@media (max-width: 480px) {
  .hero-portrait { width: 70vw; }
}


/* ============================================================
   10. LEISTUNGEN
   Zeilen statt Kacheln: jede Leistung ist eine breite Zeile,
   die beim Überfahren aufgeht.
   ============================================================ */

.services {
  display: grid;
  border-top: 1px solid var(--line);
}

.service {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid var(--line);
}
/* Farbiger Schleier, der beim Überfahren von links einläuft */
.service::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  z-index: -1;
  background: var(--surface);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ease-inout);
}
.service:hover::before { transform: scaleX(1); }

.service-index {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
}

.service h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
}

.service p {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  margin: 0;
}
.service > * + p { margin-top: 1em; }

.service-result {
  margin-top: 1.4rem !important;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.service-result strong { color: var(--fg); font-weight: 600; }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.service-link svg { flex: none; transition: transform 0.45s var(--ease-out); }
.service-link:hover svg { transform: translateX(6px); }

/* Ab 900px dreispaltig: Nummer, Überschrift, Text. Die drei
   Textbausteine stehen untereinander in Spalte 3, deshalb bekommt
   jeder seine eigene Zeile. Ohne die ausdrückliche Zuordnung
   würden Beschreibung und Ergebnis übereinander landen. */
@media (min-width: 900px) {
  .service {
    grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0;
  }

  /* Beim Überfahren rückt der Inhalt ein Stück nach rechts. Bewegt
     wird per transform auf den Kindern, nicht per padding auf der
     Zeile: ein animiertes padding würde das Raster mitsamt der
     riesigen Überschrift in jedem Frame neu setzen lassen, und genau
     das war als Ruckeln zu spüren. transform läuft an der
     Layout-Berechnung vorbei direkt auf der Grafikkarte. */
  .service > * { transition: transform 0.6s var(--ease-out); }
  .service:hover > * { transform: translateX(1.5rem); }

  .service-index { grid-column: 1; grid-row: 1 / -1; padding-top: 0.6rem; }
  .service h3 { grid-column: 2; grid-row: 1 / -1; }

  .service > p:not(.service-result) { grid-column: 3; grid-row: 1; margin: 0; }
  .service .service-result { grid-column: 3; grid-row: 2; }
  .service-link { grid-column: 3; grid-row: 3; }
}


/* ============================================================
   11. FÜR WEN
   ============================================================ */

.compare {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.compare-col { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.compare-col + .compare-col { border-top: 1px solid var(--line); }

.compare-col h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}
.compare-col li {
  position: relative;
  padding-left: 2.2rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
.compare-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-size: 0.9em;
}

.compare-problem li::before { content: "—"; color: var(--fg-faint); }
.compare-solution li { color: var(--fg); }
.compare-solution li::before { content: "✳"; color: var(--accent-strong); }
.compare-solution h3 .it { color: var(--accent-strong); }

@media (min-width: 860px) {
  .compare { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  .compare-col + .compare-col { border-top: 0; }
  .compare-solution { padding-left: clamp(2rem, 5vw, 5rem); border-left: 1px solid var(--line); }
}
/* Auf hellem Grund passt der Violettton nicht, dort wird es Tinte */
.section-light .compare-solution li::before,
.section-light .compare-solution h3 .it { color: var(--ink); }


/* ============================================================
   12. ABLAUF
   ============================================================ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}
.step h3 {
  grid-column: 2;
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.step p {
  grid-column: 2;
  margin: 0;
  max-width: 40rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.step-num {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--fg-faint);
  transition: color 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.step.is-active .step-num { color: var(--fg); }

/* Fortschrittslinie: liegt auf der unteren Kante der Zeile und
   füllt sich, während man scrollt (js/main.js). */
.step-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
}
.step-line-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* Nicht erreichte Schritte treten zurück, bleiben aber lesbar */
html.js .steps[data-animated] .step {
  opacity: 0.55;
  transition: opacity 0.7s var(--ease-out);
}
html.js .steps[data-animated] .step.is-active { opacity: 1; }


/* ============================================================
   13. PROJEKTE
   ============================================================ */

.case {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
.case + .case { margin-top: clamp(3rem, 7vw, 6rem); }

@media (min-width: 1000px) {
  .case { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

/* Ab 1000px klebt der Block kurz fest, damit der Vorher/Nachher-
   Wisch in Ruhe ablaufen kann. Die Hülle liefert die Scrollstrecke.
   Nur mit JavaScript und ohne reduzierte Bewegung. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  html.js .case-scrolly { min-height: 195vh; }
  html.js .case-scrolly > .case { position: sticky; top: 7rem; }
}

.case-media { display: grid; }
.case-compare { position: relative; --wipe: 1; }

.case-shot-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--charcoal);
  overflow: hidden;
}
/* Angedeutete Browserleiste */
.case-shot-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.case-shot-frame::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0.8rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--fg-faint);
  box-shadow: 0.62rem 0 0 var(--fg-faint), 1.24rem 0 0 var(--fg-faint);
  z-index: 2;
}

.case-compare-frame { aspect-ratio: 16 / 9.9; }

.case-img {
  position: absolute;
  inset: 1.7rem 0 0;
  width: 100%;
  height: calc(100% - 1.7rem);
  object-fit: cover;
  object-position: top;
}
.case-img-after { clip-path: inset(0 calc((1 - var(--wipe)) * 100%) 0 0); }

/* Die Trennlinie wird verschoben, nicht neu positioniert: transform
   läuft auf der Grafikkarte, während ein wanderndes left den Browser
   in jedem Frame zwingt, das Layout des ganzen Rahmens neu zu
   berechnen. Dafür spannt sich das Element über die volle Breite und
   die sichtbare Linie sitzt als ::before an seiner linken Kante,
   damit sich translateX(100%) auf die Rahmenbreite bezieht. */
.case-divider {
  position: absolute;
  top: 1.7rem;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateX(calc(var(--wipe) * 100%));
  will-change: transform;
}
.case-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--cream);
  box-shadow: 0 0 22px 2px rgba(245, 239, 229, 0.45);
  opacity: clamp(0, calc(min(var(--wipe), 1 - var(--wipe)) * 24), 1);
}

.case-compare-labels {
  position: absolute;
  top: 2.5rem;
  left: 0.85rem;
  right: 0.85rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}
.case-label {
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(13, 13, 17, 0.72);
  color: var(--cream-warm);
  transition: opacity 0.2s linear;
}
.case-label-before { opacity: clamp(0, calc((0.85 - var(--wipe)) * 4), 1); }
.case-label-after { opacity: clamp(0, calc((var(--wipe) - 0.15) * 4), 1); }

.case-tag {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.case-source-link {
  margin: 0.9rem 0 0;
  font-size: var(--fs-label);
  color: var(--fg-faint);
  text-align: right;
}
.case-source-link a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease-out);
}
.case-source-link a:hover { color: var(--cream-warm); }

.case-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.case-facts {
  margin: 0;
  display: grid;
  gap: 1.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.case-facts dt {
  margin-bottom: 0.45rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.case-facts dd {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.case-metrics {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.metric {
  background: var(--bg);
  padding: 1.1rem 0.85rem;
  text-align: center;
}
.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.metric-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-wrap: balance;
}
.case-metrics-note {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.case-quote {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
/* Einziger Ort, an dem die Display-Schrift klein gesetzt wird.
   Ihre Haarstriche brechen auf dunklem Grund schnell weg, deshalb
   hier ein kräftigerer Schnitt, etwas mehr Grad und offene
   Laufweite. Ohne das wird das Zitat blass und schwer lesbar. */
.case-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--fg);
}
.case-quote footer {
  margin-top: 1.2rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* ============================================================
   14. PREISE
   Die Zahlen selbst stehen im Block PREISE oben in js/main.js.
   ============================================================ */

.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .pricing { grid-template-columns: repeat(4, 1fr); }
  /* Vier Karten nebeneinander sind schmal, deshalb die Knopf-
     beschriftung eine Spur kleiner. Sonst bricht „KI-Integration
     anfragen“ als einzige zweizeilig um. */
  .pricing .btn { padding-inline: 0.9rem; font-size: 0.7rem; letter-spacing: 0.1em; }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.6s var(--ease-out);
}
.price-card:hover { background: var(--surface); }

@media (min-width: 700px) {
  .price-card + .price-card { border-left: 1px solid var(--line); }
  .price-card:nth-child(3) { border-left: 0; }
}
@media (min-width: 1100px) {
  .price-card:nth-child(3) { border-left: 1px solid var(--line); }
}

/* Hervorgehobenes Paket: nur eine Linie oben und ein Etikett,
   kein Kasten. Das passt zum reduzierten Raster. */
.price-card-featured { background: var(--surface); }
.price-card-featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.section-light .price-card-featured::before { background: var(--ink); }

.price-badge {
  display: block;
  margin-bottom: 1.5rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.section-light .price-badge { color: var(--ink); }
/* Karten ohne Etikett bekommen denselben Vorlauf, damit die
   Überschriften auf einer Linie stehen. Ab 700px übernimmt das
   Unterraster weiter unten diese Aufgabe. */
.price-card:not(.price-card-featured) .price-name { margin-top: calc(var(--fs-label) * 1.6 + 1.5rem); }

/* ----- Gleiche Höhen über alle Karten hinweg.
   Jede Karte übernimmt als Unterraster die Zeilen des Preisrasters.
   Dadurch stehen Name, Beschreibung, Preis, Liste und Knopf in allen
   Karten exakt auf einer Linie, egal wie lang der Text darüber ist.
   Ältere Browser ohne subgrid behalten das bisherige Flex-Layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .price-card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .price-badge { grid-row: 1; margin-bottom: 1.5rem; }
    .price-name  { grid-row: 2; }
    .price-for   { grid-row: 3; }
    .price-tag   { grid-row: 4; align-self: start; }
    .price-list  { grid-row: 5; }
    .price-card .btn { grid-row: 6; align-self: end; }
    /* Der Vorlauf von oben wird hier nicht mehr gebraucht: Die leere
       Etiketten-Zeile hält den Platz schon frei. */
    .price-card:not(.price-card-featured) .price-name { margin-top: 0; }
  }
}

.price-name {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.price-for {
  margin-bottom: 1.8rem;
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* „ab“ steht vor der Zahl, „einmalig“ bzw. „pro Monat“ bekommt eine
   eigene Zeile darunter. Nebeneinander stoßen die Kleinbuchstaben
   sonst an das Eurozeichen der großen Serifenschrift. */
.price-tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.price-from,
.price-once,
.price-period {
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.price-once,
.price-period { flex: 1 0 100%; }
.price-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.price-list {
  list-style: none;
  margin: 1.8rem 0 2.2rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.price-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 1px;
  background: var(--fg-faint);
}

.price-card .btn { margin-top: auto; width: 100%; }

.price-note {
  max-width: 46rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--fg-faint);
  font-size: var(--fs-small);
}


/* ============================================================
   15. ÜBER MICH
   ============================================================ */

.about {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .about { grid-template-columns: 0.9fr 1.1fr; }
}

.about-visual { display: grid; }

.about-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.about-photo picture { display: block; width: 100%; height: 100%; }

/* Platzhalter, solange noch kein echtes Foto eingesetzt ist. */
.about-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  color: var(--fg-faint);
}
.about-photo-placeholder-text {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bild fährt aus einer leichten Vergrößerung heraus, darüber zieht
   ein Vorhang nach oben weg. Beides nur mit JavaScript, sonst wäre
   das Foto ohne Reveal für immer verdeckt. */
html.js .about-photo[data-reveal] img {
  transform: scale(1.12);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
html.js .about-photo[data-reveal].is-revealed img { transform: scale(1); }

html.js .about-photo[data-reveal]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform-origin: top;
  transition: transform 1.2s var(--ease-inout);
}
html.js .about-photo[data-reveal].is-revealed::after { transform: scaleY(0); }

/* Der Reveal-Effekt sitzt hier im Bild selbst, das Element darf
   also nicht zusätzlich weggefadet werden. */
html.js .about-photo[data-reveal] { opacity: 1; transform: none; }

.about-copy .section-head { margin-bottom: 2rem; }
.about-copy p { color: var(--fg-muted); }

.about-facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.about-facts li {
  position: relative;
  padding: 1rem 0 1rem 2.2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.about-facts li::before {
  content: "✳";
  position: absolute;
  left: 0;
  top: 1rem;
  color: var(--fg-faint);
}


/* ============================================================
   16. FAQ
   Accordion auf Basis von <details>/<summary>: funktioniert ohne
   JavaScript und ist von Haus aus barrierefrei.
   ============================================================ */

.faq-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.5s var(--ease-out);
}
.faq-item[open] { background: var(--surface); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(0rem, 1.5vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  /* Wie beim Zitat: klein gesetzte Display-Schrift braucht auf
     dunklem Grund etwas mehr Fleisch und Luft, sonst franst sie aus. */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg);
  transition: opacity 0.3s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { opacity: 0.6; }

.faq-icon {
  flex: none;
  transition: transform 0.5s var(--ease-inout);
}
.faq-item[open] .faq-icon { transform: rotate(135deg); }

.faq-a {
  padding: 0 clamp(0rem, 1.5vw, 1.5rem) clamp(1.5rem, 2.4vw, 2rem);
  max-width: 52rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.5s var(--ease-inout),
                opacity 0.35s var(--ease-out),
                content-visibility 0.5s;
    transition-behavior: allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; opacity: 1; }
}


/* ============================================================
   17. KONTAKT
   ============================================================ */

.section-contact { background: var(--bg); }

/* Riesiger Aufruf über dem Formular, plus rotierender Ring */
.contact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.contact-head-copy { flex: 1 1 20rem; }

.contact-layout { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.contact-form {
  display: grid;
  gap: 1.15rem;
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* Kopf des Formulars: macht auf den ersten Blick klar, dass hier
   etwas ausgefüllt werden kann, statt es dem Fließtext-Look der
   restlichen Seite zu überlassen. */
.form-card-head {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.form-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg);
}
.form-card-icon { flex: none; color: var(--accent-strong); }
.form-card-note { margin: 0; font-size: 0.9375rem; color: var(--fg-faint); }
.form-required { color: var(--accent-strong); }

/* Die Honeypot-Falle muss unsichtbar, aber für Screenreader und
   Tastatur erreichbar bleiben, sonst tappen echte Menschen hinein. */
.form-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.form-field label {
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.form-hint { font-weight: 500; text-transform: none; letter-spacing: 0.04em; }

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.15rem 0;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
}
.form-field textarea { resize: vertical; min-height: 6.5rem; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--fg-faint); }
.form-field input:focus,
.form-field textarea:focus { outline: none; }
/* Der ganze Feldrahmen leuchtet auf, statt nur einer Unterlinie,
   damit deutlich erkennbar bleibt, welches Feld aktiv ist. */
.form-field:focus-within {
  background: var(--charcoal-2);
  border-color: var(--accent-strong);
}
.form-field:hover { border-color: var(--line-strong); }

.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.form-consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
.form-consent label {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-muted);
  cursor: pointer;
}
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }

.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 1.75rem;
}
.form-reply {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

@media (max-width: 619px) {
  .form-submit { display: grid; }
  .form-submit .btn { justify-self: stretch; }
}

.form-status {
  min-height: 1.5em;
  margin: 1rem 0 0;
  font-size: var(--fs-small);
  color: var(--fg);
}
.form-status.is-erfolg,
.form-status.is-fehler,
.form-status.is-hinweis {
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  line-height: 1.6;
}

/* Direkter Draht neben dem Formular */
.contact-direct { margin: 0; text-align: left; max-width: none; }
.contact-direct-lead {
  margin-bottom: 1.5rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.contact-direct-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
/* Einrücken per transform statt padding, siehe .service:hover */
.contact-card > * { transition: transform 0.5s var(--ease-out); }
.contact-card:hover > * { transform: translateX(0.9rem); }

.contact-card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg);
}
.contact-card-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.contact-card-value {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.0625rem;
  font-weight: 500;
}

.contact-hours {
  margin-top: 1.75rem;
  color: var(--fg-faint);
  font-size: 0.9375rem;
}


/* ============================================================
   18. FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--cream-warm);
  padding: clamp(3rem, 7vw, 5rem) 0 2rem;
  --fg: var(--cream-warm);
  --fg-muted: rgba(233, 223, 206, 0.9);
  --fg-faint: rgba(233, 223, 206, 0.74);
  --line: rgba(233, 223, 206, 0.13);
  --line-strong: rgba(233, 223, 206, 0.26);
  --bg: var(--ink);
}

/* Riesiger Abschluss-Schriftzug über den Spalten */
.footer-shout {
  max-width: var(--inner-max);
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
  padding: 0 var(--gutter);
}
.footer-shout .display { font-size: clamp(2.1rem, 6.4vw, 6.5rem); }

.footer-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 620px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .footer-inner { grid-template-columns: 1.6fr 0.85fr 0.95fr 1.1fr; }
}

.footer-brand p {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  margin-top: 1.25rem;
  max-width: 20rem;
}

.footer-heading {
  margin: 0 0 1.25rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.footer-nav ul,
.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.footer-nav a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  transition: color 0.35s var(--ease-out);
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--cream); }
.footer-contact svg { flex: none; opacity: 0.7; }

.footer-copy {
  max-width: var(--inner-max);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 1.5rem var(--gutter) 0;
  border-top: 1px solid var(--line);
  color: var(--fg-faint);
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}


/* ============================================================
   19. MOBILE CTA-LEISTE
   Ab 1120px steht die Telefonnummer im Header, darunter übernimmt
   diese Leiste. Ohne JavaScript bleibt sie komplett weg.
   ============================================================ */

.mobile-cta { display: none; }

@media (max-width: 1119px) {
  html.js .mobile-cta:not([hidden]) {
    position: fixed;
    z-index: 80;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem var(--gutter);
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
    background: rgba(13, 13, 17, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(233, 223, 206, 0.14);
    color: var(--cream-warm);
    --fg: var(--cream-warm);
    --bg: var(--ink);
    --line-strong: rgba(233, 223, 206, 0.3);
    transform: translateY(110%);
    transition: transform 0.55s var(--ease-inout);
  }
  html.js .mobile-cta.is-visible { transform: translateY(0); }

  .mobile-cta .btn { flex: 1; padding-inline: 0.6rem; }
  html.js body.has-mobile-cta { padding-bottom: 4.5rem; }
}


/* ============================================================
   20. THEMENSEITEN, 404, RECHTLICHES
   ============================================================ */

.subpage-hero {
  position: relative;
  padding: clamp(9rem, 18vw, 14rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--charcoal);
  color: var(--cream-warm);
  overflow: clip;
}
.subpage-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(60rem, 100%);
  height: 90%;
  background: radial-gradient(closest-side at 70% 50%, rgba(139, 124, 247, 0.14), transparent 72%);
  pointer-events: none;
}
.subpage-hero .section-inner { position: relative; z-index: 1; }
.subpage-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6.2vw, 5.2rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 18ch;
  margin: 0 0 1.5rem;
}
.subpage-lead {
  max-width: 38rem;
  color: var(--fg-muted);
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--fg); }

/* Fließtext-Bereich der Themenseiten */
.prose { max-width: 44rem; }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 3.5rem 0 1.2rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul {
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.prose li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
.prose li::before {
  content: "✳";
  position: absolute;
  left: 0;
  top: 0.9rem;
  color: var(--fg-faint);
}

/* ----- 404 ----- */

.error-main {
  min-height: 74vh;
  display: grid;
  place-items: center;
  padding: 10rem var(--gutter) var(--section-pad);
  text-align: center;
  background: var(--charcoal);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 20rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.05em;
  margin-bottom: 1.5rem;
}
.error-main h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.error-main p { color: var(--fg-muted); max-width: 34rem; margin-inline: auto; }
.error-links {
  list-style: none;
  margin: 3rem auto 0;
  padding: 0;
  display: grid;
  gap: 0;
  text-align: left;
  max-width: 26rem;
  width: 100%;
  border-top: 1px solid var(--line);
}
.error-links li { border-bottom: 1px solid var(--line); }
.error-links a {
  display: block;
  padding: 0.9rem 0;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: transform 0.45s var(--ease-out);
}
.error-links a:hover { transform: translateX(0.8rem); }

/* ----- Impressum und Datenschutz ----- */

.legal-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 9rem var(--gutter) var(--section-pad);
}
.legal-main h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.legal-main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 3rem;
}
.legal-main p,
.legal-main address { color: var(--fg-muted); font-style: normal; }
.legal-placeholder {
  padding: 1.35rem 1.6rem;
  border: 1px dashed var(--line-strong);
  color: var(--fg-faint);
}
.legal-back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: var(--fs-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}


/* ============================================================
   21. REVEAL-ANIMATIONEN
   Elemente mit data-reveal starten unsichtbar und faden beim
   Scrollen ein. Ohne JavaScript bleibt alles sichtbar, weil die
   Regeln nur mit .js auf <html> greifen. Animiert werden nur
   transform und opacity, das bleibt hardwarebeschleunigt.
   ============================================================ */

/* Bewusst ohne will-change: Auf der Seite stehen rund fünfzig
   dieser Elemente. Ein will-change würde für jedes davon dauerhaft
   eine eigene Grafikebene reservieren, was Speicher kostet und das
   Scrollen zäh macht. Für den kurzen Übergang legt der Browser die
   Ebene ohnehin von selbst an. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Elemente, die erst nach dem Loader starten dürfen */
html.js.is-loading [data-hero-in] { opacity: 0; }

/* Sanfter Parallax auf Bildern (js/main.js setzt --shift) */
html.js [data-parallax] {
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}


/* ============================================================
   REDUZIERTE BEWEGUNG
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   dieselbe Seite ohne Animationen: alles sofort sichtbar, kein
   Laufband, kein Ladeschirm, kein eigener Cursor.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js [data-reveal],
  html.js [data-hero-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .line > span { transform: none !important; transition: none !important; }
  html.js .rule { transform: scaleX(1) !important; }
  html.js .about-photo::after { transform: scaleY(0) !important; }
  html.js .about-photo img { transform: none !important; }

  .grain { animation: none; }
  .ring svg { animation: none; }
  .hero-scroll svg { animation: none; }
  .loader { display: none !important; }
  .cursor { display: none !important; }

  .btn, .btn::before, .btn::after, .service, .service::before,
  .service > *, .price-card, .contact-card, .contact-card > *,
  .error-links a, .faq-item, .faq-icon, .site-header,
  .nav-roll, .site-nav { transition: none !important; }
}