/*
Theme Name: Bergstraße Digital
Theme URI: https://bergstrasse.digital
Author: David
Author URI: https://bergstrasse.digital
Description: Professionelle Website für Bergstraße Digital – Webdesign & Entwicklung aus der Region
Version: 1.0.0
License: Private
Text Domain: bergstrasse-digital
*/

/* ══════════════════════════════════════════════════════════════════════════
   AUSLIEFERUNG DES CSS — gemessen am 07.08.2026 (Sicht 25)

   Damit niemand die naheliegende Optimierung ein zweites Mal durchrechnet:
   Die zehn blockierenden Stylesheets sind NICHT der Engpass der Startseite.

   Gemessen an der Live-Seite, mobil 390x844, CPU 4x, 1,6 Mbit/s, 150 ms
   Latenz (dasselbe Profil wie Sicht 01):
     - Alle 9 Stylesheets sind nach 1.955 ms vollstaendig da (85,3 KB
       komprimiert). Das LCP faellt bei 8.592 ms — 6,6 s SPAETER.
     - Byte-Anteile der Startseite: Bilder 1.479 KB (75 %), Schriften
       350 KB (18 %), CSS 85 KB (4 %), HTML 43 KB, JS 24 KB.
     - Der Server spricht HTTP/3. Alle Stylesheets laufen ueber EINE
       Verbindung parallel; zwischen der ersten und der letzten Antwort
       liegen 24 ms. "Zehn Roundtrips" gibt es hier nicht.

   Drei Wege wurden gegen einen lokalen Spiegel derselben Seite gemessen,
   je 5 Laeufe, Mediane (unveraendert: FCP 3.004 ms / LCP 6.688 ms):
     a) alles in EINE Datei zusammengelegt   FCP 3.308 / LCP 6.884  — kein Gewinn
     b) alles inline im Kopf                 FCP 2.552 / LCP 8.980  — LCP schlechter
     c) kritisches CSS inline + Rest async   FCP 2.156 / LCP 11.136 — LCP deutlich schlechter
   Inlining kauft FCP mit LCP: die zusaetzlich im HTML mitgeschickten Bytes
   konkurrieren auf einer schmalen Leitung mit dem LCP-Bild (bd-hero-screen,
   830 KB Hero-Aufnahmen, fertig bei 8,5 s).

   Folgerung: Wer die Startseite schneller machen will, muss an die Bilder
   und die Schriften, nicht an die Ladereihenfolge des CSS.
   Messskripte: s25-abdeckung.js, s25-lauf.js, s25-pfad.js im Scratchpad.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #0D2137;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Motion-Tokens (Apple-Grammatik: Größe bestimmt Dauer) ── */
:root {
  --e-hero:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-exit:   cubic-bezier(0.4, 0, 1, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-micro: 180ms; --t-small: 260ms; --t-card: 420ms;
  --t-section: 650ms; --t-hero: 950ms;
}

/* ── Reveal (parametrisierbar: Distanz/Dauer/Delay pro Element) ── */
.reveal {
  opacity: 0;
  transform: translateY(var(--rv-y, 18px));
  transition: opacity var(--rv-d, var(--t-section)) var(--e-out),
              transform var(--rv-d, var(--t-section)) var(--e-out);
  transition-delay: var(--rv-delay, 0ms);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { --rv-delay: 70ms; }
.d2 { --rv-delay: 140ms; }
.d3 { --rv-delay: 210ms; }
.d4 { --rv-delay: 280ms; }
.d5 { --rv-delay: 350ms; }

/* ── Noise overlay ── */
.noise::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  pointer-events: none;
  z-index: 1;
}
.noise > * { position: relative; z-index: 2; }

/* ── Header ── */
#hdr {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
#hdr.scrolled {
  background: rgba(13,33,55,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Nav links ── */
.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: #C8A24A;
  transition: width 0.3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid #C8A24A; outline-offset: 4px; border-radius: 2px; }

/* ── Buttons ── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  background: #C8A24A;
  color: #0D2137;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.8125rem 1.875rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer; border: none;
}
.btn-gold:hover {
  background: #D6B05A;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(200,162,74,0.3);
}
.btn-gold:active { transform: translateY(0); }
.btn-gold:focus-visible { outline: 2px solid #C8A24A; outline-offset: 3px; }

.btn-outline-w {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.8);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.8125rem 1.875rem;
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-outline-w:hover {
  border-color: rgba(255,255,255,0.65);
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.btn-outline-w:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 3px; }

.btn-navy {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0D2137;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.9375rem 1.875rem;
  border-radius: 6px;
  text-decoration: none;
  width: 100%;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer; border: none;
}
.btn-navy:hover {
  background: #152E4A;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(13,33,55,0.25);
}
.btn-navy:active { transform: translateY(0); }
.btn-navy:focus-visible { outline: 2px solid #0D2137; outline-offset: 3px; }

.btn-outline-navy {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(13,33,55,0.3);
  color: #0D2137;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.8125rem 1.875rem;
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-outline-navy:hover {
  border-color: #0D2137;
  background: rgba(13,33,55,0.06);
}
.btn-outline-navy:focus-visible { outline: 2px solid #0D2137; outline-offset: 3px; }

/* ── Section label ── */
.s-label {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8A24A;
}

/* ── Service cards ── */
.svc-card {
  border: 1px solid #E4DDD4;
  border-radius: 10px;
  padding: 2rem;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(13,33,55,0.09);
  border-color: #C8A24A;
}

/* ── Pricing cards ── */
.p-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.25rem 2rem;
  border: 1.5px solid #E4DDD4;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  position: relative;
}
.p-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(13,33,55,0.1);
}
.p-card--featured {
  border-color: #C8A24A;
  box-shadow: 0 0 0 1px #C8A24A, 0 20px 56px rgba(200,162,74,0.12);
}
.p-card--featured:hover {
  box-shadow: 0 0 0 1px #D6B05A, 0 28px 64px rgba(200,162,74,0.18);
}

/* ── M7: Karten-CTA klebt am unteren Rand ──
   Ohne das stehen die drei Knöpfe auf unterschiedlicher Höhe, weil die
   Beschreibungstexte unterschiedlich lang sind. Alle Karten-Kinder außer
   .pt-2 (Badge, .bsd-scan) sind position:absolute, liegen also außerhalb
   des Flusses — der Umbau auf Flex ist damit unkritisch. */
.p-card { display: flex; flex-direction: column; }
.p-card > .pt-2 { display: flex; flex-direction: column; flex: 1 1 auto; }
.p-card-cta { margin-top: auto; }

/* ── B10: Datenschutzhinweis unter jedem Formular ──
   Lesbar, aber nachgeordnet: der Hinweis muss auffindbar sein, ohne dem
   Absende-Knopf die Aufmerksamkeit zu nehmen. */
.bsd-form-datenschutz {
  margin-top: 0.875rem;
  font-family: 'Inter', sans-serif;
  /* 12px statt 11px und --d-muted statt --d-faint: Kontrast 8,9:1 statt 4,7:1.
     Art. 12 Abs. 1 DSGVO verlangt „leicht zugängliche Form" — bei einem
     Pflichthinweis nicht an der Grenze entlangschrammen. */
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--d-muted);
  text-align: left;
  max-width: 62ch;
}
.bsd-form-datenschutz a {
  color: var(--d-text);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.bsd-form-datenschutz a:hover { color: var(--gold); }

/* ── Pricing feature list ── */
.p-features li {
  padding: 0.7rem 0;
  border-bottom: 1px solid #F0EBE4;
  font-size: 0.875rem;
  color: #3A4A5A;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.5;
}
.p-features li:last-child { border-bottom: none; }
.p-features li strong {
  font-weight: 600;
  color: #0D2137;
}

/* ── Benefit cards ── */
.ben-card {
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 2rem;
  background: rgba(255,255,255,0.03);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ben-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(200,162,74,0.25);
  transform: translateY(-2px);
}

/* ── Form select ── */
.f-select {
  width: 100%;
  padding: 0.8125rem 2.5rem 0.8125rem 1rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23697585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border: 1.5px solid #E4DDD4;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #0D2137;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.f-select:focus {
  border-color: #C8A24A;
  box-shadow: 0 0 0 3px rgba(200,162,74,0.12);
}

/* ── Form inputs ── */
.f-input {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: #fff;
  border: 1.5px solid #E4DDD4;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: #0D2137;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.f-input:focus {
  border-color: #C8A24A;
  box-shadow: 0 0 0 3px rgba(200,162,74,0.12);
}
.f-input::placeholder { color: #AAA5A0; }
textarea.f-input { resize: vertical; min-height: 130px; }

/* ── Mobile menu ── */
#mob-menu {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#mob-menu[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ── Gold line divider ── */
.hr-gold {
  border: none; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,162,74,0.4), transparent);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0D2137; }
::-webkit-scrollbar-thumb { background: #2A4060; border-radius: 3px; }

/* ── Anchor-Offset: verhindert dass der fixe Header Sections verdeckt ── */
section[id] {
  scroll-margin-top: 76px;
}

/* ── Mobile Fixes ── */
@media (max-width: 767px) {
  /* Hero: weniger Blau oben */
  .hero-inner { padding-top: 2.5rem; padding-bottom: 4rem; }

  /* Sections: kompaktere Abstände */
  .section-pad { padding-top: 4rem; padding-bottom: 4rem; }

  /* Pricing badge "BESTE WAHL" nicht abschneiden */
  .best-badge-wrap { left: 50%; transform: translateX(-50%); }

  /* Metriken-Row: kleinere Lücken */
  .metrics-row { gap: 1rem; }

  /* Metrics Trennlinien auf sehr kleinen Screens ausblenden */
  .metrics-divider { display: none; }
}

/* ── Hero Shader Canvas ── */
#hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}

/* ── Floating Animation (Device-Ruhe: kleine Amplitude, keine Rotation) ── */
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.hero-logo-float {
  animation: hero-float 9s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(200,162,74,0.4))
          drop-shadow(0 0 100px rgba(200,162,74,0.15));
  will-change: transform;
}

/* ── WordPress admin bar fix ── */
.admin-bar #hdr {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #hdr {
    top: 46px;
  }
}

/* ══════════════════════════════════════════
   GOOGLE REVIEWS
══════════════════════════════════════════ */
.bsd-stars { display: inline-flex; gap: 2px; }

/* Kompaktes Rating-Badge (Hero / Footer / Kontakt) */
.bsd-rating-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem; font-weight: 400;
  color: #697585;
  background: #fff;
  border: 1px solid #E4DDD4;
  border-radius: 9999px;
  padding: 0.4375rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bsd-rating-badge:hover {
  border-color: #C8A24A;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,33,55,0.08);
}
.bsd-rating-badge strong { color: #0D2137; font-weight: 700; }
.bsd-rating-badge--dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
}
.bsd-rating-badge--dark:hover {
  border-color: rgba(200,162,74,0.6);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.bsd-rating-badge--dark strong { color: #fff; }
.bsd-g-logo { flex-shrink: 0; }

/* Score-Block im Sektions-Header */
.bsd-rev-score {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1.125rem 1.5rem;
}
.bsd-rev-score-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.75rem; font-weight: 800;
  color: #fff; letter-spacing: -0.03em; line-height: 1;
}
.bsd-rev-score-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem; font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin-top: 0.375rem;
}

/* Marquee */
.bsd-rev-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bsd-rev-track {
  display: flex; gap: 1.25rem;
  width: max-content;
  padding: 0.25rem 0;
  animation: bsd-rev-scroll 55s linear infinite;
  will-change: transform;
}
.bsd-rev-marquee:hover .bsd-rev-track,
.bsd-rev-track:focus-within { animation-play-state: paused; }
@keyframes bsd-rev-scroll {
  to { transform: translateX(calc(-50% - 0.625rem)); }
}

/* Review-Karte */
.bsd-rev-card {
  flex: 0 0 340px;
  display: flex; flex-direction: column; gap: 0.875rem;
  margin: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 1.625rem 1.75rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.bsd-rev-card:hover {
  border-color: rgba(200,162,74,0.45);
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
@media (min-width: 768px) { .bsd-rev-card { flex-basis: 400px; } }
.bsd-rev-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem; font-weight: 300;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin: 0;
}
.bsd-rev-author {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem; color: rgba(255,255,255,0.85);
}
.bsd-rev-author strong { font-weight: 600; color: #fff; }
.bsd-rev-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9999px;
  background: rgba(200,162,74,0.16);
  color: #C8A24A;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 0.9375rem;
  flex-shrink: 0;
}
.bsd-rev-date { color: rgba(255,255,255,0.45); font-weight: 300; }

/* Reduced Motion: Marquee aus, horizontales Scrollen erlauben */
@media (prefers-reduced-motion: reduce) {
  .bsd-rev-track { animation: none; }
  .bsd-rev-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .bsd-rev-card[aria-hidden="true"] { display: none; }
}

/* ══════════════════════════════════════════
   MOTION-FOUNDATION (Sprint 1)
══════════════════════════════════════════ */

/* Reduced Motion: Reveals nie verstecken */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Gold-Button: Shine-Sweep beim Hover */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-220%) skewX(-20deg);
  transition: transform 0.6s var(--e-inout);
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(320%) skewX(-20deg); }

/* Header: beim Runterscrollen ausblenden, beim Hochscrollen einblenden */
#hdr {
  transition: background 0.3s ease, box-shadow 0.3s ease,
              backdrop-filter 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
#hdr.hdr-hidden { transform: translateY(-100%); }

/* Hero: gestaffelter Page-Load-Einstieg
   (Headline .ws-split fällt raus — der Word-Stagger übernimmt sie allein,
   sonst laufen zwei Opacity-Timelines übereinander) */
