/* =====================================================================
   bepromoted · Redesign „Glas und Relief" (19.09.2026) · alle Seiten
   ---------------------------------------------------------------------
   Gemeinsames Stylesheet aller Seiten (bis auf handwerk.html, die noch
   auf style.css läuft). Absicht und Tokens: DESIGN.md, Abschnitt
   „Redesign 2026-09-19". Mobile-first, kein GSAP, Bewegung nur über
   transform/opacity, alles reduced-motion-sicher.
   ===================================================================== */

@font-face {
  font-family: "Geist";              /* Überschriften: neutrale, professionelle Grotesk, OFL, self-hosted */
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/geist.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* 1. TOKENS                                                           */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  --primary:        #2e5fe6;
  --primary-strong: #1f49c2;
  --primary-soft:   #e3eafd;
  --primary-ink:    #1f49c2;      /* Text auf sanftem Blau */
  --amber-soft:     #fbeed7;
  --amber-ink:      #7a4b0a;

  --canvas:         #eef1f6;      /* Seitenhintergrund, kühles Hellgrau */
  --surface:        #ffffff;
  --surface-alt:    #f6f8fb;
  --border:         rgb(24 35 56 / 0.08);
  --border-strong:  rgb(24 35 56 / 0.16);

  --ink:            #182338;
  --text:           #38445c;
  --muted:          #5c6880;
  --on-primary:     #ffffff;

  --shadow-rgb:     24 35 56;
  --shadow-soft:    0 1px 2px rgb(var(--shadow-rgb) / 0.04),
                    0 12px 32px rgb(var(--shadow-rgb) / 0.08);
  --shadow-lift:    0 2px 4px rgb(var(--shadow-rgb) / 0.05),
                    0 24px 48px rgb(var(--shadow-rgb) / 0.12);
  --ring:           0 0 0 1px rgb(24 35 56 / 0.07);          /* Haarlinie außen */
  --ring-blue:      0 0 0 1px rgb(46 95 230 / 0.28);

  /* Glas */
  --glass:          rgb(255 255 255 / 0.66);
  --glass-strong:   rgb(255 255 255 / 0.80);
  --glass-border:   rgb(255 255 255 / 0.85);
  --glass-edge:     inset 0 1px 0 rgb(255 255 255 / 0.9);
  --glass-blur:     16px;

  /* Relief: EINE Lichtquelle oben links. Jede erhabene Fläche trägt
     außen Licht (oben links) und Schatten (unten rechts), innen eine
     helle Lichtkante oben links und eine hauchdünne dunkle unten rechts.
     Versenkte Flächen (Ablagen, gedrückte Knöpfe) kehren das um. */
  --neo-bg:         #eef1f6;
  --lift-hi:        -5px -5px 12px rgb(255 255 255 / 0.95);
  --lift-lo:        5px 5px 12px rgb(24 35 56 / 0.11);
  --lift-hi-sm:     -3px -3px 7px rgb(255 255 255 / 0.95);
  --lift-lo-sm:     3px 3px 7px rgb(24 35 56 / 0.11);
  --rim-hi:         inset 1px 1px 0 rgb(255 255 255 / 0.95);
  --rim-lo:         inset -1px -1px 0 rgb(24 35 56 / 0.05);
  --neo-out:        var(--ring), var(--rim-hi), var(--rim-lo), var(--lift-lo), var(--lift-hi);
  --neo-out-sm:     var(--ring), var(--rim-hi), var(--rim-lo), var(--lift-lo-sm), var(--lift-hi-sm);
  --neo-in:         var(--ring), inset 3px 3px 8px rgb(24 35 56 / 0.10), inset -3px -3px 8px rgb(255 255 255 / 0.95);
  --tray:           var(--ring), inset 2px 2px 6px rgb(24 35 56 / 0.06), inset -2px -2px 6px rgb(255 255 255 / 0.9);
  /* Tasten: oben Licht, unten eine dunklere Kante wie bei einer echten Taste */
  --key-blue:       inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -2px 0 rgb(46 95 230 / 0.16), var(--ring-blue), 0 2px 4px rgb(24 35 56 / 0.06);
  --key-blue-down:  inset 0 2px 4px rgb(31 73 194 / 0.22), var(--ring-blue);
  --key-solid:      inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -2px 0 rgb(0 0 0 / 0.18), 0 2px 4px rgb(24 35 56 / 0.10);
  --key-solid-down: inset 0 2px 4px rgb(0 0 0 / 0.25);
  --key-white:      var(--ring), inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(24 35 56 / 0.05), 0 2px 4px rgb(24 35 56 / 0.06);
  --edge-hi:        var(--edge-hi);   /* Lichtkante auf blauen Chips */
  --glass-btn:      rgb(255 255 255 / 0.55);

  /* Sanfter Blau-Knopf */
  --soft-btn-bg:    linear-gradient(180deg, #e2eaff 0%, #c9d8fb 100%);
  --soft-btn-ink:   #1f49c2;

  /* Gelbe Badge-Taste (Paket-Flaggen, Schritt-Tag): dieselbe Lichtquelle wie die Tasten */
  --key-amber-bg:   linear-gradient(180deg, #fdf3e2 0%, #f6dca6 100%);
  --key-amber:      inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -2px 0 rgb(122 75 10 / 0.16), 0 0 0 1px rgb(236 159 58 / 0.45), 0 2px 4px rgb(24 35 56 / 0.06);

  --font-heading: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --r-pill: 999px;
  --r-xl:   28px;    /* große Karten, Fenster, CTA, Footer */
  --r-lg:   18px;    /* Kacheln, Chips-Flächen, Innenkästen */
  --r-md:   12px;    /* kleine Kästen, Pfeil-Chips */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --gap: 1.25rem;                 /* ein Rasterabstand für alle Karten */
  --card-pad: clamp(1.5rem, 2.6vw, 2.25rem);
  --wrap:   1280px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 150ms;
  --t-base: 280ms;
  --t-slow: 600ms;

  --z-head: 200;
  --z-sheet: 300;
  --z-cookie: 320;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --primary:        #3f6fe0;
  --primary-strong: #5a86ee;
  --primary-soft:   rgb(63 111 224 / 0.16);
  --primary-ink:    #a9c0f8;
  --amber-soft:     rgb(240 179 94 / 0.16);
  --amber-ink:      #f5c987;

  --canvas:         #0e0e10;
  --surface:        #17181a;
  --surface-alt:    #1e1f22;
  --border:         rgb(255 255 255 / 0.08);
  --border-strong:  rgb(255 255 255 / 0.16);

  --ink:            #f4f4f5;
  --text:           #d4d4d6;
  --muted:          #9b9ca0;

  --shadow-rgb:     0 0 0;
  --shadow-soft:    0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-lift:    0 2px 4px rgb(0 0 0 / 0.5), 0 24px 48px rgb(0 0 0 / 0.55);
  --ring:           0 0 0 1px rgb(255 255 255 / 0.09);
  --ring-blue:      0 0 0 1px rgb(120 160 255 / 0.35);

  --glass:          rgb(23 24 26 / 0.68);
  --glass-strong:   rgb(23 24 26 / 0.82);
  --glass-border:   rgb(255 255 255 / 0.12);
  --glass-edge:     inset 0 1px 0 rgb(255 255 255 / 0.10);

  --neo-bg:         #151618;
  --lift-hi:        -5px -5px 12px rgb(255 255 255 / 0.04);
  --lift-lo:        5px 5px 12px rgb(0 0 0 / 0.6);
  --lift-hi-sm:     -3px -3px 7px rgb(255 255 255 / 0.04);
  --lift-lo-sm:     3px 3px 7px rgb(0 0 0 / 0.6);
  --rim-hi:         inset 1px 1px 0 rgb(255 255 255 / 0.10);
  --rim-lo:         inset -1px -1px 0 rgb(0 0 0 / 0.4);
  --neo-in:         var(--ring), inset 3px 3px 8px rgb(0 0 0 / 0.6), inset -3px -3px 8px rgb(255 255 255 / 0.04);
  --tray:           var(--ring), inset 2px 2px 6px rgb(0 0 0 / 0.5), inset -2px -2px 6px rgb(255 255 255 / 0.03);
  --key-blue:       inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -2px 0 rgb(0 0 0 / 0.3), var(--ring-blue), 0 2px 4px rgb(0 0 0 / 0.4);
  --key-blue-down:  inset 0 2px 4px rgb(0 0 0 / 0.5), var(--ring-blue);
  --key-solid:      inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -2px 0 rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.5);
  --key-solid-down: inset 0 2px 4px rgb(0 0 0 / 0.5);
  --key-white:      var(--ring), inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.4);
  --edge-hi:        inset 0 1px 0 rgb(255 255 255 / 0.10);
  --glass-btn:      rgb(255 255 255 / 0.06);

  --soft-btn-bg:    linear-gradient(180deg, rgb(63 111 224 / 0.30), rgb(63 111 224 / 0.18));
  --soft-btn-ink:   #b7cbfa;

  --key-amber-bg:   linear-gradient(180deg, rgb(240 179 94 / 0.30), rgb(240 179 94 / 0.14));
  --key-amber:      inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(240 179 94 / 0.35), 0 2px 4px rgb(0 0 0 / 0.4);
}

/* ------------------------------------------------------------------ */
/* 2. BASIS                                                            */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
figure { margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-md); }
::selection { background: var(--primary-soft); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 400;
  padding: .6rem 1rem; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Icons (Tabler, eine Familie, eine Strichstärke) */
.ic {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.hl { color: var(--primary); white-space: nowrap; }
:root[data-theme="dark"] .hl { color: #93b4f7; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* 3. KNÖPFE UND RELIEF                                                */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: var(--key-solid);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), box-shadow var(--t-fast);
}
.btn:hover { background: var(--primary-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: var(--key-solid-down); }
.btn--ghost {
  background: var(--glass-btn); color: var(--ink);
  border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--lift-lo-sm), var(--lift-hi-sm);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.btn--ghost:hover { background: var(--glass-btn); transform: translateY(-1px); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--lift-lo), var(--lift-hi); }
.btn--ghost:active { transform: translateY(1px); box-shadow: var(--neo-in); }

.btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.6rem; padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--soft-btn-bg); color: var(--soft-btn-ink);
  font-weight: 650; line-height: 1; white-space: nowrap;
  box-shadow: var(--key-blue);
  transition: transform var(--t-base) var(--ease-out), filter var(--t-base), box-shadow var(--t-fast);
}
.btn-soft:hover { transform: translateY(-1px); filter: saturate(1.15); }
.btn-soft:active { transform: translateY(1px); box-shadow: var(--key-blue-down); }

