/* =====================================================================
   bepromoted – Medienagentur aus Siegen · Design System
   ---------------------------------------------------------------------
   ▸ ALLE Design-Tokens stehen ganz oben (Block 1). Trage hier später
     deine eigenen Werte aus deinem Design-System ein – der Rest der
     Datei zieht sich die Werte automatisch.
   ▸ Kein JavaScript. Scroll-Animationen via CSS scroll-driven
     animations (animation-timeline), Dark Mode via prefers-color-scheme.
   ▸ Mobile-First: Basis = Smartphone, danach @media (min-width: …).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. SCHRIFTEN – self-hosted (DSGVO-konform, kein externer Request)    */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;          /* Variable Font (opsz + wght) */
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2");
}
@font-face {
  font-family: "Courgette";      /* geschwungene Akzentschrift für Heading-Keywords */
  font-style: normal;
  font-weight: 400;              /* wirkt von Haus aus halbfett */
  font-display: swap;
  src: url("../assets/fonts/courgette.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;          /* Variable Font */
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2");
}

/* ================================================================== */
/* 1. DESIGN TOKENS  –  HIER DEINE WERTE EINSETZEN                      */
/* ================================================================== */
:root {
  /* — Farben: Marke (freundliche Blau-Palette, ruhig) — */
  --color-primary:        #2e5fe6;   /* Royalblau · Buttons, Aktionen, Akzente   */
  --color-primary-strong: #1f49c2;   /* Blau kräftig · Hover + Text auf Hell     */
  --color-primary-soft:   #e9eefc;   /* Blau sehr hell · Flächen                 */
  --color-secondary:      #ec9f3a;   /* Warmes Amber · sparsame Highlights (dunkler Text) */
  --color-secondary-soft: #fbeed7;   /* Amber sehr hell · Flächen                */
  --color-tertiary:       #3f8ad6;   /* Himmelblau · Deko, Icons, Akzente        */
  --color-tertiary-ink:   #2767a6;   /* Himmelblau kräftig · Text auf Hell (AA)  */
  --color-tertiary-soft:  #e6effa;   /* Himmelblau sehr hell · Flächen           */

  /* — Farben: Oberflächen (Light · viele Weißtöne) — */
  --color-bg:             #fbfcfe;   /* Seitenhintergrund (fast weiß)  */
  --color-surface:        #ffffff;   /* Karten                         */
  --color-surface-alt:    #f3f6fb;   /* abgesetzte Sektion (kühl-hell) */
  --color-border:         #e7ecf5;
  --color-border-strong:  #d4dcea;

  /* — Farben: Text — */
  --color-ink:            #182338;   /* Überschriften (Blau-Anthrazit) */
  --color-text:           #38445c;   /* Fließtext                      */
  --color-text-muted:     #5c6880;   /* sekundärer Text (AA)           */
  --color-text-invert:    #ffffff;

  /* — Immer dunkle Flächen (Footer, CTA-Bänder; in beiden Themes konstant) — */
  --color-ink-fixed:      #171719;   /* Anthrazit, neutral                     */
  --color-on-ink:         #f3f3f4;   /* Text auf --color-ink-fixed             */
  --color-on-ink-muted:   #adaeb2;

  /* — Fokus / Status — */
  --color-focus:          #2e5fe6;
  --shadow-rgb:           24 35 56;  /* RGB-Kanäle für rgb(… / a) (Navy-getönt) */

  /* — Typografie — */
  --font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --fs-200: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-300: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --fs-400: clamp(1rem,    0.96rem + 0.22vw, 1.12rem);
  --fs-500: clamp(1.2rem,  1.10rem + 0.55vw, 1.5rem);
  --fs-600: clamp(1.5rem,  1.28rem + 1.1vw,  2.1rem);
  --fs-700: clamp(1.9rem,  1.5rem  + 2vw,    3.1rem);
  --fs-800: clamp(2.2rem,  1.6rem  + 2.9vw,  4.2rem);
  --fs-900: clamp(2.4rem,  1.5rem  + 4.2vw,  5.2rem);

  --lh-tight:  1.06;
  --lh-snug:   1.18;
  --lh-base:   1.65;
  --tracking-tight: -0.025em;        /* Display: nie enger als -0.04em */

  /* — Abstände (fluide Spacing-Skala) — */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.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);
  --space-2xl: clamp(3.75rem, 2.8rem + 4.4vw, 6.25rem);
  --space-3xl: clamp(4.5rem, 3.2rem + 6vw, 8rem);

  --container:      1180px;          /* (Legacy, Container laufen jetzt voll) */
  --container-wide: 1340px;
  --container-text: 68ch;            /* Lese-Maximalbreite */
  --pad-inline: clamp(1.25rem, 4vw, 7rem);   /* Seitenränder: volle Breite + gutes Padding */

  /* — Eckenradien (border-radius) — */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;               /* Standard-Karten */
  --radius-lg:   24px;               /* große Medien-/Feature-Blöcke */
  --radius-xl:   32px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* — Schatten — */
  --shadow-sm: 0 1px 2px   rgb(var(--shadow-rgb) / 0.06),
               0 2px 6px   rgb(var(--shadow-rgb) / 0.05);
  --shadow-md: 0 4px 14px  rgb(var(--shadow-rgb) / 0.07),
               0 2px 4px   rgb(var(--shadow-rgb) / 0.04);
  --shadow-lg: 0 16px 36px rgb(var(--shadow-rgb) / 0.10);
  --shadow-color: 0 10px 26px rgb(46 95 230 / 0.18);    /* dezenter blauer Glow */

  /* — Motion — */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms;
  --t-base:   260ms;
  --t-slow:   520ms;

  /* — Z-Index-Skala (semantisch) — */
  --z-base:      1;
  --z-deco:      0;
  --z-sticky:    100;
  --z-header:    200;
  --z-overlay:   300;
  --z-modal:     400;

  color-scheme: light;
}

/* ------------------------------------------------------------------ */
/* 1b. DARK MODE – explizit über [data-theme="dark"] (Umschalter)      */
/*    Startwert wird per Mini-Script aus localStorage / System gesetzt; */
/*    ohne JS bleibt die helle Version (Default) aktiv.                 */
/* ------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --color-primary:        #3f6fe0;   /* Blau · Buttons (weißer Text, AA)  */
  --color-primary-strong: #93b4f7;   /* Blau hell · Text/Links auf Dunkel */
  --color-primary-soft:   #1b2740;
  --color-secondary:      #f0b35e;   /* Amber */
  --color-secondary-soft: #2f2715;
  --color-tertiary:       #5fa3e6;
  --color-tertiary-ink:   #8fc0f0;   /* Himmelblau hell · Text auf Dunkel */
  --color-tertiary-soft:  #16243a;

  --color-bg:             #0e0e10;   /* Anthrazit/Schwarz, neutral */
  --color-surface:        #17181a;
  --color-surface-alt:    #202123;
  --color-border:         #2c2d30;
  --color-border-strong:  #3c3e42;

  --color-ink:            #f4f4f5;
  --color-text:           #d4d4d6;
  --color-text-muted:     #9b9ca0;
  --color-text-invert:    #0e0e10;

  --shadow-rgb:           0 0 0;
  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 16px 36px rgb(0 0 0 / 0.55);
  --shadow-color: 0 10px 26px rgb(0 0 0 / 0.45);

  color-scheme: dark;
}

/* ================================================================== */
/* 2. RESET & BASIS                                                    */
/* ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;          /* Anker unter Sticky-Header */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; color: var(--color-text-muted); }   /* alt-Text falls Bild fehlt */

a { color: var(--color-primary-strong); text-decoration: none; }

ul, ol { padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-primary); color: #fff; }

/* Skip-Link (Barrierefreiheit) */
.skip-link {
  position: absolute; left: var(--space-sm); top: -100%;
  z-index: var(--z-modal);
  background: var(--color-ink-fixed); color: var(--color-on-ink);
  padding: 0.7em 1.2em; border-radius: var(--radius-pill);
  transition: top var(--t-base) var(--ease-out-quart);
}
.skip-link:focus-visible { top: var(--space-sm); }

/* Screenreader-only */
.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;
}

/* ================================================================== */
/* 3. LAYOUT-HILFEN                                                    */
/* ================================================================== */
.container {
  width: 100%;
  max-width: none;                   /* Desktop: volle Breite, Ränder via --pad-inline */
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.container--wide { max-width: none; }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-surface-alt); }

.measure { max-width: var(--container-text); }
.center { text-align: center; margin-inline: auto; }

.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-md); }

