/* Objekt- & Reparaturservice Battermann — Design-System
   Schriften: Archivo Black / Montserrat (Überschriften), Plus Jakarta Sans (Fließtext)
   Layout: bewusst asymmetrisch, keine starren Raster. */

/* ---------- Automatisches Premium-Theme (Light/Dark) ----------
   Die "normalen" Seitenflächen (Papier/Nav/Formulare) folgen automatisch dem
   Farbschema des Betriebssystems — hell per Default, dunkel bei
   prefers-color-scheme:dark, kein manueller Schalter. Die bereits dunklen
   Akzent-Sektionen (Hero, Footer, "Drei Dinge", Leistungen-Fotokacheln,
   CTA-Bänder — alles über --surface-dark/--surface-deep/--on-dark) bleiben in
   BEIDEN Modi unverändert dunkel, das sind bewusst gesetzte Foto-/Premium-
   Flächen, kein Seitenhintergrund. --glass-bg/--glass-border sind die
   theme-abhängigen Frosted-Glass-Werte für Panels, die auf der normalen
   Seitenfläche sitzen (Kontaktformular, Einsatzgebiet-Popover, Kartenrahmen);
   Glas-Flächen auf den immer-dunklen Akzent-Sektionen (Intro-Glaswand,
   "Drei Dinge"-Karten, Leistungs-Kachel-Textfenster) bleiben bewusst beim
   dunklen Weißton-auf-Dunkel-Look, unabhängig vom Seitenmodus. */
:root{
  /* Global per Sanity (themeSettings) steuerbare Basis-Töne — sanity-content.js
     überschreibt diese sechs Variablen live per style.setProperty() auf
     document.documentElement, sobald Lars im Studio eigene Farben pflegt. Alle
     abgeleiteten Tokens darunter referenzieren ausschließlich diese sechs
     Variablen, damit eine Änderung sich automatisch durch die ganze Website zieht.
     Ohne gepflegten Sanity-Wert gelten die hier hinterlegten Fallback-Töne. */
  --primary-gold:#C2953F;
  --brand-green:#25D366;
  --bg-dark:#0f0f0f;
  --bg-light:#fcfbfa; /* Alabaster, bewusst kein reines Weiß */
  --text-dark:#F4F1E9; /* helle Schrift auf dunklem Grund */
  --text-light:#191614; /* dunkle Schrift auf hellem Grund */
  /* Glas-/Formen-Regler (themeSettings.glassBlur/borderRadius): keine
     einzelne Fallback-Zahl hier, jede Komponente behält ihren fein
     abgestimmten Einzelwert als var()-Fallback (siehe jeweilige Regel) —
     erst ein gepflegter Sanity-Wert vereinheitlicht alle auf denselben Ton.
     glassOpacity wird bewusst NICHT hier zentral gesetzt, sondern direkt an
     den drei großen dunklen Glas-Flächen (Mega-Menü, Hamburger-Menü,
     Danke-Popup) verankert — aus demselben Grund. */

  --ink:var(--text-light);
  --ink-soft:#5B564C;
  --paper:var(--bg-light);
  --paper-dim:#f5f4f0; /* mattes Sand-Grau */
  --surface-dark:#1A1E24;
  --surface-dark-2:#232933;
  --surface-deep:var(--bg-dark); /* eigener, noch tieferer Ton für die Glasmorphismus-Flächen (Intro, Premium-Karten) */
  --on-dark:var(--text-dark);
  --on-dark-soft:#AFB3B8;
  --accent:var(--primary-gold);
  --accent-hover:#A67B2E; /* Fallback für Browser ohne color-mix()-Unterstützung */
  --accent-hover:color-mix(in srgb, var(--primary-gold) 80%, black);
  --accent-ink:var(--text-light);
  --link:#745925; /* WCAG AA-konformer Textton der Akzentfarbe auf hellem Grund (6:1) */
  --line:#E4E0D4;
  --line-dark:#333A45;
  --shadow: 0 20px 50px -28px rgba(25,22,20,0.14);
  --header-bg: rgba(252,251,250,0.85);
  --field-bg: #ffffff;
  --chip-dark: #191614; /* feste "schwarze" Fläche für Buttons/Chips, unabhängig vom Farbschema */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(25,22,20,0.08);
  /* themeSettings.borderRadius (px) steuert beide zusammen — waren schon
     immer identisch, jetzt zusätzlich per Sanity global umstellbar. */
  --radius: var(--border-radius, 2px);
  --radius-sm: var(--border-radius, 2px);
  --wrap: 1180px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 28px;
  --space-4: 48px;
  --space-5: 88px;
  --space-6: 140px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:var(--text-dark);
    --ink-soft:#C7C0AF;
    --paper:var(--bg-dark);
    --paper-dim:#161616;
    --link:#DDB268;
    --line:#39352B;
    --shadow: 0 20px 50px -28px rgba(0,0,0,0.6);
    --header-bg: rgba(15,15,15,0.85);
    --field-bg: #1c1c1a;
    --chip-dark: #2A251C; /* etwas heller als die dunkle Seitenfläche, damit Buttons sich weiter abheben */
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
  }
}

*, *::before, *::after{ box-sizing:border-box; }

/* ---------- Startseiten-Baukasten (Sanity: pageHome.pageModules) ----------
   display:flex + flex-direction:column verhält sich für einfach gestapelte
   volle-Breite-Sektionen optisch identisch zum normalen Block-Fluss — der
   einzige Unterschied ist, dass jetzt jedes Kind eine "order"-Eigenschaft
   annehmen kann. sanity-content.js setzt ausschließlich style.order und das
   hidden-Attribut je Block; die Elemente selbst bleiben unverändertes,
   bereits beim ersten Rendern vorhandenes HTML (SEO/Initial-Paint
   unberührt, keine nachträgliche DOM-Neuinjektion). */
#page-builder-zone{ display:flex; flex-direction:column; }
/* overflow-x allein reicht auf manchen Mobil-Browsern nicht: das off-canvas
   Menü ist per position:fixed + translateX(100%) einen vollen Viewport breit
   ausserhalb sichtbar positioniert, was die scrollbare Breite der Seite
   vergrößert. touch-action:pan-y unterbindet zusätzlich das horizontale
   Wischen selbst, unabhängig davon.
   WICHTIG: overflow-x:clip statt overflow-x:hidden — hidden koppelt sich
   laut CSS-Spec mit overflow-y (setzt es implizit auf "auto", sobald nur
   eine Achse ungleich visible ist) und macht html/body damit zu einem
   eigenen Scroll-Container. Das bricht position:sticky im .nav-wrapper
   zuverlässig: der Browser scrollt dann relativ zum (nie bewegten)
   Body-Container statt zum echten Viewport, wodurch Header+Banner beim
   Scrollen einfach mit wegscrollen statt oben kleben zu bleiben (per
   Playwright reproduziert). clip erzeugt keinen Scroll-Container und
   umgeht das Problem komplett, bei identischer horizontaler Kappwirkung. */
html{ scroll-behavior:smooth; overflow-x:clip; touch-action:pan-y; }
/* Ohne das zeigt Android/Chrome beim Antippen von Buttons/Links einen eigenen,
   halbtransparenten BLAUEN Overlay-Effekt (Standard-"Tap Highlight") — auf dem
   Leistungen-Akkordeon sah das wie ein hängengebliebenes blaues Blockieren der
   Zeile aus, weil die Fläche recht groß und der Seitenhintergrund hell ist. Wir
   ersetzen die Rückmeldung stattdessen gezielt durch die Marken-Akzentfarbe
   (siehe .service-row-toggle unten), statt uns auf den Browser-Default zu verlassen. */
html{ -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.visually-hidden:focus{
  position:fixed; top:12px; left:12px; z-index:100;
  width:auto; height:auto; padding:12px 20px; margin:0;
  overflow:visible; clip:auto; white-space:normal;
  background:var(--chip-dark); color:var(--on-dark);
  border-radius:var(--radius-sm); font-family:'Montserrat',sans-serif; font-weight:700;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* .trust-track (Vorteile-Marquee) ist bewusst ausgenommen — siehe dortige
     !important-Regel — rein dekoratives, langsames Durchlaufen soll auch bei
     aktivierter "Bewegung reduzieren"-Einstellung weiterlaufen. */
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  overflow-x:clip;
  touch-action:pan-y;
  background:var(--paper);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; image-rendering:-webkit-optimize-contrast; }

h1,h2,h3,h4{
  line-height:1.12;
  color:var(--ink);
  margin:0 0 var(--space-2);
  letter-spacing:-0.01em;
  text-wrap:balance;
}

h1,h2,h3{
  font-family:'Archivo Black', sans-serif;
  font-weight:400;
}

h4{
  font-family:'Montserrat', sans-serif;
  font-weight:800;
}

.display{
  font-family:'Archivo Black', sans-serif;
  font-weight:400;
  text-transform:none;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

p{ margin:0 0 var(--space-2); color:var(--ink-soft); max-width:60ch; text-wrap:pretty; }
ul{ padding-left:22px; }
li{ color:var(--ink-soft); margin-bottom:8px; max-width:60ch; }
h2{ font-size:1.35rem; margin-top:var(--space-4); }
h3{ font-size:1.05rem; margin-top:var(--space-3); }

a{ color:var(--link); }
a.plain{ color:inherit; text-decoration:none; }

.eyebrow{
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--link);
  margin-bottom:var(--space-2);
}
section.dark .eyebrow, .hero .eyebrow{ color:var(--accent); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- Buttons / CTA ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:0.95rem;
  padding:15px 26px;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1), background 0.25s cubic-bezier(0.16,1,0.3,1), color 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.btn:active{ transform:scale(0.98); }
.btn-primary::after, .btn-whatsapp::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform:skewX(-20deg);
  transition:left 0.55s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-whatsapp:hover::after{ left:130%; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px) scale(1.015); box-shadow:0 10px 24px -12px rgba(166,123,46,0.55); }
