/* =========================================================================
   liyoli — Firmen-Website. Nobel-dunkel Studio-Look.
   Designsystem: Tiefnacht-Anthrazit + Kupfer/Terrakotta-Gold + kühler Teal.
   Vanilla, kein Framework. Ladeleicht ist Verkaufsargument.
   ========================================================================= */

/* ---------- Design-Tokens ---------- */
:root {
  /* Grund / Flächen */
  --bg:        #0b0e14;   /* Tiefnacht */
  --bg-2:      #10141d;   /* leicht heller (Sektionswechsel) */
  --surface:   #161b26;   /* Karten */
  --surface-2: #1c2230;   /* Karten-Hover */
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.16);

  /* Text */
  --text:      #f4f1ea;   /* warmes Off-White */
  --muted:     #a7adba;   /* gedämpft */
  --muted-2:   #7c8394;

  /* Akzente — liyoli-eigen (NICHT City-Grill-Amber) */
  --gold:      #e0a85e;   /* Kupfer/Terrakotta-Gold */
  --gold-soft: #f0c992;
  --teal:      #6fd3c4;   /* kühler Ruhe-Akzent */
  --gold-glow: rgba(224,168,94,0.18);

  /* Maße */
  --maxw: 1180px;
  --gap:  clamp(1rem, 3vw, 2rem);
  --radius: 18px;
  --radius-sm: 12px;

  /* Typo */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow: 0 24px 60px -20px rgba(0,0,0,0.65);
  --shadow-gold: 0 18px 50px -18px var(--gold-glow);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Horizontaler Overflow wird HIER geclippt (Scroll-Container ist html/Viewport,
     nicht body). "clip" unterbindet auch das Herausragen von position:fixed-
     Descendants (Mobil-Menü translateX(100%)) aus der scrollWidth.
     "hidden" davor = Fallback für Browser ohne clip-Support (ältere Safari/
     WebViews): ohne Fallback fällt die ganze Deklaration weg und Mobil-Browser
     zoomen die Seite bei transientem Overflow klein. hidden auf html bricht
     kein position:sticky (html ist der Root-Scroller). */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}

/* =========================================================================
   FAIL-VISIBLE REVEAL (Notfall-Regel: Reveal-Effekte müssen fail-visible sein)
   Grundsatz: Ein einzelner Script-Fehler darf NIE wieder Inhalt verstecken.
   - Ohne JS / bevor JS die Klasse setzt: [data-reveal] ist voll sichtbar (kein
     opacity:0 im Ausgangs-CSS — das Verstecken macht ausschliesslich das JS).
   - MIT aktivem JS (html.reveal-js): Elemente starten unsichtbar, ABER eine
     Fail-Safe-Animation zwingt sie nach 1,5 s garantiert auf opacity:1, falls
     der IntersectionObserver nie feuert (JS-Ausnahme nach Init, o.ae.).
   ========================================================================= */
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
html.reveal-js [data-reveal] {
  /* Sicherheitsnetz: spaetestens nach 1,5 s sichtbar, egal was das JS tut.
     Der Observer setzt bei echtem Reveal inline opacity:1 (gewinnt sofort);
     bleibt er aus, macht diese Animation den Inhalt trotzdem sichtbar. */
  animation: reveal-failsafe 0.01s linear 1.5s forwards;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] { animation: none; opacity: 1 !important; transform: none !important; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1rem; }