/* Runder Relief-Knopf (Theme, Logo-Kreis, Socials) */
.neo {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--neo-bg); color: var(--ink);
  box-shadow: var(--neo-out-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), color var(--t-fast);
}
.neo:hover { transform: translateY(-1px); box-shadow: var(--neo-out); color: var(--primary-ink); }
.neo:active { box-shadow: var(--neo-in); transform: translateY(0) scale(0.97); }
.neo .ic { width: 1.2rem; height: 1.2rem; }

/* Breiter Knopf mit Pfeil-Chip (Clico-Signatur) */
.btn-wide {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 3.6rem;
  padding: .45rem .45rem .45rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  border: 0;
  font-weight: 650; box-shadow: var(--key-white), var(--shadow-soft);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.btn-wide:hover { transform: translateY(-2px); box-shadow: var(--key-white), var(--shadow-lift); }
.btn-wide:active { transform: translateY(0); box-shadow: var(--neo-in); }
.btn-wide .chip {
  display: grid; place-items: center; flex: none;
  width: 2.7rem; height: 2.7rem; border-radius: var(--r-pill);
  background: var(--soft-btn-bg); color: var(--soft-btn-ink);
  box-shadow: var(--key-blue);
  transition: transform var(--t-base) var(--ease-out);
}
.btn-wide:hover .chip { transform: translate(2px, -2px); }
.btn-wide--primary { background: var(--primary); color: #fff; box-shadow: var(--key-solid); }
.btn-wide--primary:hover { box-shadow: var(--key-solid), 0 10px 20px rgb(var(--shadow-rgb) / 0.14); }
.btn-wide--primary:active { box-shadow: var(--key-solid-down); }
.btn-wide--primary .chip { background: rgb(255 255 255 / 0.18); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -2px 0 rgb(0 0 0 / 0.15), 0 0 0 1px rgb(255 255 255 / 0.28); }
.btn-wide--primary:hover { background: var(--primary-strong); }

/* ------------------------------------------------------------------ */
/* 4. HINWEISSTREIFEN UND GLAS-PILLE                                   */
/* ------------------------------------------------------------------ */
.tipbar {
  position: relative; z-index: calc(var(--z-head) + 1);   /* liegt über dem Lichtschein der Pille */
  display: flex; justify-content: center; align-items: center; gap: .5rem;
  padding: .55rem 3rem;
  background: var(--primary); color: rgb(255 255 255 / 0.85);
  font-size: .9rem; text-align: center;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12);
}
.tipbar p { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; }
.tipbar .ic { color: rgb(255 255 255 / 0.85); }
.tipbar a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: .15rem; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: .2em; }
.tipbar a:hover { text-decoration-color: #fff; }
.tipbar a .ic { color: #fff; }
.tipbar-close {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill);
  color: #fff; background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.tipbar-close:hover { background: rgb(255 255 255 / 0.24); }
.tipbar-close:active { transform: translateY(-50%) scale(0.94); }
.tipbar-close .ic { width: 1rem; height: 1rem; color: #fff; }
.tipbar-close:focus-visible { outline-color: #fff; }
html.tip-closed .tipbar { display: none; }
html.tip-closed .hero--home { min-height: max(640px, calc(100vh - 4.5rem)); min-height: max(640px, calc(100svh - 4.5rem)); }
@media (max-width: 520px) { .tipbar > p > .ic { display: none; } .tipbar { font-size: .84rem; padding: .5rem 2.75rem .5rem 1rem; } }

.head-sentinel { height: .5rem; }   /* Luft zwischen Banner und Pille, die Pille selbst klebt bei .75rem */
.site-head {
  position: sticky; top: .75rem; z-index: var(--z-head);
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: .75rem;
  width: 100%; max-width: 62rem;
  padding: .5rem .55rem .5rem .55rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--lift-lo), var(--lift-hi), var(--shadow-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  transition: box-shadow var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.site-head.is-stuck .pill { box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--lift-lo), var(--lift-hi), var(--shadow-lift); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .pill, .starter, .window, #cookie-banner, .sheet { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); }
/* Logo: blauer Kreis in einem hellen Ring, wie Clicos Logo-Kreis */
.brand-mark { display: block; width: 2.75rem; height: 2.75rem; padding: 4px; border-radius: 50%; background: var(--neo-bg); box-shadow: var(--neo-out-sm); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.brand:hover .brand-mark { box-shadow: var(--neo-out); }
.brand-mark img { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(24 35 56 / 0.25); }
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-4deg); }
.brand-mark img { width: 100%; height: 100%; border-radius: 50%; }
.brand-word {
  display: block; height: 1.15rem; aspect-ratio: 560 / 100;
  background: currentColor;
  -webkit-mask: url("../assets/logos/wordmark.png?v=2") center / contain no-repeat;
          mask: url("../assets/logos/wordmark.png?v=2") center / contain no-repeat;
}

.pnav { display: none; flex: 1; justify-content: center; }
.pnav > ul { display: flex; align-items: center; gap: .25rem; }
.pnav > ul > li { position: relative; }
.pnav a, .pnav .pnav-trigger {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .7rem .95rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast), background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pnav a:hover, .pnav .pnav-trigger:hover, .pnav li:focus-within > a, .pnav li:hover > a, .pnav li:hover > .pnav-trigger {
  color: var(--ink); background: var(--surface);
  box-shadow: var(--key-white), 0 6px 14px rgb(var(--shadow-rgb) / 0.10);
}
/* Mit JS wandert stattdessen EINE Taste hinter den Punkten her */
.pnav > ul { position: relative; }
.pnav > ul > li > a, .pnav > ul > li > .pnav-trigger { position: relative; z-index: 1; }
.pnav-glide {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  border-radius: var(--r-pill); background: var(--surface);
  box-shadow: var(--key-white), 0 6px 14px rgb(var(--shadow-rgb) / 0.10);
  opacity: 0; transform-origin: left top;
  transition: transform .42s var(--ease-out), width .42s var(--ease-out), height .42s var(--ease-out), opacity .22s;
}
.pnav-glide.is-on { opacity: 1; }
.pnav:has(.pnav-glide) a:hover, .pnav:has(.pnav-glide) .pnav-trigger:hover,
.pnav:has(.pnav-glide) li:focus-within > a, .pnav:has(.pnav-glide) li:hover > a, .pnav:has(.pnav-glide) li:hover > .pnav-trigger {
  background: transparent; box-shadow: none;
}
/* Untermenü: eigene Taste, die Links liegen darüber; Hover-Fläche der Links weicht */
.sub { position: absolute; }
.sub a { position: relative; z-index: 1; }
.sub .pnav-glide { border-radius: var(--r-md); }
.sub:has(.pnav-glide) a:hover { background: transparent; }
.pnav .ic { width: .9rem; height: .9rem; transition: transform var(--t-base) var(--ease-out); }
.pnav li:hover > .pnav-trigger .ic, .pnav li:focus-within > .pnav-trigger .ic { transform: rotate(180deg); }

.sub {
  position: absolute; top: calc(100% + .55rem); left: 0;
  min-width: 15rem; padding: .45rem;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--ring), var(--shadow-lift);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.pnav li:hover > .sub, .pnav li:focus-within > .sub {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.sub a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; border-radius: var(--r-md);
  font-size: .95rem; font-weight: 550; letter-spacing: 0; text-transform: none;
  color: var(--text);
}
.sub a .ic { width: 1.1rem; height: 1.1rem; color: var(--primary); }
.sub a:hover { background: var(--primary-soft); color: var(--primary-ink); }
.sub .sub-all { margin-top: .25rem; border-top: 1px solid var(--border); padding-top: .55rem; color: var(--primary-ink); }

.pill-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pill-actions .neo { width: 2.5rem; height: 2.5rem; }
.pill-actions .btn-soft { min-height: 2.5rem; }
.theme-toggle { position: relative; }
.theme-toggle .ic { position: absolute; transition: opacity var(--t-base), transform var(--t-slow) var(--ease-out); }
.theme-toggle .ic-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .ic-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
.pill .btn-soft { display: none; }
.burger { display: inline-grid; }

@media (min-width: 900px) {
  .pnav { display: flex; }
  .pill .btn-soft { display: inline-flex; }
  .burger { display: none; }
}
@media (max-width: 899px) {
  .brand-word { display: none; }
  .pill { max-width: 100%; }
}
@media (min-width: 480px) and (max-width: 899px) {
  .pill .btn-soft { display: inline-flex; }
}

/* Mobile-Sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgb(24 35 56 / 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--t-base);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
  max-height: 88vh; max-height: 88dvh; overflow: auto;
  padding: .75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--glass-strong);
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), 0 -20px 50px rgb(var(--shadow-rgb) / 0.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  transform: translateY(102%);
  transition: transform var(--t-slow) var(--ease-out);
}
.sheet[hidden], .sheet-backdrop[hidden] { display: none; }
html.sheet-open { overflow: hidden; }
html.sheet-open .sheet { transform: none; }
html.sheet-open .sheet-backdrop { opacity: 1; }
.sheet-head { padding: .35rem 0 .9rem; }
.sheet-grab { width: 2.6rem; height: .3rem; margin: 0 auto; border-radius: var(--r-pill); background: var(--border-strong); }
.sheet-nav a {
  display: flex; align-items: center; gap: .85rem;
  min-height: 3.1rem; padding: .55rem .5rem; border-radius: var(--r-lg);
  font-size: 1.15rem; font-weight: 600; color: var(--ink);
}
.sheet-nav a .ic { width: 1.3rem; height: 1.3rem; color: var(--primary); }
.sheet-nav a:active { background: var(--primary-soft); }
.sheet-nav .sub-item { font-size: 1rem; font-weight: 500; color: var(--text); padding-left: 2.85rem; min-height: 2.6rem; }
.sheet-foot { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sheet-foot .btn { flex: 1; }

/* Theme-Wechsel (Philipp, 20.09.2026): Die Sonne gibt Licht frei, das helle
   Schema breitet sich weich vom Knopf aus. Der Mond saugt das Licht ein, das
   helle Schema schrumpft in den Knopf, dunkel bleibt übrig. Der Rand ist eine
   weiche Maske statt einer harten Kreiskante; --vt-r ist registriert, damit
   der Radius animierbar ist. html.vt-dark setzt site.js für den Weg ins Dunkle.
   1,15 s, Anlauf bewusst zügig (sonst fühlt sich der Klick verzögert an).
   .vt-glow ist ein weißer Lichtsaum im neuen (lebenden) Schnappschuss, der mit
   der Kante mitläuft: bei der Sonne innen an der Kante, beim Mond als Hof um
   die schrumpfende Lichtscheibe. */
@property --vt-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* Der Knopf läuft als eigene Gruppe über der Seite: alter Schnappschuss weg, neuer lebt */
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }
::view-transition-group(theme-toggle) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  mask-image: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0), #000 calc(var(--vt-r) - 14vmax), transparent var(--vt-r));
  animation: vt-sun 1.15s cubic-bezier(0.35, 0.1, 0.2, 1) both;
}
@keyframes vt-sun { from { --vt-r: 4vmax; } to { --vt-r: 175vmax; } }
html.vt-dark::view-transition-new(root) { z-index: 1; mask-image: none; animation: none; }
html.vt-dark::view-transition-old(root) {
  z-index: 2;
  mask-image: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0), #000 calc(var(--vt-r) - 14vmax), transparent var(--vt-r));
  animation: vt-moon 1.15s cubic-bezier(0.5, 0, 0.25, 1) both;
}
@keyframes vt-moon { from { --vt-r: 175vmax; } to { --vt-r: 0px; } }
.vt-glow {
  position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  background: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0), transparent calc(var(--vt-r) - 18vmax), rgb(255 236 200 / 0.75) calc(var(--vt-r) - 5vmax), transparent calc(var(--vt-r) + 1vmax));
  animation: vt-sun 1.15s cubic-bezier(0.35, 0.1, 0.2, 1) both;
}
html.vt-dark .vt-glow {
  background: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0), transparent calc(var(--vt-r) - 6vmax), rgb(190 210 255 / 0.4) calc(var(--vt-r) - 2vmax), transparent calc(var(--vt-r) + 8vmax));
  animation: vt-moon 1.15s cubic-bezier(0.5, 0, 0.25, 1) both;
}
/* Der Knopf ist die Quelle und dreht sich dabei: die Sonne blitzt auf, ihre
   Strahlen drehen weg und der Mond dreht herein; der Mond schluckt (zieht sich
   zusammen), versinkt, und die Sonne dreht herauf. Die letzten Keyframes sind
   exakt der Ruhezustand des Zielthemas, damit nach dem Entfernen der Klasse
   nichts springt. */