/* ================================================================== */
/* 4. TYPOGRAFIE-KLASSEN                                               */
/* ================================================================== */
.display {
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.h-xl { font-size: var(--fs-800); }
.h-lg { font-size: var(--fs-700); }
.h-md { font-size: var(--fs-600); }
.h-sm { font-size: var(--fs-500); line-height: var(--lh-snug); }

.lead {
  font-size: var(--fs-500);
  line-height: 1.32;
  color: var(--color-text);
  font-weight: 400;
}
.muted { color: var(--color-text-muted); }
.text-balance { text-wrap: balance; }

/* Hervorgehobenes Wort im Heading: Marker-Highlight (umbruchsicher) */
.mark {
  --mark-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
  color: var(--color-ink);
  padding-inline: 0.08em;
  background-image: linear-gradient(transparent 58%, var(--mark-color) 58%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Heading-Keyword: kursive Serife (Bodoni Moda) mit Marken-Verlauf.
   Fallback ohne background-clip: kräftiges Markenblau. */
.hl {
  font-family: "Courgette", "Brush Script MT", cursive;
  font-style: normal;
  font-weight: 400;                 /* Courgette ist von Natur aus halbfett */
  font-size: 1.02em;
  line-height: 1;
  letter-spacing: 0.01em;
  padding-inline: 0.03em 0.06em;    /* Schwung-Überhang nicht abschneiden */
  color: var(--color-primary);      /* Royalblau, uni */
}
/* Auf dunklen Flächen (Dark Mode, CTA-Band) hellere Blau-Stufe */
:root[data-theme="dark"] .hl { color: var(--color-primary-strong); }
/* Amber auf dem dunklen CTA-Band – in BEIDEN Themes (Dark-Regel oben ist spezifischer) */
.cta-copy .hl,
:root[data-theme="dark"] .cta-copy .hl { color: #f0b35e; }

/* Wort-für-Wort-Reveal: delight.js zerlegt .words-reveal in .w-Spans.
   Ohne JS existieren keine .w-Spans -> Text bleibt normal sichtbar. */
/* Mit JS: Heading bis zur Zerlegung verstecken, sonst blitzt es auf
   langsamen Verbindungen erst sichtbar auf und verschwindet wieder.
   Sicherheitsnetz: nach 2.5s notfalls einblenden (falls JS hängt). */
@media (prefers-reduced-motion: no-preference) {
  html.js .words-reveal:not(.is-split) {
    visibility: hidden;
    animation: words-unhide 0s linear 2.5s forwards;
  }
}
@keyframes words-unhide { to { visibility: visible; } }
.words-reveal .w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.35em);
  transition: opacity 0.55s var(--ease-out-quart),
              filter 0.65s var(--ease-out-quart),
              transform 0.65s var(--ease-out-expo);
  transition-delay: calc(var(--wi, 0) * 70ms);
}
.words-reveal.words-in .w { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .words-reveal .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}
/* Ist ein Heading zerlegt, übernimmt der Wort-Reveal den Auftritt:
   Block-Animationen des Umfelds abschalten (sonst doppelt) */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy > .is-split, .hero .section-head > .is-split { animation: none; opacity: 1; }
  .reveal:has(> .words-reveal.is-split),
  .section-head.reveal:has(.words-reveal.is-split) {
    animation: none; opacity: 1; transform: none; filter: none;
  }
  /* … aber die übrigen Kinder (Subtext etc.) behalten ihren eigenen
     Fade+Blur-Entry — sonst hätte nur das Heading einen Auftritt */
  @supports (animation-timeline: view()) {
    .reveal:has(> .words-reveal.is-split) > :not(.words-reveal),
    .section-head.reveal:has(.words-reveal.is-split) > :not(.words-reveal) {
      opacity: 0; transform: translateY(24px); filter: blur(7px);
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 32%;
    }
  }
}
.mark--pink { --mark-color: color-mix(in srgb, var(--color-secondary) 42%, transparent); } /* warmer Amber-Marker */
.mark--teal { --mark-color: color-mix(in srgb, var(--color-tertiary) 32%, transparent); } /* Himmelblau-Marker */

/* farbiger Akzenttext (nutzt AA-sichere Töne) */
.accent-pink { color: var(--color-primary-strong); }
.accent-teal { color: var(--color-tertiary-ink); }

/* Eyebrow / Kicker – bewusst als EIN benanntes Marken-Element (Sticker) */
.sticker {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1;
  padding: 0.55em 0.95em;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.sticker--pink { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary-strong); }
.sticker--teal { background: var(--color-tertiary-soft); border-color: transparent; color: var(--color-tertiary-ink); }
.sticker--yellow { background: var(--color-secondary-soft); border-color: transparent; color: #7a5800; }

/* ================================================================== */
/* 5. BUTTONS                                                          */
/* ================================================================== */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-fill: color-mix(in srgb, var(--color-primary) 58%, #00102b);  /* deutlich tieferer Ton */
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1;
  padding: 0.66em 0.85em;   /* Höhe wie vorher, links/rechts schmaler */
  border-radius: var(--radius-sm);   /* nur leicht abgerundet (statt Pillenform) */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base) var(--ease-out-expo),
              color var(--t-base) var(--ease-out-quart),
              border-color var(--t-fast) var(--ease-out-quart);
  box-shadow: none;
}
/* WASSER-FÜLLUNG: ein großer Flüssigkeitskörper steigt mit welliger, wogender
   Oberfläche auf und neigt sich leicht diagonal (unten-links → oben-rechts).
   Der Körper ist viel größer als der Button → deckt ihn durchgehend ab, nur die
   Wasserlinie wandert hindurch. Langsam & flüssig. */
.btn::before {
  content: ""; position: absolute; z-index: -2;
  left: -70%; top: -110%; width: 240%; height: 320%;
  background: var(--btn-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,15 C12.5,11 12.5,19 25,15 C37.5,11 37.5,19 50,15 C62.5,11 62.5,19 75,15 C87.5,11 87.5,19 100,15 L100,100 L0,100 Z'/%3E%3C/svg%3E") 0 0 / 100px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,15 C12.5,11 12.5,19 25,15 C37.5,11 37.5,19 50,15 C62.5,11 62.5,19 75,15 C87.5,11 87.5,19 100,15 L100,100 L0,100 Z'/%3E%3C/svg%3E") 0 0 / 100px 100% repeat-x;
  transform-origin: 50% 50%;
  transform: rotate(12deg) translateY(94%);   /* Ruhe: Wasser vollständig unterhalb, nichts sichtbar */
  transition: transform 1.2s cubic-bezier(0.55, 0.12, 0.4, 1);
}
/* aufsteigende Bläschen */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 26% 76%, rgb(255 255 255 / 0.5)  0 2.3px, transparent 2.9px),
    radial-gradient(circle at 48% 86%, rgb(255 255 255 / 0.42) 0 1.7px, transparent 2.2px),
    radial-gradient(circle at 63% 80%, rgb(255 255 255 / 0.48) 0 2px,   transparent 2.6px);
  background-repeat: no-repeat;
  opacity: 0;
}
.btn:hover, .btn:focus-visible { transform: translateY(-3px); }
.btn:hover::before, .btn:focus-visible::before, .btn:active::before {
  transform: rotate(12deg) translateY(-12%);
  animation: water-ripple 1.6s linear infinite;
}
.btn:hover::after, .btn:focus-visible::after, .btn:active::after { animation: water-bubbles 2.1s ease-out 0.35s infinite; }
.btn:active { transform: translateY(-1px) scale(0.985); transition-duration: 90ms; }

@keyframes water-ripple { to { -webkit-mask-position: -100px 0; mask-position: -100px 0; } }
@keyframes water-bubbles {
  0%   { opacity: 0; transform: translateY(9px); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-15px); }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-fill: var(--color-primary-soft);   /* füllt sich mit hellem Blau */
  border-color: var(--color-border-strong);
  box-shadow: none;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn--invert {
  --btn-bg: var(--color-secondary);
  --btn-fg: #1a1305;
  --btn-fill: color-mix(in srgb, var(--color-secondary) 74%, #5a3d00);
  box-shadow: none;
}
.btn--lg { font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.02rem); padding: 0.8em 1.1em; }

/* Text-Link mit wachsendem Unterstrich */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--color-primary-strong);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-base) var(--ease-out-quart);
}
.link-arrow svg { transition: transform var(--t-base) var(--ease-out-expo); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ================================================================== */
/* 6. HEADER & NAVIGATION                                              */
/* ================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(251 252 254 / 0.78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background-color var(--t-base);
}
:root[data-theme="dark"] .site-header { background: rgb(18 18 20 / 0.8); }

/* Startseite (Klasse kommt aus delight.js): Header oben ausgeblendet,
   taucht beim Runterscrollen sanft auf. Tastatur-Fokus in der Navi holt
   ihn ebenfalls hervor (Skip-Link/Tab-Nutzer sehen, wo sie sind).
   fixed statt sticky: reserviert keinen Layout-Platz → der 100svh-Hero
   füllt den Viewport exakt, nichts lugt unten hervor. */
.site-header.hdr-hide {
  position: fixed; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out-quart), transform 0.45s var(--ease-out-quart),
              border-color var(--t-base), background-color var(--t-base);
}
.site-header.hdr-hide.is-in,
.site-header.hdr-hide.is-peek,
.site-header.hdr-hide:focus-within {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-header.hdr-hide { transition: border-color var(--t-base), background-color var(--t-base); }
}
.header-inner {
  display: flex; align-items: center;
  gap: clamp(0.5rem, 2vw, 1.1rem);
  padding-block: 0.85rem;
}
.header-inner > .brand { margin-right: auto; }   /* schiebt Navi + Aktionen nach rechts */

/* Wortmarke (echtes Logo · als CSS-Mask, färbt sich per currentColor) */
.brand {
  display: inline-flex; align-items: center;
  color: var(--color-ink);
  line-height: 1;
}
.brand-logo {
  display: block;
  height: 1.55rem;
  aspect-ratio: 1015 / 181;
  background-color: currentColor;
  -webkit-mask: url(../assets/logos/wordmark.png?v=1) center / contain no-repeat;
          mask: url(../assets/logos/wordmark.png?v=1) center / contain no-repeat;
  transition: opacity var(--t-base) var(--ease-out-expo);
}
.brand:hover .brand-logo { opacity: 0.82; }
/* Header: Brand-Blau auf hell, helles Ink auf dunkel */
.site-header .brand { color: var(--color-primary); }
:root[data-theme="dark"] .site-header .brand { color: var(--color-ink); }

/* Desktop-Navigation */
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.6rem); }
.nav a {
  position: relative;
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--fs-400);
  color: var(--color-ink);
  padding: 0.4em 0.2em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.1em;
  height: 2px; border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: right var(--t-base) var(--ease-out-quart);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--color-primary-strong); }

/* Dropdown unter „Leistungen" (CSS-only: hover + focus-within) */
.nav li { position: relative; }
.nav .caret {
  display: inline-block;                    /* Reset setzt svg auf block */
  width: 0.8em; height: 0.8em; margin-left: 0.1em; vertical-align: -0.1em;
  transition: transform var(--t-base) var(--ease-out-quart);
}
.nav li:hover .caret, .nav li:focus-within .caret { transform: rotate(180deg); }
.nav ul.subnav {
  position: absolute; top: 100%;
  /* Panel so verschieben, dass der Item-Text bündig unter dem Wort
     „Leistungen" beginnt (Trigger-Padding 0.2em – Panel- & Item-Padding) */
  left: calc(0.2em - 0.45rem - 0.75rem);
  min-width: 14.5rem; padding: 0.45rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.22s var(--ease-out-quart),
              transform 0.3s var(--ease-out-expo),
              visibility 0s linear 0.22s;
}
.nav li:hover > .subnav, .nav li:focus-within > .subnav {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(4px);
  transition-delay: 0s;
}
/* unsichtbare Brücke: kein Hover-Abriss zwischen Link und Panel */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.subnav li { width: 100%; }
.subnav a {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.subnav a::after { content: none; }        /* kein Underline-Grow im Panel */
.subnav a:hover, .subnav a:focus-visible { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.subnav a[aria-current="page"] { color: var(--color-primary-strong); background: var(--color-primary-soft); }
.subnav .subnav-all { margin-top: 0.2rem; border-top: 1px solid var(--color-border); padding-top: 0.25rem; }
.subnav .subnav-all a { font-weight: 500; font-size: var(--fs-300); color: var(--color-text-muted); }
.subnav .subnav-all a:hover { color: var(--color-primary-strong); }

.header-cta { display: none; height: 2.55rem; padding: 0 0.95em; }   /* gleiche Höhe wie Theme-Toggle, vertikal zentriert */

/* Theme-Umschalter (Dark / Light) */
.theme-toggle {
  flex: none;
  display: inline-grid; place-items: center;
  width: 2.55rem; height: 2.55rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: transform var(--t-base) var(--ease-out-expo),
              background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary-strong); transform: translateY(-2px); }
/* Icons gestapelt in derselben Grid-Zelle → weicher Wechsel (Crossfade + Drehung) */
.theme-toggle svg {
  grid-area: 1 / 1; width: 1.2rem; height: 1.2rem;
  transition: opacity 0.3s var(--ease-out-quart), transform 0.5s var(--ease-out-expo);
}
.theme-toggle .ic-sun  { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .ic-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-toggle:active { transform: translateY(-1px) scale(0.93); transition-duration: 90ms; }

/* ====== Mobile-Menü: halbhohes Bottom-Sheet ========================
   CSS-Toggle über versteckte Checkbox. Das Overlay hängt direkt an
   <body> → kein Containing-Block-Problem durch Header-Filter, das Sheet
   liegt immer korrekt am Viewport, egal wie weit gescrollt wurde. ===== */

.nav-checkbox { position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hamburger (Label) im Header */
.burger {
  flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.85rem; height: 2.85rem; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-ink);
  transition: transform var(--t-fast) var(--ease-out-expo);
}
.burger:active { transform: scale(0.94); }
.nav-checkbox:focus-visible ~ .site-header .burger {
  outline: 3px solid var(--color-focus); outline-offset: 3px;
}
.burger .bars, .burger .bars::before, .burger .bars::after {
  content: ""; display: block; width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor;
}
.burger .bars { position: relative; }
.burger .bars::before { position: absolute; top: -0.36rem; left: 0; right: 0; }
.burger .bars::after  { position: absolute; top:  0.36rem; left: 0; right: 0; }

/* Overlay (Backdrop + Sheet) – body-level */
.nav-overlay { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; }
.nav-checkbox:checked ~ .nav-overlay { visibility: visible; }
body:has(.nav-checkbox:checked), html.nav-open { overflow: hidden; }
/* Header beim offenen Menü mit verdunkeln (backdrop-filter würde sonst einen
   Stacking-Context bilden und über dem Overlay-Backdrop liegen). */
body:has(.nav-checkbox:checked) .site-header,
html.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav-backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgb(8 12 22 / 0.5);
  opacity: 0; transition: opacity 0.35s var(--ease-out-quart);
}
.nav-checkbox:checked ~ .nav-overlay .nav-backdrop { opacity: 1; }

.nav-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(58vh, 30rem); max-height: 90dvh;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -16px 44px rgb(var(--shadow-rgb) / 0.22);
  display: flex; flex-direction: column;
  padding: 0.5rem var(--space-md) max(env(safe-area-inset-bottom), 1rem);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease-out-expo);
  will-change: transform;
}
.nav-checkbox:checked ~ .nav-overlay .nav-sheet { transform: translateY(0); }