.btn-ghost-dark{ border-color:var(--on-dark-soft); color:var(--on-dark); }
.btn-ghost-dark:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px) scale(1.015); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--link); color:var(--link); transform:translateY(-2px) scale(1.015); }
.btn-whatsapp{ background:var(--brand-green); color:#0b2a17; display:inline-flex; align-items:center; gap:8px; }
.btn-whatsapp svg{ flex-shrink:0; }
.btn-whatsapp:hover{ background:#1ebe5b; transform:translateY(-2px) scale(1.015); box-shadow:0 10px 24px -12px rgba(37,211,102,0.5); }
/* "Direkt anrufen" ist ausschließlich der rechte Button der Hero-Zeile 1 —
   Marken-Gold statt Grün, damit WhatsApp (Grün) und Anruf (Gold) klar
   unterscheidbar nebeneinander stehen. */
.btn-call{ background:var(--primary-gold); color:var(--accent-ink); display:inline-flex; align-items:center; gap:8px; }
.btn-call svg{ flex-shrink:0; }
.btn-call:hover{ background:var(--accent-hover); transform:translateY(-2px) scale(1.015); box-shadow:0 10px 24px -12px rgba(0,0,0,0.35); }
.btn-sharp{
  border-radius:0; background:var(--chip-dark); color:var(--on-dark); border-color:var(--chip-dark);
  padding:13px 24px; font-size:0.86rem; letter-spacing:0.02em;
}
.btn-sharp:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }

/* Hero: Haupt-CTA der Zeile 2 — transparenter/goldener Luxus-Look, füllt sich
   beim Hover mit der Marken-Gold-Farbe. */
.btn-hero-primary{ background:transparent; border-color:var(--primary-gold); color:var(--on-dark); }
.btn-hero-primary:hover{ background:var(--primary-gold); border-color:var(--primary-gold); color:var(--accent-ink); transform:translateY(-2px); }

/* ---------- Navigations-Wrapper (Info-Banner + Header) ----------
   Banner und Header liegen als normale Flow-Geschwister IN diesem einen
   Wrapper, der als Ganzes sticky ist — statt (wie früher) den Banner
   position:fixed zu setzen und den Header separat mit einem eigenen
   sticky-top-Versatz + Body-padding-top zu koordinieren. Diese Zwei-Wege-
   Koordination brach in Chromium zuverlässig: sobald html UND body beide
   overflow-x:hidden gesetzt haben (hier der Fall, siehe oben), verdoppelt
   der Browser bei position:sticky-Elementen den top-Versatz zur Body-
   padding-top (reproduziert: Header landete bei 80px statt 40px, macht
   genau die gemeldete Lücke zwischen Banner und Header). Ein gemeinsamer
   sticky-Wrapper mit normalem Innen-Flow umgeht das Problem strukturell,
   statt die beiden Versätze von Hand im Gleichschritt zu halten. */
.nav-wrapper{ position:sticky; top:0; z-index:60; }
/* ECHTER Fund hinter dem wiederkehrenden "Menü rutscht hinter Hero-Buttons"-
   Bug: nav.main-nav's z-index wurde in den letzten Hotfixes immer weiter
   erhöht, blieb aber wirkungslos, weil .nav-wrapper (sticky + eigener
   z-index:60) eine EIGENE Stacking-Context bildet. Ein Kind-Element kann
   niemals über diese Context hinaus wirken — verglichen wird am Ende nur
   .nav-wrapper (z-index:60) gegen Elemente außerhalb, z. B. .hero-cta-choreo
   (z-index:10000) oder .fab-group (z-index:9999). Der Menü-Innenwert
   (99999999) war dadurch komplett irrelevant. Fix: sobald das Menü offen
   ist, bekommt der ganze .nav-wrapper selbst denselben astronomischen Wert,
   damit die komplette Stacking-Context nach oben rutscht — nicht nur ihr
   Inhalt. Bleibt das Menü zu, bleibt z-index:60 unverändert (wichtig, damit
   der sticky Header weiterhin unter Danke-Popup/Lightbox liegt). */
.nav-wrapper:has(nav.main-nav.open){ z-index:99999999; }

/* ---------- Info-Banner (optional, per Sanity gesteuert) ---------- */
.info-banner{
  display:none;
  height:40px; padding:0 16px;
  align-items:center; justify-content:center; gap:8px;
  background:var(--chip-dark); color:var(--on-dark);
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.85rem;
  letter-spacing:0.01em; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--accent);
  text-decoration:none;
  transition:background 0.2s ease;
}
.info-banner.is-visible{ display:flex; }
a.info-banner.is-visible:hover, a.info-banner.is-visible:focus-visible{ background:#000; }
.info-banner-arrow{ color:var(--accent); font-family:'Archivo Black',sans-serif; flex-shrink:0; }

/* ---------- Header ---------- */
header.site{
  z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;
  align-items:center;
  gap:40px;
  padding:14px 24px;
  max-width:var(--wrap); margin:0 auto;
}
header.site .brand{ margin-right:auto; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); min-width:0; }
.brand img{ width:36px; height:36px; flex-shrink:0; }
@media (prefers-color-scheme: dark){
  header.site .brand img{ filter:brightness(1.5) contrast(0.92); }
}
/* Mehrfarbiges Logo auf dauerhaft dunklem Grund (Footer): kein invert(1),
   das würde Grün/Braun in Magenta/Cyan verkehren (Foto-Negativ-Effekt). */
.logo-on-dark{ filter:brightness(1.5) contrast(0.92); }
.brand .txt{ line-height:1.15; min-width:0; }
.brand .txt strong{ display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.92rem; }
.brand .txt span{ display:block; font-size:0.72rem; color:var(--ink-soft); }

nav.main-nav{ display:flex; align-items:center; gap:26px; }
/* Statische Standard-Reihenfolge (bevor Sanity-Werte per JS greifen), damit
   vor dem Laden kein Flackern/Umspringen entsteht. sanity-content.js kann
   diese Werte per data-nav-page-Zuordnung überschreiben (Seiten-Reihenfolge
   in Sanity einstellbar). Freie Unterseiten (customPage) landen per Default
   dahinter (siehe assets/js/sanity-content.js, Fallback 60), der CTA-Button
   bleibt immer ganz hinten. */
nav.main-nav [data-nav-page="home"]{ order:10; }
nav.main-nav [data-nav-page="leistungen"]{ order:20; }
nav.main-nav [data-nav-page="ueberMich"]{ order:30; }
nav.main-nav [data-nav-page="einsatzgebiet"]{ order:40; }
nav.main-nav [data-nav-page="kontakt"]{ order:50; }
nav.main-nav .nav-mobile-cta{ order:999; }
nav.main-nav a{
  font-family:'Montserrat', sans-serif;
  font-weight:600; font-size:0.85rem;
  color:var(--ink); text-decoration:none;
  position:relative; padding:4px 0;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--accent-hover); transition:width 0.25s cubic-bezier(0.16,1,0.3,1);
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ width:100%; }
nav.main-nav a.active{ color:var(--link); }

/* ---------- Mega-Menü (nur Desktop, Hover/Fokus) — dunkler Glas-Look ---------- */
.nav-item{ position:relative; display:flex; align-items:center; }
.mega-panel{
  position:fixed; top:70px; left:0; right:0;
  background:rgba(15,15,15,var(--glass-opacity, 0.7));
  -webkit-backdrop-filter:blur(var(--glass-blur, 24px)); backdrop-filter:blur(var(--glass-blur, 24px));
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 48px -28px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.2s;
  z-index:60;
}
body.has-info-banner .mega-panel{ top:110px; }
.mega-panel-inner{
  max-width:var(--wrap); margin:0 auto; padding:64px 24px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:8px 32px;
}
.mega-col{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  padding:6px 24px 6px 0; border-right:1px solid rgba(255,255,255,0.12); min-width:0;
}
.mega-col:last-of-type{ border-right:0; }
.mega-col-title{
  font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1rem; letter-spacing:-0.01em;
  color:#ffffff; transition:color 0.2s ease;
}
.mega-col-desc{ font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; color:rgba(244,241,233,0.6); line-height:1.45; }
.mega-col:hover .mega-col-title, .mega-col:focus-visible .mega-col-title{ color:var(--accent); }
.mega-col-all{
  justify-content:center; align-items:center; text-align:center; border-right:0;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.88rem; color:var(--accent);
}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  /* .mega-open wird per JS mit einer kurzen Schließ-Verzögerung gesteuert (siehe main.js) —
     verhindert, dass das Menü beim Runterbewegen der Maus zum Panel kurz zuklappt.
     :hover/:focus-within bleiben als CSS-Fallback für reine Tastatur-/No-JS-Nutzung. */
  .nav-item.has-mega:hover .mega-panel,
  .nav-item.has-mega:focus-within .mega-panel,
  .nav-item.has-mega.mega-open .mega-panel{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
    transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1);
  }
}
@media (max-width:900px), (hover:none), (pointer:coarse){
  .mega-panel{ display:none; }
}

.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-mobile-cta{ display:none; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; transition:.2s; }

@media (max-width: 900px){
  header.site .bar{ gap:16px; justify-content:space-between; }
  /* Luxus-Glas-Look: das mobile Menü ist eine immer-dunkle Frosted-Glass-Fläche
     (unabhängig vom Light/Dark-Seitenmodus, gleiches Prinzip wie Mega-Menü/Hero/
     Footer) statt der theme-abhängigen Papierfarbe. */
  nav.main-nav{
    position:fixed; top:66px; right:0; left:0; height:calc(100vh - 66px);
    /* Absolut blickdicht, kein Glas-Look mehr: eine feste, deckende Fläche
       statt teiltransparentem Blur — nichts vom Seiteninhalt (Hero-Buttons,
       Lade-Schleier, Logo-Text) darf mehr durchscheinen. */
    background:#0f0f0f !important;
    border-left:1px solid rgba(255,255,255,0.08);
    display:flex; flex-direction:column; align-items:flex-start; gap:26px;
    padding:50px 24px 24px; transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto;
    /* Muss kompromisslos über ALLEM liegen, inkl. der Hero-Buttons auf
       z-index:10000 — sonst rutscht das geöffnete Menü optisch dahinter. */
    z-index:99999999 !important;
  }
  body.has-info-banner nav.main-nav{ top:106px; height:calc(100vh - 106px); }
  nav.main-nav.open{ transform:translateX(0); }
  /* Großzügiges vertikales Padding PLUS Gap zwischen den Links: perfekte
     Daumen-Bedienung auf dem Handy, kein Verklicken. Aktive Seite leuchtet im
     Logo-Goldton (--accent) statt im theme-abhängigen --link-Ton, der auf dem
     immer-dunklen Glas kaum sichtbar wäre. */
  nav.main-nav a{
    padding:14px 0; width:100%; border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:1.05rem; color:var(--on-dark);
  }
  nav.main-nav a.active{ color:var(--accent); }
  .nav-item{ width:100%; display:block; }
  .nav-item .mega-panel{ display:none; }
  nav.main-nav a.nav-mobile-cta{
    display:flex; justify-content:center; margin-top:12px; width:100%;
    color:var(--on-dark); border-bottom:0; padding:15px 26px;
  }
  nav.main-nav a.nav-mobile-cta:hover{ color:var(--accent-ink); }
  .nav-cta{ gap:0; }
  .nav-cta .btn-sharp{ display:none; }
  .nav-toggle{ display:block; }
  .brand .txt strong{ font-size:clamp(0.64rem, 2.7vw, 0.84rem); white-space:nowrap; }
  .brand .txt span{ font-size:clamp(0.58rem, 2.2vw, 0.72rem); }
}
@media (max-width: 380px){
  header.site .bar{ gap:10px; }
  .brand{ gap:8px; }
  .brand img{ width:30px; height:30px; }
}

