/* ═════════════════════════════════════════════════════════════
   DIGITFLOW v3 — Hell. Nahbar. Mit Momenten.
   Warmes Off-White, dunkle Sphäre, dosierte Verspieltheit.
   ═════════════════════════════════════════════════════════════ */

:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --ink: #141413;
  --ink-2: rgba(20, 20, 19, .64);
  --ink-3: rgba(20, 20, 19, .52);
  --accent: #e8443a;
  --accent-solid: #d63a30;
  --accent-soft: rgba(232, 68, 58, .08);
  --line: rgba(20, 20, 19, .1);
  --line-2: rgba(20, 20, 19, .18);
  --shadow: 0 24px 60px -24px rgba(20, 20, 19, .22);
  --radius: 18px;
  --container: 1140px;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, .75, .25, 1);
  --serif: 'Instrument Serif', Georgia, serif;
}

/* ── Dark Mode: „Licht aus" = die alte Sternen-Welt ──────── */
html[data-theme="dark"] {
  --bg: #0a0a0b;
  --surface: #121214;
  --ink: #f5f5f6;
  --ink-2: rgba(245, 245, 246, .62);
  --ink-3: rgba(245, 245, 246, .5);
  --accent-soft: rgba(232, 68, 58, .14);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .65);
}
body, section, #nav.scrolled, .person, .case-img, footer {
  transition: background .5s ease, background-color .5s ease, color .5s ease, border-color .5s ease;
}

#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
html[data-theme="dark"] #stars { opacity: 1; }
main, footer { position: relative; z-index: 1; }

#theme-toggle, #theme-toggle-m {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line-2); border-radius: 99px;
  padding: 9px 16px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: border-color .25s, color .25s, transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
#theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.tt-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: #f5b942;
  box-shadow: 0 0 10px rgba(245, 185, 66, .65);
  transition: background .4s, box-shadow .4s, transform .4s var(--ease);
}
html[data-theme="dark"] .tt-icon {
  background: transparent;
  box-shadow: inset -4px -3px 0 0 #f5f5f6;
  transform: rotate(-28deg);
}
#theme-toggle-m { font-size: 1.05rem; justify-content: center; margin-top: 10px; }
html[data-theme="dark"] #nav.scrolled { background: rgba(10, 10, 11, .78); }
html[data-theme="dark"] #mobile-menu { background: rgba(10, 10, 11, .98); }
html[data-theme="dark"] #preloader { background: #0a0a0b; }
html[data-theme="dark"] .badge { background: rgba(255, 255, 255, .09); color: var(--ink-2); }
html[data-theme="dark"] .badge-live { background: rgba(76, 217, 100, .14); color: #4cd964; }
html[data-theme="dark"] .btn-ghost { border-color: var(--line-2); }
/* Sektionen lassen den Sternenhimmel durch: transparent + zarte Glüh-Verläufe */
html[data-theme="dark"] #hero {
  background: radial-gradient(900px 600px at 80% 38%, rgba(232, 68, 58, .08), transparent 62%);
}
html[data-theme="dark"] #wir {
  background: radial-gradient(800px 480px at 50% 0%, rgba(232, 68, 58, .06), transparent 65%);
}
html[data-theme="dark"] #kontakt {
  background: radial-gradient(1000px 640px at 50% 115%, rgba(232, 68, 58, .12), transparent 65%);
}
html[data-theme="dark"] #arbeiten,
html[data-theme="dark"] #faq { background: rgba(16, 16, 18, .62); }
html[data-theme="dark"] .person, html[data-theme="dark"] .stat { background: #141416; }
html[data-theme="dark"] .case-peek { background: #f5f5f6; color: #0a0a0b; }
html[data-theme="dark"] .ba-knob { background: #f5f5f6; color: #0a0a0b; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
h1 { font-size: clamp(2.7rem, 7.2vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.015em; line-height: 1.25; }
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--accent);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
section { position: relative; padding: clamp(90px, 11vw, 150px) var(--pad); }
.sec-head { max-width: var(--container); margin: 0 auto clamp(44px, 5vw, 72px); }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.micro { font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 28px;
  border-radius: 99px;
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), background .25s, border-color .25s, box-shadow .25s;
  will-change: transform;
}
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ghost:hover .arr { transform: translateY(4px); }
.btn-primary { background: var(--accent-solid); color: #fff; box-shadow: 0 10px 28px -10px rgba(214, 58, 48, .5); }
.btn-primary:hover { background: #c9362c; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: rgba(20, 20, 19, .4); }
.btn-big { font-size: 17px; padding: 19px 36px; }

/* ── Preloader: Gude. Moin. Hallo. Digitflow. ────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .55s ease, visibility .55s;
}
#preloader.done { opacity: 0; visibility: hidden; }
#pre-word {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 600; letter-spacing: -.03em;
}
#pre-word.flip { animation: word-in .3s var(--ease); }
#pre-word.serif { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--accent); }
@keyframes word-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.no-preloader #preloader { display: none; }

/* ── Navigation ──────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; gap: 36px;
  padding: 22px var(--pad);
  transition: padding .35s var(--ease), background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  padding: 13px var(--pad);
  background: rgba(250, 249, 247, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-logo { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-right: auto; }
.nav-logo i { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { position: relative; font-size: 14.5px; color: var(--ink-2); transition: color .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-cta { padding: 10px 20px; font-size: 14px; }
#burger { display: none; }

#mobile-menu {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(250, 249, 247, .98);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--pad);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
#mobile-menu.open { opacity: 1; visibility: visible; }
#mobile-menu a {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 600; letter-spacing: -.02em;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
#mobile-menu .mm-cta { color: var(--accent-solid); border-bottom: none; margin-top: 18px; font-size: 1.3rem; }

/* ── Hero ────────────────────────────────────────────────── */
#hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 120px;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 80% 38%, rgba(232, 68, 58, .05), transparent 62%),
    radial-gradient(700px 480px at 8% 92%, rgba(232, 68, 58, .035), transparent 60%),
    var(--bg);
}
#sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; width: 100%; }
.hero-sub { max-width: 480px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-2); margin: 28px 0 38px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-hint {
  position: absolute; right: var(--pad); bottom: 36px; z-index: 2;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 12px;
}
.hint-line { display: block; width: 54px; height: 1px; background: var(--line-2); }
@media (pointer: coarse) { .hero-hint { display: none; } }

/* ── Arbeiten ────────────────────────────────────────────── */
#arbeiten { background: var(--surface); }
#arbeiten::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.case { max-width: var(--container); margin: 0 auto; }
.case-wide { margin-bottom: clamp(48px, 6vw, 80px); }
.case-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.case-img {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.case-img img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--ease);
}
.hovercase:hover .case-img img { transform: scale(1.045); }
.case-peek {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 99px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hovercase:hover .case-peek { opacity: 1; transform: translateY(0); }
.case-meta { padding: 22px 6px 0; }
.case-meta h3 { margin-bottom: 6px; }
.case-meta p { color: var(--ink-2); font-size: 15.5px; max-width: 520px; }
.case-tags {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.badge {
  font-style: normal; font-size: 11px; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(20, 20, 19, .07); color: var(--ink-2);
}
.badge-live { background: rgba(34, 154, 22, .12); color: #1d7a12; }

/* Vorher/Nachher-Slider */
.ba {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 1024 / 640; /* exakt das Quellmaterial — kein Beschnitt */
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  outline-offset: 4px;
  box-shadow: var(--shadow);
}
.ba img, .ba video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  pointer-events: none; -webkit-user-drag: none;
}
.ba-before { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); z-index: 2; }
.ba-tag {
  position: absolute; top: 16px; z-index: 4;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 99px;
  background: rgba(20, 20, 19, .8); color: #fff;
  backdrop-filter: blur(6px);
}
.ba-tag-l { left: 16px; }
.ba-tag-r { right: 16px; }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: clamp(24px, var(--x, 50%), calc(100% - 24px)); z-index: 3;
  width: 2px; background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 24px rgba(20, 20, 19, .35);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: .02em;
}

/* ── Leistungen ──────────────────────────────────────────── */
.svc-list { max-width: var(--container); margin: 0 auto; border-top: 1px solid var(--line); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: 70px 320px 1fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(28px, 4vw, 44px) 8px;
  border-bottom: 1px solid var(--line);
  transition: background .3s, padding-left .3s var(--ease);
}
.svc:hover, .svc:focus-visible { background: rgba(20, 20, 19, .025); padding-left: 22px; }
.svc-num { font-size: 13px; color: var(--accent-solid); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.svc h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.svc p { color: var(--ink-2); font-size: 15.5px; max-width: 480px; }
.svc-tags {
  grid-column: 3;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.svc:hover .svc-tags, .svc:focus-visible .svc-tags { opacity: 1; transform: translateY(0); }

/* Schwebende Hover-Preview (folgt dem Cursor) */
.svc-preview {
  position: absolute; top: 0; left: 0;
  width: clamp(240px, 24vw, 320px); aspect-ratio: 16 / 11;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -18px rgba(20, 20, 19, .4);
  opacity: 0; scale: .82;
  transition: opacity .28s var(--ease), scale .34s var(--ease);
  pointer-events: none; z-index: 30;
  will-change: transform;
}
.svc-preview.on { opacity: 1; scale: 1; }
.svc-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
@media (pointer: coarse), (max-width: 880px) { .svc-preview { display: none; } }

/* ── Wir ─────────────────────────────────────────────────── */
#wir {
  background:
    radial-gradient(800px 480px at 50% 0%, rgba(232, 68, 58, .045), transparent 65%),
    var(--bg);
  text-align: center;
}
.wir-inner { max-width: 760px; margin: 0 auto; }
.wir-inner > p { color: var(--ink-2); margin-top: 28px; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.duo {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  margin-top: 36px;
}
.person {
  flex: 1 1 240px; max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .3s var(--ease);
}
.person:hover { transform: translateY(-4px) rotate(-.6deg); }
.person + .person:hover { transform: translateY(-4px) rotate(.6deg); }
.avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-solid);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  margin-bottom: 8px;
}
.person b { font-size: 17px; }
.person > span:last-of-type { font-size: 13.5px; color: var(--ink-3); }
.person-tel { margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--accent-solid); transition: opacity .2s; }
.person-tel:hover { opacity: .7; }
.person-mail { margin-top: 2px; font-size: 13px; color: var(--ink-3); word-break: break-all; transition: opacity .2s; }
.person-mail:hover { opacity: .7; }
.wir-words {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem) !important;
  color: var(--ink) !important;
  letter-spacing: .01em;
  margin-top: 36px !important;
}
/* Wir: Bausteine der mobilen Info-Karte. Auf Desktop unsichtbar bzw.
   neutral — .wir-more/-inner sind display:contents (svc-extras-chips-
   Muster), .duo + .wir-words rendern also exakt wie ohne Wrapper.
   Das eigentliche Karten-Design lebt in @media(max-width:780px) unten. */
.wir-benefits, .wir-more-btn, #studio, #faq-sheet { display: none; }
.wir-more, .wir-more-inner { display: contents; }

/* ── FAQ ─────────────────────────────────────────────────── */
#faq { background: var(--surface); }
#faq::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px 4px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500; letter-spacing: -.01em;
  cursor: pointer;
  transition: color .25s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent-solid); }
.faq-x { position: relative; width: 14px; height: 14px; flex: none; }
.faq-x::before, .faq-x::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform .3s var(--ease);
}
.faq-x::before { width: 14px; height: 1.5px; }
.faq-x::after { width: 1.5px; height: 14px; }
details[open] .faq-x::after { transform: rotate(90deg); }
.faq-list details p {
  padding: 0 4px 26px;
  color: var(--ink-2); font-size: 15.5px; max-width: 680px;
}

