/* ============================================================
   MAESTRE LOGISTIK — Design System
   Palette aus Live-Framer: Weiss + Gruen #2E7D32 + Gold #F2C94C
   Motion/Shadow/Radius adaptiert von gwclogistics.com (vanilla)
   Diese Datei ist die EINZIGE Wahrheits-Quelle fuer den Look.
   Enthaelt auch Legacy-SEO-Klassen (Superset) zum Re-Skin.
   ============================================================ */

:root {
  /* Brand */
  --green: #2E7D32;
  --green-700: #1f5c24;
  --green-600: #256528;
  --green-50: #eef5ee;
  --green-tint: rgba(46,125,50,.06);
  --gold: #F2C94C;
  --gold-600: #e4b836;
  --gold-tint: rgba(242,201,76,.14);

  /* Ink + surfaces */
  --ink: #111827;
  --ink-soft: #4b5563;
  --ink-faint: #6b7280;
  --white: #ffffff;
  --panel: #f6f7f5;        /* warm whisper-gray for section breaks */
  --panel-2: #eef0ec;
  --border: rgba(17,24,39,.09);
  --border-strong: rgba(17,24,39,.16);

  /* Radius — Apple-rounded scale */
  --r-xs: .6rem;
  --r-sm: .9rem;
  --r-md: 1.25rem;
  --r-lg: 2rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  /* Shadows — soft, low-opacity, large-blur (gwc tell) */
  --sh-sm: 0 2px 14px rgba(17,24,39,.05);
  --sh-md: 0 10px 34px rgba(17,24,39,.08);
  --sh-lg: 0 26px 64px rgba(17,24,39,.12);
  --sh-green: 0 10px 26px rgba(46,125,50,.30);
  --sh-gold: 0 10px 26px rgba(242,201,76,.42);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .7s;
  --hover: .3s ease-in-out;

  /* Spacing */
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.01em; }
p { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1rem;
}
.eyebrow.gold { color: var(--gold-600); }
.section-head { max-width: 680px; margin-bottom: clamp(2rem,4vw,3.25rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.12rem; margin-top: 1rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); line-height: 1.55; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600; font-size: 1rem; padding: .95rem 1.7rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer; transition: transform var(--hover), box-shadow var(--hover), background var(--hover), color var(--hover);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--sh-gold); }
.btn-gold:hover { transform: translateY(-2px); background: var(--gold-600); }
.btn-green { background: var(--green); color: #fff; box-shadow: var(--sh-green); }
.btn-green:hover { transform: translateY(-2px); background: var(--green-600); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--ink); background: rgba(17,24,39,.03); }
.btn-white { background: #fff; color: var(--green-700); box-shadow: var(--sh-md); }
.btn-white:hover { transform: translateY(-2px); }
.btn-lg { padding: 1.1rem 2.1rem; font-size: 1.06rem; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 3px solid rgba(46,125,50,.4); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--hover), box-shadow var(--hover);
}
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--sh-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { font-size: .98rem; font-weight: 500; color: var(--ink-soft); transition: color var(--hover); }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-tel-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); transition: color var(--hover), background var(--hover); }
.nav-tel-icon:hover { color: var(--green); background: rgba(46,125,50,.09); }
.nav-tel-icon svg { display: block; }
.nav-sms-icon { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); transition: color var(--hover), background var(--hover); }
.nav-sms-icon:hover { color: var(--green); background: rgba(46,125,50,.09); }
.nav-sms-icon svg { display: block; }
/* tel-ico: currentColor Telefon-Icon-Button (funktioniert auf hell + dunkel) */
.tel-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; color: inherit; opacity: .85; transition: opacity var(--hover), transform var(--hover); }
.tel-ico:hover { opacity: 1; transform: translateY(-1px); }
.tel-ico svg { display: block; width: 17px; height: 17px; }
.mobile-menu .m-contact .tel-ico, .footer-col ul .tel-ico { padding: 0; border: 1.5px solid currentColor; }
.footer-col ul .tel-ico:hover { color: var(--gold); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: var(--r-sm); align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: transform .3s var(--ease), opacity .3s; }
.nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.nav-burger span::before { top: -7px; } .nav-burger span::after { top: 7px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 76px 0 0 0; z-index: 99; background: #fff;
  transform: translateX(100%); transition: transform .4s var(--ease);
  padding: 2rem var(--gutter); display: flex; flex-direction: column; gap: .25rem; overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu a { font-size: 1.5rem; font-weight: 600; color: var(--ink); padding: .85rem 0; border-bottom: 1px solid var(--border); }
.mobile-menu a:hover { color: var(--green); }
.mobile-menu .btn { margin-top: 1.5rem; }
.mobile-menu .m-contact { margin-top: auto; padding-top: 2rem; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Reveal animations (only hidden when JS active -> robust without JS) ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="lg"] { transform: translateY(56px); }
.js [data-reveal="left"] { transform: translateX(-48px); }
.js [data-reveal="right"] { transform: translateX(48px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1){ transition-delay: 0s; }
.stagger.is-visible > *:nth-child(2){ transition-delay: .09s; }
.stagger.is-visible > *:nth-child(3){ transition-delay: .18s; }
.stagger.is-visible > *:nth-child(4){ transition-delay: .27s; }
.stagger.is-visible > *:nth-child(5){ transition-delay: .36s; }
.stagger.is-visible > *:nth-child(6){ transition-delay: .45s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding: clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem);
  background:
    radial-gradient(1200px 520px at 85% -10%, var(--green-tint), transparent 60%),
    radial-gradient(900px 480px at 0% 110%, var(--gold-tint), transparent 55%),
    var(--white);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { margin-bottom: 1.9rem; max-width: 32ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 1.9rem; margin-top: 2rem; }
.hero-trust div { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--ink-soft); font-weight: 500; }
.hero-trust svg { color: var(--green); flex: none; }

/* ---------- Calculator (Held) ---------- */
.rechner {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: clamp(1.4rem, 2.4vw, 2rem); position: relative;
}
.rechner-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.rechner-head h2 { font-size: 1.3rem; letter-spacing: -.01em; }
.rechner-badge { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--green-tint); padding: .4rem .7rem; border-radius: var(--r-pill); white-space: nowrap; }
.rechner-field { margin-bottom: 1.15rem; }
.rechner-field > label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .55rem; }
.opt-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt {
  flex: 1 1 auto; min-width: 56px; text-align: center; padding: .7rem .55rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: #fff; font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color var(--hover), background var(--hover), color var(--hover), transform .15s var(--ease); user-select: none;
}
.opt:hover { border-color: var(--green); color: var(--green); }
.opt.selected { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--sh-green); }
.opt small { display: block; font-weight: 500; font-size: .68rem; opacity: .8; margin-top: .15rem; }
.rechner-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.rechner select {
  width: 100%; padding: .75rem .8rem; border-radius: var(--r-sm); border: 1.5px solid var(--border);
  background: #fff; font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink); cursor: pointer;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center;
}
.rechner select:focus { outline: none; border-color: var(--green); }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.chk { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .88rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: border-color var(--hover), background var(--hover); }
.chk:hover { border-color: var(--green); }
.chk input { accent-color: var(--green); width: 17px; height: 17px; flex: none; }
.chk.checked { border-color: var(--green); background: var(--green-tint); color: var(--ink); }
.chk-aufzug { margin-top: .55rem; }
.chk.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
/* Etage je Ort (Beladeort + Entladeort) */
.etage-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.etage-end { display: flex; flex-direction: column; gap: .5rem; }
.etage-end-label { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--green); }
.etage-end .chk-aufzug { margin-top: 0; }
@media (max-width: 560px) { .etage-split { grid-template-columns: 1fr; gap: 1.25rem; } }
.qm-display { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: .35rem 0 .15rem; }
.qm-num { font-size: 1.8rem; font-weight: 700; color: var(--green); letter-spacing: -.02em; line-height: 1; }
.qm-display .qm-hint { font-size: .86rem; color: var(--ink-faint); font-weight: 500; }
.qm-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--green) 28%, #e7ebe6 28%); outline: none; cursor: pointer; margin: .4rem 0 .2rem; }
.qm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid var(--green); box-shadow: var(--sh-green); cursor: grab; transition: transform .12s var(--ease); }
.qm-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.qm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
.qm-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 5px solid var(--green); box-shadow: var(--sh-green); cursor: grab; }
.qm-slider:focus-visible { outline: 3px solid rgba(46,125,50,.4); outline-offset: 4px; }
.qm-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-faint); }

.rechner-result {
  margin-top: 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%); color: #fff;
}
.rechner-result .r-label { font-size: .8rem; font-weight: 600; opacity: .85; letter-spacing: .04em; text-transform: uppercase; }
.rechner-result .r-price { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: .25rem 0 .35rem; }
.rechner-result .r-note { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; line-height: 1.45; margin-top: .7rem; padding: .6rem .72rem; border-radius: var(--r-sm); background: rgba(255,255,255,.15); }
.rechner-result .r-note strong { font-weight: 700; color: #fff; }
.rechner-result .r-note-ic { flex: none; width: 16px; height: 16px; margin-top: .12rem; opacity: .95; }
.rechner-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.rechner-cta .btn { flex: 1 1 auto; }
.icon-cta { width: 48px; height: 48px; padding: 0; flex: none !important; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; }
.rechner-disclaimer { font-size: .76rem; color: var(--ink-faint); margin-top: .9rem; text-align: center; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: clamp(1.4rem,2.2vw,1.9rem); box-shadow: var(--sh-sm); transition: transform var(--hover), box-shadow var(--hover); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card-icon { width: 52px; height: 52px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--green-tint); color: var(--green); margin-bottom: 1.1rem; }
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .98rem; }
.card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; color: var(--green); font-weight: 600; font-size: .95rem; transition: gap var(--hover); }
.card:hover .card-link { gap: .65rem; }

