/* =============================================================================
   Till Hemmersbach — Webdesign Weilerswist
   Eine Datei, keine Abhängigkeiten, kein Build.
   Reihenfolge: Tokens, Reset, Basis, Bausteine, Abschnitte, Bewegung, Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Farben — dunkel ist der Standard */
  --bg:          #08090a;
  --bg-2:        #0c0e10;
  --surface:     #121517;
  --surface-2:   #171b1e;
  --line:        rgba(255, 255, 255, .10);
  --line-soft:   rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .20);
  --text:        #f3f2ef;
  --text-2:      rgba(243, 242, 239, .64);
  --text-3:      rgba(243, 242, 239, .40);
  --accent:      #a877ff;
  --accent-2:    #c6a4ff;
  --accent-ink:  #17092b;
  --accent-soft: rgba(168, 119, 255, .15);
  --accent-line: rgba(168, 119, 255, .38);

  /* Farbklaviatur. Alle sechs sind auf ähnliche Helligkeit und Sättigung
     gezogen, damit sie nebeneinander ruhig bleiben. Jeder Abschnitt bekommt
     eine davon als --hue. Orange bleibt --accent und gehört allein den
     Knöpfen, damit man immer weiß, was anklickbar ist. */
  --c-orange: #ff5a2b;
  --c-amber:  #ffb02e;
  --c-teal:   #2fd4c0;
  --c-blue:   #4a86ff;
  --c-pink:   #ff5c9d;
  --hue: var(--c-orange);

  /* Nur für die Vorher-Nachher-Demo */
  --bad:       #ff4f3d;
  --bad-soft:  rgba(255, 79, 61, .14);
  --bad-line:  rgba(255, 79, 61, .38);
  --good:      #35d07f;
  --good-soft: rgba(53, 208, 127, .16);
  --good-line: rgba(53, 208, 127, .42);
  --good-glow: rgba(53, 208, 127, .45);
  --ugly-link: #5b7fd4;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.42);
  --grain-op: .035;

  /* Schrift */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
               BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
               Inter, Roboto, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, monospace;

  /* Typo-Skala */
  --t-h1:  clamp(2.125rem, 4.4vw, 3.9rem);
  --t-h2:  clamp(1.75rem, 3.2vw, 2.85rem);
  --t-h3:  clamp(1.5rem, 2.6vw, 2.125rem);
  --t-h4:  clamp(1.125rem, 1.6vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body: 1rem;
  --t-sm:  .875rem;
  --t-xs:  .75rem;

  /* Raster */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1rem, 2.2vw, 2rem);
  --sec-y: clamp(5rem, 11vw, 9.5rem);
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Bewegung */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur:   .5s;
  --dur-2: .8s;
  --dur-3: 1.1s;
}

:root[data-theme="light"] {
  --bg:          #fbfaf7;
  --bg-2:        #f3f1eb;
  --surface:     #ffffff;
  --surface-2:   #f7f5f0;
  --line:        rgba(16, 18, 22, .12);
  --line-soft:   rgba(16, 18, 22, .07);
  --line-strong: rgba(16, 18, 22, .24);
  --text:        #13161a;
  --text-2:      rgba(19, 22, 26, .66);
  --text-3:      rgba(19, 22, 26, .44);
  --accent:      #6c43c4;
  --accent-2:    #52309e;
  --accent-ink:  #f8f5ff;
  --accent-soft: rgba(108, 67, 196, .10);
  --accent-line: rgba(108, 67, 196, .30);

  --c-orange: #dc3f13;
  --c-amber:  #b0700a;
  --c-teal:   #0d8878;
  --c-blue:   #2a5fd4;
  --c-pink:   #c22e6b;

  --bad:       #d93025;
  --bad-soft:  rgba(217, 48, 37, .10);
  --bad-line:  rgba(217, 48, 37, .34);
  --good:      #1e8e4e;
  --good-soft: rgba(30, 142, 78, .12);
  --good-line: rgba(30, 142, 78, .38);
  --good-glow: rgba(30, 142, 78, .35);
  --ugly-link: #1a0dab;
  --shadow-1: 0 1px 2px rgba(24,20,16,.06), 0 8px 24px rgba(24,20,16,.06);
  --shadow-2: 0 2px 6px rgba(24,20,16,.07), 0 24px 60px rgba(24,20,16,.10);
  --grain-op: .022;
}

/* ----------------------------------------------------------------- 2. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* clip statt hidden: verhindert seitliches Wischen, ohne aus dem Dokument
     einen Scroll-Container zu machen. Sonst bricht position: sticky. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Lange deutsche Wörter dürfen umbrechen statt seitlich rauszulaufen */
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

/* Blende für den Wechsel zwischen hell und dunkel */
.themewash {
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none; opacity: 1;
  transition: opacity .42s var(--ease);
}
.themewash.is-out { opacity: 0; }

/* Während des Wechsels laufen keine Übergänge, sonst bleiben Farben hängen */
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after {
  transition: none !important;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------ 3. HILFSKLASSEN */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.skiplink {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 650;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skiplink:focus-visible { transform: translateY(0); }

.muted { color: var(--text-2); }
/* Spamschutz-Feld unsichtbar, aber ohne es weit aus dem Bild zu schieben.
   Negative Positionen sind eine haeufige Ursache fuer seitliches Wischen. */
.hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Alle Deko-Ebenen liegen in diesem Rahmen. Er ist am Bildschirm festgemacht
   und schneidet ab, was übersteht. Ohne ihn ragte das Filmkorn seitlich raus
   und man konnte die Seite auf dem Handy nach links und rechts wischen. */
.fx {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}

/* Filmkorn, gibt der Fläche Textur */
.grain {
  position: absolute; inset: -120px; pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 8s steps(6) infinite;
  transition: opacity .45s var(--ease);
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-6%, -4%); }
  33%  { transform: translate(4%, -7%); }
  50%  { transform: translate(-5%, 6%); }
  66%  { transform: translate(7%, 3%); }
  83%  { transform: translate(-3%, -6%); }
  100% { transform: translate(0, 0); }
}


/* ------------------------------------------------------------- 4. TYPOGRAFIE */