/* ── Kontakt ─────────────────────────────────────────────── */
#kontakt {
  min-height: 88svh;
  display: flex; align-items: center;
  text-align: center;
  background:
    radial-gradient(1000px 640px at 50% 115%, rgba(232, 68, 58, .09), transparent 65%),
    var(--bg);
}
.kontakt-inner { max-width: 820px; margin: 0 auto; }
.kontakt-inner > p { color: var(--ink-2); margin: 26px 0 36px; }
/* Kontakt: mobil-only Fragmente (Eyebrow, Kurz-Subline, App-Status) —
   Desktop zeigt stattdessen die .k-sub-d-Originale, siehe ≤780px-Block */
.k-eyebrow, .k-sub-m, .k-status-m { display: none; }
.kontakt-direct {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 44px;
}
.mail-big {
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  font-weight: 500; letter-spacing: -.02em;
  background-image: linear-gradient(var(--accent-solid), var(--accent-solid));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size .4s var(--ease);
  padding-bottom: 4px;
}
.mail-big:hover { background-size: 100% 2px; }
.kontakt-tels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; }
.city-hero-img { display: block; width: 100%; max-width: 560px; margin: 38px auto 0; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: #faf9f7; }
.city-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.city-links a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s; }
.city-links a:hover { border-color: var(--accent-solid); color: var(--accent-solid); }
.theory-body { max-width: 640px; margin: 6px auto 0; text-align: left; }
.theory-body p { color: var(--ink-2); font-size: 16.5px; line-height: 1.72; margin-top: 16px; }
.theory-body p:first-child { margin-top: 0; }
/* "Was bringt dir das?" — zweispaltig: Text + belegte Kennzahlen (NYBA-Stil) */
.bring-wrap { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; align-items: center; text-align: left; }
.bring-text { text-align: left; }
.bring-text .eyebrow { margin-bottom: 12px; }
.bring-text h2 { text-align: left; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.bring-intro { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; margin-top: 18px; max-width: 34em; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.stat { border-top: 2px solid var(--accent-soft); padding-top: 13px; }
.stat-num { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; color: var(--accent-solid); line-height: 1; }
.stat-label { display: block; margin-top: 9px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 780px) {
  .bring-wrap { grid-template-columns: 1fr; gap: 26px; }
  .stats { gap: 20px 24px; }
}
/* "Deine Vorteile" — Benefit-Kacheln */
.vorteile-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vorteil { border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; background: var(--bg); }
.vorteil h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 7px; }
.v-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-solid); margin-bottom: 13px; }
.v-ico svg { width: 22px; height: 22px; }
.vorteil p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
html[data-theme="dark"] .vorteil { background: rgba(20, 20, 22, .8); }
.mid-cta { text-align: center; margin-top: 42px; }

/* ── Leistungsseiten: Hero mit Illustration, Zebra-Rhythmus, Chips, Slim-CTA ── */
.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 8px; }
  .hero-art { max-width: 400px; margin: 14px auto 0; }
}
.sub-alt { background: var(--bg); }
.sub-alt::before { display: none; }
html[data-theme="dark"] .sub-alt { background: transparent; }
.theory-lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem); color: var(--ink);
  margin: 14px auto 0; max-width: 28em;
}
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.svc-chips .chip { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 14px; color: var(--ink-2); background: var(--bg); }
html[data-theme="dark"] .svc-chips .chip { background: rgba(20, 20, 22, .8); }
.vorteil, .inc-grid li { transition: transform .3s var(--ease), border-color .3s, background .5s ease; }
.vorteil:hover, .inc-grid li:hover { transform: translateY(-3px); border-color: rgba(214, 58, 48, .4); }
.cta-slim {
  max-width: var(--container); margin: 42px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 26px; border: 1px solid var(--line); border-left: 4px solid var(--accent-solid);
  border-radius: var(--radius); background: var(--bg);
}
.cta-slim p { color: var(--ink-2); font-size: 15.5px; }
.cta-slim .btn { flex-shrink: 0; }
@media (max-width: 640px) { .cta-slim { flex-direction: column; text-align: center; } }
html[data-theme="dark"] .cta-slim { background: rgba(20, 20, 22, .8); }
.stat-num { font-variant-numeric: tabular-nums; }
.stat { transition: border-color .8s ease .4s; }
.stats.in .stat { border-top-color: var(--accent-solid); }

/* ── Ratgeber (AEO-Artikel) ── */
.rg-body { max-width: 720px; margin: 0 auto; text-align: left; }
.rg-article h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 44px 0 14px; text-align: left; }
.rg-article h2:first-child { margin-top: 0; }
.rg-article p { color: var(--ink-2); font-size: 16.5px; line-height: 1.74; margin-bottom: 14px; }
.rg-article a { color: var(--accent-solid); text-decoration: underline; text-underline-offset: 2px; }
.keybox {
  border: 1px solid var(--line); border-left: 4px solid var(--accent-solid);
  border-radius: var(--radius); background: var(--bg); padding: 24px 28px;
}
.keybox-title { font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.keybox ul { list-style: none; }
.keybox li { position: relative; padding: 7px 0 7px 26px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.keybox li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent-solid); border-bottom: 2px solid var(--accent-solid);
  transform: rotate(-45deg);
}
html[data-theme="dark"] .keybox { background: rgba(20, 20, 22, .8); }
.rg-tablewrap { overflow-x: auto; margin: 22px 0 26px; border: 1px solid var(--line); border-radius: 14px; }
.rg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.rg-table caption { caption-side: top; text-align: left; padding: 14px 18px 12px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.rg-table th { background: var(--surface); text-align: left; font-weight: 600; padding: 11px 18px; border-bottom: 1px solid var(--line-2); }
.rg-table td { padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.rg-table tbody tr:last-child td { border-bottom: none; }
.rg-table tbody tr:hover td { background: var(--surface); }
html[data-theme="dark"] .rg-table th, html[data-theme="dark"] .rg-table tbody tr:hover td { background: rgba(20, 20, 22, .8); }
.rg-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rg-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; padding: 26px;
  background: var(--bg); transition: transform .3s var(--ease), border-color .3s;
}
.rg-card:hover { transform: translateY(-4px); border-color: rgba(214, 58, 48, .4); }
.rg-card h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.rg-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; flex: 1; }
.rg-more { color: var(--accent-solid); font-weight: 600; font-size: 14.5px; }
html[data-theme="dark"] .rg-card { background: rgba(20, 20, 22, .8); }
.tel { color: var(--ink-2); font-size: 15.5px; transition: color .25s; }
.tel:hover { color: var(--ink); }
#kontakt .micro { margin-top: 30px; }

/* ── Zweizeilige Buttons ─────────────────────────────────── */
.btn-2l { flex-direction: column; gap: 3px; padding-top: 13px; padding-bottom: 13px; }
.btn-2l .btn-main { display: inline-flex; align-items: center; gap: 8px; }
.btn-sub { font-size: 11.5px; font-weight: 400; opacity: .8; letter-spacing: .02em; }

/* ── WhatsApp-Button ─────────────────────────────────────── */
.btn-wa { background: #128c7e; color: #fff; box-shadow: 0 10px 28px -10px rgba(18, 140, 126, .5); }
.btn-wa:hover { background: #0e6f64; }

/* ── Website-Check (Lead-Magnet) ─────────────────────────── */
#check { padding-top: 0; }
.check-card {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-solid); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow);
}
.check-text { flex: 1 1 420px; max-width: 600px; }
.check-text h2 { margin-bottom: 14px; }
.check-text p { color: var(--ink-2); }
.check-text b { color: var(--ink); font-weight: 600; }
.check-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.check-cta .micro { padding-left: 6px; }

/* ── Preise ──────────────────────────────────────────────── */
.sec-sub { max-width: 560px; color: var(--ink-2); margin-top: 18px; font-size: 16px; }
.price-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
}
/* Mobile: Karten nebeneinander als Swipe-Karussell, BELIEBT-Karte startet mittig (JS zentriert) */
@media (max-width: 780px) {
  .price-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 calc(-1 * var(--pad));       /* volle Viewport-Breite nutzen */
    padding: 26px var(--pad) 10px;          /* oben Luft fürs BELIEBT-Badge */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .price-grid::-webkit-scrollbar { display: none; }
  .price-grid > * {
    flex: 0 0 78%;
    max-width: 340px;
    scroll-snap-align: center;
    /* Kanten der weißen Nachbar-Karten auf hellem Grund sichtbar machen */
    box-shadow: 0 12px 32px -18px rgba(20, 20, 19, .38);
    /* Smoothes Skalieren: kurze Transition interpoliert zwischen den Scroll-Events */
    will-change: transform;
    transition: transform .18s ease-out, outline-color .3s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
    cursor: pointer;
  }
  .price-grid > .is-active { outline-color: #f59e0b; }
}

/* ── Anfrage-Funnel (Fragebogen-Overlay, öffnet auf CTA-Klick) ── */
#df-funnel {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20, 20, 19, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
#df-funnel.open { opacity: 1; pointer-events: auto; }
.fnl-card {
  width: 100%; max-width: 500px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 38px);
  transform: translateY(14px) scale(.98); transition: transform .28s var(--ease);
}
#df-funnel.open .fnl-card { transform: none; }
.fnl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fnl-dots { display: flex; gap: 6px; }
.fnl-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background .3s; }
.fnl-dots i.on { background: var(--accent-solid); }
#fnl-x {
  background: none; border: none; cursor: pointer; color: var(--ink-3);
  font-size: 26px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