.muted { color: var(--muted); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.section-alt { background: var(--bg-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: 0.6; }

.section-head { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head p { color: var(--muted); font-size: 1.12rem; }

/* Skip-Link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: #1a1206; padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Fokus-Sichtbarkeit (Bedienbarkeit) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease),
    background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  min-height: 48px; will-change: transform;
}
.btn-primary { background: var(--gold); color: #1a1206; box-shadow: var(--shadow-gold); }
.btn-primary:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 22px 55px -16px var(--gold-glow); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--gold); transform: translateY(-2px); }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

/* Permanenter Kontakt-Schnellbutton (Header, immer sichtbar) */
.btn-contact-quick {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0.5rem 0.95rem; min-height: 44px; font-weight: 600; font-size: 0.95rem;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-contact-quick:hover { background: rgba(224,168,94,0.14); border-color: var(--gold); transform: translateY(-1px); }
/* Auf Desktop steht "Kontakt" bereits im Nav-Menue -> Quick-Button nur auf Mobil. */
@media (min-width: 861px) { .btn-contact-quick { display: none; } }
/* Kontakt-Punkt im Mobil-Menue optisch als Gold-Akzent hervorheben */
.nav-contact { color: var(--gold-soft) !important; }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1.1rem, 4vw, 2.2rem);
  background: rgba(11,14,20,0.55); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.topbar.is-scrolled { background: rgba(11,14,20,0.9); border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.brand .dot { color: var(--gold); }
.brand small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); }
.topbar-nav { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.topbar-nav a { font-size: 0.96rem; color: var(--muted); font-weight: 500; transition: color .2s; position: relative; }
.topbar-nav a:hover, .topbar-nav a.is-active { color: var(--text); }
.topbar-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold); transition: width .25s var(--ease); }
.topbar-nav a:hover::after, .topbar-nav a.is-active::after { width: 100%; }
.topbar-cta { display: inline-flex; }
.topbar-nav-wrap .mobile-cta { display: none; } /* nur im offenen Mobil-Menü sichtbar */

/* Mobile Menü */
.nav-toggle { display: none; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; padding: 0.5rem 0.9rem;
  font-weight: 600; font-size: 0.95rem; cursor: pointer; min-height: 44px; }
@media (max-width: 860px) {
  .topbar-nav-wrap {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    /* Volldeckender liyoli-Anthrazit — nichts scheint durch */
    background: #0b0e14; border-left: 1px solid var(--line-2);
    box-shadow: -30px 0 60px -10px rgba(0,0,0,0.7);
    transform: translateX(100%); transition: transform .35s var(--ease), visibility .35s;
    padding: 5.5rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 0.6rem; z-index: 99;
    /* Geschlossen komplett aus dem Fluss: verhindert horizontalen Overflow
       (fixed+translateX-Ueberhang) UND Tab-Fokus auf unsichtbare Links. */
    visibility: hidden;
  }
  .topbar-nav-wrap.is-open { transform: translateX(0); visibility: visible; }
  .topbar-nav { flex-direction: column; align-items: stretch; gap: 0.6rem; width: 100%; }
  /* Menüpunkte als klare Pills/Buttons — VOLLDECKEND, sichtbarer Rahmen + Schatten */
  .topbar-nav a {
    display: block; font-size: 1.05rem; font-weight: 600; color: var(--text);
    background: #12161d; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    padding: 0.9rem 1.15rem; min-height: 50px; line-height: 1.4;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.4);
    transition: background .2s, border-color .2s, color .2s;
  }
  .topbar-nav a::after { display: none; } /* Desktop-Unterstrich aus im Overlay */
  .topbar-nav a:hover, .topbar-nav a.is-active { background: #1c2230; border-color: var(--gold); color: var(--text); }
  .topbar-nav-wrap .mobile-cta { display: inline-flex; margin-top: 0.6rem !important; }
  .nav-toggle { display: inline-flex; }
  .topbar-cta.desktop-only { display: none; }
  /* Header kompakt halten: Kontakt-Quick nur als Icon, Menue-Text weg -> alles passt. */
  .topbar { gap: 0.5rem; padding-left: 1rem; padding-right: 1rem; }
  .btn-contact-quick { padding: 0.5rem 0.7rem; font-size: 0; gap: 0; }
  .btn-contact-quick span[aria-hidden] { font-size: 1.15rem; }
  .nav-toggle { padding: 0.5rem 0.7rem; font-size: 0; gap: 0; }
  .nav-toggle span[aria-hidden] { font-size: 1.3rem; }
}
@media (max-width: 400px) {
  .brand small { display: none; } /* "Nordhessen" weg auf sehr schmalen Screens */
  /* Backdrop: 100% OPAK (kein Durchscheinen des Inhalts, kein blur-only).
     Nils-Befund: Menue wirkte durchscheinend -> Overlay jetzt voll deckend. */
  .nav-backdrop { position: fixed; inset: 0; background: #06080c; opacity: 0; pointer-events: none;
    transition: opacity .3s; z-index: 98; }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: 6rem; padding-bottom: 3rem; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 10%, transparent, var(--bg) 78%),
    linear-gradient(180deg, rgba(11,14,20,0.4), var(--bg)); }
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .accent { display: block; color: var(--gold); font-style: italic; }
.hero-lead { font-size: 1.2rem; color: var(--muted); max-width: 34ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--muted); font-size: 0.95rem; }
.hero-badges span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-badges .check { color: var(--teal); font-weight: 700; }