.h2, .h3, .h4, h1, h2, h3, h4 {
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.h4 { font-size: var(--t-h4); line-height: 1.28; letter-spacing: -.02em; }

em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--t-xs);
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hue);
  margin-bottom: 1.4rem;
}
.eyebrow span {
  display: grid; place-items: center;
  min-width: 1.9rem; height: 1.55rem; padding-inline: .45rem;
  border: 1px solid color-mix(in oklab, var(--hue) 45%, transparent);
  border-radius: 100px;
  color: var(--hue);
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .06em;
}
.js .eyebrow[data-reveal] span {
  transform: scale(.5); opacity: 0;
  transition: transform .75s var(--ease-spring) .15s, opacity .4s var(--ease) .15s;
}
.js .eyebrow[data-reveal].is-in span { transform: none; opacity: 1; }

.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: var(--t-sm); font-weight: 560;
  color: var(--text-2);
  text-align: left; text-wrap: balance;
}
.badge__dot { flex: none;
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.badge__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(3.8); opacity: 0; }
  100% { transform: scale(3.8); opacity: 0; }
}

.prose p + p { margin-top: 1.15rem; }
.prose p { color: var(--text-2); font-size: var(--t-lead); line-height: 1.68; }
.prose strong, .sectionhead__lead strong { color: var(--text); font-weight: 640; }

/* ----------------------------------------------------------------- 5. BUTTON */

.btn {
  --btn-y: .78rem; --btn-x: 1.35rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: var(--btn-y) var(--btn-x);
  border-radius: 100px;
  font-weight: 620; font-size: var(--t-sm);
  letter-spacing: -.01em;
  white-space: nowrap;
  isolation: isolate;
  transition: transform .45s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .45s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }

.btn--sm { --btn-y: .55rem; --btn-x: 1.05rem; font-size: .8125rem; }
.btn--lg { --btn-y: 1.05rem; --btn-x: 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -12px var(--accent);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--accent-2), var(--accent) 55%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 40px -14px var(--accent); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--accent-line);
  background: var(--surface);
  color: var(--accent);
}

/* -------------------------------------------------------------------- 6. NAV */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  transition: transform .55s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line-soft);
}

.nav__bar {
  max-width: var(--wrap); margin-inline: auto;
  padding: .85rem max(var(--pad), env(safe-area-inset-left)) .85rem max(var(--pad), env(safe-area-inset-right));
  display: flex; align-items: center; gap: var(--gap);
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 660; letter-spacing: -.03em; font-size: 1rem;
  margin-right: auto;
}
.brand__mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--text);
}
.brand__mark svg { width: 100%; height: 100%; overflow: visible; }
/* Die Sonne geht beim Darüberfahren ein Stück weiter auf */
.brand__mark .aufgang { transition: transform .55s var(--ease); transform-origin: 50% 100%; }
.brand:hover .brand__mark .aufgang { transform: translateY(-1.1px) scale(1.06); }

.brand__text {
  font-size: 1.1875rem; font-weight: 660;
  letter-spacing: -.045em; line-height: 1;
}
.brand__o { color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: .25rem; }
.nav__links a {
  position: relative;
  padding: .5rem .8rem; border-radius: 100px;
  font-size: .875rem; font-weight: 540; color: var(--text-2);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }
.nav__links a.is-current { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.nav__progress { height: 1px; background: var(--line-soft); }
.nav__progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: transform .12s linear;
}

/* Theme-Schalter */
.themetoggle { padding: 4px; border-radius: 100px; }
.themetoggle__track {
  display: block; position: relative;
  width: 52px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.themetoggle__knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text);
  color: var(--bg);
  transition: transform .55s var(--ease-spring), background-color .4s var(--ease);
}
:root[data-theme="light"] .themetoggle__knob { transform: translateX(24px); }
.themetoggle .ico { position: absolute; width: 13px; height: 13px; transition: opacity .3s var(--ease), transform .5s var(--ease); }
.ico--sun  { opacity: 0; transform: rotate(-90deg) scale(.5); }
.ico--moon { opacity: 1; }
:root[data-theme="light"] .ico--sun  { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .ico--moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.themetoggle:hover .themetoggle__track { border-color: var(--line-strong); }

/* Burger */
.burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: 100px; border: 1px solid var(--line); }
.burger span {
  display: block; width: 17px; height: 1.6px; border-radius: 2px;
  background: var(--text);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.3px) rotate(-45deg); }

/* Mobiles Menü */
.mobilemenu {
  position: fixed; inset: 0; z-index: 190;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  display: grid; place-items: center;
  overflow-y: auto;
  opacity: 0; transition: opacity .4s var(--ease);
}
/* Wichtig: display: grid oben schlägt das hidden-Attribut des Browsers.
   Ohne diese Zeile liegt das Menü unsichtbar über der ganzen Seite und
   schluckt jeden Klick. */