#fnl-x:hover { color: var(--ink); }
.fnl-q { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.fnl-q em { font-family: var(--serif); font-style: italic; color: var(--accent); font-weight: 400; }
.fnl-sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 18px; }
.fnl-opts { display: flex; flex-direction: column; gap: 10px; }
.fnl-opt {
  text-align: left; font: inherit; font-size: 15.5px; font-weight: 500; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 13px;
  padding: 14px 18px; cursor: pointer;
  transition: border-color .2s, transform .15s var(--ease), background .2s;
}
.fnl-opt:hover { border-color: var(--accent-solid); transform: translateY(-1px); }
.fnl-opt:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
.fnl-field { margin-bottom: 12px; }
.fnl-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.fnl-field input, .fnl-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 12px 14px;
}
.fnl-field input:focus, .fnl-field textarea:focus { outline: 2px solid var(--accent-solid); outline-offset: -1px; }
.fnl-field textarea { min-height: 84px; resize: vertical; }
.fnl-send { width: 100%; justify-content: center; display: flex; margin-top: 6px; }
.fnl-back {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--ink-3); padding: 8px 0 0; display: inline-block;
}
.fnl-back:hover { color: var(--ink); }
.fnl-legal { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; }
.fnl-legal a { color: var(--ink-2); text-decoration: underline; }
.fnl-done { text-align: center; padding: 12px 0 4px; }
.fnl-done .big { font-size: 44px; margin-bottom: 10px; }
.fnl-done h3 { font-size: 1.3rem; margin-bottom: 8px; }
.fnl-done p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 18px; }
.fnl-error { color: #b3261e; font-size: 13.5px; margin-top: 10px; }
html[data-theme="dark"] .fnl-error { color: #ff6b61; }
@media (max-width: 780px) {
  .dummy-fnl-keep { display: none; }
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s var(--ease), border-color .3s;
}
.price-card:hover { transform: translateY(-5px); }
.price-card.featured { border-color: var(--accent-solid); border-width: 2px; }
.price-flag {
  position: absolute; top: -13px; left: 28px;
  background: var(--accent-solid); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 99px;
}
.price { font-size: 15px; color: var(--ink-3); }
.price i { font-style: normal; font-size: 14px; margin-right: 6px; }
.price { display: flex; align-items: baseline; }
.price-card .price { font-variant-numeric: tabular-nums; }
.price-card .price { color: var(--ink); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.price-card .price i { color: var(--ink-3); font-weight: 400; }
.price-card .price span { font-size: 15px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.price-card ul { list-style: none; display: grid; gap: 10px; flex: 1; }
.price-card li { padding-left: 26px; position: relative; font-size: 15px; color: var(--ink-2); }
.price-card li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent-solid); border-bottom: 2px solid var(--accent-solid);
  transform: rotate(-45deg) scale(.85);
}
.price-card .btn { justify-content: center; }
/* Preis-Überblick (Homepage): eine Karte pro Leistung */
.price-ov-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 24px);
}
.price-ov {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .3s;
}
.price-ov:hover { transform: translateY(-5px); border-color: rgba(214, 58, 48, .45); }
.price-ov h3 { font-size: 1.1rem; }
.price-ov .price { color: var(--ink); font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.price-ov .price i { font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 400; margin-right: 6px; }
.price-ov .price span { font-size: 14px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.ov-desc { font-size: 14px; color: var(--ink-2); flex: 1; }
.ov-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--accent-solid);
}
.ov-link .arr { transition: transform .25s var(--ease); }
.price-ov:hover .ov-link .arr { transform: translateX(4px); }
html[data-theme="dark"] .price-ov { background: #141416; }

.price-note {
  max-width: var(--container);
  margin: 26px auto 0;
  text-align: center;
  font-size: 13.5px; color: var(--ink-3);
}

/* ── Ablauf ──────────────────────────────────────────────── */
#ablauf { background: var(--surface); }
#ablauf::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.steps {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(18px, 2.5vw, 32px);
  list-style: none;
}
.steps li {
  padding: 32px 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .3s, transform .3s var(--ease);
}
.steps li:hover { border-color: rgba(214, 58, 48, .45); transform: translateY(-4px); }
.step-num { display: block; font-size: 13px; color: var(--accent-solid); letter-spacing: .1em; margin-bottom: 14px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 15px; }

/* ── Leistungen: Weitere Leistungen ──────────────────────────
   Desktop: unverändert ruhige Inline-Zeile (nur sauber benannte
   Klassen statt roher Text-Node + anonymer Spans). Das eigentliche
   Apple-Settings-Modul entsteht erst mobil, siehe @media(max-width:
   780px) weiter unten — .svc-extras-chips ist hier bewusst
   display:contents, damit die Chips auf Desktop ganz normale
   Flex-Items der äußeren Zeile bleiben. */
.svc-extras {
  max-width: var(--container); margin: 28px auto 0;
  font-size: 14px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.svc-extras-chips { display: contents; }
.svc-chip {
  border: 1px solid var(--line-2); border-radius: 99px;
  padding: 6px 14px; font-size: 13px; color: var(--ink-2);
}

/* ── Kontakt-Buttons nebeneinander ───────────────────────── */
.kontakt-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Dark-Mode für neue Komponenten ──────────────────────── */
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .price-card { background: #141416; }
html[data-theme="dark"] .steps li { background: rgba(20, 20, 22, .8); }
html[data-theme="dark"] #ablauf { background: rgba(16, 16, 18, .62); }
html[data-theme="dark"] #preise { background: transparent; }

/* ── Leistungs-Zeilen: Detail-Link ───────────────────────── */
.svc-link {
  grid-column: 3;
  justify-self: start;
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--accent-solid);
}
.svc-link .arr { transition: transform .25s var(--ease); }
.svc-link:hover .arr { transform: translateX(4px); }

/* ── Website-Check: schlanke Zeile ───────────────────────── */
#check-slim { padding: 0 var(--pad); }
.cs-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-solid);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 26px;
  box-shadow: var(--shadow);
}
.cs-inner p { font-size: 15px; color: var(--ink-2); max-width: 640px; }
.cs-inner b { color: var(--ink); font-weight: 600; }
.cs-inner .btn { padding: 11px 20px; font-size: 14px; flex: none; }

/* ── Website-Check: Popup ────────────────────────────────── */
#check-pop {
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--accent-solid);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(20, 20, 19, .45);
  padding: 24px 24px 22px;
  opacity: 0; transform: translateY(24px); visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
#check-pop.show { opacity: 1; transform: translateY(0); visibility: visible; }
#check-pop .cp-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
#check-pop .cp-text { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
#check-pop .btn { width: 100%; justify-content: center; font-size: 14px; padding: 12px 18px; }
#check-pop-x {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-3);
  padding: 6px;
  transition: color .25s;
}
#check-pop-x:hover { color: var(--ink); }
html[data-theme="dark"] #check-pop { background: #141416; }
html[data-theme="dark"] .cs-inner { background: #141416; }

/* ── Unterseiten ─────────────────────────────────────────── */
.sub-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(60px, 8vw, 100px);
  background:
    radial-gradient(800px 500px at 85% 20%, rgba(232, 68, 58, .05), transparent 62%),
    var(--bg);
}
.sub-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.crumb { color: var(--ink-3); transition: color .25s; }
.crumb:hover { color: var(--accent-solid); }
.sub-includes { background: var(--surface); }
.sub-includes::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.inc-grid {
  max-width: var(--container); margin: 0 auto;
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px;
}
.inc-grid li {
  position: relative;
  padding: 18px 20px 18px 50px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg);
  font-size: 15px; color: var(--ink-2);
}
.inc-grid li::before {
  content: ''; position: absolute; left: 20px; top: 24px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent-solid); border-bottom: 2px solid var(--accent-solid);
  transform: rotate(-45deg) scale(.9);
}
.unit-once { font-size: 14px; color: var(--ink-3); font-weight: 400; margin-left: 7px; }
html[data-theme="dark"] .sub-includes { background: rgba(16, 16, 18, .62); }
html[data-theme="dark"] .inc-grid li { background: rgba(20, 20, 22, .8); }
html[data-theme="dark"] .sub-hero { background: radial-gradient(800px 500px at 85% 20%, rgba(232, 68, 58, .08), transparent 62%); }

/* Stadt-Hero: ganzflächige Skyline-Silhouette, durch deren Himmel im Dark-Mode die Sterne funkeln */
.sub-hero .hero-inner { position: relative; z-index: 2; }
.city-hero-bg {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: auto; z-index: 0;
  color: #14110f; opacity: .06;
  pointer-events: none; user-select: none;
}
html[data-theme="dark"] .city-hero-bg { color: #c9d2e2; opacity: .16; }
/* Stadt-Hero mit echtem Foto als Hintergrund (leichte Opacity) */
.city-hero-photo {
  position: absolute; left: 0; right: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover; object-position: center;
  z-index: 0; opacity: .20;
  pointer-events: none; user-select: none;
  will-change: transform;
}
html[data-theme="dark"] .city-hero-photo { opacity: .30; }
.city-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg, var(--bg) 0%, rgba(0,0,0,0) 58%);
  opacity: .6;
}

/* ── Cookie-Consent-Banner ───────────────────────────────── */
#cookie {
  position: fixed; left: 22px; bottom: 22px; z-index: 500;
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--accent-solid);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(20, 20, 19, .5);
  padding: 22px 24px 20px;
  opacity: 0; transform: translateY(20px); visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
#cookie.show { opacity: 1; transform: none; visibility: visible; }
.ck-head { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.ck-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; }
.ck-text a { color: var(--accent-solid); text-decoration: underline; }
.ck-text b { color: var(--ink); font-weight: 600; }
.ck-rows { display: grid; margin-bottom: 16px; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.ck-row > span { display: flex; flex-direction: column; }
.ck-row b { font-size: 14px; font-weight: 600; }
.ck-row i { font-size: 12px; font-style: normal; color: var(--ink-3); }
.ck-sw { position: relative; width: 42px; height: 24px; border-radius: 99px; border: none; background: rgba(20, 20, 19, .18); cursor: pointer; flex: none; transition: background .25s; padding: 0; }
.ck-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ck-sw.on { background: var(--accent-solid); }
.ck-sw.on::after { transform: translateX(18px); }
.ck-row > .ck-sw[aria-hidden="true"] { cursor: default; }
.ck-btns { display: flex; gap: 10px; }
.ck-btns .btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: 14px; }
.foot-cookie { background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink-3); padding: 0; transition: color .25s; }
.foot-cookie:hover { color: var(--ink); }

/* Schwebendes Cookie-Symbol (Re-Open) */
#cookie-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 450;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 24px -8px rgba(20, 20, 19, .35);
  cursor: pointer;
  transition: transform .2s var(--ease), color .2s, border-color .2s, opacity .3s, visibility .3s;
}
#cookie-fab:hover { transform: translateY(-2px) scale(1.05); color: var(--accent-solid); border-color: var(--accent-solid); }
#cookie-fab .ch { fill: var(--surface); }
#cookie-fab.hide { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.6); }
html[data-theme="dark"] #cookie-fab { background: #141416; }
html[data-theme="dark"] #cookie-fab .ch { fill: #141416; }
@media (max-width: 560px) { #cookie-fab { left: 12px; bottom: 12px; width: 42px; height: 42px; } }
html[data-theme="dark"] #cookie { background: #141416; }
html[data-theme="dark"] .ck-sw:not(.on) { background: rgba(255, 255, 255, .2); }
@media (max-width: 560px) {
  #cookie { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .ck-btns { flex-direction: column; }
}

/* ── Cal-Erlauben-Dialog (bei Klick ohne Consent) ────────── */
#cal-ask {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 20, 19, .5);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
#cal-ask.show { opacity: 1; visibility: visible; }
#cal-ask .ca-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(20, 20, 19, .5);
  padding: 30px 28px 24px;
  max-width: 420px; width: 100%;
  transform: translateY(16px); transition: transform .3s var(--ease);
}
#cal-ask.show .ca-box { transform: none; }
.ca-t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.ca-d { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.ca-btns { display: flex; flex-direction: column; gap: 10px; }
.ca-btns .btn { justify-content: center; }
.ca-note { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; text-align: center; }
.ca-x { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 4px; transition: color .25s; }
.ca-x:hover { color: var(--ink); }
html[data-theme="dark"] #cal-ask { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] #cal-ask .ca-box { background: #141416; }

/* ── Rechtsseiten (Impressum / Datenschutz) ──────────────── */
.legal { padding-top: clamp(128px, 16vh, 184px); padding-bottom: clamp(70px, 9vw, 120px); }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); margin-bottom: 30px; transition: color .25s; }
.legal-back:hover { color: var(--accent-solid); }
.legal-wrap h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.legal-lead { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin-bottom: 44px; max-width: 620px; }
.legal-wrap h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 40px 0 12px; letter-spacing: -.02em; }
.legal-wrap p { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; margin-bottom: 10px; }
.legal-wrap a { color: var(--accent-solid); text-decoration: underline; text-underline-offset: 2px; }
.legal-wrap ul { margin: 10px 0 14px; padding-left: 22px; }
.legal-wrap li { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 4px; }
.legal-wrap code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; background: rgba(20, 20, 19, .06); padding: 1px 6px; border-radius: 5px; }
html[data-theme="dark"] .legal-wrap code { background: rgba(255, 255, 255, .1); }

.sitemap-wrap { max-width: 900px; }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px; margin-top: 12px; }
.sitemap-col h2 { margin-top: 0; }
.sitemap-col ul { padding-left: 0; list-style: none; margin: 0; }
.sitemap-col li { margin-bottom: 8px; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: 30px var(--pad) 42px;
  font-size: 13.5px; color: var(--ink-3);
  border-top: 1px solid var(--line);
}
footer nav { display: flex; gap: 22px; align-items: center; }
footer a { color: var(--ink-3); transition: color .25s; }
footer a:hover { color: var(--ink); }


