/* ============================================================
   Öffentliche Webseite — seitenspezifische Styles
   ============================================================ */

/* ---------- Kein Grün auf der öffentlichen Website ----------
   Anweisung 11.08.2026: Grün passt nicht zur Marke. Alle Erfolgs- und
   Status-Akzente laufen auf der Website über das Kontorblau. Diese
   Überschreibung wirkt nur hier – Dashboard und Portal laden site.css
   nicht und behalten ihre semantischen Farben (z. B. „Gebucht"). */
:root {
  --success: var(--accent);
  --success-soft: var(--accent-soft);
}

/* ---------- Swiss International Style (Anweisung 11.08.2026) ----------
   Nur die Website: Dashboard und Portal laden site.css nicht.
   Die Grundsätze: rektilineare Kanten, Hierarchie über Deckkraft der
   Tinte statt über Grautöne, Linien statt Schatten, großzügiger
   Weißraum. Der eine Akzent ist das Kontorblau der Marke; IBM Plex
   und IBM Plex Sans sind gesetzt und bleiben. */
:root {
  /* Rektilinear: fast gerade Kanten, keine Pillen */
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-2xl: 6px; --r-pill: 6px;
  /* Hierarchie über Deckkraft, nicht über eigene Grautöne */
  --ink-2: oklch(0.255 0.008 165 / 0.72);
  --ink-3: oklch(0.255 0.008 165 / 0.56);
  --ink-4: oklch(0.255 0.008 165 / 0.30);
  /* Flächen nur Weiß und Kontorblau (Anweisung 11.08.2026):
     kein Grau und kein Papierton mehr als Füllfarbe. Abstufungen
     laufen über sehr helles Kontorblau. */
  --bg: #ffffff;
  --bg-2: oklch(0.97 0.014 256);
  --surface: #ffffff;
  --surface-2: oklch(0.975 0.012 256);
  --line: oklch(0.90 0.02 256);
  --line-2: oklch(0.94 0.015 256);
  --line-strong: oklch(0.85 0.03 256);
  /* Linien tragen die Trennung, Schatten treten ab */
  --shadow-xs: none; --shadow-sm: none;
  --shadow-md: 0 1px 0 oklch(0.255 0.008 165 / 0.08);
  --shadow-lg: 0 1px 0 oklch(0.255 0.008 165 / 0.10);
  --shadow-xl: 0 2px 0 oklch(0.255 0.008 165 / 0.10);
}
/* Eine Motion-Signatur: Sektionen erscheinen als ruhiger Fade,
   nur der Hero behaelt die Aufwaertsbewegung */
.reveal { transform: none; transition: opacity .5s var(--ease); }
.hero .reveal { transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }

/* Sichtbarer Tastatur-Fokus überall: ein Ring, eine Farbe */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, .call-btn:focus-visible { outline-offset: 3px; }

/* Weißraum ist Struktur */
.section { padding: clamp(88px, 12vw, 160px) 0; }
/* Typografische Präzision */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Eine Schrift auch fuer Zahlen: Geist Mono ist auf der Website abgeloest,
   Betraege laufen in Plex mit tabellarischen Ziffern (Dashboard behaelt Mono) */
.mono, .img-band-stats strong { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Karten: Linie statt Schwebeschatten, Akzent beim Zeigen */
.card-hover:hover { box-shadow: none; border-color: var(--accent); }

/* ---------- Display-Schrift: IBM Plex Sans ueberall (Vorgabe 11.08.2026) ----------
   Eine einzige Grotesk traegt die ganze Website - Swiss-Typskala:
   Ueberschriften leicht (300) bzw. medium (500), nie fett; Hierarchie
   aus Groesse, Gewicht und Raum. IBM Plex traegt auch die
   Markenakzent im Dashboard-Topbar. */
:root {
  --font-display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Alle Überschriften der Website tragen die Display-Schrift – nicht nur
   die vier großen Ebenen. Der Elementselektor ist sicher, weil site.css
   ausschließlich auf den öffentlichen Seiten lädt. Vorhandene
   font-weight-600-Angaben rendern dank font-synthesis:none als Regular;
   die Hierarchie kommt aus Größe und Raum. */
h1, h2, h3, h4, .faq-q {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}
/* Swiss-Gewichte als Grundregel der Website: Grosses leicht, Kleines medium, nie fett */
h1, h2 { font-weight: 300; }
h3, h4 { font-weight: 500; }
/* Ausnahme: Versalien-Etiketten im Fußbereich sind eine Label-Rolle,
   keine Überschrift – sie bleiben in der Grotesk. */
.footer-col h4 { font-family: var(--font); }

/* ---------- Grundgröße für Symbole (Sicherheitsnetz) ----------
   Alle Symbole werden als <svg viewBox="0 0 24 24"> ohne width und
   height ausgegeben. Ohne passende CSS-Regel nehmen sie die volle
   Breite des Elternelements ein – daraus entstanden bereits mehrfach
   bildschirmfüllende Symbole. Diese Regel steht bewusst ganz oben und
   hat die niedrigste Spezifität: Jede gezielte Regel überschreibt sie,
   aber wo eine fehlt oder überschrieben wird, bleibt die Größe sinnvoll. */
svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- iOS-26 Liquid-Glass Navigation ---------- */
.ios-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px clamp(16px, 4vw, 40px);
  pointer-events: none;
}
.ios-nav > * { pointer-events: auto; }
.ios-nav-inner {
  position: relative;
  display: flex; align-items: center; gap: 28px;
  max-width: var(--maxw); margin: 0 auto;
  min-height: 4rem; padding: 0 14px 0 18px;
  border-radius: var(--r-pill);
  background: var(--mat-floating-bg);
  -webkit-backdrop-filter: var(--mat-floating-blur);
  backdrop-filter: var(--mat-floating-blur);
  border: 1px solid oklch(1 0 0 / 0.7);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.9) inset,
    0 0 0 0.5px oklch(0.5 0.02 264 / 0.06),
    0 12px 32px -10px oklch(0.4 0.03 264 / 0.18),
    0 4px 10px -4px oklch(0.4 0.03 264 / 0.10);
  /* Beim Scrollen wird nicht mehr die Hoehe animiert - das erzwingt
     Layout. Stattdessen rutscht und schrumpft die Pille per transform. */
  transform-origin: 50% 0;
  transition: transform .22s var(--ease), background .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
/* obere Lichtkante (Liquid-Glass-Highlight) */
.ios-nav-inner::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.55) 0%, oklch(1 0 0 / 0) 42%);
  opacity: 0.8;
}
.ios-nav.scrolled .ios-nav-inner {
  transform: translateY(-6px) scale(0.965);
  background: oklch(1 0 0 / 0.7);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.9) inset,
    0 0 0 0.5px oklch(0.5 0.02 264 / 0.08),
    0 18px 44px -12px oklch(0.4 0.03 264 / 0.24);
}

.brand { display: flex; align-items: center; gap: 11px; position: relative; }
.brand-logo { height: 34px; width: auto; display: block; flex: none; }


.nav-links { display: flex; gap: 2px; margin: 0 auto; position: relative; }
.nav-links a {
  position: relative; font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
  padding: 9px 13px; border-radius: var(--r-pill);
  transition: color .25s var(--ease-soft), background .25s var(--ease-soft);
}
.nav-links a:hover { color: var(--ink); background: oklch(0.5 0.02 264 / 0.06); }
.nav-links a.active { color: var(--accent-deep); background: var(--accent-soft); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9062rem; font-weight: 500; color: var(--ink); padding: 9px 14px; border-radius: var(--r-pill); transition: background .25s, color .25s; }
.nav-login svg { width: 16px; height: 16px; color: var(--accent-deep); }
.nav-login:hover { background: oklch(0.5 0.02 264 / 0.06); color: var(--accent-deep); }

/* Hamburger */
.menu-toggle {
  display: none; position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  background: oklch(1 0 0 / 0.6); border: 1px solid var(--line);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-toggle span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .25s; }
.menu-open .menu-toggle span:first-child { transform: translateY(3.4px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.4px) rotate(-45deg); }

/* Mobile drawer (Glas) */
.mobile-menu {
  position: relative; display: none; flex-direction: column; gap: 18px;
  max-width: var(--maxw); margin: 12px auto 0; padding: 22px;
  border-radius: var(--r-2xl);
  background: oklch(1 0 0 / 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid oklch(1 0 0 / 0.7);
  box-shadow: var(--shadow-lg);
  /* Transition statt Keyframes: bei schnellem Auf und Zu lenkt sie aus
     der aktuellen Lage um, statt von vorn zu beginnen. */
  opacity: 1; transform: translateY(0);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              display .25s allow-discrete;
}
/* Geoeffnet wird ueber .ios-nav.menu-open - der Startzustand muss auf
   denselben Selektor zeigen, sonst laeuft die Einblendung nicht an. */
@starting-style {
  .ios-nav.menu-open .mobile-menu { opacity: 0; transform: translateY(-12px); }
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { font-size: 1.125rem; font-weight: 500; padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 10px; }
.mobile-menu nav a.active { color: var(--accent-deep); }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mobile-menu-actions .btn svg { width: 17px; height: 17px; }

/* Body-Abstand für fixe Navleiste */
body[data-chrome] { padding-top: 100px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(72px, 10vw, 128px); overflow: hidden; }
.hero-glow {
  position: absolute; top: -22%; right: -12%; width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  opacity: 0.9; filter: blur(8px);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
.hero-pill { margin-bottom: 26px; }
/* Hero-Ueberschriften in der urspruenglichen Schrift (Helvetica Neue,
   Wunsch 11.08.2026) und ausdruecklich fett - die bewusste Ausnahme von
   der Plex-Leicht-Regel. */
.hero-title, .page-hero h1, .pr-hero h1 { font-family: "IBM Plex Sans", 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; }
.hero-title { font-size: clamp(2.5rem, 6.2vw, 4.75rem); letter-spacing: -0.03em; line-height: 1.04; }
.hero-lede { font-size: clamp(1.0938rem, 1.6vw, 1.3125rem); color: var(--ink-2); margin-top: 24px; max-width: 30ch; line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* Hero-Video + überlagerte Glas-Karten */
.hero-visual { position: relative; min-height: 460px; }
.hero-video-frame { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-float); aspect-ratio: 4/3; background: var(--bg-2); }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
.hero-video-grad { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.2 0.05 256 / 0.22) 0%, transparent 30%, transparent 62%, oklch(0.2 0.05 256 / 0.34) 100%); pointer-events: none; }
.hero-video-tag { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-sm); }
.hero-video-tag svg { width: 15px; height: 15px; color: var(--accent-deep); }
/* Sheen-Sweep über das Video */
.hero-video-frame::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, oklch(1 0 0 / 0.28), transparent); transform: skewX(-18deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .hero-video-frame::after { animation: sheen 6.5s ease-in-out infinite; } }
@keyframes sheen { 0%, 62% { left: -60%; } 86%, 100% { left: 130%; } }

.preview-card { border-radius: var(--r-xl); box-shadow: var(--shadow-float); padding: 22px; }
.float-a { position: absolute; z-index: 4; left: -32px; bottom: -30px; width: 300px; }
.float-c { position: absolute; z-index: 3; right: -22px; top: -26px; width: 190px; }
@media (max-width: 1080px) { .float-a { left: 0; } .float-c { right: 0; } }