.mobilemenu[hidden] { display: none; }
.mobilemenu { pointer-events: none; }
.mobilemenu.is-open { opacity: 1; pointer-events: auto; }
.mobilemenu nav { display: flex; flex-direction: column; gap: .35rem; text-align: center; padding: var(--pad); width: 100%; max-width: 420px; }
.mobilemenu a {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 630; letter-spacing: -.03em;
  padding: .5rem;
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.mobilemenu.is-open a { opacity: 1; transform: none; }
.mobilemenu a:hover { color: var(--accent); }
.mobilemenu__cta { margin-top: 1rem; color: var(--accent); }

/* ------------------------------------------------------------------- 7. HERO */

.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(6.5rem, 12vh, 8.5rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }

/* Punktfeld als Abschnittshintergrund. Schwaecher als im Hero: der Hero ist
   der Auftritt, hier ist es Textur. */
.dots {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .5;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 30%, var(--bg) 92%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.hero__inner { position: relative; }

.hero__title {
  font-size: var(--t-h1);
  font-weight: 660;
  line-height: .99;
  letter-spacing: -.042em;
  max-width: 21ch;
  margin: 1.6rem 0 0;
}
.hero__title em { color: var(--accent); position: relative; }
/* Gezeichnete Unterstreichung unter "gelernt", kommt nach den Zeilen */
.hero__title em::after {
  content: ""; position: absolute; left: .02em; right: .04em; bottom: .05em;
  height: .07em; border-radius: .1em;
  background: currentColor; opacity: .85;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) 1s;
}
.hero__title.is-in em::after { transform: scaleX(1); }

/* Beim Wegscrollen blendet sich der Hero-Inhalt aus und tritt leicht zurück.
   Rein über den Scrollfortschritt, ohne Skript. Browser ohne Unterstützung
   lassen den Hero einfach stehen. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__inner {
      animation: heroExit linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
    .hero__canvas {
      animation: heroCanvasExit linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
  }
}
@keyframes heroExit { to { opacity: 0; transform: translateY(-7vh) scale(.96); } }
@keyframes heroCanvasExit { to { opacity: 0; } }

.hero__lead {
  margin-top: 1.8rem;
  max-width: 56ch;
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--text-2);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

.stats {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.stats { position: relative; }

.stats__item { background: var(--bg); padding: 1.4rem 1.2rem 1.5rem; }
/* Kacheln kommen einzeln, deshalb waehrend des Einblendens keine Gitterluecken */
.js .stats__item[data-reveal]:not(.is-in) { background: var(--bg); }

/* Jede Kennzahl bekommt ihre eigene Farbe als Strich obendrauf */
.stats__item { position: relative; }
.stats__item::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--hue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) calc(var(--d, 0) * 85ms);
}
.stats__item.is-in::before { transform: scaleX(1); }
.stats__item:nth-child(1) { --hue: var(--accent); }
.stats__item:nth-child(2) { --hue: var(--c-teal); }
.stats__item:nth-child(3) { --hue: var(--c-blue); }
.stats__item:nth-child(4) { --hue: var(--c-amber); }
.stats__item dt { color: var(--text-3); }

/* Die Ausbildung ist das Argument der Seite, also bekommt sie mehr Gewicht */
.stats__item--lead { background: color-mix(in oklab, var(--accent) 14%, transparent); }
.stats__item--lead p { color: var(--text-2); }
.stats__item dt {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 620;
}
.stats__item dd {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 620; letter-spacing: -.04em; line-height: 1.1;
  margin: .5rem 0 .25rem;
  font-variant-numeric: tabular-nums;
}
.stats__item p { font-size: var(--t-sm); color: var(--text-3); }

.scrollcue {
  position: absolute; left: 50%; bottom: 1.75rem;
  translate: -50% 0;
  display: grid; justify-items: center; gap: .55rem;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
  transition: color .3s var(--ease), opacity .5s var(--ease);
}
.scrollcue:hover { color: var(--text); }
.scrollcue__line { width: 1px; height: 42px; background: linear-gradient(var(--line-strong), transparent); position: relative; overflow: hidden; }
.scrollcue__line::after {
  content: ""; position: absolute; inset-inline: 0; height: 14px;
  background: var(--accent);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-16px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(44px); opacity: 0; }
}

/* ---------------------------------------------------------------- 8. MARQUEE */

.marquee {
  position: relative; z-index: 2;
  border-block: 1px solid var(--line-soft);
  background: var(--bg-2);
  overflow: hidden;
  padding-block: .9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee__track span {
  font-size: .8125rem; font-weight: 560; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--text-3);
}
.marquee__track i { font-size: .5rem; font-style: normal; color: var(--accent); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- 9. ABSCHNITTE */

.section {
  position: relative; z-index: 2; isolation: isolate;
  padding-block: var(--sec-y);
}
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }

/* Jeder Abschnitt bekommt seine eigene Farbe. Zwei weiche Felder in den Ecken,
   nie hinter dem Fließtext. */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  /* Die Felder liegen bewusst INNERHALB des Abschnitts und laufen zu den
     Kanten hin aus. Lagen sie auf der Kante, sah man dort eine harte Naht,
     wo der eine Farbschleier endet und der naechste beginnt. */
  background:
    radial-gradient(58% 48% at 16% 10%, color-mix(in oklab, var(--hue) 14%, transparent), transparent 68%),
    radial-gradient(52% 44% at 88% 88%, color-mix(in oklab, var(--hue) 11%, transparent), transparent 70%);
}

#handwerk   { --hue: var(--c-amber); }
#leistungen { --hue: var(--c-teal); }
#preise     { --hue: var(--accent); }
#ablauf     { --hue: var(--c-blue); }
#ueber-mich { --hue: var(--c-pink); }
#region     { --hue: var(--c-teal); }
#anfrage    { --hue: var(--accent); }

.sectionhead { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sectionhead__lead { margin-top: 1.35rem; font-size: var(--t-lead); color: var(--text-2); line-height: 1.66; }
.sectionhead__lead + .sectionhead__lead { margin-top: .9rem; }

/* -------------------------------------------------------- 10. PROOF (BEWEIS) */

.proof {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  box-shadow: var(--shadow-1);
}
/* Waechst beim Hereinscrollen auf volle Groesse, scroll-gekoppelt */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .proof, .price {
      animation: settleIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}
@keyframes settleIn { from { scale: .94; } to { scale: 1; } }
.proof__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.proof__head p { font-size: var(--t-sm); margin-top: .4rem; max-width: 46ch; }

.switch {
  position: relative; display: inline-flex; padding: 4px;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg);
}
.switch__btn {
  position: relative; z-index: 2;
  padding: .5rem 1rem; border-radius: 100px;
  font-size: .8125rem; font-weight: 600; color: var(--text-3);
  transition: color .35s var(--ease);
  white-space: nowrap;
}
.switch__btn.is-active { color: var(--accent-ink); }
.switch__pill {
  position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px;
  width: var(--pill-w, 50%);
  translate: var(--pill-x, 0) 0;
  border-radius: 100px; background: var(--accent);
  transition: translate .55s var(--ease-spring), width .55s var(--ease-spring);
}

.proof__stage { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }

.mock {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .28s var(--ease);
}
.mock__bar { display: flex; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }

/* ---------- Zustand A: schnell zusammengeklickt.
   Zwei Schriften, die sich beißen, alles gleich groß, Grau auf Grau,
   eckige Kästen und ein Inhalt, der seitlich aus dem Bild läuft. */