/* Kopf: Grab-Balken + „Menü" (Swipe-Zone zum Schließen) */
.nav-sheet-head { flex: none; text-align: center; padding-bottom: 0.4rem; touch-action: none; }
.nav-grab { display: block; width: 44px; height: 5px; margin: 0.25rem auto 0.6rem;
  border-radius: var(--radius-pill); background: var(--color-border-strong); cursor: grab; }
.nav-sheet-title { font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-500); color: var(--color-ink); line-height: 1; }

/* Scrollbare Menüpunkte */
.nav-sheet-nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0;
}
.nav-sheet-nav::-webkit-scrollbar { width: 0; }
.nav-sheet-nav a {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-500);
  color: var(--color-ink); padding: 0.7rem 0.65rem; border-radius: var(--radius-md);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nav-sheet-nav a .chev { margin-left: auto; opacity: 0.35; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-sheet-nav a:active { background: var(--color-surface-alt); transform: scale(0.99); }
.nav-sheet-nav a:active .chev { transform: translateX(3px); opacity: 0.7; }
/* Aktive Seite: nur blaue Schrift als Indikator (kein Ring, kein Punkt) */
.nav-sheet-nav a[aria-current="page"] { color: var(--color-primary-strong); }
/* Unterpunkte (Social Media / Webdesign) – eingerückt, eine Stufe leiser */
.nav-sheet-nav a.sub {
  padding-left: 2rem;
  font-size: var(--fs-400); font-weight: 500;
  color: var(--color-text);
}
.nav-sheet-nav a.sub[aria-current="page"] { color: var(--color-primary-strong); }
.nav-sheet { outline: none; }   /* programmatischer Fokus beim Öffnen ohne sichtbaren Ring */

/* Fuß: primärer CTA */
.nav-sheet-foot { flex: none; padding-top: 0.6rem; }
.nav-sheet-foot .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a {
    opacity: 0; animation: sheet-link 0.4s var(--ease-out-expo) both;
  }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(1) { animation-delay: 0.10s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(2) { animation-delay: 0.15s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(3) { animation-delay: 0.20s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(4) { animation-delay: 0.25s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(5) { animation-delay: 0.30s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(6) { animation-delay: 0.35s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(7) { animation-delay: 0.40s; }
  .nav-checkbox:checked ~ .nav-overlay .nav-sheet-nav a:nth-child(8) { animation-delay: 0.45s; }
}
@keyframes sheet-link { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Sticky-Header verdichtet sich beim Scrollen (scroll-driven) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header {
      animation: header-solid linear both;
      animation-timeline: scroll(root);
      animation-range: 24px 140px;
    }
  }
}
@keyframes header-solid {
  to {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
  }
}

@media (min-width: 880px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .burger, .nav-overlay { display: none; }
}

/* ================================================================== */
/* 7. HERO                                                            */
/* ================================================================== */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-xl); overflow: hidden; }
.hero-grid { display: grid; gap: var(--space-lg); align-items: center; }
.hero-copy { position: relative; z-index: var(--z-base); }
.hero h1 { margin-block: var(--space-sm); }
.hero .lead { max-width: 46ch; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-md);
}
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
  margin-top: var(--space-md);
  font-size: var(--fs-300); color: var(--color-text-muted);
}
.hero-trust > span { min-width: 0; }
.hero-trust b { color: var(--color-ink); font-family: var(--font-heading); }

/* Hero-Bild-Collage */
.hero-media { position: relative; min-height: 320px; }
.hero-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-media .photo-main { position: relative; z-index: 2; aspect-ratio: 4 / 5; object-fit: cover; }

/* Hero-Video mit „bepromoted"-Reveal-Overlay (sync zum 5s-Loop) */
.hero-video-wrap {
  position: relative; z-index: 2;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-video-wrap .photo-main {
  display: block; width: 100%; border-radius: 0; box-shadow: none;
}
.hero-video-brand {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.04em;
  padding: 1.4em 1em 1.3em;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1;
  color: #fff; letter-spacing: var(--tracking-tight);
  background: linear-gradient(to top, rgb(10 16 32 / 0.92) 0%, rgb(10 16 32 / 0.7) 45%, transparent 100%);
  opacity: 0;
  animation: hero-brand-reveal 11s var(--ease-out-quart) infinite;
}
.hero-video-brand .be { color: var(--color-tertiary); font-weight: 700; }
.hero-video-brand .dot {
  width: 0.34em; height: 0.34em; margin-left: 0.12em;
  border-radius: 50%; background: var(--color-secondary);
}
@keyframes hero-brand-reveal {
  0%, 58%   { opacity: 0; transform: translateY(0.5em); }
  72%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-brand { animation: none; opacity: 1; transform: none; }
}
.hero-media .photo-float {
  position: absolute; width: 44%; aspect-ratio: 1; object-fit: cover;
  border: 5px solid var(--color-bg); z-index: 3;
}
.hero-media .photo-float--tl { top: -6%; left: -7%; }
.hero-media .photo-float--br { bottom: -7%; right: -6%; z-index: 4; }

/* schwebende Sticker im Hero */
.float-tag {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-300);
  background: var(--color-surface); color: var(--color-ink);
  padding: 0.5em 0.85em; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.float-tag--a { top: 12%; right: -4%; }
.float-tag--b { bottom: 16%; left: -8%; }

/* rotierender CTA-Button-Sticker */
.spin-badge {
  position: absolute; right: 4%; bottom: -4%; z-index: 6;
  width: clamp(86px, 11vw, 124px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.spin-badge .ring {
  position: absolute; inset: 0;
  animation: spin 14s linear infinite;
}
.spin-badge .ring text { font-family: var(--font-heading); font-weight: 600; fill: var(--color-ink); font-size: 9.2px; letter-spacing: 0.06em; }
.spin-badge .core {
  width: 48%; aspect-ratio: 1; border-radius: var(--radius-round);
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: var(--shadow-color);
}

/* dekorative, animierte Farb-Blobs im Hintergrund */
.blob {
  position: absolute; z-index: var(--z-deco);
  border-radius: 48% 52% 60% 40% / 50% 45% 55% 50%;
  filter: blur(8px); opacity: 0.5;
  pointer-events: none;
}
.blob--1 { width: 38vmax; height: 38vmax; top: -16vmax; right: -10vmax;
  background: radial-gradient(circle at 30% 30%, var(--color-primary), transparent 70%); opacity: 0.13;
  animation: float-a 18s ease-in-out infinite; }
.blob--2 { width: 30vmax; height: 30vmax; bottom: -14vmax; left: -10vmax;
  background: radial-gradient(circle at 50% 50%, var(--color-tertiary), transparent 70%); opacity: 0.12;
  animation: float-b 22s ease-in-out infinite; }

@keyframes float-a {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%     { transform: translate(-3vmax, 3vmax) rotate(18deg) scale(1.08); }
}
@keyframes float-b {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%     { transform: translate(3vmax, -2vmax) rotate(-16deg) scale(1.1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  .hero-media { min-height: 480px; }
}

/* ================================================================== */
/* HOME-HERO · elliptische Leistungs-Umlaufbahn mit zentrierter Headline */
/* ================================================================== */
@property --orbit { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --orbit-boost { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.hero--home { position: sticky; top: 0; z-index: var(--z-deco);
  /* exakt ein Viewport: beim Start ist NUR der Hero zu sehen */
  min-height: max(620px, 100vh);
  min-height: max(620px, 100svh);
  display: grid; place-items: center; text-align: center; overflow: hidden; }

/* Partikel-Tiefenfeld (Canvas, kommt aus delight.js): unterste Ebene im
   Hero; skaliert mit der Zoom-Entrance mit und wird von der Rand-Vignette
   miterfasst → Geschwindigkeit liest sich am Rand unscharf */
.hero-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Entrance: man fliegt auf den Hero zu — Start klein (weit weg), dann
   weiches Heranzoomen mit leichtem Überschwingen beim Ankommen (Back-Out-
   Kurve). Die Unschärfe liegt NICHT auf den Elementen, sondern nur an den
   Rändern (::after mit backdrop-filter + Radial-Maske = Speed-Vignette),
   und löst sich beim Landen auf. fill backwards/forwards: nach dem Ende
   bleibt kein transform/filter am sticky Hero zurück. */
@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;   /* über copy(1) + ring(0), lokal im Hero */
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: radial-gradient(115% 115% at 50% 50%, transparent 46%, #000 82%);
    mask-image: radial-gradient(115% 115% at 50% 50%, transparent 46%, #000 82%);
    animation: hero-edge-blur 1.6s linear forwards;
  }
}
@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; }
}

/* Curtain-Scroll: der Hero bleibt beim Scrollen stehen (sticky), der
   restliche Seiteninhalt zieht sich als Vorhang mit runder Oberkante
   und weichem Schatten darüber. Reduced Motion: normales Scrollen. */
.page-curtain {
  position: relative; z-index: var(--z-base);
  background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -20px 48px rgb(var(--shadow-rgb) / 0.12);
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  .hero--home { position: relative; }
  .page-curtain { border-radius: 0; box-shadow: none; }
}

/* Feinschliff: Headline & Bahn treten leicht zurück, während der
   Vorhang sie zudeckt (scroll-getrieben, nur wo unterstützt) */
@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;
    }
  }
}
@keyframes hero-settle {
  to { transform: translate(-50%, -50%) scale(0.93); opacity: 0.3; }
}
@keyframes hero-dim { to { opacity: 0.15; } }
.hero--home .hero-grid { grid-template-columns: 1fr; width: 100%; justify-items: center; }
.hero--home .hero-copy {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* bewusst schmaler als die Vollbreiten-Container: Texte bleiben in der Ellipse */
  width: min(calc(100% - 2 * var(--pad-inline)), 1320px); max-width: 100%;
  z-index: var(--z-base); text-align: left;
}

/* zweiteilige, diagonal verteilte Headline (Aufbau à la Grain & Mortar) */
.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.95;
  letter-spacing: var(--tracking-tight); color: var(--color-ink);
}
.hero-headline .hl-a { text-align: left; }                       /* Heading/Subheading 1 ganz nach links  */
.hero-headline .hl-b { text-align: right; margin-top: 0.16em; }  /* Heading/Subheading 2 ganz nach rechts */
.hero-headline .hl-word {
  display: inline-block; font-size: clamp(3rem, 0.9rem + 9vw, 8.6rem);
  /* weicher Halo in BG-Farbe → verdeckt Icons direkt hinter den Buchstaben */
  text-shadow: 0 0 24px var(--color-bg), 0 0 24px var(--color-bg), 0 0 12px var(--color-bg);
}
.hero-headline .hl-amp { color: var(--color-primary); font-weight: 700; padding-inline: 0.1em; }

/* Wellen-Hover: delight.js zerlegt alle Hero-Texte in .ch-Buchstaben;
   bei Hover läuft eine weiche Welle einmal von links nach rechts durch
   (--wave-step = Buchstaben-Versatz, kommt per Inline-Style aus dem JS) */
.hero-headline .ch { display: inline-block; }
.hero-headline .wv { display: inline-block; white-space: nowrap; }  /* Umbruch nur ZWISCHEN Wörtern */
@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;  /* easeInOutSine */
    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.8rem, 0.72rem + 0.38vw, 1.05rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 1.1em;
  text-shadow: 0 0 18px var(--color-bg), 0 0 18px var(--color-bg);
}
:root[data-theme="dark"] .hero-headline .hl-kicker { color: var(--color-primary-strong); }
.hero-headline .hl-sub {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.05rem, 0.9rem + 0.65vw, 1.5rem); line-height: 1.4;
  color: var(--color-text-muted); margin-top: 0.55rem; max-width: 32ch;
}
.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(47vw, 500px);   /* horizontaler Radius  */
  --Ry: min(33vw, 335px);   /* vertikaler Radius (flacher → Ellipse) */
  position: absolute; inset: 0;
  z-index: var(--z-deco); pointer-events: none;
}
.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(--color-border-strong);
  opacity: 0.65;
}
.hero-ring .svc {
  position: absolute; top: 50%; left: 50%;
  width: clamp(50px, 6vw, 82px); aspect-ratio: 1;
  /* Fallback (kein trig/@property): statischer Kreis via Rotation */
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--Rx))) rotate(calc(-1 * var(--a)));
}
.hero-ring .svc-i {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--svc-bg, var(--color-surface));
  border: 1px solid var(--color-border);
  border-color: color-mix(in srgb, var(--svc-ink, var(--color-primary)) 22%, var(--color-border));
  border-radius: 26%;
  box-shadow: var(--shadow-md);
  color: var(--svc-ink, var(--color-primary));
  will-change: transform;
}
.hero-ring .svc-i svg { width: 52%; height: 52%; will-change: transform; }