/* Service card with media */
.service-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.service-card .sc-body { padding: clamp(1.4rem,2.2vw,1.9rem); display: flex; flex-direction: column; flex: 1; }

/* ---------- Stats / count-up band ---------- */
.stats-band { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(2rem,4vw,3.2rem); }
.stats-band.green { background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%); }
.stat { text-align: center; }
.stat .stat-num { font-size: clamp(2rem,4.5vw,3.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.stat .stat-num .suffix { font-size: .6em; }
.stat .stat-cap { margin-top: .55rem; font-size: .92rem; opacity: .82; color: #fff; }

/* ---------- Green signature section ---------- */
.band-green { background: linear-gradient(160deg, var(--green) 0%, var(--green-700) 100%); color: #fff; }
.band-green h2, .band-green h3 { color: #fff; }
.band-green .eyebrow { color: var(--gold); }
.band-green p { color: rgba(255,255,255,.85); }
.band-green .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; backdrop-filter: blur(4px); }
.band-green .card:hover { background: rgba(255,255,255,.11); }
.band-green .card h3, .band-green .card p { color: #fff; }
.band-green .card p { color: rgba(255,255,255,.82); }
.band-green .card-icon { background: rgba(255,255,255,.13); color: var(--gold); }
.band-green .card-link { color: var(--gold); }

/* ---------- Trust pillars ---------- */
.pillar { display: flex; gap: 1rem; }
.pillar .p-ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); background: var(--gold-tint); color: var(--gold-600); display: flex; align-items: center; justify-content: center; }
.pillar h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.pillar p { font-size: .96rem; }

/* ---------- Reviews ---------- */
.review { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.7rem; box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.review .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: .8rem; font-size: 1.05rem; }
.review blockquote { font-size: 1.05rem; color: var(--ink); line-height: 1.55; flex: 1; }
.review .r-author { margin-top: 1.1rem; font-weight: 600; font-size: .95rem; }
.review .r-meta { color: var(--ink-faint); font-size: .85rem; font-weight: 400; }
.gbadge { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- Pricing philosophy ---------- */
.price-tier { border-radius: var(--r-lg); padding: clamp(1.6rem,2.6vw,2.2rem); }
.price-tier.green { background: linear-gradient(160deg,var(--green),var(--green-700)); color: #fff; }
.price-tier.gold { background: linear-gradient(160deg,var(--gold),var(--gold-600)); color: var(--ink); box-shadow: var(--sh-gold); }
.price-tier h3 { color: inherit; }
.price-tier .pt-sub { opacity: .9; margin: .4rem 0 1.2rem; }
.price-tier .pt-price { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.2rem; }
.price-tier ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.price-tier li { display: flex; gap: .6rem; font-size: .98rem; align-items: flex-start; }
.price-tier.green li::before, .price-tier.gold li::before { content: '✓'; font-weight: 700; }
.price-tier.green li::before { color: var(--gold); }

/* ---------- CTA block ---------- */
.cta-final { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(2.4rem,5vw,4rem); text-align: center; position: relative; overflow: hidden; }
.cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 320px at 50% -20%, rgba(46,125,50,.5), transparent 60%); }
.cta-final > * { position: relative; }
.cta-final h2 { color: #fff; margin-bottom: 1rem; }
.cta-final p { color: rgba(255,255,255,.8); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.cta-final .hero-actions { justify-content: center; }

/* ---------- Cinematic CTA (Festpreis-Szene, animiertes Bodenband) ---------- */
.cta-cinematic { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4rem,9vw,7rem) 0 0; }
.cta-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(125% 135% at 80% 125%, #0e3f1e 0%, #08220f 58%); }
.cta-cine-inner { max-width: 640px; color: #fff; }
.cta-cinematic .eyebrow.mono { color: var(--gold); }
.cta-cinematic .eyebrow.mono b { color: #fff; }
.cta-cinematic h2 { color: #fff; font-size: clamp(2rem,4.2vw,3.3rem); letter-spacing: -.02em; margin-top: .6rem; }
.cta-cinematic p { color: rgba(255,255,255,.86); font-size: 1.1rem; line-height: 1.6; margin-top: 1rem; max-width: 52ch; }
.cta-cinematic .hero-actions { margin-top: 1.9rem; }
/* Animiertes Männchen-Bodenband: kommt mit leichtem Delay von unten herein */
.cta-scene { margin-top: clamp(2.2rem,4.5vw,3.6rem); line-height: 0; pointer-events: none; }
.cta-scene img { display: block; width: 100%; height: auto; }
.js .cta-scene[data-reveal] { transform: translateY(48px); transition-delay: .22s; }
.js .cta-scene[data-reveal].is-visible { transform: none; }
@media (max-width: 600px) {
  /* Auf dem Handy etwas vergrößern + mittig beschneiden, damit die Männchen sichtbar bleiben */
  .cta-scene { width: 142%; margin-left: -21%; }
}

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; font-weight: 600; font-size: 1.08rem; position: relative; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--green); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: #0e2a13; color: rgba(255,255,255,.72); padding: clamp(3rem,5vw,4.5rem) 0 1.6rem; }
.site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 340px at 84% -12%, rgba(46,125,50,.5), transparent 60%), radial-gradient(620px 300px at 6% 118%, rgba(242,201,76,.1), transparent 62%); }
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
/* Rundes Farb-Logo-Badge (Original-Mark in Farbe, runder weißer Kreis + Gold-Ring) */
.footer-badge { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(242,201,76,.10), 0 10px 30px rgba(0,0,0,.3); overflow: hidden; margin-bottom: 1.2rem; }
.footer-badge img { width: 78px; height: 78px; object-fit: contain; display: block; }
.footer-brand p { color: rgba(255,255,255,.6); font-size: .95rem; max-width: 32ch; }
/* Social-Chips */
.footer-social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); transition: all var(--hover); }
.footer-social a:hover { background: var(--gold); color: #0e2a13; border-color: var(--gold); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { color: rgba(255,255,255,.7); font-size: .96rem; transition: color var(--hover); }
.footer-col a:hover { color: var(--gold); }
/* Kontakt-Spalte: konsistente Gold-Icon-Zeilen */
.footer-contact { display: flex; flex-direction: column; gap: .85rem; }
.footer-contact .ct-row { display: flex; align-items: flex-start; gap: .7rem; color: rgba(255,255,255,.72); font-size: .96rem; line-height: 1.45; }
.footer-contact .ct-row svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold); opacity: .9; }
.footer-contact .ct-row a { color: rgba(255,255,255,.72); transition: color var(--hover); }
.footer-contact .ct-row a:hover { color: var(--gold); }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.5); }
.footer-bottom a { color: rgba(255,255,255,.5); } .footer-bottom a:hover { color: var(--gold); }