.mock__body {
  padding: 14px 12px 12px;
  overflow: hidden;
  font-family: "Times New Roman", Times, serif;
}
.mock__kicker {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.2;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3); margin-bottom: 3px;
  transition: color .25s var(--ease);
}
.mock__title {
  font-family: "Times New Roman", Times, serif;
  font-style: normal; font-weight: 700;
  font-size: 15px; line-height: 1.15; letter-spacing: 0;
  text-decoration: underline;
  color: var(--text-3); margin-bottom: 3px;
  transition: color .25s var(--ease);
}
.mock__text {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px; line-height: 1.15; color: var(--text-3);
  text-align: justify; max-width: none; margin-bottom: 10px;
  transition: color .25s var(--ease);
}
.mock__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mock__btn {
  display: inline-block; padding: 3px 9px; border-radius: 0;
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--line-strong);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; font-weight: 400; line-height: 1.5;
  box-shadow: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.mock__link {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; color: var(--ugly-link); text-decoration: underline;
  transition: color .25s var(--ease);
}
.mock__grid {
  display: flex; gap: 4px; margin-top: 10px;
  min-width: 122%;
}
.mock__grid i {
  flex: 1; height: 42px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.mock__grid i:nth-child(2) { height: 60px; }
.mock__grid i:nth-child(3) { height: 30px; }

/* Angedeuteter Scrollbalken: die Seite passt nicht auf den Bildschirm */
.mock__scroll {
  height: 9px; margin-top: 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  overflow: hidden;
}
.mock__scroll i { display: block; height: 100%; width: 64%; background: var(--line-strong); }

/* ---------- Zustand B: gestaltet ---------- */

/* Der ganze Vergleich faerbt sich mit: rot, solange es unuebersichtlich ist,
   gruen, sobald es sitzt. Dieselbe Sprache wie Kreuz und Haken daneben,
   damit man den Zustand auch ohne Lesen erkennt. */
[data-state="raw"] .mock {
  border-color: color-mix(in oklab, var(--bad) 50%, transparent);
  box-shadow: 0 20px 60px -32px var(--bad);
}
[data-state="craft"] .mock {
  border-color: color-mix(in oklab, var(--good) 55%, transparent);
  box-shadow: 0 20px 60px -30px var(--good);
}
[data-state="raw"] .proof   { border-color: color-mix(in oklab, var(--bad) 28%, var(--line)); }
[data-state="craft"] .proof { border-color: color-mix(in oklab, var(--good) 32%, var(--line)); }

[data-state="raw"] .switch   { border-color: color-mix(in oklab, var(--bad) 42%, transparent); }
[data-state="craft"] .switch { border-color: color-mix(in oklab, var(--good) 46%, transparent); }
[data-state="raw"] .switch__pill   { background: var(--bad); }
[data-state="craft"] .switch__pill { background: var(--good); }
[data-state="raw"] .switch__btn.is-active   { color: #fff; }
[data-state="craft"] .switch__btn.is-active { color: #04231a; }

[data-state="raw"] .proof__notes li   { border-color: color-mix(in oklab, var(--bad) 22%, var(--line-soft)); }
[data-state="craft"] .proof__notes li { border-color: color-mix(in oklab, var(--good) 26%, var(--line-soft)); }
[data-state="craft"] .mock__body { padding: 2.25rem 2rem 2rem; font-family: var(--font-sans); }
[data-state="craft"] .mock__kicker {
  font-family: var(--font-sans);
  font-size: .6875rem; font-weight: 660; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .85rem;
}
[data-state="craft"] .mock__title {
  font-family: var(--font-sans); font-weight: 660;
  font-size: 1.75rem; line-height: 1.08; letter-spacing: -.035em;
  text-decoration: none;
  color: var(--text); margin-bottom: .75rem;
}
[data-state="craft"] .mock__text {
  font-family: var(--font-sans);
  font-size: .9375rem; line-height: 1.62; color: var(--text-2);
  text-align: left; max-width: 34ch; margin-bottom: 1.6rem;
}
[data-state="craft"] .mock__row { gap: 1.25rem; }
[data-state="craft"] .mock__btn {
  font-family: var(--font-sans);
  padding: .7rem 1.25rem; border-radius: 100px; font-size: .875rem;
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 620;
  box-shadow: 0 10px 30px -12px var(--accent);
}
[data-state="craft"] .mock__link {
  font-family: var(--font-sans);
  font-size: .875rem; color: var(--text-2); text-decoration: none; font-weight: 560;
}
[data-state="craft"] .mock__grid { gap: 12px; margin-top: 2rem; min-width: 100%; }
[data-state="craft"] .mock__grid i,
[data-state="craft"] .mock__grid i:nth-child(2),
[data-state="craft"] .mock__grid i:nth-child(3) {
  height: 62px; border-radius: 10px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft);
}
[data-state="craft"] .mock__scroll { opacity: 0; height: 0; margin-top: 0; border-width: 0; }

/* ---------- Die Prüfliste daneben ---------- */

.proof__notes { display: grid; gap: .5rem; }
.proof__notes li {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: .8rem; row-gap: .15rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg);
}
.proof__notes b { font-size: .8125rem; font-weight: 640; }
.proof__notes span:not(.mark) { font-size: .8125rem; color: var(--text-3); line-height: 1.5; }

/* Rotes Kreuz, das beim Umschalten zum grünen Haken wird. Versetzt,
   damit die fünf Punkte nacheinander umspringen. */
.mark {
  grid-row: 1 / 3; align-self: start;
  position: relative; display: grid; place-items: center;
  width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%;
  background: var(--bad-soft);
  box-shadow: 0 0 0 1px var(--bad-line);
  transition: background-color .28s var(--ease);
}
.mark svg {
  position: absolute; width: 15px; height: 15px;
  transition: opacity .25s var(--ease), transform .35s var(--ease-spring);
}
.mark__x { color: var(--bad); }
.mark__ok { color: var(--good); opacity: 0; transform: scale(.3) rotate(-35deg); }

[data-state="craft"] .mark {
  background: var(--good-soft);
  box-shadow: 0 0 0 1px var(--good-line), 0 0 20px 2px var(--good-glow);
}
[data-state="craft"] .mark__x { opacity: 0; transform: scale(.3) rotate(35deg); }
[data-state="craft"] .mark__ok { opacity: 1; transform: none; }

/* -------------------------------------------------------------- 11. KARTEN */

.cards { display: grid; gap: var(--gap); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--hue) 16%, transparent), transparent 65%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.card:hover { border-color: color-mix(in oklab, var(--hue) 45%, transparent); box-shadow: var(--shadow-2); }
.card:hover::before { opacity: 1; }
.card__num {
  display: block; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .1em; color: var(--hue); margin-bottom: 1.25rem;
}
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .9375rem; color: var(--text-2); line-height: 1.62; }