.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pc-title { font-size: 0.8438rem; font-weight: 500; color: var(--ink-2); }
.pc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pc-progress-bar { flex: 1; height: 9px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.pc-progress-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transform-origin: left center; animation: grow .8s var(--ease) both; }
.pc-progress span { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
@keyframes grow { from { transform: scaleX(0); } }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pc-stat { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px 12px; text-align: center; }
.pc-stat-k { display: block; font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.pc-stat-l { font-size: 0.7188rem; color: var(--ink-3); }

.mini-list-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mini-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.625rem; font-weight: 600; }
.mini-rows { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mini-rows span { font-size: 0.8438rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-rows small { font-size: 0.7188rem; color: var(--ink-3); }
.mini-check { width: 22px; height: 22px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }
.mini-check svg { width: 12px; height: 12px; }

.mini-chart { display: flex; align-items: flex-end; gap: 8px; height: 78px; }
.mini-chart .bar { flex: 1; height: var(--h); background: var(--line-strong); border-radius: 5px 5px 3px 3px; transform-origin: bottom center; animation: rise .7s var(--ease) both; }
.mini-chart .bar-on { background: var(--accent); }
@keyframes rise { from { transform: scaleY(0.05); } }
.mini-chart-l { display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.7188rem; color: var(--ink-3); }

/* floating motion */
@media (prefers-reduced-motion: no-preference) {
  .float-a { animation: floaty 7s ease-in-out infinite; }
  .float-c { animation: floaty 7s ease-in-out infinite 1.2s; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* Bei feinem Zeiger übernimmt der Maus-Parallax (kein Konflikt mit floaty) */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .float-a, .float-c { animation: none; }
}

/* ---------- Trust ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 11px; font-size: 0.9062rem; font-weight: 500; color: var(--ink-2); }
.trust-ic { display: grid; place-items: center; color: var(--accent-deep); }
.trust-ic svg { width: 19px; height: 19px; }

/* ---------- Section heads ---------- */
/* Abschnittskoepfe stehen links, nicht in der Mitte.
   Zentriert wirkte auf jeder Seite gleich - Etikett, Ueberschrift, Text,
   Raster, achtmal untereinander. Linksbuendig laeuft der Kopf ausserdem
   mit der Kante des Rasters darunter, und lange deutsche Woerter brechen
   ruhiger. Zentriert bleibt die Ausnahme fuer einen einzelnen Moment. */
.section-head { max-width: 720px; margin: 0 0 clamp(40px, 5vw, 64px); text-align: left; }
.section-head-left { margin-left: 0; text-align: left; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
/* Die Ueberschrift bekommt links eine feine Marke - sie ersetzt die
   Symmetrie als Ordnungsmittel. */
.section-head .section-title { position: relative; }
.section-head:not(.section-head-center) .eyebrow { display: inline-block; }
.section-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.16; }
.section-lede { font-size: clamp(1.0312rem, 1.5vw, 1.1562rem); color: var(--ink-2); margin-top: 18px; line-height: 1.6; }
.section-tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Leistungen ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { padding: 30px; border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 14px; }
.svc-ic { width: 50px; height: 50px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.svc-ic svg { width: 23px; height: 23px; }
.svc-card h3 { font-size: 1.1562rem; font-weight: 500; letter-spacing: -0.02em; }
.svc-card p { font-size: 0.9062rem; color: var(--ink-2); line-height: 1.55; }
.svc-note { text-align: center; font-size: 0.8438rem; color: var(--ink-3); margin-top: 32px; max-width: 620px; margin-inline: auto; }

/* ---------- Über ---------- */
.ueber-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.ueber-visual { position: relative; }
.ueber-portrait { aspect-ratio: 4/5; border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }
img.ueber-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.ueber-badge { position: absolute; right: 16px; bottom: 16px; max-width: calc(100% - 32px); border-radius: var(--r-lg); padding: 14px 18px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.ueber-badge-k { font-size: 1.125rem; font-weight: 600; color: var(--accent-deep); }
.ueber-badge-l { font-size: 0.7812rem; color: var(--ink-2); line-height: 1.4; }
.ueber-lede { font-size: 1.1875rem; color: var(--ink); margin-top: 22px; line-height: 1.55; font-weight: 450; }
.ueber-text { font-size: 1rem; color: var(--ink-2); margin-top: 18px; line-height: 1.7; }
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.quality { display: flex; gap: 14px; }
.quality-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--accent-deep); display: grid; place-items: center; box-shadow: var(--shadow-xs); }
.quality-ic svg { width: 20px; height: 20px; }
.quality strong { display: block; font-size: 0.9688rem; font-weight: 600; }
.quality span { font-size: 0.8438rem; color: var(--ink-2); line-height: 1.45; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 30px 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step-num { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 20px; }
.step h3 { font-size: 1.0938rem; font-weight: 500; }
.step p { font-size: 0.875rem; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }
.step-line { display: none; }

/* ---------- Portal (dunkel) ---------- */
/* Der dunkle Abschnitt sass als flaches Rechteck im hellen Seitenfluss.
   Die minimal aufgehellten Kanten geben ihm Koerper und folgen derselben
   Lichtrichtung wie die Schatten im uebrigen System (Licht von oben). */
.section-dark {
  padding: clamp(72px, 9vw, 112px) 0;
  /* Dunkelflaeche = Kontorblau, kein Anthrazit (Anweisung 11.08.2026) */
  background: oklch(0.24 0.05 256);
  color: oklch(0.92 0.004 150); position: relative; overflow: hidden;
}
.section-dark::before { content:''; position:absolute; top:-30%; left:-10%; width:600px; height:600px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity:0.16; pointer-events:none; }
.portal-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.eyebrow-light { color: oklch(0.80 0.05 245); }
.portal-title { color: #fff; }
.portal-lede { font-size: 1.1562rem; color: oklch(0.82 0.006 155); margin-top: 20px; line-height: 1.6; max-width: 44ch; }
.portal-feat { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); }
/* Oben buendig mit der H2 der Textspalte, nicht mit dem Etikett */
@media (min-width: 861px) {
  .portal-featwrap { padding-top: 46px; }
  .portal-feat li:nth-child(-n+2) { border-top: none; padding-top: 0; }
}
/* Kurze Linkliste (Leistungen): mittig zur Textspalte statt oben haengend */
@media (min-width: 861px) {
  .portal-featwrap.dz-wrap { align-self: center; padding-top: 0; }
  .dz-wrap .portal-feat li:nth-child(2) { border-top: 1px solid oklch(1 0 0 / 0.14); }
}
@media (max-width: 860px) {
  .portal-feat li:first-child { border-top: none; padding-top: 0; }
}
.portal-feat li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; color: oklch(0.92 0.005 250);
  padding: 13px 0; border-top: 1px solid oklch(1 0 0 / 0.14); min-height: 44px; }
.portal-feat .pf-ic { flex: none; width: 18px; height: 18px; color: oklch(0.84 0.06 245); display: grid; place-items: center; }
.portal-feat .pf-ic svg { width: 18px; height: 18px; }
.portal-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.portal-secure { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: oklch(0.7 0.006 155); }
.portal-secure svg { width: 15px; height: 15px; }

/* Phone mock */


/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item.open { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: none; border: none; text-align: left; font-size: 1.0312rem; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; }
.faq-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink-2); transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s; }
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > * { opacity: 0; transition: opacity .16s var(--ease-soft); }
.faq-item.open .faq-a-inner > * { opacity: 1; transition-delay: .08s; }
.faq-a p { padding: 0 24px 24px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.65; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ---------- Prozess-Detailliste (Zusammenarbeit) ---------- */

/* ---------- Monatsfluss ---------- */
.flow-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flow-step { position: relative; text-align: center; padding: 8px; }
.flow-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--accent-deep); display: grid; place-items: center; margin: 0 auto 16px; box-shadow: var(--shadow-xs); position: relative; z-index: 1; }
.flow-ic svg { width: 25px; height: 25px; }
.flow-line { position: absolute; top: 36px; left: 50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; }
.flow-step:last-child .flow-line { display: none; }
.flow-step strong { font-size: 0.9688rem; font-weight: 600; display: block; }
.flow-step p { font-size: 0.8125rem; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* ---------- Check-Liste ---------- */
.check-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 0.9688rem; color: var(--ink); }
.check-list li svg { width: 22px; height: 22px; color: var(--accent-deep); flex: none; margin-top: 1px; }

/* ---------- Portrait-Bildunterschrift ---------- */
.portrait-cap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; text-align: center; }
.portrait-cap strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.portrait-cap span { font-size: 0.8125rem; color: var(--ink-3); }

/* ---------- Portal-Infoseite ---------- */
.psec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.psec-card { padding: 28px; border-radius: var(--r-xl); }
.psec-ic { width: 50px; height: 50px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 18px; }
.psec-ic svg { width: 24px; height: 24px; }
.psec-card h3 { font-size: 1.0938rem; font-weight: 500; letter-spacing: -0.02em; }
.psec-card p { font-size: 0.875rem; color: var(--ink-2); margin-top: 9px; line-height: 1.55; }