/* Lebendige Ellipse: Icons sind anklickbar (Pop + Konfetti, delight.js),
   der Magnet-Versatz liegt auf dem svg (Orbit auf .svc, Leben auf .svc-i) */
.hero-ring .svc { pointer-events: auto; cursor: pointer; }
.hero-ring { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .svc-i.is-pop { animation: svc-pop 0.5s var(--ease-out-expo); }
}
@keyframes svc-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1); }
}

/* Jede Icon-Box bekommt ihre eigene Farbwelt (Fläche + Icon-Tinte).
   Blau-Familie bleibt der Anker, dazwischen freundliche Fremdfarben. */
.svc--social { --svc-bg: #e9eefc; --svc-ink: #2e5fe6; }   /* Royalblau  */
.svc--web    { --svc-bg: #e6effa; --svc-ink: #2767a6; }   /* Himmelblau */
.svc--mega   { --svc-bg: #fbeed7; --svc-ink: #b26a0e; }   /* Amber      */
.svc--foto   { --svc-bg: #e2f4ec; --svc-ink: #1d7a5f; }   /* Jade       */
.svc--video  { --svc-bg: #fdeaea; --svc-ink: #c2453f; }   /* Koralle    */
.svc--design { --svc-bg: #f0eafc; --svc-ink: #7048c8; }   /* Violett    */
.svc--data   { --svc-bg: #e7f4e2; --svc-ink: #45803a; }   /* Grün       */
.svc--spark  { --svc-bg: #fdf3d6; --svc-ink: #a3780f; }   /* Gold       */

: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; }

/* Gooey-Cursor im Home-Hero: brand-blauer Blob-Schweif, der der Maus
   träge folgt und per SVG-Filter (#goo-f) mit sich selbst verschmilzt.
   Reines Add-on: ohne JS unsichtbar, auf Touch & Reduced Motion aus. */
.goo {
  position: absolute; inset: 0; z-index: var(--z-deco);
  pointer-events: none;
  filter: url(#goo-f) blur(1px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-quart);
}
.goo.is-on { opacity: 0.2; }
:root[data-theme="dark"] .goo.is-on { opacity: 0.28; }
.goo-b {
  position: absolute; top: 0; left: 0;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  will-change: transform;
}
.goo-b1 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.goo-b2 { width: 76px;  height: 76px;  margin: -38px 0 0 -38px; }
.goo-b3 { width: 48px;  height: 48px;  margin: -24px 0 0 -24px; }
@media (hover: none), (pointer: coarse) { .goo { display: none; } }
@media (prefers-reduced-motion: reduce) { .goo { display: none; } }

/* moderne Browser: echte elliptische Umlaufbahn (sin/cos + @property) */
@supports (top: calc(sin(45deg) * 1px)) {
  .ring-rotor { animation: ring-orbit 70s linear infinite; }
  /* Showtime (delight.js): eine schnelle Extra-Umdrehung ADDITIV über
     --orbit-boost — endet bei exakt 360° → kein Sprung beim Aufräumen */
  .ring-rotor.is-spin {
    animation: ring-orbit 70s linear infinite,
               ring-boost 1.8s cubic-bezier(0.76, 0, 0.24, 1);   /* easeInOutQuart: sanfter rein & raus */
  }
  .hero-ring .svc {
    transform: translate(-50%, -50%);
    left: calc(50% + var(--Rx) * sin(calc(var(--orbit) + var(--orbit-boost) + var(--a))));
    top:  calc(50% - var(--Ry) * cos(calc(var(--orbit) + var(--orbit-boost) + var(--a))));
    /* Fade: am linken/rechten Bahn-Rand (hinter dem Text) ausblenden,
       oben/unten voll sichtbar → Icons verschwinden sanft hinter dem Text */
    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; } }

/* jedes Icon bekommt eine eigene kleine Lebens-Animation */
.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); } }

/* Mobile: Bahn ist der Desktop-Showeffekt → hier die zweiteilige Headline kompakt */
@media (max-width: 819px) {
  .hero--home { min-height: max(620px, 100vh); min-height: max(620px, 100svh); }
  /* zentrierte, schmale Headline mittig in der Ellipse */
  .hero--home .hero-copy { max-width: min(66vw, 260px); text-align: center; }
  .hero-headline .hl-a, .hero-headline .hl-b,
  .hero-headline .hl-sub { text-align: center; margin-inline: auto; transform: none; }
  .hero-headline .hl-kicker { text-align: center; margin-bottom: 0.9em; }
  .hero-headline .hl-word { font-size: clamp(1.8rem, 1rem + 4.4vw, 2.6rem); }
  .hero-headline .hl-sub { font-size: clamp(0.85rem, 0.82rem + 0.3vw, 1rem); max-width: 26ch; }
  /* Hochformat-Ellipse rund um die Headline (wie Grain & Mortar mobil) */
  .hero-ring { display: block; --Rx: min(36vw, 150px); --Ry: min(64vw, 290px); }
  .hero-ring .svc { width: clamp(34px, 9.5vw, 44px); }
  .hero-ring .svc { opacity: 1; }   /* keine Fade → alle Icons sichtbar */
}

@media (prefers-reduced-motion: reduce) {
  .ring-rotor, .hero-ring .svc-i { animation: none; }
}

/* ================================================================== */
/* 8. MARQUEE / LAUFBAND                                               */
/* ================================================================== */
.marquee {
  position: relative; overflow: hidden;
  padding-block: var(--space-sm);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex; align-items: center; flex: none;
  gap: var(--space-md);
  padding-right: var(--space-md);   /* gleicher Abstand an der Nahtstelle zwischen den Gruppen */
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-500); color: var(--color-ink);
  white-space: nowrap; opacity: 0.85;
}
.marquee-item .dot { color: var(--color-primary); }
@keyframes marquee { to { transform: translateX(-25%); } }

/* ================================================================== */
/* 9. KARTEN, GRIDS & FEATURES                                         */
/* ================================================================== */
.grid-auto {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-2 { display: grid; gap: var(--space-md); }
.grid-3 { display: grid; gap: var(--space-md); }
@media (min-width: 720px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Grid-/Flex-Kinder dürfen schrumpfen → verhindert horizontales Überlaufen
   durch große Überschriften (CSS-Grid „blowout“). */
.hero-grid > *, .feature > *, .grid-2 > *, .grid-3 > *, .grid-auto > * { min-width: 0; }

.section-head { max-width: 56ch; margin-bottom: var(--space-md); }
.section-head.center { margin-inline: auto; }
.section-head p { margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--fs-500); line-height: 1.38; }

/* Leistungs-/Inhaltskarte */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base) var(--ease-out-expo),
              border-color var(--t-base);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out-expo); }
.card:hover .card-media img { transform: scale(1.07); }
/* Hauptleistungen (Social Media & Webdesign) – größere Bühne in eigener Reihe */
.card--major .card-media { aspect-ratio: 16 / 9; }
.card--major h3 { font-size: var(--fs-600); }
.card--major .card-body { padding: clamp(1.25rem, 1rem + 1.4vw, 2.2rem); }
/* ── Leistungs-Bühne (Startseite) ────────────────────────────────────
   Die 5 Bilder schieben sich als sticky Stack übereinander. DARÜBER
   liegt EIN sticky Overlay mit EINEM Pfad (dünne Linie, füllt sich mit
   dem Gesamt-Fortschritt blau von links nach rechts) und EINER Text-
   Position: die Copies liegen deckungsgleich übereinander und blenden
   scroll-gekoppelt um, sobald das nächste Bild die Linie kreuzt
   (delight.js setzt .svc-armed, .is-active und den Füllstand). */
.svc-stage {
  --panel-top: 0px;
  --line-pos: 32%;                     /* Höhe des Pfads (mobil höher → mehr Platz für Copy) */
  --copy-gap: clamp(1.1rem, 3.5vh, 2rem);
  --panel-h: max(430px, min(56.25vw, calc(100vh - var(--panel-top))));
  --panel-h: max(430px, min(56.25vw, calc(100svh - var(--panel-top))));
  position: relative; margin-top: var(--space-lg);
}
@media (min-width: 880px) {
  .svc-stage { --panel-top: 4.3rem; --line-pos: 46%; }  /* Header bleibt sichtbar über dem Panel */
}
.svc-panel {
  position: sticky; top: var(--panel-top);
  height: var(--panel-h);
  overflow: hidden;
}
.svc-panel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.svc-panel::after {              /* Scrim: Textkontrast auf jedem Foto */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(9 13 22 / 0.42) 0%, rgb(9 13 22 / 0.36) 52%, rgb(9 13 22 / 0.66) 100%);
}

/* Overlay: liegt über ALLEN Bildern, nimmt keinen Fluss-Platz ein und
   pinnt exakt wie die Panels → Pfad und Copy stehen immer an derselben
   Stelle, nur die Bilder wechseln darunter. */
.svc-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.svc-overlay-inner { position: sticky; top: var(--panel-top); height: var(--panel-h); }

/* der EINE Pfad */
.svc-bar {
  position: absolute; top: var(--line-pos); left: 0; right: 0; height: 2px;
  background: rgb(255 255 255 / 0.32);
}
.svc-fill {                      /* blaue Füllung, wächst von links nach rechts */
  position: absolute; inset: 0; display: block;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
}

/* die EINE Text-Position */
.svc-frame {
  position: relative;
  width: calc(100% - 2 * var(--pad-inline));
  margin-inline: auto; height: 100%;
}
.svc-copybox {
  position: absolute; left: 0; right: 0;
  top: calc(var(--line-pos) + var(--copy-gap));
  display: grid; justify-items: start;
  gap: clamp(0.6rem, 1.4vh, 1rem);
  visibility: hidden; pointer-events: none;
  transition: visibility 0s 0.34s;       /* Box erst NACH dem Ausblenden der Kinder weg */
}
.svc-copybox.is-active {
  visibility: visible; pointer-events: auto;
  transition: visibility 0s;
}

/* Umblenden mit Varianz: die Kinder animieren einzeln. Verliert eine Copy
   .is-active, blenden alle Kinder in 0.3s (Ease-in) aus; die neue fährt
   danach gestaffelt rein — jedes Element mit eigener Choreografie. */
.svc-armed .svc-copybox > * {
  opacity: 0;
  transition: opacity   0.3s cubic-bezier(0.55, 0, 0.8, 0.4),
              transform 0.3s cubic-bezier(0.55, 0, 0.8, 0.4),
              clip-path 0.3s cubic-bezier(0.55, 0, 0.8, 0.4),
              filter    0.3s cubic-bezier(0.55, 0, 0.8, 0.4);
}
.svc-armed .svc-copybox .svc-num  { transform: translateY(-12px); }
.svc-armed .svc-copybox .svc-chip { clip-path: inset(0 100% 0 0); }   /* eingefahren */
.svc-armed .svc-copybox h3        { transform: translateY(30px); filter: blur(8px); }
.svc-armed .svc-copybox p         { transform: translateY(22px); }
.svc-armed .svc-copybox .svc-cta  { transform: translateY(16px) scale(0.88); }

.svc-copybox.is-active > * { opacity: 1; }
.svc-copybox.is-active .svc-num {      /* Nummer senkt sich von oben ein */
  transform: none;
  transition: opacity 0.45s var(--ease-out-quint) 0.32s,
              transform 0.45s var(--ease-out-quint) 0.32s;
}
.svc-copybox.is-active .svc-chip {     /* Chip fährt von links nach rechts aus */
  clip-path: inset(0 0% 0 0);
  transition: opacity 0.2s linear 0.38s,
              clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.38s;   /* easeInOutCubic */
}
.svc-copybox.is-active h3 {            /* Heading steigt auf und klart auf */
  transform: none; filter: none;
  transition: opacity 0.55s var(--ease-out-quint) 0.5s,
              transform 0.6s var(--ease-out-quint) 0.5s,
              filter 0.55s var(--ease-out-quint) 0.5s;
}
.svc-copybox.is-active p {
  transform: none;
  transition: opacity 0.55s var(--ease-out-quint) 0.6s,
              transform 0.6s var(--ease-out-quint) 0.6s;
}
.svc-copybox.is-active .svc-cta {      /* Button: eigener Pop mit Überschwinger */
  transform: none;
  transition: opacity 0.3s linear 0.72s,
              transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0.72s;
}

/* Ohne JS (kein .svc-armed): erste Copy dauerhaft zeigen */
.svc-stage:not(.svc-armed) .svc-copybox:first-child { visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .svc-copybox, .svc-copybox.is-active,
  .svc-armed .svc-copybox > *, .svc-copybox.is-active > * { transition: none; }
}
.svc-num {                       /* Nummer sitzt links direkt über dem Pfad */
  position: absolute; left: 0;
  bottom: calc(100% + var(--copy-gap) + 0.7rem);
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-500); color: rgb(255 255 255 / 0.9);
}
.svc-num i {
  font-style: normal; font-size: 0.55em;
  color: rgb(255 255 255 / 0.6); margin-left: 0.35em;
}
.svc-chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.42em 1em; border-radius: var(--radius-pill);
  background: var(--pc-bg, #fff); color: var(--pc-ink, #182338);
  font-weight: 700; font-size: var(--fs-300);
}
/* Chip-Farbwelten = dieselben wie die Hero-Icons (fix, Foto-Hintergrund
   ist in beiden Themes gleich dunkel) */