.theme-toggle.is-sun { animation: tt-sun 1.15s cubic-bezier(0.35, 0.1, 0.2, 1) both; }
@keyframes tt-sun {
  0%   { transform: scale(1) rotate(0deg);      box-shadow: var(--neo-out-sm), 0 0 0 0 rgb(255 226 170 / 0), 0 0 0 0 rgb(255 226 170 / 0); }
  14%  { transform: scale(1.32) rotate(70deg);  box-shadow: var(--neo-out-sm), 0 0 0 7px rgb(255 226 170 / 0.55), 0 0 48px 14px rgb(255 226 170 / 0.95); }
  60%  { transform: scale(1) rotate(300deg);    box-shadow: var(--neo-out-sm), 0 0 0 0 rgb(255 226 170 / 0), 0 0 0 0 rgb(255 226 170 / 0); }
  100% { transform: scale(1) rotate(360deg);    box-shadow: var(--neo-out-sm), 0 0 0 0 rgb(255 226 170 / 0), 0 0 0 0 rgb(255 226 170 / 0); }
}
.theme-toggle.is-sun .ic-sun  { animation: tt-sun-out 1.15s cubic-bezier(0.35, 0.1, 0.2, 1) both; }
.theme-toggle.is-sun .ic-moon { animation: tt-moon-in 1.15s cubic-bezier(0.35, 0.1, 0.2, 1) both; }
@keyframes tt-sun-out {
  0%   { opacity: 1; transform: none; }
  45%  { opacity: 0; transform: rotate(200deg) scale(1.8); }
  100% { opacity: 0; transform: rotate(-60deg) scale(.6); }
}
@keyframes tt-moon-in {
  0%, 40% { opacity: 0; transform: rotate(-150deg) scale(.3); }
  100%    { opacity: 1; transform: none; }
}
.theme-toggle.is-moon { animation: tt-moon 1.15s cubic-bezier(0.5, 0, 0.25, 1) both; }
@keyframes tt-moon {
  0%   { transform: scale(1) rotate(0deg); }
  55%  { transform: scale(1) rotate(-200deg); }
  78%  { transform: scale(0.74) rotate(-330deg); }
  90%  { transform: scale(1.08) rotate(-355deg); }
  100% { transform: scale(1) rotate(-360deg); }
}
.theme-toggle.is-moon .ic-moon { animation: tt-moon-out 1.15s cubic-bezier(0.5, 0, 0.25, 1) both; }
.theme-toggle.is-moon .ic-sun  { animation: tt-sun-in 1.15s cubic-bezier(0.5, 0, 0.25, 1) both; }
@keyframes tt-moon-out {
  0%   { opacity: 1; transform: none; }
  60%  { opacity: 0; transform: rotate(-120deg) scale(.15); }
  100% { opacity: 0; transform: rotate(60deg) scale(.6); }
}
@keyframes tt-sun-in {
  0%, 62% { opacity: 0; transform: rotate(160deg) scale(.2); }
  100%    { opacity: 1; transform: none; }
}
/* Sterne um den Mond, sobald das Licht verschluckt ist */
.vt-star {
  position: fixed; z-index: 2147483647; pointer-events: none;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgb(190 210 255 / 0.85);
  animation: vt-star .9s ease-out both;
}
@keyframes vt-star {
  0%   { opacity: 0; transform: scale(0); }
  35%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(.2); }
}

/* ------------------------------------------------------------------ */
/* 5. HERO · Ellipse, zweiteilige Headline, Flug-Entrance               */
/* ------------------------------------------------------------------ */
@property --orbit { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --orbit-boost { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

/* Der Hero steht (sticky), der Rest der Seite zieht sich als Vorhang
   darüber. Die Hülle klebt, der Hero selbst trägt die Entrance. */
.hero-sticky { position: sticky; top: 0; z-index: 0; }
.page-curtain {
  position: relative; z-index: 1;
  background: var(--canvas);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 48px rgb(var(--shadow-rgb) / 0.12);
  overflow: clip;
  padding-top: 1px;
}
.hero--home {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* am Anfang nur der Hero: Viewport minus Hinweisstreifen und Pille */
  min-height: max(640px, calc(100vh - 6.25rem)); min-height: max(640px, calc(100svh - 6.25rem));
  padding: 0 var(--gutter) clamp(2rem, 6vh, 4rem);
}
.hero-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-stage {
  position: relative; flex: 1 1 auto;
  display: grid; place-items: center;
  min-height: 420px;
}

/* Entrance: Flug auf den Hero zu, Ränder verschwimmen in Canvas-Farbe */
@media (prefers-reduced-motion: no-preference) {
  .hero--home { animation: hero-zoom-in 1.6s cubic-bezier(0.34, 1.45, 0.64, 1) backwards; }
  .hero--home::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(118% 118% at 50% 50%, transparent 42%, var(--canvas) 88%);
    animation: hero-edge-blur 1.6s linear forwards;
  }
  /* Der Projekt-Starter kommt erst, wenn der Flug gelandet ist */
  .starter--hero { animation: rise .9s var(--ease-out) both 1.55s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@keyframes hero-zoom-in { from { opacity: 0; transform: scale(0.55); } 12% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes hero-edge-blur { 0% { opacity: 1; } 55% { opacity: 0.9; } 100% { opacity: 0; visibility: hidden; } }

/* Beim Scrollen setzt sich der Text, die Bahn wird blass */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--home .hero-copy { animation: hero-settle linear both; animation-timeline: scroll(root); animation-range: 0px 85vh; }
    .hero--home .hero-ring { animation: hero-dim linear both; animation-timeline: scroll(root); animation-range: 0px 70vh; }
    .hero--home .starter--hero { animation: rise .9s var(--ease-out) both 1.55s, hero-dim linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0px 60vh; }
  }
}
@keyframes hero-settle { to { transform: scale(0.93); opacity: 0.3; } }
@keyframes hero-dim { to { opacity: 0.15; } }

.hero-copy { position: relative; z-index: 1; width: min(100%, 1040px); padding-inline: clamp(0rem, 3vw, 3rem); text-align: left; }
.hero-headline { display: block; font-family: var(--font-heading); }
.hero-headline .hl-a, .hero-headline .hl-b {
  display: block; font-weight: 800; line-height: 0.96;
  letter-spacing: -0.045em; color: var(--ink);
}
.hero-headline .hl-a { text-align: left; }
.hero-headline .hl-b { text-align: right; margin-top: 0.16em; }
.hero-headline .hl-word {
  display: inline-block; font-size: clamp(2.6rem, 1rem + 6.2vw, 7.2rem);
  /* weicher Halo in Canvas-Farbe: verdeckt Icons direkt hinter den Buchstaben */
  text-shadow: 0 0 24px var(--canvas), 0 0 24px var(--canvas), 0 0 12px var(--canvas);
}
.hero-headline .hl-amp { color: var(--primary); font-weight: 800; padding-inline: 0.08em; }
.hero-headline .ch { display: inline-block; }
.hero-headline .wv { display: inline-block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-headline .is-waving .ch { animation: hl-wave 0.9s cubic-bezier(0.37, 0, 0.63, 1) both; animation-delay: calc(var(--ci) * var(--wave-step, 45ms)); }
}
@keyframes hl-wave { 0%, 100% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(-0.14em) rotate(-2deg); } 70% { transform: translateY(0.05em) rotate(1deg); } }
.hero-headline .hl-kicker {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.95rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 1.1em;
  text-shadow: 0 0 18px var(--canvas), 0 0 18px var(--canvas);
}
.hero-headline .hl-sub {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); line-height: 1.4;
  color: var(--muted); margin-top: 0.45rem; max-width: 32ch;
  text-shadow: 0 0 14px var(--canvas), 0 0 14px var(--canvas);
}
.hero-headline .hl-sub--a { text-align: left; }
.hero-headline .hl-sub--b { text-align: right; margin-left: auto; }