/* ── Reveals ─────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-lines { overflow: hidden; }
.rv-lines .ln {
  display: block;
  transform: translateY(110%); opacity: 0;
  transition: transform .95s var(--ease), opacity .55s ease;
}
.rv-lines.in .ln { transform: translateY(0); opacity: 1; }
.rv-lines.in .ln:nth-child(2) { transition-delay: .13s; }
.rv-lines.in .ln:nth-child(3) { transition-delay: .26s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  #burger {
    display: flex; flex-direction: column; gap: 6px;
    background: none; border: none; padding: 8px; cursor: pointer;
  }
  #burger span { width: 26px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
  #burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  #burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .svc { grid-template-columns: 48px 1fr; }
  .svc h3 { grid-column: 2; }
  .svc p, .svc-tags, .svc-link { grid-column: 2; }
  .svc-tags { opacity: 1; transform: none; margin-top: 8px; }
  #hero { padding-top: 100px; }
  .hero-sub { max-width: 100%; }
}

/* ── Mobile: Preise-Sektion ausblenden (≤768px) ──────────────
   Die „ab"-Startpreise stehen mobil bereits in den interaktiven
   Leistungs-Karten (#leistungen, Swipe-Deck) — der separate Preis-
   Überblick wäre auf dem Handy nur Wiederholung und zusätzliches
   Scrollen. Deshalb mobil komplett aus dem Fluss genommen
   (display:none → keine Lücke, die Nachbar-Sektionen Leistungen ↔
   Ablauf schließen nahtlos auf, als hätte es die Sektion nie
   gegeben). Der „Preise"-Eintrag im Burger-Menü zeigt sonst ins
   Leere → im selben Breakpoint mit ausgeblendet. Desktop bleibt
   komplett unberührt (Markup + Styles unverändert; der Desktop-
   Nav-Link .nav-links a[href="#preise"] > 880px ist nicht betroffen).
   Zum Reaktivieren: einfach diesen ganzen Block entfernen. */
@media (max-width: 768px) {
  #preise { display: none; }
  #mobile-menu a[href="#preise"] { display: none; }
}

/* ── Mobile: Leistungen-Swipe-Deck (≤780px) ──────────────────
   Card-Swipe-Gallery (Basis: Fahrschule-Demo), verfeinert Richtung
   Apple/Linear: GSAP-Draggable-Finger-Tracking, Magnet-Snap mit
   winzigem Überschwinger, Tiefen-Stack (aktiv 1.0 / Nachbarn 0.95,
   ±1,5° gefächert, 20–25 % Peek), Pagination-Dots, Fortschritts-
   Zähler „1 / 4" (Odometer) + Swipe-Hint. In jeder Karte lebt eine
   kleine Produkt-Demo (svcd-*-Animationen, weiter unten). Aktiviert
   sich nur per JS (.is-swiper), wenn GSAP geladen ist; sonst
   sauberer Fallback auf die normale Karten-Liste. Alles mobil
   gescopt (#leistungen …) — Desktop bleibt komplett unberührt. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes cs-hint { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(5px); } }

@media (max-width: 780px) {
  /* Viewport-Clip: die Sektion kappt den überbreiten Track (Padding-Box
     = 100vw → Nachbar-Karten schauen bis an den Bildschirmrand). WICHTIG:
     overflow:clip statt hidden — die Karten tragen tabindex="0", und ein
     hidden-Container ist scrollbar: Fokus/scrollIntoView würde ihn heimlich
     horizontal verschieben (scrollLeft ≠ 0 → alles wandert). clip erzeugt
     KEINEN Scroll-Container → scrollLeft bleibt garantiert 0. */
  #leistungen { overflow: hidden; overflow: clip; }

  /* Track: horizontale Karten-Reihe (von GSAP-Draggable aktiviert) */
  #leistungen .svc-list.is-swiper {
    display: flex; flex-wrap: nowrap; gap: 14px;
    width: max-content; max-width: none; margin: 0;
    padding: 20px 0 30px;
    border-top: none;
    touch-action: pan-y; cursor: grab;
  }

  /* Karte: großes, schwebendes Objekt — feine Kante + Layer-Schatten.
     :hover/:focus-visible mitgeführt → kein Sticky-Hover-Versatz nach Tap */
  #leistungen .svc-list.is-swiper .svc,
  #leistungen .svc-list.is-swiper .svc:hover,
  #leistungen .svc-list.is-swiper .svc:focus-visible {
    background: var(--surface);
    padding: 26px 24px 24px;
  }
  #leistungen .svc-list.is-swiper .svc {
    flex: 0 0 70vw; max-width: 330px;   /* 70vw → beidseitig ~15vw frei = 20–25 % der Nachbarkarte sichtbar */
    min-height: 300px;
    display: flex; flex-direction: column;
    align-items: stretch; gap: 0;          /* Desktop-Grid-Reste (baseline/gap) neutralisieren */
    border: 1px solid var(--line);
    border-radius: 20px;
    /* weiches, geschichtetes Ruhe-Schattensystem → die Karte „schwebt" */
    box-shadow:
      0 1px 2px rgba(20, 20, 19, .05),
      0 8px 20px -10px rgba(20, 20, 19, .12),
      0 22px 44px -26px rgba(20, 20, 19, .20);
    /* transform steuert GSAP pro Frame → hier NUR Kante + Schatten animieren */
    transition: border-color .4s ease, box-shadow .45s ease;
  }
  /* Fokus-Karte: hebt sich klar ab — mehr Elevation + dezenter Akzent */
  #leistungen .svc-list.is-swiper .svc.is-active {
    border-color: rgba(232, 68, 58, .42);
    box-shadow:
      0 4px 10px -4px rgba(20, 20, 19, .10),
      0 20px 42px -18px rgba(20, 20, 19, .22),
      0 0 30px -10px rgba(232, 68, 58, .26);
  }
  #leistungen .svc-list.is-swiper .svc:focus-visible {
    outline: 2px solid var(--accent-solid); outline-offset: 3px;
  }

  /* Karten-Inhalt: sauber gestapelt (Typografie unverändert), CTA am Kartenfuß */
  #leistungen .svc-list.is-swiper .svc-num { margin: 0; }
  #leistungen .svc-list.is-swiper .svc h3 { margin: 11px 0 0; }
  #leistungen .svc-list.is-swiper .svc p { margin: 11px 0 0; max-width: none; }
  #leistungen .svc-list.is-swiper .svc-tags { opacity: 1; transform: none; margin: 16px 0 0; }
  #leistungen .svc-list.is-swiper .svc-link { margin: 0; margin-top: auto; padding-top: 20px; }

  /* Swipe-Hint: dezenter Chevron rechts (vertikal auf Kartenmitte),
     fadet beim ersten Drag weg → signalisiert sofort „wischbar" */
  #leistungen .cs-hint {
    position: absolute; right: 12px; z-index: 6;
    width: 30px; height: 30px; display: grid; place-items: center;
    color: var(--ink-3); pointer-events: none;
    transform: translateY(-50%);
    animation: cs-hint 1.9s ease-in-out infinite;
  }
  #leistungen .cs-hint svg { width: 18px; height: 18px; }

  /* Pagination-Dots — Fahrschule-Stil: 7px-Punkt → 22px-Pille beim Aktiven */
  #leistungen .cs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  #leistungen .cs-dots button {
    width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
    background: var(--line-2);
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background .35s cubic-bezier(.22, 1, .36, 1);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #leistungen .cs-dots button.on {
    width: 22px; border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-solid));
  }

  /* Fortschritts-Zähler „1 / 4" — Apple-Galerie-Stil: klein, ruhig, unter
     den Dots. Die aktuelle Ziffer rollt als Odometer (GSAP, yPercent) und
     trägt volles Gewicht; „/ 4" bleibt bewusst leiser. */
  #leistungen .cs-count {
    display: flex; justify-content: center; align-items: center; gap: 7px;
    margin-top: 12px;
    font-size: 11.5px; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  #leistungen .cs-count .cs-win { display: block; height: 1em; line-height: 1; overflow: hidden; }
  #leistungen .cs-count .cs-roll { display: block; }
  #leistungen .cs-count .cs-roll i { display: block; height: 1em; line-height: 1; font-style: normal; font-weight: 600; }
  #leistungen .cs-count .cs-of { color: var(--ink-3); font-weight: 500; }

  /* Startpreis + CTA-Pille: sitzen zusammen am Kartenfuß. margin-top:auto
     auf .svc-price zieht beide nach unten — der Freiraum darüber (Tags →
     Preis) atmet, statt die Karte zu füllen. Preis bewusst zurückhaltend:
     kleiner als der Fließtext, nur die Zahl trägt den Akzent (gleiches Rot
     wie .svc-num) — informativ statt werblich. */
  #leistungen .svc-list.is-swiper .svc-price {
    margin: 0; margin-top: auto; padding-top: 18px;
    font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
    color: var(--ink-3); white-space: nowrap;
  }
  #leistungen .svc-list.is-swiper .svc-price-val {
    color: var(--accent-solid); font-weight: 650; font-size: 13.5px;
    font-variant-numeric: tabular-nums;
  }

  /* CTA-Pille: fühlt sich wie Teil der Karte an, kein Web-Textlink mehr.
     align-self:flex-start verhindert, dass align-items:stretch der Karte
     sie auf volle Breite zieht. :active simuliert „Loslassen einer Taste":
     Skalierung + Schatten ziehen sich zusammen, der Pfeil rückt vor. */
  #leistungen .svc-list.is-swiper .svc-link {
    align-self: flex-start;
    margin: 10px 0 0;
    padding: 10px 20px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 6px 16px -10px rgba(20, 20, 19, .16);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s var(--ease), border-color .3s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  #leistungen .svc-list.is-swiper .svc.is-active .svc-link { border-color: rgba(232, 68, 58, .3); }
  #leistungen .svc-list.is-swiper .svc-link:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(20, 20, 19, .05); }
  #leistungen .svc-list.is-swiper .svc-link:active .arr { transform: translateX(3px); }

  /* Weitere Leistungen → eigenes Info-Modul im Stil einer iOS-
     Settings-Gruppe: fast unsichtbarer Fond + Haarlinie statt
     Schatten, bewusst KEINE .svc-Karte. Label übernimmt 1:1 den
     Eyebrow-Stil der Sektion (.eyebrow, siehe oben) — gleiche
     Typografie, keine neue Stimme. Chip-Fond ist --surface statt
     --bg: der Container sitzt schon auf --bg, die Chips brauchen
     die hellere Stufe darüber, um als eigene „Kacheln" erkennbar
     zu bleiben (weiße Zeilen auf grauem Grund, wie in iOS
     Settings-Gruppen). */
  #leistungen .svc-extras {
    flex-direction: column; align-items: stretch;
    gap: 14px;
    background: rgba(20, 20, 19, .03);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  #leistungen .svc-extras-label {
    font-size: 12px; font-weight: 500; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ink-3);
    text-align: center;
  }
  #leistungen .svc-extras-chips {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  }
  #leistungen .svc-chip { background: var(--surface); padding: 9px 16px; }

  /* Dark Mode („Licht aus") */
  html[data-theme="dark"] #leistungen .svc-list.is-swiper .svc,
  html[data-theme="dark"] #leistungen .svc-list.is-swiper .svc:hover,
  html[data-theme="dark"] #leistungen .svc-list.is-swiper .svc:focus-visible {
    background: #141416;
    border-color: var(--line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 12px 30px -16px rgba(0, 0, 0, .6);
  }
  html[data-theme="dark"] #leistungen .svc-list.is-swiper .svc.is-active {
    border-color: rgba(232, 68, 58, .5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .06),
      0 20px 44px -18px rgba(0, 0, 0, .7),
      0 0 30px -10px rgba(232, 68, 58, .3);
  }
  html[data-theme="dark"] #leistungen .svc-list.is-swiper .svc-link {
    background: #17171a; border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 18px -12px rgba(0, 0, 0, .55);
  }
  html[data-theme="dark"] #leistungen .svc-extras {
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  html[data-theme="dark"] #leistungen .svc-chip { background: #17171a; }
}