.svc-copybox[data-accent="social"] { --pc-bg: #e9eefc; --pc-ink: #1f49c2; }
.svc-copybox[data-accent="web"]    { --pc-bg: #e6effa; --pc-ink: #2767a6; }
.svc-copybox[data-accent="foto"]   { --pc-bg: #e2f4ec; --pc-ink: #1d7a5f; }
.svc-copybox[data-accent="video"]  { --pc-bg: #fdeaea; --pc-ink: #c2453f; }
.svc-copybox[data-accent="design"] { --pc-bg: #f0eafc; --pc-ink: #7048c8; }
.svc-copybox h3 {
  color: #fff;
  font-size: clamp(1.65rem, 1rem + 3.2vw, 3.4rem);
  line-height: 1.05; max-width: 22ch;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.25);
}
.svc-copybox p {
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.2rem);
  max-width: 52ch; text-wrap: pretty;
}
.svc-cta {                       /* weißer Pill-Button, erbt den Wasser-Fill.
                                    Feste Farben: Foto-Hintergrund ist in
                                    beiden Themes gleich (kein Theme-Ink!) */
  --btn-bg: #fff;
  --btn-fg: #182338;
  --btn-fill: var(--pc-bg, #e9eefc);
  margin-top: 0.4rem;
}
.svc-cta:hover { --btn-fg: var(--pc-ink, #182338); }

/* Die Leistungs-Section endet mit der vollbreiten Bühne: kein Bottom-
   Padding, das letzte Bild läuft direkt in die nächste Section. */
.section:has(.svc-stage) { padding-bottom: 0; }

/* ── Testimonial (Kundenstimme, Startseite) ──────────────────────────
   Eine kurze Kundenbewertung: 5 Sterne, großes zentriertes Zitat,
   Quelle darunter — kein Bild, keine Liste. */
.statement {
  margin: 0;
  padding-block: var(--space-3xl);
  text-align: center;
}
.statement-quote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 1rem + 3.8vw, 4rem);
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
.statement-quote p { margin: 0; font: inherit; }
.card-emoji {
  position: absolute; top: 0.8rem; left: 0.8rem;
  width: 2.8rem; height: 2.8rem; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--color-surface); box-shadow: var(--shadow-md);
  transition: transform var(--t-base) var(--ease-out-expo), box-shadow var(--t-base);
}
.card:hover .card-emoji { transform: translateY(-2px) rotate(-8deg) scale(1.1); box-shadow: var(--shadow-lg); }
/* Emoji in reinen Text-Karten (ohne Bild): im Textfluss statt als Overlay */
.card-body > .card-emoji { position: static; margin-bottom: 0.2rem; background: var(--color-surface-alt); box-shadow: none; }
.card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card-body h3 { font-size: var(--fs-500); }
.card-body p { color: var(--color-text-muted); font-size: var(--fs-300); }
.card-body .link-arrow { margin-top: auto; padding-top: 0.4rem; }

/* eigene Akzentfarbe je Dienstleistung */
.card[data-accent="social"] { --card-accent: #2e5fe6; }  /* Royalblau */
.card[data-accent="web"]    { --card-accent: #12b5a5; }  /* Teal */
.card[data-accent="foto"]   { --card-accent: #ec9f3a; }  /* Amber */
.card[data-accent="video"]  { --card-accent: #f2557d; }  /* Rosé */
.card[data-accent="design"] { --card-accent: #22b073; }  /* Grün */
.card[data-accent] .card-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px;
  background: var(--card-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out-quart);
}
.card[data-accent]:hover .card-media::after { transform: scaleX(1); }
/* „Mehr erfahren" in der jeweiligen Karten-Farbe -> klare Identität */
.card[data-accent] .link-arrow { color: var(--card-accent); }

/* Feature-Zeile (Bild + Text alternierend) */
.feature {
  display: grid; gap: var(--space-lg); align-items: center;
}
.feature-media {
  overflow: hidden;                     /* Zoom bleibt in den runden Ecken */
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.feature-media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out-expo);
}
.feature-media:hover img { transform: scale(1.05); }
.feature-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: var(--space-sm); }
.feature-list li {
  display: flex; gap: 0.7em; align-items: flex-start;
  font-size: var(--fs-400);
}
.feature-list .ic { flex: none; color: var(--color-tertiary-ink); margin-top: 0.15em; }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--reverse .feature-media { order: 2; }
}

/* Vertrauens-Band: schlanke Inline-Zahlen statt großem Hero-Metric-Raster */
.facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline;
  gap: 0.6rem clamp(1.5rem, 4vw, 3.25rem);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.fact { display: flex; align-items: baseline; gap: 0.5em; }
.fact b {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-600); color: var(--color-primary-strong);
  line-height: 1;
}
.fact span { font-size: var(--fs-300); color: var(--color-text-muted); }

/* Mobile: sauberes 2×2-Raster, Zahl oben, Label darunter */
@media (max-width: 600px) {
  .facts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-sm);
    padding: var(--space-md);
  }
  .fact { flex-direction: column; align-items: center; gap: 0.2em; text-align: center; }
  .fact span { line-height: 1.25; }
}

/* Prozess-Schritte (echte Sequenz – Nummern tragen Information) */
.steps { counter-reset: step; display: grid; gap: var(--space-md); }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative; padding: var(--space-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base) var(--ease-out-expo), border-color var(--t-base);
}
.step:hover { transform: translateY(-6px) scale(1.04); box-shadow: var(--shadow-lg); border-color: transparent; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-600); color: var(--color-primary);
  display: block; margin-bottom: 0.3rem;
}
.step h3 { font-size: var(--fs-500); margin-bottom: 0.3rem; }
.step p { font-size: var(--fs-300); color: var(--color-text-muted); }

/* Schritte ploppen beim Scrollen nacheinander (1 → 4) auf */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps .step {
      opacity: 0; transform: scale(0.8) translateY(16px);
      animation: step-pop linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 14%;
    }
    .steps .step:nth-child(2) { animation-range: entry 7%  cover 21%; }
    .steps .step:nth-child(3) { animation-range: entry 14% cover 28%; }
    .steps .step:nth-child(4) { animation-range: entry 21% cover 35%; }
  }
}
@keyframes step-pop { to { opacity: 1; transform: none; } }

/* ================================================================== */
/* 10. CTA-BÄNDER                                                      */
/* ================================================================== */
/* CTA unten – Anthropic-Stil: abgerundete Karte dehnt sich beim Scrollen
   butterweich auf volle Breite aus. Verlauf + Grain-Textur + animierter Pfau
   leben zusammen im geclippten Karten-Layer (.cta-clip). */
.cta-band {
  position: relative;
  width: 100%;
  padding-block: clamp(4rem, 3rem + 5.5vw, 7rem);
  color: var(--color-on-ink);
}
/* Die Karte – startet klein & abgerundet, dehnt sich beim Scrollen butterweich
   auf volle Breite aus. Hohe Karte, Text vertikal mittig. */
.cta-clip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: center;                 /* Inhalt vertikal in die Mitte */
  min-height: min(74vh, 640px);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  /* Universum: schwarzes Anthrazit-Space mit nur dezentem Marken-Glow */
  background:
    radial-gradient(58% 80% at 84% 18%, rgb(63 111 224 / 0.14) 0%, transparent 60%),
    radial-gradient(52% 72% at 12% 88%, rgb(120 124 134 / 0.10) 0%, transparent 64%),
    radial-gradient(38% 52% at 68% 78%, rgb(120 110 150 / 0.07) 0%, transparent 60%),
    linear-gradient(160deg, #1b1c20 0%, #121316 55%, #050506 100%);
  clip-path: inset(0 0 round 0);         /* Ruhe-/Fallback-Zustand: voll ausgebreitet */
}
/* Sternenhimmel: zwei driftende, funkelnde Ebenen + Sternschnuppe */
.cta-clip::after {
  content: "";
  position: absolute; inset: -18%; z-index: 0;
  background: url(../assets/img/stars-sm.svg) repeat;
  background-size: 640px 640px;
  pointer-events: none;
  animation: stars-drift 110s linear infinite alternate,
             stars-twinkle 5s ease-in-out infinite alternate;
}
.cta-stars {
  position: absolute; inset: -18%; z-index: 0;
  background: url(../assets/img/stars-lg.svg) repeat;
  background-size: 900px 900px;
  pointer-events: none;
  animation: stars-drift 160s linear infinite alternate-reverse,
             stars-twinkle 7.5s ease-in-out infinite alternate-reverse;
}
.cta-stars::after {                       /* Sternschnuppe, alle ~9s kurz */
  content: "";
  position: absolute; top: 24%; left: 68%;
  width: 130px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0) 100%);
  opacity: 0;
  transform: rotate(-32deg);
  animation: cta-shoot 9s ease-in infinite 3.5s;
}
@keyframes stars-drift { to { transform: translate3d(-70px, -44px, 0); } }
@keyframes stars-twinkle { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes cta-shoot {
  0%, 86% { opacity: 0; transform: rotate(-32deg) translateX(0); }
  89%     { opacity: 0.9; }
  95%     { opacity: 0; transform: rotate(-32deg) translateX(-320px); }
  100%    { opacity: 0; transform: rotate(-32deg) translateX(-320px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-clip::after, .cta-stars, .cta-stars::after { animation: none; }
  .cta-stars::after { opacity: 0; }
}
/* feine Grain-Textur (feTurbulence) – als ::before, hinter dem Inhalt */
.cta-clip::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
}
.cta-inner {
  position: relative; z-index: 1;        /* über den Sternen-Ebenen */
  max-width: min(52rem, 76vw);           /* passt immer in die kleine Startkarte */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Schwebende Emoji-Rakete (Video mit echtem Alpha; Fallback: Standbild) */
.cta-rocket-media {
  position: relative;
  width: clamp(9rem, 20vw, 15rem);
  justify-self: end;
  pointer-events: none;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
}
/* Bild = immer sichtbare Basis (statische Rakete) */
.cta-rocket-media img { display: block; width: 100%; height: auto; }
/* Video = Overlay darüber; spielt es, überdeckt es das Bild */
.cta-rocket-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.cta-rocket-media.is-playing img { opacity: 0; }   /* kein Doppelbild, sobald Video läuft */
@media (prefers-reduced-motion: reduce) {
  .cta-rocket-media video { display: none; }
}
@media (max-width: 760px) {
  .cta-clip { min-height: auto; }   /* Karte wächst mit -> Rakete wird nicht abgeschnitten */
  .cta-inner { grid-template-columns: 1fr; }
  .cta-inner .cta-copy { text-align: center; }                     /* Text zentriert (höhere Spezifität) */
  .cta-inner .cta-copy p { margin-inline: auto; }
  .cta-inner .cta-copy .hero-actions { justify-content: center; }  /* Button zentriert */
  .cta-rocket-media { justify-self: center; margin-top: var(--space-sm); width: clamp(9rem, 42vw, 12rem); }
}
.cta-copy { text-align: left; }
.cta-copy h2 {
  color: var(--color-on-ink);
  font-size: clamp(1.9rem, 1.4rem + 2.3vw, 3.1rem);   /* etwas kleiner, damit Rakete daneben passt */
  text-wrap: balance;
}
.cta-copy p { color: var(--color-on-ink-muted); margin-top: var(--space-sm); max-width: 44ch; }
.cta-copy .hero-actions { justify-content: flex-start; margin-top: var(--space-md); }
.cta-copy .btn:hover, .cta-copy .btn:focus-visible { transform: translateY(-3px) scale(1.05); }  /* kleine Zoom-Animation */
/* Scroll-getriebene Entfaltung: voll ausgebreitet, sobald die Karte den Blick füllt */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cta-clip {
      animation: cta-expand linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 95%;
    }
    .cta-copy {
      animation: cta-copy-in linear both;
      animation-timeline: view();
      animation-range: entry 35% entry 80%;
    }
  }
}
@keyframes cta-expand {
  from { clip-path: inset(9% 15% round 42px); }
  55%  { clip-path: inset(3% 5% round 26px); }
  to   { clip-path: inset(0 0 round 0); }
}
@keyframes cta-copy-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================== */
/* 11. CLIENTS / REFERENZEN-LOGOS                                      */
/* ================================================================== */
.logo-wall {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}
.logo-wall > * { min-width: 0; }   /* Blowout-Schutz: Bild-Intrinsics sprengen sonst die Spalten */
@media (min-width: 560px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
/* Startseite: Referenz-Logos mobil untereinander statt 2-spaltig */
@media (max-width: 559px) { .logo-wall--stack { grid-template-columns: 1fr; } }
.logo-tile {
  display: grid; place-items: center; gap: 0.3rem;
  aspect-ratio: 3 / 2;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base), border-color var(--t-base);
}
.logo-tile:hover { transform: translateY(-5px) rotate(-1.2deg); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.logo-tile .name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-500); letter-spacing: -0.02em; color: var(--color-ink);
}
.logo-tile .role { font-size: var(--fs-200); color: var(--color-text-muted); }