/* die elliptische Bahn */
.hero-ring {
  --Rx: min(44vw, 480px);
  --Ry: min(30vw, 300px, calc(40svh - 7rem));
  position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform;
}
.ring-rotor { position: absolute; inset: 0; }
.ring-path {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--Rx) * 2); height: calc(var(--Ry) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px dashed var(--border-strong); opacity: 0.7;
}
.hero-ring .svc {
  position: absolute; top: 50%; left: 50%;
  width: clamp(50px, 6vw, 80px); aspect-ratio: 1;
  pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--Rx))) rotate(calc(-1 * var(--a)));
}
/* Icon-Kachel: Glas mit Ring, eigene Farbwelt je Leistung */
.hero-ring .svc-i {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--svc-bg, var(--surface));
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--svc-ink) 18%, transparent),
              inset 1px 1px 0 rgb(255 255 255 / 0.85),
              inset -1px -1px 0 color-mix(in srgb, var(--svc-ink) 10%, transparent),
              var(--lift-lo), var(--lift-hi);
  color: var(--svc-ink, var(--primary));
  will-change: transform;
}
.hero-ring .svc-i .ic { width: 46%; height: 46%; stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) { .svc-i.is-pop { animation: svc-pop 0.5s var(--ease-out); } }
@keyframes svc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1); } }