@keyframes bsd-hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-stagger > * {
  opacity: 0;
  animation: bsd-hero-in 0.75s var(--e-hero) forwards;
}
.hero-stagger > .ws-split { animation: none; opacity: 1; }
.hero-stagger > *:nth-child(1) { animation-delay: 0.10s; } /* Badge   */
.hero-stagger > *:nth-child(3) { animation-delay: 0.55s; } /* Subline */
.hero-stagger > *:nth-child(4) { animation-delay: 0.70s; } /* CTAs    */
.hero-stagger > *:nth-child(5) { animation-delay: 0.85s; } /* Rating  */
.hero-stagger > *:nth-child(6) { animation-delay: 0.95s; } /* Mobile-Showcase */
.hero-stagger > *:nth-child(7) { animation-delay: 1.05s; } /* Metrics */
@media (prefers-reduced-motion: reduce) {
  .hero-stagger > * { animation: none; opacity: 1; }
}

/* Glow-Drift GEOPFERT (Brand-Audit: vierte Nebelschicht unter
   Ambient-Stage + Aurora + Orbs — nur noch GPU-Kosten).
   position:relative bleibt PFLICHT: absolute Kinder (Aurora, Scan)
   müssen sich an der Section verankern, nicht am Viewport. */
section.noise { position: relative; overflow: hidden; }
@keyframes bsd-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-16vw, 14vh) scale(1.25); }
}

/* Sanfter Crossfade beim Seitenwechsel (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.18s; }
::view-transition-new(root) { animation-duration: 0.28s; }

/* Card-Tilt: weiche Rückkehr */
.svc-card, .p-card, .tpl-card, .bsd-ho-step, .bsd-rev-card {
  transition-property: transform, box-shadow, border-color, background;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}

/* ══════════════════════════════════════════
   HERO-SHOWCASE „Living Portfolio" (Sprint 2)
══════════════════════════════════════════ */
.hero-showcase {
  position: relative;
  width: 460px;
  perspective: 1100px;
  /* hero-float entfernt: das Gerät steht, der INHALT bewegt sich (Pan) —
     Apple lässt Geräte stehen. */
}
.hs-tilt {
  position: relative;
  transition: transform 0.25s ease-out;
  transform-style: preserve-3d;
}
.hs-laptop {
  position: relative;
  border-radius: 14px;
  background: #0A1A2C;
  border: 1px solid rgba(200,162,74,0.35);
  padding: 12px 12px 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 0 60px rgba(200,162,74,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.hs-browserbar {
  display: flex; align-items: center; gap: 5px;
  padding: 0 2px 9px;
}
.hs-browserbar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.hs-browserbar span:first-child { background: rgba(200,162,74,0.7); }
.hs-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  overflow: hidden;
  background: #122844;
}
.hs-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: 0;
  animation: bsd-hs-shot 21s ease-in-out infinite;
}
.hs-shot:nth-child(2) { animation-delay: 7s; }
.hs-shot:nth-child(3) { animation-delay: 14s; }
@keyframes bsd-hs-shot {
  0%    { opacity: 0; object-position: 50% 0%; }
  4%    { opacity: 1; }
  29%   { opacity: 1; object-position: 50% 88%; }
  35%   { opacity: 0; object-position: 50% 100%; }
  100%  { opacity: 0; object-position: 50% 0%; }
}
.hs-phone {
  position: absolute;
  right: -34px; bottom: -42px;
  width: 124px;
  border-radius: 20px;
  background: #0A1A2C;
  border: 1px solid rgba(200,162,74,0.4);
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(200,162,74,0.10);
  transform: translateZ(40px) rotate(4deg);
}
.hs-phone-screen {
  position: relative;
  aspect-ratio: 9 / 18;
  border-radius: 13px;
  overflow: hidden;
  background: #122844;
}
.hs-phone-screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
@keyframes bsd-hs-phonepan {
  from { object-position: 50% 0%; }
  to   { object-position: 50% 100%; }
}
.hs-caption {
  margin-top: 1.5rem;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase { animation: none; }
  .hs-shot { animation: none; opacity: 0; }
  .hs-shot:first-child { opacity: 1; }
  .hs-phone-screen img { animation: none; }
}

/* ── Mobile-Hero: Phone-Mockup mit Mobile-Demos (nur unter lg sichtbar) ── */
.hero-showcase-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.75rem;
}
@media (min-width: 1024px) { .hero-showcase-mobile { display: none; } }
/* Alte .hsm-phone/.hsm-screen Definitionen entfernt (waren für nicht mehr
   existierendes Markup, padding:9px brach neues Phone-Mockup-Layout).
   Aktive Definitionen sind unten ab "Mobile-Hero-Showcase". */

/* ════════════════════════════════════════════════════════════
   DARK 2.0 — „Apple in Dunkel" Design-Layer (10.06.2026)
   Re-skinnt die komplette Site. Tokens siehe header.php
   (tailwind.config). Dieser Block überschreibt bewusst ältere
   Regeln weiter oben + Template-<style>-Blöcke (!important).
════════════════════════════════════════════════════════════ */

:root {
  /* DARK 3.0 "Graphite & Gold": neutrale Graphit-Surfaces,
     Ink-Blau als Marken-Akzent, Eis nur als Licht. */
  --d-base:   #07080A;
  --d-soft:   #0D0F13;
  --d-raise:  #14171D;
  --d-elev:   #1B1F26;
  --d-footer: #050608;
  --d-ink:    #0B101C;
  --d-ink2:   #121A2B;
  --d-text:   #F2F4F8;
  --d-muted:  #ADB4BD;
  --d-faint:  #79818D;
  --d-line:   rgba(255,255,255,0.07);
  --d-line-2: rgba(255,255,255,0.14);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bd: rgba(255,255,255,0.08);
  --gold:      #C8A24A;
  --gold-hi:   #E2BE6C;
  --gold-deep: #A8842F;
  --gold-glow: rgba(200,162,74,0.12);
  --gold-ring: rgba(200,162,74,0.40);
  --ice:      #7DC4E8;
  --ice-glow: rgba(125,196,232,0.10);
  --ice-edge: rgba(125,196,232,0.18);
  --hero-grad: radial-gradient(130% 100% at 75% -10%, #13203A 0%, #0B101C 38%, #07080A 80%);
  --cta-grad:  linear-gradient(180deg, #0D0F13 0%, #0B101C 55%, #0E1626 100%);
}

/* ── Base ── */
body {
  background: var(--d-base);
  color: var(--d-text);
}
::selection { background: rgba(200,162,74,0.35); color: #fff; }
html { scrollbar-color: rgba(200,162,74,0.5) #0A0F1A; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0A0F1A; }
body::-webkit-scrollbar-thumb { background: rgba(200,162,74,0.45); border-radius: 8px; }

/* Helle Utility-Flächen → dunkle Layer */
.bg-white { background-color: var(--d-base) !important; }
.bg-bd-navy { background-color: #0D2137 !important; }

/* Catch-All für hartkodierte Hell-Inline-Styles (Text ohne eigenes BG) */
[style*="color:#0D2137"]:not([style*="background"]),
[style*="color: #0D2137"]:not([style*="background"]) { color: var(--d-text) !important; }
[style*="color:#3A4A5A"]:not([style*="background"]),
[style*="color:#697585"]:not([style*="background"]) { color: var(--d-muted) !important; }
pre[style*="background:#F5F2EC"] { background: var(--d-raise) !important; color: var(--d-muted) !important; }

/* ── Scroll-Progress ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: var(--sp, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  box-shadow: 0 0 12px rgba(200,162,74,0.7);
  z-index: 60;
  pointer-events: none;
}

/* ── Dynamic Glass-Navbar (Pill) ── */
#hdr { padding: 10px 12px 0; background: transparent !important; }
.hdr-pill {
  max-width: 1120px !important;
  background: rgba(10,16,28,0.55);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-bd);
  border-radius: 9999px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 0.35s ease, box-shadow 0.35s ease, max-width 0.45s cubic-bezier(0.16,1,0.3,1);
}
#hdr.scrolled { padding-top: 6px; }
#hdr.scrolled .hdr-pill {
  background: rgba(8,12,22,0.78);
  max-width: 980px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
#mob-menu {
  background: rgba(10,16,28,0.85) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-bd) !important;
  border-radius: 20px;
  margin: 0 12px;
  left: 0 !important; right: 0 !important;
  top: 78px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

/* ── Buttons 2.0 ── */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, #B08C32 100%);
  border-radius: 9999px;
  padding: 0.875rem 2rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(200,162,74,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, #B08C32 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(200,162,74,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
  filter: brightness(1.06);
}
.btn-gold:active { transform: translateY(0) scale(0.97); }
.btn-outline-w, .btn-outline-navy, .btn-navy {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--d-text) !important;
  border-radius: 9999px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.btn-outline-w:hover, .btn-outline-navy:hover, .btn-navy:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(200,162,74,0.55);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ── Glass-Karten-System ── */
.svc-card, .p-card, .bsd-ho-step, .wissen-card,
.tpl-card, .tpl-card--cta {
  position: relative;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.svc-card:hover, .p-card:hover, .bsd-ho-step:hover, .tpl-card:hover {
  border-color: rgba(200,162,74,0.45) !important;
  background: rgba(255,255,255,0.07) !important;
}
.p-card--featured {
  border-color: rgba(200,162,74,0.55) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 60px rgba(200,162,74,0.12), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.tpl-card-title { color: var(--d-text) !important; }
.tpl-card-desc { color: var(--d-muted) !important; }
.tpl-card-img-wrap { background: var(--d-raise) !important; }
.tpl-nav-btn {
  background: var(--glass-bg) !important;
  color: var(--d-text) !important;
  border: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(12px);
}
.tpl-nav-btn:hover { background: rgba(200,162,74,0.9) !important; color: #0D2137 !important; }
.tpl-dot { background: rgba(255,255,255,0.18) !important; }
.tpl-dot.is-active { background: var(--gold) !important; }
.bsd-ho-step-title { color: var(--d-text) !important; }
.bsd-ho-step-desc { color: var(--d-muted) !important; }

/* Formular-Inputs → dunkles Glas */
.f-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--glass-bd) !important;
  color: var(--d-text) !important;
}
.f-input::placeholder { color: rgba(166,178,194,0.5) !important; }
.f-input:focus { border-color: rgba(200,162,74,0.6) !important; box-shadow: 0 0 0 3px rgba(200,162,74,0.15) !important; }

/* Rating-Badge (helle Variante) → Glas */
.bsd-rating-badge {
  background: var(--glass-bg);
  border-color: var(--glass-bd);
  color: var(--d-muted);
  backdrop-filter: blur(12px);
}
.bsd-rating-badge strong { color: var(--d-text); }

/* Rechtsseiten (Impressum/Datenschutz Inline-<style>) */
.imp-h2, .imp-h3, .ds-h2, .ds-h3 { color: var(--d-text) !important; }
.imp-p, .ds-p { color: var(--d-muted) !important; }
.imp-p a, .ds-p a { color: var(--gold-hi) !important; }
.imp-divider, .ds-divider { border-top-color: var(--d-line) !important; }

/* ── Aurora (Hero-Hintergrund) ── */
.bsd-aurora {
  position: absolute; inset: -10%;
  overflow: hidden;
  pointer-events: none;
  transform: translate(var(--ax, 0px), var(--ay, 0px));
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.bsd-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  will-change: transform;
}
.bsd-aurora span:nth-child(1) {
  width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  left: -12%; top: -18%;
  background: radial-gradient(circle, rgba(200,162,74,0.16) 0%, transparent 62%);
  animation: aur-1 26s ease-in-out infinite alternate;
}
.bsd-aurora span:nth-child(2) {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  right: -10%; top: 6%;
  background: radial-gradient(circle, rgba(46,88,148,0.30) 0%, transparent 62%);
  animation: aur-2 32s ease-in-out infinite alternate;
}
.bsd-aurora span:nth-child(3) {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  left: 30%; bottom: -28%;
  background: radial-gradient(circle, rgba(226,190,108,0.10) 0%, transparent 60%);
  animation: aur-3 38s ease-in-out infinite alternate;
}
@keyframes aur-1 { to { transform: translate(14vw, 10vh) scale(1.18); } }
@keyframes aur-2 { to { transform: translate(-10vw, 14vh) scale(0.88); } }
@keyframes aur-3 { to { transform: translate(-8vw, -10vh) scale(1.22); } }

/* ── Word-Stagger (Hero-Headline) mit Blur-Settle ── */
.ws-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
  animation: ws-in 0.7s var(--e-hero) forwards;
  animation-delay: calc(var(--wi, 0) * 80ms + 0.25s);
}
@keyframes ws-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Gold-Shimmer für Akzent-Begriffe.
   Robust: solide Gold-Farbe als Basis; transparent nur wenn der
   Clip wirklich greift (keine Wort-Spans im Inneren — siehe footer.php). */
.au-shimmer {
  color: var(--gold) !important;
  background: linear-gradient(110deg, var(--gold) 30%, #F1DFAE 50%, var(--gold) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* EIN Lichtlauf als Schlussakkord der Hero-Eröffnung — dann Ruhe */
  animation: shimmer-x 2.4s var(--e-inout) 1.2s 1 both;
}
/* REGRESSION-FIX B2: Der Word-Stagger markiert den Shimmer-Span als
   ws-w — der spätere animation-Shorthand von .au-shimmer killte sonst
   ws-in samt opacity-Fahrt → Zeile blieb unsichtbar. Beide kombinieren: */
.au-shimmer.ws-w {
  animation: ws-in 0.7s var(--e-hero) forwards,
             shimmer-x 2.4s var(--e-inout) 1 both;
  animation-delay: calc(var(--wi, 0) * 80ms + 0.25s), 1.2s;
}
@keyframes shimmer-x { from { background-position: 110% 0; } to { background-position: -10% 0; } }

/* ── Spotlight-Karten (Cursor-Licht) ── */
.spot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(200,162,74,0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }

/* Scroll-Zoom ENTFERNT (Regie-Audit): lief als zweite Opacity-Timeline
   über den Reveals — dieselbe Doppel-Animation, die im Hero schon
   gefixt wurde. Die Reveals tragen den Eintritt allein. */

@media (prefers-reduced-motion: reduce) {
  .bsd-aurora span { animation: none; }
  .ws-w { animation: none; opacity: 1; transform: none; }
  .au-shimmer { animation: none; }
}

/* ── Hero: fotorealistische Composite-Mockups (Crossfade) ── */
.hero-showcase { width: 560px; }
.hsc-stack {
  position: relative;
  aspect-ratio: 1184 / 864;
  -webkit-mask-image: radial-gradient(125% 125% at 50% 45%, #000 52%, transparent 80%);
  mask-image: radial-gradient(125% 125% at 50% 45%, #000 52%, transparent 80%);
}
.hsc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: hsc-fade 21s ease-in-out infinite;
}
.hsc-img:nth-child(2) { animation-delay: 7s; }
.hsc-img:nth-child(3) { animation-delay: 14s; }
@keyframes hsc-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  33%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hsc-img { animation: none; opacity: 0; }
  .hsc-img:first-child { opacity: 1; }
}

/* ── DARK-QA: Restliche helle Template-/Functions-Komponenten ──
   body-Präfix erhöht die Spezifität über spätere <style>-Blöcke. */

/* Pricing-Features (waren auf Hell getrimmt) */
.p-features li { color: var(--d-muted); border-bottom-color: var(--d-line); }
.p-features li strong { color: var(--d-text); }

/* ── KONTRAST-KUR (Audit 10.06.) ──
   Jede Gruppe = gemessenes Dunkel-auf-Dunkel-Problem auf der Live-Site. */

/* Wissens-Artikel-Typografie (functions.php .article-body) */
body .article-body p, body .article-body li, body .article-table td { color: var(--d-muted) !important; }
body .article-body p strong, body .article-body li strong { color: var(--d-text) !important; }
body .article-body h2, body .article-body h3, body .article-body h4 { color: var(--d-text) !important; }
body .article-body p a, body .article-body li a { color: var(--gold-hi) !important; }
body .article-body blockquote { color: var(--d-muted) !important; border-color: rgba(200,162,74,0.5) !important; }

/* Globale Links (.bd-link aus functions.php) */
body .bd-link { color: var(--gold-hi) !important; }
body .bd-link:hover { color: #F1DFAE !important; }

/* Footer: zu blasse Bottom-Links & Copyright */
footer [class*="text-white/18"], footer [class*="text-white/25"] { color: rgba(255,255,255,0.55) !important; }
footer [class*="text-white/3"] { color: rgba(255,255,255,0.6) !important; }

/* Wissen-Hub + Leistungen-Hubs */
body .wissen-card-title, body .wissen-section-headline, body .bsd-hub-card-title,
body .bsd-ablauf-mini-title, body .bsd-time-label, body .weiterlesen-title,
body .wo-wir-arbeiten-stadt { color: var(--d-text) !important; }
body .wissen-card-desc, body .bsd-hub-card-desc, body .bsd-ablauf-mini-desc,
body .weiterlesen-label, body .wo-wir-arbeiten-meta { color: var(--d-muted) !important; }

/* FAQ-Seite (Summaries + Inhalt) */
body .faq-summary, body summary.faq-summary { color: var(--d-text) !important; }
body .faq-content, body .faq-content p { color: var(--d-muted) !important; }

/* Stadt-Seiten-Profile (#4A5568-Fließtext) */
body .bsd-profile-row p, body .bsd-profile-row li { color: var(--d-muted) !important; }
body .bsd-profile-row strong, body .bsd-profile-row h3 { color: var(--d-text) !important; }

/* Popup/Quiz-Close-Buttons (Hover war helle Fläche) */
body .bsd-exit-popup-close:hover, body .bsd-quiz-close:hover {
  color: var(--d-text) !important;
  background: rgba(255,255,255,0.10) !important;
}

/* Ablauf-Seite */
body .bsd-phase-marker { background: var(--d-raise) !important; border: 1px solid rgba(200,162,74,0.5) !important; }
body .bsd-phase-num { color: var(--gold-hi) !important; }
body .bsd-phase-content, body .bsd-time-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-bd) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body .bsd-phase-title, body .bsd-time-num { color: var(--d-text) !important; }
body .bsd-phase-desc, body .bsd-phase-list, body .bsd-phase-list li { color: var(--d-muted) !important; }
body .bsd-phase-list strong { color: var(--d-text) !important; }

/* FAQ-Items (Ablauf + Stadt-Seiten + FAQ-Seite) */
body .bsd-faq-item { background: var(--glass-bg) !important; border-color: var(--glass-bd) !important; }
body .bsd-faq-q, body .bsd-faq-item summary { color: var(--d-text) !important; }
body .bsd-faq-a { color: var(--d-muted) !important; }
body .faq-summary:hover { background: rgba(255,255,255,0.06) !important; }

/* Stadt-Seiten Profile + Leistungen-Hubs + Glossar + Wissen */
body .bsd-profile-row, body .bsd-hub-card, body .bsd-ablauf-mini li, body .gloss-card, body .wissen-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-bd) !important;
}
/* 07.08.2026: Der Universalselektor traf auch `.gloss-card-cat` und
   `.gloss-card-arrow` und nahm ihnen das Gold — auf /wissen/ waren die
   Gegenstücke gold, auf /glossar/ farblos. Sicht 10 hat die Begriffslabels
   gerade zur tragenden Auszeichnung gemacht (der Begriff steht dort statt in
   einer H2, damit das Glossar seine eigenen Unterseiten nicht mehr
   kannibalisiert) — ohne die Ausnahme wäre genau diese Arbeit unsichtbar.
   Deshalb Ausnahme statt Einschränkung des Selektors: Alles bleibt lesbar,
   nur die beiden Gold-Elemente behalten ihre Farbe. */
body .gloss-card *:not(.gloss-card-cat):not(.gloss-card-arrow),
body .bsd-profile-row h3 { color: var(--d-text) !important; }

/* Artikel-Tabellen + Weiterlesen/Wo-wir-arbeiten-Cards (functions.php) */
body .article-table th { background: var(--d-raise) !important; color: var(--d-text) !important; border-bottom-color: var(--d-line) !important; }
body .article-table td { border-color: var(--d-line) !important; color: var(--d-muted) !important; }

/* Sicht 30, 07.08.2026 — Tabellen schoben das Handy seitlich auf.
   Gemessen bei 390 px Sichtfeld (Chrome, gerenderte Seiten): die Seite war
   /website-kosten-bensheim/ 490 px breit, /webdesign-mittelstand/ 489 px,
   /website-fuer-steuerberater/ 409 px, /website-fuer-restaurants/ und
   /website-fuer-immobilienmakler/ je 395 px. Ursache ist immer dieselbe:
   .article-table steht auf width:100%, aber ohne table-layout richtet sich
   die Spaltenbreite nach dem laengsten Wort — die 100 % werden dann
   ueberschrieben. Betroffen ist unter anderem die Seite mit der besten
   Klickrate, und seitliches Wegschieben trifft genau die Handy-Besucher.
   Zuerst mit table-layout:fixed probiert: der Überlauf war weg, aber bei
   vier Spalten auf 88 px brach jedes zweite Wort mitten entzwei
   („Handwer-ker", „Professi-onal"). Das ist schlechter als das Problem.
   Stattdessen rollt die Tabelle jetzt seitlich in sich selbst: display:block
   macht sie zum Rollbereich, die Zeilengruppen bleiben in einer gemeinsamen
   anonymen Tabelle — Kopf- und Datenspalten bleiben also bündig. Die Seite
   steht still, gerollt wird nur die Tabelle. Nur unter 700 px; auf dem
   Rechner bleibt alles wie bisher. */
@media (max-width: 700px) {
  body .article-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}
body .weiterlesen-card, body .wo-wir-arbeiten-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-bd) !important;
  color: var(--d-text) !important;
}
body .wo-wir-arbeiten-headline { color: var(--d-text) !important; }
body .wo-wir-arbeiten-sub { color: var(--d-muted) !important; }