/* ---------- Permanenter Contact-Trigger (WhatsApp + Anfrage) ---------- */
.fab-group{
  position:fixed !important;
  bottom:20px !important; right:20px !important;
  z-index:9999 !important;
  display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.fab-group.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
/* Ersetzt den vorherigen reinen Scale-Puls: ein Keyframe statt zwei, die beide "transform"
   animieren würden (zwei gleichzeitige transform-Animationen auf demselben Element
   überschreiben sich sonst gegenseitig, statt sich zu kombinieren). */
.fab-group.is-visible{ animation:fab-float 4s ease-in-out infinite; }
@keyframes fab-float{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){
  .fab-group.is-visible{ animation:none; }
  .whatsapp-fab{ animation:none !important; }
}
.whatsapp-fab{
  width:56px !important; height:56px !important;
  border-radius:50% !important;
  background:var(--brand-green); color:#0b2a17;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-sizing:border-box;
  box-shadow:0 8px 22px -6px rgba(11,42,23,0.5);
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);
  animation:whatsapp-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes whatsapp-glow-pulse{
  0%, 100%{ box-shadow:0 8px 22px -6px rgba(11,42,23,0.5), 0 0 0 0 rgba(37,211,102,0.5); }
  50%{ box-shadow:0 8px 22px -6px rgba(11,42,23,0.5), 0 0 0 9px rgba(37,211,102,0); }
}
.whatsapp-fab:hover{ transform:scale(1.08); }
.whatsapp-fab svg{ width:26px !important; height:26px !important; flex-shrink:0; }
.fab-cta{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--chip-dark); color:var(--on-dark);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.86rem;
  padding:16px 20px; border-radius:0; text-decoration:none;
  box-shadow:0 8px 22px -6px rgba(0,0,0,0.4);
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1), background 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.fab-cta:hover{ background:var(--accent); color:var(--accent-ink); transform:scale(1.04); box-shadow:0 12px 26px -6px rgba(0,0,0,0.5); }
@media (max-width:600px){
  .fab-group{ right:14px !important; bottom:14px !important; gap:10px; }
  .whatsapp-fab{ width:50px !important; height:50px !important; }
  .whatsapp-fab svg{ width:22px !important; height:22px !important; }
  .fab-cta{ padding:13px 14px; font-size:0.78rem; }
}
.fab-cta-short{ display:none; }
@media (max-width:400px){
  .fab-cta-long{ display:none; }
  .fab-cta-short{ display:inline; }
}

/* ---------- Sections ---------- */
section{ padding:var(--space-5) 0; position:relative; }
section.dark{ background:var(--surface-dark); color:var(--on-dark); }
section.dark h1, section.dark h2, section.dark h3{ color:var(--on-dark); }
section.dark p{ color:var(--on-dark-soft); }
section.dim{ background:var(--paper-dim); }

/* ---------- Hero: asymmetrisch ----------
   .hero ohne Bild (Leistungen/Kontakt/Einsatzgebiet: reiner Text-Kopf) folgt
   jetzt dem normalen Theme-Hintergrund statt eines fest-dunklen Balkens —
   bisher IMMER dunkel (--surface-dark), unabhängig vom Light/Dark-Modus, was
   auf hellen Seiten wie einen falsch platzierten schwarzen Balken direkt
   unter dem Header wirkte. Genau wie .type-hero auf ueber-mich.html. Die
   fotobasierte .hero-slider-Variante (Startseite) bleibt über :not()
   ausdrücklich ausgenommen — sie ist absichtlich immer dunkel (Foto + Glas-
   Overlay), ihre Textfarben werden bereits eigenständig gesetzt
   (.hero-slide-h1, .hero-slide-verb, .hero-eyebrow-top). */
.hero{
  padding:calc(var(--space-6) + 20px) 0 var(--space-5);
  overflow:hidden;
  position:relative;
  /* ECHTER Fund hinter "Dachzeile überlagert Logo/Header beim Scrollen":
     .hero hatte zwar position:relative, aber KEIN eigenes z-index — ohne
     z-index bildet position:relative allein noch KEINE Stacking-Context.
     Dadurch "leckten" die internen z-index-Werte von .hero-eyebrow-top
     (10000, nötig um während des Glas-Intros über der Glaswand mit
     z-index:9998 zu bleiben) ungebremst auf die oberste Ebene durch — dort
     verglichen mit .nav-wrapper (sticky Header, z-index:60) gewinnt 10000
     gegen 60. Ergebnis: sobald die Dachzeile beim Scrollen visuell durch
     die Höhe des Headers wandert, malt sie sich VOR das Logo (mit
     Playwright bei scrollY 60-100px reproduziert und verifiziert). Fix:
     ein explizites z-index:1 macht .hero selbst zur eigenen Stacking-
     Context — die 10000/9998-Werte bleiben dadurch strikt INTERN
     (weiterhin korrekt zueinander geordnet, Text bleibt über der
     Glaswand), können aber die Website-Chrome (Header, Popups, FAB)
     nie wieder überstrahlen, ganz gleich wie hoch sie intern sind. */
  z-index:1;
}
.hero:not(.hero-slider){
  background:var(--paper);
  color:var(--ink);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.35fr 0.85fr;
  gap:var(--space-4);
  align-items:end;
}
.hero:not(.hero-slider) h1{ color:var(--ink); font-size:clamp(2.4rem, 5vw, 4.1rem); margin-bottom:var(--space-3); }
.hero:not(.hero-slider) .lead{ color:var(--ink-soft); font-size:1.1rem; max-width:52ch; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-3); position:relative; z-index:10000; }
/* Zwei-Zeilen-Button-Choreografie: Zeile 1 = zwei gleich breite Kompakt-
   Buttons (WhatsApp/Anrufen), Zeile 2 = ein breiter Haupt-CTA darunter.
   Ersetzt das reine flex-wrap der .cta-row-Basisregel oben für den Hero. */
.hero .cta-row.hero-cta-choreo{ flex-direction:column; flex-wrap:nowrap; width:100%; max-width:440px; }
.hero-cta-row-1{ display:flex; gap:12px; width:100%; }
.hero-cta-row-1 .btn{ flex:1; justify-content:center; }
.hero-cta-row-2{ width:100%; }
.hero-cta-row-2 .btn{ width:100%; justify-content:center; }

/* Schlanke, edle Knopf-Optik für alle 3 Hero-Buttons — ab dieser Runde
   AUSDRÜCKLICH auf Mobil UND Desktop (vorher nur mobil, "Desktop bleibt
   unberührt"; dieses Briefing verlangt explizit beides). Höhe/Radius/
   Rahmen sind bewusst zusammen an einer Stelle definiert: height:42px
   ohne passend reduziertes Padding würde bei box-sizing:border-box den
   Text vertikal quetschen, deshalb gehören beide Werte untrennbar zusammen. */
.hero-cta-choreo .btn{
  height:42px !important; padding:0 12px !important;
  font-size:14px; font-weight:500; gap:6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px !important;
}
.hero-cta-choreo .btn svg{ width:15px; height:15px; flex-shrink:0; }
/* Dicke, harte Rahmen weg — stattdessen hauchdünne, farblich passende
   Lichtkanten statt des massiven 2px-Standardrahmens aus der Basis-.btn. */
.hero-cta-choreo .btn-hero-primary{ border:1px solid rgba(212,175,55,0.25); }
.hero-cta-choreo .btn-whatsapp{ border:1px solid rgba(37,211,102,0.35); }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
}

/* ---------- Vorteile-Karten (unter dem Hero) — schlichter shadcn-Look:
   kein Kachel-Hintergrund, nur hauchdünne Trennlinien, viel Weißraum. ---------- */
.trust-strip-section{ padding:var(--space-3) 0; }
.trust-track{ display:flex; }
.trust-set{ display:flex; }
.trust-card{
  display:flex; flex-direction:column; gap:6px;
  padding:4px 28px; flex-shrink:0;
}
.trust-card + .trust-card{ border-left:1px solid rgba(244,241,233,0.14); }
.trust-card-title{
  font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1rem; line-height:1.25;
  color:var(--on-dark); letter-spacing:-0.01em;
}
.trust-card-detail{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; color:var(--on-dark-soft);
}
/* Desktop/Tablet: normale, umbrechende Reihe — das zweite (identische) Set existiert
   nur fürs Mobile-Marquee unten und wird hier ausgeblendet. */
@media (min-width:769px){
  .trust-track{ flex-wrap:wrap; }
  .trust-set:first-of-type{ flex-wrap:wrap; flex:1; }
  .trust-set:first-of-type .trust-card{ flex:1; min-width:220px; }
  .trust-set:last-of-type{ display:none; }
}
/* Mobil: echtes Endlos-Marquee (rechts nach links), zwei identische Sets nebeneinander,
   die Schleife verschiebt exakt um ein Set (-50%) für einen nahtlosen Übergang. */
@media (max-width:768px){
  .trust-strip-section{ overflow:hidden; }
  /* --trust-marquee-speed wird von sanity-content.js gesetzt (trustMarqueeSpeedMs
     aus dem Kinetik-Studio), 22s greift als Standard ohne Sanity-Wert.
     !important bewusst: die globale "Bewegung reduzieren"-Regel weiter oben
     (*, *::before, *::after{ animation-duration:0.001ms !important; ... })
     würde diesen rein dekorativen, langsamen Marquee sonst sitewide mit
     abschalten — hier bewusst ausgenommen (siehe Kommentar dort). */
  .trust-track{
    width:max-content;
    animation:trust-marquee var(--trust-marquee-speed, 22s) linear infinite !important;
    will-change:transform; transform:translateZ(0); -webkit-transform:translateZ(0);
  }
  .trust-card{ min-width:74vw; max-width:320px; }
}
@keyframes trust-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* Läuft bewusst auch bei "Bewegung reduzieren" weiter (anders als die
   übrigen Animationen der Seite) — rein dekoratives, langsames Durchlaufen
   ohne Blitzen/Ruckeln, kein Auslöser für Bewegungsunverträglichkeit. */