@media (max-width: 860px) {
  .flow-track { grid-template-columns: 1fr 1fr; }
  .flow-line { display: none; }
  .psec-grid { grid-template-columns: 1fr; }
}

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 52px; align-items: start; }
.kontakt-info { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.ki-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.ki-row:last-child { border-bottom: none; }
.ki-row svg { width: 22px; height: 22px; color: var(--accent-deep); flex: none; }
.ki-row small { display: block; font-size: 0.75rem; color: var(--ink-3); }
.ki-row span:not(small) { font-size: 0.9688rem; font-weight: 500; }
a.ki-row:hover span:not(small) { color: var(--accent-deep); }
.kontakt-trust { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 20px; border-radius: var(--r-lg); }
.kontakt-trust svg { width: 22px; height: 22px; color: var(--accent-deep); flex: none; }
.kontakt-trust p { font-size: 0.8438rem; color: var(--ink-2); line-height: 1.55; }
.map-ph { aspect-ratio: 16/7; border-radius: var(--r-lg); margin-top: 28px; }
.map-embed { margin-top: 28px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0; }
.map-embed iframe { width: 100%; height: 220px; display: block; }

/* Zwei-Klick-Einwilligung für die Karte (DSGVO) */
.map-consent {
  min-height: 240px; line-height: 1.55;
  display: grid; place-items: center; text-align: center; padding: 30px 22px;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, var(--line) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, var(--line) 25px 26px),
    linear-gradient(135deg, var(--accent-tint), var(--surface));
}
.map-consent-inner { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.map-consent-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent-deep); box-shadow: var(--shadow-sm); margin-bottom: 2px; }
.map-consent-ic svg { width: 23px; height: 23px; }
.map-consent h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.map-consent p { font-size: 0.8438rem; color: var(--ink-2); margin: 0; }
.map-consent .btn { margin-top: 6px; }
.map-consent .btn svg { margin-right: 2px; }
.map-consent-remember { font-size: 0.7812rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.map-consent-remember input { accent-color: var(--accent); width: 15px; height: 15px; }
.map-consent-alt { font-size: 0.8125rem; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.map-consent-alt:hover { color: var(--accent-hover); }

/* Mini-Prozess (Zugang anfragen) */
.prozess-mini { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; }
.pm-step { display: flex; gap: 14px; align-items: flex-start; }
.pm-n { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; flex: none; }
.pm-step strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.pm-step span { font-size: 0.8438rem; color: var(--ink-2); }

/* ---------- Kundenerfassung (Upload + Fieldsets) ---------- */
.erf-section { margin-top: 26px; }
.erf-section:first-child { margin-top: 0; }
.erf-legend { display: flex; align-items: center; gap: 11px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 16px; }
.erf-legend .erf-n { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); display: grid; place-items: center; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.up-zone { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 30px; text-align: center; background: var(--surface-2); cursor: pointer; transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft); }
.up-zone:hover, .up-zone.over { border-color: var(--accent); background: var(--accent-tint); }
.up-zone .uz-ic { width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; margin: 0 auto 12px; }
.up-zone .uz-ic svg { width: 23px; height: 23px; }
.up-zone strong { font-size: 0.9375rem; font-weight: 600; }
.up-zone p { font-size: 0.8125rem; color: var(--ink-3); margin-top: 5px; }
.up-files { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.up-file { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.up-file .uf-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.5625rem; font-weight: 600; flex: none; }
.up-file .uf-name { flex: 1; font-size: 0.8438rem; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-file .uf-x { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--bg-2); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; flex: none; }
.up-file .uf-x:hover { background: var(--danger-soft); color: var(--danger); }
.up-file .uf-x svg { width: 14px; height: 14px; }
/* Mehrfach-Auswahl-Chips (Leistungsumfang) */
.topic-chips.multi .topic-chip.active::before { content: '✓ '; }

.kontakt-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.form-actions { margin-top: 6px; }
.form-alt { text-align: center; font-size: 0.8438rem; color: var(--ink-3); margin-top: 16px; }
.ulink { color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid var(--accent-ring); }
.ulink:hover { border-bottom-color: var(--accent); }
/* Auf dunklem Grund geht das tiefe Navy unter – dort helle Verweise. */
.section-dark .ulink, .section-dark p a:not(.btn) {
  color: oklch(0.90 0.030 250);
  border-bottom-color: oklch(0.90 0.030 250 / 0.45);
}
.section-dark .ulink:hover, .section-dark p a:not(.btn):hover {
  color: #fff; border-bottom-color: #fff;
}
.field-error.show { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* Success state */
.form-success { text-align: center; padding: 30px 10px; }
.form-success .fs-ic { width: 66px; height: 66px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 22px; animation: pop .5s var(--ease) both; }
.form-success .fs-ic svg { width: 32px; height: 32px; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }
.form-success h3 { font-size: 1.375rem; }
.form-success p { color: var(--ink-2); margin-top: 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-note { font-size: 0.875rem; color: var(--ink-2); max-width: 34ch; line-height: 1.6; }
.footer-bbh { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 0.8125rem; color: var(--accent-deep); font-weight: 500; }
.footer-bbh svg { width: 17px; height: 17px; flex: none; }
.footer-legal { display: flex; gap: 12px; align-items: flex-start; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer-legal svg { width: 17px; height: 17px; color: var(--ink-4); flex: none; margin-top: 2px; }
.footer-legal p { font-size: 0.7812rem; color: var(--ink-3); line-height: 1.6; max-width: 95ch; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h4 { font-size: 0.7812rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.footer-col a, .footer-col span { font-size: 0.9062rem; color: var(--ink-2); }
.footer-col a:hover { color: var(--accent-deep); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); }
.footer-credit { flex-basis: 100%; text-align: center; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--ink-4); font-size: 0.7812rem; }
.footer-credit a { color: var(--ink-2); font-weight: 500; transition: color .2s var(--ease-soft); }
.footer-credit a:hover { color: var(--accent-deep); }
@media (max-width: 720px) { .footer-credit { text-align: left; } }
.footer-secure { display: inline-flex; align-items: center; gap: 8px; }
.footer-secure svg { width: 15px; height: 15px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 120%);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--r-pill);
  font-size: 0.9062rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200;
  display: flex; align-items: center; gap: 10px; transition: transform .4s ease, visibility .4s; max-width: 90vw;
  visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast svg { width: 18px; height: 18px; color: oklch(0.80 0.07 245); }

/* ---------- Subpage-Hero ---------- */
.page-hero { position: relative; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -40%; right: -8%; width: 620px; height: 620px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%); opacity: 0.85; pointer-events: none; }
.page-hero-inner { position: relative; max-width: 760px; }
.page-hero h1 { font-size: clamp(2.25rem, 5.4vw, 3.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin-top: 22px; }
.page-hero .lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-2); margin-top: 20px; line-height: 1.6; max-width: 56ch; }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-3); }
.crumb a:hover { color: var(--accent-deep); }
.crumb svg { width: 13px; height: 13px; }

/* ---------- Service-Card Zusatz ---------- */
.svc-cat { font-size: 0.7188rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
.svc-card h4 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Gruppierte Leistungen ---------- */
.svc-grouped { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.svc-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.svc-group-head h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: -0.03em; }
.svc-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-group .svc-card { gap: 12px; }

/* ---------- Werdegang (CV) ---------- */
.cv-list { display: flex; flex-direction: column; }
.cv-item { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.cv-item:first-child { border-top: none; }
.cv-y { font-size: 0.875rem; font-weight: 500; color: var(--accent-deep); padding-top: 2px; }
.cv-body h4 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.cv-body p { font-size: 0.9062rem; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }

/* ---------- Software-Chips ---------- */
.sw-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sw-chip { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.8438rem; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 18px; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.sw-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--accent-ring); }

/* ---------- Vertrauenskarten ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tv-card { padding: 28px; border-radius: var(--r-xl); }
.tv-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 18px; }
.tv-ic svg { width: 23px; height: 23px; }
.tv-card h3 { font-size: 1.0312rem; font-weight: 500; letter-spacing: -0.02em; }
.tv-card p { font-size: 0.8438rem; color: var(--ink-2); margin-top: 9px; line-height: 1.55; }

/* ---------- CTA-Band ---------- */
.cta-band { position: relative; overflow: hidden; background: oklch(0.24 0.05 256); color: oklch(0.94 0.01 250); border-radius: var(--r-3xl); padding: clamp(44px, 6vw, 72px); text-align: center; }
.cta-band::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: 0.2; }
.cta-band h2 { position: relative; color: #fff; font-size: clamp(1.625rem, 3.4vw, 2.5rem); font-weight: 300; letter-spacing: -0.02em; }
.cta-band p { position: relative; color: oklch(0.82 0.006 155); font-size: 1.0938rem; margin-top: 16px; max-width: 48ch; margin-inline: auto; line-height: 1.6; }
.cta-band .cta-actions { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
/* Helle Variante: weisse Karte mit Hairline statt dunkler Flaeche (Portal-Seite) */
.cta-band-licht { background: #fff; border: 1px solid var(--line); }
.cta-band-licht::before { display: none; }
.cta-band-licht h2 { color: var(--ink); }
.cta-band-licht p { color: var(--ink-2); }
.cta-band-licht .grad-text { color: var(--accent); }

/* ============================================================
   Anruf-Widget (Floating) + Cookie-Banner
   ============================================================ */
.call-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.call-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 22px 0 18px; border: none; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-family: inherit; font-size: 0.9688rem; font-weight: 600;
  box-shadow: 0 10px 26px -8px var(--accent-ring), 0 2px 6px oklch(0 0 0 / 0.12);
  cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, background .25s;
}
.call-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 16px 34px -10px var(--accent-ring); }
.call-btn svg { width: 21px; height: 21px; }
.call-fab.open .call-btn .call-label { display: none; }
.call-fab.open .call-btn { width: 56px; padding: 0; justify-content: center; }
/* Das dauerhafte Klingeln des Hoerers war eine Endlosschleife auf einem
   fest eingeblendeten Element ohne erkennbaren Zweck - ersatzlos entfernt. */

/* Höhe begrenzen: mit Erreichbarkeits-Hinweis und Wunschzeit wird das Panel
   sonst höher als niedrige Fenster und wird oben abgeschnitten. */
.call-panel { width: 320px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 20px; transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.call-panel.show { opacity: 1; transform: none; }
.call-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.call-ava { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex: none; }
.call-ava svg { width: 21px; height: 21px; }
.call-panel-head strong { display: block; font-size: 0.9062rem; font-weight: 600; }
.call-panel-head span { font-size: 0.75rem; color: var(--ink-3); }
.call-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg-2); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s; }
.call-x:hover { background: var(--line); }
.call-x svg { width: 16px; height: 16px; transform: rotate(45deg); }
.call-lede { font-size: 0.8438rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
.call-panel .btn-accent { margin-bottom: 12px; }
/* Erreichbarkeit jetzt / ausserhalb der Sprechzeiten */
.call-state { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7188rem; font-weight: 600; letter-spacing: .01em; padding: 4px 10px 4px 8px; border-radius: 999px; margin: 2px 0 9px; }
.call-state i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.call-state.is-open { color: var(--success); background: var(--success-soft); }
.call-state.is-closed { color: var(--ink-3); background: var(--bg-2); }
.call-when { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.call-when > span { font-size: 0.75rem; color: var(--ink-3); flex: none; }
.call-when .input { padding: 9px 12px; font-size: 0.8125rem; }
.call-oder { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--ink-3); font-size: 0.75rem; }
.call-oder::before, .call-oder::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.call-feld { display: block; margin-bottom: 10px; }
.call-feld > span { display: block; font-size: 0.75rem; color: var(--ink-2); margin-bottom: 5px; }
.call-feld .input { width: 100%; padding: 11px 13px; font-size: max(1rem, 16px); }
.call-cb .btn-block { width: 100%; justify-content: center; margin-top: 2px; }
.call-secure a { color: inherit; text-decoration: underline; }
.call-cb-row { display: flex; gap: 8px; border-radius: var(--r-md); }
.call-cb-row .input { padding: 11px 14px; }
.call-cb-row .btn { white-space: nowrap; padding: 11px 16px; }
.call-cb .field-error { margin-top: 6px; display: block; }
/* Datenschutz-Bestätigung im Rückruf-Fenster: kompakt, aber gut treffbar */
.call-dsgvo { display: flex; align-items: flex-start; gap: 9px; font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.call-dsgvo .box { margin-top: 1px; }
.call-dsgvo a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.call-secure { display: flex; align-items: center; gap: 7px; font-size: 0.7188rem; color: var(--ink-3); margin-top: 12px; justify-content: center; }
.call-secure svg { width: 14px; height: 14px; color: var(--accent-deep); }
.call-ok { display: flex; align-items: center; gap: 10px; font-size: 0.8438rem; font-weight: 500; color: var(--success); background: var(--success-soft); padding: 12px 14px; border-radius: var(--r-md); }
.call-ok svg { width: 18px; height: 18px; flex: none; }

.cookie-banner {
  position: fixed; left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 160; width: 440px; max-width: calc(100vw - 32px);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); padding: 20px 22px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start;
  opacity: 0; transform: translateY(calc(100% + 28px));
}
.cookie-banner.show { opacity: 1; transform: translateY(0); }
.cookie-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; flex: none; }
.cookie-calc { width: 48px; height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .cookie-calc { animation: calcbob 4s ease-in-out infinite; transform-origin: 50% 70%; }
  .cookie-crumbs circle { animation: crumb 4s ease-in-out infinite; }
}
@keyframes calcbob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes crumb { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.cookie-ic svg { width: 22px; height: 22px; }
.cookie-text strong { font-size: 0.9688rem; font-weight: 600; display: block; margin-bottom: 4px; letter-spacing: -0.01em; }
.cookie-text p { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.55; }
.cookie-text a { color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid var(--accent-ring); }
/* Auswahl im Cookie-Hinweis: echte Schalter statt Beschriftungen.
   Was nicht wählbar ist, sieht auch nicht wählbar aus. */
.cookie-opts { display: grid; gap: 10px; margin-top: 14px; }
.ck-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s;
}
.ck-opt:hover:not(.is-fixed):not(.is-off) { border-color: var(--accent); background: var(--accent-soft); }
.ck-opt input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent-deep); flex: none; }
.ck-opt-t { display: block; min-width: 0; }
.ck-opt-t strong { display: block; font-size: 0.8438rem; font-weight: 600; color: var(--ink); }
.ck-opt-t small { display: block; margin-top: 2px; font-size: 0.7812rem; line-height: 1.45; color: var(--ink-3); }
.ck-opt.is-fixed { cursor: default; background: var(--surface-2); }
.ck-opt.is-fixed input { opacity: .55; }
.ck-opt.is-off { cursor: default; opacity: .62; padding-left: 39px; }
.cookie-links { display: inline-flex; gap: 14px; align-items: center; margin-left: auto; font-size: 0.7812rem; }
.cookie-links a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.cookie-links a:hover { color: var(--accent-deep); }
@media (max-width: 640px) {
  .cookie-links { margin-left: 0; width: 100%; }
  .cookie-actions .btn { flex: 1 1 auto; }
}
.ck-switch { cursor: pointer; }
.ck-switch input { position: absolute; opacity: 0; }
.ck-track { width: 34px; height: 19px; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .25s; flex: none; }
.ck-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: var(--shadow-xs); }
.ck-switch input:checked + .ck-track { background: var(--accent); }
.ck-switch input:checked + .ck-track::after { transform: translateX(15px); }
.ck-switch input:focus-visible + .ck-track { box-shadow: 0 0 0 4px var(--accent-ring); }
.cookie-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) { .cookie-actions { flex-direction: column-reverse; } .cookie-actions .btn { width: 100%; } .call-btn .call-label { display: none; } .call-btn { width: 56px; padding: 0; justify-content: center; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-visual { min-height: 380px; max-width: 460px; }
  .ueber-grid, .portal-grid, .faq-wrap, .kontakt-grid { grid-template-columns: 1fr; gap: 40px; }
  .ueber-visual { max-width: 420px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-group-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .portal-feat { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Die Beschriftungen duerfen nie umbrechen - eine zweizeilige
   Navigationsleiste sieht kaputt aus. Wird es eng, uebernimmt das
   Klappmenue. Die Grenze liegt bei 1140px, weil "Lohnsteuerhilfe" und
   "Uber mich" darunter nicht mehr nebeneinander passen. */
.ios-nav-inner a, .ios-nav-inner .nav-links a, .ios-nav-inner .nav-login a { white-space: nowrap; }
/* Grenze in em statt px: em bezieht sich in einer Medienabfrage auf die
   Schriftgroesse des Browsers. Stellt jemand sie groesser, klappt das
   Menue frueher ein - sonst laeuft die Leiste bei 24px Grundschrift
   ueber den Bildschirmrand. 71.25em = 1140px bei Standardeinstellung. */
@media (max-width: 71.25em) {
  .nav-links, .nav-login { display: none; }
  .menu-toggle { display: inline-flex; }
  .ios-nav.menu-open .mobile-menu { display: flex; }
  /* Ohne die Links fehlt das Element, das die Aktionen nach rechts
     geschoben hat - sonst klebt das Menuezeichen am Logo. */
  .ios-nav-inner .nav-actions { margin-left: auto; }
}
/* Zweiter Ausloeser, gesetzt von site.js: die Leiste klappt auch dann ein,
   wenn sie schlicht nicht mehr in eine Zeile passt. Das passiert, sobald
   jemand die Schrift ueber die Bedienhilfen vergroessert - eine
   Medienabfrage kann das nicht sehen, weil em dort der Voreinstellung
   des Browsers folgt und nicht dem gesetzten html-font-size. */
.ios-nav.nav-eng .nav-links,
.ios-nav.nav-eng .nav-login { display: none; }
.ios-nav.nav-eng .menu-toggle { display: inline-flex; }
.ios-nav.nav-eng .nav-actions { margin-left: auto; }
.ios-nav.nav-eng.menu-open .mobile-menu { display: flex; }
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .nav-actions .btn-accent { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-group-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cv-item { grid-template-columns: 1fr; gap: 6px; }
  .quality-grid { grid-template-columns: 1fr; }
  .portal-feat { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .ueber-badge { right: 12px; }
  .section { padding: 64px 0; }
}
@media (max-width: 420px) {
  .hero-cta .btn { width: 100%; }
}

/* ---- Fußbereich auf dem Handy: eine Spalte, klare Gruppen ----
   Zwei Spalten sind für Bezeichnungen wie „Ablauf & Zusammenarbeit" zu
   schmal, und 44 px Tipphöhe plus 11 px Abstand je Eintrag zog die Liste
   über mehrere Bildschirme. Jetzt untereinander, durch Haarlinien
   getrennt – man sieht sofort, welche Gruppe wo endet. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand { margin-bottom: 4px; }

  .footer-col { gap: 0; }
  .footer-col h4 { margin-bottom: 6px; }
  .footer-col a { border-top: 1px solid var(--line); }
  .footer-col h4 + a { border-top: 0; }
  .footer-col span {
    display: flex; align-items: center; min-height: 34px;
    line-height: 1.35; padding: 3px 2px;
  }
  .footer-col h4 + span { padding-top: 0; }
}

/* ============================================================
   WOW-Animationspaket
   ============================================================ */

/* Scroll-Fortschrittsbalken */
/* Der Balken ist immer voll breit und wird per transform gestaucht.
   Vorher wurde bei jedem Scroll-Ereignis die Breite gesetzt - eine
   Layout-Eigenschaft, hunderte Male je Sekunde. */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 200; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 10px var(--accent-ring); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* Aurora-Blobs im Hero */
.hero { isolation: isolate; }
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; mix-blend-mode: multiply; }
.aurora .a1 { width: 460px; height: 460px; top: -120px; right: 4%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); }
.aurora .a2 { width: 380px; height: 380px; bottom: -140px; left: -60px; background: radial-gradient(circle, oklch(0.9 0.05 210), transparent 70%); }
.aurora .a3 { width: 300px; height: 300px; top: 30%; left: 40%; background: radial-gradient(circle, oklch(0.92 0.04 280), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .aurora .a1 { animation: drift1 18s ease-in-out infinite; }
  .aurora .a2 { animation: drift2 22s ease-in-out infinite; }
  .aurora .a3 { animation: drift3 26s ease-in-out infinite; }
}
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-26px) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,-30px) scale(1.15); } }