/* Exit-Popup + Quiz-Modal (functions.php) → dunkles Glas */
body .bsd-exit-popup-inner, body .bsd-quiz-inner {
  background: rgba(13,20,33,0.92) !important;
  border: 1px solid var(--glass-bd) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6) !important;
}
body .bsd-exit-popup-inner h1, body .bsd-exit-popup-inner h2, body .bsd-exit-popup-inner h3,
body .bsd-exit-popup-inner strong, body .bsd-quiz-inner h1, body .bsd-quiz-inner h2,
body .bsd-quiz-inner h3, body .bsd-quiz-inner strong, body .quiz-q { color: var(--d-text) !important; }
body .bsd-exit-popup-inner p, body .bsd-quiz-inner p { color: var(--d-muted) !important; }
body .quiz-option {
  background: var(--glass-bg) !important;
  border-color: var(--glass-bd) !important;
  color: var(--d-text) !important;
}
body .quiz-option:hover { border-color: rgba(200,162,74,0.55) !important; }

/* Inline-helle Boxen (z.B. Hinweiskästen in Fließtexten) */
[style*="background:#F5F2EC"]:not(pre) { background: var(--d-raise) !important; }
[style*="background: #F5F2EC"]:not(pre) { background: var(--d-raise) !important; }

/* Select-Inputs: Chevron-Icon hell nachliefern (Shorthand-Override) */
select.f-input {
  background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A6B2C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
}

/* ── Prozess-Illustrationen (Ablauf + Teaser) ── */
.bsd-ho-step-img {
  width: 84px; height: 84px;
  border-radius: 18px;
  float: right;
  margin: -0.25rem 0 0.5rem 0.75rem;
  border: 1px solid var(--glass-bd);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.bsd-phase-img {
  width: 96px; height: 96px;
  border-radius: 20px;
  float: right;
  margin: 0 0 0.75rem 1rem;
  border: 1px solid var(--glass-bd);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
/* Selbst erstellte Line-Icons statt Higgsfield-Fotos (passen zum Dark-Design) */
.bsd-phase-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  float: right;
  margin: 0 0 0.75rem 1rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(200,162,74,0.16), rgba(200,162,74,0.05) 60%, transparent),
              var(--mat-thin-bg);
  border: 1px solid rgba(200,162,74,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bsd-phase-icon svg { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .bsd-phase-img { width: 72px; height: 72px; }
  .bsd-phase-icon { width: 54px; height: 54px; border-radius: 14px; }
  .bsd-phase-icon svg { width: 26px; height: 26px; }
}

/* ════════════════════════════════════════════════════════════
   GLAS 3.0 + GRAPHITE-STAGE — visionOS-Material-System
   (Synthese aus Farb- und Material-Audit, 10.06.2026)
   Lichtquelle global: oben-links (165°).
════════════════════════════════════════════════════════════ */
:root {
  --lit: 165deg;

  /* M1 thin — Controls, Inputs, Badges */
  --mat-thin-bg: linear-gradient(var(--lit),
      rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 100%);
  --mat-thin-blur: blur(10px) saturate(1.5);

  /* M2 regular — Content-Karten */
  --mat-reg-bg: linear-gradient(var(--lit),
      rgba(255,255,255,0.105) 0%, rgba(255,255,255,0.045) 38%,
      rgba(255,255,255,0.022) 100%);
  --mat-reg-blur: blur(20px) saturate(1.7) brightness(1.06);

  /* M3 thick — Navbar, Modals, Featured */
  --mat-thick-bg: linear-gradient(180deg,
      rgba(18,24,38,0.62) 0%, rgba(9,12,20,0.55) 100%);
  --mat-thick-blur: blur(30px) saturate(1.8);

  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.025'/%3E%3C/svg%3E");

  --shadow-thin:
    0 1px 1px rgba(0,0,0,0.30),
    0 4px 10px -4px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.09);
  --shadow-reg:
    0 1px 1px rgba(0,0,0,0.35),
    0 10px 20px -8px rgba(0,0,0,0.50),
    0 36px 72px -18px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.28);
  --shadow-thick:
    0 1px 1px rgba(0,0,0,0.40),
    0 16px 32px -10px rgba(0,0,0,0.55),
    0 48px 96px -24px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* ── A) Ambient-Stage: das Futter für jeden Blur (Eis + Gold, nie Sattblau) ── */
html { background: var(--d-base); }
body { background: transparent; }
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 14% 6%,  rgba(125,196,232,0.13) 0%, transparent 70%),
    radial-gradient(30% 26% at 86% 16%, rgba(200,162,74,0.12)  0%, transparent 70%),
    radial-gradient(44% 38% at 78% 86%, rgba(125,196,232,0.10) 0%, transparent 70%),
    radial-gradient(26% 22% at 18% 64%, rgba(226,190,108,0.08) 0%, transparent 70%);
}

/* Sektionen durchlässig: Rhythmus über zarte Tints statt opaker Blau-Flächen */
.bg-white { background-color: transparent !important; }
[class*="bg-bd-cream"] { background-color: rgba(255,255,255,0.018) !important; }
#vorlagen { background-color: transparent !important; }

/* Ink-Sektionen: auslaufender Verlauf statt opakem Navy (löst harte Nähte) */
.bg-bd-navy {
  background: linear-gradient(180deg, rgba(11,16,28,0.85) 0%, rgba(11,16,28,0.35) 70%, transparent 100%) !important;
}
/* Heroes mit Inline-Navy (43 Templates) → Graphite-Hero-Verlauf */
section[style*="background:#0D2137"] {
  background: radial-gradient(130% 100% at 75% -10%, #13203A 0%, #0B101C 42%, rgba(7,8,10,0) 88%) !important;
}
/* Navy-Inseln außerhalb von Sections (Glossar-Pillar-Card, article-cta) */
[style*="background:#0D2137"]:not(section) { background: var(--d-ink) !important; }
body .article-cta { background: var(--d-ink) !important; }

/* Footer: Seite blendet aus */
footer.bg-bd-navy {
  background: var(--d-footer) !important;
  border-top: 1px solid var(--d-line);
}

/* ── B) Sektions-Orbs: jede Glaskarte schneidet eine Lichtkante ── */
#vorlagen { background-image:
  radial-gradient(620px 460px at 8% 12%,  rgba(125,196,232,0.13), transparent 70%),
  radial-gradient(520px 420px at 92% 64%, rgba(200,162,74,0.12),  transparent 70%) !important; }