/* --------------------------------------------------------- 12. LEISTUNGEN */

.services { border-top: 1px solid var(--line); }
.service {
  position: relative;
  border-bottom: 1px solid var(--line);
}
/* Farbige Kante links, faehrt beim Aufklappen aus */
.service::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--hue);
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease);
}
.service.is-open::before { transform: scaleY(1); }

.service__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  text-align: left;
  transition: padding-inline .5s var(--ease), color .35s var(--ease);
}
.service__head:hover { padding-inline: .75rem; }
.service__num {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--text-3); transition: color .35s var(--ease);
}
.service__title {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 620; letter-spacing: -.032em; line-height: 1.1;
  transition: color .35s var(--ease);
}
.service__tags { font-size: var(--t-sm); color: var(--text-3); text-align: right; }
.service__icon { position: relative; display: block; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .5s var(--ease); }
.service__icon i {
  position: absolute; inset: 50% auto auto 50%;
  width: 12px; height: 1.6px; border-radius: 2px; background: var(--text);
  translate: -50% -50%;
  transition: transform .5s var(--ease-spring), background-color .4s var(--ease);
}
.service__icon i:last-child { transform: rotate(90deg); }

.service__head:hover .service__num,
.service__head[aria-expanded="true"] .service__num { color: var(--hue); }
.service__head:hover .service__icon { border-color: color-mix(in oklab, var(--hue) 50%, transparent); transform: rotate(90deg); }
.service__head[aria-expanded="true"] .service__icon { background: var(--hue); border-color: var(--hue); }
.service__head[aria-expanded="true"] .service__icon i { background: var(--bg); }
.service__head[aria-expanded="true"] .service__icon i:last-child { transform: rotate(0deg); }

/* Die Hoehe setzt das Skript in Pixeln, weil sich height von 0 auf auto
   nicht zuverlaessig animieren laesst. Ohne Skript steht alles offen da. */
.service__panel { overflow: hidden; }
.js .service__panel {
  height: 0;
  transition: height .55s var(--ease);
}
.service__panelinner { padding-bottom: 2rem; }
.js .service__panelinner > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s;
}
.js .service.is-open .service__panelinner > * {
  opacity: 1; transform: none;
}
.js .service__panelinner .ticks li {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.js .service.is-open .service__panelinner .ticks li { opacity: 1; transform: none; }
.js .service.is-open .ticks li:nth-child(1) { transition-delay: .18s; }
.js .service.is-open .ticks li:nth-child(2) { transition-delay: .25s; }
.js .service.is-open .ticks li:nth-child(3) { transition-delay: .32s; }
.js .service.is-open .ticks li:nth-child(4) { transition-delay: .39s; }
.js .service.is-open .ticks li:nth-child(5) { transition-delay: .46s; }
.service__panelinner p {
  max-width: 62ch; color: var(--text-2); font-size: var(--t-lead);
  padding-bottom: 1rem;
}

.ticks { display: grid; gap: .6rem; max-width: 62ch; }
.ticks li {
  position: relative; padding-left: 1.75rem;
  font-size: .9375rem; color: var(--text-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--hue); border-bottom: 1.8px solid var(--hue);
  transform: rotate(-45deg);
}

.services__foot { margin-top: 2rem; color: var(--text-3); font-size: var(--t-sm); }
.services__foot a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }

/* --------------------------------------------------------------- 13. PREISE */

.prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.price {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.price:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-4px); }
/* Die Zahl steigt nach dem Kartenrahmen aus der Karte hoch */
.js .price[data-reveal] .price__value {
  opacity: 0; transform: translateY(.4em);
  transition: opacity .7s var(--ease) .3s, transform .85s var(--ease) .3s;
}
.js .price[data-reveal].is-in .price__value { opacity: 1; transform: none; }

/* Die Empfehlung bekommt mehr Gewicht als die günstigere Variante */
.price--lead {
  border-color: var(--accent-line);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 45%),
    var(--surface);
}

.price__kicker {
  font-size: var(--t-xs); font-weight: 620; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: .9rem;
}
.price--lead .price__kicker { color: var(--accent); }
.price__kicker i { font-style: normal; opacity: .7; letter-spacing: .08em; }

.price__name {
  font-size: var(--t-h4); font-weight: 640;
  letter-spacing: -.025em; line-height: 1.2;
  margin-bottom: .5rem;
}