/* Headline-Reveal (Masken-Aufzug, zeilenweise) */
/* Headline-Reveal – sichtbar ist der Standard.
   ------------------------------------------------------------
   Zwei Fehler waren hier begraben:
   1) Eine Maske mit overflow:hidden schnitt umgebrochene Zeilen
      weg (traf die Startseiten-Headline auf dem Smartphone).
   2) Der Startschuss für die Animation lief über
      requestAnimationFrame. In Hintergrund-Tabs wird das
      angehalten – die Überschrift blieb dann dauerhaft
      unsichtbar.
   Deshalb gilt jetzt: Text ist immer sichtbar. Die Animation
   wird nur ausgeführt, wenn das Skript sie ausdrücklich über
   .armed vorbereitet, und .in schaltet zurück auf sichtbar.
   Läuft kein JavaScript, ist die Überschrift trotzdem lesbar. */
.reveal-lines .rl { display: block; overflow: visible; }
.reveal-lines .rl > span { display: block; opacity: 1; transform: none; }
.reveal-lines.armed .rl > span {
  opacity: 0;
  transform: translateY(0.32em);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.reveal-lines.armed.in .rl > span { opacity: 1; transform: none; }
.reveal-lines.armed .rl:nth-child(2) > span { transition-delay: .09s; }
.reveal-lines.armed .rl:nth-child(3) > span { transition-delay: .18s; }
.reveal-lines.armed .rl:nth-child(4) > span { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-lines.armed .rl > span { opacity: 1; transform: none; transition: none; }
}

/* Gradient-Text-Akzent */
/* Frueher ein Farbverlauf. Verlaufstext auf einer Hauptueberschrift ist
   das deutlichste Erkennungszeichen maschinell erzeugter Seiten - und er
   bringt hier nichts, was eine flache Farbe nicht besser koennte. */
.grad-text { color: var(--accent); }
/* Auf dunklen Kontorblau-Flaechen laeuft der Akzent hell, sonst saeuft er ab */
.section-dark .grad-text, .img-band .grad-text, .cta-band .grad-text { color: oklch(0.86 0.07 250); }
/* Der Verlauf steht still. Als Dauerschleife auf der Hauptueberschrift war
   er die auffaelligste Bewegung der Seite - und die einzige, die niemand
   ausgeloest hat. */

/* 3D-Tilt */
[data-tilt] { transform-style: preserve-3d; transition: transform .3s var(--ease); will-change: transform; }
[data-tilt] .tilt-pop { transform: translateZ(40px); }

/* Magnetische Buttons */
[data-magnetic] { transition: transform .25s var(--ease); will-change: transform; }

/* Cursor-Spotlight auf dunklen Flächen */
.spotlight { position: relative; overflow: hidden; }
/* Position ueber transform statt left/top, und der Wert wird direkt am
   Element gesetzt statt ueber eine Variable am Elternteil - sonst
   rechnet der Browser bei jeder Mausbewegung alle Kinder neu. */
.spotlight::before { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, oklch(0.6 0.13 256 / 0.30), transparent 65%); left: 0; top: 0; margin: -240px 0 0 -240px; transform: translate3d(var(--sx, 50%), var(--sy, 0px), 0); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0; will-change: transform; }
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Zähl-Pop bei Count-Ups */
.count-pop { display: inline-block; animation: countpop .5s var(--ease); }
@keyframes countpop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* Trust-Marquee (sanft) */
.trust-row .trust-item { transition: transform .3s var(--ease), color .3s; }
.trust-row .trust-item:hover { transform: translateY(-3px); color: var(--accent-deep); }
.trust-row .trust-item:hover .trust-ic { transform: scale(1.15) rotate(-6deg); }
.trust-ic { transition: transform .3s var(--ease); }