#bewertungen { background-image:
  radial-gradient(640px 480px at 80% 20%, rgba(125,196,232,0.11), transparent 70%),
  radial-gradient(480px 380px at 12% 78%, rgba(226,190,108,0.09), transparent 70%); }
#leistungen { background-image:
  radial-gradient(560px 420px at 90% 8%,  rgba(200,162,74,0.13),  transparent 70%),
  radial-gradient(640px 520px at 6% 78%,  rgba(125,196,232,0.11), transparent 70%) !important; }
#leistungsumfang { background-image:
  radial-gradient(720px 540px at 50% 28%, rgba(200,162,74,0.14),  transparent 70%),
  radial-gradient(560px 460px at 10% 90%, rgba(125,196,232,0.10), transparent 72%) !important; }
#leistungsumfang { position: relative; overflow: clip; isolation: isolate; }
#leistungsumfang::before {
  content: '';
  position: absolute; z-index: -1;
  left: 50%; top: 4%;
  width: 56vw; height: 56vw; max-width: 800px; max-height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200,162,74,0.10) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: bsd-glow-drift 26s ease-in-out infinite alternate;
}

/* Hero-Aurora aufdrehen (Blur-Futter für die Navbar) — Eis statt Sattblau */
.bsd-aurora span:nth-child(1) { background: radial-gradient(circle, rgba(200,162,74,0.22) 0%, transparent 62%); }
.bsd-aurora span:nth-child(2) { background: radial-gradient(circle, rgba(125,196,232,0.22) 0%, transparent 62%); }
.bsd-aurora span:nth-child(3) { background: radial-gradient(circle, rgba(226,190,108,0.15) 0%, transparent 60%); }

/* Mockup-Frames entblauen (waren die sättigsten Flächen im Hero) */
.hs-laptop, .hs-phone, .hsm-phone { background: var(--d-raise); }
.hs-screen, .hs-phone-screen, .hsm-screen { background: var(--d-ink2); }
html { scrollbar-color: rgba(200,162,74,0.5) var(--d-soft); }
body::-webkit-scrollbar-track { background: var(--d-soft); }

/* ── C) M2 REGULAR: Content-Karten (Scheibe = Gradient, Grain liegt drauf) ── */
.svc-card, .p-card, .tpl-card, .tpl-card--cta,
.bsd-ho-step, .wissen-card, .bsd-rev-card, body .bsd-faq-item,
body .bsd-phase-content, body .bsd-time-card,
body .gloss-card, body .bsd-hub-card, body .weiterlesen-card,
body .wo-wir-arbeiten-card, body .bsd-profile-row, .bsd-rev-score {
  position: relative;
  background: var(--glass-grain) repeat 0 0 / 180px 180px,
              var(--mat-reg-bg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: var(--mat-reg-blur);
  -webkit-backdrop-filter: var(--mat-reg-blur);
  box-shadow: var(--shadow-reg) !important;
}
/* Marquee-Karten: kein backdrop-filter auf bewegten Elementen (GPU) */
.bsd-rev-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Gradient-Rim: 1px-Lichtkante, oben hell, unten gold-warm */
.svc-card::before, .p-card::before, .tpl-card::before,
.bsd-ho-step::before, .wissen-card::before, .bsd-rev-card::before,
body .bsd-faq-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--lit),
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.10) 26%,
      rgba(255,255,255,0.03) 55%,
      rgba(200,162,74,0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: filter 0.35s ease;
}

/* ── D) M3 THICK: Navbar, Modals, Featured ── */
.hdr-pill {
  position: relative;
  background:
    radial-gradient(130% 200% at 50% -60%, rgba(255,255,255,0.10) 0%, transparent 55%),
    var(--mat-thick-bg);
  backdrop-filter: var(--mat-thick-blur);
  -webkit-backdrop-filter: var(--mat-thick-blur);
  border-color: transparent;
  box-shadow: var(--shadow-thick);
}
.hdr-pill::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
      rgba(255,255,255,0.38) 0%,
      rgba(255,255,255,0.07) 40%,
      rgba(255,255,255,0.02) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: filter 0.35s ease;
}
#hdr.scrolled .hdr-pill {
  background:
    radial-gradient(130% 200% at 50% -60%, rgba(255,255,255,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(13,18,30,0.80), rgba(8,11,18,0.74));
  box-shadow: var(--shadow-thick);
}
#hdr.scrolled .hdr-pill::before { filter: brightness(1.35); }

#mob-menu,
body .bsd-exit-popup-inner, body .bsd-quiz-inner {
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,0.07) 0%, transparent 50%),
    linear-gradient(180deg, rgba(18,24,38,0.88), rgba(9,12,20,0.86)) !important;
  backdrop-filter: var(--mat-thick-blur);
  -webkit-backdrop-filter: var(--mat-thick-blur);
  box-shadow: var(--shadow-thick) !important;
}

.p-card--featured {
  background: var(--glass-grain) repeat 0 0 / 180px 180px,
    linear-gradient(var(--lit),
      rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 40%,
      rgba(200,162,74,0.05) 100%) !important;
  backdrop-filter: blur(26px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(1.08);
  box-shadow: var(--shadow-thick),
    0 0 70px -18px rgba(200,162,74,0.30),
    inset 0 0 60px -32px rgba(200,162,74,0.30) !important;
}
.p-card--featured::before {
  background: linear-gradient(var(--lit),
      rgba(226,190,108,0.65) 0%,
      rgba(200,162,74,0.18) 30%,
      rgba(255,255,255,0.04) 60%,
      rgba(200,162,74,0.40) 100%);
}

/* ── E) M1 THIN: Inputs, Badges, Sekundär-Buttons ── */
.f-input:not(select) {
  background: var(--mat-thin-bg) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: var(--mat-thin-blur);
  -webkit-backdrop-filter: var(--mat-thin-blur);
  box-shadow: var(--shadow-thin), inset 0 2px 6px rgba(0,0,0,0.22) !important;
}
select.f-input {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A6B2C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center,
    var(--mat-thin-bg) !important;
  backdrop-filter: var(--mat-thin-blur);
  -webkit-backdrop-filter: var(--mat-thin-blur);
  box-shadow: var(--shadow-thin), inset 0 2px 6px rgba(0,0,0,0.22) !important;
}
.f-input:focus {
  border-color: rgba(200,162,74,0.55) !important;
  box-shadow:
    0 0 0 3px rgba(200,162,74,0.14),
    0 0 24px -6px rgba(200,162,74,0.25),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 2px 6px rgba(0,0,0,0.18) !important;
}
.btn-outline-w, .btn-navy, .btn-outline-navy,
.bsd-rating-badge, .tpl-nav-btn, body .quiz-option {
  background: var(--mat-thin-bg) !important;
  border-color: rgba(255,255,255,0.13) !important;
  backdrop-filter: var(--mat-thin-blur);
  -webkit-backdrop-filter: var(--mat-thin-blur);
  box-shadow: var(--shadow-thin);
}

/* Gold-Button = gegossenes Metall (bewusst KEIN Glas) */
.btn-gold {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.40),
    0 10px 24px -6px rgba(200,162,74,0.45),
    0 28px 56px -14px rgba(200,162,74,0.22),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 6px rgba(110,80,20,0.45);
}

/* ── F) Hover: Edge-Light + Lift + Verdichtung ── */
.svc-card:hover, .p-card:hover, .tpl-card:hover,
.bsd-ho-step:hover, .wissen-card:hover, .bsd-rev-card:hover {
  transform: translateY(-5px) scale(1.004);
  background: var(--glass-grain) repeat 0 0 / 180px 180px,
    linear-gradient(var(--lit),
      rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 38%,
      rgba(255,255,255,0.03) 100%) !important;
  backdrop-filter: blur(24px) saturate(2.05) brightness(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(2.05) brightness(1.12);
  box-shadow:
    0 2px 2px rgba(0,0,0,0.30),
    0 18px 32px -10px rgba(0,0,0,0.50),
    0 56px 100px -22px rgba(0,0,0,0.60),
    0 0 0 1px rgba(200,162,74,0.20),
    0 0 36px -8px rgba(200,162,74,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.28) !important;
}
.bsd-rev-card:hover { backdrop-filter: none; -webkit-backdrop-filter: none; }
.svc-card:hover::before, .p-card:hover::before, .tpl-card:hover::before,
.bsd-ho-step:hover::before, .wissen-card:hover::before, .bsd-rev-card:hover::before {
  filter: brightness(1.8) saturate(1.6);
}
.svc-card:active, .p-card:active, .tpl-card:active {
  transform: translateY(-1px) scale(0.997);
  transition-duration: 0.12s;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.35),
    0 6px 14px -6px rgba(0,0,0,0.45),
    0 0 0 1px rgba(200,162,74,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* ── G) Fallbacks & Performance ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .svc-card, .p-card, .tpl-card, .bsd-ho-step, .wissen-card, .bsd-rev-card,
  .hdr-pill, #mob-menu {
    background: linear-gradient(var(--lit), rgba(24,30,44,0.96), rgba(13,17,28,0.96)) !important;
  }
}
@media (max-width: 767px) {
  :root {
    --mat-reg-blur:   blur(14px) saturate(1.6) brightness(1.05);
    --mat-thick-blur: blur(20px) saturate(1.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  #leistungsumfang::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   HERO v3 „POWER-ON" + DEMO-THEATER + SIGNATURES
   (Synthese der 5 Design-Perspektiven, 10.06.2026)
════════════════════════════════════════════════════════════ */

/* ── Hero v3: Posters JS-gesteuert statt Endlos-Loop.
   Full-Page-Screenshots pannen langsam im Gerät („lebt" ohne iframes). ── */
/* STEADY SCREENSHOTS: Full-Page-Bild oben verankert, Frame zeigt den
   Hero-Bereich der Demo-Site. Kein Pan (war auf 4400px-Bildern fehleranfällig
   → leere/schwarze Frames). object-position:top zeigt zuverlässig den Anfang. */
.hs-shot, .dt-poster {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hs-shot {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hs-shot.is-on { opacity: 1; }
.dt-poster.is-on { opacity: 1; }
@keyframes bsd-pan {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--panmax, 0px)); }
}
.hs-screen.is-live .hs-shot { opacity: 0; }
.hsv3-live {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease 0.15s;
}
.hs-screen.is-live .hsv3-live { opacity: 1; }
.hsv3-live iframe {
  border: 0; display: block;
  background: var(--d-ink2);
  transform-origin: 0 0;
  pointer-events: none;
}
.hsv3-pan { will-change: transform; animation: hsv3-pan 26s ease-in-out infinite; }
@keyframes hsv3-pan {
  0%, 12%  { transform: translateY(0); }
  50%, 60% { transform: translateY(var(--panmax, -600px)); }
  100%     { transform: translateY(0); }
}

/* Ghost-Typo: Markenname als Tiefen-Ebene hinter dem Gerät */
.hero-ghost {
  position: absolute; left: 50%; top: 44%;
  transform: translate(calc(-50% + var(--gx, 0px)), -50%);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(9rem, 19vw, 20rem); letter-spacing: -0.04em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  white-space: nowrap; pointer-events: none; user-select: none;
  z-index: -1;
  transition: transform 0.6s var(--e-hero);
}

/* Signature 1: Power-On-Scanline (Hero + Theater) */
.bsd-scan {
  position: absolute; left: 0; right: 0; top: -14%; height: 14%;
  background: linear-gradient(180deg, transparent, rgba(226,190,108,0.9), transparent);
  filter: blur(2px);
  opacity: 0; pointer-events: none;
  z-index: 3;
}
.is-scan .bsd-scan { animation: bsd-scan 0.9s cubic-bezier(0.6,0.05,0.3,1) 1; }
@keyframes bsd-scan {
  0% { top: -14%; opacity: 0; }
  10% { opacity: 1; }
  100% { top: 114%; opacity: 0; }
}

/* Demo-Switcher unterm Hero-Gerät */
.hsv3-switch { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; }
.hsv3-dot {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  border-radius: 9999px; padding: 0.375rem 0.875rem; cursor: pointer;
  transition: color var(--t-small) ease, border-color var(--t-small) ease;
}
.hsv3-dot.is-active { color: var(--gold-hi); border-color: rgba(200,162,74,0.55); }
.hs-caption { display: block; text-decoration: none; color: rgba(255,255,255,0.55); transition: color var(--t-small) ease; }
a.hs-caption:hover { color: var(--gold-hi); }

/* Hero-Scroll-Exit (progressive enhancement) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* scroll(root) explizit: scroll() = nearest, und overflow:hidden-Sections
       SIND Scroll-Container — die Timeline war dadurch tot. */
    .hero-inner { animation: hero-exit linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@keyframes hero-exit { to { transform: translateY(-36px) scale(0.975); opacity: 0.35; } }

/* ── DEMO-THEATER ── */
.dt-wrap { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .dt-wrap { grid-template-columns: 58fr 42fr; gap: 4rem; align-items: start; }
}
.dt-stage { position: sticky; top: 96px; }
.dt-device {
  border-radius: 14px;
  background: var(--d-raise);
  border: 1px solid rgba(200,162,74,0.35);
  padding: 12px 12px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(200,162,74,0.10);
  transition: max-width 0.5s var(--e-hero), border-radius 0.5s var(--e-hero), padding 0.5s var(--e-hero);
  margin: 0 auto;
}
.dt-device.is-mobile { max-width: 320px; border-radius: 32px; padding: 9px; }
.dt-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--d-ink2);
  transition: aspect-ratio 0.5s var(--e-hero), border-radius 0.5s var(--e-hero);
}
.is-mobile .dt-screen { aspect-ratio: 9 / 17; border-radius: 24px; }
.dt-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.dt-poster.is-on { opacity: 1; }
.dt-stage.is-live .dt-poster { opacity: 0; }
.dt-live { position: absolute; inset: 0; overflow: hidden; }
.dt-live iframe { border: 0; display: block; background: #fff; transform-origin: 0 0; }

.dt-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; min-height: 34px; }
.dt-dev {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  border-radius: 9999px; padding: 0.3rem 0.8rem; cursor: pointer;
  transition: color var(--t-small) ease, border-color var(--t-small) ease;
}
.dt-dev.is-active { color: var(--gold-hi); border-color: rgba(200,162,74,0.55); }
.dt-livebadge {
  margin-left: auto; color: #7CE38B;
  font: 700 0.6875rem 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.12em;
  animation: dt-pulse 1.6s ease-in-out infinite;
}
@keyframes dt-pulse { 50% { opacity: 0.45; } }
.dt-open, .dt-stop {
  font: 700 0.75rem 'Plus Jakarta Sans', sans-serif;
  color: rgba(255,255,255,0.6);
  background: none; border: 1px solid var(--glass-bd);
  border-radius: 9999px; padding: 0.3rem 0.8rem;
  cursor: pointer; text-decoration: none;
}
.dt-arm {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem; font-weight: 700;
  color: #0B101C;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border: 0; border-radius: 9999px;
  padding: 0.625rem 1.375rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(200,162,74,0.35);
  transition: transform var(--t-small) var(--e-out);
  z-index: 4;
}
.dt-arm:hover { transform: translateX(-50%) translateY(-2px); }
.dt-stage.is-live .dt-arm { display: none; }
.dt-stage.is-live { outline: 1px solid rgba(200,162,74,0.5); outline-offset: 6px; border-radius: 18px; }

.dt-item {
  min-height: 52vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.3;
  transition: opacity 0.45s ease, transform 0.45s var(--e-out);
}
.dt-item.is-active { opacity: 1; transform: translateX(6px); }
.dt-item--cta { opacity: 1; min-height: 40vh; }
@media (max-width: 1023px) {
  .dt-stage { position: sticky; top: 84px; z-index: 5; }
  .dt-item { min-height: 38vh; }
}

/* ── Signature 2: Bergstraßen-Linie (gezeichnete Bergsilhouette) ── */
.bd-ridge { display: block; width: 100%; height: 44px; }
.bd-ridge path {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 1.6s var(--e-hero);
}
.bd-ridge.is-in path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .bd-ridge path { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* CTA-Sektion: Spiegel des Heros (Buchstützen-Prinzip) */
section#kontakt.noise {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(200,162,74,0.10), transparent 70%),
    var(--cta-grad) !important;
}

/* ── UX-Synthese: Klarheit & Zielgruppen-Korrekturen ── */

/* (sec-zoom entfernt — siehe Regie-Audit) */

/* Lesbarkeit: Karten-Fließtext nicht unter 400 */
.tpl-card-desc, .bsd-rev-text { font-weight: 400 !important; }

/* Footer-Vertrauensdaten klar lesbar */
footer address { color: var(--d-muted) !important; }

/* Fokus-Sichtbarkeit für alle Conversion-Elemente */
.hsv3-dot:focus-visible, .dt-dev:focus-visible, .dt-arm:focus-visible,
.dt-stop:focus-visible, .tpl-nav-btn:focus-visible,
body .quiz-option:focus-visible, body .bsd-sticky-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Formulare: sichtbare Kanten + 16px (kein iOS-Auto-Zoom) */
.f-input { font-size: 1rem !important; }
.f-input:not(select) {
  background: rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
}

/* Touch-Geräte: Fake-Glas statt teurem Blur, Aurora statisch, Marquee anhaltbar */
@media (hover: none) {
  .svc-card, .p-card, .tpl-card, .bsd-ho-step, .bsd-rev-card,
  body .bsd-faq-item, body .bsd-phase-content, body .bsd-time-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--glass-grain) repeat 0 0 / 180px 180px,
                linear-gradient(var(--lit), rgba(30,38,54,0.92), rgba(16,21,32,0.94)) !important;
  }
  .bsd-aurora span { animation: none; filter: blur(40px); }
  .bsd-rev-track { animation: none; }
  .bsd-rev-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .bsd-rev-card[aria-hidden="true"] { display: none; }
  section:not(:first-of-type) { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   SYNTHESE v3.1 — Layout, Typo, Komponenten, Scroll-Momente
   (Konsens aus 5 Deep-Dive-Audits: Grid/Spacing, Components,
   Scroll-Regie, Typografie, Informationsarchitektur)
════════════════════════════════════════════════════════════ */

/* ── A) Geometrie-Tokens ── */
:root {
  --hdr-h: 70px;                            /* 10px Pad + 60px Pill */
  --anchor-off: calc(var(--hdr-h) + 8px);
  --sticky-off: calc(var(--hdr-h) + 24px);
  /* Radius-Skala */
  --r-pill: 9999px; --r-modal: 24px; --r-card: 16px; --r-field: 12px; --r-chip: 8px;
  /* States */
  --hover-lift: translateY(-2px);
  --active-press: translateY(0) scale(0.98);
  --hover-gold: brightness(1.06);
  /* Type-Scale (Ratio ~1.25, fluid) */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + 0.6vw, 1.6875rem);
  --lh-display: 1.05;
  --ls-h3: -0.015em;
  --ls-eyebrow: 0.14em;
}
section[id] { scroll-margin-top: var(--anchor-off); }
section[style*="padding-top:68px"] { padding-top: var(--hdr-h) !important; }