/* ── Deck-Demos: lebende Produkt-Ausschnitte in den Karten ───
   Vier kleine, ECHTE Interfaces (Mini-Website, Kampagnen-Report,
   Wartungs-Monitor, Termin-Chat) statt Platzhalter-Grafik. Die
   Elemente werden nur im Mobile-Deck per JS injiziert (main.js,
   SVC_DEMOS) — global gescopt ist hier trotzdem sicher, weil sie
   auf Desktop schlicht nicht existieren. Alle Animationen sind
   zart, langsam und enden in einem sichtbaren Ruhezustand (die
   globale Reduced-Motion-Regel unten springt dadurch sauber ans
   fertige Standbild). */
.svc-demo {
  --sd-green: #2f9e63;
  position: relative; flex: none;
  height: 132px; margin: 16px 0 2px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  font-size: 10px; line-height: 1.35; letter-spacing: 0;
}

/* 01 · Mini-Website im Browserfenster (Seite läuft unten aus dem Bild —
   bewusster Anschnitt, sie „geht weiter") */
.sdw-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sdw-bar > i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.sdw-bar > i:first-child { background: var(--accent); opacity: .8; }
.sdw-url { display: inline-flex; align-items: center; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--bg); font-size: 8px; color: var(--ink-3); }
.sdw-caret { width: 1px; height: 8px; margin-left: 2px; background: var(--accent-solid); animation: svcd-caret 1.06s steps(1) infinite; }
.sdw-page { padding: 10px 12px 0; animation: svcd-float 9s ease-in-out infinite; }
.sdw-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sdw-logo { width: 7px; height: 7px; border-radius: 2px; background: var(--accent-solid); }
.sdw-links { display: flex; gap: 7px; font-size: 7px; color: var(--ink-3); }
.sdw-links i { font-style: normal; }
.sdw-h { margin: 0 0 7px; font-size: 13px; line-height: 1.15; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.sdw-cta { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--accent-solid); color: #fff; font-size: 8px; font-weight: 600; animation: svcd-pulse 3.4s ease-in-out infinite; }
.sdw-media { position: relative; display: flex; gap: 6px; margin-top: 10px; border-radius: 7px; overflow: hidden; }
.sdw-media > i { height: 34px; flex: 1; border-radius: 7px; background: linear-gradient(135deg, var(--accent-soft), rgba(20, 20, 19, .06)); }
.sdw-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 46%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 80%); transform: translateX(-130%) skewX(-14deg); animation: svcd-shine 6.4s ease-in-out infinite; }

/* 02 · Kampagnen-Report: Chart zeichnet sich, Anfragen-Zahl tickt hoch */
.svc-demo.sdm { padding: 11px 12px 10px; display: flex; flex-direction: column; }
.sdm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.sdm-head > b { font-size: 9.5px; font-weight: 650; color: var(--ink); }
.sdm-live { display: inline-flex; align-items: center; gap: 4px; font-size: 7.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-green); }
.sdm-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--sd-green); animation: svcd-okpulse 2.2s ease-out infinite; }
.sdm-chart { display: block; width: 100%; height: 50px; }
.sdm-area { fill: var(--accent-soft); animation: svcd-fadearea 9s ease infinite; }
.sdm-line { fill: none; stroke: var(--accent-solid); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; animation: svcd-draw 9s ease infinite; }
.sdm-dot { fill: var(--accent-solid); transform-box: fill-box; transform-origin: center; animation: svcd-blip 2s ease-in-out infinite; }
.sdm-kpis { display: flex; gap: 16px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.sdm-kpis > i { display: flex; flex-direction: column; gap: 1px; font-style: normal; }
.sdm-kpis b { font-size: 11px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.sdm-lbl { font-size: 7px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sdm-roll { display: block; height: 1em; line-height: 1; overflow: hidden; }
.sdm-roll span { display: block; animation: svcd-roll4 12s ease-in-out infinite; }
.sdm-roll u { display: block; height: 1em; line-height: 1; text-decoration: none; }

/* 03 · Wartungs-Monitor: Status grün, Log-Zeilen, laufender Scan */
.svc-demo.sdc { padding: 11px 13px 11px; display: flex; flex-direction: column; }
.sdc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sdc-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 650; color: var(--ink); }
.sdc-ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--sd-green); animation: svcd-okpulse 2.2s ease-out infinite; }
.sdc-head > b { font-size: 7.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.sdc-log { display: flex; flex-direction: column; gap: 5px; }
.sdc-log p { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 8.5px; color: var(--ink-2); }
.sdc-log p > b { color: var(--sd-green); font-weight: 700; font-size: 8px; }
.sdc-log p > span { margin-left: auto; font-size: 7.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sdc-spin { width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid var(--line-2); border-top-color: var(--accent-solid); animation: svcd-spin 1s linear infinite; }
.sdc-bar { height: 3px; margin-top: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sdc-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-solid)); transform-origin: left; animation: svcd-scan 5.5s ease-in-out infinite; }

/* 04 · Termin-Chat: Anfrage → tippt… → Antwort → bestätigt (Loop endet
   im fertigen Gesprächszustand) */