/* Kunden-Logos: echte Marken auf hellem "Chip" — bleibt in Light & Dark lesbar */
.logo-tile--brand {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.7rem;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  padding: var(--space-md) var(--space-sm);
}
.logo-tile--brand:hover { border-color: rgba(15, 23, 42, 0.14); }
.logo-tile--brand .logo-img {
  width: auto; max-width: 82%; max-height: 58px;
  object-fit: contain;
}
.logo-tile--brand .role {
  color: #6b7280; font-weight: 600; letter-spacing: 0.01em;
}
/* "+ viele mehr" — dezente Ghost-Kachel als Abschluss */
.logo-tile--more {
  background: var(--color-primary-soft);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.logo-tile--more .name { color: var(--color-primary-strong); }
.logo-tile--more .role { color: var(--color-primary-strong); opacity: 0.8; }

/* Referenz-Videos */
.video-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 820px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
.video-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out-expo), box-shadow var(--t-base);
}
.video-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: #0c0c0e; overflow: hidden;
}
.video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-card figcaption {
  padding: var(--space-md); display: flex; flex-direction: column; gap: 0.55rem;
}
.video-card figcaption h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-600); letter-spacing: -0.02em; color: var(--color-ink);
}
.video-card figcaption p { color: var(--color-text-muted); }

/* ================================================================== */
/* 11b. LEISTUNGS-UNTERSEITEN: PAKETE + AGENTUR-VERGLEICH              */
/* ================================================================== */

/* Pakete – 3 Karten, mittlere als „Beliebteste Wahl" hervorgehoben */
.tiers { display: grid; gap: var(--space-md); align-items: stretch; }
@media (min-width: 880px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--color-surface);
  border: 1.5px solid var(--tc, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base), border-color var(--t-base);
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tier--star { border-width: 2.5px; }
@media (min-width: 880px) {
  .tier--star { transform: scale(1.03); }
  .tier--star:hover { transform: scale(1.03) translateY(-6px); }
}
/* Eigene Farbwelt je Box (Rahmen + passendes Banner) */
.tier--teal   { --tc: #0fa89c; --tc-on: #06312d; }
.tier--amber  { --tc: #e0912a; --tc-on: #3a2a08; }
.tier--violet { --tc: #6d54e8; --tc-on: #ffffff; }
.tier-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  background: var(--tc, var(--color-secondary)); color: var(--tc-on, #3a2a08);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-200);
  padding: 0.32em 0.95em; border-radius: var(--radius-pill);
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.tier-head h3 { font-size: var(--fs-600); letter-spacing: -0.02em; }
.tier-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3em;
  margin-top: 0.55rem; font-family: var(--font-heading);
}
.tier-price .pre { font-weight: 600; font-size: var(--fs-300); color: var(--color-text-muted); }
.tier-price .amt { font-weight: 800; font-size: var(--fs-700); line-height: 1;
  letter-spacing: -0.02em; color: var(--color-ink); }
.tier-price .tier-per { flex-basis: 100%; font-weight: 500; font-size: var(--fs-200);
  color: var(--color-text-muted); font-family: var(--font-body); }
.tier-head .tier-for { display: block; margin-top: 0.45rem; color: var(--color-text-muted);
  font-size: var(--fs-300); line-height: 1.35; }
.tier-list { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.tier-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.tier-list .ic { flex: none; margin-top: 0.18em; color: var(--tc, var(--color-primary)); }
.tier-list .is-plus { font-weight: 700; color: var(--color-ink); }
.tier .btn { justify-content: center; margin-top: var(--space-2xs); }
/* Buttons in der Rahmenfarbe der jeweiligen Box */
.tier .btn:not(.btn--ghost) {           /* solider Button (Beliebteste-Wahl-Box) */
  --btn-bg: var(--tc);
  --btn-fg: var(--tc-on, #fff);
  --btn-fill: color-mix(in srgb, var(--tc) 72%, #000);
}
.tier .btn--ghost {                     /* Ghost-Button: Rahmen + getönter Text */
  --btn-fg: color-mix(in srgb, var(--tc) 55%, var(--color-ink));
  --btn-fill: color-mix(in srgb, var(--tc) 16%, transparent);
  border-color: var(--tc);
}
.tier .btn--ghost:hover, .tier .btn--ghost:focus-visible {
  color: color-mix(in srgb, var(--tc) 55%, var(--color-ink));
  border-color: var(--tc);
}
.tiers-note { margin-top: var(--space-md); text-align: center; color: var(--color-text-muted); font-size: var(--fs-300); }

/* Agentur-Vergleich – „Andere Agenturen" (✕) vs. bepromoted (✓) */
.vs-grid { display: grid; gap: var(--space-md); align-items: stretch; }
@media (min-width: 880px) { .vs-grid { grid-template-columns: 1fr 1.06fr; } }
.vs-card {
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
}
.vs-card--them {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.vs-card--us {
  position: relative;
  background: var(--color-ink-fixed);
  color: var(--color-on-ink);
}
.vs-flag {
  position: absolute; top: 0; right: clamp(1.2rem, 4vw, 2.4rem); transform: translateY(-50%);
  background: var(--color-secondary); color: #3a2a08;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-200);
  padding: 0.32em 0.95em; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.vs-head {
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-500);
  letter-spacing: -0.01em; margin-bottom: var(--space-md);
}
.vs-card--them .vs-head { color: var(--color-text-muted); }
.vs-card--us .vs-head { color: var(--color-on-ink); display: flex; align-items: center; gap: 0.55rem; }
.vs-card--us .vs-head .brand-logo {
  display: inline-block; width: 9.5rem; height: 1.7rem;
  background-color: currentColor;
  -webkit-mask: url(../assets/logos/wordmark.png) no-repeat left center / contain;
          mask: url(../assets/logos/wordmark.png) no-repeat left center / contain;
}
.vs-list { display: flex; flex-direction: column; gap: 0.9rem; }
.vs-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.vs-ic {
  flex: none; width: 1.45rem; height: 1.45rem; margin-top: 0.05em;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
}
.vs-ic svg { width: 0.85rem; height: 0.85rem; }
.vs-card--them .vs-ic { background: rgb(92 104 128 / 0.14); color: var(--color-text-muted); }
:root[data-theme="dark"] .vs-card--them .vs-ic { background: rgb(155 156 160 / 0.16); }
.vs-card--them li { color: var(--color-text-muted); }
.vs-card--us .vs-ic { background: rgb(236 159 58 / 0.18); color: var(--color-secondary); }
.vs-card--us li { color: var(--color-on-ink); }

/* Referenz-Fallstudienkarte */
.case {
  display: grid; gap: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--t-base) var(--ease-out-expo), box-shadow var(--t-base);
}
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-media { aspect-ratio: 16 / 10; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out-expo); }
.case:hover .case-media img { transform: scale(1.06); }
.case-body { padding: var(--space-md); }
.case-body .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.tag {
  font-size: var(--fs-200); font-weight: 600; font-family: var(--font-heading);
  padding: 0.3em 0.7em; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-text-muted);
}
.case-body h3 { font-size: var(--fs-500); margin-bottom: 0.3rem; }
.case-body p { font-size: var(--fs-300); color: var(--color-text-muted); }

/* ================================================================== */
/* 12. TESTIMONIALS                                                    */
/* ================================================================== */
.quote {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.quote blockquote { font-family: var(--font-heading); font-weight: 500;
  font-size: var(--fs-500); line-height: 1.35; color: var(--color-ink); }
.quote .stars { color: var(--color-secondary); letter-spacing: 0.1em; }
.quote figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.quote .avatar {
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius-round);
  background: var(--color-primary-soft); color: var(--color-primary-strong);
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700;
}
.quote cite { font-style: normal; font-weight: 600; color: var(--color-ink); display: block; }
.quote .role { font-size: var(--fs-200); color: var(--color-text-muted); }
/* Vereinfachte, luftige Variante (zentrierte Kundenstimme) – ohne Karten-Box */
.quote.center {
  background: none; border: 0; padding: 0;
  align-items: center; gap: var(--space-md); max-width: 44ch;
}
.quote.center blockquote { font-size: var(--fs-600); line-height: 1.3; }
.quote.center .stars { font-size: var(--fs-500); }
.quote.center figcaption { justify-content: center; margin-top: 0; text-align: left; }

/* Back-to-top-Button (per JS eingefügt, erscheint beim Scrollen) */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60; width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease-out-expo),
              transform var(--t-base) var(--ease-out-expo),
              background-color var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-primary-strong); transform: translateY(-3px); }
.to-top:active { transform: translateY(-1px) scale(0.94); }
.to-top svg { width: 1.3rem; height: 1.3rem; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.2s; }
  .to-top:hover, .to-top:active { transform: none; }
}

/* ================================================================== */
/* ABLAUF-TIMELINE (vertikaler Strahl, Kreise mit Emojis)             */
/* ================================================================== */
/* Timeline „In 4 Schritten": geschwungener Pfad (SVG, von delight.js
   vermessen) — gestrichelte Basislinie + blaue Füll-Linie, die beim
   Scrollen den Pfad entlangwächst. Erreicht sie eine Box, leuchtet
   diese auf (.is-lit). Emojis sitzen als Chip IN den Boxen. */