/* Monumentaler Wordmark unten (wie auralex-agents.de, in Maestre-Farben) */
.footer-wordmark { margin-top: clamp(1.8rem,4vw,3rem); text-align: center; overflow: hidden; line-height: 1; pointer-events: none; }
.footer-wordmark span { display: block; font-weight: 800; letter-spacing: -.02em; line-height: .92; font-size: clamp(40px,15.5vw,232px); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(242,201,76,.14) 55%, rgba(255,255,255,.02) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: mWordBreath 9s ease-in-out infinite; }
@keyframes mWordBreath { 0%,100% { opacity: .68; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .footer-wordmark span { animation: none; opacity: .85; } }

/* ---------- FAQ (Häufige Fragen) ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 1.1rem; box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.faq-item[open] { box-shadow: var(--sh-md); border-color: rgba(46,125,50,.3); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: clamp(1.05rem,2vw,1.4rem) clamp(1.2rem,2.4vw,1.7rem); font-weight: 600; font-size: clamp(1rem,1.3vw,1.12rem); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green); }
.faq-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green-tint); color: var(--green); font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform .35s var(--ease), background .3s, color .3s; }
.faq-item[open] .faq-ic { transform: rotate(45deg); background: var(--green); color: #fff; }
.faq-a { padding: 0 clamp(1.2rem,2.4vw,1.7rem) clamp(1.15rem,2.2vw,1.5rem); }
.faq-a p { color: var(--ink-soft); font-size: 1rem; line-height: 1.62; max-width: 64ch; }

/* ---------- Ablauf als animierter Chat (Apple-Style) ---------- */
.chat { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--sh-md); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,#fff,#fbfcfb); }
.chat-ava-single { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 1.5px solid var(--border); box-shadow: 0 1px 3px rgba(11,42,30,.12); display: flex; align-items: center; justify-content: center; }
.chat-ava-single img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.chat-head-meta { flex: 1; min-width: 0; }
.chat-head-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.chat-head-status { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft); margin-top: .1rem; }
.chat-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: chatPulse 2.2s infinite; }
@keyframes chatPulse { 0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)} 70%{box-shadow:0 0 0 7px rgba(46,125,50,0)} 100%{box-shadow:0 0 0 0 rgba(46,125,50,0)} }
.chat-head-brand { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); flex: none; }
.chat-thread { padding: 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; background: radial-gradient(120% 80% at 50% 0%, rgba(46,125,50,.04), transparent 60%); }
.chat-msg { display: flex; }
.chat-msg.out { justify-content: flex-end; }
.chat-msg.in { justify-content: flex-start; }
.chat-bubble { max-width: 80%; padding: .62rem .9rem; font-size: .96rem; line-height: 1.4; border-radius: 19px; }
.chat-msg.in .chat-bubble { background: #eceef0; color: var(--ink); border-bottom-left-radius: 6px; }
.chat-msg.out .chat-bubble { background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(46,125,50,.25); }
.chat-tick { color: var(--gold); font-weight: 700; }
.chat-msg.divider { justify-content: center; margin: .5rem 0 .2rem; }
.chat-msg.divider span { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); background: rgba(17,24,39,.06); padding: .25rem .7rem; border-radius: 999px; }
.chat-price { display: flex; flex-direction: column; gap: .1rem; background: linear-gradient(135deg,#fff,#fbfaf2) !important; color: var(--ink) !important; border: 1.5px solid var(--gold); box-shadow: 0 6px 18px rgba(242,201,76,.25) !important; }
.chat-price .cp-top { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-700); }
.chat-price .cp-val { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.05; }
.chat-price .cp-incl { list-style: none; margin: .55rem 0 .35rem; padding: .55rem 0 0; border-top: 1px solid rgba(11,42,30,.1); display: flex; flex-direction: column; gap: .3rem; }
.chat-price .cp-incl li { position: relative; padding-left: 1.3rem; font-size: .82rem; line-height: 1.3; color: var(--ink); }
.chat-price .cp-incl li::before { content: "✓"; position: absolute; left: 0; top: -.02em; color: var(--green); font-weight: 800; font-size: .82rem; }
.chat-price .cp-sub { font-size: .78rem; color: var(--ink-soft); }
.chat-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--border); }
.chat-cta span { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.ti { display: inline-flex; gap: 5px; align-items: center; }
.ti i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; animation: tiBounce 1.25s infinite; }
.ti i:nth-child(2) { animation-delay: .16s; }
.ti i:nth-child(3) { animation-delay: .32s; }
@keyframes tiBounce { 0%,60%,100%{ transform: translateY(0); opacity:.45 } 30%{ transform: translateY(-4px); opacity:.95 } }
.chat--js .chat-msg { display: none; }
.chat--js .chat-msg.is-shown { display: flex; animation: chatBubbleIn .42s var(--ease-out) both; }
@keyframes chatBubbleIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .chat-bubble { max-width: 86%; } .chat-head-brand { display: none; } }
@media (prefers-reduced-motion: reduce) { .chat-pulse, .chat--js .chat-msg.is-shown { animation: none; } }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: .5rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.mobile-cta .btn { flex: 1; padding: .85rem; font-size: .95rem; }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: .85rem; color: var(--ink-faint); padding-top: 1.5rem; }
.crumbs a { color: var(--green); } .crumbs a:hover { text-decoration: underline; }

/* ============================================================
   LEGACY SEO-PAGE CLASSES (Superset) — re-skin der 21 Seiten
   Diese Klassen kommen aus den alten Service/Money-Pages.
   ============================================================ */
header.site { display: none; } /* alte Inline-Header werden durch neuen ersetzt */
.container { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.bracket-label { display:inline-block; color: var(--green); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
main.container .hero { padding: clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); background: none; }
main.container .hero h1 { margin-bottom: 1.2rem; }
main.container .hero .lead { font-size: clamp(1.1rem,1.7vw,1.28rem); margin-bottom: 0; }
.article-body p, main.container > p, main.container section > p { font-size: 1.06rem; margin-bottom: 1.1rem; }
main.container h2 { margin: 2.6rem 0 1rem; }
main.container h3 { margin: 1.8rem 0 .7rem; }
main.container ul, main.container ol { margin: 0 0 1.2rem 1.3rem; color: var(--ink-soft); }
main.container li { margin-bottom: .5rem; }
main.container a:not(.btn):not(.cta-pill) { color: var(--green); border-bottom: 1px solid rgba(46,125,50,.3); transition: border-color var(--hover); }
main.container a:not(.btn):not(.cta-pill):hover { border-color: var(--green); }
.meta-strip { margin-top: 1.5rem; color: var(--ink-faint); font-size: .9rem; }

.cta-block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.4rem); margin: 3rem 0; box-shadow: var(--sh-sm); }
.cta-block h3 { margin-top: 0; margin-bottom: .6rem; }
.cta-pill { display:inline-flex; align-items:center; gap:.5rem; background: var(--gold); color: var(--ink); padding: .95rem 1.7rem; border-radius: var(--r-pill); font-weight:600; box-shadow: var(--sh-gold); margin-top:.6rem; border-bottom: none !important; transition: transform var(--hover), background var(--hover); }
.cta-pill:hover { transform: translateY(-2px); background: var(--gold-600); }
.cta-list { list-style:none; margin: 1.6rem 0 0 !important; padding:0; }
.cta-list li { padding: .9rem 0; border-top: 1px solid var(--border); margin: 0 !important; }
.cta-list li:first-child { border-top: none; }
.cta-list a { border-bottom: none !important; font-weight: 500; }
.cta-inline { background: var(--green-tint); border-radius: var(--r-md); padding: 1.6rem; margin: 2.5rem 0; }
.cta-inline p { margin-bottom: 1rem; }