.svc-demo.sda { padding: 11px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.sda-in, .sda-out { margin: 0; max-width: 84%; padding: 5px 9px; font-size: 9px; line-height: 1.4; border-radius: 11px; }
.sda-in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-2); animation: svcd-msg-in 10s ease infinite; }
.sda-typing { align-self: flex-end; display: flex; gap: 3px; margin: 0; padding: 6px 9px; border-radius: 11px; border-bottom-right-radius: 4px; background: var(--ink); opacity: 0; animation: svcd-msg-typing 10s ease infinite; }
.sda-typing i { width: 3px; height: 3px; border-radius: 50%; background: var(--bg); opacity: .75; animation: svcd-tydot .75s ease-in-out infinite; }
.sda-typing i:nth-child(2) { animation-delay: .12s; }
.sda-typing i:nth-child(3) { animation-delay: .24s; }
.sda-out { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; animation: svcd-msg-out 10s ease infinite; }
.sda-confirm { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 5px 9px; border: 1px solid rgba(47, 158, 99, .35); border-radius: 9px; background: var(--surface); font-size: 8.5px; font-weight: 600; color: var(--ink); animation: svcd-msg-confirm 10s ease infinite; }
.sda-confirm b { color: var(--sd-green); }
.sda-confirm span { margin-left: auto; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Dark Mode der Demos */
html[data-theme="dark"] .svc-demo { --sd-green: #45c07d; background: #101013; }
html[data-theme="dark"] .sdw-bar { background: #17171a; }
html[data-theme="dark"] .sdw-url { background: #101013; }
html[data-theme="dark"] .sdw-media > i { background: linear-gradient(135deg, rgba(232, 68, 58, .16), rgba(255, 255, 255, .05)); }
html[data-theme="dark"] .sdw-shine { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 80%); }
html[data-theme="dark"] .sdc-log p, html[data-theme="dark"] .sda-in, html[data-theme="dark"] .sda-confirm { background: #17171a; }
html[data-theme="dark"] .sda-confirm { border-color: rgba(69, 192, 125, .4); }

/* Mikro-Animationen der Demos — alle langsam, zart, GPU-freundlich */
@keyframes svcd-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes svcd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes svcd-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 68, 58, .25); } 50% { transform: scale(1.035); box-shadow: 0 3px 9px -3px rgba(232, 68, 58, .45); } }
@keyframes svcd-shine { 0%, 55% { transform: translateX(-130%) skewX(-14deg); } 80%, 100% { transform: translateX(240%) skewX(-14deg); } }
@keyframes svcd-draw { 0% { stroke-dashoffset: 1; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes svcd-fadearea { 0%, 6% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes svcd-blip { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes svcd-roll4 { 0%, 16% { transform: translateY(0); } 25%, 41% { transform: translateY(-1em); } 50%, 66% { transform: translateY(-2em); } 75%, 100% { transform: translateY(-3em); } }
@keyframes svcd-okpulse { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 99, .35); } 70%, 100% { box-shadow: 0 0 0 5px rgba(47, 158, 99, 0); } }
@keyframes svcd-spin { to { transform: rotate(360deg); } }
@keyframes svcd-scan { 0% { transform: scaleX(0); } 70% { transform: scaleX(.82); } 96%, 100% { transform: scaleX(1); } }
@keyframes svcd-msg-in { 0% { opacity: 1; transform: translateY(0); } 3% { opacity: 0; transform: translateY(5px); } 9%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes svcd-msg-typing { 0%, 14% { opacity: 0; } 18%, 32% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes svcd-msg-out { 0% { opacity: 1; transform: translateY(0); } 2.5% { opacity: 0; transform: translateY(5px); } 38% { opacity: 0; transform: translateY(5px); } 43%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes svcd-msg-confirm { 0% { opacity: 1; transform: translateY(0); } 2.5% { opacity: 0; transform: translateY(6px); } 52% { opacity: 0; transform: translateY(6px); } 57%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes svcd-tydot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

/* ── Ablauf-Assistent: Mini-Interfaces in den Schritt-Karten ─
   Drei ECHTE Produktmomente statt Illustration/Icons: Kalender-
   Einladung (bestätigt sich), Angebots-Dokument (Wireframe baut
   sich auf, Festpreis darunter), Publish-Moment (Website geht
   live). Nur mobil per JS injiziert (main.js, FLOW_UIS) — global
   gescopt trotzdem sicher, weil sie auf Desktop nicht existieren.
   Gleiche Rezeptur wie die Deck-Demos (.svc-demo): zart, langsam,
   GPU-freundlich (nur transform/opacity), sichtbarer Ruhezustand. */
.fl-ui {
  --fl-green: #2f9e63;
  position: relative; flex: none;
  height: 172px; margin: 20px 0 4px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  font-size: 10px; line-height: 1.4; letter-spacing: 0;
}

/* 01 · Kalender-Einladung: Datum-Kachel + Termin, „bestätigt" popt ein */
.fl-ui.flc { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 15px; }
.flc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 6px 16px -12px rgba(20, 20, 19, .18);
}
.flc-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 46px; height: 48px; flex: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.flc-date b { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-solid); }
.flc-date i { font-style: normal; font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.flc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flc-info > b { font-size: 11px; font-weight: 650; color: var(--ink); }
.flc-info > span { font-size: 9px; color: var(--ink-3); }
.flc-time { font-variant-numeric: tabular-nums; }
.flc-confirm {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(47, 158, 99, .35); border-radius: 11px;
  background: var(--surface);
  font-size: 9.5px; font-weight: 600; color: var(--ink);
  animation: fld-confirm 9s ease infinite;
}
.flc-confirm i { width: 6px; height: 6px; border-radius: 50%; background: var(--fl-green); animation: svcd-okpulse 2.2s ease-out infinite; }
.flc-confirm span { margin-left: auto; font-size: 8.5px; font-weight: 500; color: var(--ink-3); }

/* 02 · Angebots-Dokument: Wireframe skizziert sich, Festpreis schwarz auf weiß */
.fl-ui.flp { display: flex; flex-direction: column; padding: 13px 14px 12px; }
.flp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.flp-head b { font-size: 10px; font-weight: 650; color: var(--ink); }
.flp-badge {
  font-size: 7.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 2.5px 8px;
}
.flp-wire {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 9px 10px;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: 10px;
}
.flp-wire i, .flp-cols i { display: block; border-radius: 4px; background: linear-gradient(90deg, rgba(20, 20, 19, .07), rgba(20, 20, 19, .045)); }
.flp-nav { height: 6px; width: 58%; animation: fld-w1 10s ease infinite; }
.flp-hero { flex: 1; animation: fld-w2 10s ease infinite; }
.flp-wire .flp-hero { background: linear-gradient(135deg, var(--accent-soft), rgba(20, 20, 19, .05)); }
.flp-cols { display: flex; gap: 6px; height: 20px; }
.flp-cols i { flex: 1; animation: fld-w3 10s ease infinite; }
.flp-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.flp-total span { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.flp-total b { font-size: 12.5px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 03 · Publish-Moment: Browserfenster, Veröffentlichen → Live */
.fl-ui.fll { display: flex; flex-direction: column; }
.fll-bar {
  display: flex; align-items: center; gap: 5px; flex: none;
  height: 30px; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.fll-bar > i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.fll-bar > i:first-child { background: var(--accent); opacity: .8; }
.fll-url { margin: 0 auto; padding: 3.5px 12px; border-radius: 999px; background: var(--bg); font-size: 8.5px; color: var(--ink-3); }
.fll-body { position: relative; flex: 1; }
.fll-deploy, .fll-live {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.fll-deploy { animation: fld-deploy 9s ease infinite; }
.fll-row { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 600; color: var(--ink-2); }
.fll-spin { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid var(--line-2); border-top-color: var(--accent-solid); animation: svcd-spin 1s linear infinite; }
.fll-track { display: block; width: 56%; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fll-track i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-solid));
  transform: scaleX(0); transform-origin: 0 50%;
  animation: fld-fill 9s ease infinite;
}
.fll-live { animation: fld-golive 9s ease infinite; }
.fll-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(47, 158, 99, .4); border-radius: 999px;
  background: var(--surface);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-green);
}
.fll-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--fl-green); animation: svcd-okpulse 2.2s ease-out infinite; }
.fll-msg { font-size: 9.5px; color: var(--ink-2); }

/* Dark Mode der Ablauf-Interfaces */
html[data-theme="dark"] .fl-ui { --fl-green: #45c07d; background: #101013; }
html[data-theme="dark"] .flc-card, html[data-theme="dark"] .flc-confirm,
html[data-theme="dark"] .flp-wire, html[data-theme="dark"] .fll-bar,
html[data-theme="dark"] .fll-pill { background: #17171a; }
html[data-theme="dark"] .flc-date, html[data-theme="dark"] .fll-url { background: #101013; }
html[data-theme="dark"] .flc-confirm { border-color: rgba(69, 192, 125, .4); }
html[data-theme="dark"] .fll-pill { border-color: rgba(69, 192, 125, .45); }
html[data-theme="dark"] .flp-wire i, html[data-theme="dark"] .flp-cols i { background: linear-gradient(90deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .055)); }
html[data-theme="dark"] .flp-wire .flp-hero { background: linear-gradient(135deg, rgba(232, 68, 58, .16), rgba(255, 255, 255, .05)); }

/* Mikro-Animationen des Assistenten — Loops mit langem, sichtbarem
   Ruhezustand (kurzer Reset, gestaffelter Wiederaufbau — Muster der
   Deck-Demos). fld-confirm/-golive federn mit Mini-Überschwinger ein. */
@keyframes fld-w1 { 0%, 4% { opacity: 0; transform: translateY(4px); } 9%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes fld-w2 { 0%, 11% { opacity: 0; transform: translateY(5px); } 17%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes fld-w3 { 0%, 18% { opacity: 0; transform: translateY(5px); } 24%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes fld-confirm { 0% { opacity: 1; transform: none; } 3% { opacity: 0; transform: translateY(6px) scale(.97); } 30% { opacity: 0; transform: translateY(6px) scale(.97); } 36% { opacity: 1; transform: translateY(-1.5px) scale(1.01); } 41%, 100% { opacity: 1; transform: none; } }
@keyframes fld-deploy { 0%, 40% { opacity: 1; } 46%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fld-fill { 0%, 5% { transform: scaleX(0); } 40%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes fld-golive { 0%, 46% { opacity: 0; transform: translateY(7px) scale(.97); } 52% { opacity: 1; transform: translateY(-1px) scale(1.005); } 57%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(7px) scale(.97); } }

/* ── Ablauf-Assistent: Bühne, Karte, Fortschritt, Tasten (≤780px) ─
   Ein Schritt zur Zeit: die drei .steps-li werden zu absoluten
   Setup-Karten in einer festen Bühne (Höhe misst JS → kein Layout-
   Shift), GSAP blendet per autoAlpha/x/scale. „Weiter" ist die
   volle Primär-Taste im AirPods-Pairing-Stil (Pill bleibt die
   Button-Sprache der Seite), „Zurück" die leise Text-Taste
   darunter. Fortschritt oben: Odometer-Zähler + 3px-Leiste mit
   Akzent-Verlauf (füllt per scaleX, nie springend). */
@media (max-width: 780px) {
  #ablauf .fl-head {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: var(--container); margin: 0 auto 18px;
  }
  #ablauf .fl-count {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  #ablauf .fl-win { display: block; height: 1em; line-height: 1; overflow: hidden; }
  #ablauf .fl-roll { display: block; }
  #ablauf .fl-roll i { display: block; height: 1em; line-height: 1; font-style: normal; font-weight: 600; }
  #ablauf .fl-of { color: var(--ink-3); font-weight: 500; }
  #ablauf .fl-bar {
    display: block; width: 100%; height: 3px; border-radius: 999px;
    background: var(--line); overflow: hidden;
  }
  #ablauf .fl-bar i {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-solid));
    transform: scaleX(0); transform-origin: 0 50%;
  }

  #ablauf .steps.is-flow { position: relative; display: block; }
  #ablauf .steps.is-flow li,
  #ablauf .steps.is-flow li:hover {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: 30px 26px 26px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 24px;
    /* Ruhe-Schattensystem der Deck-Karten → die Karte „schwebt" */
    box-shadow:
      0 1px 2px rgba(20, 20, 19, .05),
      0 8px 20px -10px rgba(20, 20, 19, .12),
      0 22px 44px -26px rgba(20, 20, 19, .20);
    transition: none;                 /* transform/Sichtbarkeit steuert GSAP */
    visibility: hidden;               /* nur die aktive Karte wird gezeigt */
  }
  #ablauf .steps.is-flow .step-num { display: none; }   /* Position zeigt der Zähler oben */
  #ablauf .steps.is-flow h3 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 10px; }
  #ablauf .steps.is-flow li p { font-size: 15.5px; line-height: 1.6; margin: 0; }

  #ablauf .fl-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 20px; }
  #ablauf .fl-next {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 52px; padding: 15px 24px;
    border: none; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
    background: var(--accent-solid); color: #fff;
    box-shadow: 0 10px 28px -10px rgba(214, 58, 48, .5);
    /* Feder der .btn-Sprache: Loslassen schwingt weich zurück */
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  #ablauf .fl-next:active { transform: scale(.98); box-shadow: 0 4px 14px -8px rgba(214, 58, 48, .5); }
  #ablauf .fl-next .arr { transition: transform .25s var(--ease); }
  #ablauf .fl-next:active .arr { transform: translateX(3px); }
  #ablauf .fl-back {
    align-self: center; margin-top: 2px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-3);
    padding: 10px 18px; border-radius: 999px;
    transition: color .25s, transform .18s cubic-bezier(.3, 1.4, .5, 1);
    -webkit-tap-highlight-color: transparent;
  }
  #ablauf .fl-back:active { transform: scale(.96); color: var(--ink-2); }
  /* Ghost auf Schritt 1: hält den Platz, damit „Weiter" nie springt */
  #ablauf .fl-back.fl-ghost { visibility: hidden; pointer-events: none; }

  /* Dark Mode („Licht aus") — Karten wie die Deck-Karten */
  html[data-theme="dark"] #ablauf .steps.is-flow li,
  html[data-theme="dark"] #ablauf .steps.is-flow li:hover {
    background: #141416; border-color: var(--line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 12px 30px -16px rgba(0, 0, 0, .6);
  }
}

/* ── Mobile: „Das Studio" als App-Info-Karte (≤780px) ────────
   Die volle Sektion (Intro-Absatz + drei große Personen-Karten)
   ist mobil zu lang. Stattdessen EINE ruhige, schwebende Karte im
   Stil einer iOS-Info-Card (Apple Settings / Wallet): Eyebrow mit
   👋, die Headline bleibt der Star, darunter drei gleich hohe
   Benefit-Zeilen mit zartem Häkchen (Settings-Gruppe mit Haar-
   linien), abgeschlossen von einer leisen Sekundär-Pille „Mehr
   erfahren" — sie öffnet den Studio-Screen (#studio): ein kompaktes
   Vollbild-Overlay im Page-Turn-Stil der Portfolio-Vorschau, EIN
   Screen ohne Scrollen (Headline, 4 Trust-Chips, 3 Kontakt-Buttons).
   Team + Signatur wohnen mobil dort (der Inline-Wrapper .wir-more
   ist display:none; Inhalt bleibt im DOM für Desktop, nichts geht
   verloren).
   Motion = bestehende Sprache: .rv-Reveals auf der Karte, Tap =
   scale(.98) mit Federkurve + Pfeil-Nudge wie bei .btn/.fl-next,
   Flug-Choreografie in main.js. Alles nur ≤780px —
   Desktop bleibt komplett unberührt. */
@media (max-width: 780px) {
  /* Sektion strafft sich — die Karte trägt ihre Bühne selbst */
  #wir { padding: 64px var(--pad) 72px; }

  /* Die Inner-Spalte WIRD die Karte: gleiches Ruhe-Schatten-
     system wie Deck-/Flow-Karten, linksbündig wie eine App-Card */
  #wir .wir-inner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 30px 24px 26px;
    box-shadow:
      0 1px 2px rgba(20, 20, 19, .05),
      0 8px 20px -10px rgba(20, 20, 19, .12),
      0 22px 44px -26px rgba(20, 20, 19, .20);
    text-align: left;
  }

  /* 👋 nur mobil vor dem Eyebrow (2. content-Zeile = leere
     Alternativtext-Syntax, wo unterstützt → Screenreader-still) */
  #wir .eyebrow { margin: 0 0 14px; }
  #wir .eyebrow::before { content: '👋 '; content: '👋 ' / ''; }

  /* Headline bleibt der Fokus — auf der Karte einen Hauch kompakter */
  #wir h2 { font-size: 2rem; }

  /* Intro-Absatz ist mobil Wiederholung (Kern = Headline + Zeilen);
     die Namen stecken im Aufklapper → nichts geht verloren */
  #wir .wir-intro { display: none; }

  /* Benefit-Zeilen: iOS-Settings-Gruppe — gleiche Zeilenhöhe,
     Haarlinien dazwischen, Häkchen in zarter Akzent-Kapsel */
  #wir .wir-benefits {
    display: flex; flex-direction: column;
    list-style: none; margin: 24px 0 0; padding: 0;
  }
  #wir .wir-benefits li {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px;
    font-size: 15px; font-weight: 500; letter-spacing: -.01em;
    color: var(--ink);
  }
  #wir .wir-benefits li + li { border-top: 1px solid var(--line); }
  #wir .wb-check, #studio .wb-check {
    flex: none; box-sizing: border-box;
    width: 22px; height: 22px; padding: 5px;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-solid);
  }

  /* Sekundär-Pille „Mehr erfahren": Teil der Karte, kein Marketing-
     Button. transform:none neutralisiert den .rv-translateY (Reveal
     = reiner Fade, die transform-Spur gehört der Feder), :active
     drückt mit scale(.98) + Pfeil-Nudge, aufgeklappt dreht der
     Pfeil nach unten. */
  #wir .wir-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px;
    margin-top: 20px; padding: 12px 22px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: transparent; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 500;
    letter-spacing: .01em; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transform: none;
    transition: opacity .8s var(--ease) var(--d, 0s),
      transform .18s cubic-bezier(.3, 1.4, .5, 1),
      border-color .25s var(--ease);
  }
  #wir .wir-more-btn:active { transform: scale(.98); border-color: var(--ink-3); }
  #wir .wir-more-btn:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
  #wir .wir-more-btn .arr { transition: transform .3s var(--ease); }
  #wir .wir-more-btn:active .arr { transform: translateX(3px); }

  /* Team + Signatur wohnen mobil im Studio-Screen (#studio unten) —
     der Inline-Aufklapper ist Geschichte; der Wrapper bleibt nur für
     Desktop (display:contents) im DOM */
  #wir .wir-more { display: none; }

  /* ── Studio-Screen: Vollbild-Overlay im Page-Turn-Stil der
     Portfolio-Vorschau (digitflow.net/portfolio). Die Flug-
     Choreografie (Karte hebt ab → Screen entfaltet sich mit
     rotateX-Kipp, Hintergrund blendet weich ab) malt main.js per
     rAF — ausschließlich transform/opacity → GPU, 60fps.
     Hier: Bühne, Screen-Layout und Ruhe-Zustände. ── */
  #studio {
    position: fixed; inset: 0; z-index: 640;
    display: block; visibility: hidden; pointer-events: none;
  }
  #studio.open { visibility: visible; pointer-events: auto; }
  .st-back {
    position: absolute; inset: 0; opacity: 0;
    background: rgba(6, 6, 8, .55);
    -webkit-backdrop-filter: blur(22px) brightness(.6);
    backdrop-filter: blur(22px) brightness(.6);
  }
  /* Wurfschatten + Umgebungslicht des fliegenden Screens — die
     Opazität steuert der Flug, in Ruhe beide unsichtbar */
  .st-cast {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: none; opacity: 0; border-radius: 24px;
    transform-origin: 50% 0;
    box-shadow:
      0 2px 4px rgba(20, 20, 19, .06),
      0 14px 32px -12px rgba(20, 20, 19, .18),
      0 34px 70px -30px rgba(20, 20, 19, .35);
  }
  .st-glow {
    position: absolute; inset: -12%; pointer-events: none; opacity: 0;
    background: radial-gradient(50% 38% at 50% 46%,
      rgba(232, 68, 58, .18), rgba(232, 68, 58, .06) 44%, transparent 72%);
  }
  /* Der Screen selbst: startet im Flug als die Karte (24px-Radius =
     pixelgleiche Übergabe) und steht am Ziel als App-Screen mit
     runden Ecken vor der abgeblendeten Seite */
  .st-card {
    position: absolute; inset: 0; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 24px;
    transform-origin: 50% 0; backface-visibility: hidden;
  }
  .st-scroll {
    position: absolute; inset: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform-origin: 50% 0;
    padding: 18px 22px calc(12px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    /* Kürzerer Content als der Screen (Normalfall auf großen Geräten):
       Leerraum verteilt sich oben+unten statt als toter Block unten zu
       hängen. Läuft der Inhalt auf kleinen Geräten doch mal voll, bleibt
       overflow-y:auto unangetastet — echtes Scrollen bricht nicht. */
    display: flex; flex-direction: column; justify-content: center;
  }
  .st-scroll::-webkit-scrollbar { display: none; }

  /* Screen-Kopf: dieselbe Hierarchie wie die Karte darunter */
  .st-head { padding: 4px 2px 0; }
  #studio .eyebrow { margin: 0 0 10px; }
  /* 👋 nur auf dem Studio-Panel (Begrüßung) — die Leistungen-Panels
     tragen echte Kategorie-Label, kein Wave-Emoji davor */
  #studio .st-panel[data-panel="studio"] .eyebrow::before { content: '👋 '; content: '👋 ' / ''; }
  #studio h2 { font-size: 1.7rem; line-height: 1.14; margin: 0 0 10px; }
  /* Kontrollierter Zweizeiler wie auf der Karte — nie ein Umbruch
     mitten im Satz auf schmalen Geräten */
  .st-ln { display: block; }
  .st-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

  /* Trust-Badges: dieselben 3 Aussagen wie .wir-benefits auf der Karte
     darunter, hier kompakt horizontal (gleiches Häkchen-Token .wb-check,
     nur Reihe statt Settings-Liste — Wiederverwendung, keine neue
     Komponente). */
  .st-badges {
    display: flex; gap: 8px;
    list-style: none; margin: 16px 0 0; padding: 0;
  }
  .st-badges li {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; padding: 10px 4px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  }
  .st-badges span {
    font-size: 10.5px; line-height: 1.28; font-weight: 500;
    letter-spacing: -.005em; color: var(--ink-2);
  }

  /* Team-Karten: 3 Spalten, reserviertes Bildfeld (4:5 — füllt sich später
     mit echten Fotos ohne Layout-Änderung, noch keine vorhanden) + Name +
     Kurz-Rolle (Teilzeichenkette der vollen Rolle aus #wir) + Anrufen/
     E-Mail. Karten-Rezept wie .person (var(--bg)/var(--line)/var(--radius)),
     nur klein genug für drei nebeneinander. */
  .st-team3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    list-style: none; margin: 12px 0 0; padding: 0;
  }
  .st-tcard {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 5px; min-width: 0; padding: 9px 7px 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  }
  .st-tph {
    width: 100%; aspect-ratio: 4 / 5; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent-solid);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .st-tph svg { width: 34%; height: 34%; opacity: .55; }
  .st-tcard b { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); margin-top: 1px; }
  .st-tcard > span { font-size: 10px; line-height: 1.25; color: var(--ink-3); }

  /* Pillen-Rezept 1:1 von .cta-pop-action auf der LIVE
     digitflow.net/portfolio/-Seite übernommen (radius 100px, ink/bg-
     Umkehr-Farben, Pfeil-Chip .ar, Press-Feder translateY(-2px)+
     Farbwechsel zu --accent — dieselben Werte/Motion, nicht neu
     erfunden). Nur Padding/Font sind für die schmale Karten-Spalte
     enger als am Original (dort 11px 21px/12.5px) und width:100% statt
     content-hugging, sonst identisch. */
  .st-p-cta { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 3px; }
  .st-pbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%;
    padding: 10px 6px; border-radius: 100px;
    background: var(--ink); color: var(--bg);
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .005em;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .4s;
  }
  .st-ar { display: block; font-style: normal; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  .st-pbtn.is-press { transform: translateY(-2px); background: var(--accent); }
  .st-pbtn.is-press .st-ar { transform: translateX(5px); }
  .st-pbtn:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }

  /* ── Leistungen-Panels (webdesign/marketing/pflege/ki), Runde „App-
     Detailscreen" (08.08.2026, User-Referenz nur für Informations-
     Hierarchie, nicht für Optik): kein Verkaufs-CTA mehr, kein Vorschau-
     Screenshot mehr (steht schon auf der Deck-Karte, hier wäre er
     Wiederholung) — drei knappe, durch Haarlinien getrennte Gruppen:
     Kopf → „Enthalten"-Checkliste → Preis. Checkliste nutzt exakt
     dasselbe Häkchen-Token wie .wir-benefits/.st-badges (.wb-check,
     bereits per #wir .wb-check, #studio .wb-check global gestylt —
     keine neue Icon-Variante), nur als vertikale Settings-Zeilen statt
     Pillen oder 3er-Reihe. */
  .st-divider { height: 1px; margin: 20px 0; background: var(--line); border: 0; }
  .st-sublabel {
    margin: 0 0 10px; font-size: 11.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  }
  .st-feat { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
  .st-feat li {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    font-size: 15px; font-weight: 500; letter-spacing: -.005em;
    color: var(--ink);
  }
  .st-feat li + li { border-top: 1px solid var(--line); }
  #studio .svc-price {
    margin: 0; padding: 0;
    font-size: 14px; font-weight: 500; letter-spacing: .01em;
    color: var(--ink-3);
  }
  #studio .svc-price-val {
    color: var(--accent-solid); font-weight: 650; font-size: 15px;
    font-variant-numeric: tabular-nums;
  }

  /* Schließen: seit die Leistungen-Panels ohne Verkaufs-CTA auskommen,
     ist das hier die einzige Aktion auf dem Screen — entsprechend trägt
     sie jetzt die bestehende .btn-ghost-Optik (Farben/Radius/Maß 1:1
     aus der Basis-.btn-Regel übernommen, keine neue Button-Erfindung),
     volle Breite statt content-breit, Press-Feder wie .wir-more-btn
     statt der alten Opacity-Dimmung. */
  .st-close {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 20px;
    padding: 15px 28px;
    border: 1px solid var(--line-2); border-radius: 99px;
    background: transparent; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 500;
    color: var(--ink); text-align: center;
    -webkit-tap-highlight-color: transparent;
    transform: none;
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), border-color .25s var(--ease);
  }
  .st-close.is-press { transform: scale(.98); border-color: var(--ink-3); }
  .st-close:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }

  /* ── FAQ (mobil): Fragen öffnen ein kompaktes Bottom-Sheet statt des
     Inline-Akkordeons — die Antworten sind kurz, die Vollbild-Bühne
     wäre zu viel Auftritt. Gleiche Formensprache wie #studio, kleinere
     Bühne: Surface-Karte, 24px-Radius, Haarlinien, Blur-Abdunkelung
     (Rezept von .st-back, eine Stufe leichter — kleineres Fenster,
     weniger Verdunkelung), wiederverwendete .st-sublabel/.st-ar-Token.
     z-index 590 = bewusst UNTER #cal-ask (600): tippt jemand den
     Erstgespräch-CTA ohne Consent, muss die Cal-Erlauben-Frage das
     Sheet überlagern können. Die <details> klappen mobil nie auf
     (preventDefault in main.js) — nur Tap-Feedback auf der Zeile. */
  .faq-list summary {
    transition: color .25s, transform .18s cubic-bezier(.3, 1.4, .5, 1);
  }
  .faq-list summary:active { transform: scale(.985); color: var(--accent-solid); }

  #faq-sheet {
    display: block;
    position: fixed; inset: 0; z-index: 590;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s .6s;
  }
  #faq-sheet.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  .fs-back {
    position: absolute; inset: 0; opacity: 0;
    background: rgba(6, 6, 8, .45);
    -webkit-backdrop-filter: blur(14px) brightness(.72);
    backdrop-filter: blur(14px) brightness(.72);
    transition: opacity .45s ease;
  }
  #faq-sheet.open .fs-back { opacity: 1; }
  /* Karte: dockt unten an (wie ein natives Sheet), oben der 24px-Radius
     der Overlay-Bühne; Höhe wächst mit dem Inhalt (kurze Antworten ≈
     35–55 % Viewport), max-height + inneres Scrollen nur als Fangnetz */
  .fs-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 82svh;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow:
      0 -2px 4px rgba(20, 20, 19, .05),
      0 -18px 44px -18px rgba(20, 20, 19, .30);
    padding: 8px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(103%);
    transition: transform .55s var(--ease);
  }
  #faq-sheet.open .fs-card { transform: translateY(0); }
  .fs-grab {
    flex: none; width: 40px; height: 4px; margin: 6px auto 14px;
    border-radius: 99px; background: var(--line-2);
  }
  .fs-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; scrollbar-width: none;
  }
  .fs-body::-webkit-scrollbar { display: none; }
  /* Inhalt staffelt beim Öffnen leicht nach (CTA zuletzt — --d inline
     wie beim .rv-System). Bewusst animation statt transition: mit
     backwards-Fill endet die Animation im Normalzustand und lässt die
     Press-Feder-Transitions der Buttons in Ruhe (eine transition-
     basierte Staffel würde deren transform-Timing überschreiben).
     Beim Schließen fadet der Inhalt als Ganzes flott, die Karte
     gleitet darunter ab. */
  .fs-body { opacity: 0; transition: opacity .22s ease; }
  #faq-sheet.open .fs-body { opacity: 1; }
  @keyframes fs-in { from { opacity: 0; transform: translateY(12px); } }
  #faq-sheet.open .fs-body > * {
    animation: fs-in .5s var(--ease) backwards;
    animation-delay: var(--d, .1s);
  }
  .fs-q { margin: 0 0 10px; font-size: 1.32rem; line-height: 1.22; color: var(--ink); }
  .fs-a { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  /* CTA: dasselbe Pillen-Rezept wie .st-pbtn (ink/bg-Umkehr, Pfeil-Chip
     .st-ar, Press = translateY(-2px) + --accent — identische Motion),
     nur auf Sheet-Maß statt der schmalen Team-Spalten gebracht */
  .fs-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; margin: 20px 0 0;
    padding: 14px 24px; border: 0; border-radius: 100px;
    background: var(--ink); color: var(--bg); cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .005em;
    -webkit-tap-highlight-color: transparent;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .4s;
  }
  .fs-cta[hidden] { display: none; }
  .fs-cta.is-press { transform: translateY(-2px); background: var(--accent); }
  .fs-cta.is-press .st-ar { transform: translateX(5px); }
  .fs-cta:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
  /* Schließen: bewusst leise (das Sheet schließt auch per Tipp daneben
     und Swipe) — voller Touch-Target, aber nur Text mit Press-Feder */
  .fs-close {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; margin-top: 14px; padding: 12px;
    border: 0; border-radius: 99px; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
    transition: color .25s, transform .18s cubic-bezier(.3, 1.4, .5, 1);
  }
  .fs-close.is-press { transform: scale(.98); color: var(--ink); }
  .fs-close:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 3px; }
  html[data-theme="dark"] .fs-card { background: #141416; }

  /* ── Kontakt (mobil): der finale Action-Screen ──────────────
     Alles ist erklärt — hier gibt es nur noch EINEN nächsten Schritt.
     Deshalb: kompakte Bühne statt 88svh-Halle, Eyebrow + Headline +
     Ein-Satz-Subline, der Buchen-CTA als einziges dominantes Element
     in voller Breite, darunter E-Mail/WhatsApp als leise Zweier-Reihe
     (WhatsApp verliert mobil sein Grün → Ghost-Optik, damit nichts mit
     dem Primär-CTA konkurriert), zum Schluss ein stiller App-Status
     „● Antwort innerhalb von 24h" statt der Marketing-Zeile. Der Block
     „Direkter Kontakt" (Mail groß + Nummern) ist mobil aus — dieselben
     Daten wohnen im Studio-Screen, hier wären sie Wiederholung. */
  #kontakt { min-height: 0; padding: 78px var(--pad) 68px; }
  #kontakt .kontakt-direct { display: none; }
  #kontakt .k-sub-d { display: none; }
  #kontakt .k-eyebrow { display: block; margin-bottom: 14px; }
  #kontakt .k-sub-m { display: inline; }
  #kontakt h2 + p { margin: 16px auto 26px; font-size: 16px; max-width: 30ch; }

  /* CTA-Hierarchie: Grid — Buchen spannt beide Spalten, E-Mail/
     WhatsApp teilen sich die zweite Reihe als kleinere Alternativen */
  #kontakt .kontakt-btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 420px; margin: 0 auto;
  }
  #kontakt .kontakt-btns .btn { justify-content: center; text-align: center; }
  #kontakt .kontakt-btns .btn-2l {
    grid-column: 1 / -1;
    padding-top: 15px; padding-bottom: 15px;
  }
  #kontakt .kontakt-btns .btn-ghost,
  #kontakt .kontakt-btns .btn-wa {
    font-size: 14.5px; min-height: 50px; padding: 13px 12px;
  }
  #kontakt .kontakt-btns .btn-wa {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line-2); box-shadow: none;
  }
  #kontakt .kontakt-btns .btn-wa svg { width: 18px; height: 18px; }
  /* Press-Feder der bestehenden Button-Sprache (Touch statt Hover) */
  #kontakt .kontakt-btns .btn:active { transform: scale(.98); }
  #kontakt .kontakt-btns .btn-primary:active { box-shadow: 0 4px 14px -8px rgba(214, 58, 48, .5); }
  #kontakt .kontakt-btns .btn-primary:active .arr { transform: translateX(3px); }

  /* App-Status: kleiner atmender Punkt + stille Zeile — Information,
     kein Versprechen-Marketing */
  #kontakt .micro { margin-top: 24px; }
  #kontakt .k-status-m {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; letter-spacing: .01em; color: var(--ink-3);
  }
  .k-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2aa36a;
    box-shadow: 0 0 0 3px rgba(42, 163, 106, .15);
    animation: k-breathe 3s ease-in-out infinite;
  }
  @keyframes k-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

  /* Dark Mode: Screen wie die dunklen Deck-Karten. .st-pbtn braucht
     KEIN eigenes Dark-Override — ink/bg tauschen im Dark-Root schon
     die Rollen (ink→hell, bg→dunkel), die Pille kehrt sich automatisch
     korrekt um (genau wie .cta-pop-action auf der Live-Portfolio-Seite). */
  html[data-theme="dark"] .st-card { background: #141416; }

  /* Dark Mode („Licht aus") — Karte wie die dunklen Deck-Karten */
  html[data-theme="dark"] #wir .wir-inner {
    background: #141416; border-color: var(--line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 12px 30px -16px rgba(0, 0, 0, .6);
  }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .rv-lines .ln { opacity: 1 !important; transform: none !important; }
  #preloader { display: none; }
  .svc-preview { display: none !important; }
}