.svc--social { --svc-bg: #e9eefc; --svc-ink: #2e5fe6; }
.svc--web    { --svc-bg: #e6effa; --svc-ink: #2767a6; }
.svc--mega   { --svc-bg: #fbeed7; --svc-ink: #b26a0e; }
.svc--foto   { --svc-bg: #e2f4ec; --svc-ink: #1d7a5f; }
.svc--video  { --svc-bg: #fdeaea; --svc-ink: #c2453f; }
.svc--design { --svc-bg: #f0eafc; --svc-ink: #7048c8; }
.svc--data   { --svc-bg: #e7f4e2; --svc-ink: #45803a; }
.svc--spark  { --svc-bg: #fdf3d6; --svc-ink: #a3780f; }
:root[data-theme="dark"] .svc--social { --svc-bg: #1b2740; --svc-ink: #93b4f7; }
:root[data-theme="dark"] .svc--web    { --svc-bg: #16243a; --svc-ink: #8fc0f0; }
:root[data-theme="dark"] .svc--mega   { --svc-bg: #2f2715; --svc-ink: #f0b35e; }
:root[data-theme="dark"] .svc--foto   { --svc-bg: #14291f; --svc-ink: #74d3b1; }
:root[data-theme="dark"] .svc--video  { --svc-bg: #301b1b; --svc-ink: #f19b95; }
:root[data-theme="dark"] .svc--design { --svc-bg: #241b36; --svc-ink: #c4a8f6; }
:root[data-theme="dark"] .svc--data   { --svc-bg: #1a2b17; --svc-ink: #96d18c; }
:root[data-theme="dark"] .svc--spark  { --svc-bg: #2e2712; --svc-ink: #eec96e; }
:root[data-theme="dark"] .hero-ring .svc-i { box-shadow: 0 0 0 1px color-mix(in srgb, var(--svc-ink) 22%, transparent), inset 1px 1px 0 rgb(255 255 255 / 0.08), var(--lift-lo), var(--lift-hi); }

/* echte elliptische Umlaufbahn (sin/cos), Bahn über transform */
@supports (top: calc(sin(45deg) * 1px)) {
  .ring-rotor { animation: ring-orbit 70s linear infinite; }
  .ring-rotor.is-spin { animation: ring-orbit 70s linear infinite, ring-boost 1.8s cubic-bezier(0.76, 0, 0.24, 1); }
  .hero-ring .svc {
    left: 50%; top: 50%;
    transform:
      translate(calc(var(--Rx) * sin(calc(var(--orbit) + var(--orbit-boost) + var(--a)))),
                calc(-1 * var(--Ry) * cos(calc(var(--orbit) + var(--orbit-boost) + var(--a)))))
      translate(-50%, -50%);
    opacity: calc(1 - 0.9 * sin(calc(var(--orbit) + var(--orbit-boost) + var(--a))) * sin(calc(var(--orbit) + var(--orbit-boost) + var(--a))));
  }
}
@keyframes ring-orbit { to { --orbit: 360deg; } }
@keyframes ring-boost { to { --orbit-boost: 360deg; } }
.svc--social .svc-i { animation: life-pulse  3.4s ease-in-out infinite; }
.svc--web    .svc-i { animation: life-wiggle 4.0s ease-in-out infinite -0.6s; }
.svc--mega   .svc-i { animation: life-bob    3.8s ease-in-out infinite -0.3s; }
.svc--foto   .svc-i { animation: life-twinkle 4.4s ease-in-out infinite -1.2s; }
.svc--video  .svc-i { animation: life-bob    3.2s ease-in-out infinite -0.9s; }
.svc--design .svc-i { animation: life-wiggle 4.6s ease-in-out infinite -1.5s; }
.svc--data   .svc-i { animation: life-pulse  3.6s ease-in-out infinite -0.5s; }
.svc--spark  .svc-i { animation: life-twinkle 2.8s ease-in-out infinite -0.2s; }
@keyframes life-bob     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes life-pulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes life-wiggle  { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes life-twinkle { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(8deg); } }
.bp-idle { animation-play-state: paused !important; will-change: auto !important; }

/* Konfetti */
.confetti-piece { position: fixed; top: 0; left: 0; z-index: 500; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; animation: confetti-fly 1.6s var(--ease-soft) forwards; }
@keyframes confetti-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* Mobil: Hochformat-Ellipse rund um die kompakte Headline */
@media (max-width: 819px) {
  /* Ellipse und Starter höher: kleinere Untergrenze, weniger Luft unten, damit auch
     mit Browserleisten nichts unter der Kante hängt */
  .hero--home { min-height: max(540px, calc(100vh - 9rem)); min-height: max(540px, calc(100svh - 9rem)); padding-bottom: 1.25rem; }
  html.tip-closed .hero--home { min-height: max(540px, calc(100vh - 5.75rem)); min-height: max(540px, calc(100svh - 5.75rem)); }
  .hero-stage { min-height: 340px; }
  .hero-copy { max-width: min(76vw, 320px); text-align: center; }
  .hero-headline .hl-a, .hero-headline .hl-b, .hero-headline .hl-sub { text-align: center; margin-inline: auto; }
  .hero-headline .hl-kicker { text-align: center; margin-bottom: 0.9em; }
  .hero-headline .hl-word { font-size: clamp(2.3rem, 1rem + 6.4vw, 3.4rem); }
  .hero-headline .hl-sub { font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem); max-width: 26ch; }
  .hero-headline .hl-kicker { font-size: .74rem; }
  .hero-ring { --Rx: min(42vw, 180px); --Ry: min(60vw, 280px, calc(50svh - 12rem)); }
  .starter { margin-top: .25rem; }   /* nicht mehr in die Bühne geschoben, sonst deckt er die Unterzeile */
  .hero-ring .svc { width: clamp(38px, 10.5vw, 48px); opacity: 1; }
}
/* Kurze Handys (iPhone SE und Co.): Headline und Ellipse eine Stufe kleiner, damit alles über der Kante bleibt */
@media (max-width: 819px) and (max-height: 700px) {
  .hero-headline .hl-word { font-size: clamp(2rem, 1rem + 5.4vw, 2.8rem); }
  .hero-ring { --Rx: min(40vw, 160px); --Ry: min(50vw, 200px); }
  .hero-stage { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .ring-rotor, .hero-ring .svc-i { animation: none; } }

/* Projekt-Starter (Glas-Karte am Fuß des Heros) */
.starter {
  position: relative; z-index: 2;
  width: min(100%, 46rem); margin-inline: auto;
  margin-top: clamp(-6.5rem, -11vh, -3rem);   /* rutscht in den Fuß der Bühne */
  padding: 1rem 1rem .9rem;
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 0.42);
  border: 1px solid rgb(255 255 255 / 0.75);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.25), var(--ring), 0 24px 48px rgb(var(--shadow-rgb) / 0.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
          backdrop-filter: blur(24px) saturate(1.6);
  text-align: left;
}
:root[data-theme="dark"] .starter { background: rgb(23 24 26 / 0.5); border-color: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), var(--ring), 0 24px 48px rgb(0 0 0 / 0.45); }
.starter .chips label { background: rgb(255 255 255 / 0.7); }
:root[data-theme="dark"] .starter .chips label { background: rgb(255 255 255 / 0.06); }
.starter textarea {
  display: block; width: 100%; min-height: 3.6rem; max-height: 40vh; padding: .35rem .5rem;
  border: 0; background: transparent; resize: none; overflow: hidden;   /* wächst per JS mit dem Text */
  font-size: clamp(1rem, .98rem + .2vw, 1.12rem); line-height: 1.5; color: var(--ink);
}
.starter textarea:focus { overflow: auto; }
.starter textarea::placeholder { color: var(--muted); opacity: .9; }
.starter textarea:focus-visible { outline: none; }
.starter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips label {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.4rem; padding: .45rem .85rem;
  border-radius: var(--r-pill);
  background: var(--surface); border: 0;
  box-shadow: var(--key-white);
  font-size: .9rem; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chips label .ic { width: 1rem; height: 1rem; color: var(--primary); }
.chips label:hover { transform: translateY(-1px); }
.chips label:active { transform: translateY(1px); box-shadow: var(--neo-in); }
.chips input:checked + label { background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue-down); }
@media (prefers-reduced-motion: no-preference) {
  .chips input:checked + label { animation: chip-pop .38s var(--ease-out); }
  @keyframes chip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
}
.starter { transition: box-shadow .5s var(--ease-out); }
.starter:focus-within { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.25), var(--ring), 0 0 0 5px rgb(46 95 230 / 0.14), 0 24px 48px rgb(var(--shadow-rgb) / 0.10); }
.chips input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.starter .btn { margin-left: auto; }
@media (max-width: 560px) {
  .starter .btn { width: 100%; margin-left: 0; }
  /* Chips füllen die Zeile: so viele nebeneinander, wie hineinpassen, ohne Rest rechts */
  .starter .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: .5rem; width: 100%; }
  .starter .chips label { justify-content: center; min-height: 2.8rem; }
  .chips label { font-size: .84rem; padding-inline: .7rem; }
}

/* ------------------------------------------------------------------ */
/* 6. SEKTIONEN                                                        */
/* ------------------------------------------------------------------ */
.sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sec-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 {
  font-size: clamp(2rem, 1.25rem + 2.8vw, 3.3rem);
  font-weight: 700; line-height: 1.08;
}
.sec-head p { margin-top: .9rem; max-width: 40rem; margin-inline: inherit; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--muted); }
.sec-head--center p { margin-inline: auto; }

/* Leistungen · Kartenkarussell (slider.js, GSAP). Ohne JS: Karten
   untereinander, alles lesbar. Erst html.has-slider baut den Ring. */
.svc-slider { margin-top: .5rem; }
.svc-cards { display: grid; gap: var(--gap); }
.svc-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
  min-width: 0;
}
.svc-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-alt); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.2rem 1.4rem 1.4rem; }
.svc-num { display: none; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.svc-num i { font-style: normal; opacity: .6; }
.svc-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem .3rem .55rem; border-radius: var(--r-pill);
  background: var(--soft-btn-bg); color: var(--soft-btn-ink);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--key-blue);
}
.svc-chip .ic { width: 1rem; height: 1rem; }
.svc-card h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.svc-card p { color: var(--muted); font-size: .95rem; }
.svc-cta { margin-top: .3rem; }
.svc-ctrl { display: none; }

.has-slider .svc-slider { margin-top: 1rem; outline: none; }
/* Bühne über die volle Viewport-Breite: Karten laufen bis an den Rand
   und verschwinden dort. Der Clip liegt auf dem Viewport, die Pfeile
   darunter bleiben frei. Unten Luft für den Schatten der Mittelkarte. */
.has-slider .svc-viewport {
  position: relative; height: calc(var(--svc-card-h, clamp(32rem, 76vh, 38.5rem)) + 3.5rem);   /* slider.js misst die höchste Karte, --svc-card-h */
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-bottom: 3.5rem; overflow: hidden;
}
.has-slider .svc-cards { display: block; position: relative; height: 100%; perspective: 1400px; }
.has-slider .svc-card {
  position: absolute; top: 0; left: 50%;
  width: min(84vw, 20rem); margin-left: calc(min(84vw, 20rem) / -2);
  height: calc(100% - 3.5rem);
  transform-origin: center center;
  box-shadow: var(--ring), var(--shadow-lift);
  will-change: transform, opacity;
}
.has-slider .svc-viewport.is-measuring .svc-card { height: auto; }   /* natürliche Höhe messen */
.has-slider .svc-card__media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
.has-slider .svc-card__body { flex: 1 1 auto; min-height: 0; padding: 1rem 1.3rem 1.3rem; gap: .45rem; }
.has-slider .svc-card h3 { font-size: 1.25rem; }
.has-slider .svc-card p { font-size: .9rem; flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.has-slider .svc-card .svc-cta { margin-top: auto; flex: none; }
.has-slider .svc-ctrl { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: -4.75rem; padding: 0 .5rem; position: relative; z-index: 2; }   /* rückt in die Schattenluft der Bühne, näher an die Karten */
.has-slider .svc-arrow { width: 3rem; height: 3rem; }
.has-slider .svc-count { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .95rem; }
.has-slider .svc-count__n { color: var(--ink); font-weight: 700; }
@media (min-width: 880px) {
  .has-slider .svc-viewport { height: calc(var(--svc-card-h, clamp(32rem, 72vh, 38.5rem)) + 3.5rem); }
  .has-slider .svc-card { width: min(27vw, 24rem); margin-left: calc(min(27vw, 24rem) / -2); }
}

/* Ablauf · Projekt-Fenster */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); } }
.split .sec-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 2.8rem); }
.split .sec-head { margin-bottom: 0; }

.window {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--ring), var(--shadow-lift);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
}
.win-title { display: flex; align-items: center; gap: .6rem; font-weight: 650; color: var(--ink); font-size: .95rem; }
.win-title .brand-mark { width: 1.7rem; height: 1.7rem; box-shadow: none; }
.win-state { display: flex; align-items: center; gap: .85rem; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.win-prog { display: flex; gap: .3rem; }
.win-prog span { width: 1.9rem; height: 4px; border-radius: var(--r-pill); background: var(--neo-bg); box-shadow: inset 1px 1px 2px rgb(24 35 56 / 0.14), inset -1px -1px 1px rgb(255 255 255 / 0.9); transition: background-color var(--t-base), box-shadow var(--t-base); }
:root[data-theme="dark"] .win-prog span { box-shadow: inset 1px 1px 2px rgb(0 0 0 / 0.6), inset -1px -1px 1px rgb(255 255 255 / 0.05); }
.win-prog span.is-done { background: rgb(46 95 230 / 0.45); box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.12); }
.win-prog span { position: relative; overflow: hidden; }
.win-prog span.is-on { background: rgb(46 95 230 / 0.22); }
.win-prog span.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform-origin: left; transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .window.is-auto .win-prog span.is-on::after { animation: prog-fill 3.6s linear both; }
  @keyframes prog-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.win-body { padding: 1rem; }
.win-steps { display: grid; gap: .35rem; }
.win-step {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: start;
  width: 100%; padding: .85rem .9rem; border-radius: var(--r-lg);
  text-align: left; color: inherit;
  border: 1px solid transparent;
  transition: background-color var(--t-base), box-shadow var(--t-base), opacity var(--t-base), transform var(--t-base) var(--ease-out);
  opacity: .62;
}
.win-step:hover { opacity: .85; }
.win-step.is-on { opacity: 1; background: var(--surface); box-shadow: var(--shadow-soft); border-color: var(--border); }
.win-step .step-ico {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
  background: var(--neo-bg); color: var(--primary-ink); box-shadow: var(--neo-out-sm);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.win-step.is-on .step-ico { transform: scale(1.06); color: var(--primary); box-shadow: var(--neo-out); }
.win-step:not(.is-on):active .step-ico { box-shadow: var(--neo-in); }
.win-step .step-ico .ic { width: 1.25rem; height: 1.25rem; }
.step-txt { display: block; }
.step-h { display: block; font-family: var(--font-body); color: var(--ink); font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.step-p { display: block; margin-top: .2rem; font-size: .93rem; color: var(--muted); line-height: 1.45; }
.step-tag { display: inline-block; margin-left: .45rem; padding: .15rem .55rem; border-radius: var(--r-pill); background: var(--key-amber-bg); color: var(--amber-ink); box-shadow: var(--key-amber); font-size: .7rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
.win-foot { display: flex; padding: .5rem 1.4rem 1.4rem; }
.win-foot .btn-soft { width: 100%; justify-content: center; }   /* Knopf über die ganze Kartenbreite */
@media (max-width: 480px) { .win-state .win-prog { display: none; } }

/* Referenzen */
.refs { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: stretch; }
@media (min-width: 900px) { .refs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.quote {
  display: flex; flex-direction: column; gap: 1rem;
  padding: var(--card-pad);
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--glass-border); box-shadow: var(--ring), var(--shadow-soft);
}
.quote .ic { width: 2rem; height: 2rem; color: var(--primary); }
.quote blockquote { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.35; color: var(--ink); letter-spacing: -0.02em; }
/* Kopf: Sterne und Zahl zuerst, Knöpfe als Reihe am Fuß, Hinweis klein darunter */
.quote-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .92rem; color: var(--muted); }
.quote-head b { color: var(--ink); }
.quote-head .stars { color: #ec9f3a; letter-spacing: .1em; font-size: 1rem; }
.quote-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.quote-actions > * { flex: 1 1 12rem; justify-content: center; }
.quote .review-note { margin-top: 0; }
.quote figcaption { display: flex; align-items: center; gap: .75rem; font-size: .92rem; color: var(--muted); }
.quote figcaption .avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; font-size: .85rem; box-shadow: var(--ring-blue), var(--edge-hi), inset 0 -1px 0 rgb(46 95 230 / 0.08); }
.quote figcaption cite { display: block; font-style: normal; font-weight: 650; color: var(--ink); }

.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
@media (min-width: 560px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-tile {
  display: grid; place-items: center; min-height: 7.5rem; padding: 1.25rem;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--glass-border);
  box-shadow: var(--ring), var(--shadow-soft);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--ring), var(--shadow-lift); }
.logo-tile img { width: 82%; height: auto; max-height: 3.2rem; object-fit: contain; }
.logo-tile--more { background: transparent; box-shadow: none; border: 1px dashed var(--border-strong); color: var(--muted); font-weight: 600; font-size: .95rem; }
.logo-tile--more:hover { transform: none; box-shadow: none; }
:root[data-theme="dark"] .logo-tile { border-color: transparent; }

/* Festpreis */
.plans { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: stretch; }
@media (min-width: 800px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--gap);
  padding: var(--card-pad);
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--glass-border); box-shadow: var(--ring), var(--shadow-soft);
  overflow: hidden;
}
.plan--hi { box-shadow: var(--ring-blue), var(--shadow-lift); }
.plan--hi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 85% 0%, rgb(63 138 214 / 0.22), transparent 70%);
}
.plan > * { position: relative; }
.plan-flag {
  position: absolute; top: 1.1rem; right: 1.1rem;
  padding: .35rem .75rem; border-radius: var(--r-pill);
  background: var(--key-amber-bg); color: var(--amber-ink); box-shadow: var(--key-amber);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.plan h3 { font-size: 1.55rem; font-weight: 700; }
.plan-for { color: var(--muted); font-size: .95rem; margin-top: .25rem; }
.plan-box { padding: 1rem 1.1rem; border-radius: var(--r-lg); border: 0; background: var(--surface-alt); box-shadow: var(--tray); }
.plan-box ul { display: grid; gap: .5rem; }
.plan-box li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--text); line-height: 1.4; }
.plan-box li .ic { width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--primary); }
.plan-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan-price .amt { font-family: var(--font-heading); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.plan-price .per { color: var(--muted); font-size: .95rem; }
.plan-note { font-size: .85rem; color: var(--muted); }
.plan .btn-wide { margin-top: auto; }
.plans-note { margin-top: 1.25rem; text-align: center; font-size: .92rem; color: var(--muted); }
.plans-note a { color: var(--primary-ink); font-weight: 600; }

/* CTA-Karte */
.cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--glass-border); box-shadow: var(--ring), var(--shadow-lift);
}
.cta { --sx: 88%; --sy: 8%; }
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 70% at var(--sx) var(--sy), rgb(63 138 214 / 0.32), transparent 65%),
              radial-gradient(40% 50% at 10% 100%, rgb(46 95 230 / 0.10), transparent 70%);
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); font-weight: 700; line-height: 1.05; }
.cta p { margin-top: .9rem; font-size: 1.1rem; color: var(--muted); max-width: 40ch; }
.cta .btn-wide { width: auto; min-width: 15rem; }
@media (min-width: 800px) { .cta { grid-template-columns: 1fr auto; } }