.timeline {
  position: relative;
  max-width: none; margin: var(--space-xl) auto 0; padding: var(--space-sm) 0;
}
.tl-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.tl-dash {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 3 9;
}
.tl-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-primary) 55%, transparent));
}
.tl-ind {                        /* Positions-Punkt am Linienende (mobil, via JS) */
  fill: var(--color-primary);
  stroke: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary) 60%, transparent));
}
.tl-step {
  position: relative; z-index: 1;
  margin-block: clamp(var(--space-xl), 11vw, 11rem);
}
.tl-card {
  position: relative;
  width: min(21.5rem, 40%);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.15rem 1.3rem 1.3rem;
  box-shadow: var(--shadow-sm); text-align: left;
  transition: transform var(--t-base) var(--ease-out-expo),
              box-shadow var(--t-base), border-color var(--t-base);
}
/* Asymmetrische Choreografie: jede Box hat ihren eigenen Platz,
   der Pfad schlängelt sich elegant dazwischen (Positionen = Kartenränder) */
.tl-step:nth-of-type(1) .tl-card { margin-left: 0; }
.tl-step:nth-of-type(2) .tl-card { margin-left: auto; margin-right: 0; }
.tl-step:nth-of-type(3) .tl-card { margin-left: 4%; }
.tl-step:nth-of-type(4) .tl-card { margin-left: auto; margin-right: 6%; }
/* Abschluss: Button, in den der Pfad in einer S-Kurve mündet */
.tl-end {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  margin-top: clamp(var(--space-lg), 7vw, var(--space-2xl));
}
.tl-end .btn { transition: transform var(--t-base) var(--ease-out-expo), box-shadow var(--t-base); }
.tl-end.is-lit .btn { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-color); }
.tl-emoji {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  margin-bottom: 0.65rem;
  transition: transform var(--t-base) var(--ease-out-expo),
              border-color var(--t-base), background-color var(--t-base);
}
.tl-num {
  position: absolute; top: 1.05rem; right: 1.2rem;   /* oben rechts in der Box */
  font-family: var(--font-heading); font-weight: 800;
  color: var(--color-primary); font-size: var(--fs-300);
}
.tl-card h3 { margin: 0 0 0.25rem; font-size: var(--fs-400); }
.tl-card p { color: var(--color-text-muted); margin: 0; font-size: var(--fs-300); }
/* Desktop: große Boxen über die volle Container-Breite */
@media (min-width: 701px) {
  .tl-card {
    width: min(34rem, 46%);
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  }
  .tl-card h3 { font-size: var(--fs-500); }
  .tl-card p { font-size: var(--fs-400); }
  .tl-emoji {
    width: 3.1rem; height: 3.1rem; font-size: 1.65rem;
    border-radius: var(--radius-md); margin-bottom: 0.8rem;
  }
  .tl-num { font-size: var(--fs-400); top: 1.3rem; right: 1.5rem; }
}
/* Blaue Linie hat die Box erreicht */
.tl-step.is-lit .tl-card {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-color);
}
.tl-step.is-lit .tl-emoji {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: scale(1.08) rotate(-3deg);
}
/* Hover (Desktop) */
@media (hover: hover) {
  .tl-step:has(:hover) .tl-card { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
}
/* Touch: beim Antippen kurz hervorheben (Klasse via JS) */
.tl-step.tl-touch .tl-card { transform: scale(1.02); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
@media (max-width: 700px) {
  /* Mobil: Layout wie gehabt — Linie links, Karten rechts davon */
  .tl-step { margin-block: var(--space-lg); }
  .tl-step:nth-of-type(1) .tl-card, .tl-step:nth-of-type(2) .tl-card,
  .tl-step:nth-of-type(3) .tl-card, .tl-step:nth-of-type(4) .tl-card {
    width: auto; margin-left: 3.2rem; margin-top: 0;
  }
}

/* ================================================================== */
/* 13. FAQ (native <details> – tastaturbedienbar, kein JS)             */
/* ================================================================== */
.faq { display: grid; gap: var(--space-sm); max-width: 800px; margin-inline: auto; }
.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq-item[open] { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-md);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-500);
  color: var(--color-ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .plus {
  flex: none; width: 1.7rem; height: 1.7rem; position: relative;
  border-radius: var(--radius-round); background: var(--color-primary-soft);
}
.faq-item > summary .plus::before,
.faq-item > summary .plus::after {
  content: ""; position: absolute; inset: 50% 22% auto 22%; height: 2px;
  background: var(--color-primary-strong); border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out-expo);
}
.faq-item > summary .plus::after { transform: translateY(-50%) rotate(90deg); }
.faq-item > summary .plus::before { transform: translateY(-50%); }
.faq-item[open] > summary .plus::after { transform: translateY(-50%) rotate(0); }
.faq-answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); }
.faq-answer p + p { margin-top: 0.7rem; }

/* ================================================================== */
/* 14. FORMULAR (reines HTML5)                                         */
/* ================================================================== */
.form { display: grid; gap: var(--space-sm); }
.form-row { display: grid; gap: var(--space-sm); }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-300); color: var(--color-ink); }
.field label .req { color: var(--color-primary); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #d83a3a;
}
.field input:user-invalid:focus, .field textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgb(216 58 58 / 0.16);
}
.field .hint { font-size: var(--fs-200); color: var(--color-text-muted); }
.checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-300); color: var(--color-text-muted); }
.checkbox input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15em; accent-color: var(--color-primary); }
.form .btn { justify-self: start; }

/* Kontakt-Infokarten */
.contact-cards { display: grid; gap: var(--space-sm); }
.contact-card {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: var(--space-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-base) var(--ease-out-expo), border-color var(--t-base);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.contact-card .ic {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--color-primary-soft);
}
.contact-card .lbl { font-size: var(--fs-200); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.contact-card a, .contact-card .val { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); font-size: var(--fs-400); }

/* ================================================================== */
/* 15. FOOTER                                                          */
/* ================================================================== */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--color-ink-fixed); color: var(--color-on-ink-muted);
  margin-top: var(--space-2xl);
}
.site-footer .blob { display: none; }   /* einfarbiger Footer, kein Verlaufs-Blob */
.footer-top {
  display: grid; gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-lg);
}
@media (min-width: 760px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.footer-brand .brand { color: var(--color-on-ink); }
.footer-brand .brand .be { color: var(--color-on-ink-muted); }
.footer-brand p { margin-top: var(--space-sm); max-width: 32ch; }
.footer-col h4 { color: var(--color-on-ink); font-size: var(--fs-400); margin-bottom: var(--space-sm); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a {
  display: inline-block;
  color: var(--color-on-ink-muted);
  transition: color var(--t-fast), transform var(--t-base) var(--ease-out-expo);
}
.footer-col a:hover { color: var(--color-on-ink); transform: translateX(0.35rem); }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.5em; }

.socials { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }
.social-btn {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.12);
  color: var(--color-on-ink);
  transition: transform var(--t-base) var(--ease-out-expo), background-color var(--t-fast);
}
.social-btn:hover { transform: translateY(-4px) rotate(-4deg); background: var(--color-primary); border-color: transparent; }
.social-btn svg { width: 1.25rem; height: 1.25rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: center; justify-content: space-between;
  padding-block: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--fs-300);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.footer-bottom a { color: var(--color-on-ink-muted); }
.footer-bottom a:hover { color: var(--color-on-ink); }

/* ================================================================== */
/* 15b. PROSE / RECHTSTEXTE (Impressum, Datenschutz)                   */
/* ================================================================== */
.prose { max-width: var(--container-text); }
.prose h2 { font-size: var(--fs-600); margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.prose h3 { font-size: var(--fs-500); margin-top: var(--space-md); margin-bottom: var(--space-2xs); }
.prose p, .prose ul { margin-bottom: var(--space-sm); color: var(--color-text); }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ul li { margin-bottom: 0.3rem; }
.prose a { color: var(--color-primary-strong); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-ink); }
.note {
  background: var(--color-secondary-soft); color: #7a5800;
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md); font-size: var(--fs-300);
}
:root[data-theme="dark"] .note { color: var(--color-secondary); }

/* ================================================================== */
/* 16. SCROLL-REVEAL (scroll-driven, robust gegen fehlende Unterstützung)*/
/*     Inhalt ist standardmäßig SICHTBAR; nur wenn Browser + Nutzer    */
/*     Animationen erlauben, wird der Eingang animiert.                */
/* ================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(34px);
      filter: blur(7px);
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 32%;
    }
    .reveal-scale {
      opacity: 0; transform: scale(0.94);
      filter: blur(7px);
      animation: reveal-scale linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 34%;
    }
    /* gestaffelte Kinder (z. B. Karten-Grids) */
    .stagger > * {
      opacity: 0; transform: translateY(28px);
      filter: blur(7px);
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}
@keyframes reveal-up    { to { opacity: 1; transform: none; filter: none; } }
@keyframes reveal-scale { to { opacity: 1; transform: none; filter: none; } }

/* ================================================================== */
/* 16b. SIGNATUR-EINGANG, SCROLL-FORTSCHRITT & MIKRO-INTERAKTIONEN     */
/* ================================================================== */

/* Scroll-Fortschrittsbalken oben (scroll-driven, kein JS) */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px;
  z-index: var(--z-modal);
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* Hero-Eingang: orchestrierte Page-Load-Choreografie (gestaffelt) */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy > *,
  .hero .section-head > * {
    opacity: 0;
    animation: hero-rise 0.7s var(--ease-out-expo) both;
    animation-delay: calc(var(--enter-i, 0) * 80ms + 60ms);
  }
  .hero .hero-copy > *:nth-child(1), .hero .section-head > *:nth-child(1) { --enter-i: 0; }
  .hero .hero-copy > *:nth-child(2), .hero .section-head > *:nth-child(2) { --enter-i: 1; }
  .hero .hero-copy > *:nth-child(3), .hero .section-head > *:nth-child(3) { --enter-i: 2; }
  .hero .hero-copy > *:nth-child(4), .hero .section-head > *:nth-child(4) { --enter-i: 3; }
  .hero .hero-copy > *:nth-child(5), .hero .section-head > *:nth-child(5) { --enter-i: 4; }
  .hero .hero-copy > *:nth-child(6), .hero .section-head > *:nth-child(6) { --enter-i: 5; }

  .hero-media { opacity: 0; animation: hero-media-in 0.9s var(--ease-out-expo) 0.18s both; }
  .hero-media .float-tag, .hero-media .spin-badge { opacity: 0; animation: pop-in 0.55s var(--ease-out-expo) both; }
  .hero-media .float-tag--a { animation-delay: 0.70s; }
  .hero-media .float-tag--b { animation-delay: 0.84s; }
  .hero-media .spin-badge   { animation-delay: 0.98s; }
}
@keyframes hero-rise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-media-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pop-in        { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* FAQ-Antwort gleitet beim Öffnen sanft ein */
.faq-item[open] .faq-answer { animation: fade-slide 0.4s var(--ease-out-quart) both; }
@keyframes fade-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Press-Feedback auf weiteren interaktiven Elementen */
.social-btn:active { transform: translateY(-1px) scale(0.92); transition-duration: 90ms; }
.link-arrow:active { transform: translateX(2px); }
.logo-tile:active, .contact-card:active { transform: translateY(-2px) scale(0.995); transition-duration: 110ms; }

/* ================================================================== */
/* 17. REDUCED MOTION – alles ruhig stellen                            */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track, .blob, .spin-badge .ring, body::before { animation: none !important; }
  .reveal, .reveal-scale, .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* Hero-Eingang: sofort sichtbar statt animiert */
  .hero .hero-copy > *, .hero .section-head > *,
  .hero-media, .hero-media .float-tag, .hero-media .spin-badge {
    opacity: 1 !important; transform: none !important;
  }
}

/* ================================================================== */
/* 18. DELIGHT – Konfetti, Herz-Egg, Erfolg/404-Status, Mikro-States  */
/* ================================================================== */
.confetti-piece {
  position: fixed; top: 0; left: 0; z-index: var(--z-modal);
  width: 9px; height: 14px; border-radius: 2px;
  pointer-events: none; will-change: transform, opacity;
  animation: confetti-fly 1.6s var(--ease-out-quart) 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; }
}