.price__value {
  display: flex; align-items: baseline;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 660; letter-spacing: -.045em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.price__plus {
  font-size: .8125rem; color: var(--text-3);
  margin-bottom: 1.3rem;
}
.price--lead .price__plus { color: var(--text-2); }
.price__value span { font-size: .55em; font-weight: 600; }
.price__value i {
  font-style: normal; font-size: .3em; font-weight: 560;
  letter-spacing: -.005em; color: var(--text-3);
  margin-left: .4rem; align-self: center;
}

.price__for { font-size: .9375rem; color: var(--text-2); line-height: 1.62; margin-bottom: 1.4rem; }

.price .ticks { margin-bottom: 1.6rem; }
.price .ticks li { font-size: .875rem; }
.price .btn { margin-top: auto; }

.prices--monat .price__kicker { color: var(--hue); }
.price--sm { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.price--sm .price__name { font-size: 1.0625rem; }
.price--sm .price__value { font-size: clamp(1.625rem, 2.6vw, 2rem); margin-bottom: .9rem; }
.price--sm .ticks { margin-bottom: 0; }

.prices__head { margin: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem; max-width: 64ch; }
.prices__head h3 {
  font-size: var(--t-h4); font-weight: 620;
  letter-spacing: -.025em; margin-bottom: .55rem;
}
.prices__head p { font-size: .9375rem; color: var(--text-2); line-height: 1.62; }

.pricenote {
  margin-top: var(--gap);
  /* auto-fit statt fester Spaltenzahl: der Block fuellt sich selbst aus,
     egal ob zwei oder drei Absaetze drin stehen. Bei fester 3 blieb bei
     zwei Absaetzen die dritte Spalte leer und der zweite sass mittig. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.1rem, 2.4vw, 2.25rem);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.pricenote p { font-size: .875rem; color: var(--text-3); line-height: 1.62; }
.pricenote b { display: block; color: var(--hue); font-weight: 640; margin-bottom: .3rem; }

/* ------------------------------------------------------------- 14. ABLAUF */

.steps { position: relative; padding-left: clamp(2.25rem, 5vw, 4rem); }
.steps__rail {
  position: absolute; left: clamp(.6rem, 1.6vw, 1.35rem); top: .5rem; bottom: 3rem;
  width: 2px; background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.steps__rail i {
  display: block; width: 100%; height: 100%;
  transform: scaleY(0); transform-origin: top;
  background: linear-gradient(180deg,
    var(--c-orange), var(--c-amber) 25%, var(--c-teal) 50%,
    var(--c-blue) 75%, var(--c-pink));
  transition: transform .2s linear;
}
.steps__list { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); }

.step { position: relative; }
.step__dot {
  position: absolute;
  left: calc(clamp(2.25rem, 5vw, 4rem) * -1 + clamp(.6rem, 1.6vw, 1.35rem) - 5px);
  top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease-spring);
}
.step:nth-child(1) { --hue: var(--c-orange); }
.step:nth-child(2) { --hue: var(--c-amber); }
.step:nth-child(3) { --hue: var(--c-teal); }
.step:nth-child(4) { --hue: var(--c-blue); }
.step:nth-child(5) { --hue: var(--c-pink); }
.step.is-in .step__dot { background: var(--hue); border-color: var(--hue); transform: scale(1.15); }
.step__num {
  display: block; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .1em; color: var(--hue); margin-bottom: .55rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--text-2); max-width: 60ch; font-size: .9375rem; line-height: 1.66; }

/* ----------------------------------------------------------- 15. ÜBER MICH */

.about { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about__media { position: sticky; top: 110px; }
.about__text .h2 { margin-bottom: 1.25rem; }

.portrait {
  position: relative; isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  filter: contrast(1.05);
  transition: transform 1.4s var(--ease), filter .6s var(--ease);
}
/* Im dunklen Design darf das Bild nicht als heller Block stehen */
:root[data-theme="dark"] .portrait img { filter: contrast(1.08) brightness(.82); }
.portrait:hover img { transform: scale(1.03); }

/* Warme Tönung, damit das Graustufenfoto in der Farbwelt der Seite liegt */
.portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(155deg, var(--accent) 0%, transparent 58%);
  mix-blend-mode: soft-light;
  opacity: .6;
  pointer-events: none;
}
/* Nach unten in den Seitenhintergrund auslaufen lassen */
.portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, transparent 42%, var(--bg) 100%);
  opacity: .8;
  pointer-events: none;
}

.portrait__badge {
  position: absolute; z-index: 4;
  left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  display: grid; gap: .1rem;
  padding: .85rem 1.1rem; border-radius: var(--r);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
}
.portrait__badge b { font-size: .875rem; font-weight: 640; letter-spacing: -.015em; }
.portrait__badge span { font-size: var(--t-xs); color: var(--hue); letter-spacing: .1em; text-transform: uppercase; font-weight: 620; }

.facts { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); margin-top: 2.25rem; }
.facts li { background: var(--bg); display: grid; grid-template-columns: 180px 1fr; gap: 1rem; padding: .9rem .25rem; }
.facts b { font-size: var(--t-sm); font-weight: 620; color: var(--hue); letter-spacing: .04em; }
.facts span { font-size: var(--t-sm); color: var(--text-2); }

.quote {
  margin-top: 2.25rem; padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
.quote p {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.42;
  letter-spacing: -.015em; color: var(--text);
  text-wrap: balance;
}

/* --------------------------------------------------------------- 16. REGION */

.region { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.region__item {
  background: var(--bg-2); padding: 1.15rem 1.25rem;
  display: grid; gap: .15rem;
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.region__item:hover { background: var(--surface); }
.region__item b { font-size: .9375rem; font-weight: 620; letter-spacing: -.02em; }
.region__item span { font-size: var(--t-xs); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; transition: color .3s var(--ease); }
.region__item:hover span { color: var(--accent); }
.region__item b { position: relative; padding-left: 1rem; }
.region__item b::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--hue);
  transition: transform .45s var(--ease-spring), border-radius .45s var(--ease);
}
.region__item:hover b::before { transform: scale(1.35) rotate(45deg); border-radius: 1px; }
.region__item span { padding-left: 1rem; }
.region__item:hover { background: color-mix(in oklab, var(--hue) 10%, var(--surface)); }
.region__item--home { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.region__item--home b { color: var(--accent-2); }
.region__item--home span { color: var(--accent-2); }
.region__item--home b::before { background: var(--accent-2); }

/* Reihum durch die Schmuckfarben, damit die Liste wie eine Streuung ueber
   die Karte wirkt statt wie eine Aufzaehlung in einer Farbe. */
.region__item:nth-child(5n+2) b::before { background: var(--c-teal); }
.region__item:nth-child(5n+3) b::before { background: var(--c-blue); }
.region__item:nth-child(5n+4) b::before { background: var(--c-amber); }
.region__item:nth-child(5n+5) b::before { background: var(--c-pink); }
.region__item:nth-child(5n+6) b::before { background: var(--c-orange); }
.region__note { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--text-3); }

/* ------------------------------------------------------------ 18. CTA / FORM */

/* clip statt hidden, damit position: sticky im Formularbereich weiter geht */
.section--cta { background: var(--bg-2); border-top: 1px solid var(--line-soft); overflow: clip; }
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cta__intro { position: sticky; top: 110px; }

.ctafacts { display: grid; gap: .85rem; margin-top: 2rem; }
.ctafacts li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; align-items: baseline; }
.ctafacts b { font-size: var(--t-sm); color: var(--hue); font-weight: 640; }
.ctafacts span { font-size: var(--t-sm); color: var(--text-2); }