/* ---------- Hero-Slider (Startseite, 100vh) ---------- */
.hero-slider{
  height:calc(100vh - 70px); min-height:560px; max-height:960px;
  padding:0; margin:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
@media (min-width:901px){
  /* Bündig mit der Viewport-Unterkante: real gemessene Header-Höhe (~82px,
     nicht die angenommenen 70px, die anderswo im CSS nur als grobe Näherung
     für Positionierungszwecke dienen) minus kein zusätzlicher Rand mehr -
     sonst würde die Vorteile-Sektion knapp unter dem sichtbaren Bereich
     landen statt direkt daran anzugrenzen. */
  .hero-slider{ height:calc(100vh - 82px); }
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
/* .hero-slide ist jetzt ein <picture> (vorher ein background-image-<div>) —
   <picture> ist inline von Natur aus, daher display:block hier explizit nötig,
   damit position:absolute/inset weiterhin wie gewohnt greift. */
.hero-slide{
  display:block; position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
  /* --hero-transition-speed wird von sanity-content.js aus den Website-
     Einstellungen gesetzt (Slidertuning: transitionSpeed), 1400ms Standard. */
  transition:opacity var(--hero-transition-speed, 1400ms) cubic-bezier(0.16,1,0.3,1);
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  display:block; width:100%; height:100%; object-fit:cover;
  image-rendering:-webkit-optimize-contrast;
  /* --hero-desktop-pos/--hero-mobile-pos werden per JS aus dem Sanity-Hotspot
     gesetzt (siehe sanity-content.js); center 30% ist der Fallback ohne
     gepflegten Hotspot. Getrennte Custom Properties statt einer geteilten,
     weil Desktop- und Mobile-Bild jetzt zwei unterschiedliche Fotos mit
     potenziell unterschiedlichem Fokuspunkt sein können. */
  object-position:var(--hero-desktop-pos, center 30%);
  /* Bewusster Extra-Zoom (25%) ÜBER das reine object-fit:cover hinaus: Sind
     Container- und Bild-Seitenverhältnis ähnlich breit (typisch bei 16:9-
     Fotos in einem breiten Hero, erst recht auf Ultrawide-Monitoren), zeigt
     object-fit:cover bereits die VOLLE Bildbreite ohne jeden horizontalen
     Beschnitt — der Fokuspunkt (object-position-x) hätte dann keinerlei
     sichtbaren Effekt, ganz gleich wie er in Sanity gesetzt wird. Der
     zusätzliche transform:scale() erzwingt immer etwas Beschnitt-Spielraum,
     damit der Fokuspunkt auf jeder Bildschirmbreite wirklich etwas bewirkt.
     transform-origin nutzt dieselbe Position wie object-position, damit
     Zoom und Bildausschnitt exakt auf denselben Punkt einrasten. */
  transform:scale(1.25);
  transform-origin:var(--hero-desktop-pos, center 30%);
  filter:blur(0);
  transition:transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.8s cubic-bezier(0.16,1,0.3,1);
}
@media (max-width:768px){
  .hero-slide img{
    object-position:var(--hero-mobile-pos, var(--hero-desktop-pos, center 30%));
    transform-origin:var(--hero-mobile-pos, var(--hero-desktop-pos, center 30%));
  }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  /* Oben dezent, unten kräftiger abgedunkelt: schützt den Kontrast der weißen
     Archivo-Black-Überschrift und lässt die Bildfarben plastischer wirken,
     statt das Foto oben komplett unverändert freizustellen. */
  background:linear-gradient(0deg, rgba(12,13,15,0.94) 0%, rgba(12,13,15,0.62) 45%, rgba(12,13,15,0.22) 78%, rgba(12,13,15,0.14) 100%);
  transition:background 1s cubic-bezier(0.16,1,0.3,1);
}
.hero-slider .hero-slider-content{
  display:block; position:relative; z-index:10000;
  padding-bottom:calc(var(--space-5) + 10px);
  max-width:none; margin:0;
  padding-left:clamp(24px, 5vw, 72px); padding-right:24px;
  /* Voller Breite wegen padding-right/max-width:none, aber Überschrift und
     CTA-Zeile stehen real nur links — die leere rechte Padding-Fläche lag
     trotzdem (mangels eigenem pointer-events) mit z-index:10000 über den
     .hero-slide-dots (z-index:2, gleiche Stacking-Context) und blockte sie
     komplett. pointer-events:none hier + gezielt wieder :auto auf der
     CTA-Zeile lässt Klicks durch die leere Fläche zu den Punkten durch. */
  pointer-events:none;
}
.hero-slider .hero-slider-content .cta-row{ pointer-events:auto; }
/* Goldene Dachzeile: bewusst AUS dem bodenständigen .hero-slider-content-Block
   herausgelöst und direkt an der Oberkante des Hero-Bildes verankert (relativ
   zum umschließenden .hero-slider, nicht zur Überschrift/den Buttons weiter
   unten) — steht damit klar unter dem weißen Nav-Balken auf dem Foto, statt
   mit im bodenständigen Textblock zu hängen. */
.hero-eyebrow-top{
  position:absolute; top:0; left:0; right:0;
  width:100% !important;
  z-index:10000; margin:0;
  padding:14px clamp(24px, 5vw, 72px);
  background:rgba(255,255,255,0.08);
  border:none;
  border-bottom:1px solid rgba(255,255,255,0.14);
  border-radius:0;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 6px 20px -10px rgba(0,0,0,0.3);
  /* Mittig über der vollen Bildbreite statt linksbündig. */
  text-align:center;
  /* Bleibt während des 1.5s-Glasintros unbeweglich stehen: kein Transform
     hier oder auf .hero-slider.is-first-reveal .hero-eyebrow-top — nur die
     Glaswand selbst (.hero-glass-intro) blendet per Opacity/Blur aus. */
}
@media (max-width:768px){
  .hero-eyebrow-top{
    font-size:clamp(7.5px, 2.3vw, 9.5px) !important;
    letter-spacing:0.01em;
    /* Erzwungenes nowrap: bleibt immer einzeilig. Passt bei dieser Größe auf
       die meisten aktuellen Phones vollständig hinein. Für sehr schmale
       Geräte ist overflow-x:auto NUR auf dieses Element beschränkt (nicht
       auf die ganze Seite) — dadurch kann diese eine Zeile im Zweifel
       intern seitlich gescrollt werden, ohne den früher schon einmal
       gefixten Bug (die ganze Seite wird horizontal scrollbar)
       zurückzuholen. Scrollbar selbst unsichtbar, damit es optisch nicht
       nach einer kaputten Leiste aussieht. */
    white-space:nowrap;
    overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
    padding:10px clamp(10px, 3vw, 20px);
  }
  .hero-eyebrow-top::-webkit-scrollbar{ display:none; height:0; }
}
@media (min-width:901px){
  .hero-eyebrow-top{ font-size:0.85rem; }
}

/* Kleiner runder vCard-Download-Button (siehe HTML: <a download
   href="assets/lars-battermann.vcf">), z. B. neben "Direkter Draht" auf
   kontakt.html — speichert Lars direkt im Telefonbuch statt nur eine
   Telefonnummer zu hinterlassen. Folgt --ink/--line, damit er in beiden
   Farbschemata sichtbar bleibt. */
.vcard-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--line); color:var(--ink);
  transition:border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.vcard-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------- Tiefen-Reveal-Intro (nur beim allerersten Seitenaufruf) ----------
   Die Klasse .is-first-reveal steht von Anfang an im HTML (kein FOUC-Risiko: der
   "ladende" Look IST der erste gemalte Zustand). main.js hält sie für exakt 3s
   (bzw. den in Sanity hinterlegten Wert), entfernt sie dann. Text (goldene
   Dachzeile, Überschrift, Buttons) steht die GANZE Zeit unbeweglich an seiner
   finalen Position (kein Transform mehr auf .hero-slider-content/.hero-eyebrow-
   top) — nur die Glaswand löst sich per Opacity/Blur an Ort und Stelle auf,
   während das Hero-Bild dahinter synchron von Skalierung+Weichzeichnung auf
   volle Schärfe übergeht (siehe .hero-slide img oben). Nach Ablauf der 0.8s-
   Transition setzt main.js zusätzlich display:none auf die Glaswand — danach
   exakt das normale, unveränderte Layout, keine bleibende CSS-Abweichung. */
.hero-glass-intro{
  position:absolute; inset:0; z-index:9998;
  /* --intro-veil-opacity wird von sanity-content.js gesetzt (introVeilOpacity
     aus dem Kinetik-Studio), 0.65 greift als Standard ohne Sanity-Wert. */
  background:rgba(15,15,15,var(--intro-veil-opacity, 0.65));
  /* --intro-blur wird von sanity-content.js gesetzt (introBlurStrength aus
     den Website-Einstellungen), 45px greift als Standard ohne Sanity-Wert. */
  -webkit-backdrop-filter:blur(var(--intro-blur, 45px)); backdrop-filter:blur(var(--intro-blur, 45px));
  opacity:1;
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), -webkit-backdrop-filter 0.8s cubic-bezier(0.16,1,0.3,1), backdrop-filter 0.8s cubic-bezier(0.16,1,0.3,1);
}
.hero-slider:not(.is-first-reveal) .hero-glass-intro{
  opacity:0; pointer-events:none;
  -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
}
.hero-slider.is-first-reveal .hero-slide-dots{
  opacity:0; pointer-events:none; transition:opacity 0.5s ease;
}
.hero-slider.is-first-reveal .hero-slide img{
  /* 1.25 (Basis-Zoom) * 1.06 (Reveal-Effekt) — dieselbe relative Aufblend-
     Bewegung wie zuvor, nur ausgehend vom neuen Basis-Zoom. */
  transform:scale(1.325); filter:blur(15px);
}
@media (prefers-reduced-motion: reduce){
  .hero-glass-intro,
  .hero-slide img{ transition:none; }
}
.hero-slide-heading-wrap{ position:relative; margin-bottom:var(--space-3); }
.hero-slide-h1{
  position:relative; margin:0; color:var(--on-dark);
  font-size:clamp(1.7rem, 3.6vw, 3.2rem); line-height:1.12;
}
/* Spruch-Rotation (heroSettings.heroSprueche): main.js blendet den Text per
   reiner Opacity-Kreuzblende um (0 -> Text tauschen -> 1) — dasselbe DOM-Element
   bleibt dabei die ganze Zeit an derselben Stelle stehen, es gibt keinerlei
   Transform/Bewegung mehr, nur die Buchstaben blenden ineinander über. */
.hero-slide-verb{ color:var(--accent); transition:opacity 0.8s ease-in-out; }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
  .hero-slide-verb{ transition:none; }
}