/* Footer-Herz zum Entdecken */
.heart {
  position: relative;
  background: none; border: 0; padding: 0 0.12em; margin: 0;
  font: inherit; line-height: 1; color: inherit; cursor: pointer;
  display: inline-block; transition: transform 0.2s var(--ease-out-expo);
}
.heart::before { content: ""; position: absolute; inset: -14px; }  /* größere Trefferfläche */
.heart:hover, .heart:focus-visible { transform: scale(1.25); }
@media (prefers-reduced-motion: no-preference) {
  .heart:hover { animation: heartbeat 0.9s ease-in-out infinite; }
}
@keyframes heartbeat { 0%,100% { transform: scale(1.18); } 25% { transform: scale(1.42); } 45% { transform: scale(1.12); } }

.btn.is-sending { cursor: progress; }

/* Zentrierte Statusseite (404 / Danke) */
.status { min-height: clamp(58vh, 68vh, 78vh); display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.status .container { position: relative; z-index: 1; max-width: 640px; }
.status-emoji { font-size: clamp(3rem, 1.6rem + 7vw, 5rem); line-height: 1; display: block; margin-bottom: var(--space-xs); }
.status-code { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3.5rem, 1.5rem + 11vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--color-primary-strong); }
.status .lead { margin-inline: auto; }
.status .hero-actions { justify-content: center; }
.status-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; margin-top: var(--space-md); font-family: var(--font-heading); font-weight: 600; }

/* Erfolgs-Häkchen (gezeichnet) */
.check-circle { width: 92px; height: 92px; margin: 0 auto var(--space-sm); display: block; }
.check-circle circle { fill: none; stroke: var(--color-tertiary-soft); stroke-width: 6; }
.check-circle path { fill: none; stroke: var(--color-tertiary-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .check-circle circle { stroke: var(--color-tertiary); stroke-dasharray: 283; stroke-dashoffset: 283; animation: draw 0.6s var(--ease-out-quart) forwards; }
  .check-circle path { stroke-dasharray: 64; stroke-dashoffset: 64; animation: draw 0.4s var(--ease-out-quart) 0.5s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ================================================================== */
/* 19. MOBILE / TOUCH – Feedback, Safe-Area, Swipe-Karussell          */
/* ================================================================== */
html { -webkit-tap-highlight-color: transparent; }
.site-header { padding-top: env(safe-area-inset-top); }

/* Touch-Feedback (Geräte ohne Hover): klares Antippen statt Hover */
@media (hover: none) {
  .btn:active { transform: translateY(0) scale(0.96); }
  .card:active, .case:active, .logo-tile:active, .contact-card:active,
  .quote:active, .step:active, .social-btn:active, .theme-toggle:active { transform: scale(0.97); }
  .nav-sheet-nav a:active { transform: translateX(8px) scale(0.98); }
  .faq-item > summary:active { background: var(--color-surface-alt); }
  .link-arrow:active { opacity: 0.6; }
}

/* Swipe-Karussell: Kartenreihen werden auf dem Smartphone horizontal wischbar */
.swipe-hint { display: none; }   /* nur mobil sichtbar (Media-Query unten) */
@media (max-width: 719px) {
  .swipe-row {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 80%; gap: var(--space-md);
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--space-md));
    padding: 0.4rem var(--space-md) 0.9rem;
    scrollbar-width: none;
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * { scroll-snap-align: center; }
  /* Logo-Wand als Slider: schmalere Slides, mehr Peek */
  .logo-wall.swipe-row { grid-auto-columns: 68%; gap: var(--space-sm); }
  /* dezenter Hinweis „wischbar" */
  .swipe-hint { display: block; font-size: var(--fs-200); color: var(--color-text-muted);
    text-align: center; margin-top: 0.4rem; }
}

/* ------------------------------------------------------------------ */
/* Cookie-Banner                                                         */
/* ------------------------------------------------------------------ */
#cookie-banner {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2rem), 600px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  z-index: calc(var(--z-modal) + 10);
  animation: cookie-in .4s var(--ease-out-expo) both;
}
.cookie-title {
  font-family: var(--font-heading); font-size: var(--fs-400); font-weight: 700;
  color: var(--color-ink); margin: 0 0 .35rem;
}
#cookie-text p {
  margin: 0; font-size: var(--fs-200);
  color: var(--color-text-muted); line-height: var(--lh-base);
}
#cookie-text a { color: var(--color-primary); text-decoration: underline; }
#cookie-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end;
}
#cookie-actions .btn { font-size: var(--fs-300); padding: 0.7em 1.3em; }
.cookie-banner--hidden {
  animation: cookie-out .35s var(--ease-out-quart) forwards;
}
@keyframes cookie-in  { from { opacity:0; transform:translateX(-50%) translateY(1.25rem); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes cookie-out { to   { opacity:0; transform:translateX(-50%) translateY(1.25rem); } }

/* ------------------------------------------------------------------ */
/* Page Transitions: Treppen-Curtain (Overlay-Wipe)                      */
/* delight.js fängt interne Klicks ab (Balken zu → Navigation → Balken   */
/* auf). Ohne JS oder mit Reduced Motion: ganz normale Navigation.       */
/* ------------------------------------------------------------------ */
.wipe {
  position: fixed; left: 0; right: 0;
  top: -10vh; height: 120vh;
  display: flex;
  z-index: calc(var(--z-modal) + 20);
  pointer-events: none;
}
.wipe.is-active { pointer-events: auto; }
.wipe__bar {
  flex: 1;
  background: var(--color-ink-fixed, #171719);
  /* schräge Ober-/Unterkante = diagonale Kante beim Wischen; die
     Slant-Zonen liegen bei voller Deckung außerhalb des Viewports */
  clip-path: polygon(0 4.5%, 100% 0, 100% 95.5%, 0 100%);
  margin-inline: -1px;               /* keine Haarlinien zwischen Balken */
  transform: translateY(-102%);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--wb) * 42ms);
  will-change: transform;
}
.wipe--in  .wipe__bar { transform: translateY(0); }
.wipe--out .wipe__bar { transform: translateY(102%); }

/* Deckel VOR First Paint, wenn die Seite aus einem Wipe heraus geladen
   wird (Head-Inline-Script setzt html.wiping via sessionStorage-Flag);
   delight.js tauscht ihn nahtlos gegen die Balken und staffelt sie raus.
   Sicherheitsnetz: blendet sich nach 2.4s selbst weg, falls JS hängt. */
html.wiping::after {
  content: ""; position: fixed; inset: 0;
  background: var(--color-ink-fixed, #171719);
  z-index: calc(var(--z-modal) + 20);
  animation: wipe-fallback 0.45s ease 2.4s forwards;
}
@keyframes wipe-fallback { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------------ */
/* Bild-Lightbox + „View"-Cursor                                        */
/* delight.js markiert Content-Bild-Zonen als .lb-zone (klickbar),      */
/* zeigt bei hover+fine einen blauen View-Punkt statt des Cursors und   */
/* öffnet beim Klick eine Lightbox. Ohne JS: alles wie vorher.          */
/* ------------------------------------------------------------------ */

/* Hero-Fotos (ueber-uns) haben keinen Overflow-Wrapper → sanfter Lift */
.hero-media .photo-main,
.hero-media .photo-float { transition: transform var(--t-slow) var(--ease-out-expo); }
.hero-media .photo-main:hover  { transform: scale(1.02); }
.hero-media .photo-float:hover { transform: scale(1.05); }

.lb-zone { cursor: zoom-in; }
@media (hover: hover) and (pointer: fine) {
  html.vc .lb-zone,
  html.vc .lb-zone * { cursor: none; }   /* echter Cursor weicht dem View-Punkt */
}

.view-cursor {
  position: fixed; left: 0; top: 0;
  z-index: calc(var(--z-modal) + 12);    /* unter Lightbox (+15) und Wipe (+20) */
  pointer-events: none;
}
.view-cursor__dot {
  display: grid; place-items: center;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.02em;
  transform: scale(0); opacity: 0;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.18s ease;
}
.view-cursor.is-on .view-cursor__dot { transform: scale(1); opacity: 1; }
@media (hover: none), (pointer: coarse) { .view-cursor { display: none; } }

html.lb-open { overflow: hidden; }       /* kein Scrollen hinter der Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 15);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(8 9 12 / 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: zoom-out;
  animation: lb-in 0.28s var(--ease-out-quart);
}
.lightbox__fig {
  margin: 0; display: grid; gap: 0.85rem; justify-items: center;
  max-width: min(1200px, 100%);
}
.lightbox__fig img {
  max-width: 100%; max-height: min(80vh, 900px); width: auto; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: lb-img-in 0.38s var(--ease-out-expo);
}
.lightbox figcaption {
  color: rgb(255 255 255 / 0.75);
  font-size: var(--fs-300); text-align: center; max-width: 62ch;
}
.lightbox__close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.08); color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--t-base);
}
.lightbox__close:hover { background: rgb(255 255 255 / 0.2); }
.lightbox.is-closing { animation: lb-out 0.2s var(--ease-out-quart) forwards; }
@keyframes lb-in     { from { opacity: 0; } }
@keyframes lb-out    { to   { opacity: 0; } }
@keyframes lb-img-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__fig img, .lightbox.is-closing { animation: none; }
  .feature-media:hover img, .hero-media .photo-main:hover,
  .hero-media .photo-float:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* App-Dock: mobile Bottom-Navigation                                    */
/* Schwebende App-Leiste: Start · Nach oben · Anfragen (CTA-Bubble) ·   */
/* Design · Menü. Ab 880px übernimmt der Desktop-Header, Dock weg.      */
/* ------------------------------------------------------------------ */
/* FEST-VARIANTE (zum Vergleich; schwebende Variante siehe Git-History /
   Memory: bottom 0.75rem+safe-area, width min(100%-1.5rem,27rem),
   left 50% translateX(-50%), radius 1.55rem, border ringsum, shadow-lg) */
.app-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-modal) + 2);   /* über Header, unter Cookie(+10)/Lightbox(+15)/Wipe(+20) */
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: rgb(251 252 254 / 0.88);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgb(15 23 42 / 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transition: transform 0.3s var(--ease-out-expo), opacity 0.25s var(--ease-out-quart);
}
:root[data-theme="dark"] .app-dock { background: rgb(23 24 26 / 0.88); }
/* Bottom-Sheet offen → Dock macht Platz (Schließen via Backdrop/Swipe/Esc) */
.nav-checkbox:checked ~ .app-dock {
  transform: translateY(110%);
  opacity: 0; pointer-events: none;
}
@media (min-width: 880px) { .app-dock { display: none; } }

/* Dock-Inhalt: Logo links, rechts Theme-Switch + Burger (Icon-Buttons) */
.dock-brand {
  display: inline-flex; align-items: center;
  margin-right: auto;
  padding: 0.5rem 0.35rem;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .dock-brand { color: var(--color-ink); }
.dock-brand .brand-logo { height: 1.45rem; }
.dock-brand:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.dock-item {
  flex: none;
  display: grid; place-items: center;
  width: 2.85rem; height: 2.85rem;
  margin: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out-expo),
              background-color var(--t-fast), color var(--t-fast);
}
.dock-item:active { transform: scale(0.9); background: var(--color-primary-soft); }
.dock-item:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.dock-item svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* Theme-Icons gestapelt → gleicher Crossfade wie im Header-Toggle */
.dock-ic { display: inline-grid; place-items: center; }
.dock-ic svg {
  grid-area: 1 / 1;
  transition: opacity 0.3s var(--ease-out-quart), transform 0.5s var(--ease-out-expo);
}
.dock-theme .ic-sun  { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.dock-theme .ic-moon { opacity: 1; }
:root[data-theme="dark"] .dock-theme .ic-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .dock-theme .ic-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* Fokus-Ring am Dock-Burger, wenn die (versteckte) Checkbox fokussiert ist */
.nav-checkbox:focus-visible ~ .app-dock .dock-burger {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}

/* Mobil übernimmt das Dock komplett: Header ganz weg, alte Bottom-UI weicht */
@media (max-width: 879.98px) {
  .site-header { display: none; }
  body::before { display: none; }                  /* Scroll-Fortschrittsbalken oben */
  .to-top { display: none; }                       /* Nach-oben wohnt jetzt im Dock */
  .site-footer { padding-bottom: 7rem; }           /* Luft fürs Dock */
  #cookie-banner { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .app-dock, .dock-item, .dock-ic svg { transition: opacity 0.2s; }
  .dock-item:active { transform: none; }
}