/* Logo-Sheen beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .brand-logo { -webkit-mask-image: linear-gradient(105deg, #000 40%, oklch(0 0 0 / 0.55) 50%, #000 60%); mask-image: linear-gradient(105deg, #000 40%, oklch(0 0 0 / 0.55) 50%, #000 60%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; animation: logosheen 1.2s var(--ease) .4s 1 both; }
}
@keyframes logosheen { from { -webkit-mask-position: 130% 0; mask-position: 130% 0; } to { -webkit-mask-position: -30% 0; mask-position: -30% 0; } }

/* ---------- Foto-Bänder ---------- */
/* Zahlen-Band: einfarbiges Kontorblau statt Foto (Anweisung 11.08.2026) */
.img-band { position: relative; display: grid; place-items: center; background: oklch(0.24 0.05 256); padding: clamp(56px, 8vw, 96px) 0; }
.img-band-inner { max-width: var(--maxw); width: 100%; padding: 0 28px; color: #fff; text-align: center; }
.img-band-inner p { margin-left: auto; margin-right: auto; }
.img-band-inner h2 { margin-left: auto; margin-right: auto; }
.img-band-inner .eyebrow { color: oklch(0.82 0.06 230); }
.img-band-inner h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.875rem); letter-spacing: -0.03em; max-width: 20ch; margin-top: 14px; }
.img-band-inner p { color: oklch(0.9 0.01 240); font-size: 1.0625rem; margin-top: 16px; max-width: 48ch; line-height: 1.6; }
.img-band-stats { display: flex; gap: 40px 56px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.img-band-stats div { display: flex; flex-direction: column; }
.img-band-stats strong { font-size: 2.125rem; font-weight: 600; letter-spacing: -0.03em; }
.img-band-stats span { font-size: 0.8438rem; color: oklch(0.82 0.02 240); }

/* Foto-Karte (Subpages) */
.photo-card { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/11; }
.page-hero-photo { aspect-ratio: 21/9; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 36px; position: relative; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-photo.video-frame { position: relative; background: var(--bg-2); }
.page-hero-photo .phv-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-photo .phv-fallback { position: absolute; inset: 0; display: none; }
.page-hero-photo .phv-fallback img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-photo.video-failed .phv-video { display: none; }
.page-hero-photo.video-failed .phv-fallback { display: block; }

@media (max-width: 720px) { .img-band { min-height: 360px; } }

/* ---------- Themen-Buttons ---------- */
.topic-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-chip { font-family: inherit; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 11px 18px; cursor: pointer; transition: transform .14s cubic-bezier(0.23, 1, 0.32, 1), background .2s var(--ease-soft), border-color .2s var(--ease-soft), color .2s var(--ease-soft); }
.topic-chip:hover { border-color: var(--ink-4); color: var(--ink); transform: translateY(-1px); }
.topic-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px var(--accent-ring); }
.field.invalid .topic-chips { outline: 2px solid var(--danger-soft); outline-offset: 6px; border-radius: var(--r-md); }

/* ---------- Hero-Video-Fallback (Büro) ---------- */
.hero-video-fallback { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; }
.hero-video-frame.video-failed .hero-video-fallback { display: flex; }
.hero-video-frame.video-failed .hero-video { display: none; }

.hvf-cap { font-size: 0.8438rem; color: oklch(0.9 0.02 256); letter-spacing: 0.02em; }

/* ============================================================
   Hero — Fullscreen-Video (Startseite)
   ============================================================ */
.hero-cinematic {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 90px;
  overflow: hidden;
  isolation: isolate;
  /* Fallback-Hintergrund, falls das Video (noch) nicht lädt — kein Bild, Marken-Navy */
  background: linear-gradient(150deg, var(--accent-deep) 0%, oklch(0.17 0.045 256) 100%);
}
.hero-cinematic .aurora { display: none; }

.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(150deg, var(--accent-deep) 0%, oklch(0.16 0.045 256) 100%); }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg.video-failed .hero-bg-video { display: none; }
.hero-bg-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, oklch(0.15 0.04 256 / 0.86) 0%, oklch(0.15 0.04 256 / 0.55) 44%, oklch(0.15 0.04 256 / 0.18) 100%),
    linear-gradient(0deg, oklch(0.13 0.04 256 / 0.62) 0%, transparent 44%);
}