.hero-slide-dots{
  position:absolute; z-index:2; right:24px; bottom:28px;
  display:flex; flex-direction:column; gap:10px;
  /* .hero besitzt eine eigene Stacking-Context (z-index:1, siehe Kommentar
     dort) — ein höherer z-index hier allein hätte die Punkte NIE über das
     fixierte Cookie-Banner (z-index:80, außerhalb dieser Stacking-Context)
     heben können. main.js setzt stattdessen .has-cookie-banner auf <body>,
     solange das Banner sichtbar ist, und schiebt die Punkte per bottom-Offset
     sichtbar darüber (per Playwright reproduziert: elementFromPoint traf vor
     diesem Fix auf .cookie-banner statt den Dot). */
  transition:bottom 0.25s ease;
}
body.has-cookie-banner .hero-slide-dots{ bottom:96px; }
.hero-slide-dot{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(244,241,233,0.35); border:1px solid rgba(244,241,233,0.5);
  cursor:pointer; transition:background 0.3s ease, transform 0.3s ease;
}
.hero-slide-dot.is-active{ background:var(--accent); border-color:var(--accent); transform:scale(1.25); }
.hero-slide-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px){
  .hero-slider{ height:calc(100svh - 66px); min-height:520px; }
  .hero-slide-dots{ right:16px; bottom:20px; }
  /* Cookie-Banner bricht auf schmalen Screens auf mehr Zeilen um und wird
     dadurch höher als am Desktop — entsprechend mehr Abstand nötig. */
  body.has-cookie-banner .hero-slide-dots{ bottom:140px; }
  .hero-slider .hero-slider-content{ padding-bottom:calc(var(--space-4) + 34px); }
}
@media (max-width:768px){
  /* Die goldene Dachzeile sitzt oben am Bildrand — dort war die bestehende
     .hero-scrim praktisch durchsichtig (0.14 Deckkraft), auf hellen Fotos
     (z. B. Hecke/Garten) verschwamm der Text. Zusätzliche, eigenständige
     Verlaufsebene NUR für die obere Kante (erste ~14%), als zweiter
     background-image-Layer über der bestehenden Verdunkelung. */
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 14%),
      linear-gradient(0deg, rgba(12,13,15,0.94) 0%, rgba(12,13,15,0.62) 45%, rgba(12,13,15,0.22) 78%, rgba(12,13,15,0.14) 100%);
  }
  /* Der Text-Kopf auf Leistungen/Kontakt/Einsatzgebiet (.hero ohne Bild) und
     Über-mich (.type-hero) hatte auf Mobil dieselbe großzügige Desktop-
     Polsterung (--space-6 + 20px ≈ 160px) — auf dem schmalen Screen wirkte
     das wie gähnende Leere zwischen Header und Überschrift.
     WICHTIG: !important ist hier kein Stilbruch, sondern notwendig — die
     Basisregel ".type-hero{padding:...}" (weiter unten in dieser Datei)
     hat DIESELBE Selektor-Spezifität und würde ohne !important als
     später deklarierte Shorthand-Regel diesen Wert unabhängig vom
     Viewport wieder überschreiben (genau das ist der reale Grund, warum
     der vorige Versuch ohne !important auf Mobil wirkungslos blieb). */
  .hero:not(.hero-slider), .type-hero{ padding-top:24px !important; }
}
/* ---------- Startseite: interaktive "Über mich"-Karte ----------
   Desktop: Bild links, Text rechts (per order, unabhängig von der
   DOM-Reihenfolge). Mobile: Text zuerst, Bild darunter (siehe Media Query). */
.about-layout{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:var(--space-4); align-items:center;
}
.about-content{ order:2; }
.about-card{
  order:1;
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none;
  transform:translateY(-5px);
}
/* .reveal.is-visible setzt transform sonst auf translateY(0) zurück und würde
   den Schwebe-Effekt im Ruhezustand wieder aufheben — hier gezielt mit
   höherer Spezifität die Endposition auf den leichten Schwebe-Versatz legen. */
.about-card.reveal.is-visible{ transform:translateY(-5px); }
.about-card img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 20%; display:block;
  image-rendering:-webkit-optimize-contrast;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
  will-change:transform;
}
.about-card-overlay{
  position:absolute; inset:auto 0 0 0; z-index:1; padding:22px 24px;
  background:linear-gradient(0deg, rgba(15,14,12,0.92) 0%, rgba(15,14,12,0.55) 65%, rgba(15,14,12,0) 100%);
  transform:translateY(100%);
  transition:transform 0.4s ease;
}
.about-card-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.9rem;
  color:var(--on-dark);
}
.about-card-cta span{ display:inline-block; transition:transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.about-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .about-card:hover img, .about-card:focus-visible img{ transform:scale(1.05); }
  .about-card:hover .about-card-overlay, .about-card:focus-visible .about-card-overlay{ transform:translateY(0); }
  .about-card:hover .about-card-cta span, .about-card:focus-visible .about-card-cta span{ transform:translateX(4px); }
}
@media (hover:none){
  .about-card.is-visible img{ transform:scale(1.05); }
  .about-card.is-visible .about-card-overlay{ transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .about-card img, .about-card-overlay, .about-card-cta span{ transition:none !important; }
  .about-card-overlay{ transform:translateY(0); }
}

.about-lead{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:500;
  font-size:1.2rem; line-height:1.5; color:var(--ink); max-width:46ch;
  margin:14px 0 26px;
}
.about-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.about-facts li{ display:flex; gap:14px; align-items:flex-start; }
.about-fact-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); color:var(--accent);
}
.about-facts strong{ display:block; font-family:'Montserrat', sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink); }
.about-facts p{ margin:2px 0 0; font-size:0.88rem; max-width:none; }

@media (max-width:900px){
  .about-layout{ grid-template-columns:1fr; gap:28px; }
  .about-content{ order:1; }
  .about-card{ order:2; }
  .about-card img{ aspect-ratio:16/11; object-position:center top; }
  .about-lead{ margin:12px 0 22px; }
}

/* ---------- Leistungen-Liste (Emil-Kowalski-Reveal beim Scrollen) ---------- */
/* Übergang zu den Bewertungen bewusst kompakt statt des vollen Standard-Sektionsabstands
   (var(--space-5) oben+unten wären zusammen ~176px reiner Leerraum). */
#leistungen-list-section{ position:relative; padding-bottom:var(--space-3); }
#bewertungen-section{ padding-top:var(--space-3); }
#bewertungen-section .cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Leistungs-Karten (Startseite) — asymmetrisches Bild-Mosaik ---------- */
/* Kein festes Nebeneinander-Layout mehr: die Kacheln nehmen die volle Breite ein,
   das Glasfenster ist ab hier eine absolut positionierte Ebene, die nur beim
   Hover erscheint (siehe main.js für die per-Kachel-Positionierung). */
.leistung-split{ position:relative; margin-top:32px; }
.leistung-cards{
  display:grid; grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:clamp(150px, 20vw, 220px);
  gap:14px; margin-top:0;
}

/* Schwebendes Glasfenster: zeigt beim Hover/Tap einer Kachel die Kurzfassung, direkt
   neben der vergrößerten Kachel positioniert — JS berechnet left/top/height so, dass
   die Höhe exakt der (skalierten) Ziel-Höhe der aktiven Kachel entspricht ("aus einem
   Guss"). Helles Frosted-Glass (rgba(255,255,255,0.03)) statt des früheren dunklen
   Tons: passt zum hellen "reines Weiß"-Shadcn-Look. Da der Bereich auf hellem
   Papier-Hintergrund liegt, ist die Schrift im Panel dunkel (nicht weiß) gehalten —
   weiße Schrift auf fast-transparentem hellem Glas über hellem Papier wäre unlesbar.
   Radius identisch zu .leistung-card (var(--radius)) für den "aus einem Guss"-Look. */
.leistung-glass-panel{
  position:absolute; width:300px;
  background:rgba(255,255,255,0.03);
  -webkit-backdrop-filter:blur(var(--glass-blur, 24px)); backdrop-filter:blur(var(--glass-blur, 24px));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:40px 34px;
  /* overflow:hidden garantiert, dass die per JS gesetzte Höhe (= Höhe der aktiven
     Kachel) immer exakt eingehalten wird — ohne das würde ein längerer, zweizeiliger
     Titel (z. B. bei Kachel 1) die Box trotz gesetzter Höhe nach unten aufdrücken. */
  overflow:hidden;
  box-shadow:-24px 12px 48px -20px rgba(0,0,0,0.35);
  /* Muss UNTER dem z-index der aktiven Kachel bleiben (siehe .is-hover-active
     unten, z-index:100): steht das Glasfenster höher, ragt es während seiner
     Einschwing-Animation kurzzeitig über die noch wachsende aktive Kachel und
     "klaut" ihr an dem Punkt die Maus (echter Occlusion-Bug, per Playwright-Test
     reproduziert: die Kachel verliert :hover, der Loop springt zurück, Endlos-
     Geflacker). Trotzdem klar über den abgedunkelten Nachbarkacheln (kein
     z-index, also 0), damit es sich wie gewünscht über sie legt. */
  z-index:90;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-12px);
  /* --bento-glass-fade-ms wird von sanity-content.js gesetzt (bentoGlassFadeMs
     aus dem Kinetik-Studio), 0.6s greift als Standard ohne Sanity-Wert. */
  transition:opacity var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1), transform var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1),
    left var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1), top var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1),
    height var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1), visibility 0s linear var(--bento-glass-fade-ms, 0.6s);
}
.leistung-glass-panel.is-floating-visible{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
  transition:opacity var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1), transform var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1),
    left var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1), top var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1),
    height var(--bento-glass-fade-ms, 0.6s) cubic-bezier(0.16,1,0.3,1);
}
.leistung-glass-eyebrow{
  display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.leistung-glass-title{
  font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1.15rem; line-height:1.25;
  color:var(--ink); margin:0 0 10px; transition:opacity 0.25s ease;
}
.leistung-glass-desc{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; line-height:1.5;
  color:var(--ink-soft); margin:0; transition:opacity 0.25s ease;
}
.leistung-glass-panel.is-updating .leistung-glass-title,
.leistung-glass-panel.is-updating .leistung-glass-desc{ opacity:0; }
/* Die schwebende, JS-positionierte Variante ergibt nur auf breiten Hover-fähigen
   Bildschirmen Sinn (die Mosaik-Spalten müssen dafür nebeneinander Platz haben).
   Darunter/auf Touch bleibt das Glasfenster ein normaler Block unter den Kacheln;
   height:auto überschreibt die für Desktop per JS gesetzte inline Höhe. */
@media (max-width:1099px), (hover:none), (pointer:coarse){
  .leistung-glass-panel{
    position:relative; width:auto; margin-top:24px;
    left:auto !important; top:auto !important; height:auto !important;
    opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
  }
}

/* Hover/Tap-Fokus auf einer Kachel (unabhängig vom Kit-Fokus-Impuls-Autolauf,
   siehe main.js). Der dramatische Fokus-Effekt (massives Wachstum + Blur der
   Nachbarn) gilt NUR auf breiten Hover-Bildschirmen, wo die Mosaik-Spalten
   nebeneinander Platz zum Wachsen haben. Im schmalen Einspalten-Layout auf
   Mobil/Touch würde eine Kachel beim Skalieren in ihre gestapelten Nachbarn
   hineinlaufen und abgeschnitten wirken — dort bleibt es bei einer sanften
   Abdunklung ohne Skalierung. */
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
  .leistung-cards.is-hovering .leistung-card{
    opacity:0.15; filter:blur(6px);
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, filter 0.5s ease;
  }
  .leistung-cards.is-hovering .leistung-card.is-hover-active{
    opacity:1; filter:none; transform:translateX(-8px) scale(var(--bento-tile-scale, 1.22)); z-index:100;
  }
}
@media (max-width:1099px), (hover:none), (pointer:coarse){
  .leistung-cards.is-hovering .leistung-card{ opacity:0.5; transition:opacity 0.4s ease; }
  .leistung-cards.is-hovering .leistung-card.is-hover-active{ opacity:1; }
}
.leistung-card-1{ grid-column:1 / 4; grid-row:1 / 3; }
.leistung-card-2{ grid-column:4 / 7; grid-row:1 / 2; }
.leistung-card-3{ grid-column:4 / 7; grid-row:2 / 3; }
.leistung-card-4{ grid-column:1 / 4; grid-row:3 / 4; }
.leistung-card-5{ grid-column:4 / 7; grid-row:3 / 4; }