/* Footer: Karte mit Spalten-Trennlinien, unten Rechtliches links und Socials rechts */
.foot {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;   /* gleiche Breite wie die Sektionen */
  margin-block: clamp(1.5rem, 4vw, 3rem) 1.5rem;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 5vw, 4.5rem) 0;
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--glass-border); box-shadow: var(--ring), var(--shadow-soft);
}
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 640px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 960px) {
  .foot-top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 0; }
  .foot-top > * + * { border-left: 1px solid var(--border); padding-left: clamp(1.5rem, 3vw, 3rem); }
  .foot-top > * { padding-right: clamp(1rem, 2vw, 2rem); }
}
.foot-brand { display: flex; flex-direction: column; }
.foot-brand .brand { gap: .8rem; }
.brand-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.foot-claim { margin-top: 1rem; max-width: 34ch; color: var(--text); font-size: 1rem; }
.foot-h { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1rem; }
.foot-col ul { display: grid; gap: .55rem; }
.foot-col a, .foot-addr { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 500; }
.foot-col a:hover { color: var(--primary-ink); }
.foot-col .ic { width: 1.05rem; height: 1.05rem; color: var(--primary); }
.foot-quelle { font-size: .9rem; }
/* Schlagwörter je Seite: ruhige Chips über der Fußzeile */
.foot-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--border); }
.foot-tags-h { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; }
.foot-tags ul { display: flex; flex-wrap: wrap; gap: .45rem; }
.foot-tags li { padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--muted); font-size: .82rem; font-weight: 600; box-shadow: var(--ring); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  margin: 1.25rem calc(-1 * clamp(1.75rem, 5vw, 4.5rem)) 0;
  padding: 1.25rem clamp(1.75rem, 5vw, 4.5rem);
  border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--muted);
}
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-legal a:hover { color: var(--ink); }
.foot-socials { display: flex; gap: .6rem; }
.foot-socials .neo { width: 2.5rem; height: 2.5rem; }

/* Cookie-Banner (cookie.js) */
#cookie-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: var(--z-cookie);
  width: min(100% - 2rem, 26rem); padding: 1.15rem 1.25rem;
  border-radius: var(--r-xl);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  font-size: .9rem; color: var(--text);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
#cookie-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: no-preference) {
  #cookie-banner { animation: cookie-in .7s var(--ease-out) both .4s; }
  #cookie-banner::before { animation: cookie-shadow .9s var(--ease-out) both .55s; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes cookie-shadow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
#cookie-banner .cookie-title { font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
#cookie-banner a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
#cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
#cookie-actions .btn { min-height: 2.6rem; padding: .55rem 1.1rem; font-size: .9rem; }
.cookie-banner--hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Auswahl: drei Zeilen mit Relief-Schalter, „Notwendig" gesperrt */
#cookie-panel { margin-top: .9rem; border-top: 1px solid var(--border); }
.cookie-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.cookie-row-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cookie-row-txt b { color: var(--ink); font-weight: 650; }
.cookie-row-txt span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.cookie-switch { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cookie-knob { flex: none; position: relative; width: 2.6rem; height: 1.5rem; border-radius: var(--r-pill); background: var(--surface-alt); box-shadow: var(--tray); transition: background-color var(--t-base); }
.cookie-knob::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--surface); box-shadow: var(--key-white); transition: transform var(--t-base) var(--ease-out); }
.cookie-switch:checked + .cookie-knob { background: var(--primary); }
.cookie-switch:checked + .cookie-knob::after { transform: translateX(1.1rem); }
.cookie-switch:focus-visible + .cookie-knob { outline: 2px solid var(--primary); outline-offset: 2px; }
.cookie-row.is-locked { cursor: default; }
.cookie-row.is-locked .cookie-knob { opacity: .55; }
#cookie-actions .btn { flex: 1 1 auto; }

/* ------------------------------------------------------------------ */
/* 7. BEWEGUNG                                                         */
/* ------------------------------------------------------------------ */
/* Zeilenmasken für Überschriften (home.js zerlegt in .ln > .ln-in) */
.ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ln-in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .has-lines .ln-in { transform: translateY(112%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--li, 0) * 90ms); }
  html.js .lines-in .ln-in { transform: none; }
  /* Der Block-Reveal des Kopfes darf die Überschrift nicht zusätzlich verstecken */
  html.js .sec-head.rv:has(.has-lines) { opacity: 1; transform: none; }
  html.js .sec-head.rv:has(.has-lines) > :not(h2) { opacity: 0; transform: translateY(14px); transition: opacity .7s ease-out .35s, transform .8s var(--ease-out) .35s; }
  html.js .sec-head.rv.in:has(.has-lines) > :not(h2) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease-out, transform .8s var(--ease-out); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .rv.no-anim, html.js .rv.no-anim > *, html.js .reveal.no-anim, html.js .stagger.no-anim > * { transition-duration: 0s; transition-delay: 0s; }
  html.js .rv-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================== */
/* 8. UNTERSEITEN · Komponenten der alten Seiten im neuen Kleid         */
/* Das Markup der Unterseiten blieb erhalten (Copy, IDs, Anker, JSON-  */
/* LD), nur die Hülle wurde getauscht. Diese Klassen tragen es.         */
/* ================================================================== */
:root {
  /* Kompatibilität für Inline-Abstände der alten Seiten */
  --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem;
  --space-md: clamp(1.25rem, 1rem + 1.2vw, 2rem); --space-lg: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --space-xl: clamp(3rem, 2.2rem + 4vw, 5rem);
  --fs-300: clamp(.86rem, .83rem + .14vw, .94rem); --fs-400: clamp(1rem, .96rem + .22vw, 1.12rem);
  --fs-500: clamp(1.2rem, 1.1rem + .55vw, 1.5rem); --fs-800: clamp(2.2rem, 1.6rem + 2.9vw, 4.2rem);
}
.container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--alt { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.center { text-align: center; }
.center .hero-actions, .center .btn { justify-content: center; }
.measure { max-width: 62ch; }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.display, .h-xl { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.h-lg { font-size: clamp(2rem, 1.25rem + 2.8vw, 3.3rem); line-height: 1.08; }
.h-md { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.15; }
.words-reveal { display: block; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }
.section-head > p:not(.lead) { margin-top: .9rem; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.section-head .lead { margin-top: 1rem; }
.sticker {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--soft-btn-bg); color: var(--soft-btn-ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--key-blue);
}
.sticker .ic { width: 1rem; height: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn--lg { min-height: 3.25rem; padding-inline: 1.6rem; font-size: 1.02rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary-ink); font-weight: 650; }
.link-arrow svg { width: 1.1rem; height: 1.1rem; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Seiten-Hero: zentriert, im Stil des Startseiten-Kopfes */
.hero--page { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero--page .section-head { margin-inline: auto; text-align: center; margin-bottom: 0; max-width: 60rem; }
.hero--page .lead { margin-inline: auto; }
.hero--page .hero-actions { justify-content: center; }
.hero--page h1 { margin-block: 1rem !important; font-size: clamp(2.2rem, 1.2rem + 3vw, 3.5rem) !important; }
/* Leistungsseiten: der Hero füllt den ersten Viewport allein, die nächste
   Überschrift beginnt erst nach dem Scrollen (gleiche Rechnung wie .hero--home) */
.hero--full { display: flex; flex-direction: column; justify-content: center; min-height: max(560px, calc(100vh - 6.25rem)); min-height: max(560px, calc(100svh - 6.25rem)); }
html.tip-closed .hero--full { min-height: max(560px, calc(100vh - 4.5rem)); min-height: max(560px, calc(100svh - 4.5rem)); }
@media (max-width: 819px) { .hero--full { min-height: max(520px, calc(100vh - 6.5rem)); min-height: max(520px, calc(100svh - 6.5rem)); } }
/* Foto-Hero (Über uns) */
.hero--page .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero--page .hero-grid .hero-copy { width: auto; padding: 0; text-align: center; }
.hero--page .hero-grid .hero-copy .lead { margin-inline: auto; }
.hero--page .hero-grid .hero-actions { justify-content: center; }
@media (min-width: 900px) {
  .hero--page .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); text-align: left; }
  .hero--page .hero-grid h1 { font-size: clamp(2rem, 1rem + 2.4vw, 3.2rem) !important; }
  .hero--page .hero-grid .hero-copy { text-align: left; }
  .hero--page .hero-grid .hero-copy .lead { margin-inline: 0; }
  .hero--page .hero-grid .hero-actions { justify-content: flex-start; }
}
.hero-media { position: relative; }
.hero-media .photo-main { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--ring), var(--shadow-lift); }
.hero-media .photo-float { position: absolute; width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--ring), var(--shadow-lift); border: 4px solid var(--canvas); }
.hero-media .photo-float--br { right: -6%; bottom: -6%; }
@media (max-width: 879px) { .hero-media .photo-float--br { right: 0; } }   /* einspaltig: nichts ragt über den Rand (iOS ignoriert body-Clip gern) */
.hero-media .float-tag { position: absolute; top: 1rem; left: 1rem; }
.float-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: var(--r-pill); background: var(--glass-strong); color: var(--ink); font-size: .85rem; font-weight: 650; box-shadow: var(--glass-edge), var(--ring), var(--shadow-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Feature-Zeilen: Bild links/rechts, Text daneben */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature--reverse .feature-media { order: 2; }
}
.feature-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ring), var(--shadow-soft); background: var(--surface-alt); }
.feature-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.feature-media:hover img { transform: scale(1.03); }
.feature h2 { font-size: clamp(1.55rem, 1rem + 1.6vw, 2.3rem); line-height: 1.12; }
@media (min-width: 880px) and (max-width: 1139px) { .feature h2 { font-size: 1.7rem; } }
.feature p { margin-top: .9rem; }
.feature-list { display: grid; gap: .55rem; margin-top: 1.25rem; }
.feature-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text); }
.feature-list svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; color: var(--primary); stroke: currentColor; }

/* Karten und Raster */
.grid-2, .grid-3, .grid-auto { display: grid; gap: var(--gap); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-lift); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.5rem 1.5rem; }
.card-body h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.card-body p { color: var(--muted); font-size: .98rem; }
.card-emoji, .card-ico {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .2rem;
  border-radius: var(--r-pill); background: var(--soft-btn-bg); color: var(--soft-btn-ink);
  box-shadow: var(--key-blue);
}
.card-emoji .ic, .card-ico .ic { width: 1.3rem; height: 1.3rem; }