.hero-inner { position: relative; z-index: 2; }
.hero-cinematic .hero-copy { max-width: 660px; }
.hero-cinematic .hero-pill {
  margin-bottom: 26px;
  background: oklch(1 0 0 / 0.14); color: #fff;
  border: 1px solid oklch(1 0 0 / 0.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Statuspunkt im Kontorblau-Hell statt Gruen (kein Gruen auf der Website) */
.hero-cinematic .hero-pill .dot { background: oklch(0.82 0.09 256); }
/* ACHTUNG: Der Textschatten darf hier NICHT auf dem <h1> liegen.
   Die Headline wird per JS in Zeilenmasken mit overflow:hidden
   zerlegt; eine große Weichzeichnung (40px) über diese
   Maskengrenze hinweg führt dazu, dass die Schrift gar nicht
   mehr gezeichnet wird – die Überschrift war unsichtbar.
   Der Schatten sitzt deshalb auf der inneren Zeile und ist
   deutlich enger gefasst. */
.hero-cinematic .hero-title { color: #fff; }
.hero-cinematic .hero-title.reveal-lines .rl > span,
.hero-cinematic .hero-title:not(.reveal-lines) { text-shadow: 0 1px 14px oklch(0.1 0.03 256 / 0.55); }
.hero-cinematic .grad-text { color: oklch(0.93 0.03 235); }
.hero-cinematic .hero-lede { color: oklch(1 0 0 / 0.84); max-width: 48ch; }
.hero-cinematic .crumb { color: oklch(1 0 0 / 0.62); margin-bottom: 20px; }
.hero-cinematic .crumb a { color: oklch(1 0 0 / 0.88); }
.hero-cinematic .crumb a:hover { color: #fff; }
.hero-cinematic .crumb svg { color: oklch(1 0 0 / 0.5); }

/* CTAs auf dunklem Video: heller Primär-Button, Glas-Sekundär */
.hero-cinematic .hero-cta .btn-accent { background: #fff; color: var(--accent-deep); box-shadow: 0 12px 34px -12px oklch(0.08 0.03 256 / 0.7); }
.hero-cinematic .hero-cta .btn-accent:hover { background: oklch(0.97 0.008 256); color: var(--accent-deep); }
.hero-cinematic .hero-cta .btn-ghost { color: #fff; border-color: oklch(1 0 0 / 0.5); background: oklch(1 0 0 / 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-cinematic .hero-cta .btn-ghost:hover { background: oklch(1 0 0 / 0.18); border-color: #fff; }

/* Scroll-Indikator */
.hero-scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid oklch(1 0 0 / 0.5); border-radius: 14px; display: grid; justify-items: center; align-content: start; padding-top: 7px; }
.hero-scroll span { width: 4px; height: 8px; border-radius: 2px; background: oklch(1 0 0 / 0.85); }
@media (prefers-reduced-motion: no-preference) { .hero-scroll span { animation: scrolldot 1.8s ease-in-out infinite; } }
@keyframes scrolldot { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(11px); opacity: 0.25; } }

/* Mobile-Optimierung Hero */
@media (max-width: 820px) {
  .hero-cinematic { min-height: 90svh; padding: 104px 0 60px; }
  .hero-cinematic .hero-bg-overlay {
    background: linear-gradient(0deg, oklch(0.12 0.04 256 / 0.84) 0%, oklch(0.15 0.04 256 / 0.5) 52%, oklch(0.15 0.04 256 / 0.34) 100%);
  }
  .hero-cinematic .hero-lede { max-width: none; }
  .hero-scroll { display: none; }
}
@media (max-width: 420px) {
  .hero-cinematic { padding-top: 96px; }
}

/* ============================================================
   Mobile-Optimierung — Feinschliff & Overflow-Schutz
   ============================================================ */
html, body { overflow-x: clip; }   /* Sicherheitsnetz gegen horizontales Scrollen */

@media (max-width: 600px) {
  /* Lange Buttons dürfen umbrechen, statt den Viewport zu sprengen */
  .btn { white-space: normal; max-width: 100%; }
  .center .btn, .cta-actions .btn, .cta-band .btn { width: 100%; }
  /* Hero-CTAs sauber gestapelt + volle Trefferfläche */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  /* Glas-Navigation kompakter; Wortmarke darf schrumpfen */
  .ios-nav { padding: 14px 12px; }
  .ios-nav-inner { gap: 12px; padding: 0 10px 0 14px; min-width: 0; }
  .brand { min-width: 0; gap: 9px; }
  .brand-logo { height: 30px; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 0.9062rem; }
}
@media (max-width: 380px) {
  .brand-sub { display: none; }   /* sehr schmale Geräte: Zusatz ausblenden */
}

/* ============================================================
   Terminbuchung (telefonisches Erstgespräch)
   ============================================================ */
.book-wrap { max-width: 920px; margin: 0 auto; }
.book-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.book-step { display: flex; align-items: center; gap: 10px; font-size: 0.8438rem; font-weight: 600; color: var(--ink-3); }
.book-step .bs-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-3); font-size: 0.8125rem; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.book-step.active .bs-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.book-step.done .bs-n { background: var(--success); border-color: var(--success); color: #fff; }
.book-step.active { color: var(--ink); }
.book-sep { flex: 1; min-width: 18px; height: 1.5px; background: var(--line); }
.book-panel { display: none; }
.book-panel.active { display: block; animation: pIn .4s var(--ease) both; }
@keyframes pIn { from { opacity: 0; transform: translateY(8px); } }

.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.day-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 16px; cursor: pointer; text-align: center; transition: transform .14s cubic-bezier(0.23, 1, 0.32, 1), border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.day-card:hover { border-color: var(--accent-ring); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.day-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-ring); }
.day-card .dc-dow { font-size: 0.75rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.day-card .dc-day { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.day-card .dc-mon { font-size: 0.7812rem; color: var(--ink-3); }
.day-card.full { opacity: 0.45; pointer-events: none; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.slot { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 13px; text-align: center; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.9062rem; font-weight: 500; cursor: pointer; transition: transform .14s cubic-bezier(0.23, 1, 0.32, 1), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.slot:hover { border-color: var(--accent-ring); transform: translateY(-2px); }
.slot.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.slot.taken { opacity: 0.4; pointer-events: none; text-decoration: line-through; }

.book-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--accent-soft); border-radius: var(--r-lg); margin-bottom: 22px; }
.book-summary svg { width: 22px; height: 22px; color: var(--accent-deep); flex: none; }
.book-summary strong { font-size: 0.9375rem; font-weight: 600; color: var(--accent-deep); }
.book-summary span { font-size: 0.8125rem; color: var(--ink-2); display: block; }
.book-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }

.book-success { text-align: center; padding: 40px 20px; }
.book-success .bs-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 22px; animation: pop .5s var(--ease) both; }
.book-success .bs-ic svg { width: 38px; height: 38px; }
.book-success h2 { font-size: 1.625rem; letter-spacing: -0.02em; }
.book-success p { color: var(--ink-2); margin-top: 12px; max-width: 44ch; margin-inline: auto; }
.book-success .bs-card { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 18px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.book-success .bs-card svg { width: 24px; height: 24px; color: var(--accent-deep); }
.book-success .bs-card strong { font-size: 1rem; display: block; }
.book-success .bs-card span { font-size: 0.8125rem; color: var(--ink-3); }
/* Cookie-Hinweis: nicht genutzte Kategorien sichtbar als inaktiv kennzeichnen */
.ck-tog .ck-dot.off { background: var(--line-strong, #d5dae2); box-shadow: none; }
.ck-tog .ck-dot.off + small, .ck-tog small { opacity: .75; }

/* ============================================================
   Lohnsteuerhilfe (öffentliche Seite)
   ------------------------------------------------------------
   Farbführung bewusst mit den Hausfarben: Navy (--accent /
   --accent-deep) als Träger, Sandton als Fläche. Heller Text
   steht ausschließlich auf gesättigtem Navy – nie auf hellem
   Grund. Sekundärtexte nutzen --ink-2 statt --ink-3, damit sie
   auch auf getönten Flächen gut lesbar bleiben.
   ============================================================ */

/* ---- Kopfbereich mit Video ----
   Nutzt das Cinematic-Muster der übrigen Seiten. Der Text steht auf
   einem kräftig abgedunkelten Video – deshalb ist heller Text hier
   bewusst und gut lesbar. Die Verdunkelung ist links stärker, damit
   die Textspalte auch bei hellen Videobildern trägt. */
.lh-hero .hero-bg-overlay {
  background:
    linear-gradient(90deg, oklch(0.20 0.045 256 / 0.94) 0%, oklch(0.20 0.045 256 / 0.80) 46%, oklch(0.20 0.045 256 / 0.42) 100%),
    linear-gradient(0deg, oklch(0.16 0.04 256 / 0.72) 0%, transparent 52%);
}
.crumb-light { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem;
  color: #fff; opacity: .82; margin-bottom: 16px; }
.crumb-light a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.crumb-light svg { width: 14px; height: 14px; opacity: .7; }
.lh-hero .hero-meta strong { color: #fff; }
.lh-hero .hero-meta span { color: #fff; opacity: .78; }

/* ---- Zwei Kästen: was geht, was nicht ---- */
.lh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .lh-two { grid-template-columns: 1fr; } }
.lh-box { border-radius: var(--r-lg, 16px); padding: 28px 30px; }
/* Zulässig: Navy-Rahmen mit heller Tönung */
.lh-box.ok {
  background: var(--surface, #fff);
  border: 1.5px solid var(--accent);
  box-shadow: 0 10px 28px -18px oklch(0.40 0.085 256 / .45);
}
/* Nicht zulässig: neutrale Fläche, aber klar lesbar */
.lh-box.no { background: var(--bg-2); border: 1.5px solid var(--line); }
.lh-box h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1875rem; margin: 0 0 20px; color: var(--ink); }
.lh-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; position: relative; }
.lh-ic.ok { background: var(--accent-deep); }
.lh-ic.ok::after {
  content: ''; width: 13px; height: 7px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
.lh-ic.no { background: var(--ink-2); }
.lh-ic.no::after { content: ''; width: 13px; height: 13px;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%); }

.lh-box .check-list li { color: var(--ink); font-size: 0.9688rem; }
.lh-box .check-list svg { color: var(--accent-deep); }
.x-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.x-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9688rem; line-height: 1.55; color: var(--ink); }
.x-mark { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--ink-2); color: #fff;
  display: grid; place-items: center; font-size: 0.875rem; font-weight: 600; line-height: 1; margin-top: 1px; }
.lh-note { font-size: 0.875rem; line-height: 1.65; color: var(--ink-2); margin: 20px 0 0;
  padding-top: 18px; border-top: 1px solid var(--line); }
.lh-note a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lh-note strong { color: var(--ink); }

/* ---- Leistungskarten mit Navy-Kacheln ---- */
.lh-serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .lh-serv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .lh-serv { grid-template-columns: 1fr; } }
.lh-serv .psec-card { border-color: var(--line); }
.lh-serv .psec-ic { background: var(--accent-deep); color: #fff; border-radius: 12px; }
.lh-serv .psec-ic svg { width: 21px; height: 21px; }
.lh-serv h3 { color: var(--ink); }
.lh-serv p { color: var(--ink-2); }

/* ---- Beitragstabelle mit Navy-Kopf ---- */
.lh-fee-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .lh-fee-wrap { grid-template-columns: 1fr; } }
.lh-fee { width: 100%; border-collapse: collapse; background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: hidden;
  box-shadow: 0 14px 34px -24px oklch(0.255 0.008 165 / .35); }
.lh-fee caption { caption-side: top; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep); padding-bottom: 12px; }
/* Navy-Kopfzeile: weißer Text auf gesättigtem Navy – hoher Kontrast */
.lh-fee thead th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: #fff;
  background: var(--accent-deep); padding: 15px 22px; }
.lh-fee thead th:last-child { text-align: right; }
.lh-fee td { padding: 14px 22px; font-size: 0.9688rem; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.lh-fee td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-deep); }
.lh-fee tbody tr:nth-child(even) { background: var(--bg-2); }
.lh-fee tbody tr:last-child td { border-bottom: none; }
.lh-fee tbody tr:hover { background: var(--accent-tint); }

.lh-fee-side { display: flex; flex-direction: column; gap: 18px; }
/* Aufnahmegebühr-Karte: Navy-Fläche, weißer Text */
.lh-fee-card { background: var(--accent-deep); border-radius: var(--r-lg, 16px); padding: 24px 26px; color: #fff; }
.lh-fee-card span { display: block; font-size: 0.8125rem; color: #fff; opacity: .82; }
.lh-fee-card strong { display: block; font-size: 2rem; letter-spacing: -0.02em; margin: 5px 0 7px; color: #fff; }
.lh-fee-card small { font-size: 0.7812rem; color: #fff; opacity: .78; line-height: 1.5; display: block; }
.lh-fee-list { gap: 11px !important; }
.lh-fee-list li { color: var(--ink) !important; font-size: 0.9375rem; }
.lh-fee-list svg { color: var(--accent-deep); }

/* ---- Ablaufschritte mit Navy-Nummern ---- */
.lh-steps .step-num { background: var(--accent-deep); color: #fff; }
.lh-steps .step h3 { color: var(--ink); }
.lh-steps .step p { color: var(--ink-2); }

/* ---- Kontaktkarte der Beratungsstelle ---- */
.lh-card { width: 100%; max-width: 410px; background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); overflow: hidden;
  box-shadow: 0 20px 50px -28px oklch(0.255 0.008 165 / .45); }
/* Navy-Kopf: weißer Text auf dunklem Grund */
.lh-card-h { background: var(--accent-deep); color: #fff; padding: 24px 26px; }
.lh-card-h strong { display: block; font-size: 1.0625rem; color: #fff; }
.lh-card-h span { display: block; font-size: 0.8438rem; color: #fff; opacity: .84; margin-top: 4px; }
.lh-card-b { padding: 8px 26px; }
.lh-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lh-row:last-child { border-bottom: none; }
.lh-row > span { flex: none; font-size: 0.7812rem; font-weight: 500; color: var(--ink-2); padding-top: 2px; }
.lh-row > strong { text-align: right; font-size: 0.9062rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lh-row a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lh-card-f { font-size: 0.7812rem; line-height: 1.6; color: var(--ink-2); margin: 0;
  padding: 16px 26px; background: var(--accent-tint); border-top: 1px solid var(--accent-soft); }

/* ---- Vertrauensband in Navy ---- */
.lh-band { background: var(--accent-deep); border-radius: var(--r-2xl, 22px); padding: 40px 44px; color: #fff; }
.lh-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 860px) { .lh-band-grid { grid-template-columns: repeat(2, 1fr); } .lh-band { padding: 32px 28px; } }
@media (max-width: 520px) { .lh-band-grid { grid-template-columns: 1fr; } }
.lh-band-i strong { display: block; font-size: 1.875rem; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.lh-band-i span { display: block; font-size: 0.875rem; color: #fff; opacity: .84; margin-top: 7px; line-height: 1.5; }

/* ---- Unterlagenliste ---- */
.lh-docs .check-list li { color: var(--ink); font-size: 0.9688rem; }
.lh-docs .check-list svg { color: var(--accent-deep); }

/* ============================================================
   Ausführliche Preisliste (Preisrechner-Seite)
   ============================================================ */
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-card { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: 26px 28px; display: flex; flex-direction: column; }
.pl-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-2); }
/* Die Kachel ist ein <span> in .pl-head. Die Regel „.pl-head span"
   weiter unten ist spezifischer und setzte sie auf display:block –
   dadurch wirkte place-items nicht und das Symbol klebte oben links.
   Deshalb hier dieselbe Spezifität. */
.pl-head .pl-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft, #eef1fb); color: var(--accent-deep); margin-top: 0; }
.pl-head .pl-ic svg { width: 21px; height: 21px; }
.pl-head h3 { font-size: 1.125rem; margin: 0; line-height: 1.3; }
.pl-head > div > span { display: block; font-size: 0.8125rem; color: var(--ink-3); margin-top: 3px; }
.pl-tbl { width: 100%; border-collapse: collapse; }
.pl-tbl td { padding: 13px 0; font-size: 0.9375rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.pl-tbl tr:last-child td { border-bottom: none; }
.pl-tbl td:first-child { color: var(--ink-2); padding-right: 16px; }
.pl-tbl td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }
.pl-free { color: var(--success, #1a8f5a) !important; }
.pl-note { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-3); margin: 16px 0 0;
  padding-top: 16px; border-top: 1px solid var(--line-2); }
.pl-note strong { color: var(--ink-2); }

.pl-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
@media (max-width: 860px) { .pl-info { grid-template-columns: 1fr; } }
.pl-info-i { display: flex; align-items: flex-start; gap: 13px; }
.pl-info-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-2, #f8f9fb); color: var(--accent-deep); }
.pl-info-ic svg { width: 18px; height: 18px; }
.pl-info-i strong { display: block; font-size: 0.9688rem; }
.pl-info-i p { font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); margin: 5px 0 0; }
.pl-stand { font-size: 0.7812rem; line-height: 1.6; color: var(--ink-3); text-align: center;
  max-width: 720px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--line-2); }
/* Auszeichnung im Seitenkopf unter der Brotkrume, nicht daneben */
.page-hero-inner .crumb + .eyebrow { display: block; margin-top: 14px; }
.page-hero-inner .eyebrow + h1 { margin-top: 10px; }
.page-hero-inner .lede + .hero-actions { margin-top: 26px; }
.page-hero-inner .hero-fine { font-size: 0.8125rem; color: var(--ink-3); margin-top: 16px; }
/* Brotkrume im Video-Hero auf eigener Zeile */
.crumb-block { display: flex !important; width: 100%; }

/* ============================================================
   Fix: Zeilenmaske der Headline-Animation schnitt Buchstaben ab
   ------------------------------------------------------------
   .reveal-lines .rl hat overflow:hidden. Bei der engen
   Zeilenhöhe (1.02) ragen Ober- und Unterlängen aus der
   Zeilenbox und wurden dadurch weggeschnitten – in ungünstigen
   Fällen war die ganze Zeile unsichtbar. Innenabstand schafft
   Luft, der negative Außenabstand hält die Gesamthöhe konstant.
   ============================================================ */
/* (Innenabstand entfällt – es wird nicht mehr beschnitten.) */
/* Lohnsteuerhilfe-Hero: dreizeilige Headline. Jede Zeile steht in
   ihrer eigenen Maske (feste <br>), damit innerhalb einer Maske
   kein Umbruch entsteht – ein Umbruch in der Maske führte dazu,
   dass die Zeile nicht gezeichnet wurde. */
.lh-hero .hero-title { line-height: 1.06; font-size: clamp(2.25rem, 5.4vw, 4.25rem); }
.lh-hero .hero-lede { max-width: 56ch; }

/* ============================================================
   MOBILOPTIMIERUNG
   ------------------------------------------------------------
   Geprüft bei 375 px. Behandelt: Tippflächen unter 44 px,
   Schriftgrößen unter 12 px, Tabellen die breiter als das
   Fenster werden, und Freiraum für die schwebenden Schaltflächen.
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Tippflächen: mindestens 44 px hoch ---- */
  .mobile-menu a,
  .legal-toc a,
  .foot-legal a { display: block; min-height: 44px; line-height: 44px; }
  /* Fußbereich eigens: 44 px Tipphöhe, aber die Zeilenhöhe bleibt normal –
     sonst reißt eine umbrechende Bezeichnung wie „Ablauf & Zusammenarbeit"
     zwei 44-px-Zeilen auf. */
  .footer-col a {
    display: flex; align-items: center; min-height: 44px;
    line-height: 1.35; padding: 6px 2px;
  }
  .brand { min-height: 44px; }
  .faq-q { min-height: 56px; }
  .chip, .pt-mode, .eb-mode { min-height: 40px; display: inline-flex; align-items: center; }

  /* ---- Schrift nie unter 12 px ---- */
  .brand-sub, .hero-fine, .pl-stand, .lh-card-f, .imp-fine,
  .cookie-text p, .intg-fine, .foot-fine { font-size: 0.7812rem; }

  /* ---- Preistabellen: Bezeichnung über den Betrag ---- */
  .pl-tbl td { display: block; width: 100%; }
  .pl-tbl td:first-child { padding: 12px 0 2px; border-bottom: none; color: var(--ink); font-weight: 500; }
  .pl-tbl td:last-child { padding: 0 0 12px; text-align: left; font-size: 1.0625rem;
    color: var(--accent-deep); border-bottom: 1px solid var(--line-2); }
  .pl-tbl tr:last-child td:last-child { border-bottom: none; }
  .pl-card { padding: 22px 20px; }
  .pl-head { gap: 12px; }
  .pl-head h3 { font-size: 1.0625rem; }

  /* ---- Beitragstabelle Lohnsteuerhilfe: kompakter ---- */
  .lh-fee thead th { padding: 12px 14px; font-size: 0.7812rem; }
  .lh-fee td { padding: 12px 14px; font-size: 0.9375rem; }
  .lh-box { padding: 22px 20px; }
  .lh-fee-card { padding: 20px 22px; }
  .lh-fee-card strong { font-size: 1.75rem; }
  .lh-band { padding: 26px 22px; }
  .lh-band-i strong { font-size: 1.625rem; }
  .lh-card-b { padding: 6px 20px; }
  .lh-card-h { padding: 20px 22px; }
  /* Kontaktzeilen untereinander statt nebeneinander */
  .lh-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .lh-row > strong { text-align: left; }

  /* ---- Breite Tabellen dürfen waagerecht rollen ---- */
  .tbl-wrap, .lh-fee-wrap > table { -webkit-overflow-scrolling: touch; }

  /* ---- Freiraum unten, damit „Anrufen" nichts verdeckt ---- */
  body { padding-bottom: 84px; }
  .site-footer { padding-bottom: 24px; }

  /* ---- Abstände etwas straffer ---- */
  .section { padding-block: clamp(38px, 9vw, 56px); }
  .section-head { margin-bottom: 26px; }
}

/* Sehr schmale Geräte (z. B. iPhone SE) */
@media (max-width: 380px) {
  .lh-fee thead th, .lh-fee td { padding: 11px 12px; }
  .lh-fee td { font-size: 0.9062rem; }
  .lh-band-i strong { font-size: 1.5rem; }
  .pl-tbl td:last-child { font-size: 1rem; }
}
@media (max-width: 640px) {
  /* Kontaktdaten der Beratungsstelle sind Hauptaktionen → große Tippfläche */
  .lh-row a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Restliche Kleinschrift im Seitenkopf anheben */
  .hero-fine, .hero-pill { font-size: 0.7812rem; }
  .hero-pill { min-height: 38px; }
}
@media (max-width: 640px) {
  /* Video-Hero am Handy straffen, damit die Hauptschaltfläche
     ohne Scrollen sichtbar bleibt (vorher lag sie darunter). */
  .lh-hero .hero-lede { font-size: 1rem; line-height: 1.55; max-width: 42ch; }
  .lh-hero .hero-copy { padding-block: 8px; }
  .lh-hero .hero-cta { margin-top: 20px; gap: 10px; }
  .lh-hero .hero-title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .lh-hero.hero-cinematic { min-height: auto; }
  .lh-hero .hero-inner { padding-block: 74px 34px; }
}

/* ============================================================
   Lohnsteuerhilfe – Mitgliedschaft & Verein
   ============================================================ */
/* Bewusst mobile-first und ohne auto-fit: Grundzustand ist eine Spalte,
   Mehrspaltigkeit kommt erst per min-width dazu. Damit ist der sichere
   Fall der Standard – ein nicht greifender Breakpoint kann keine
   Überbreite mehr erzeugen. minmax(0, 1fr) verhindert zusätzlich, dass
   langer Inhalt die Spalte aufbläht. */
.ver-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 720px)  { .ver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1120px) { .ver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ver-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px 26px 24px; display: flex; flex-direction: column; }
.ver-ic { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; flex: none; margin-bottom: 16px; }
.ver-ic svg { width: 21px; height: 21px; }
.ver-card h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.ver-card p { font-size: 0.925rem; line-height: 1.68; color: var(--ink-2); margin-top: 11px; }
.ver-card p strong { color: var(--ink); font-weight: 600; }
/* Abgesetzte Hinweiszeilen innerhalb einer Karte */
.ver-note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 0.8438rem !important; color: var(--ink-3) !important; }
/* Kein Flex-Container: der Absatz enthält losen Text und <strong>, die
   sonst jeweils zu einer eigenen Spalte würden. Das Symbol steht
   deshalb absolut, der Text bekommt links Platz dafür. */
.ver-warn { position: relative; margin-top: 14px !important; padding: 12px 14px 12px 39px; border-radius: var(--r-md); background: var(--warn-soft, #fdf1dc); color: var(--warn, #a26a12) !important; font-size: 0.8625rem !important; line-height: 1.6; }
.ver-warn > svg { position: absolute; left: 14px; top: 15px; width: 17px; height: 17px; }
.ver-warn strong { color: inherit !important; }
@media (max-width: 640px) {
  .ver-card { padding: 22px 20px; }
  .ver-card h3 { font-size: 1rem; }
  .ver-card p { font-size: 0.8875rem; }
}

/* ============================================================
   Kontaktformular in Schritten
   Grundzustand ohne JavaScript: alle Abschnitte untereinander
   sichtbar. Erst .kf-stepped blendet auf einen Schritt um.
   ============================================================ */
.kf-h { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.kf-sub { font-size: 0.9062rem; color: var(--ink-3); line-height: 1.6; margin: 6px 0 22px; }
.kf-panel + .kf-panel { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.kf-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.kf-spacer { flex: 1; }
/* Vor- und Zurück-Knöpfe ergeben ohne JavaScript keinen Sinn */
.kf-nav[data-navfor="1"], .kf-nav[data-navfor="2"] { display: none; }
.kf-stepped .kf-nav[data-navfor="1"], .kf-stepped .kf-nav[data-navfor="2"] { display: flex; }
.kf-stepped .kf-panel { display: none; }
.kf-stepped .kf-panel.active { display: block; animation: pIn .4s var(--ease) both; }
.kf-stepped .kf-panel + .kf-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.kf-stepped .book-step { cursor: default; }
.kf-stepped .book-step.done { cursor: pointer; }
.form-alt { margin-top: 20px; text-align: center; font-size: 0.8438rem; color: var(--ink-3); }

/* Zusammenfassung im letzten Schritt */
.kf-recap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2, #f8f9fb); padding: 6px 16px; margin-bottom: 22px; }
.kf-recap-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 0.875rem; }
.kf-recap-row:last-child { border-bottom: 0; }
.kf-recap-row > span { color: var(--ink-3); flex: none; min-width: 74px; font-size: 0.8125rem; }
.kf-recap-row > strong { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kf-recap-edit { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 0.8125rem; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.kf-recap-edit:hover { color: var(--accent); }

@media (max-width: 640px) {
  /* Die Chips sind in Schritt 1 das Hauptbedienelement – volle Antippgröße */
  .topic-chip { min-height: 44px; padding: 12px 18px; }
  .kf-sub { font-size: 0.8625rem; margin-bottom: 18px; }
  .kf-nav { flex-wrap: wrap; }
  .kf-nav .btn { min-height: 44px; }
  .kf-nav [data-kfnext], .kf-nav [type="submit"] { flex: 1; }
  .kf-recap-row { flex-wrap: wrap; gap: 4px 10px; }
  .kf-recap-row > span { min-width: 100%; }
}

/* ============================================================
   Blog – Übersicht und Beitrag
   ============================================================ */
.bl-wrap-list { max-width: 940px; margin: 0 auto; }

/* Themen-Schild */
.bl-tag {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 11px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
  font-size: 0.7188rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-tag-neu { background: var(--accent-deep); color: #fff; }

.bl-meta { display: block; font-size: 0.7812rem; color: var(--ink-3); font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Aufmacher: der neueste Beitrag */
.bl-feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  transition: box-shadow .25s var(--ease-soft), transform .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.bl-feature::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}
.bl-feature:hover { border-color: var(--accent-ring); }
.bl-feature-link { display: block; color: inherit; text-decoration: none; }
.bl-feature-body { padding: clamp(26px, 4vw, 44px); }
.bl-feature h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.2; margin-top: 16px;
}
.bl-feature p { font-size: 1.0312rem; color: var(--ink-2); line-height: 1.7; margin-top: 14px; max-width: 62ch; }
.bl-feature .bl-meta { margin-top: 18px; }
.bl-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 0.9062rem; font-weight: 600; color: var(--accent-deep);
}
.bl-more svg { width: 15px; height: 15px; transition: transform .25s var(--ease-soft); }
.bl-feature:hover .bl-more svg { transform: translateX(4px); }

/* Trennzeile „Alle Beiträge“ */
.bl-bar { display: flex; align-items: center; gap: 16px; margin: clamp(38px, 5vw, 58px) 0 20px; }
.bl-bar-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.bl-bar-line { flex: 1; height: 1px; background: var(--line); }
.bl-bar-num { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.7812rem; color: var(--ink-3); white-space: nowrap; }

/* Kartenraster */
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  transition: border-color .2s var(--ease-soft), transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.bl-card:hover { border-color: var(--accent-ring); }
.bl-card-link { display: flex; flex-direction: column; height: 100%; padding: 24px 26px; color: inherit; text-decoration: none; }
.bl-card h2 { font-size: 1.2188rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 13px; line-height: 1.32; }
.bl-card p { font-size: 0.925rem; color: var(--ink-2); line-height: 1.65; margin-top: 10px; }
.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px;
}
.bl-arrow { display: inline-flex; color: var(--accent-deep); }
.bl-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease-soft); }
.bl-card:hover .bl-arrow svg { transform: translateX(4px); }

/* RSS-Hinweis */
.bl-abo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 42px); padding: 22px 26px;
  border: 1px dashed var(--line); border-radius: var(--r-xl); background: var(--surface-2, #fff);
}
.bl-abo > div { flex: 1; min-width: 240px; }
.bl-abo strong { font-size: 1rem; font-weight: 600; }
.bl-abo p { font-size: 0.9062rem; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }

/* ---------- Beitrag ---------- */
.bl-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.bl-progress span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
}

.bl-hero .page-hero-inner { max-width: 820px; }
.bl-hero .bl-tag { margin-top: 20px; }
.bl-hero h1 { margin-top: 14px; }
.bl-byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; }
.bl-byline img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.bl-byline strong { display: block; font-size: 0.9062rem; font-weight: 600; }
.bl-byline .bl-meta { margin-top: 2px; }

.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1060px; margin: 0 auto; }
.bl-article { max-width: 720px; min-width: 0; }
.bl-article h2 { font-size: 1.5625rem; font-weight: 500; letter-spacing: -0.025em; margin-top: 42px; line-height: 1.25; scroll-margin-top: 100px; }
.bl-article h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.015em; margin-top: 30px; }
.bl-article h2:first-child, .bl-article h3:first-child { margin-top: 0; }
.bl-article p { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); margin-top: 17px; }
.bl-article > p:first-of-type { font-size: 1.1562rem; line-height: 1.7; color: var(--ink); }
.bl-article strong { color: var(--ink); font-weight: 600; }
.bl-article a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-article a:hover { color: var(--accent); }
.bl-article ul, .bl-article ol { margin-top: 17px; padding-left: 0; display: flex; flex-direction: column; gap: 10px; list-style: none; counter-reset: bl; }
.bl-article li { position: relative; padding-left: 26px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.bl-article ul li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bl-article ol li { counter-increment: bl; }
.bl-article ol li::before { content: counter(bl) "."; position: absolute; left: 0; top: 0; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 600; color: var(--accent-deep); }
.bl-article blockquote { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); background: none; border-radius: 0; }
.bl-article blockquote p { margin-top: 0; font-size: 1.0312rem; color: var(--ink); }
.bl-article code { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .92em; background: var(--bg-2, #f2f4f7); padding: 2px 6px; border-radius: 5px; }

/* Begleitspalte */
.bl-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bl-toc { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 20px 22px; }
.bl-toc-title { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.bl-toc ol { list-style: none; margin-top: 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.bl-toc li { counter-increment: toc; }
.bl-toc a {
  display: block; padding: 7px 0 7px 14px; font-size: 0.875rem; line-height: 1.45;
  color: var(--ink-2); text-decoration: none; border-left: 2px solid var(--line);
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.bl-toc a:hover { color: var(--accent-deep); border-color: var(--accent-ring); }
.bl-toc a.is-active { color: var(--accent-deep); font-weight: 600; border-color: var(--accent-deep); }

.bl-side-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: 22px; text-align: center;
}
.bl-side-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.bl-side-card strong { display: block; font-size: 0.9688rem; font-weight: 600; margin-top: 12px; }
.bl-side-card span { display: block; font-size: 0.8438rem; color: var(--ink-3); line-height: 1.55; margin-top: 6px; }
.bl-side-card .btn { margin-top: 16px; }

.bl-cta {
  max-width: 1060px; margin: clamp(38px, 5vw, 56px) auto 0; padding: 24px 28px;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.bl-cta strong { font-size: 1.0625rem; font-weight: 600; }
.bl-cta p { font-size: 0.9062rem; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.bl-cta > div { flex: 1; min-width: 240px; }

.bl-weiter { max-width: 1060px; margin: clamp(40px, 5vw, 60px) auto 0; }
.bl-weiter .bl-bar-title { display: block; margin-bottom: 18px; }
.bl-back { max-width: 1060px; margin: 30px auto 0; font-size: 0.9062rem; }
.bl-back a { color: var(--ink-3); }
.bl-back a:hover { color: var(--accent-deep); }

@media (min-width: 720px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1000px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr) 268px; gap: 56px; align-items: start; }
  .bl-side { position: sticky; top: 104px; }
}
/* Schmale Ansicht: das Inhaltsverzeichnis gehört vor den Text, die
   Autorenkarte dahinter. Deshalb löst sich die Begleitspalte hier auf. */
@media (max-width: 999px) {
  .bl-layout { gap: 26px; }
  .bl-side { display: contents; }
  .bl-toc { order: -1; padding: 16px 18px; }
  .bl-toc a { padding: 6px 0 6px 12px; font-size: 0.8438rem; }
  .bl-article { order: 0; }
  .bl-side-card { order: 1; }
}
@media (max-width: 640px) {
  .bl-card-link { padding: 22px 20px; }
  .bl-card h2 { font-size: 1.1562rem; }
  .bl-article p, .bl-article li { font-size: 1rem; }
  .bl-article > p:first-of-type { font-size: 1.0625rem; }
  .bl-article h2 { font-size: 1.375rem; margin-top: 34px; }
  .bl-cta, .bl-abo { padding: 20px; }
  .bl-cta .btn, .bl-abo .btn { width: 100%; min-height: 44px; }
}

/* ============================================================
   Zusammenarbeit
   ============================================================ */
.za-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.za-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.8438rem; color: var(--ink-2); box-shadow: var(--shadow-xs);
}
.za-chip svg { width: 15px; height: 15px; color: var(--accent-deep); }

/* Der Weg – ein Strang mit vier Stationen */
.za-weg { list-style: none; max-width: 860px; margin: 0 auto; padding: 0; position: relative; }
.za-schritt { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding-bottom: 20px; }
.za-schritt:last-child { padding-bottom: 0; }
/* Verbindungslinie zwischen den Nummern */
.za-schritt::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 0;
  width: 2px; background: var(--line);
}
.za-schritt:last-child::before { display: none; }
.za-num {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 0.875rem; font-weight: 600; position: relative; z-index: 1;
}
.za-body {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 24px 26px; box-shadow: var(--shadow-xs); min-width: 0;
}
.za-ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 14px;
}
.za-ic svg { width: 20px; height: 20px; }
.za-body h3 { font-size: 1.1562rem; font-weight: 500; letter-spacing: -0.02em; }
.za-body > p { font-size: 0.9375rem; color: var(--ink-2); margin-top: 9px; line-height: 1.65; }
.za-split {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.za-split > span { display: block; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; min-width: 0; }
.za-split small {
  display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}

.za-note {
  max-width: 720px; margin: 28px auto 0; text-align: center;
  font-size: 0.875rem; color: var(--ink-3); line-height: 1.65;
}

/* Wer macht was */
.za-rollen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
.za-rolle { border-radius: var(--r-2xl); }
.za-rolle h3 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 16px; }
.za-rolle .check-list { margin-top: 16px; }
.za-rolle-ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-deep); color: #fff;
}
.za-rolle-ic svg { width: 22px; height: 22px; }
.za-rolle-ic-alt { background: var(--accent-soft); color: var(--accent-deep); }