.leistung-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:var(--radius); overflow:hidden; padding:18px 20px;
  text-decoration:none; color:var(--on-dark);
  box-shadow:var(--shadow);
  transition:transform 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.8s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.8s cubic-bezier(0.16,1,0.3,1);
}
.leistung-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  image-rendering:-webkit-optimize-contrast;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform;
}
.leistung-card:hover img{ transform:scale(1.06); }

.leistung-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,14,12,0.88) 0%, rgba(15,14,12,0.5) 55%, rgba(15,14,12,0.05) 100%);
}
.leistung-card-title{
  position:relative; z-index:1;
  font-family:'Montserrat', sans-serif; font-weight:800; font-size:1.1rem; line-height:1.2;
  max-width:22ch;
}
.leistung-card-arrow{
  position:relative; z-index:1; align-self:flex-end;
  font-family:'Archivo Black', sans-serif; font-size:1.3rem; color:var(--accent);
  margin-top:10px;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.leistung-card:hover .leistung-card-arrow{ transform:translateX(4px); }
.leistung-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px){
  .leistung-cards{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .leistung-card-1, .leistung-card-2, .leistung-card-3, .leistung-card-4, .leistung-card-5{
    grid-column:auto; grid-row:auto; aspect-ratio:16/10; padding:20px;
  }
}

/* Eigenständige Variante von .leistung-card für eingebettete Leistungs-Kacheln
   auf freien Unterseiten (customPage) — gleiche Optik, aber ohne Grid-Position
   und ohne die Mosaik-Hover-Gruppenlogik der Startseite, da hier immer nur
   eine einzelne Karte im Fließtext steht. */
.embed-service-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; padding:20px;
  text-decoration:none; color:var(--on-dark); box-shadow:var(--shadow);
  margin:var(--space-4) 0;
}
.embed-service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.embed-service-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,14,12,0.88) 0%, rgba(15,14,12,0.5) 55%, rgba(15,14,12,0.05) 100%);
}
.embed-service-card-title{
  position:relative; z-index:1;
  font-family:'Montserrat', sans-serif; font-weight:800; font-size:1.25rem; line-height:1.2;
}
.embed-service-card-desc{ position:relative; z-index:1; font-size:0.95rem; margin-top:6px; max-width:48ch; }
.embed-service-card-arrow{
  position:relative; z-index:1;
  font-family:'Archivo Black', sans-serif; font-size:1.3rem; color:var(--accent);
  margin-top:10px;
}

/* ---------- Leistungen: Bento-Kachel-Grid (identisch auf Mobile & Desktop) ----------
   Ersetzt das frühere weiße Zeilen-Akkordeon vollständig. Jede Kachel zeigt das
   echte Baustellenfoto aus Sanity (services.N.cardImageUrl, dieselbe Quelle wie
   die Bento-Karten der Startseite) randlos als Hintergrund. Im Ruhezustand ist
   die Kachel geschlossen (nur Titel über dunklem Verlaufs-Scrim). Erst bei
   Hover (Maus/Trackpad) oder Antippen (.is-open, per Klick-Toggle in main.js)
   schiebt sich das Foto nach links, während von rechts ein durchsichtiges
   Glasfenster mit Kurztext hereingleitet — Breite statt Höhe animiert, damit
   auf JEDEM Breakpoint dieselbe Kachelform bestehen bleibt. Kein Blau beim
   Antippen (siehe html{-webkit-tap-highlight-color:transparent} oben). */
.service-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;
  margin-top:32px;
}
/* Abgedunkelter Vollbild-Hintergrund, sichtbar sobald irgendeine Zeile offen
   ist (.is-open — wird sowohl bei Klick als auch bei Hover per JS gesetzt,
   siehe main.js). Liegt als erstes Kind IN .service-list, damit der
   :has()-Selektor unten greift. position:fixed macht die tatsächliche
   Position irrelevant. */
.service-row-backdrop{
  position:fixed; inset:0; z-index:248;
  background:rgba(10,10,10,0); pointer-events:none;
  transition:background 0.4s cubic-bezier(0.16,1,0.3,1);
}
.service-list:has(.service-row.is-open) .service-row-backdrop{
  background:rgba(10,10,10,0.78); pointer-events:auto;
}
/* Ortsfester "Slot": behält die Grid-Zellengröße bei, auch wenn die Zeile
   darin sich zum zentrierten Spotlight vergrößert. Das Öffnen läuft bewusst
   über JS (mouseenter/mouseleave mit kurzer Verzögerung, siehe main.js) statt
   über reines CSS :hover auf der Zeile selbst — sonst würde die Maus beim
   Aufploppen unter der (zum Bildschirmzentrum springenden) Karte "weggezogen",
   :hover bräche sofort wieder ab und die Karte würde endlos zwischen
   offen/zu flackern. */
.service-row-slot{
  position:relative; border-radius:var(--radius);
  aspect-ratio:4/3; scroll-margin-top:90px;
}
/* +1 Offset: .service-row-backdrop ist das erste Kind von .service-list,
   die Slots folgen ab Kindposition 2. */
.service-row-slot:nth-child(2) .service-row{ transition-delay:0.05s; }
.service-row-slot:nth-child(3) .service-row{ transition-delay:0.12s; }
.service-row-slot:nth-child(4) .service-row{ transition-delay:0.19s; }
.service-row-slot:nth-child(5) .service-row{ transition-delay:0.26s; }
.service-row-slot:nth-child(6) .service-row{ transition-delay:0.33s; }
.service-row{
  position:relative; overflow:hidden; border-radius:var(--radius);
  width:100%; height:100%; background:var(--surface-deep);
  transition:box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}

.service-row-bg{
  display:block; position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  transition:transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.service-row::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.35) 55%, rgba(15,15,15,0.08) 100%);
}
.service-row-toggle{
  all:unset; box-sizing:border-box; position:relative; z-index:3;
  display:flex; align-items:flex-end; width:100%; height:100%;
  padding:20px; cursor:pointer; touch-action:manipulation;
}
.service-row-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.service-row-num{ display:none; } /* keine Nummerierung mehr */
.service-row-icon{ display:none; } /* "+"-Icon obsolet — Hover/Tap auf der ganzen Kachel öffnet */
.service-row-title{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.05rem;
  color:#fff;
  transition:opacity 0.3s ease;
}
.service-row-verb{ color:var(--accent); margin-right:6px; }
.legal-star{ color:var(--accent); margin-left:2px; }

/* Glas-Text-Panel — im Ruhezustand nicht im Fluss (die Kachel bleibt normal
   im Grid). Erscheint erst zusammen mit dem "Spotlight"-Zustand weiter unten,
   dann als eigenständige rechte Hälfte NEBEN dem Bild (nicht mehr darüber),
   randlos genug Platz für den kompletten, unabgeschnittenen Text. */
.service-row-detail{
  display:none;
  flex-direction:column; justify-content:flex-start;
  background:rgba(255,255,255,0.1);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:0 var(--radius) var(--radius) 0;
  overflow-y:auto;
}
.service-row-detail-title{
  font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1.3rem; line-height:1.25;
  color:#fff; margin:0 0 14px; flex-shrink:0;
}
.service-row-detail-title .service-row-verb{ color:var(--accent); }
.service-row-detail p{
  color:rgba(255,255,255,0.88); font-size:0.98rem; line-height:1.6; margin:0; max-width:none;
}
.service-row-detail .inline-cta{ color:var(--accent); font-size:0.95rem; margin-top:auto; padding-top:20px; }
/* Bildergalerien/Vorher-Nachher bleiben ungenutzt: für ein Fotoraster ist im
   Zwei-Spalten-Spotlight kein vorgesehener Platz. */
.service-row-vn, .service-row-gallery{ display:none; }

.service-row-close{
  display:none; position:absolute; top:14px; right:14px; z-index:6;
  width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.35); background:rgba(0,0,0,0.3);
  color:#fff; font-family:'Archivo Black',sans-serif; font-size:1rem; line-height:1;
  cursor:pointer;
}
.service-row-close:hover{ background:rgba(0,0,0,0.5); }

/* "Spotlight": Zeile bricht komplett aus dem Grid aus, wird fixiert &
   im Bildschirmzentrum vergrößert dargestellt — bewusst NICHT an der
   ursprünglichen Grid-Position, damit Karten am Rand (erste/letzte Spalte)
   nicht über den Viewport-Rand hinaus abgeschnitten werden. Bild nimmt die
   linke Hälfte ein, das Glas-Textpanel die rechte, nebeneinander statt
   übereinanderliegend, mit vollständig lesbarem Text.
   .is-open wird sowohl per Klick (main.js, alle Geräte) als auch per
   Hover-Intent (main.js, nur Maus/Trackpad — siehe dortige Kommentare) auf
   .service-row gesetzt. Reines CSS :hover geht hier NICHT, weil die Karte
   beim Öffnen unter dem unbewegten Mauszeiger wegspringt (fixed+zentriert)
   — :hover bräche sofort wieder ab und die Karte würde endlos flackern. */
.service-row.is-open{
  position:fixed; z-index:250; margin:0;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1040px, 92vw); height:min(540px, 82vh);
  display:flex; align-items:stretch;
  box-shadow:0 44px 110px -24px rgba(0,0,0,0.65);
}
/* .reveal.is-visible setzt transform sonst auf translateY(0) zurück (gleiche
   Spezifität, aber später in der Kaskade) und würde die Zentrierung hier
   aufheben — siehe .about-card.reveal.is-visible oben für dasselbe Problem. */