.stat-grid, .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1.1rem; margin: 2.4rem 0; }
.stat-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem,2.2vw,2rem); box-shadow: var(--sh-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.stat-card .num, .stat-card .stat-value { font-size: clamp(1.55rem,2.6vw,2.1rem); font-weight: 800; color: var(--green); display: block; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.stat-card:nth-child(even) .num, .stat-card:nth-child(even) .stat-value { color: var(--gold-700); }
.stat-card .label, .stat-card .stat-label { font-size: .92rem; color: var(--ink-soft); margin-top: .6rem; display: block; font-weight: 500; line-height: 1.45; overflow-wrap: break-word; hyphens: auto; }

.pull-quote { border-left: 4px solid var(--gold); padding: 1.6rem 2rem; background: var(--panel); margin: 2.5rem 0; font-size: 1.18rem; line-height: 1.5; font-style: italic; color: var(--ink); border-radius: 0 var(--r-md) var(--r-md) 0; }
.pull-quote blockquote { margin: 0; } .pull-quote blockquote p { color: var(--ink); margin-bottom: .8rem; }
.pull-quote cite, .pull-quote footer { display:block; margin-top:.8rem; font-size:.9rem; font-style:normal; color: var(--ink-faint); }

.faq-item { padding: 1.4rem 0; border-top: 1px solid var(--border); }
.faq-item h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.faq-item p { margin: 0; }
main.container details { border-bottom: 1px solid var(--border); }
main.container details summary { cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; font-weight: 600; font-size: 1.06rem; position: relative; list-style: none; }
main.container details summary::-webkit-details-marker { display: none; }
main.container details summary::after { content:'+'; position:absolute; right:.2rem; top:1.1rem; font-size:1.4rem; color: var(--green); transition: transform .25s var(--ease); }
main.container details[open] summary::after { transform: rotate(45deg); }
main.container details p { padding-bottom: 1.3rem; }

.source-box { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.source-box p.label { font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.source-box ul { list-style: none; padding: 0; margin: 0; }
.source-box li { padding: .9rem 0; font-size: .88rem; color: var(--ink-faint); border-top: 1px solid var(--border); }

.price-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .96rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table table { min-width: 460px; }
.price-table th, .price-table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.price-table th { background: var(--panel); font-weight: 600; color: var(--ink); }
.price-table tr:hover td { background: var(--green-tint); }

.anti-portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 2.4rem 0; }
.anti-portal-grid > div { padding: 1.6rem; border-radius: var(--r-md); border: 1px solid var(--border); }
.anti-portal-grid .portal { background: var(--gold-tint); border-color: rgba(242,201,76,.4); }
.anti-portal-grid .direct { background: var(--green-tint); border-color: rgba(46,125,50,.3); }
.anti-portal-grid h3 { margin-top: 0; }
.anti-portal-grid ul { margin-bottom: 0; }

footer.site { display: none; } /* alter Inline-Footer ersetzt durch neuen */

/* ============================================================
   HOMEPAGE V2 ADDITIONS (2026-05-29)
   Hero-Karussell · Rechner-Sektion · Auralex-Band · Nav-Dropdown
   ============================================================ */

/* ---------- Hero photo carousel ---------- */
.hero-carousel { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); background: var(--panel); aspect-ratio: 4 / 5; }
.hc-track { display: flex; height: 100%; transition: transform .6s var(--ease-out); }
.hc-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; }
.hc-slide img { width: 100%; height: 100%; object-fit: cover; }
.hc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.5rem 2.6rem; background: linear-gradient(0deg, rgba(17,24,39,.62), transparent); color: #fff; font-size: .96rem; font-weight: 500; }
/* placeholder slide (bis echte Fotos da sind) */
.hc-slide.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 2rem; background: linear-gradient(150deg, var(--green) 0%, var(--green-700) 75%); color: #fff; }
.hc-slide.placeholder:nth-child(even) { background: linear-gradient(150deg, var(--green-700) 0%, var(--ink) 95%); }
.hc-slide.placeholder svg { width: 50px; height: 50px; opacity: .9; }
.hc-ph-label { font-size: 1rem; font-weight: 600; opacity: .94; }
.hc-ph-sub { font-size: .78rem; opacity: .68; letter-spacing: .04em; text-transform: uppercase; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); color: var(--ink); transition: background var(--hover), transform .15s var(--ease); z-index: 3; }
.hc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hc-arrow.prev { left: .8rem; } .hc-arrow.next { right: .8rem; }
.hc-arrow:focus-visible { outline: 3px solid rgba(46,125,50,.55); outline-offset: 2px; }
.hc-dots { position: absolute; left: 0; right: 0; bottom: .95rem; display: flex; gap: .5rem; justify-content: center; z-index: 3; }
.hc-dot { width: 9px; height: 9px; border-radius: var(--r-pill); border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: background var(--hover), width var(--hover); }
.hc-dot.active { background: #fff; width: 22px; }
.hc-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Rechner section (Anti-Portal) ---------- */
.rechner-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.rechner-copy .lead { margin-bottom: 0; }
.rechner-checks { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-top: 1.7rem; }
.rechner-checks li { display: flex; align-items: flex-start; gap: .65rem; font-size: 1.02rem; color: var(--ink); font-weight: 500; }
.rechner-checks svg { color: var(--green); flex: none; margin-top: .18rem; }
#rechner-section .rechner { margin-top: 0; }
#rechner { scroll-margin-top: 96px; }
/* Rechner Portal-vs-Maestre Werbe-Vergleich */
.rechner-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.8rem; }
.rechner-compare > div { padding: 1.1rem 1.2rem; border-radius: var(--r-md); border: 1px solid var(--border); }
.rechner-compare .rc-portal { background: var(--gold-tint); border-color: rgba(242,201,76,.4); }
.rechner-compare .rc-direct { background: var(--green-tint); border-color: rgba(46,125,50,.3); }
.rechner-compare h3 { font-size: .92rem; margin-bottom: .65rem; }
.rechner-compare ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.rechner-compare li { font-size: .88rem; color: var(--ink-soft); padding-left: 1.4rem; position: relative; line-height: 1.45; }
.rechner-compare .rc-portal li::before { content: '\2715'; position: absolute; left: 0; color: var(--gold-600); font-weight: 700; }
.rechner-compare .rc-direct li::before { content: '\2713'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
@media (max-width: 480px) { .rechner-compare { grid-template-columns: 1fr; } }

/* ---------- Auralex sister-company band ---------- */
/* Auralex-Schwesterfirma: "Fenster in die Auralex-Welt" (Royal-Blue, Auralex-Bildsprache,
   Kontrast zur grünen Maestre-Seite). Driftende 3D-Fluid-Blobs + prominentes Logo. */
.auralex-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem,4vw,3.4rem); align-items: center;
  padding: clamp(2.6rem,5vw,4rem) clamp(1.8rem,4vw,3.6rem);
  background: linear-gradient(155deg, #0a0e20 0%, #0b1330 52%, #08080f 100%);
  border: 1px solid rgba(51,85,255,.22);
  box-shadow: 0 30px 80px -42px rgba(51,85,255,.55); }
.auralex-band::before, .auralex-band::after { content: ''; position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: -1; }
.auralex-band::before { width: 460px; height: 460px; top: -190px; right: -120px; background: radial-gradient(closest-side, rgba(51,85,255,.62), rgba(51,85,255,.1) 60%, transparent 72%); animation: axBlob1 19s var(--ease-out) infinite; }
.auralex-band::after { width: 380px; height: 380px; bottom: -210px; left: -110px; background: radial-gradient(closest-side, rgba(124,151,255,.38), transparent 70%); animation: axBlob2 23s var(--ease-out) infinite; }
@keyframes axBlob1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-28px,42px) scale(1.12); } }
@keyframes axBlob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(42px,-28px) scale(1.16); } }
.ax-copy { position: relative; max-width: 600px; }
.ax-engine { position: relative; min-width: 0; }
.ax-engine-svg { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; overflow: visible; }
.ax-flow path { animation: axFlow 2.4s linear infinite; }
@keyframes axFlow { to { stroke-dashoffset: -29; } }
.ax-spark { transform-box: fill-box; transform-origin: center; animation: axSpark 3s ease-in-out infinite; }
@keyframes axSpark { 0%,100% { opacity: .82; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.16) rotate(45deg); } }
.ax-ring-1 { transform-box: fill-box; transform-origin: center; animation: axRing 3.4s ease-out infinite; }
.ax-ring-2 { transform-box: fill-box; transform-origin: center; animation: axRing 3.4s ease-out .7s infinite; }
@keyframes axRing { 0% { opacity: .5; transform: scale(.85); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } }
.auralex-logo { display: block; height: clamp(56px,8vw,82px); width: auto; margin-bottom: 1.5rem; }
.auralex-band .eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 600; color: #8aa0ff; }
.auralex-band h2 { color: #fff; max-width: 18ch; margin-top: .7rem; letter-spacing: -.02em; }
.auralex-band p { color: rgba(255,255,255,.76); margin-top: 1rem; font-size: 1.08rem; line-height: 1.62; }
.auralex-band p strong { color: #fff; font-weight: 700; }
.btn-auralex { background: #3355FF; color: #fff; box-shadow: 0 12px 32px rgba(51,85,255,.5); margin-top: 1.9rem; }
.btn-auralex:hover { transform: translateY(-2px); background: #2742e0; box-shadow: 0 18px 42px rgba(51,85,255,.62); }
@media (max-width: 880px) {
  .auralex-band { grid-template-columns: 1fr; }
  .ax-copy { max-width: 100%; }
  .ax-engine-svg { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .auralex-band::before, .auralex-band::after,
  .ax-flow path, .ax-spark, .ax-ring-1, .ax-ring-2 { animation: none; }
}

/* ---------- Nav dropdown (Leistungen) ---------- */
.nav-links .has-dropdown { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: .35rem; font-size: .98rem; font-weight: 500; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; transition: color var(--hover); }
.nav-trigger:hover, .has-dropdown:hover .nav-trigger, .nav-trigger.active { color: var(--green); }
.nav-trigger svg { transition: transform .25s var(--ease); }
.has-dropdown:hover .nav-trigger svg, .nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 230px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: .5rem; list-style: none; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 120; }
.nav-dropdown::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-dropdown:hover .nav-dropdown, .nav-dropdown.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown li a { display: block; padding: .62rem .85rem; border-radius: var(--r-sm); font-size: .95rem; font-weight: 500; color: var(--ink-soft); transition: background var(--hover), color var(--hover); }
.nav-dropdown li a:hover { background: var(--green-tint); color: var(--green); }

/* ---------- Mobile menu services accordion ---------- */
.m-group > .m-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 1.5rem; font-weight: 600; color: var(--ink); padding: .85rem 0; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; font-family: inherit; }
.m-group > .m-toggle svg { transition: transform .25s var(--ease); color: var(--ink-faint); }
.m-group > .m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-sub { display: none; flex-direction: column; }
.m-group > .m-toggle[aria-expanded="true"] + .m-sub { display: flex; }
.m-sub a { font-size: 1.18rem !important; padding-left: 1rem; color: var(--ink-soft) !important; }

/* ---------- V2 responsive ---------- */
@media (max-width: 900px) {
  .rechner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hc-arrow { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-track { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .lead { max-width: none; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav .btn { display: none; }
  .nav-cta { gap: .3rem; margin-left: auto; }
  .nav-sms-icon { display: inline-flex; }
  .nav-burger { margin-left: .4rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .rechner-row2 { grid-template-columns: 1fr; }
  .anti-portal-grid { grid-template-columns: 1fr; }
  .stat-grid, .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .price-tier, .stats-band { padding: 1.6rem; }
}
@media (max-width: 420px) {
  .extras { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js [data-reveal], .js .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HERO (clean, 2026-05-30) — Van schön präsentiert, dezente Schweb-Bewegung
   ============================================================ */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(340px, 44vw, 520px); }
.hero-glow {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%);
  width: 96%; aspect-ratio: 1.3; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46,125,50,.17), rgba(46,125,50,.05) 56%, transparent 72%);
}
.hero-van {
  position: relative; z-index: 1; width: min(94%, 440px); height: auto;
  filter: drop-shadow(0 26px 30px rgba(17,24,39,.18));
  transform-origin: 50% 84%;
  animation: van-float 5.6s ease-in-out infinite;
}
@keyframes van-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.4%) rotate(-0.5deg); }
}
.hero-vanshadow {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 0;
  width: 44%; height: 4.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(17,24,39,.22), transparent 76%);
  animation: van-shadow 5.6s ease-in-out infinite;
}
@keyframes van-shadow {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: .85; }
  50%      { transform: translateX(-50%) scale(.88); opacity: .62; }
}