/* Wege der Zusammenarbeit */
.za-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.za-weg-karte {
  display: flex; flex-direction: column; padding: 26px 28px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  transition: border-color .2s var(--ease-soft), transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.za-weg-karte:hover { border-color: var(--accent-ring); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.za-weg-ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 16px;
}
.za-weg-ic svg { width: 22px; height: 22px; }
.za-weg-karte strong { font-size: 1.0938rem; font-weight: 600; letter-spacing: -0.02em; }
.za-weg-karte p { font-size: 0.9062rem; color: var(--ink-2); line-height: 1.6; margin-top: 9px; }
.za-weg-mehr {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px;
  font-size: 0.875rem; font-weight: 600; color: var(--accent-deep);
}
.za-weg-mehr svg { width: 15px; height: 15px; transition: transform .25s var(--ease-soft); }
.za-weg-karte:hover .za-weg-mehr svg { transform: translateX(4px); }

@media (min-width: 620px) {
  .za-split { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .za-rollen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .za-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .za-schritt { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .za-schritt::before { left: 17px; top: 40px; }
  .za-num { width: 36px; height: 36px; border-radius: 12px; font-size: 0.8125rem; }
  .za-body { padding: 20px; }
}

/* ============================================================
   Bewegung: Zeigerart und Druck-Rueckmeldung
   ============================================================ */

/* Auf Touch loest ein Tipp den Hover-Zustand aus - die Karte bliebe
   angehoben stehen, bis irgendwo anders hingetippt wird. Deshalb gilt
   Hover-Bewegung nur fuer einen feinen Zeiger. Farbe, Rahmen und
   Schatten bleiben ueberall, sie tragen die eigentliche Information.
   Dieselbe Liste greift bei reduzierter Bewegung. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-accent:hover, .btn-ghost:hover, .btn-soft:hover,
  .card-hover:hover, .sw-chip:hover, .call-btn:hover, .topic-chip:hover,
  .day-card:hover, .slot:hover, .bl-feature:hover, .bl-card:hover,
  .za-weg-karte:hover, .trust-row .trust-item:hover {
    transform: none;
  }
  .trust-row .trust-item:hover .trust-ic,
  .bl-feature:hover .bl-more svg,
  .bl-card:hover .bl-arrow svg,
  .za-weg-karte:hover .za-weg-mehr svg {
    transform: none;
  }
  .spotlight::before { display: none; }
}

/* Druck-Rueckmeldung auf allem, was angetippt wird. Auf dem Telefon
   ersetzt sie den Hover vollstaendig - ohne sie passiert beim Tippen
   auf eine Terminkachel sichtbar nichts. */
.topic-chip, .slot, .day-card, .faq-q,
.bl-card-link, .bl-feature-link, .za-weg-karte, .sw-chip {
  transition: transform .14s cubic-bezier(0.23, 1, 0.32, 1),
              border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft),
              background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.topic-chip:active, .slot:active, .day-card:active, .faq-q:active,
.bl-card-link:active, .bl-feature-link:active, .za-weg-karte:active,
.sw-chip:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .topic-chip:active, .slot:active, .day-card:active, .faq-q:active,
  .bl-card-link:active, .bl-feature-link:active, .za-weg-karte:active,
  .sw-chip:active { transform: none; }
}

/* Der Cookie-Hinweis geht denselben Weg hinaus, den er hereingekommen
   ist - Prozent statt Pixel, damit die Hoehe egal ist. */
.cookie-banner {
  transition: opacity .28s cubic-bezier(0.32, 0.72, 0, 1),
              transform .28s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Sichere Bereiche: auf Geraeten mit Home-Indikator lag der Anrufen-Knopf
   in dem Streifen, den das System fuer die Wischgeste reserviert. */
.call-fab { bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)); }
.cookie-banner { bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Standort (Kontaktseite) ---------- */
.standort-grid { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.standort-fakten { display: flex; flex-direction: column; gap: 4px; }
.sf-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.sf-row:first-child { border-top: none; padding-top: 0; }
.sf-row svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--accent); }
.sf-row small { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.sf-row span { font-size: 0.9688rem; line-height: 1.55; }
.sf-sub { font-size: 0.8125rem; color: var(--ink-3); }
.standort-fakten .btn { margin-top: 20px; align-self: flex-start; }
.standort-karte .map-embed { margin: 0; }
.standort-karte .map-embed, .standort-karte .map-embed iframe { width: 100%; aspect-ratio: 16 / 9; min-height: 320px; }
@media (max-width: 860px) {
  .standort-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Abgrenzung (Leistungen): ruhige Zweiteilung ---------- */
.abgrenz { border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 64px); }
.abgrenz .section-title { margin-bottom: clamp(28px, 4vw, 44px); }
.abgrenz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.abgrenz-col { border-top: 2px solid var(--accent); padding-top: 18px; }
.abgrenz-col h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.abgrenz-col p { color: var(--ink-2); line-height: 1.65; max-width: 46ch; }
@media (max-width: 640px) { .abgrenz-grid { grid-template-columns: minmax(0, 1fr); } }


/* Querverweis-Liste im Dunkelband (Leistungen) */
.dz-links { grid-template-columns: minmax(0, 1fr); }
.dz-links li { padding: 0; border-top: 1px solid oklch(1 0 0 / 0.14); min-height: 0; }
.dz-links li:first-child { border-top: none; }
.dz-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 15px 2px; color: oklch(0.92 0.005 250); text-decoration: none; font-size: 0.9375rem; min-height: 44px;
  transition: color .15s; }
.dz-links a:hover { color: #fff; }
.dz-links a svg { width: 16px; height: 16px; flex: none; color: oklch(0.84 0.06 245); }


/* Preis-Vorteile: drei Spalten mit Akzentlinie, wie die Abgrenzung */
.pl-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); margin-top: clamp(40px, 6vw, 64px); }
.pl-info-i { display: block; border-top: 2px solid var(--accent); padding-top: 16px; }
.pl-info-i strong { display: block; font-size: 1.0312rem; font-weight: 500; margin-bottom: 8px; }
.pl-info-i p { color: var(--ink-2); line-height: 1.6; font-size: 0.9062rem; }
@media (max-width: 720px) { .pl-info { grid-template-columns: minmax(0, 1fr); } }
/* Fussnote: linksbuendig unter Hairline statt zentriertem Streuband */
.pl-stand { border-top: 1px solid var(--line); padding-top: 18px; margin-top: clamp(32px, 5vw, 48px);
  color: var(--ink-3); font-size: 0.8438rem; line-height: 1.6; max-width: 70ch; text-align: left; }
.pl-stand + .pl-stand { border-top: none; padding-top: 0; margin-top: 12px; }