.service-row.is-open.reveal.is-visible{ transform:translate(-50%,-50%); }
.service-row.is-open::after{ left:0; right:50%; }
.service-row.is-open .service-row-bg{ position:relative; inset:auto; width:50%; height:100%; flex-shrink:0; }
.service-row.is-open .service-row-toggle{ position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; }
.service-row.is-open .service-row-detail{ display:flex; position:relative; width:50%; height:100%; flex-shrink:0; padding:32px 30px; }
.service-row.is-open .service-row-close{ display:flex; }
@media (prefers-reduced-motion: reduce){
  .service-row-bg, .service-row-title{ transition:none; }
}
@media (max-width:600px){
  .service-list{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .service-row.is-open{ width:94vw; height:88vh; flex-direction:column; }
  .service-row.is-open .service-row-bg,
  .service-row.is-open .service-row-detail{ width:100%; height:50%; }
  .service-row.is-open .service-row-detail{ border-radius:0 0 var(--radius) var(--radius); padding:22px 20px; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,14,12,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-img{
  max-width:min(92vw, 1100px); max-height:86vh; object-fit:contain;
  border-radius:var(--radius-sm); box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
}
.lightbox-close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(244,241,233,0.4);
  background:rgba(255,255,255,0.06); color:var(--on-dark);
  font-family:'Archivo Black',sans-serif; font-size:1.1rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.14); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(244,241,233,0.4);
  background:rgba(255,255,255,0.06); color:var(--on-dark);
  font-family:'Archivo Black',sans-serif; font-size:1.2rem; cursor:pointer;
}
.lightbox-nav:hover{ background:rgba(255,255,255,0.14); }
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
@media (max-width:600px){
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:10px; right:10px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox{ transition:none; }
}


/* ---------- "Drei Dinge"-Sektion: Bento-Glass-Look statt Timeline ----------
   Tiefdunkler Premium-Hintergrund (--surface-deep) mit drei freischwebenden
   Frosted-Glass-Karten, keine Nummerierung mehr — die Karten tragen sich
   über Icon + Titel statt über eine Zählung. */
.promise-section{ background:var(--surface-deep); }
.promise-section .eyebrow{ color:var(--accent); }
.promise-section h2{ color:var(--on-dark); }
.promise-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.promise-card{
  padding:36px 30px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(var(--glass-blur, 24px)); -webkit-backdrop-filter:blur(var(--glass-blur, 24px));
  border-radius:var(--radius);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.5s ease, background 0.5s ease;
}
.promise-card:hover{
  transform:translateY(-4px);
  border-color:rgba(194,149,63,0.35);
  background:rgba(255,255,255,0.04);
}
.promise-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:22px;
  border-radius:50%; color:var(--accent);
  background:rgba(194,149,63,0.1); border:1px solid rgba(194,149,63,0.25);
}
.promise-card h3{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  color:var(--on-dark); font-size:1.15rem; margin:0 0 12px;
}
.promise-card p{
  font-family:'Plus Jakarta Sans', sans-serif; color:var(--on-dark-soft);
  font-size:0.95rem; line-height:1.6; margin:0;
}
@media (max-width:700px){
  .promise-grid{ grid-template-columns:1fr; gap:16px; }
  .promise-card{ padding:28px 24px; }
}

/* ---------- Split-Sektion (Bild + Text versetzt) ---------- */
.split{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:var(--space-4);
  align-items:center;
}
.split.reverse{ grid-template-columns:1.1fr 0.9fr; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); }
.split-media img{
  border-radius:var(--radius);
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform;
}
.split-media:hover img{ transform:scale(1.03); }
.split-media[data-parallax] img{
  transform:translateY(var(--parallax-y, 0px)) scale(1.15);
  transition:transform 0.1s linear;
}
.split-media[data-parallax]:hover img{ transform:translateY(var(--parallax-y, 0px)) scale(1.18); }
.split-media::before{
  content:''; position:absolute; inset:18px -18px -18px 18px;
  border:2px solid var(--accent); border-radius:var(--radius); z-index:-1;
}
@media (prefers-reduced-motion: reduce){
  .split-media[data-parallax] img{ transform:none !important; }
}

@media (max-width: 900px){
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .split-media::before{ display:none; }
}

/* ---------- Großformatige Typografie-Sektion ---------- */
.type-hero{ padding:calc(var(--space-6) + 20px) 0 var(--space-5); overflow:hidden; }
.type-hero .display{
  font-size:clamp(3.2rem, 11vw, 8.5rem);
  line-height:0.92;
  letter-spacing:-0.02em;
}
.type-hero .type-line{ display:block; overflow:hidden; }
.type-hero .type-line span{ display:block; transform:translateY(100%); transition:transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.type-hero.is-visible .type-line span{ transform:translateY(0); }
.type-hero .type-line:nth-child(2) span{ transition-delay:0.08s; }
.type-hero .type-line:nth-child(3) span{ transition-delay:0.16s; }
.type-hero-subline{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:500;
  font-size:clamp(1rem, 2vw, 1.25rem); color:var(--ink); letter-spacing:0.01em;
  margin:var(--space-2) 0 0; max-width:none;
}
.type-hero-foot{ margin-top:var(--space-4); }
/* Porträtfoto sitzt oben rechts neben dem Namen statt unten neben dem
   Einleitungssatz — freischwebend über der übergroßen Überschrift positioniert
   (die Überschrift ist bewusst so breit, dass ein Nebeneinander im normalen
   Textfluss keinen Platz hätte), .type-hero-foot enthält dadurch nur noch
   den Absatz. .type-hero braucht dafür einen Positionierungskontext. */
.type-hero .wrap{ position:relative; }
.type-hero-portrait{
  position:absolute; top:0; right:24px;
  width:150px; height:150px; object-fit:cover; border-radius:50%;
  box-shadow:var(--shadow); z-index:1;
}
@media (max-width:900px){ .type-hero-portrait{ width:110px; height:110px; } }
@media (max-width:600px){ .type-hero-portrait{ width:84px; height:84px; } }
@media (prefers-reduced-motion: reduce){
  .type-hero .type-line span{ transform:none; transition:none; }
}

/* ---------- Live Google-Bewertungen (Karten) ---------- */
.review-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4); }
.review-card{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 22px 18px;
}
/* Karten selbst bleiben starr im Grid — nur der Inhalt blendet alle 8s
   sanft zur nächsten Bewertung über (kein Carousel, keine Bewegung). */
.review-card-body{ transition:opacity 1s ease-in-out; }
@media (prefers-reduced-motion: reduce){
  .review-card-body{ transition:none; }
}
.review-card-stars{ display:flex; gap:2px; color:var(--accent); margin-bottom:12px; }
.review-card blockquote{
  margin:0 0 16px; font-style:italic; color:var(--ink);
  font-size:0.98rem; line-height:1.55;
}
.review-card figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--line);
}
.review-card-author{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.85rem; color:var(--ink); }
.review-card-date{ font-size:0.76rem; color:var(--ink-soft); white-space:nowrap; }
.review-attribution{ margin-top:var(--space-3); font-size:0.82rem; color:var(--ink-soft); }
.review-attribution a{ color:var(--link); }
@media (max-width:900px){ .review-cards{ grid-template-columns:1fr; gap:12px; } }

/* "mehr…"-Link: kappt lange Bewertungen auf eine feste Länge (siehe
   TRUNCATE_AT in google-reviews.js), damit eine besonders lange Bewertung
   die Karte nie aufbläht und den Rest der Seite nach unten schiebt. */
.review-card-more{
  all:unset; cursor:pointer; color:var(--link); font-style:normal;
  font-weight:600; font-size:0.92em;
}
.review-card-more:hover{ text-decoration:underline; }

/* Glas-Popup für die volle Bewertung — gleicher dunkler Vollbild-Hintergrund
   wie die Bild-Lightbox (.lightbox), aber mit einer Frosted-Glass-Karte statt
   einem Bild. Nutzt dieselben .lightbox-close/-nav-Button-Klassen. */
.review-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,14,12,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
.review-lightbox.is-open{ opacity:1; visibility:visible; }
.review-lightbox-card{
  width:100%; max-width:560px; max-height:80vh; overflow-y:auto;
  background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  padding:36px 32px;
}
.review-lightbox-card .review-card-stars{ color:var(--accent); }
.review-lightbox-card blockquote{
  margin:0 0 18px; font-style:italic; color:#fff;
  font-size:1.05rem; line-height:1.6;
}
.review-lightbox-card figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,0.18);
}
.review-lightbox-card .review-card-author{ color:#fff; }
.review-lightbox-card .review-card-date{ color:rgba(255,255,255,0.65); }
@media (max-width:600px){ .review-lightbox-card{ padding:26px 22px; } }

/* ---------- Vorher/Nachher ---------- */
.vn-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.vn-pair figure{ margin:0; position:relative; overflow:hidden; }
.vn-pair figure img{ transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.vn-pair figure:hover img{ transform:scale(1.04); }
.vn-pair figcaption{
  position:absolute; left:10px; bottom:10px;
  background:rgba(25,22,20,0.78); color:var(--on-dark);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--radius-sm);
}
.vn-block{ margin-bottom:var(--space-4); }
.vn-block:nth-child(2n) .vn-pair{ transform:translateX(4%); }
@media (max-width:700px){ .vn-block:nth-child(2n) .vn-pair{ transform:none; } }

/* ---------- FAQ Accordion ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 0;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family:'Archivo Black',sans-serif; color:var(--link); font-size:1.3rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .a{ padding:0 0 22px; color:var(--ink-soft); max-width:70ch; }

/* ---------- Formular: Frosted-Glass-Panel, shadcn-transparente Felder ---------- */
.form-card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:var(--space-4);
  -webkit-backdrop-filter:blur(var(--glass-blur, 24px)); backdrop-filter:blur(var(--glass-blur, 24px));
  box-shadow:var(--shadow);
}
.field{ margin-bottom:var(--space-3); }
.field label{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.85rem; margin-bottom:8px; color:var(--ink-soft); }
.field input, .field textarea{
  width:100%; padding:11px 2px; border:none; border-bottom:1px solid var(--line);
  border-radius:0; font-family:'Plus Jakarta Sans', sans-serif; font-size:0.98rem;
  background:transparent; color:var(--ink);
  transition:border-color 0.25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:0.55; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--brand-green); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.field small{ display:block; color:var(--ink-soft); margin-top:6px; font-size:0.82rem; }

.upload-trigger{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.88rem;
  color:var(--ink-soft); background:transparent;
  transition:border-color 0.2s cubic-bezier(0.16,1,0.3,1), color 0.2s cubic-bezier(0.16,1,0.3,1);
}
.upload-trigger:hover{ border-color:var(--accent); color:var(--accent); }
.upload-trigger svg{ flex-shrink:0; }
.field input.file-input-hidden, input[type="file"].file-input-hidden{
  position:absolute !important; width:1px !important; height:1px !important; margin:-1px; padding:0 !important;
  overflow:hidden; white-space:nowrap; border:0 !important; clip:rect(0,0,0,0);
}
.file-input-hidden:focus-visible + small,
.upload-trigger:has(+ .file-input-hidden:focus-visible){
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
.form-disclaimer{ margin-top:14px; font-size:0.78rem; color:var(--ink-soft); text-align:center; }
.form-disclaimer a{ color:var(--ink-soft); text-decoration:underline; }
.form-error{
  margin-top:14px; padding:12px 16px; border-radius:var(--radius-sm);
  background:rgba(220,80,60,0.08); border:1px solid rgba(220,80,60,0.35);
  color:#b3402a; font-size:0.85rem; text-align:center;
}
@media (prefers-color-scheme: dark){
  .form-error{ color:#e88a76; }
}

/* ---------- Danke-Popup (Kontaktformular, nach erfolgreichem Absenden) ----------
   Immer-dunkler Glas-Look wie Lightbox/Mega-Menü/Hero — bewusst unabhängig vom
   Light/Dark-Seitenmodus, da es sich um eine kurzzeitige, immersive Bestätigung
   handelt statt einer normalen Seitenfläche. */
.danke-popup{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,14,12,0.85);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.3s;
}
.danke-popup.is-visible{ opacity:1; visibility:visible; transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1); }
.danke-popup-card{
  position:relative; max-width:420px; width:100%;
  background:rgba(15,15,15,var(--glass-opacity, 0.85));
  -webkit-backdrop-filter:blur(var(--glass-blur, 24px)); backdrop-filter:blur(var(--glass-blur, 24px));
  border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius);
  padding:48px 36px 36px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  transform:translateY(14px) scale(0.98);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.danke-popup.is-visible .danke-popup-card{ transform:translateY(0) scale(1); }