/* ── B) KRITISCH: Demo-Theater-Sticky reparieren ──
   Echtes Grid-Item statt display:contents (Safari-Sticky-Risiko) */
.dt-stage-col { display: block; min-width: 0; }
.dt-stage-col.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.dt-stage {
  position: sticky;
  top: var(--sticky-off);
  align-self: start;
}
@media (max-width: 1023px) {
  .dt-wrap { display: block; }
  .dt-stage { top: 84px; z-index: 5; margin-bottom: 2.5rem; }
}
/* Spielplan vom Viewport entkoppeln + Fluchtlinie halten */
.dt-item {
  min-height: clamp(380px, 52vh, 540px);
  padding-left: 1.25rem;
  border-left: 2px solid transparent;
  transition: opacity 0.45s ease, border-left-color 0.45s ease;
}
.dt-item.is-active { transform: none; border-left-color: var(--gold); }
.dt-item--cta { min-height: clamp(300px, 40vh, 420px); }
@media (max-width: 1023px) {
  .dt-item { min-height: clamp(280px, 38vh, 380px); }
}

/* ── C) Hero-Balance ── */
.hero-inner h1 { text-wrap: balance; }
h1.ws-split { line-height: var(--lh-display) !important; }
@media (min-width: 1024px) and (max-width: 1359px) {
  .hero-showcase { width: min(44vw, 560px); }
}
/* Demovierter Dritt-CTA: Textlink-Gewichtung statt Button */
.hero-textlink {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,0.55);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: rgba(200,162,74,0.45);
  text-underline-offset: 4px;
  padding: 0.8125rem 0.5rem;
  transition: color var(--t-small) ease;
}
.hero-textlink:hover { color: var(--gold-hi); }

/* ── D) Paketkarten: Raise behalten, Unterkanten bündig ── */
#leistungsumfang .p-card { display: flex; flex-direction: column; }
#leistungsumfang .p-card > .pt-2 { display: flex; flex-direction: column; flex: 1; }
#leistungsumfang .p-features { margin-top: auto; }

/* ── E) Scroll-Momente ── */
/* Signature 3: Icon-Draw-On (Trust-Strip) */
.icon-draw [stroke] {
  stroke-dasharray: var(--icolen, 80);
  stroke-dashoffset: var(--icolen, 80);
  transition: stroke-dashoffset 0.9s var(--e-out);
  transition-delay: calc(var(--ico-i, 0) * 110ms + 180ms);
}
.reveal.visible .icon-draw [stroke] { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .icon-draw [stroke] { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .bsd-scan { animation: none !important; }
}
/* Beweis-Moment: Sterne-Kaskade (nur wenn JS den Count-up fährt) */
.bsd-rev-score.will-count .bsd-stars svg {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-small) var(--e-out), transform var(--t-card) var(--e-spring);
}
.bsd-rev-score.is-counted .bsd-stars svg { opacity: 1; transform: scale(1); }
.bsd-rev-score.is-counted .bsd-stars svg:nth-child(2) { transition-delay: 90ms; }
.bsd-rev-score.is-counted .bsd-stars svg:nth-child(3) { transition-delay: 180ms; }
.bsd-rev-score.is-counted .bsd-stars svg:nth-child(4) { transition-delay: 270ms; }
.bsd-rev-score.is-counted .bsd-stars svg:nth-child(5) { transition-delay: 360ms; }
/* Krönung (Brand-Audit): EIN Lichtlauf-Vokabular — die Featured-Karte
   spricht denselben „Goldscan" wie Hero und Theater. */
.p-card--featured > .pt-2 { position: relative; overflow: hidden; }
/* CTA-Finale: Spot an, Button glänzt einmal */
#kontakt > div::before {
  content: '';
  position: absolute; left: 50%; bottom: -12%;
  width: min(720px, 90vw); height: 540px;
  transform: translateX(-50%) scale(0.6);
  background: radial-gradient(50% 50% at 50% 62%,
      rgba(226,190,108,0.15), rgba(200,162,74,0.05) 45%, transparent 70%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.2s var(--e-out), transform 1.5s var(--e-hero);
}
#kontakt.is-final > div::before { opacity: 1; transform: translateX(-50%) scale(1); }
#kontakt.is-final .btn-gold::after {
  animation: btn-shine-once 0.9s var(--e-inout) 1.1s 1; /* kein both: pinnte Hover-Shine (C3) */
}
@keyframes btn-shine-once {
  from { transform: translateX(-220%) skewX(-20deg); }
  to   { transform: translateX(320%) skewX(-20deg); }
}
/* Ambient-Diät: Loops pausieren, wenn unsichtbar */
.amb-off, .amb-off::before,
.amb-off .bsd-aurora span, .bsd-aurora.amb-off span,
.amb-off .bsd-rev-track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo-float { animation: none; }
  #kontakt > div::before { transition: none; }
  #kontakt.is-final .btn-gold::after { animation: none !important; }
}

/* ── F) Typo-System ── */
/* Fließtext-Gewicht auf Dark anheben (Halation 45+) */
p[style*="font-weight:300"],
li[style*="font-weight:300"] { font-weight: 400 !important; }
.article-body p, .article-body ul li { font-weight: 400; }
.bsd-ho-step-desc, .tpl-card-desc-cta, .wissen-card-desc { font-weight: 400 !important; }
/* Zeilenlängen */
.article-body p, .article-body ul, .article-body h2, .article-body h3 { max-width: 68ch; }
/* H2-Rampen konsolidieren (8 → 2 Tokens) */
h2[style*="font-size:clamp(1.9rem"], h2[style*="font-size:clamp(1.75rem"],
h2[style*="font-size:clamp(1.7rem"] { font-size: var(--fs-h2) !important; }
h2[style*="font-size:clamp(1.6rem"], h2[style*="font-size:clamp(1.5rem"],
h2[style*="font-size:clamp(1.4rem"] { font-size: var(--fs-h3) !important; letter-spacing: var(--ls-h3) !important; }
/* 800-Inflation zurückbauen — 800 bleibt exklusiv für Hero/Score */
h2[style*="font-weight:800"] { font-weight: 700 !important; }
.tpl-card-tag, .weiterlesen-label, .wo-wir-arbeiten-label { font-weight: 700 !important; }
.tpl-card-title, .bsd-ho-step-title, .wo-wir-arbeiten-stadt { font-weight: 700 !important; }
/* Eyebrows: eine Stimme */
.tpl-card-tag, .weiterlesen-label, .wo-wir-arbeiten-label, .bsd-ho-step-meta {
  font-size: 0.6875rem !important;
  letter-spacing: var(--ls-eyebrow) !important;
}
/* Zahlen arbeiten: tabellarische Ziffern */
.p-card, .metrics-row, .bsd-rev-score-num, .p-features, .article-table, a[href^="tel:"] {
  font-variant-numeric: lining-nums tabular-nums;
}
/* Sektions-Subs: 15px → 16px */
p.text-bd-muted[style*="font-size:0.9375rem"] { font-size: 1rem !important; line-height: 1.5; }
/* Headlines ohne Einwort-Witwen, Absätze hübsch umbrechen */
h1, h2, h3 { text-wrap: balance; }
.article-body p { text-wrap: pretty; }
/* WOW 2: Drop-Cap im Wissen-Bereich (Editorial-Signal) */
.article-body > p:first-of-type::first-letter {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 3.3em; line-height: 0.85;
  float: left; padding: 0.04em 0.12em 0 0;
  color: var(--gold);
}
/* WOW 3: Prozess-Nummern als Stroke-Ziffern (Echo des Hero-Ghosts).
   REGRESSION-FIX E1: Spezifität 0,2,0 — der Template-<style> im Body
   gewann sonst und hinterließ einen Stroke-Halo-Mischmasch. */