@media (max-width: 900px) {
  .hero-visual { margin-top: .5rem; min-height: clamp(300px, 70vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-van, .hero-vanshadow { animation: none; }
}

/* ---------- Photo marquee (replaces hero carousel) ---------- */
.marquee { overflow: hidden; padding: clamp(1.5rem,3vw,2.5rem) 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 1.2rem; width: max-content; animation: mq-scroll 42s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.mq-item { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 320px); aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); margin: 0; }
.mq-item img { width: 100%; height: 100%; object-fit: cover; }
.mq-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.1rem 1.1rem; background: linear-gradient(0deg, rgba(17,24,39,.62), transparent); color: #fff; font-size: .92rem; font-weight: 500; }
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee-track { animation: none; }
}

/* ============================================================
   ELEVATED HOMEPAGE — Liquid-Glass + Tiefe (2026-05-31)
   Neue Klassen, kollidieren nicht mit den SEO-/Sub-Seiten.
   Nur aktiv auf body.home (index.html).
   ============================================================ */
:root{
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --gold-700:#c99a1f;
  --green-800:#16451c;
}

/* sanftere, längere Reveals site-weit (smooth) */
.js [data-reveal]{transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);}
.js .stagger > *{transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}

/* mono eyebrow im wibify-Stil */
.eyebrow.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--green);}
.eyebrow.mono b{color:var(--gold-700);font-weight:600;}

/* ---------- Transparenter Glas-Header auf der Homepage ---------- */
body.home .site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;}
body.home .site-header.scrolled{background:rgba(246,247,245,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--border);box-shadow:var(--sh-sm);}
body.home .site-header .nav-links a,
body.home .site-header .nav-trigger{text-shadow:0 1px 10px rgba(255,255,255,.65);}
body.home .site-header .nav-tel-icon,
body.home .site-header .nav-sms-icon{filter:drop-shadow(0 1px 8px rgba(255,255,255,.7));}

/* ============ HERO: immersive Foto-Wand + Frosted-Glass ============ */
.home-hero{position:relative;min-height:clamp(660px,94vh,940px);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#0c130c;margin-top:-76px;padding-top:76px;}
/* top scrim so the sticky nav stays legible */
.home-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(246,247,245,.92),rgba(246,247,245,.4) 55%,transparent);}

/* L0: full-bleed running photo wall */
.photowall{position:absolute;inset:-4% -2%;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;transform:scale(1.02);}
.pw-col{position:relative;overflow:hidden;}
.pw-track{display:flex;flex-direction:column;gap:16px;will-change:transform;}
.pw-col:nth-child(1) .pw-track{animation:pwUp 54s linear infinite;}
.pw-col:nth-child(2) .pw-track{animation:pwDown 66s linear infinite;}
.pw-col:nth-child(3) .pw-track{animation:pwUp 60s linear infinite;}
.pw-col:nth-child(4) .pw-track{animation:pwDown 72s linear infinite;}
@keyframes pwUp{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes pwDown{from{transform:translateY(-50%);}to{transform:translateY(0);}}
.pw-shot{position:relative;flex:none;aspect-ratio:4/5;overflow:hidden;border-radius:10px;}
.pw-shot img{width:100%;height:100%;object-fit:cover;}

/* L1: soft edge vignette only — Fotos bleiben true-color */
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 110% at 50% 45%, transparent 58%, rgba(12,19,12,.14) 100%);}
/* L2: brand light leaks */
.hero-glows{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.hero-glows .blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;opacity:.7;}
.hero-glows .g1{width:48vw;height:48vw;max-width:680px;max-height:680px;top:-22%;right:-8%;background:radial-gradient(closest-side,rgba(46,125,50,.30),rgba(46,125,50,.05) 60%,transparent 72%);animation:heroDrift1 22s var(--ease-out) infinite;}
.hero-glows .go{width:44vw;height:44vw;max-width:600px;max-height:600px;bottom:-26%;left:-6%;background:radial-gradient(closest-side,rgba(242,201,76,.32),rgba(242,201,76,.06) 60%,transparent 72%);animation:heroDrift2 26s var(--ease-out) infinite;}
@keyframes heroDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-4%,4%) scale(1.1);}}
@keyframes heroDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5%,-4%) scale(1.12);}}

/* L5: centered glass panel */
.home-hero .wrap{z-index:6;width:100%;display:flex;justify-content:center;}
.hero-panel{max-width:820px;width:100%;text-align:center;position:relative;padding:clamp(1.8rem,3vw,2.9rem);border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  backdrop-filter:blur(36px) saturate(190%);-webkit-backdrop-filter:blur(36px) saturate(190%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 2px 12px rgba(0,0,0,.18),0 50px 90px -42px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,1);}
.hero-panel::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl);pointer-events:none;overflow:hidden;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%);background-size:280% 100%;animation:heroSheen 9s var(--ease-out) infinite;opacity:.45;mix-blend-mode:overlay;}
@keyframes heroSheen{0%{background-position:160% 0;}55%,100%{background-position:-60% 0;}}
.hero-panel .tagpill{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700);padding:.45rem .9rem .45rem .7rem;border-radius:var(--r-pill);background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);}
.hero-panel .tagpill .dotwrap{display:inline-flex;align-items:center;gap:3px;}
.hero-panel .tagpill .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:heroPulse 2.4s var(--ease-out) infinite;}
.hero-panel .tagpill .pulse.gold{background:var(--gold-600);animation-delay:.6s;}
@keyframes heroPulse{0%{box-shadow:0 0 0 0 rgba(46,125,50,.5);}70%{box-shadow:0 0 0 7px rgba(46,125,50,0);}100%{box-shadow:0 0 0 0 rgba(46,125,50,0);}}
.hero-panel h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;letter-spacing:-.03em;margin-top:1.2rem;color:var(--ink);}
.hero-panel h1 .accent{position:relative;color:var(--green);white-space:nowrap;}
.hero-panel h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.17em;background:linear-gradient(90deg,var(--gold),var(--gold-600));border-radius:3px;opacity:.92;z-index:-1;}
.hero-panel .lead{font-size:clamp(1.04rem,1.35vw,1.2rem);color:var(--ink-soft);max-width:50ch;margin:1.1rem auto 0;line-height:1.55;}
.home-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem;align-items:center;justify-content:center;}
.hero-trust2{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--border);justify-content:center;}
.hero-trust2 div{display:inline-flex;align-items:center;gap:.5rem;font-size:.91rem;font-weight:500;color:var(--ink-soft);}
.hero-trust2 .ic{width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.hero-trust2 .ic.green{background:var(--green-tint);color:var(--green);}
.hero-trust2 .ic.gold{background:rgba(242,201,76,.2);color:var(--gold-700);}

/* glass button variant */
.btn-glass{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.66));color:var(--ink);border-color:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.95);}
.btn-glass:hover{transform:translateY(-2px);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.95);}

/* soft dissolve into next section */
.hero-fade{position:absolute;left:0;right:0;bottom:0;z-index:8;height:clamp(160px,22vh,260px);pointer-events:none;background:linear-gradient(to bottom, transparent 0%, rgba(246,247,245,.35) 40%, rgba(246,247,245,.82) 72%, var(--panel) 100%);}

/* ---------- Service cards with icon (Leistungen elevated) ---------- */
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,2vw,1.9rem);box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.svc-card .svc-ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;}
.svc-card:nth-child(odd) .svc-ic{background:var(--green-tint);color:var(--green);}
.svc-card:nth-child(even) .svc-ic{background:rgba(242,201,76,.2);color:var(--gold-700);}
.svc-card h3{font-size:1.2rem;margin-bottom:.5rem;}
.svc-card p{font-size:.96rem;line-height:1.5;flex:1;}
.svc-card .card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;color:var(--green);font-weight:600;font-size:.93rem;transition:gap .3s var(--ease);}
.svc-card:hover .card-link{gap:.6rem;}

/* gold accent on stat numbers in the green band */
.stats-band.green .stat-num{color:var(--gold);}

/* editorial numbered steps (Ablauf elevated) */
.step-row{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;padding:1.6rem 0;border-bottom:1px solid var(--border);}
.step-row:last-child{border-bottom:0;}
.step-row .step-n{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;line-height:1.2;}
.step-row:nth-child(even) .step-n{color:var(--gold-700);}
.step-row h3{font-size:1.25rem;margin-bottom:.3rem;}
.step-row p{font-size:.98rem;}

@media(max-width:900px){
  .home-hero{min-height:auto;}
  .photowall{grid-template-columns:repeat(3,1fr);}
  .home-hero .wrap{padding-top:120px;padding-bottom:96px;}
  .hero-panel{max-width:none;}
}
@media(max-width:560px){
  .photowall{grid-template-columns:repeat(2,1fr);}
}
@media(prefers-reduced-motion:reduce){
  .pw-track,.hero-glows .blob,.hero-panel::after{animation:none!important;}
}

/* ============================================================
   DEPTH SYSTEM + BENTO + BIG STATS (2026-05-31, Loop v2)
   ============================================================ */