/* ── Mobil-Menü als App-Screen (≤880px, nur Homepage via .mm-app) ──
   Das Burger-Overlay wird zum eigenen App-Bildschirm: voll deckend in
   Seitenfarbe (kein Durchscheinen der Seite), Body-Scroll-Lock via
   main.js, kompakte Vier-Punkte-Liste (Nr · Titel · Beschreibung ·
   Pfeil, baseline-ausgerichtetes Grid) statt Riesen-Typo, CTA unten
   als echter .btn-primary hinter eigener Trennlinie. Der Header
   (Logo, „Licht aus"-Pille, Burger-×) ist das unveränderte #nav, das
   mit z 150 über dem Overlay (z 140) liegt — darum hier keine eigene
   Kopfzeile. Öffnen: Overlay blendet wie bisher (Basis-Transition),
   die Punkte staggern nach (Beschreibung je ~80ms nach ihrem Titel),
   der CTA zuletzt; beim Schließen fallen alle Delays auf 0 → sofort.
   Aktiv-Marker .is-here setzt main.js beim Öffnen (Sektion unterm
   35 %-Punkt des Viewports): Nummer + Mini-Punkt in Akzentrot, sonst
   nichts. >880px existiert nur die Desktop-Nav (Burger display:none),
   und Unterseiten (Menü-Markup ohne .mm-app) behalten ihr altes
   Basis-Menü — beides von diesem Block unberührt. */