.bsd-ho-step .bsd-ho-step-num,
.bsd-ho-step-num {
  display: inline-flex;
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 3.25rem; line-height: 1; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(200,162,74,0.55);
  margin-bottom: 0.75rem;
}
/* Ghost-Feinschliff: gold-warm, sichtbar, weiche Kanten */
.hero-ghost {
  font-size: clamp(8rem, 16vw, 16rem);
  letter-spacing: -0.02em;
  color: rgba(242,244,248,0.012);
  -webkit-text-stroke: 1.25px rgba(226,190,108,0.09);
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 22%, #000 78%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 2%, #000 22%, #000 78%, transparent 98%);
}

/* ── G) Komponenten-Konsolidierung ── */
/* Eine Gold-CTA-Identität: v1-Flat-Chips erben das Metall-Rezept */
.tpl-card-cta-btn, body .bsd-sticky-link--primary,
body .bsd-exit-popup-btn, body .quiz-cta {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, #B08C32 100%) !important;
  color: #0B101C !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.40), 0 10px 24px -6px rgba(200,162,74,0.45),
              inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 6px rgba(110,80,20,0.45);
  transition: transform var(--t-micro) var(--e-out), filter var(--t-micro) ease;
}
.tpl-card-cta-btn:hover, body .bsd-sticky-link--primary:hover,
body .bsd-exit-popup-btn:hover, body .quiz-cta:hover {
  filter: var(--hover-gold);
  transform: var(--hover-lift);
}
/* Formular: .f-select war WEISS — ins Dark-Glas holen; Radius-Token */
.f-input, .f-select { border-radius: var(--r-field) !important; font-size: 1rem !important; }
.f-select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23A6B2C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center,
              rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: var(--d-text) !important;
}
/* FIX: Native <option>s erbten helle Text-Farbe vom Parent, Browser rendert
   sie aber auf weißem Default-BG -> unsichtbar. Dunkler BG + heller Text. */
.f-select option,
.f-select optgroup {
  background-color: #0D2137 !important;
  color: #FFFFFF !important;
}
.f-select option:checked,
.f-select option:hover {
  background-color: #C8A24A !important;
  color: #0D2137 !important;
}
/* Focus-Gold-Kante reparieren (stand vor der 0.22-Border-Regel) */
.f-input:focus, .f-select:focus {
  border-color: rgba(200,162,74,0.55) !important;
  box-shadow: 0 0 0 3px rgba(200,162,74,0.14), 0 0 24px -6px rgba(200,162,74,0.25) !important;
}
/* Universeller Focus + Active (schließt alle State-Lücken) */
:where(a, button, summary, input, select, textarea, [role="tab"]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn-outline-w:active, .btn-navy:active, .btn-outline-navy:active,
.hsv3-dot:active, .dt-dev:active { transform: var(--active-press); }
/* Karten-Stiefkinder ins M2-Material (ben-card war v1-hell-Look) */
.ben-card {
  background: var(--glass-grain) repeat 0 0 / 180px 180px, var(--mat-reg-bg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: var(--mat-reg-blur);
  -webkit-backdrop-filter: var(--mat-reg-blur);
  box-shadow: var(--shadow-reg) !important;
  position: relative;
}
.ben-card:hover { transform: translateY(-5px); border-color: rgba(200,162,74,0.45) !important; }
/* Ein Karten-Radius */
.svc-card, .p-card, .ben-card { border-radius: var(--r-card) !important; }
/* Header-Hygiene: unsichtbares Blur-Band hinter der Pill abschalten */
#hdr.scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Footer-Vertrauensdaten lesbar */
footer [class*="text-white/35"], footer [class*="text-white/40"],
footer [class*="text-white/5"] { color: var(--d-muted) !important; }

/* ════════════════════════════════════════════════════════════
   EDITORIAL-LAYER — Text-Inszenierung (Runde 3)
   Kein Wort geändert: nur Auszeichnung, Marker, Bühnen.
════════════════════════════════════════════════════════════ */

/* ── P1: OL-Reparatur — Gold-Ziffern (Tailwind-Preflight nullt list-style!) ── */
.article-body ol {
  list-style: none; counter-reset: bd-step;
  margin: 0 0 2rem; padding: 0;
}
.article-body ol > li {
  counter-increment: bd-step;
  position: relative; padding: 0.625rem 0 0.625rem 3rem;
  font-size: 1.0625rem; line-height: 1.7; color: var(--d-muted);
  border-bottom: 1px solid var(--d-line);
}
.article-body ol > li:last-child { border-bottom: none; }
.article-body ol > li::before {
  content: counter(bd-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.7rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--gold);
  border: 1px solid rgba(200,162,74,0.35); border-radius: 9999px;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ── P2: Strong 2.0 — weiß + Gold-Hairline als Scan-Anker ── */
body .article-body p strong, body .article-body li strong,
body .bsd-phase-desc strong, body .bsd-profile-row p strong {
  color: var(--d-text) !important;
  text-decoration: underline;
  text-decoration-color: rgba(200,162,74,0.40);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── P3: Gold-Textmarker (für JS-Auto-Highlight) ── */
mark.bd-hl {
  background: linear-gradient(180deg, transparent 58%, rgba(200,162,74,0.26) 58%);
  color: var(--d-text);
  padding: 0 0.1em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark.bd-hl--num {
  background: none; color: var(--gold-hi);
  font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* ── P4: Stat-Band — Zahlen verlassen den Fließtext ── */
.bd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--d-line);
  border: 1px solid var(--d-line); border-radius: 14px;
  overflow: hidden; margin: 2rem 0 2.5rem;
}
.bd-stat { background: var(--glass-bg); padding: 1.5rem 1.375rem; }
.bd-stat-num {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 2.25rem; line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bd-stat-txt { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--d-muted); line-height: 1.5; }

/* ── P5: Distanz-Tafel — Punktlinien-Leader (Stadt-Seiten) ── */
.bd-dist li {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.4375rem 0;
}
.bd-dist .dist-ort { color: var(--d-text); font-weight: 500; }
.bd-dist li::after {
  content: ''; order: 2; flex: 1; min-width: 1.5rem;
  border-bottom: 1px dotted rgba(200,162,74,0.35);
  transform: translateY(-3px);
}
.bd-dist .dist-zeit {
  order: 3; color: var(--gold-hi); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 0.875rem;
}

/* ── P6: Gold-Checkmarks für Leistungszusagen ── */
.p-features li { position: relative; padding-left: 1.75rem; }
.p-features li::before {
  content: ''; position: absolute; left: 0; top: 0.95rem;
  width: 15px; height: 15px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── P7: TLDR 2.0 — Dark-Glas-Monolith mit Gold-Rail ── */
body .article-tldr {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-bd) !important; border-left: none !important;
  border-radius: 14px;
  position: relative; overflow: hidden;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 1.625rem 1.875rem 1.625rem 2.125rem;
}
body .article-tldr::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  box-shadow: 0 0 18px rgba(200,162,74,0.45);
}
body .article-tldr p { font-size: 1.0625rem; color: var(--d-text) !important; }

/* ── P8: Lead-Absatz spricht lauter ── */
.article-body > p:first-of-type {
  font-size: 1.1875rem; line-height: 1.75; color: var(--d-text);
}

/* ── P9: Tabellen-Veredelung ── */
body .article-table tbody tr td { transition: background 0.15s ease; }
body .article-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
body .article-table tbody tr:hover td { background: rgba(200,162,74,0.06); }
body .article-table td:first-child { color: var(--d-text) !important; font-weight: 500; }

/* ── P10: Zitat-System — Blockquote + Pull-Quote ── */
.article-body blockquote, .bd-pullquote {
  position: relative; margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.75rem;
  border-left: 2px solid rgba(200,162,74,0.5);
  font-size: 1.1875rem; line-height: 1.65;
  color: var(--d-text);
}
.bd-pullquote::before {
  content: '„'; position: absolute; left: -0.18em; top: -0.55em;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: 4.5rem; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.25px rgba(200,162,74,0.45);
  pointer-events: none;
}
.bd-pullquote cite {
  display: block; margin-top: 0.875rem; font-style: normal;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}

/* ── P11: „Auf dieser Seite" — TOC (JS-generiert) ── */
.bd-toc {
  margin: 0 0 3rem; padding: 1.375rem 1.625rem;
  border: 1px solid var(--d-line); border-radius: 14px;
  background: var(--d-soft);
}
.bd-toc-label {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.875rem; display: block;
}
.bd-toc a {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.3125rem 0; font-size: 0.9375rem;
  color: var(--d-muted) !important; text-decoration: none !important;
  font-weight: 400 !important; transition: color 0.15s ease;
}
.bd-toc a::before { content: '—'; color: rgba(200,162,74,0.5); flex-shrink: 0; }
.bd-toc a:hover, .bd-toc a.is-active { color: var(--gold-hi) !important; }

/* ── P12 GEOPFERT (Brand-Audit): Metrics bleiben weiß — „Goldguss"
   gehört exklusiv dem Beweis (5,0-Score). ── */
.bsd-rev-score-num {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   RUNDE 3 — Subhero-Baukasten · Mikro-Details · Mobile-Bühne
════════════════════════════════════════════════════════════ */

/* ── SUBHERO v3: alle Unterseiten-Heros leben jetzt ── */
.subhero .bsd-aurora span { opacity: 0.75; }
body .bsd-timeline-line { background: var(--d-line) !important; }
/* 20 Cream-Hairlines der Stadt-Seiten in einem Schlag */
[style*="border:1px solid #E4DDD4"] { border-color: var(--d-line-2) !important; }

/* ── MIKRO: unsichtbare Bugs ── */
:root { color-scheme: dark; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--d-soft); }
::-webkit-scrollbar-thumb {
  background: rgba(200,162,74,0.45);
  border-radius: 8px;
  border: 2px solid var(--d-soft);
}
::-webkit-scrollbar-thumb:hover { background: rgba(200,162,74,0.7); }
input.f-input:-webkit-autofill,
input.f-input:-webkit-autofill:hover,
input.f-input:-webkit-autofill:focus,
textarea.f-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #14171D inset !important;
  -webkit-text-fill-color: var(--d-text) !important;
  caret-color: var(--gold);
  border-color: rgba(200,162,74,0.35) !important;
  transition: background-color 999999s ease-out;
}
.f-input, .f-select { caret-color: var(--gold); }
html { -webkit-tap-highlight-color: transparent; }

/* ── MIKRO: Button-Ehrlichkeit (Disabled + Spinner) ── */
.btn-gold:disabled {
  cursor: progress;
  filter: saturate(0.7) brightness(0.92);
  transform: none !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-gold:disabled::after { display: none; }
.btn-gold.is-loading::before {
  content: '';
  width: 14px; height: 14px;
  margin-right: 0.5rem;
  border-radius: 50%;
  border: 2px solid rgba(11,16,28,0.25);
  border-top-color: #0B101C;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── MIKRO: Formular-Bogen (Fehler → Erfolg → Upsell) ── */
.form-error {
  margin-top: 0.75rem; text-align: center;
  font: 500 0.8125rem/1.5 'Inter', sans-serif;
  color: #F2B8BD;
  background: rgba(232,74,95,0.10);
  border: 1px solid rgba(232,74,95,0.25);
  border-radius: var(--r-chip);
  padding: 0.625rem 0.875rem;
}
.form-error.is-in { animation: err-shake 0.4s var(--e-out); }
@keyframes err-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
#form-success:not(.hidden) { animation: success-in 0.6s var(--e-spring) both; }
@keyframes success-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
}
.f-input:user-invalid {
  border-color: rgba(232,74,95,0.55) !important;
  box-shadow: 0 0 0 3px rgba(232,74,95,0.10), inset 0 2px 6px rgba(0,0,0,0.18) !important;
}
.f-input:user-invalid:focus { border-color: rgba(200,162,74,0.55) !important; }
#contact-form label { transition: color var(--t-micro) ease; }
#contact-form div:focus-within > label { color: var(--gold-hi) !important; }
.f-input::placeholder { transition: opacity var(--t-small) ease; }
.f-input:focus::placeholder { opacity: 0.35; }
#contact-form input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px !important; height: 18px !important;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: var(--mat-thin-bg);
  display: grid; place-content: center;
  transition: border-color var(--t-micro) ease, background var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
#contact-form input[type="checkbox"]::before {
  content: '';
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform var(--t-micro) var(--e-spring);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #0B101C;
}
#contact-form input[type="checkbox"]:hover { border-color: rgba(200,162,74,0.5); }
#contact-form input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 0 12px -2px rgba(200,162,74,0.5);
}
#contact-form input[type="checkbox"]:checked::before { transform: scale(1); }

/* ── MIKRO: eine Hover-Grammatik für alle Links ── */
footer ul a, footer .hr-gold ~ div a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--t-small) var(--e-out), color 0.2s ease;
}
footer ul a:hover, footer .hr-gold ~ div a:hover { background-size: 100% 1px; }
body .bd-link {
  transition: color 0.15s, text-decoration-color 0.15s,
              text-underline-offset var(--t-micro) var(--e-out);
}
body .bd-link:hover { text-underline-offset: 5px; }
a[target="_blank"] .tpl-card-arrow { transform: rotate(-45deg); }
.tpl-card-cta { text-decoration: none; padding: 0.75rem 0; margin: -0.75rem 0; }
.tpl-card-cta:hover .tpl-card-arrow { transform: translateX(4px); }
a[target="_blank"].tpl-card-cta:hover .tpl-card-arrow { transform: rotate(-45deg) translateX(3px); }