/* ---------- Tinted depth bands + corner glows ---------- */
.section.depth{position:relative;isolation:isolate;}
.section.depth::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.section.tint-green{background:linear-gradient(180deg,#fbfcfb,rgba(46,125,50,.035));}
.section.tint-gold{background:linear-gradient(180deg,#fdfcf8,rgba(242,201,76,.06));}
.section.tint-warm{background:var(--panel);}
.section.depth.glow-green::before{background:radial-gradient(58% 64% at 88% 4%, rgba(46,125,50,.10), transparent 60%);}
.section.depth.glow-gold::before{background:radial-gradient(54% 60% at 8% 96%, rgba(242,201,76,.13), transparent 62%);}
.section.depth.glow-duo::before{background:radial-gradient(48% 56% at 92% 2%, rgba(46,125,50,.09), transparent 60%),radial-gradient(46% 54% at 6% 100%, rgba(242,201,76,.12), transparent 62%);}
/* faint dot field for premium paper feel on light sections */
.section.dots::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(17,24,39,.045) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 75%);opacity:.6;}

/* ---------- BIG stat cards (wibify-scale numbers) ---------- */
/* contained shell so the cards sit IN something, not in empty white */
.bigstats-shell{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.6rem);
  background:linear-gradient(150deg,rgba(46,125,50,.06),rgba(242,201,76,.07) 90%);
  border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-sm);}
.bigstats-shell::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 70% at 6% 0%,rgba(46,125,50,.12),transparent 60%),radial-gradient(44% 70% at 96% 100%,rgba(242,201,76,.16),transparent 62%);}
.bigstats-shell::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(17,24,39,.05) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(120% 100% at 50% 50%,#000,transparent 80%);}
.bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative;z-index:1;}
.bigstat{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(1.6rem,2.4vw,2.2rem);background:#fff;border:1px solid var(--border);box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.bigstat:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.bigstat .bs-num{font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap;}
.bigstat:nth-child(even) .bs-num{color:var(--gold-700);}
.bigstat .bs-num .suffix{font-size:.5em;font-weight:700;}
.bigstat .bs-cap{margin-top:.7rem;font-size:.95rem;color:var(--ink-soft);font-weight:500;line-height:1.4;max-width:22ch;}
.bigstat .bs-ghost{position:absolute;right:-.4rem;bottom:-1.6rem;font-size:8rem;font-weight:800;line-height:1;color:rgba(17,24,39,.03);z-index:0;pointer-events:none;letter-spacing:-.05em;}
.bigstat > *{position:relative;z-index:1;}

/* ---------- Bento grid (Warum Maestre) ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(132px,auto);gap:1rem;
  grid-template-areas:
    "story story trustA"
    "story story trustB"
    "trustC trustD photo";}
.bento-cell{border-radius:var(--r-lg);padding:clamp(1.3rem,1.7vw,1.6rem);border:1px solid var(--border);background:#fff;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden;}
.bento-cell:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
/* ghost-icon watermark fills the empty space tastefully */
.bento-cell .bc-ghost{position:absolute;right:-10px;bottom:-14px;z-index:0;color:rgba(46,125,50,.06);pointer-events:none;}
.bento .trustB .bc-ghost,.bento .trustD .bc-ghost{color:rgba(242,201,76,.14);}
.bento-cell > *{position:relative;z-index:1;}

/* Story card: icon-pattern texture + tighter content flow */
.bento .story{grid-area:story;display:flex;flex-direction:column;color:#fff;border:0;
  background:linear-gradient(150deg,var(--green) 0%,var(--green-700) 78%);box-shadow:0 20px 50px -24px rgba(46,125,50,.7);}
.bento .story::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.6'%3E%3Cpath d='M14 30l1-5h16l1 5M14 30v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V30M14 30h18M20 34h6'/%3E%3Cpath d='M52 64h15V51H52zM67 56h4l3 3v5h-7M56.5 67a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;}
.bento .story::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 92% -6%,rgba(242,201,76,.28),transparent 58%);pointer-events:none;}
.bento .story .st-top{position:relative;z-index:1;}
.bento .story .st-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.bento .story h3{color:#fff;font-size:clamp(1.5rem,2.5vw,2rem);margin-top:.7rem;letter-spacing:-.02em;line-height:1.12;}
.bento .story p{color:rgba(255,255,255,.86);margin-top:.85rem;font-size:.98rem;line-height:1.55;max-width:46ch;position:relative;z-index:1;}
.bento .story .st-stats{position:relative;z-index:1;display:flex;gap:1.6rem;margin-top:auto;padding-top:1.3rem;}
.bento .story .st-stat .v{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff;}
.bento .story .st-stat .v b{color:var(--gold);font-weight:800;}
.bento .story .st-stat .k{font-size:.78rem;color:rgba(255,255,255,.72);margin-top:.25rem;}
.bento .story .st-sign{position:relative;z-index:1;margin-top:1.1rem;display:flex;align-items:center;gap:.6rem;font-size:.88rem;font-weight:600;color:#fff;}
.bento .story .st-sign .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}

.bento .trustA{grid-area:trustA;}.bento .trustB{grid-area:trustB;}.bento .trustC{grid-area:trustC;}.bento .trustD{grid-area:trustD;}
.bento .photo{grid-area:photo;padding:0;border:0;min-height:140px;}
.bento .photo img{width:100%;height:100%;object-fit:cover;}
/* branded logo cell (replaces photo) */
.bento .brandlogo{grid-area:photo;display:flex;align-items:center;justify-content:center;min-height:140px;
  background:linear-gradient(150deg,#fff,#eef2ee);overflow:hidden;}
.bento .brandlogo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(46,125,50,.08),transparent 62%),radial-gradient(60% 70% at 100% 100%,rgba(242,201,76,.14),transparent 60%);}
.bento .brandlogo img{position:relative;z-index:1;width:auto;max-width:74%;max-height:74%;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(17,24,39,.12));transition:transform .5s var(--ease);}
.bento .brandlogo:hover img{transform:scale(1.04) rotate(-1deg);}
.bento-cell .bc-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;background:var(--green-tint);color:var(--green);}
.bento .trustB .bc-ic,.bento .trustD .bc-ic{background:rgba(242,201,76,.2);color:var(--gold-700);}
.bento-cell h4{font-size:1.06rem;letter-spacing:-.01em;margin-bottom:.3rem;color:var(--ink);}
.bento-cell p{font-size:.91rem;color:var(--ink-soft);line-height:1.45;}

/* ---------- Price bento (So entsteht Ihr Preis) ---------- */
.price-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(140px,auto);gap:1.1rem;
  grid-template-areas:
    "lead lead fac1 fac2"
    "lead lead fac3 cta";}
.pb-cell{border-radius:var(--r-lg);padding:clamp(1.3rem,1.9vw,1.8rem);border:1px solid var(--border);background:#fff;box-shadow:var(--sh-sm);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.pb-cell:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.pb-lead{grid-area:lead;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(150deg,#fff,#f3f6f3);}
.pb-lead .eyebrow{margin-bottom:.6rem;}
.pb-lead h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.1;}
.pb-lead p{margin-top:.9rem;font-size:1rem;line-height:1.55;max-width:40ch;}
.pb-lead .pb-formula{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.3rem;}
.pb-lead .pb-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--green-700);background:var(--green-tint);border:1px solid rgba(46,125,50,.2);padding:.45rem .8rem;border-radius:var(--r-pill);}
.pb-lead .pb-eq{color:var(--ink-faint);font-weight:700;}
.pb-lead .pb-result{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--ink);background:linear-gradient(135deg,rgba(242,201,76,.28),rgba(242,201,76,.16));border:1px solid rgba(242,201,76,.5);padding:.45rem .8rem;border-radius:var(--r-pill);}
.pb-fac1{grid-area:fac1;}.pb-fac2{grid-area:fac2;}.pb-fac3{grid-area:fac3;}
.pb-cell .pb-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;background:var(--green-tint);color:var(--green);}
.pb-fac2 .pb-ic{background:rgba(242,201,76,.2);color:var(--gold-700);}
.pb-cell h4{font-size:1.02rem;margin-bottom:.25rem;}
.pb-cell p{font-size:.88rem;color:var(--ink-soft);line-height:1.4;}
.pb-cta{grid-area:cta;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.7rem;background:linear-gradient(150deg,var(--ink),#1b2436);color:#fff;border:0;}
.pb-cta p{color:rgba(255,255,255,.8);font-size:.92rem;}
.pb-cta .btn{margin-top:.2rem;}

@media(max-width:900px){
  .bigstats{grid-template-columns:repeat(2,1fr);}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(140px,auto);
    grid-template-areas:
      "story story"
      "trustA trustB"
      "trustC trustD"
      "photo photo";}
  .bento .photo{min-height:200px;}
  .price-bento{grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "lead lead"
      "fac1 fac2"
      "fac3 cta";}
}
@media(max-width:560px){
  .bigstats{grid-template-columns:1fr 1fr;}
  .bento{grid-template-columns:1fr;grid-template-areas:"story" "trustA" "trustB" "trustC" "trustD" "photo";}
  .price-bento{grid-template-columns:1fr;grid-template-areas:"lead" "fac1" "fac2" "fac3" "cta";}
}

/* ============================================================
   BRAPUA-INSPIRED UPGRADES (2026-05-31, Loop v3)
   ============================================================ */
.float-ico{position:absolute;z-index:0;width:clamp(46px,5vw,68px);height:clamp(46px,5vw,68px);border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5));backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.9);color:var(--green);pointer-events:none;}
.float-ico.gold{color:var(--gold-700);}
.float-ico svg{width:46%;height:46%;}
.float-ico.fa{top:13%;left:4%;animation:fico 7s var(--ease-out) infinite;}
.float-ico.fb{top:20%;right:5%;animation:fico 8.5s var(--ease-out) infinite reverse;}
.float-ico.fc{bottom:16%;left:7%;animation:fico 9.5s var(--ease-out) infinite;}
@keyframes fico{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-14px) rotate(2deg);}}
@media(max-width:760px){.float-ico{display:none;}}