.cta__direct { margin-top: 2rem; font-size: var(--t-sm); color: var(--text-3); }
.cta__direct a { color: var(--text); border-bottom: 1px solid var(--accent-line); transition: color .3s var(--ease); }
.cta__direct a:hover { color: var(--accent); }

.form {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  display: grid; gap: 1.1rem;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* Rasterfelder duerfen nicht ihre Mindestbreite durchsetzen. Ohne min-width: 0
   sprengen Eingabefelder auf schmalen Bildschirmen die Formularkarte. */
.form, .form__row, .field, .field--area, .chipsel { min-width: 0; }
.field input, .field textarea { min-width: 0; max-width: 100%; }

.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  padding: 1.45rem .95rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg);
  font-size: .9375rem;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.field label {
  position: absolute; left: .95rem; top: 1rem;
  font-size: .9375rem; color: var(--text-3);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.field label i { font-style: normal; opacity: .7; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-.62rem) scale(.76);
  color: var(--text-2);
}
.field input:focus + label, .field textarea:focus + label { color: var(--accent); }
.field.has-err input, .field.has-err textarea { border-color: #e0483c; }
.field__err { display: block; font-size: var(--t-xs); color: #ff7a6f; margin-top: .35rem; min-height: 0; }
:root[data-theme="light"] .field__err { color: #c0392b; }

.chipsel { border: 0; }
.chipsel legend { font-size: var(--t-sm); color: var(--text-2); margin-bottom: .7rem; }
.chipsel legend i { font-style: normal; color: var(--text-3); }
.chipsel__list { display: flex; flex-wrap: wrap; gap: .45rem; }
.chipsel label { cursor: pointer; }
.chipsel input { position: absolute; opacity: 0; width: 0; height: 0; }
.chipsel span {
  display: inline-block; padding: .45rem .9rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: .8125rem; color: var(--text-2);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chipsel label:hover span { border-color: var(--line-strong); }
.chipsel input:checked + span {
  background: color-mix(in oklab, var(--hue) 22%, transparent);
  border-color: var(--hue); color: var(--hue); font-weight: 620;
}
.chipsel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--bg);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.check__box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.5); transition: opacity .3s var(--ease), transform .35s var(--ease-spring); color: var(--accent-ink); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.check__text { font-size: .8125rem; color: var(--text-2); line-height: 1.55; }
.check__text a { color: var(--text); border-bottom: 1px solid var(--accent-line); }
.form.has-dsgvo-err .check__box { border-color: #e0483c; }

.form__note { font-size: var(--t-xs); color: var(--text-3); text-align: center; }

/* Wichtig: display: grid wuerde das hidden-Attribut ueberstimmen. Ohne diese
   Zeile stuende die Erfolgsmeldung von Anfang an auf der Seite. */
.form__ok[hidden] { display: none; }
.form__ok {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 1.25rem; border-radius: var(--r);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  animation: okin .6s var(--ease) both;
}
@keyframes okin { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.form__okmark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.form__okmark svg { width: 17px; height: 17px; }
.form__ok b { display: block; margin-bottom: .3rem; }
.form__ok p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: .75rem; }
.form__ok a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
/* Der Kopier-Knopf darf umbrechen, sonst zwingt er dem Formular auf schmalen
   Bildschirmen seine Breite auf. */
.form__ok .btn { white-space: normal; text-align: center; }

/* ---------------------------------------------------------------- 19. FOOTER */

.footer {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--bg);
}
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--line);
}
.footer__top { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(2rem, 5vw, 4rem); padding-bottom: 3rem; }
.brand--footer { margin: 0 0 1rem; }
.footer__brand p { font-size: var(--t-sm); color: var(--text-3); max-width: 42ch; line-height: 1.65; }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.footer__nav h2 { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: .9rem; font-weight: 620; }
.footer__nav a { display: block; font-size: var(--t-sm); color: var(--text-2); padding: .28rem 0; transition: color .3s var(--ease), transform .3s var(--ease); }
.footer__nav a:hover { color: var(--accent); transform: translateX(3px); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); }
.footer__bottom p { font-size: var(--t-xs); color: var(--text-3); }
.footer__made { font-family: var(--font-serif); font-style: italic; }

/* ------------------------------------------------------------- 20. BEWEGUNG */

/* Zeilenweise Enthüllung für Überschriften mit [data-split] */
.split { display: block; }
.split__line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split__inner {
  display: block;
  transform: translateY(105%) rotate(2.2deg);
  opacity: 0;
  transition:
    transform 1.05s var(--ease) calc(var(--l) * 75ms),
    opacity .8s var(--ease) calc(var(--l) * 75ms);
}
.is-in .split__inner, .split.is-in .split__inner { transform: none; opacity: 1; }

/* Allgemeines Einblenden */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--ease) calc(var(--d, 0) * 85ms),
    transform .9s var(--ease) calc(var(--d, 0) * 85ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 3D-Neigung bei Karten */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* Nutzer, die weniger Bewegung wollen, bekommen weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .split__inner, .price__value, .ticks li, .eyebrow span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .grain, .hero__canvas, .dots { display: none; }
  .marquee__track { animation: none; }
  .hero__inner, .proof, .price { animation: none !important; }
}

/* ------------------------------------------------------------ 21. RESPONSIVE */