/* ── MIKRO: Ankunfts-Momente & Charakter ── */
:where([id]) { scroll-margin-top: var(--anchor-off); }
section[id]:target { animation: sec-hello 1.4s var(--e-out) 0.4s 1 both; }
@keyframes sec-hello {
  from { background-color: rgba(200,162,74,0.05); }
  to   { background-color: transparent; }
}
a[href^="tel:"] svg { transform-origin: 50% 90%; }
a[href^="tel:"]:hover svg { animation: tel-ring 0.5s var(--e-out) 1; }
@keyframes tel-ring {
  20% { transform: rotate(-14deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
}
#hdr a[aria-label="Bergstraße Digital"] img { transition: filter var(--t-small) ease; }
#hdr a[aria-label="Bergstraße Digital"]:hover img {
  filter: drop-shadow(0 0 14px rgba(200,162,74,0.35)) brightness(1.07);
}
.tpl-card-cta-btn:active, body .bsd-sticky-link:active,
body .bsd-exit-popup-btn:active, body .quiz-cta:active,
.hsv3-dot:active, .tpl-nav-btn:active { transform: var(--active-press); }
summary { cursor: pointer; }
.btn-gold::selection, .btn-gold *::selection,
.tpl-card-cta-btn::selection { background: #0B101C; color: var(--gold-hi); }

/* ── Mobile-Menü: Stagger + Origin am Burger ── */
#mob-menu { transform-origin: calc(100% - 28px) 0; transition: opacity 0.25s ease, transform 0.3s var(--e-out); }
#mob-menu[aria-hidden="true"] { opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.98); }
#mob-menu .mob-l { transition: opacity 0.3s var(--e-out), transform 0.3s var(--e-out), color 0.2s ease; }
#mob-menu[aria-hidden="true"] .mob-l { opacity: 0; transform: translateY(-6px); transition: none; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(1) { transition-delay: 40ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(2) { transition-delay: 70ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(3) { transition-delay: 100ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(4) { transition-delay: 130ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(5) { transition-delay: 160ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(6) { transition-delay: 190ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(7) { transition-delay: 220ms; }
#mob-menu[aria-hidden="false"] .mob-l:nth-child(8) { transition-delay: 250ms; }
.mob-l { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.mob-l:active { color: var(--gold-hi); }

/* ── MOBILE-BÜHNE ── */
/* Safe-Areas (iPhone Notch / Home-Indicator) */
body .bsd-sticky-bar { padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px)); }
#hdr { padding-left: calc(12px + env(safe-area-inset-left, 0px));
       padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
#mob-menu nav, body .bsd-quiz-inner { overscroll-behavior: contain; }

@media (max-width: 767px) {
  /* Hero-Falz: 3 Button-Zeilen → 1 Zeile + Textlink */
  .hero-stagger .flex.flex-wrap.gap-3 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
  }
  .hero-stagger .btn-gold { width: 100%; }
  .hero-stagger .btn-outline-w { padding: 0.875rem 1.125rem; }
  .hero-stagger .hero-textlink {
    grid-column: 1 / -1;
    justify-content: center;
    padding-block: 0.75rem;
  }
  /* Metrics: ruhiges 2×2-Grid */
  .metrics-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
  }
  /* Phone-Mockup dominiert als Beweis Nr. 1 */
  .hero-showcase-mobile { margin-top: 2rem; }
  .hsm-phone { width: min(62vw, 250px); }
  /* Word-Stagger: Blur-Kosten auf Low-End-Androids halbieren */
  .ws-w { filter: blur(3px); transform: translateY(0.35em); }
  /* Sektions-Rhythmus mobil kompakter */
  section[class*="py-16"] { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (max-width: 1023px) {
  /* Theater: Mobile ist der Default — Toggle weg, Phone-Frame her */
  .dt-toolbar { display: none; }
  .dt-device.is-mobile { max-width: min(46vh * 0.5294 + 18px, 240px); }
  .is-mobile .dt-screen { max-height: 46vh; }
  .dt-stage { top: calc(var(--hdr-h) + 10px); }
  /* Featured-Pricing zuerst */
  .p-card--featured { order: -1; }
  /* Mobile-Hero: steady screenshot, oben verankert */
  .hsm-screen img { animation: none; opacity: 0; transition: opacity 0.5s ease;
                    height: 100%; object-fit: cover; object-position: top center; }
  .hsm-screen img:first-child, .hsm-screen img.is-on { opacity: 1; }
}

/* Theater-Fortschritts-Dots (nur Mobile sichtbar) */
.dt-dots { display: none; }
@media (max-width: 1023px) {
  .dt-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .dt-dots span { width: 6px; height: 6px; border-radius: 50%;
                  background: rgba(255,255,255,0.18); transition: background 0.2s, width 0.2s; }
  .dt-dots span.is-on { background: var(--gold); width: 18px; border-radius: 3px; }
}

@media (hover: none) {
  /* Reviews: Scroll-Snap statt Freiflug */
  .bsd-rev-marquee {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .bsd-rev-card { flex-basis: min(85vw, 340px); scroll-snap-align: start; }
  /* Press-Feedback ersetzt Hover */
  .btn-gold:active, body .bsd-sticky-link--primary:active { transform: scale(0.97); }
  .dt-item:active { opacity: 0.85; }
  /* Tap-Targets */
  .hsv3-dot { padding: 0.625rem 1rem; }
  /* 12px Polsterung bei 20px Zeilenhöhe ergibt 44px. Das frühere
     margin-block: -0.25rem fraß den 8px-Zeilenabstand von .space-y-2
     vollständig auf — 36px hoch und 0px Abstand zum Nachbarn. */
  footer ul a { display: inline-block; padding-block: 0.75rem; }
  .bsd-rating-badge { min-height: 44px; }
  body .bsd-sticky-close, body .bsd-exit-popup-close, body .bsd-quiz-close {
    width: 44px !important; height: 44px !important;
  }
}

/* ── PERFORMANCE-POLISH (identischer Look, halbe Kosten) ── */
/* Critical-Inline-Fallback zurücknehmen, sobald style.css da ist:
   das Menü animiert via opacity/transform, nicht via display */
#mob-menu[aria-hidden="true"] { display: block; }
/* Touch: ALLE Glas-Karten entglasen (Lücke der ersten Liste) */
@media (hover: none) {
  .tpl-card--cta, .ben-card, .wissen-card, .bsd-rev-score,
  body .gloss-card, body .bsd-hub-card, body .weiterlesen-card,
  body .wo-wir-arbeiten-card, body .bsd-profile-row {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--glass-grain) repeat 0 0 / 180px 180px,
                linear-gradient(var(--lit), rgba(30,38,54,0.92), rgba(16,21,32,0.94)) !important;
  }
}
/* Glas-in-Glas eliminieren (Backdrop ist dort schon opak-geblurrt) */
body .bsd-quiz-inner .quiz-option,
body .bsd-exit-popup-inner .btn-outline-w {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.06) !important;
}
/* Lange Startseite: Below-fold-Sektionen erst rendern, wenn nötig.
   #kontakt bewusst NICHT: Anker-Ziel des Header-CTAs (Sprung-Fehlposition).
   #bewertungen entfernt: blockierte Layout-Berechnung der Marquee-Cards auf
   Mobile, IntersectionObserver fand kein height/intersection -> opacity:0 stuck. */
#leistungsumfang, footer.bg-bd-navy {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Scroll-Progress: composite-only */
#scroll-progress { width: 100%; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }
/* amb-off pausiert auch die Pan-Poster (liefen offscreen weiter) */
.amb-off .hs-shot, .amb-off .dt-poster,
.amb-off .hs-phone-screen img, .amb-off .hsm-screen img {
  animation-play-state: paused !important;
}
/* Aurora: blur(70px) auf weichen Gradients war doppelt gemoppelt */
.bsd-aurora span { filter: blur(40px); }
/* Hover-Verdichtung ohne Blur-Radius-Wechsel (Re-Filter pro Hover gespart) */
.svc-card:hover, .p-card:hover, .bsd-ho-step:hover, .wissen-card:hover {
  backdrop-filter: var(--mat-reg-blur);
  -webkit-backdrop-filter: var(--mat-reg-blur);
}
/* Nur die aktiv pannenden Poster pinnen */
.hs-shot.is-on, .dt-poster.is-on { will-change: transform; }
/* Mobile-LCP: Hero-Choreografie startet früher (gleiche Kurve) */
@media (max-width: 1023px) {
  .ws-w { animation-delay: calc(var(--wi, 0) * 60ms + 0.05s); }
  .au-shimmer.ws-w { animation-delay: calc(var(--wi, 0) * 60ms + 0.05s), 1.2s; }
  .hero-stagger > *:nth-child(3) { animation-delay: 0.35s; }
  .hero-stagger > *:nth-child(4) { animation-delay: 0.48s; }
}

/* Sticky-Bar mobil: schwebendes Glas-Dock in der Daumenzone */
@media (max-width: 640px) {
  body .bsd-sticky-bar {
    left: 12px; right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    border: 1px solid var(--glass-bd) !important;
    border-radius: 22px;
    background:
      radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,0.07) 0%, transparent 50%),
      linear-gradient(180deg, rgba(18,24,38,0.88), rgba(9,12,20,0.86)) !important;
    backdrop-filter: var(--mat-thick-blur);
    -webkit-backdrop-filter: var(--mat-thick-blur);
    box-shadow: var(--shadow-thick) !important;
  }
  body .bsd-sticky-link { min-height: 44px; flex: 1; justify-content: center; }
}
/* Telefon im Sticky-Dock: nur mobil (Desktop hat ihn im Header) */
body .bsd-sticky-link--tel { display: none; }
@media (max-width: 640px) {
  body .bsd-sticky-link--tel { display: inline-flex; }
}

/* ════════════════════════════════════════════════════════════
   RUNDE 4 — Schlusskritik: Konsequenz, Subtraktion, Robustheit
════════════════════════════════════════════════════════════ */

/* ── No-JS-Sicherheit: Verstecken nur, wenn JS da ist ── */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
html:not(.js) .dt-item { opacity: 1; }
html:not(.js) .hsm-screen img:first-child { opacity: 1; }

/* ── Punch 2: FAQ-Hairlines ── */
body .faq-item { border-color: var(--d-line-2) !important; }

/* ── Punch 4: Kontakt-Formular-Karte = M2-Material (Conversion-Herzstück) ── */
#kontakt-form > div {
  background: var(--glass-grain) repeat 0 0 / 180px 180px, var(--mat-reg-bg) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: var(--mat-reg-blur);
  -webkit-backdrop-filter: var(--mat-reg-blur);
  box-shadow: var(--shadow-reg) !important;
  position: relative;
}
@media (hover: none) {
  #kontakt-form > div {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--glass-grain) repeat 0 0 / 180px 180px,
                linear-gradient(var(--lit), rgba(30,38,54,0.92), rgba(16,21,32,0.94)) !important;
  }
}

/* ── Brand: Geräte sind Bühne, nicht Schmuck — Gold gehört dem Scan ── */
.hs-laptop, .hs-phone, .hsm-phone, .dt-device {
  border-color: var(--d-line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* ── Brand: Ambient ausdünnen — eine Lichtquelle pro Sektion ── */
#vorlagen { background-image:
  radial-gradient(620px 460px at 8% 12%, rgba(125,196,232,0.13), transparent 70%) !important; }
#bewertungen { background-image:
  radial-gradient(640px 480px at 80% 20%, rgba(125,196,232,0.11), transparent 70%) !important; }
#leistungen { background-image:
  radial-gradient(560px 420px at 90% 8%, rgba(200,162,74,0.13), transparent 70%) !important; }
#leistungsumfang { background-image:
  radial-gradient(720px 540px at 50% 28%, rgba(200,162,74,0.14), transparent 70%) !important; }
#leistungsumfang::before { display: none; }

/* ── Punch 8: Theater-Scroll-Budget ── */
.dt-item { min-height: clamp(300px, 36vh, 420px); }
.dt-item--cta { min-height: clamp(240px, 28vh, 340px); }
@media (max-width: 1023px) {
  .dt-item { min-height: clamp(260px, 34vh, 360px); }
  .is-mobile .dt-screen { max-height: 40vh; }
}