.rechner-frame{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.52));backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(17,24,39,.06),0 44px 80px -40px rgba(17,24,39,.45),inset 0 1px 0 rgba(255,255,255,.95);}
.rechner-chrome{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15));}
.rechner-chrome .dot{width:11px;height:11px;border-radius:50%;}
.rechner-chrome .dot.r{background:#ff5f57;}.rechner-chrome .dot.y{background:#febc2e;}.rechner-chrome .dot.g{background:#28c840;}
.rechner-chrome .addr{margin-left:.8rem;flex:1;font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:var(--r-pill);padding:.32rem .8rem;display:inline-flex;align-items:center;gap:.4rem;max-width:max-content;}
.rechner-chrome .addr svg{color:var(--green);}
.rechner-frame .rechner{background:transparent;border:0;box-shadow:none;border-radius:0;}

.vs-card{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);margin-top:1.8rem;border:1px solid var(--border);}
.vs-side{padding:clamp(1.4rem,2.4vw,2rem);}
.vs-portal{background:#fff;}
.vs-maestre{background:linear-gradient(155deg,var(--green) 0%,var(--green-700) 80%);color:#fff;position:relative;overflow:hidden;}
.vs-maestre::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 90% 0%,rgba(242,201,76,.22),transparent 60%);pointer-events:none;}
.vs-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;border-radius:var(--r-pill);margin-bottom:1.1rem;position:relative;z-index:1;}
.vs-portal .vs-tag{color:var(--ink-faint);background:var(--panel);border:1px solid var(--border);}
.vs-maestre .vs-tag{color:var(--green-700);background:var(--gold);}
.vs-side h3{font-size:1.15rem;margin-bottom:1rem;position:relative;z-index:1;}
.vs-maestre h3{color:#fff;}
.vs-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;position:relative;z-index:1;}
.vs-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;line-height:1.4;}
.vs-portal .vs-list li{color:var(--ink-soft);}
.vs-maestre .vs-list li{color:rgba(255,255,255,.92);font-weight:500;}
.vs-ic{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:.05rem;}
.vs-portal .vs-ic{background:rgba(17,24,39,.06);color:var(--ink-faint);}
.vs-maestre .vs-ic{background:rgba(255,255,255,.18);color:var(--gold);}
@media(max-width:680px){.vs-card{grid-template-columns:1fr;}}

.steps-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;}
.step-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column;}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.step-visual{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--green-tint),rgba(242,201,76,.1));}
.step-visual img{width:100%;height:100%;object-fit:cover;}
.step-visual .step-illu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--green);}
.step-card:nth-child(even) .step-visual .step-illu{color:var(--gold-700);}
.step-visual .step-illu svg{width:34%;height:34%;opacity:.9;}
.step-num{position:absolute;top:.7rem;left:.7rem;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:.85rem;box-shadow:var(--sh-sm);}
.step-card:nth-child(even) .step-num{background:var(--gold-700);}
.step-body{padding:1.1rem 1.2rem 1.4rem;flex:1;}
.step-body h3{font-size:1.08rem;margin-bottom:.35rem;}
.step-body p{font-size:.92rem;color:var(--ink-soft);line-height:1.45;}
@media(max-width:900px){.steps-flow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps-flow{grid-template-columns:1fr;}}

/* ============================================================
   NATIVE GOOGLE REVIEWS (watermark-frei, 2026-05-31)
   ============================================================ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.gr-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,2vw,1.8rem);box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.gr-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.gr-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.gr-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em;}
.gr-meta{flex:1;min-width:0;}
.gr-name{font-weight:600;font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:.35rem;}
.gr-name .gv{flex:none;}
.gr-date{font-size:.82rem;color:var(--ink-faint);margin-top:.05rem;}
.gr-gicon{flex:none;width:22px;height:22px;}
.gr-stars{color:#fbbc05;letter-spacing:2px;font-size:1.02rem;margin-bottom:.6rem;}
.gr-text{font-size:.97rem;color:var(--ink-soft);line-height:1.55;flex:1;}
/* CTA card to Google */
.gr-cta{background:linear-gradient(150deg,var(--green) 0%,var(--green-700) 82%);color:#fff;border:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;position:relative;overflow:hidden;}
.gr-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 90% 0%,rgba(242,201,76,.22),transparent 60%);pointer-events:none;}
.gr-cta .gr-rate{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;position:relative;z-index:1;}
.gr-cta .gr-rate small{font-size:.42em;font-weight:700;color:var(--gold);}
.gr-cta .gr-substars{color:var(--gold);letter-spacing:2px;font-size:1.05rem;position:relative;z-index:1;}
.gr-cta p{color:rgba(255,255,255,.85);font-size:.92rem;position:relative;z-index:1;}
.gr-cta .btn{margin-top:.4rem;position:relative;z-index:1;}
.btn-white-g{background:#fff;color:var(--green-700);box-shadow:var(--sh-sm);}
.btn-white-g:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.reviews-grid{grid-template-columns:1fr;}}

/* ---------- Bewertungen: Spotlight-Carousel (2026-05-31) ---------- */
.rev-carousel{position:relative;max-width:860px;margin:0 auto;}
.rev-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;border-radius:var(--r-lg);}
.rev-viewport::-webkit-scrollbar{display:none;}
.js .rev-viewport{scroll-behavior:smooth;}
.rev-track{display:flex;}
.rev-slide{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:center;display:flex;justify-content:center;padding:.5rem;}
.rev-card{position:relative;width:100%;display:flex;flex-direction:column;gap:1.05rem;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#fff 0%,#fbfcfb 100%);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.7rem,3.4vw,2.8rem);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.9);}
.rev-card::before{content:"";position:absolute;z-index:-1;top:-45%;right:-12%;width:58%;height:130%;pointer-events:none;
  background:radial-gradient(closest-side,var(--green-tint),transparent 72%);}
.rev-quote{font-family:Georgia,'Times New Roman',serif;font-size:4.4rem;line-height:.55;height:.42em;color:var(--green);opacity:.16;user-select:none;}
.rev-stars{font-size:1.18rem;letter-spacing:3px;margin-bottom:0;}
.rev-text{font-size:clamp(1.04rem,1.45vw,1.24rem);line-height:1.62;color:var(--ink);font-weight:500;}
.rev-author{display:flex;align-items:center;gap:.85rem;margin-top:.25rem;padding-top:1.15rem;border-top:1px solid var(--border);}
.rev-author .gr-avatar{width:48px;height:48px;font-size:1.15rem;}
.rev-author .gr-name{font-size:1.04rem;}
.rev-author .gr-date{font-size:.86rem;color:var(--ink-soft);margin-top:.12rem;}
/* nav arrows (only with JS) */
.rev-nav{display:none;position:absolute;top:calc(50% - 1.7rem);transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.92);
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--sh-md);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.js .rev-nav{display:flex;}
.rev-nav:hover{transform:translateY(-50%) scale(1.09);box-shadow:0 14px 40px rgba(17,24,39,.16);}
.rev-nav:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
.rev-nav svg{width:22px;height:22px;}
.rev-prev{left:-4px;}
.rev-next{right:-4px;}
@media(min-width:980px){.rev-prev{left:-23px;}.rev-next{right:-23px;}}
/* dots */
.rev-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem;}
.rev-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(17,24,39,.18);transition:width .35s var(--ease),background .35s var(--ease);}
.rev-dot:hover{background:rgba(17,24,39,.32);}
.rev-dot.is-active{width:26px;border-radius:5px;background:var(--green);}
.rev-dot:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
/* footer rating + CTA */
.rev-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.6rem;margin-top:2.1rem;}
.rev-foot-rate{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:700;color:var(--ink);font-size:1.1rem;}
.rev-foot-rate .rs{color:var(--gold);letter-spacing:2px;font-size:1rem;}
.rev-foot-rate small{color:var(--ink-soft);font-weight:500;font-size:.85rem;}
@media(prefers-reduced-motion:reduce){.js .rev-viewport{scroll-behavior:auto;}}
@media(max-width:560px){.js .rev-nav{display:none;}.rev-slide{padding:.25rem;}}

/* ============================================================
   SERVICE-PAGE v2 SHELL (2026-06-02)
   Shared hero + Foto-Glas-Visual + 3D-Akzente fuer alle
   Leistungsseiten (umzug/transport/entruempelung/firmenumzug/
   umzugspreisvergleich). Holt die Leistungsseiten auf den
   Standard von index.html + ueber-uns.html. Nutzt das
   bestehende depth/tint/glow + svc-card + step-row System.
   ============================================================ */