@media (max-width: 880px) {
  #mobile-menu.mm-app {
    background: var(--bg);
    justify-content: flex-start; gap: 0;
    padding: 92px var(--pad) max(26px, env(safe-area-inset-bottom, 0px) + 20px);
  }
  /* voll deckend auch dark: die alte rgba(…,.98)-Regel (Z. 66) ist mit
     html[data-theme] spezifischer als .mm-app allein → hier ausstechen */
  html[data-theme="dark"] #mobile-menu.mm-app { background: var(--bg); }
  /* Cookie-FAB (z 450, per JS ans body-Ende gehängt) schwebt sonst über
     dem CTA — solange das Menü offen ist, sanft raus (Transition hat er) */
  #mobile-menu.mm-app.open ~ #cookie-fab { opacity: 0; visibility: hidden; pointer-events: none; }
  #mobile-menu.mm-app .mm-nav { display: flex; flex-direction: column; margin: auto 0; }
  #mobile-menu.mm-app .mm-nav a {
    display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline;
    padding: 17px 0; border-bottom: 1px solid var(--line);
    font-size: 1rem; font-weight: 500; letter-spacing: 0;
    opacity: 0; transform: translateY(12px);
    transition: opacity .38s ease, transform .5s var(--ease);
  }
  #mobile-menu.mm-app .mm-nav a:last-child { border-bottom: none; }
  #mobile-menu.mm-app .mm-no {
    font-size: 12px; font-weight: 500; color: var(--ink-3);
    font-variant-numeric: tabular-nums; letter-spacing: .06em;
  }
  #mobile-menu.mm-app .mm-tx { display: flex; flex-direction: column; gap: 3px; }
  #mobile-menu.mm-app .mm-t { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
  #mobile-menu.mm-app .mm-d { font-size: 13px; font-weight: 400; color: var(--ink-3); opacity: 0; transition: opacity .32s ease; }
  #mobile-menu.mm-app .mm-arr { font-size: 15px; color: var(--ink-3); transition: transform .3s var(--ease); }
  #mobile-menu.mm-app .mm-nav a:active .mm-arr { transform: translateX(3px); }
  #mobile-menu.mm-app .mm-nav a.is-here .mm-no { color: var(--accent-solid); }
  #mobile-menu.mm-app .mm-nav a.is-here .mm-t::after {
    content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-solid); margin-left: 8px; vertical-align: 2px;
  }
  #mobile-menu.mm-app .mm-foot {
    border-top: 1px solid var(--line); padding-top: 20px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .38s ease, transform .5s var(--ease);
  }
  #mobile-menu.mm-app .mm-cta {
    width: 100%; justify-content: center;
    margin: 0; padding: 16px 22px;
    font-size: 15.5px; color: #fff; border-bottom: none;
  }
  #mobile-menu.mm-app .mm-cta:active { transform: scale(.98); }
  #mobile-menu.mm-app.open .mm-nav a { opacity: 1; transform: none; }
  #mobile-menu.mm-app.open .mm-d { opacity: 1; }
  #mobile-menu.mm-app.open .mm-foot { opacity: 1; transform: none; transition-delay: .32s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(1) { transition-delay: .06s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(2) { transition-delay: .12s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(3) { transition-delay: .18s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(4) { transition-delay: .24s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(1) .mm-d { transition-delay: .14s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(2) .mm-d { transition-delay: .2s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(3) .mm-d { transition-delay: .26s; }
  #mobile-menu.mm-app.open .mm-nav a:nth-child(4) .mm-d { transition-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) {
  /* Delays sind von der globalen Duration-Nullung nicht erfasst → hier
     zusätzlich neutralisieren, damit nichts nacheinander „aufploppt" */
  #mobile-menu.mm-app .mm-nav a, #mobile-menu.mm-app .mm-d, #mobile-menu.mm-app .mm-foot {
    opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
  }
}