/* Mobil wischbare Reihen */
@media (max-width: 719px) {
  .swipe-row { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * { scroll-snap-align: start; }
  .logo-wall.swipe-row { grid-template-columns: none; grid-auto-rows: auto; grid-auto-columns: 62%; }
  .swipe-hint { display: block; margin-top: .5rem; text-align: center; font-size: .82rem; color: var(--muted); }
}
@media (min-width: 720px) { .swipe-hint { display: none; } }

/* Ablauf-Schritte (Leistungsseiten): vier nummerierte Kacheln */
.steps { display: grid; gap: var(--gap); counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps .step {
  counter-increment: step; position: relative; display: flex; flex-direction: column; gap: .45rem;
  padding: 1.5rem 1.4rem 1.5rem; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
}
.steps .step::before {
  content: counter(step, decimal-leading-zero);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .6rem;
  border-radius: var(--r-pill); background: var(--neo-bg); color: var(--primary-ink);
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
  box-shadow: var(--neo-out-sm);
}
.steps .step h3 { font-size: 1.15rem; }
.steps .step p { color: var(--muted); font-size: .95rem; }

/* Pakete und Festpreis */
.tiers, .fixprice { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 880px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fixprice { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.tier {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0;
  padding: var(--card-pad); border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
}
.tier > * { position: relative; }
.tier--star, .fixprice-main { box-shadow: var(--ring-blue), var(--shadow-lift); }
.tier--star::before, .fixprice-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 85% 0%, rgb(63 138 214 / 0.22), transparent 70%); }
/* Titelzeile: Flagge rechts neben dem Titel; passt sie nicht in die Zeile, rückt sie
   durch wrap-reverse ÜBER den Titel statt darunter */
.tier-title { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: .5rem .75rem; }
.tier-title h3 { flex: 1 1 auto; }
.tier-flag {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; white-space: nowrap;
  padding: .35rem .75rem; border-radius: var(--r-pill); line-height: 1.2;
  background: var(--key-amber-bg); color: var(--amber-ink); box-shadow: var(--key-amber);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tier-flag .ic { width: .95rem; height: .95rem; flex: none; }
.tier-head h3 { font-size: 1.55rem; }
.tier-for { display: block; margin-top: .35rem; color: var(--muted); font-size: .95rem; }
.tier-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.tier-price .pre { color: var(--muted); font-size: .95rem; }
.tier-price .amt { font-family: var(--font-heading); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.tier-price .tier-per { color: var(--muted); font-size: .95rem; flex-basis: 100%; }
.tier-list { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--surface-alt); box-shadow: var(--tray); }
.tier-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--text); line-height: 1.4; }
.tier-list .ic { width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--primary); stroke: currentColor; flex: none; }
.tier .btn { margin-top: auto; align-self: flex-start; }
.tier-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.tier-actions .btn { margin-top: 0; }
.tier-note, .tiers-note { font-size: .88rem; color: var(--muted); }
.tiers-note { margin-top: 1.25rem; text-align: center; }
.tiers-note a { color: var(--primary-ink); font-weight: 600; }
.fixprice-side { display: grid; gap: var(--gap); align-content: start; }

/* Vergleich: andere Agenturen vs. bepromoted */
.vs-grid { display: grid; gap: var(--gap); }
@media (min-width: 800px) { .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-card { position: relative; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
.vs-card--us { background: var(--primary); color: #fff; border-color: transparent; box-shadow: var(--key-solid), var(--shadow-lift); }
.vs-head { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.1rem; }
.vs-card--us .vs-head { color: #fff; }
.vs-head .brand-logo { display: block; height: 1.5rem; aspect-ratio: 560 / 100; background: currentColor; -webkit-mask: url("../assets/logos/wordmark.png?v=2") center / contain no-repeat; mask: url("../assets/logos/wordmark.png?v=2") center / contain no-repeat; }
.vs-flag { position: absolute; top: 1.1rem; right: 1.1rem; padding: .3rem .7rem; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.18); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
.vs-list { display: grid; gap: .6rem; }
.vs-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; }
.vs-card--them .vs-list li { color: var(--muted); }
.vs-ic { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--muted); box-shadow: var(--ring); }
.vs-ic svg { width: .9rem; height: .9rem; stroke: currentColor; }
.vs-card--us .vs-ic { background: rgb(255 255 255 / 0.18); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }

/* FAQ als Akkordeon */
.faq { display: grid; gap: .75rem; max-width: 52rem; margin-inline: auto; }
.faq-item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { position: relative; flex: none; width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill); background: var(--neo-bg); box-shadow: var(--neo-out-sm); transition: transform var(--t-slow) var(--ease-out); }
.faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; inset: 0; margin: auto; width: .8rem; height: 2px; border-radius: 2px; background: var(--primary); }
.faq-item .plus::after { transform: rotate(90deg); transition: transform var(--t-base) var(--ease-out); }
.faq-item[open] .plus::after { transform: rotate(0); }
.faq-item[open] .plus { transform: rotate(180deg); }
.faq-answer { padding: 0 1.35rem 1.25rem; color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: faq-in .45s var(--ease-out) both; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* Kontakt: Formular und Kontaktkarten */
.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .4rem; }
.field label, .checkbox { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field .req { color: var(--primary); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .75rem 1rem;
  border-radius: var(--r-lg); border: 0; background: var(--surface); color: var(--ink);
  box-shadow: var(--tray);
  transition: box-shadow var(--t-base) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: var(--tray), 0 0 0 4px rgb(46 95 230 / 0.16); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.8rem; }
.field .hint { font-size: .85rem; color: var(--muted); font-weight: 400; }
.checkbox { display: flex; gap: .65rem; align-items: flex-start; font-weight: 500; color: var(--text); font-size: .92rem; }
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--primary); flex: none; }
.checkbox a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: .2em; }
.form .btn { justify-self: start; }
.contact-cards { display: grid; gap: var(--gap); }
.contact-card { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.35rem; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
.contact-card .card-ico { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue); }
.contact-card .card-ico .ic { width: 1.3rem; height: 1.3rem; }
.contact-card .lbl { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-card a { color: var(--ink); font-weight: 650; }
.contact-card a:hover { color: var(--primary-ink); }
.note { padding: 1rem 1.2rem; border-radius: var(--r-lg); background: var(--amber-soft); color: var(--amber-ink); font-size: .92rem; }

/* Referenzen: Logo-Wand, Filme, Cases, Stimmen */
.logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
@media (min-width: 560px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-wall .logo-tile { margin: 0; display: grid; place-items: center; gap: .5rem; min-height: 7.5rem; padding: 1.25rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--glass-border); box-shadow: var(--ring), var(--shadow-soft); }
.logo-wall .logo-img { width: 78%; height: auto; max-height: 3rem; object-fit: contain; }
.logo-wall .role { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="dark"] .logo-wall .logo-tile { border-color: transparent; }
:root[data-theme="dark"] .logo-wall .role { color: #5c6880; }
.video-grid { display: grid; gap: var(--gap); }
@media (min-width: 800px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-card { margin: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
.video-frame { aspect-ratio: 16 / 9; background: #0c0c0e; }
.video-frame video { width: 100%; height: 100%; display: block; }
.video-card figcaption { display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.5rem 1.5rem; }
.video-card h3, .case h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.video-card p, .case p { color: var(--muted); font-size: .98rem; }
.case { display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out); }
.case:hover { transform: translateY(-4px); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-lift); }
.case-media { aspect-ratio: 16 / 10; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.case:hover .case-media img { transform: scale(1.04); }
.case-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.5rem 1.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--soft-btn-bg); color: var(--soft-btn-ink); font-size: .74rem; font-weight: 700; letter-spacing: .04em; box-shadow: var(--key-blue); }
figure.quote .stars { color: var(--amber); letter-spacing: .1em; font-size: 1rem; }
figure.quote { --amber: #ec9f3a; }

/* Google-Bewertungen: Sterne und Link zum Profil */
.google-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: 1.25rem; font-size: .92rem; color: var(--muted); }
.google-line .stars { color: #ec9f3a; letter-spacing: .1em; }
.review-note { margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.google-line b { color: var(--ink); }
.google-line a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.container > .google-line { justify-content: center; text-align: center; }

/* Region: Text links, Orte als Chips rechts */
.region { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
@media (min-width: 900px) { .region { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.region h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); line-height: 1.08; }
.region p { margin-top: .9rem; color: var(--muted); max-width: 42ch; }
.towns { display: flex; flex-wrap: wrap; gap: .5rem; }
.towns li { padding: .5rem .95rem; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; box-shadow: var(--key-white); }
.towns li:first-child { background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue); }

/* Über uns: Duo, Fakten */
.duo { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-person { margin: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
.duo-person img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.duo-person figcaption { padding: 1.25rem 1.5rem 1.5rem; }
.duo-person h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.duo-rolle { margin-top: .25rem; color: var(--muted); font-size: .95rem; }
.duo-rolle .dot { color: var(--primary); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: grid; gap: .2rem; padding: 1.25rem 1.35rem; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); text-align: center; }
.fact b { font-family: var(--font-heading); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.fact span { color: var(--muted); font-size: .9rem; }

/* Preis-Konfigurator (Webdesign): eine Frage je Screen, Optionen als Relief-Tasten */
.konfig {
  position: relative; max-width: 52rem; margin-inline: auto;
  display: flex; flex-direction: column; padding: var(--card-pad); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
}
.konfig [hidden] { display: none !important; }   /* .btn und .neo setzen display selbst */
.konfig-head { margin-bottom: 1.5rem; }
.konfig-progress { display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.konfig-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-alt); box-shadow: var(--tray); overflow: hidden; }
.konfig-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35); transition: width var(--t-slow) var(--ease-out); }
.konfig-step { border: 0; padding: 0; margin: 0; min-width: 0; min-height: var(--konfig-step-h, auto); }   /* alle Fragen so hoch wie die höchste, konfigurator.js misst */
.konfig-q { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1rem; padding: 0; }
.konfig-hint { margin: -.5rem 0 1rem; color: var(--muted); font-size: .92rem; }
.konfig-sub { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.konfig-group + .konfig-group { margin-top: 1.25rem; }
.konfig-opts { display: grid; gap: .6rem; }
@media (min-width: 640px) { .konfig-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.konfig-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.konfig-opt {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 4rem;
  padding: .8rem 1rem; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--key-white); color: var(--text);
  cursor: pointer; user-select: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.konfig-opt:hover { transform: translateY(-1px); }
.konfig-opt:active { transform: translateY(1px); box-shadow: var(--neo-in); }
.konfig-opts input:checked + .konfig-opt { background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue-down); }
.konfig-opts input:focus-visible + .konfig-opt { outline: 2px solid var(--primary); outline-offset: 2px; }
.konfig-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.konfig-txt b { font-weight: 700; font-size: .98rem; color: var(--ink); }
.konfig-txt span { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.konfig-opts input:checked + .konfig-opt .konfig-txt b { color: inherit; }
.konfig-ico, .konfig-num {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue);
}
.konfig-ico .ic { width: 1.2rem; height: 1.2rem; }
.konfig-num { font-family: var(--font-heading); font-weight: 800; font-size: .9rem; letter-spacing: -0.02em; }
.konfig-opts input:checked + .konfig-opt .konfig-ico, .konfig-opts input:checked + .konfig-opt .konfig-num { background: var(--primary); color: #fff; box-shadow: var(--key-solid); }
.konfig-tip {
  position: absolute; top: -.55rem; right: .8rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: var(--r-pill); line-height: 1.2;
  background: var(--key-amber-bg); color: var(--amber-ink); box-shadow: var(--key-amber);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.konfig-nav { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.5rem; }
.konfig-nav .konfig-next { margin-left: auto; }
.konfig-back.is-off { visibility: hidden; }
.konfig-sofar { flex: 1; min-width: 0; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); }
.konfig-sofar b { color: var(--ink); font-weight: 700; }
@media (max-width: 519px) { .konfig-sofar { display: none; } }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: var(--key-solid) !important; }
.konfig-result { text-align: center; padding-block: .5rem; }
.konfig-result:focus { outline: none; }
.konfig-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.konfig-price { margin-top: .4rem; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); color: var(--ink); }
.konfig-price small { display: block; margin-top: .35rem; font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.konfig-summary { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.25rem 0 0; padding: 0; }
.konfig-summary li { padding: .35rem .75rem; border-radius: var(--r-pill); background: var(--surface-alt); box-shadow: var(--tray); font-size: .85rem; font-weight: 600; color: var(--text); }
.konfig-summary li small { color: var(--muted); font-weight: 500; }
.konfig-care { justify-content: center; margin-top: 1rem; }
.konfig-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); max-width: 34rem; margin-inline: auto; }
.konfig-result .hero-actions { justify-content: center; }
/* Schrittwechsel */
html.js .konfig-step { display: none; }
html.js .konfig-step.is-active { display: block; animation: konfig-in .32s var(--ease-out) both; }
html.js .konfig-result.is-active { display: flex; flex-direction: column; justify-content: center; align-items: center; }
html.js .konfig.is-measuring .konfig-step { display: block !important; animation: none !important; position: absolute; visibility: hidden; left: var(--card-pad); right: var(--card-pad); min-height: 0; }
@keyframes konfig-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html.js .konfig.is-back .konfig-step.is-active { animation-name: konfig-in-back; }
@keyframes konfig-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
html.js .konfig-nojs { display: none; }
html:not(.js) .konfig-head, html:not(.js) .konfig-nav, html:not(.js) .konfig-result { display: none; }
html:not(.js) .konfig-step + .konfig-step { margin-top: 1.5rem; }
html:not(.js) .konfig-nojs { margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: var(--amber-soft); color: var(--amber-ink); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .konfig-step.is-active { animation: none !important; } .konfig-bar i { transition: none; } }

/* Abzweig-Box (Webdesign → Handwerk) */
.branchbox { display: grid; gap: 1.25rem; align-items: center; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft); }
@media (min-width: 800px) { .branchbox { grid-template-columns: 1fr auto; } }
.branchbox h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.branchbox p { margin-top: .5rem; color: var(--muted); }

/* Rechtstexte, Status-Seiten */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h1 { margin-block: 1rem 1.5rem !important; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }   /* „Datenschutzerklärung" passt sonst nicht in 350px (Safari/Firefox schieben die Seite) */
.prose h2 { font-size: 1.35rem; margin-top: 2.25rem; margin-bottom: .6rem; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--text); }
.prose p + p { margin-top: .75rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .35rem; margin-top: .5rem; }
.prose a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: .2em; }
.status .container { text-align: center; max-width: 40rem; padding-block: clamp(2rem, 6vw, 4rem); }
.status .lead { margin-inline: auto; }
.status .hero-actions { justify-content: center; }
.status-code { font-family: var(--font-heading); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; letter-spacing: -0.05em; color: var(--primary); line-height: 1; }
.status-links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-top: 2rem; }
.check-circle { display: block; width: 5.75rem; height: 5.75rem; margin: 0 auto 1.25rem; }
.check-circle circle { fill: none; stroke: var(--primary); stroke-width: 6; stroke-dasharray: 283; stroke-dashoffset: 283; animation: draw .6s var(--ease-out) forwards; }
.check-circle path { fill: none; stroke: var(--primary); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64; stroke-dashoffset: 64; animation: draw .4s var(--ease-out) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .check-circle circle, .check-circle path { stroke-dashoffset: 0; animation: none; } }