.danke-popup-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:20px;
  background:rgba(194,149,63,0.12); color:var(--accent);
}
.danke-popup-card h3{
  font-family:'Archivo Black',sans-serif; font-weight:400; font-size:1.4rem;
  color:var(--on-dark); margin:0 0 12px;
}
.danke-popup-card p{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.92rem; line-height:1.55;
  color:var(--on-dark-soft); margin:0 0 28px;
}
.danke-popup-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.danke-popup-actions .btn{ width:100%; justify-content:center; }
.danke-popup-dismiss{
  background:none; border:0; color:var(--on-dark-soft); font-family:'Montserrat',sans-serif;
  font-size:0.85rem; text-decoration:underline; cursor:pointer; padding:4px;
}
.danke-popup-dismiss:hover{ color:var(--on-dark); }
.danke-popup-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(244,241,233,0.4);
  background:rgba(255,255,255,0.06); color:var(--on-dark);
  font-family:'Archivo Black',sans-serif; font-size:1rem; line-height:1; cursor:pointer;
}
.danke-popup-close:hover{ background:rgba(255,255,255,0.14); }
@media (prefers-reduced-motion: reduce){
  .danke-popup, .danke-popup-card{ transition:none; }
}

.kontakt-portrait{
  border-radius:var(--radius); overflow:hidden; margin-top:var(--space-3);
  border:1px solid var(--line); max-width:360px;
}
.kontakt-portrait img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.kontakt-portrait-caption{ display:none; }
/* Exklusiv Smartphone: das große Quadrat-Portrait schrumpft zu einem kompakten,
   kreisrunden Avatar direkt neben einer kurzen Namens-/Rollenangabe, statt als
   großer Block den Textfluss zu unterbrechen. Am PC bleibt es unverändert groß. */
@media (max-width:768px){
  .kontakt-portrait{
    display:flex; align-items:center; gap:14px;
    border:none; border-radius:0; overflow:visible; max-width:none;
  }
  .kontakt-portrait img{
    width:90px; height:90px; aspect-ratio:1/1; border-radius:50%;
    flex-shrink:0; border:1px solid var(--line);
  }
  .kontakt-portrait-caption{
    display:flex; flex-direction:column; gap:2px;
    font-family:'Plus Jakarta Sans',sans-serif;
  }
  .kontakt-portrait-caption strong{ font-family:'Montserrat',sans-serif; font-size:0.95rem; color:var(--ink); }
  .kontakt-portrait-caption small{ font-size:0.8rem; color:var(--ink-soft); }
}

/* ---------- Footer ---------- */
footer.site{ background:var(--surface-dark); color:var(--on-dark-soft); padding:var(--space-4) 0 var(--space-3); }
footer.site .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-4); }
footer.site h4{ color:var(--on-dark); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; }
footer.site a{ color:var(--on-dark-soft); text-decoration:none; display:block; margin-bottom:8px; }
footer.site a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--line-dark); margin-top:var(--space-4); padding-top:20px; font-size:0.8rem; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
footer.site .footer-bottom a{ display:inline; margin-bottom:0; }
.footer-legal{ margin:10px auto 0; font-size:0.72rem; color:var(--on-dark-soft); opacity:0.75; max-width:var(--wrap); }
@media (max-width:800px){ footer.site .wrap{ grid-template-columns:1fr; gap:28px; } }

/* ---------- CTA-Leiste (dezent, im Fließtext) ---------- */
.inline-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.92rem;
  color:var(--link); text-decoration:none; border-bottom:2px solid var(--link);
  padding-bottom:2px;
}
.inline-cta:hover{ color:var(--ink); border-color:var(--ink); }

.cta-band{
  background:var(--surface-dark-2); color:var(--on-dark);
  border-radius:var(--radius); padding:var(--space-4);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap;
}
.cta-band h3{ color:var(--on-dark); margin-bottom:6px; }
.cta-band p{ color:var(--on-dark-soft); margin:0; }

/* ---------- Scroll-Animation: flüssiges Fade-in-up ---------- */
.reveal{
  opacity:0; transform:translateY(var(--reveal-distance, 40px));
  /* --reveal-duration/--reveal-distance werden von sanity-content.js gesetzt
     (revealDurationMs/revealDistancePx aus dem Kinetik-Studio), 0.8s/40px
     greifen als Standard ohne Sanity-Wert. */
  transition:opacity var(--reveal-duration, 0.8s) cubic-bezier(0.16,1,0.3,1), transform var(--reveal-duration, 0.8s) cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:0.08s; }
.reveal-delay-2.is-visible{ transition-delay:0.16s; }
.reveal-delay-3.is-visible{ transition-delay:0.24s; }

/* ---------- Kuratierte Sektions-Design-Overrides (sectionDesign) ----------
   Nur gesetzt, wenn im Studio aktiv ein Wert gewählt wurde (siehe
   design-controls.js) — sonst keine Klasse, keine Änderung. Alle Werte
   bleiben innerhalb der bestehenden rem-/CSS-Variablen-Skala, keine neuen
   Schriften, keine Verläufe, kein zusätzliches starres Raster. */

/* Textgröße: multipliziert die vorhandenen rem-Basiswerte um kuratierte
   Faktoren — dieselbe Größenordnung wie effectSettings.bentoTileScale (1.22). */
[data-design-section].dsize-klein h2{ font-size:calc(1.35rem * 0.85); }
[data-design-section].dsize-klein .eyebrow{ font-size:calc(0.74rem * 0.85); }
[data-design-section].dsize-klein .lead, [data-design-section].dsize-klein .about-lead{ font-size:calc(1.1rem * 0.85); }
[data-design-section].dsize-gross h2{ font-size:calc(1.35rem * 1.15); }
[data-design-section].dsize-gross .eyebrow{ font-size:calc(0.74rem * 1.15); }
[data-design-section].dsize-gross .lead, [data-design-section].dsize-gross .about-lead{ font-size:calc(1.1rem * 1.15); }
[data-design-section].dsize-sehr-gross h2{ font-size:calc(1.35rem * 1.3); }
[data-design-section].dsize-sehr-gross .eyebrow{ font-size:calc(0.74rem * 1.3); }
[data-design-section].dsize-sehr-gross .lead, [data-design-section].dsize-sehr-gross .about-lead{ font-size:calc(1.1rem * 1.3); }

/* Akzentfarbe: nur Dachzeile + Überschrift, nicht der komplette Fließtext
   (Kontrast/Lesbarkeit bleibt gewahrt). */
[data-design-section].daccent-gold .eyebrow, [data-design-section].daccent-gold h2{ color:var(--accent); }
[data-design-section].daccent-gruen .eyebrow, [data-design-section].daccent-gruen h2{ color:var(--brand-green); }

/* Glas: überschreibt lokal (nur für Nachfahren dieser Sektion) dieselben
   --glass-blur/--glass-opacity-Variablen, die themeSettings global auf :root
   setzt — exakt dasselbe Vererbungs-Prinzip wie bei --hero-desktop-pos/
   --intro-blur. Ohne Glas-Fläche in der Sektion: kein sichtbarer Effekt. */
[data-design-section].dglas-kein{ --glass-blur:0px; --glass-opacity:0; }
[data-design-section].dglas-leicht{ --glass-blur:10px; --glass-opacity:0.4; }
[data-design-section].dglas-stark{ --glass-blur:36px; --glass-opacity:0.85; }

/* Fade-Timing: überschreibt lokal --reveal-duration/--reveal-distance, die
   .reveal (siehe oben) ohnehin schon per var() mit Fallback konsumiert. */
[data-design-section].dfade-schnell{ --reveal-duration:0.4s; --reveal-distance:20px; }
[data-design-section].dfade-sanft{ --reveal-duration:1.3s; --reveal-distance:60px; }
[data-design-section].dfade-aus{ --reveal-duration:0s; --reveal-distance:0px; }

/* Layout-Variante "Wer hier anpackt": .split.reverse existiert für die
   anfang-Sektion (ueber-mich.html) bereits — hier das Pendant für
   .about-layout (Startseite). */
.about-layout.layout-flip .about-content{ order:1; }
.about-layout.layout-flip .about-card{ order:2; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.center-narrow{ max-width:640px; }
/* Scharf begrenzter Rahmen für die Karte (Zustimmungs-Hinweis wie geladene
   Karte gleichermaßen) — hauchdünne, edle Trennlinie statt eines unbegrenzten
   Blocks mitten auf dunkler Fläche. */
.map-frame{ border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden; }
.map-frame iframe{ display:block; }
.map-consent{
  background:var(--glass-bg); padding:var(--space-4); text-align:center;
}
.badge-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-2); }

/* ---------- Einsatzgebiet: interaktive Orts-Pillen + Anfahrtskosten-Glaspanel ---------- */
.einsatzgebiet-interactive{ position:relative; }
.einsatzgebiet-pill{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.8rem;
  background:var(--paper-dim); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  cursor:pointer; color:var(--ink); transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.einsatzgebiet-pill:hover{ border-color:var(--accent); }
.einsatzgebiet-pill.is-active{
  background:var(--brand-green); border-color:var(--brand-green); color:#0b2a17;
}
.einsatzgebiet-popover{
  position:absolute; top:0; right:0; z-index:50; width:min(280px, 90vw);
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur, 24px)); -webkit-backdrop-filter:blur(var(--glass-blur, 24px));
  border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.einsatzgebiet-popover:not([hidden]){ opacity:1; transform:translateY(0); pointer-events:auto; }
.einsatzgebiet-popover-ort{
  font-family:'Archivo Black', sans-serif; color:var(--ink); font-size:1rem;
}
.einsatzgebiet-popover-kosten{
  font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink-soft); font-size:0.9rem;
}
.einsatzgebiet-popover-close{
  position:absolute; top:8px; right:10px; background:none; border:none; color:var(--ink-soft);
  font-size:1.2rem; line-height:1; cursor:pointer; padding:4px;
}
.einsatzgebiet-popover-close:hover{ color:var(--ink); }
@media (max-width:700px){
  .einsatzgebiet-popover{ position:static; margin:12px 0 20px; transform:none; width:100%; }
  .einsatzgebiet-popover:not([hidden]){ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .einsatzgebiet-popover{ transition:none; }
}
.announce-bar{ background:var(--accent); color:var(--accent-ink); text-align:center; padding:10px 16px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.85rem; }

.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--chip-dark); color:var(--on-dark);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
  padding:16px 20px;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ color:var(--on-dark-soft); margin:0; max-width:70ch; }
.cookie-banner a{ color:var(--accent); }
.cookie-banner .btn{ padding:9px 20px; flex-shrink:0; }