@media (max-width: 1080px) {
  .nav__links a { padding-inline: .55rem; }
  .cards--3 { grid-template-columns: 1fr 1fr; }
  .cards--3 .card:last-child { grid-column: span 2; }
  .region { grid-template-columns: repeat(3, 1fr); }
  .about { grid-template-columns: 1fr; }
  .about__media { position: static; max-width: 380px; }
  .cta { grid-template-columns: 1fr; }
  .cta__intro { position: static; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 78px; }
  .prices { grid-template-columns: 1fr; }
  .pricenote { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .burger { display: grid; }
  .proof__stage { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --sec-y: clamp(4rem, 12vw, 6rem); }
  .hero { min-height: auto; padding-top: 8rem; }
  .hero__title { max-width: none; }
  .cards--3 { grid-template-columns: 1fr; }
  .cards--3 .card:last-child { grid-column: auto; }
  .region { grid-template-columns: repeat(2, 1fr); }
  .service__head { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .service__tags { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: .15rem; }
  .ctafacts li { grid-template-columns: 1fr; gap: .1rem; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .brand__text { font-size: 1.0625rem; }
  .scrollcue { display: none; }
  /* Unter 720 px ist der Scroll-Hinweis ausgeblendet, dann braucht der Hero
     dort auch kein Polster mehr. Sonst steht da nur ein Loch. */
  .hero { padding-top: 5.5rem; padding-bottom: 2.25rem; }
  /* iOS zoomt in Felder unter 16 px hinein. */
  .field input, .field textarea { font-size: 16px; }
  .field label { font-size: 16px; }
  .chipsel span { padding: .6rem 1rem; font-size: .875rem; }
  .stats__item { padding: 1.1rem 1rem 1.2rem; }
  .stats__item dd { font-size: 1.625rem; }
}

@media (max-width: 460px) {
  .region__item { padding: .95rem 1rem; }
  .switch { width: 100%; }
  .switch__btn { flex: 1; }
  .proof__head { align-items: stretch; }
}

/* --------------------------------------------------- 22. RECHTLICHE SEITEN */

.legal { padding-block: clamp(8rem, 16vh, 11rem) var(--sec-y); position: relative; z-index: 2; }
.legal__back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); color: var(--text-3);
  margin-bottom: 2rem;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.legal__back:hover { color: var(--accent); gap: .75rem; }
.legal h1 { font-size: var(--t-h2); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: var(--t-h4); margin: 2.5rem 0 .75rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line-soft);
}
.legal h3 { font-size: 1rem; font-weight: 640; margin: 1.5rem 0 .5rem; }
.legal p, .legal li { color: var(--text-2); font-size: .9375rem; line-height: 1.72; max-width: 74ch; }
.legal p + p { margin-top: .8rem; }
.legal ul { margin: .8rem 0 0; display: grid; gap: .45rem; }
.legal ul li { position: relative; padding-left: 1.25rem; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legal a { color: var(--text); border-bottom: 1px solid var(--accent-line); }
.legal a:hover { color: var(--accent); }
.legal address { font-style: normal; }
.legal .todo {
  display: block; padding: 1rem 1.15rem; margin: 1rem 0;
  border: 1px dashed var(--accent-line); border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: var(--t-sm); color: var(--text-2);
}
.legal .todo b { color: var(--accent); }

/* Auf schmalen Geräten reicht Burger und Theme-Schalter.
   Der Anfrage-Knopf steht im geöffneten Menü. */
@media (max-width: 620px) {
  .nav__actions .btn { display: none; }
  .nav__bar { gap: .5rem; }
}
@media (max-width: 342px) {
  .brand__text { display: none; }
  .stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ 23. DRUCK */

@media print {
  .nav, .grain, .hero__canvas, .dots, .hero__vignette, .marquee, .scrollcue,
  .mobilemenu, .themewash, .nav__progress, .form, .switch, .cta__direct { display: none !important; }
  :root, :root[data-theme="light"] {
    --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #f4f4f4;
    --text: #000; --text-2: #333; --text-3: #555;
    --line: #ccc; --line-soft: #ddd; --line-strong: #aaa;
    --accent: #c43a12; --accent-soft: transparent;
  }
  body { font-size: 11pt; }
  .hero { min-height: auto; padding-top: 2rem; }
  .hero__inner, .proof, .price { animation: none !important; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .js [data-reveal], .split__inner, .price__value, .ticks li, .eyebrow span { opacity: 1 !important; transform: none !important; }
  .js [data-split]:not(.split) { visibility: visible; }
  .js .service__panel { height: auto !important; }
  .js .service__panelinner > *, .js .service__panelinner .ticks li { opacity: 1 !important; transform: none !important; }
  .portrait::before, .portrait::after { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* Überschriften bleiben unsichtbar, bis das Skript sie in Zeilen zerlegt hat.
   Der Platz bleibt reserviert, deshalb springt nichts. Ohne Skript greift
   die Regel nicht und die Überschrift steht ganz normal da. */
.js [data-split]:not(.split) { visibility: hidden; }


/* ---------------------------------------------- 24. FARBE IM HINTERGRUND */

/* Statt gezeichneter Formen traegt der Hintergrund die Farbe. Zwei weiche
   Felder auf der rechten Seite, dort wo kein Text steht. Sie liegen ueber
   der Vignette, damit sie nicht abgedunkelt werden. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 52% at 78% 62%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 74%),
    radial-gradient(44% 44% at 94% 14%, color-mix(in oklab, var(--c-pink) 9%, transparent), transparent 76%);
}

/* --------------------------------------------------- 25. ANFRAGE AM RAND */

/* Auf dem Handy bleibt der Anfrage-Knopf immer erreichbar. Er kommt, sobald
   der Hero durch ist, und geht wieder, sobald das Formular im Bild ist. */
.stickycta { display: none; }

@media (max-width: 900px) {
  .stickycta {
    position: fixed; z-index: 150;
    left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 54px; padding: .9rem 1.4rem;
    border-radius: 100px;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 640; font-size: 1rem; letter-spacing: -.01em;
    box-shadow:
      0 10px 34px -8px color-mix(in oklab, var(--accent) 75%, transparent),
      0 2px 12px rgba(0, 0, 0, .4);
    transform: translateY(160%);
    opacity: 0; pointer-events: none;
    transition: transform .6s var(--ease), opacity .4s var(--ease);
  }
  .stickycta.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .stickycta svg { width: 16px; height: 16px; flex: none; }
  .stickycta:active { transform: scale(.97); }
}

/* ------------------------------------------------------ 26. NACHTRAEGE */

@media (prefers-reduced-motion: reduce) {
}

@media print {
  .stickycta, .fx { display: none !important; }
  .section::before { display: none; }
}


/* ------------------------------------------------ 27. BILDLAUFLEISTE */

html { scrollbar-color: color-mix(in oklab, var(--accent) 70%, var(--line-strong)) var(--bg-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  border-radius: 10px; border: 3px solid var(--bg-2);
  background: var(--line-strong);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ------------------------------------- 28. ZWEITE KOMPOSITION, ANFRAGE */

/* Spiegelbild zum Hero: laeuft ueber die linke und untere Kante hinaus,
   damit die Seite oben und unten von derselben Formensprache gehalten wird. */