/* Reveal-Klassen der alten Seiten laufen über dieselbe Mechanik wie .rv */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.in), html.js .stagger:not(.in) > * { opacity: 0; transform: translateY(18px); }
  html.js .reveal, html.js .stagger > * { transition: opacity .7s ease-out, transform .8s var(--ease-out); }
  html.js .stagger > :nth-child(2) { transition-delay: 70ms; } html.js .stagger > :nth-child(3) { transition-delay: 140ms; }
  html.js .stagger > :nth-child(4) { transition-delay: 210ms; } html.js .stagger > :nth-child(5) { transition-delay: 280ms; }
  html.js .stagger > :nth-child(n + 6) { transition-delay: 350ms; }
}

/* Touch-Ziele: auf Fingergeräten mindestens 44px hoch (Hausregel) */
@media (pointer: coarse) {
  .btn-soft, .chips label, .neo, .pill-actions .neo, .foot-socials .neo, .tag, .sticker { min-height: 2.75rem; }
  .neo, .pill-actions .neo, .foot-socials .neo { width: 2.75rem; height: 2.75rem; }
  .pnav a, .pnav .pnav-trigger, .sub a, .foot-legal a, .tipbar-close { min-height: 2.75rem; }
  .foot-col a, .foot-addr { min-height: 2.1rem; }   /* Fußzeilenlisten: tippbar, aber ohne 44px-Zeilen */
  .tipbar-close { width: 2.75rem; height: 2.75rem; }
  .checkbox input { width: 1.5rem; height: 1.5rem; }
  .has-slider .svc-card .svc-cta { min-height: 2.75rem; }
}
/* Seitenwechsel: blauer Kurvenwisch (wipe.js). Deckel vor dem ersten Paint,
   wenn die Seite aus einem Wechsel kommt (html.wiping aus dem Head-Snippet),
   mit Sicherheitsnetz, falls das Skript nicht durchkommt. */
.pt { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 600; pointer-events: none; }
.pt.is-active { pointer-events: auto; }
.pt__path { fill: #2e5fe6; }
html.wiping::after { content: ""; position: fixed; inset: 0; background: #2e5fe6; z-index: 600; animation: wipe-fallback .45s ease 2.4s forwards; }
@keyframes wipe-fallback { to { opacity: 0; visibility: hidden; } }

/* Kompatibilität für die Handwerk-Seite: ihr Film bringt eigene Styles
   mit, die noch die alten Token-Namen sprechen. */
:root {
  --color-bg: var(--canvas); --color-surface-alt: var(--surface-alt);
  --color-border: var(--border); --color-border-strong: var(--border-strong);
  --color-ink: var(--ink); --color-text: var(--text); --color-text-muted: var(--muted);
  --color-primary: var(--primary); --color-primary-strong: var(--primary-strong); --color-primary-soft: var(--primary-soft);
  --color-secondary: #ec9f3a; --color-tertiary: #3f8ad6; --color-tertiary-soft: #e6effa; --color-focus: var(--primary);
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: var(--r-lg); --radius-lg: var(--r-xl); --radius-pill: var(--r-pill); --radius-round: 50%;
  --ease-out-expo: var(--ease-out); --ease-out-quart: var(--ease-soft);
  --z-base: 1; --z-sticky: 100;
}
:root[data-theme="dark"] { --color-secondary: #f0b35e; --color-tertiary: #5fa3e6; --color-tertiary-soft: #16243a; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Handwerk: FAQ-Kopf nicht in vier Zeilen brechen */
@media (min-width: 900px) { .container.hw-faq-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } }
.container.hw-faq-grid .hw-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); }

/* ------------------------------------------------------------------ */
/* MOBIL: FLÄCHE NUTZEN (Philipp, 20.09.2026)                          */
/* Knöpfe über die volle Breite und größer, Chips als Raster, Icons     */
/* und Schritt-Nummern neben dem Titel statt darüber, Fußzeile          */
/* zweispaltig. Alles nur unter 640px, darüber bleibt das Layout.       */
/* ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .hero-actions { flex-direction: column; gap: .6rem; }
  .hero-actions .btn { width: 100%; }
  .btn--lg { min-height: 3.4rem; font-size: 1.05rem; }
  /* Knöpfe in Karten, Formularen und Abzweigen */
  main .btn-soft, .svc-cta, .tier .btn, .tier-actions .btn, .branchbox .btn,
  form.form .btn, .konfig-result .hero-actions .btn { width: 100%; min-width: 0; justify-content: center; }
  .plan .btn-wide, .cta .btn-wide { width: 100%; min-width: 0; }   /* breite Taste: Pfeil-Chip bleibt am rechten Rand */
  .tier-actions { flex-direction: column; }
  .konfig-nav { flex-wrap: wrap; gap: .5rem; }
  .konfig-next { flex: 1 1 100%; order: -1; min-height: 3.25rem; }
  .konfig-back { flex: 1 1 100%; }
  .konfig-back.is-off { display: none; }
  /* Ablauf-Schritte: Nummer neben dem Titel */
  .steps .step { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .4rem; align-items: center; }
  .steps .step::before { margin-bottom: 0; }
  .steps .step > h3 { grid-column: 2; }
  .steps .step > p { grid-column: 1 / -1; }
  /* Karten: Icon neben dem Titel */
  .card-body { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; row-gap: .5rem; align-items: center; }
  .card-body > * { grid-column: 1 / -1; }
  .card-body > .card-emoji { grid-column: 1; margin-bottom: 0; }
  .card-body > .card-emoji + h3 { grid-column: 2; }
  /* Fußzeile: Seiten und Leistungen nebeneinander */
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand, .foot-col:last-child { grid-column: 1 / -1; }
  .foot-col ul { gap: 0; }
  .foot-h { margin-bottom: .5rem; }
  .foot-top { gap: 1rem 1rem; }
  .foot-col:last-child ul { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }   /* Kontakt als 2×2 */
  .foot-col:last-child a, .foot-col:last-child .foot-addr { align-items: flex-start; }
  .foot-col:last-child .ic { margin-top: .2rem; }
}
@media (max-width: 419px) {
  .foot-col:last-child ul { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .5rem .75rem; font-size: .92rem; }
  .foot-col:last-child .ic { display: none; }   /* ohne Icons passt die E-Mail in die halbe Breite */
}