/* ── Edge: Print — Dark wird auf Papier hell ── */
@media print {
  :root { color-scheme: light; }
  html, body, body::before, section, [class*="bg-"] {
    background: #fff !important; color: #111 !important;
  }
  body * { color: #111 !important; -webkit-text-fill-color: initial !important; }
  h1, h2, h3, address, a, strong { color: #000 !important; }
  #hdr, #scroll-progress, .bsd-sticky-bar, .bsd-aurora, .hero-ghost, .noise::after,
  .bsd-exit-popup, .bsd-quiz-modal, .bd-ridge, .hsv3-switch, .dt-toolbar, .dt-dots,
  .hero-showcase, .hero-showcase-mobile, #mob-menu, .bsd-scan, .bd-toc { display: none !important; }
  .p-card, .svc-card, body .bsd-faq-item, body .article-tldr, #kontakt-form > div {
    background: #fff !important; border: 1px solid #999 !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    break-inside: avoid;
  }
  .reveal, .ws-w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .grid, .dt-wrap { display: block !important; }
  .dt-stage { position: static !important; }
}

/* ── Edge: deutsche Wortmonster ── */
body { overflow-wrap: break-word; }
.metrics-row > div, .p-features li, body .quiz-option,
.tpl-card-desc, .bsd-ho-step-desc, .article-body p, .mob-l {
  hyphens: auto; -webkit-hyphens: auto;
}

/* ── Edge: 320px / Fold ── */
@media (max-width: 359px) {
  .hero-inner h1 { font-size: 2.1rem !important; }
  .hero-stagger .flex.flex-wrap.gap-3 { grid-template-columns: 1fr; }
  .metrics-row .font-body { hyphens: auto; }
}
@media (max-width: 299px) {
  .metrics-row { grid-template-columns: 1fr; }
}

/* ── Edge: Text-only-Zoom — Pille atmet ── */
.hdr-pill img { height: clamp(40px, 3.4em, 54px) !important; }

/* ── Browser-Compat: Overlay-Blur für iOS ≤ 17 ── */
body .bsd-exit-popup, body .bsd-quiz-modal {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* iOS ≤ 15: hidden-Fallback vor clip */
#leistungsumfang { overflow: hidden; overflow: clip; }

/* ════════════════════════════════════════════════════════════
   A11Y-LAYER — WCAG 2.2 AA (Runde 5)
════════════════════════════════════════════════════════════ */

/* Skip-Link (2.4.1) */
.skip-link {
  position: fixed; top: 14px; left: 50%;
  transform: translate(-50%, -200%);
  /* 07.08.2026: war 100 — genau der Wert der festen Kopfleiste (bsd-nav.css:22).
     Bei gleichem z-index gewinnt das später gezeichnete Element, also lag der
     Sprunglink hinter der durchscheinenden Leiste: sichtbar war nur ein
     goldener Rand, der Text unlesbar. Damit war „Zum Inhalt springen"
     faktisch unbrauchbar (WCAG 2.4.1) und der Fokus verdeckt (2.4.11).
     200 liegt über Kopfleiste (100), Mobilmenü (101) und Burger (102). */
  z-index: 200;
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  background: var(--gold); color: #0B101C;
  font: 700 0.875rem 'Plus Jakarta Sans', sans-serif;
  transition: transform 0.25s var(--e-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* Geister-Fokus eliminieren: visibility nimmt Nachfahren aus der Tab-Folge */
#mob-menu[aria-hidden="true"] {
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.3s var(--e-out), visibility 0s 0.3s;
}
#mob-menu[aria-hidden="false"] { visibility: visible; }
body .bsd-sticky-bar[aria-hidden="true"],
body .bsd-exit-popup[aria-hidden="true"],
body .bsd-quiz-modal[aria-hidden="true"] { visibility: hidden; }

/* Steady screenshots: kein Pan mehr (Frames blieben sonst leer/schwarz). */
.hs-shot.is-on, .dt-poster.is-on { animation: none; transform: none; }

/* dt-Spielplan: Kontrast inaktiver Karten (1.4.3) + Fokus hebt auf */
.dt-item { opacity: 1; }
.dt-item:not(.is-active) { opacity: 0.75; }
.dt-item:focus-within { opacity: 1; border-left-color: var(--gold); }

/* Blasse Kleinschrift anheben (1.4.3) */
.hsv3-dot, .dt-dev { color: rgba(255,255,255,0.62); }
body .quiz-option-sub { color: var(--d-muted) !important; }
.f-input::placeholder { color: rgba(173,180,189,0.8) !important; }

/* Screenreader-only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Motion-Restlücken (Sammel-Guard) */
@media (prefers-reduced-motion: reduce) {
  .form-error.is-in, a[href^="tel:"]:hover svg, section[id]:target { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Browser-Compat: Kill-Switch für Mask-Rims (Degrade statt Schleier) ── */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .svc-card::before, .p-card::before, .tpl-card::before,
  .bsd-ho-step::before, .wissen-card::before, .bsd-rev-card::before,
  body .bsd-faq-item::before, .hdr-pill::before,
  .ben-card::before, body .gloss-card::before, body .bsd-hub-card::before { content: none; }
  .svc-card, .p-card, .tpl-card, .bsd-ho-step, .wissen-card,
  .bsd-rev-card, body .bsd-faq-item, .hdr-pill {
    border-color: rgba(255,255,255,0.12) !important;
  }
  .p-card--featured { border-color: rgba(200,162,74,0.5) !important; }
}

/* Motion-QA C10: Touch hat animation:none auf der Aurora — Layer freigeben */
@media (hover: none) {
  .bsd-aurora span { will-change: auto; }
}

/* Modals: visibility erst NACH dem Opacity-Fade wegnehmen (sanftes Schliessen) */
body .bsd-exit-popup[aria-hidden="true"],
body .bsd-quiz-modal[aria-hidden="true"] {
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* R6: Weisse Template-Restkarten (Stadt-Seiten: Kurzinfo-Karten, Auch-relevant)
   ins M2-Material — bg-white ist global transparent, Karten waren unsichtbar */
.bg-white.rounded-xl, .bg-white.rounded-2xl {
  background: var(--glass-grain) repeat 0 0/180px 180px, var(--mat-reg-bg) !important;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: var(--shadow-reg);
}
/* B13: Marquee laeuft auf Touch nie — Pause-Button dort sinnlos */
@media (hover: none) {
  body .bsd-rev-pause { display: none; }
}
/* ── Marken-Loader „Suchlauf“: der Goldscan in Warte-Intensitaet ──
   Gleiches Licht-Vokabular, gedimmt + langsamer. JS setzt is-loading
   nur, wenn das Poster >150ms braucht (kein Cache-Aufblitzen). */
.hs-screen.is-loading .bsd-scan,
.dt-screen.is-loading .bsd-scan {
  animation: bsd-scan-search 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes bsd-scan-search {
  0%   { top: -14%; opacity: 0; }
  12%  { opacity: 0.35; }
  88%  { opacity: 0.35; }
  100% { top: 114%; opacity: 0; }
}
/* Suchlauf-Loader entfernt: hielt Frames bei Edge-Cases dauerhaft leer.
   Steady screenshots brauchen keinen Loader. */

/* ── MOBILE-LAYOUT-FIXES (Carousel + Stadt-Heroes + kleine Phones) ── */
/* Carousel-Pfeile auf Touch weg — Wischen + Card-Peek genügt */
@media (hover: none) {
  .tpl-carousel-head { display: none; }
}
/* Stadt-/Subpage-Heroes: CTA-Falz wie auf der Startseite */
@media (max-width: 767px) {
  .subhero .flex.flex-wrap.gap-3 { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }
  .subhero .flex.flex-wrap.gap-3 .btn-gold,
  .subhero .flex.flex-wrap.gap-3 .btn-outline-w { width: 100%; justify-content: center; }
}
/* Ablauf-Hero-Stats auf kleinen Phones nicht quetschen */
@media (max-width: 480px) {
  .ablauf-hero-stats .text-2xl, .bsd-time-num { font-size: 1.3rem; }
}
/* Headline-Sicherheitsnetz bei sehr schmalen Geräten */
@media (max-width: 339px) {
  h1.ws-split { font-size: 2.2rem !important; }
}

/* Helle Creme-Boxen (#F5F2EC) ins Dark-Material holen — Catch-All
   gegen unsichtbaren hellen Text/Button auf hellem Grund. */
[style*="background:#F5F2EC"], [style*="background: #F5F2EC"] {
  background: var(--glass-grain) repeat 0 0/180px 180px, var(--mat-reg-bg) !important;
  border-color: var(--d-line-2) !important;
}

/* ── SPEC-KONFORMITAET (Runde 6): Gewichte + Token-Heilung ── */
div[style*="font-weight:300"], address[style*="font-weight:300"],
span[style*="font-weight:300"] { font-weight: 400 !important; }

/* ════════════════════════════════════════════════════════════
   FIX: Reviews-Marquee auf Mobile (robust, breakpoint-basiert)
   Problem: @media (hover: none) matched nicht auf iPad-Hybrid;
   Mask + Animation lassen Cards unsichtbar erscheinen.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .bsd-rev-marquee {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 0.5rem;
  }
  .bsd-rev-track {
    animation: none !important;
    transform: none !important;
    width: max-content;
    will-change: auto;
  }
  .bsd-rev-card {
    flex: 0 0 min(85vw, 340px);
    scroll-snap-align: start;
  }
  .bsd-rev-card[aria-hidden="true"] {
    display: none !important;
  }
  .bsd-rev-pause {
    display: none !important;
  }
  /* ROOT-CAUSE-FIX: .bsd-rev-marquee hat ".reveal d3" → opacity:0 initial.
     IntersectionObserver (threshold:0.18 + rootMargin:-10% bottom) triggert
     auf Mobile unzuverlässig, Cards bleiben unsichtbar. Auf Mobile keine
     fade-in-Animation nötig — Sichtbarkeit unconditional erzwingen. */
  .bsd-rev-marquee.reveal,
  .bsd-rev-marquee {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bsd-rev-card {
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Mobile-Hero-Showcase: Tablet + Phone + Switch-Buttons
   ════════════════════════════════════════════════════════════ */
.hero-showcase-mobile {
  display: block;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .hero-showcase-mobile { display: none; }
}
.hsm-stage {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.hsm-laptop {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #0d1419, #050810);
  border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(200,162,74,0.18);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hsm-browserbar {
  display: flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hsm-browserbar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.hsm-browserbar span:nth-child(1) { background: rgba(244,99,99,0.55); }
.hsm-browserbar span:nth-child(2) { background: rgba(243,201,67,0.55); }
.hsm-browserbar span:nth-child(3) { background: rgba(86,193,86,0.55); }
.hsm-screen {
  position: relative;
  width: 100%;
  height: calc(100% - 22px);
  overflow: hidden;
  background: #0a0f15;
}
.hsm-shot {
  position: absolute; inset: 0;
  width: 100%; height: auto;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hsm-shot.is-on { opacity: 1; }
.hsm-phone {
  position: absolute;
  right: -2px;
  bottom: -16px;
  width: 32%;
  max-width: 124px;
  aspect-ratio: 9 / 19;
  background: #0d1419;
  border: 2px solid #1a2030;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,162,74,0.12);
  z-index: 2;
}
.hsm-bar {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 4px;
  background: rgba(255,255,255,0.45);
  border-radius: 99px;
  z-index: 3;
}
.hsm-screen-phone {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0f15;
}
.hsm-screen-phone img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.35s ease;
}
.hsm-switch {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; justify-content: center;
  margin-top: 1.25rem;
}
.hsm-dot {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,162,74,0.22);
  border-radius: 9999px;
  padding: 0.55rem 1.05rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-height: 40px;
}
.hsm-dot.is-active {
  background: rgba(200,162,74,0.15);
  border-color: #C8A24A;
  color: #C8A24A;
}
.hsm-dot:active { transform: scale(0.97); }
.hero-showcase-mobile .hs-caption {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
}

/* Mobile-Hero: Verschlankte Metriken (4 → 2 sichtbar) */
@media (max-width: 1023px) {
  .metrics-row .metrics-hide-mobile { display: none !important; }
  .metrics-row .metrics-divider.metrics-hide-mobile { display: none !important; }
}

/* ── Barrierefreiheit: Trefferflächen vergrößern ──
   Gemessen am 06.08.2026: 47 interaktive Elemente unter 44 × 44 px.
   Betroffen sind kleine Punkte, Pfeile und Fußzeilen-Links. Die Fläche wird
   über ein unsichtbares ::after vergrößert — Aussehen, Abstände und Layout
   bleiben unverändert, nur der Finger trifft. */
.bd-hero-dot,
.bd-rev-dot,
.bd-hero-navbtn,
.bsd-quiz-close,
.bd-analyse-close,
.tpl-nav-btn {
  position: relative;
}
.bd-hero-dot::after,
.bd-rev-dot::after,
.bd-hero-navbtn::after,
.bd-analyse-close::after,
.tpl-nav-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
  /* rein zur Vergrößerung der Trefferfläche, nicht sichtbar */
}

/* Fußzeilen- und Rechtslinks: 44 px hohe Trefferfläche ohne Layoutsprung

   Sicht 29, 07.08.2026: Die Rechnung stimmte nicht. 0,375 rem sind 6 px je
   Seite; bei 20 px Zeilenhöhe ergibt das 32 px, nicht 44 — in der unteren
   Rechtsleiste sogar nur 28 px. Nachgemessen mit getBoundingClientRect bei
   390 px Breite.

   Der Kommentar an Zeile 2525 derselben Datei rechnet es richtig vor:
   „12 px Polsterung bei 20 px Zeilenhöhe ergibt 44 px" — also 0,75 rem.
   Es stand also seit jeher die richtige Zahl in dieser Datei, nur an der
   falschen Stelle.

   WCAG 2.5.8 verlangt 24 × 24 px und war schon vorher erfüllt. Verfehlt war
   die selbst gesetzte 44-px-Vorgabe — die Größe, ab der ein Daumen zuverlässig
   trifft. Die Fußzeile wird dadurch sichtbar höher; das ist der Preis. */
footer a,
.bd-link {
  display: inline-block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ── FAQ-Akkordeon (.faq-item/.faq-summary) ──────────────────────────────
   Stand bis 07.08.2026 nur in einem seiteneigenen <style> in page-faq.php.
   Andere Seiten benutzen dieselben Klassen und blieben dadurch völlig
   ungestylt: 24 px hohe Zeilen, 1 px Abstand, native ▶-Dreiecke. Hier
   global, damit jede Seite davon lebt. Farben über die Merkmale, keine festen Hexwerte. */
.faq-item { border-bottom: 1px solid var(--glass-bd); }
.faq-item:first-child { border-top: 1px solid var(--glass-bd); }
.faq-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0.5rem;
  margin-inline: -0.5rem;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--d-text);
  min-height: 48px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ''; }
.faq-summary:hover { background: var(--mat-thin-bg); }
.faq-body { color: var(--d-muted); }

/* ── Kompakter Stimmen-Block (bsd_render_stimmen) ────────────────────────
   Neu 07.08.2026 für Standort- und Leistungsseiten. Die volle
   Coverflow-Sektion lädt eigenes CSS und JS und wäre dort zu schwer.
   Farben ausschließlich über die Merkmale des Themes. */
.bsd-stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.bsd-stimme {
  margin: 0;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--mat-thin-bg);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--shadow-thin);
}
.bsd-stimme-sterne {
  display: block;
  color: var(--gold);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.bsd-stimme-text {
  margin: 0 0 1rem;
  color: var(--d-text);
  font-size: 0.9375rem;
  line-height: 1.65;
  font-weight: 300;
  quotes: '\201E' '\201C';
}
.bsd-stimme-text::before { content: open-quote; }
.bsd-stimme-text::after  { content: close-quote; }
.bsd-stimme-wer {
  color: var(--d-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (max-width: 640px) {
  .bsd-stimme { padding: 1.25rem; }
}