/* ---------- Signature: "Website entsteht" ---------- */
.build-stage {
  position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--radius);
  background: linear-gradient(160deg, #141a26 0%, #0e1119 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.build-window {
  position: absolute; inset: 0; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.build-chrome { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.2rem; }
.build-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #363c4a; display: block; }
.build-chrome .bar { flex: 1; height: 10px; border-radius: 6px; background: #2a3040; margin-left: 0.5rem; }
.build-canvas { position: relative; flex: 1; border-radius: 10px; overflow: hidden; background: #0d1017; }

/* Wireframe-Ebene (grau) */
.wire { position: absolute; inset: 0; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wire .blk { background: #232a38; border-radius: 6px; }
.wire .blk.h { height: 34px; }
.wire .blk.t { height: 12px; width: 60%; }
.wire .blk.t2 { height: 12px; width: 42%; }
.wire .row { display: flex; gap: 0.6rem; flex: 1; }
.wire .row .blk { flex: 1; }

/* Fertige Ebene (farbig, blendet ein) */
.done { position: absolute; inset: 0; padding: 0; opacity: 0; transition: opacity .1s linear; }
.done .done-hero { height: 46%; background:
    radial-gradient(120% 120% at 80% 20%, rgba(224,168,94,0.35), transparent 60%),
    linear-gradient(150deg, #1c2434, #10151e);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0.9rem; gap: 0.4rem; }
.done .done-hero .dh1 { height: 15px; width: 68%; background: var(--gold); border-radius: 5px; }
.done .done-hero .dh2 { height: 9px; width: 46%; background: rgba(255,255,255,0.6); border-radius: 5px; }
.done .done-hero .dh-btn { height: 20px; width: 82px; background: var(--gold); border-radius: 999px; margin-top: 0.3rem; }
.done .done-cards { display: flex; gap: 0.55rem; padding: 0.7rem; }
.done .done-cards .c { flex: 1; height: 62px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line); }
.done .done-cards .c .ct { height: 30px; margin: 0.4rem; border-radius: 5px;
  background: linear-gradient(135deg, #26304180, #1a2230); }
.build-progresslabel {
  position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 3;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: rgba(11,14,20,0.7); padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.build-hint { text-align: center; margin-top: 0.9rem; color: var(--muted-2); font-size: 0.82rem; }

/* ---------- Burger-Signature als HINTERGRUND-Ebene (Nils-Auftrag 2026-07-02 abends) ---------- */
/* Kein eigener leerer Scroll-Abschnitt mehr: der Burger liegt sticky HINTER dem echten
   Karten-Inhalt der #nutzen-Sektion (z-index 0 vs. Inhalt z-index 2), wandert/scrubbt
   waehrend der Nutzer normal durch die Karten scrollt, und verschwindet natuerlich mit
   dem Ende der Sektion aus dem Viewport. Die Karten sind semi-transparent (card-glass),
   damit der Burger durchschimmert -> "verdeckt, aber sichtbar", wie beauftragt. */
.burger-scene { position: relative; overflow: clip; isolation: isolate; }

/* Parallax-Ebene: feines Muster/Gradient, das sich langsamer bewegt als der Inhalt.
   Rein dekorativ, GPU-only (transform), reduced-motion-aware. */
.burger-parallax { position: absolute; inset: -10% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 25%, rgba(224,168,94,0.10), transparent 60%),
    radial-gradient(50% 40% at 82% 70%, rgba(111,211,196,0.07), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 26px);
  will-change: transform; }

/* Sticky-Hintergrund-Viewport: der Burger bleibt waehrend der ganzen Sektion im Blick,
   die Karten scrollen normal DRUEBER weg. z-index 0 = unter .burger-content. */
.burger-sticky-bg { position: sticky; top: 0; height: 100vh; z-index: 0;
  margin-bottom: calc(-1 * 100vh);
  display: flex; align-items: center; justify-content: center; overflow: clip; pointer-events: none; }

/* Der echte Inhalt (Ueberschrift + Karten) liegt ueber dem Hintergrund-Burger. */
.burger-content { position: relative; z-index: 2; }

/* Gross + zentriert statt klein wandernd: nur so liegt der Burger wirklich HINTER den
   Karten (statt nur in der Luecke daneben aufzutauchen). Wandert dezent per translateX
   (kleinerer Hub als vorher), bleibt aber die ganze Zeit mittig unter dem Karten-Grid. */
.burger-travel { position: relative; margin: 0; height: 58vh; aspect-ratio: 16/9;
  will-change: transform; filter: drop-shadow(0 26px 40px rgba(0,0,0,0.55)); }
.burger-canvas, .burger-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Canvas wird per JS gekeyt (dunkle Studio-Pixel -> transparent) => KEIN mix-blend/Halo.
   Zusaetzlich blendet eine untere lineare Maske die Holztisch-Kante weich aus
   (das Holz ist zu hell zum Keyen, aber am unteren Bildrand entbehrlich). */
.burger-canvas { z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 90%); }
/* Poster (statisches <img>, nicht keybar) nur als Fallback vor Frame-Load / ohne JS:
   per screen + weicher Ellipsen-Maske grob freigestellt. Sobald der Canvas zeichnet,
   liegt er darueber. */
.burger-poster { z-index: 0; opacity: 0.9; mix-blend-mode: screen;
  transition: opacity .45s ease;
  -webkit-mask-image: radial-gradient(ellipse 58% 70% at 50% 46%, #000 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 58% 70% at 50% 46%, #000 55%, transparent 88%); }
/* Sobald der Canvas real zeichnet (JS setzt is-scrubbing auf .burger-travel),
   Poster ausblenden: der fertige Burger schiene sonst durch die gekeyten
   (transparenten) Canvas-Pixel, und auf langsamem Netz sieht man sonst erst
   nur den grossen Poster-Burger. */
.burger-travel.is-scrubbing .burger-poster { opacity: 0; }

/* Karten in dieser Sektion: semi-transparent mit Weichzeichner, damit der Burger
   dahinter durchschimmert (Icon-Zone bleibt am klarsten). Kontrast bleibt Pflicht
   (WOW-Standard §5.5) -> ein zusaetzlicher, staerker deckender Scrim-Block liegt NUR
   hinter Ueberschrift+Text (nicht der ganzen Karte), damit Lesbarkeit unabhaengig vom
   durchscheinenden Hintergrund garantiert >= 4.5:1 bleibt, waehrend die Karte als
   Ganzes trotzdem transparent wirkt. Fallback ohne backdrop-filter: solides --surface. */
.card-glass {
  background: rgba(11, 14, 20, 0.40);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
          backdrop-filter: blur(7px) saturate(1.15);
  border-color: rgba(255,255,255,0.14);
  position: relative;
}
.card-glass .card-textscrim {
  position: relative;
  margin: 0 -0.1rem; padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 10px;
  background: rgba(6, 8, 12, 0.62);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-glass { background: rgba(15, 18, 26, 0.94); }
  .card-glass .card-textscrim { background: transparent; }
}
.card-glass:hover { background: rgba(18, 22, 30, 0.55); }

.burger-final { font-family: var(--font-display); font-style: italic; color: var(--gold);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 2.2rem auto 0; text-align: center;
  max-width: 40rem; padding: 0.7rem 1.3rem; border-radius: 12px;
  background: rgba(6, 8, 12, 0.5); }

/* Intro-Absatz liegt direkt auf dem burger-content (kein Karten-Hintergrund) ->
   eigener dezenter Scrim fuer Lesbarkeit ueber dem durchscheinenden Burger. */
#nutzen .section-head p { display: inline; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(6, 8, 12, 0.45); padding: 0.05rem 0.35rem; border-radius: 6px; }

@media (max-width: 640px) {
  /* Kleiner auf Mobil -> laesst horizontalen Platz zum Wandern (Auftrag: auch Mobil). */
  .burger-travel { height: auto; width: 78vw; max-width: 420px; aspect-ratio: 16/9; }
  .burger-sticky-bg { justify-content: center; }
  /* Karten sind auf Mobil gestapelt (volle Breite) -> groesserer Row-Gap laesst den
     Hintergrund-Burger zwischen den Karten durchschimmern statt komplett verdeckt zu
     werden. Karten selbst zusaetzlich transparenter als Desktop. */
  #nutzen .steps { gap: 2.6rem; }
  #nutzen .card-glass { background: rgba(11, 14, 20, 0.32); }
  #nutzen .card-glass:hover { background: rgba(18, 22, 30, 0.45); }
}

/* Reduced-Motion: kein Wandern/Scrubben — ein ruhiges Standbild bleibt sichtbar,
   aber ohne sticky-Trick (vermeidet unnoetiges Layout-Gefrickel bei Standbild). */
@media (prefers-reduced-motion: reduce) {
  .burger-sticky-bg { position: relative; height: 46vh; margin-bottom: 0; }
  .burger-travel { transform: none !important; }
}

/* ---------- Karten allgemein ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); box-shadow: var(--shadow); }

/* So funktioniert's — 3 Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; }
.step .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); line-height: 1; margin-bottom: 0.7rem; }
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--muted); margin: 0; }
.step .free-tag { display: inline-block; margin-top: 0.8rem; font-size: 0.8rem; font-weight: 600;
  color: var(--teal); border: 1px solid rgba(111,211,196,0.35); border-radius: 999px; padding: 0.25rem 0.7rem; }

/* Such-Intent (Inbound) */
.intent-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .intent-wrap { grid-template-columns: 1fr; } }
.intent h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.intent-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.intent-tags span { font-size: 0.85rem; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.4rem 0.9rem; }
.intent-trust { list-style: none; padding: clamp(1.4rem,3vw,2rem); margin: 0; display: flex; flex-direction: column; gap: 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.intent-trust li { display: flex; gap: 0.9rem; }
.intent-trust .ico { font-size: 1.4rem; flex: none; }
.intent-trust b { display: block; color: var(--text); }
.intent-trust span span { color: var(--muted); font-size: 0.92rem; }

/* Showcase */
.showcase-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 900px) { .showcase-wrap { grid-template-columns: 1fr; } }
.muster-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #1a1206; background: var(--gold);
  padding: 0.3rem 0.75rem; border-radius: 999px; margin-bottom: 1rem; }
.showcase-figure { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); }
.showcase-figure img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.showcase-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.showcase-strip img { border-radius: var(--radius-sm); border: 1px solid var(--line); aspect-ratio: 4/3; object-fit: cover; }

/* Vorher/Nachher-Slider */
.ba-slider { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); user-select: none; touch-action: pan-y; aspect-ratio: 16/11; background: var(--surface); }
.ba-pane { position: absolute; inset: 0; }
.ba-pane .ba-label { position: absolute; top: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(6px); }
/* "Vorher" — alte, schwache Seite */
.ba-before { background: #e9e6df; color: #333; }
.ba-before .ba-label { left: 0.8rem; background: rgba(0,0,0,0.5); color: #fff; }
.ba-mock-old { padding: 1.4rem; font-family: "Times New Roman", serif; color: #444; }
.ba-mock-old .oldnav { font-size: 0.8rem; color: #0000ee; text-decoration: underline; margin-bottom: 1rem; }
.ba-mock-old h4 { font-size: 1.3rem; margin: 0 0 0.5rem; color: #111; }
.ba-mock-old .oldimg { width: 120px; height: 80px; background: #cfc9bd; border: 1px solid #b3ab9c; margin: 0.8rem 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #8a8272; }
.ba-mock-old p { font-size: 0.82rem; }
/* "Nachher" — neue liyoli-Seite */
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-after .ba-label { right: 0.8rem; background: var(--gold); color: #1a1206; }
.ba-mock-new { height: 100%; background:
    radial-gradient(120% 120% at 85% 10%, rgba(224,168,94,0.3), transparent 55%),
    linear-gradient(150deg, #1a2230, #0e1119); padding: 1.5rem; color: var(--text); }
.ba-mock-new h4 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.4rem; }
.ba-mock-new .newbtn { display: inline-block; margin-top: 0.8rem; background: var(--gold); color: #1a1206;
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.ba-mock-new .newcards { display: flex; gap: 0.6rem; margin-top: 1rem; }
.ba-mock-new .newcards div { flex: 1; height: 54px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold);
  transform: translateX(-50%); z-index: 3; }
.ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #1a1206;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--shadow-gold); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }

/* Leistungen */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.service .ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--gold-glow); border: 1px solid rgba(224,168,94,0.3); margin-bottom: 1rem; }
.service h3 { margin-bottom: 0.4rem; }
.service p { color: var(--muted); margin: 0; font-size: 0.98rem; }
.service .price-hint { display: block; margin-top: 0.9rem; color: var(--gold); font-weight: 600; font-size: 0.9rem; }

/* Preise */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--gold); box-shadow: var(--shadow-gold); position: relative; }
.price-card.featured::before { content: "Beliebt"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1206; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.25rem 0.85rem; border-radius: 999px; }
.price-card .plan { font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.price-card .amount { font-family: var(--font-display); font-size: 2.6rem; margin: 0.4rem 0 0.2rem; }
.price-card .amount small { font-size: 1rem; color: var(--muted); font-family: var(--font-body); }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.price-card li { display: flex; gap: 0.6rem; color: var(--muted); font-size: 0.96rem; }
.price-card li::before { content: "✓"; color: var(--teal); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.price-card .price-flex { margin: 0 0 1.2rem; font-size: 0.86rem; color: var(--gold-soft);
  border-top: 1px dashed var(--line-2); padding-top: 0.9rem; }
.price-note { text-align: center; color: var(--muted-2); font-size: 0.92rem; margin-top: 1.6rem; max-width: 720px; margin-inline: auto; }

/* Pflege-Abo — echte Vergleichstabelle, volle Breite unter den 3 Paketen */
.pricing-abo { margin-top: 1.2rem;
  background: linear-gradient(150deg, rgba(224,168,94,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(224,168,94,0.28); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); }
.pricing-abo .abo-head { margin-bottom: 1.3rem; }
.pricing-abo .plan { font-weight: 600; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.abo-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.abo-table { width: 100%; border-collapse: collapse; }
.abo-table th, .abo-table td { padding: 0.72rem 0.7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Wert-Spalten schmal halten, damit die Leistungs-Spalte den Platz bekommt */
.abo-table thead th:not(:first-child), .abo-table tbody td { width: 5.4rem; }
.abo-table thead th { border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
.abo-table tbody tr:last-child th, .abo-table tbody tr:last-child td { border-bottom: none; }
/* Kopfzeile */
.abo-table .abo-th-leist { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.abo-table thead th:not(:first-child) { text-align: center; }
.abo-table .abo-th-name { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--text); line-height: 1.1; }
.abo-table .abo-th-price { display: block; font-size: 0.9rem; color: var(--gold); font-weight: 600; margin-top: 0.15rem; }
/* Zeilenköpfe (Leistungen) */
.abo-table tbody th { font-weight: 500; color: var(--text); font-size: 0.94rem; }
.abo-table tbody td { text-align: center; color: var(--muted); font-size: 0.94rem; white-space: nowrap; }
.abo-table td b { color: var(--text); }
.abo-table .yes { color: var(--teal); font-weight: 700; font-size: 1.15rem; }
.abo-table .no { color: var(--muted-2); font-weight: 700; }
/* Komfort-Spalte hervorheben */
.abo-table th.abo-col-feat, .abo-table td.abo-col-feat {
  background: rgba(224,168,94,0.08); border-left: 1px solid rgba(224,168,94,0.22); border-right: 1px solid rgba(224,168,94,0.22); }
.abo-table thead th.abo-col-feat { border-top: 1px solid rgba(224,168,94,0.22); border-top-left-radius: 10px; border-top-right-radius: 10px; }
.abo-table tbody tr:last-child td.abo-col-feat { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 1px solid rgba(224,168,94,0.22); }
.pricing-abo .abo-fair { margin: 1.2rem 0 0; font-size: 0.82rem; color: var(--muted-2); border-top: 1px dashed var(--line-2); padding-top: 0.9rem; }
@media (max-width: 560px) {
  .pricing-abo { padding: 1.1rem 0.9rem; }
  .abo-table th, .abo-table td { padding: 0.55rem 0.3rem; }
  .abo-table thead th:not(:first-child), .abo-table tbody td { width: 3.9rem; }
  .abo-table tbody th { font-size: 0.82rem; padding-left: 0; }
  .abo-table tbody td { font-size: 0.8rem; white-space: normal; }
  .abo-table td b { font-size: 0.82rem; }
  .abo-table .abo-th-name { font-size: 1rem; }
  .abo-table .abo-th-price { font-size: 0.72rem; }
  .abo-table .yes { font-size: 1rem; }
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; max-width: 860px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 1.4rem; transition: border-color .25s var(--ease); }
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 600; font-size: 1.05rem;
  color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; font-weight: 400; flex: none;
  transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin: 0 0 1.2rem; font-size: 0.98rem; }

/* Wert-Anker (Baukasten / liyoli / Agentur) */
.value-anchor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; align-items: stretch; }
@media (max-width: 720px) { .value-anchor { grid-template-columns: 1fr; } }
.value-anchor .va-col { padding: 1.4rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(255,255,255,0.02); text-align: center; display: flex; flex-direction: column; }
.value-anchor .va-featured { border-color: var(--gold); background: linear-gradient(160deg, rgba(224,168,94,0.12), rgba(255,255,255,0.02));
  box-shadow: var(--shadow-gold); }
.value-anchor .va-head { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem; color: var(--muted); }
.value-anchor .va-featured .va-head { color: var(--gold); }
.value-anchor .va-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin: 0.4rem 0 0.7rem; }
.value-anchor p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Über Nils */
.about-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .about-wrap { grid-template-columns: 1fr; } }
.about-portrait { border-radius: var(--radius); border: 1px solid var(--line); background:
    radial-gradient(120% 120% at 30% 20%, rgba(224,168,94,0.22), transparent 60%),
    linear-gradient(160deg, #1a2230, #0e1119); aspect-ratio: 4/5; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow); overflow: hidden; }
.about-portrait .mono { font-family: var(--font-display); font-size: 5rem; color: var(--gold); opacity: 0.85; }
.about blockquote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35;
  margin: 0 0 1.4rem; font-style: italic; }
.about .sig { color: var(--gold); font-weight: 600; }

/* Kontakt */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; } }
.contact-benefits { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-benefits li { display: flex; gap: 0.8rem; }
.contact-benefits .ico { color: var(--gold); font-size: 1.2rem; flex: none; }
.contact-benefits b { display: block; }
.contact-benefits span { color: var(--muted); font-size: 0.95rem; }

/* Anrufen-Karte (Telefon-Reveal) */
.call-card { margin: 1.6rem 0; padding: 1.3rem 1.5rem; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(224,168,94,0.12), rgba(255,255,255,0.02));
  border: 1px solid rgba(224,168,94,0.3); }
.call-local { font-weight: 600; color: var(--gold); margin-bottom: 0.6rem; letter-spacing: 0.01em; }
.call-action { min-height: 48px; display: flex; align-items: center; }
.call-hint { color: var(--muted-2); font-size: 0.85rem; margin: 0.9rem 0 0; }
/* Erreichbarkeits-Status + Zeiten */
.call-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600;
  margin-bottom: 0.5rem; }
.call-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted-2); }
.call-status.is-open .call-dot { background: #58c98a; box-shadow: 0 0 0 4px rgba(88,201,138,0.18); }
.call-status.is-open { color: #7fdca5; }
.call-status.is-closed .call-dot { background: var(--muted-2); }
.call-status.is-closed { color: var(--muted); }
.call-hours { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.9rem; }
.call-offhint { color: var(--gold-soft); font-size: 0.9rem; margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: rgba(224,168,94,0.08);
  border: 1px solid rgba(224,168,94,0.25); }
/* Wenn Telefon zu ist: Formular wird visuell zur Primaer-Option */
.form.is-primary-contact { outline: 2px solid rgba(224,168,94,0.45); outline-offset: 6px; border-radius: var(--radius); }
.checkbox-row.is-highlight { background: rgba(224,168,94,0.08); border: 1px solid rgba(224,168,94,0.3);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; }
.phone-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; color: var(--gold); letter-spacing: 0.01em; }
.phone-live:hover { color: var(--gold-soft); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; }
.field .req { color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 1rem; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .2s, background .2s; min-height: 48px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); background: var(--surface); outline: none; }
.field .hint { color: var(--muted-2); font-size: 0.85rem; margin-top: 0.35rem; }
/* Honeypot — komplett versteckt, nicht per display:none für einige Bots erkennbar */
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.1rem; }
.checkbox-row input { width: 22px; height: 22px; min-height: 22px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.checkbox-row label { font-size: 0.92rem; color: var(--muted); font-weight: 400; }
.form-status { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 500; display: none; }
.form-status.ok { display: block; background: rgba(111,211,196,0.12); border: 1px solid rgba(111,211,196,0.4); color: var(--teal); }
.form-status.err { display: block; background: rgba(224,120,94,0.12); border: 1px solid rgba(224,120,94,0.4); color: #eaa48f; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 3rem 0 2rem; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.footer .brand { font-size: 1.3rem; }
.footer-tag { color: var(--muted); max-width: 30ch; margin-top: 0.6rem; font-size: 0.95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-links a { color: var(--muted); font-size: 0.95rem; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  color: var(--muted-2); font-size: 0.85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.cookiefree { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--teal); }

/* "nach oben" */
.to-top { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 90; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s; box-shadow: var(--shadow); }
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--surface-2); transform: translateY(-3px); border-color: var(--gold); }

/* ---------- Rechtsseiten (Impressum/Datenschutz) ---------- */
.legal-page { padding-top: 8rem; }
.legal-page .container { max-width: 800px; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.legal-page h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.legal-page p, .legal-page li { color: var(--muted); }
.legal-page a { color: var(--gold); text-decoration: underline; }
.legal-page .back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold); margin-bottom: 2rem; font-weight: 600; }

/* ---------- Motion-Feinschliff ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .to-top, .topbar-nav a::after { transition: none !important; }
  .done { opacity: 1 !important; }
}