.svc-hero{position:relative;overflow:hidden;isolation:isolate;}
/* SEO-City-Pages: 3D-Hero voll aus dem 820px-Prosa-Container ausbrechen (body hat overflow-x:hidden -> kein H-Scroll) */
main.container .seo-hero3d{width:100vw;margin-left:calc(50% - 50vw);margin-bottom:clamp(1.5rem,3vw,2.5rem);}
.svc-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.6vw,4.2rem);align-items:center;}
.svc-hero h1{font-size:clamp(2.3rem,4.6vw,3.25rem);font-weight:700;letter-spacing:-.03em;margin:1.05rem 0 0;text-wrap:balance;color:var(--ink);}
.svc-hero h1 .accent{position:relative;color:var(--green);white-space:nowrap;}
.svc-hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.16em;background:linear-gradient(90deg,var(--gold),var(--gold-600));border-radius:3px;opacity:.92;z-index:-1;}
.svc-hero .lead{margin-top:1.2rem;max-width:48ch;}
.svc-hero .hero-actions{margin-top:1.8rem;}
.svc-hero .hero-trust{margin-top:1.9rem;}

/* Foto-Glas-Visual rechts: gerahmtes Job-Foto + floatende 3D-Akzente */
.svc-visual{position:relative;max-width:482px;margin-left:auto;}
.svc-photo{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 2px 14px rgba(0,0,0,.12),0 44px 84px -42px rgba(11,42,30,.6);
  border:1px solid rgba(255,255,255,.72);transform:rotate(-1.4deg);}
.svc-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,28,13,.32),transparent 44%);}
/* dezenter Glas-Rahmen-Schein */
.svc-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.svc-3d{position:absolute;z-index:3;height:auto;filter:drop-shadow(0 16px 24px rgba(11,42,30,.34));will-change:transform;}
.svc-3d.s3d-a{width:clamp(60px,8vw,98px);top:-26px;right:7%;animation:svcFloat 7s var(--ease-out) infinite;}
.svc-3d.s3d-b{width:clamp(50px,6.5vw,82px);bottom:72px;left:-24px;animation:svcFloat 8.6s var(--ease-out) .4s infinite reverse;}
.svc-3d.s3d-van{width:clamp(124px,19vw,216px);bottom:-30px;right:-16px;animation:svcFloat 10s var(--ease-out) .2s infinite;}
@keyframes svcFloat{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-13px) rotate(1.6deg);}}
/* schwebendes Glas-Label */
.svc-badge{position:absolute;left:-16px;top:30%;z-index:4;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.92);box-shadow:var(--sh-md);border-radius:var(--r-pill);
  padding:.5rem .9rem;font-size:.82rem;font-weight:600;color:var(--ink);}
.svc-badge .bdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;}
.svc-badge b{color:var(--green);font-weight:700;}
@media(max-width:900px){
  .svc-hero-grid{grid-template-columns:1fr;}
  .svc-visual{margin:.5rem auto 0;max-width:430px;}
}
@media(max-width:600px){
  .svc-3d.s3d-van{display:none;}
  .svc-badge{display:none;}
  .svc-photo{transform:none;}
}
@media(prefers-reduced-motion:reduce){.svc-3d{animation:none!important;}}

/* ============================================================
   HERO 3D-STAGE — komponierte Apple-Figuren-Szene (ersetzt Foto-Hero)
   Prototyp 2026-06-02, zunaechst auf /umzug. Quelle: assets/hero-3d/*.webp
   Wrapper .h3 = Pointer-Parallax (stage-parallax.js), inneres img = Float-Keyframe,
   so kollidieren die Transforms nie.
   ============================================================ */
.hero3d-stage{position:relative;width:100%;max-width:540px;margin-left:auto;
  min-height:clamp(420px,44vw,560px);isolation:isolate;}
/* weicher Boden-Schatten unter dem Truck */
.hero3d-stage::after{content:"";position:absolute;left:54%;bottom:6%;transform:translateX(-50%);
  width:72%;height:54px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(17,24,39,.18),transparent 72%);filter:blur(7px);}
/* Brand-Halo, damit der weisse Truck auf hellem Hintergrund ploppt */
.hero3d-stage::before{content:"";position:absolute;inset:3% 0 5%;z-index:0;pointer-events:none;
  background:radial-gradient(54% 46% at 62% 42%,rgba(46,125,50,.13),transparent 64%);}

.h3{position:absolute;z-index:1;will-change:transform;}
.h3 img{display:block;width:100%;height:auto;will-change:transform;}
.h3-coin{display:none;} /* redundant zur Karten-Check-Ikone -> raus, schafft freie Flaeche */
.h3-truck{width:54%;right:0;bottom:7%;z-index:2;}
.h3-truck img{filter:drop-shadow(0 30px 32px rgba(11,42,30,.24));animation:h3idle 9s var(--ease-out) infinite;}
.h3-stack{width:25%;left:1%;bottom:5%;z-index:3;}
.h3-stack img{filter:drop-shadow(0 18px 22px rgba(11,42,30,.22));animation:h3floatA 8.4s var(--ease-out) .3s infinite;}
.h3-plant{width:16%;left:23%;bottom:3%;z-index:4;}
.h3-plant img{filter:drop-shadow(0 16px 18px rgba(11,42,30,.22));animation:h3floatB 9.2s var(--ease-out) .6s infinite;}
.h3-chair{width:25%;left:2%;top:5%;z-index:3;}
.h3-chair img{filter:drop-shadow(0 24px 26px rgba(11,42,30,.20));animation:h3floatA 10s var(--ease-out) .2s infinite reverse;}
.h3-box2{width:15%;left:28%;top:1%;z-index:4;}
.h3-box2 img{filter:drop-shadow(0 22px 24px rgba(11,42,30,.28));animation:h3floatB 7.4s var(--ease-out) infinite;}
.h3-box1{width:19%;right:2%;top:4%;z-index:4;}
.h3-box1 img{filter:drop-shadow(0 24px 26px rgba(11,42,30,.30));animation:h3floatA 7s var(--ease-out) .5s infinite reverse;}
.h3-pin{width:11%;right:24%;top:9%;z-index:5;}
.h3-pin img{filter:drop-shadow(0 14px 16px rgba(11,42,30,.26));animation:h3drift 6.2s var(--ease-out) infinite;}

/* Glas-Karte: in die freie Tasche neben dem Anker. Basis = umzug (Anker rechts -> Karte links) */
.h3-card{position:absolute;left:-3%;top:33%;z-index:6;margin:0;display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.82));
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.92);box-shadow:var(--sh-lg);border-radius:var(--r-md);
  padding:.66rem .92rem .66rem .72rem;max-width:200px;animation:h3idle 11s var(--ease-out) infinite;}
.h3-card .h3-card-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green),var(--green-700));color:#fff;box-shadow:0 5px 13px rgba(46,125,50,.32);}
.h3-card .h3-card-ic svg{width:21px;height:21px;display:block;}
.h3-card figcaption b{display:block;font-size:.84rem;font-weight:700;color:var(--ink);line-height:1.2;}
.h3-card figcaption span{display:block;font-size:.74rem;color:var(--ink-faint);margin-top:.12rem;line-height:1.25;}

/* Pro Service: Layout gespiegelt + Karte in andere freie Ecke (Desktop) */
@media(min-width:601px){
  /* Mirror-Layout (Anker links -> Karte rechts) fuer transport + entruempelung */
  .axis-transport .h3-truck,.axis-entruempelung .h3-truck{left:0;right:auto;}
  .axis-transport .h3-stack,.axis-entruempelung .h3-stack{right:1%;left:auto;}
  .axis-transport .h3-plant,.axis-entruempelung .h3-plant{right:23%;left:auto;}
  .axis-transport .h3-chair,.axis-entruempelung .h3-chair{right:2%;left:auto;}
  .axis-transport .h3-box2,.axis-entruempelung .h3-box2{right:28%;left:auto;}
  .axis-transport .h3-box1,.axis-entruempelung .h3-box1{left:2%;right:auto;}
  .axis-transport .h3-pin,.axis-entruempelung .h3-pin{left:24%;right:auto;}
  /* 4 verschiedene Karten-Positionen, jeweils in freier Flaeche */
  .axis-transport .h3-card{left:auto;right:-3%;top:33%;bottom:auto;}      /* rechts-oben */
  .axis-firmenumzug .h3-card{left:-3%;right:auto;top:51%;bottom:auto;}    /* links-unten */
  .axis-entruempelung .h3-card{left:auto;right:-3%;top:51%;bottom:auto;}  /* rechts-unten */
}

@keyframes h3floatA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(2deg)}}
@keyframes h3floatB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-19px) rotate(-2.4deg)}}
@keyframes h3drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes h3idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media(max-width:900px){
  .hero3d-stage{margin:.6rem auto 0;max-width:480px;min-height:clamp(380px,86vw,480px);}
}
@media(max-width:600px){
  .hero3d-stage{max-width:410px;min-height:350px;}
  .h3-pin{display:none;}
  .h3-card{display:none;} /* Buehne mobil zu eng -> Karte aus, Botschaft steht im Seitentext */
}
@media(prefers-reduced-motion:reduce){.h3 img,.h3-card{animation:none!important;}}