/* ================================================================
   TechnikTeam Bad Laasphe  ·  style.css  ·  Redesign 2025
   ----------------------------------------------------------------
   Neu entworfen. Kein Template als Ausgangspunkt.
   Jede Entscheidung gilt für dieses Geschäft, nicht allgemein.

   Farbfolge der Seite:
   ┌ Cream-Nav
   ├ Hero: Exponat-Prinzip (TV-SVG) | Ghost „30" | LED-Badge
   ├ Lime: vier Versprechen, ohne Erklärung
   ├ Cream: Leistungen als gedruckter Katalog
   ├ Navy: Persönliche Geschichte, „30 Jahre"
   ├ Navy-mid: Marken fließen
   ├ Weiß: Kontakt, direkt, typografisch
   └ Navy-deep: Footer

   Markenfarben: Navy #21304D · Lime #84BC35
================================================================ */

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  --navy:      #21304D;
  --navy-mid:  #1A2840;
  --navy-deep: #101C30;
  --lime:      #84BC35;
  --lime-d:    #5E8A22;
  --lime-pale: #EEF7D5;

  /* Hintergrundfarbe: kein steriles Weiß */
  --cream:   #f5f4f0;
  --cream-2: #eceae3;
  --sand:    #d8d3c8;
  --white:   #fafaf8;

  --ink:     #21304D;
  --ink-2:   #4A6080;
  --ink-3:   #8A9DB5;

  --rule:      rgba(33,48,77,.09);
  --rule-mid:  rgba(33,48,77,.16);

  /* Typografie */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
          Consolas, 'DejaVu Sans Mono', monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --t:    .32s cubic-bezier(.16,1,.3,1);

  --c:   min(88rem,100%);
  --px:  clamp(1.25rem,5vw,3.5rem);

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

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans);
  font-size: 1rem; line-height: 1.65;
  color: var(--ink); background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
svg { display:block; flex-shrink:0; }

/* ── LAYOUT ────────────────────────────────────────────────── */
.c { width:var(--c); padding-inline:var(--px); margin-inline:auto; }

/* ── SCROLL-REVEAL ─────────────────────────────────────────── */
.sr  { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.sr.on { opacity:1; transform:none; }
.s1  { transition-delay:.08s; }
.s2  { transition-delay:.16s; }
.s3  { transition-delay:.24s; }
.s4  { transition-delay:.32s; }

/* ── PROGRESS BAR ──────────────────────────────────────────── */
#prog {
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(to right, var(--lime-d), var(--lime));
  z-index:1000; transition:width .1s linear; pointer-events:none;
}

/* ── SKIP LINK ─────────────────────────────────────────────── */
.skip-link {
  position:absolute; left:-100vw; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  left:1rem; top:1rem; width:auto; height:auto;
  background:var(--navy); color:#fff;
  padding:.5rem 1.1rem; border-radius:3px;
  z-index:9999; font-weight:700; font-size:.85rem;
}

/* ── WCAG FOCUS ────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:2px; }

/* ════════════════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════════════════ */
#nav {
  position:sticky; top:0; z-index:300;
  background:var(--cream);
  border-bottom:1px solid var(--rule-mid);
  transition: box-shadow var(--t), background var(--t);
}
#nav.scrolled {
  background:rgba(245,244,240,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 24px rgba(33,48,77,.08);
}
.nav-inner {
  display:flex; align-items:center;
  gap:1.5rem; padding-block:.62rem;
}
.nav-logo img { height:36px; width:auto; }
.nav-links {
  display:flex; align-items:center;
  gap:0; margin-left:auto;
}

/* Nav-Link mit expanding Lime-Unterlinie */
.nl {
  position:relative;
  font-size:.77rem; font-weight:700;
  color:var(--ink-2);
  padding:.4rem .85rem;
  transition:color var(--t);
}
.nl::after {
  content:''; position:absolute;
  bottom:0; left:50%;
  width:0; height:2px;
  background:var(--lime);
  transform:translateX(-50%);
  transition:width .28s var(--ease);
}
.nl:hover { color:var(--ink); }
.nl:hover::after { width:calc(100% - 1.7rem); }

.nav-actions { display:flex; align-items:center; gap:.5rem; }
.nav-phone {
  display:flex; align-items:center; gap:.4rem;
  font-size:.77rem; font-weight:800; color:var(--ink-2);
  padding:.4rem .85rem;
  border-bottom:2px solid transparent;
  transition:color var(--t), border-color var(--t);
}
.nav-phone:hover { color:var(--ink); border-bottom-color:var(--lime); }
.nav-phone svg { width:13px; height:13px; }

/* ── Nav-Status Badge ──────────────────────────────────────── */
/* Basis — JS setzt zusätzlich .is-open / .is-closing / .is-closed */
.nav-status {
  font-family:var(--mono) !important;
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  border-radius:2px !important;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .72rem;
  margin-left:.25rem;
  border-left:1px solid var(--rule-mid);
  padding-left:.75rem;
}
.nav-status.is-open    { color:#15803D; background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.22); }
.nav-status.is-closing { color:#B45309; background:rgba(217,119,6,.10); border:1px solid rgba(217,119,6,.22); }
.nav-status.is-closed  { color:#B91C1C; background:rgba(220,38,38,.10); border:1px solid rgba(220,38,38,.20); }
.nav-status .ns-dot {
  display:inline-block; width:6px; height:6px;
  border-radius:50%; flex-shrink:0;
}
.nav-status.is-open    .ns-dot { background:#16A34A; animation:led-pulse 2.4s ease-in-out infinite; }
.nav-status.is-closing .ns-dot { background:#D97706; animation:led-pulse 2.4s ease-in-out infinite; }
.nav-status.is-closed  .ns-dot { background:#DC2626; }

/* cd-pill: Schließt-in-X-Minuten Countdown */
.cd-pill {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(239,68,68,.09); color:#b91c1c;
  border:1px solid rgba(239,68,68,.2);
  padding:.28rem .85rem; border-radius:2px;
  font-family:var(--mono);
  font-size:.72rem; font-weight:700; margin-bottom:.75rem;
  letter-spacing:.04em;
}
.cd-dot {
  width:5px; height:5px; background:#DC2626;
  border-radius:50%; flex-shrink:0;
  animation:puls 1.5s infinite;
}

[data-theme="dark"] .nav-status         { border-left-color:rgba(255,255,255,.12); }
@media (max-width:640px) { #nav .nav-status { display:none !important; } }

/* Dark toggle */
#dark-toggle {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-mid); border-radius:2px;
  color:var(--ink-2); background:transparent;
  transition:border-color var(--t), color var(--t);
}
#dark-toggle:hover { border-color:var(--navy); color:var(--navy); }
#dark-toggle svg { width:14px; height:14px; }
[data-theme="light"] .icon-moon, [data-theme="dark"] .icon-sun  { display:none; }
[data-theme="light"] .icon-sun,  [data-theme="dark"] .icon-moon { display:block; }

/* Hamburger */
#hbg {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:36px; height:36px; padding:5px;
  border-radius:2px; border:1px solid var(--rule-mid);
}
.hbar {
  display:block; width:100%; height:2px; background:var(--navy);
  transition:transform .28s var(--ease), opacity .2s ease;
}
#hbg.o .hbar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#hbg.o .hbar:nth-child(2) { opacity:0; transform:scaleX(0); }
#hbg.o .hbar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
#mob {
  display:none; background:var(--navy-deep);
  position:absolute; width:100%; top:100%; left:0;
  z-index:200; box-shadow:0 24px 64px rgba(0,0,0,.24);
  border-top:3px solid var(--lime);
}
#mob.o { display:block; }
.mob-inner { display:flex; flex-direction:column; padding:.5rem 0 1.75rem; }
.mob-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem var(--px);
  font-size:1rem; font-weight:700; color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color var(--t), background var(--t);
}
.mob-link:hover { color:#fff; background:rgba(255,255,255,.04); }
.mob-link svg { width:14px; height:14px; opacity:.3; }
.mob-cta {
  display:flex; align-items:center; gap:.6rem;
  margin:1.25rem var(--px) 0; padding:.9rem 1.4rem;
  background:var(--lime); color:#fff;
  font-size:.95rem; font-weight:800; border-radius:2px;
  justify-content:center;
}

/* ════════════════════════════════════════════════════════════
   HERO  –  DAS EXPONAT
   ─────────────────────────────────────────────────────────
   Konzept: Kein Foto-Banner. Kein Template-Muster.
   Ein freigestelltes Produkt steht im Mittelpunkt —
   wie in einer Ausstellung. „30" als Ghost-Watermark.
   LED-Punkt signalisiert: Jetzt vorführbereit.

   Aufbau:
   ┌────────────────────────────────────────┐
   │  Ghost „30"                            │
   │                                        │
   │  [LED-Badge]                           │
   │  [Headline]    |  [TV-SVG]            │
   │  [Sub]         |                      │
   │  [CTAs]        |                      │
   │                                        │
   ├────────────────────────────────────────┤
   │  Heritage-Streifen (Monospace)         │
   └────────────────────────────────────────┘
════════════════════════════════════════════════════════════ */

#hero {
  display:flex;
  flex-direction:column;
  /* kein min-height:100dvh — Inhalt bestimmt die Höhe */
  background:var(--cream);
  position:relative;
  overflow:hidden;
}

/* Saisonale Partikel */
#seasonal-canvas {
  position:absolute; top:0; left:0;
  width:100%; height:65%;
  pointer-events:none; z-index:3;
  display:none;
}

/* Ghost „30" — Heritage-Zahl mit opacity: 0.05 */
.hero-bg-num {
  position:absolute;
  right:-0.04em;
  top:50%;
  transform:translateY(-50%);
  font-size:clamp(22rem,50vw,84rem);
  font-weight:900;
  letter-spacing:-.07em;
  line-height:1;
  color:var(--navy);
  opacity:.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
  font-family:var(--sans);
}

/* Hidden stub für initSeasonalHero() JS-Kompatibilität */
.hero-img {
  position:absolute;
  width:0; height:0;
  overflow:hidden;
  pointer-events:none;
  aria-hidden:true;
}

/* Haupt-Content-Bereich */
.hero-inner {
  flex:1;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1;
  padding:clamp(2.5rem,5vh,4rem) 0 clamp(1.5rem,3vh,2.5rem);
}

/* Exponat-Grid: Text links, Produkt rechts */
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(2.5rem,6vw,7rem);
  align-items:center;
}

/* ── Text-Spalte ─────────────────────────────────────────── */
.hero-text-col {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* LED-Badge: animierter Punkt + Monospace-Text */
.hero-led-badge {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--lime-d);
  background:rgba(132,188,53,.07);
  border:1px solid rgba(132,188,53,.22);
  padding:.35rem .95rem;
  border-radius:2px;
  margin-bottom:2.25rem;
}

/* LED-Punkt: pulsierend */
.led-dot {
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--lime);
  flex-shrink:0;
  animation:led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
  0%,100% {
    box-shadow:0 0 0 0 rgba(132,188,53,.5);
    opacity:1;
  }
  50% {
    box-shadow:0 0 0 5px rgba(132,188,53,.0);
    opacity:.65;
  }
}

/* Ortshinweis über Headline */
.hero-ort {
  font-family:var(--mono);
  font-size:.62rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lime-d);
  margin-bottom:1.25rem; opacity:.8;
}

/* Headline */
.hero-h1 {
  font-size:clamp(2rem,3.8vw,4.5rem);
  font-weight:900; letter-spacing:-.065em; line-height:.92;
  color:var(--navy);
  margin-bottom:clamp(1rem,2vh,1.5rem);
  max-width:16ch;
}
.hero-h1 span { color:var(--lime-d); }

/* Subtext */
.hero-sub {
  font-size:clamp(.85rem,1.3vw,.97rem);
  color:var(--ink-2); line-height:1.76;
  max-width:44ch;
  margin-bottom:2.25rem;
}

/* CTA-Zeile */
.hero-cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}

/* Countdown / Ankündigung */
.cd-pill {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(239,68,68,.09); color:#b91c1c;
  border:1px solid rgba(239,68,68,.2);
  padding:.28rem .85rem; border-radius:2px;
  font-family:var(--mono);
  font-size:.72rem; font-weight:700; margin-bottom:.75rem;
  letter-spacing:.04em;
}
.cd-dot { width:5px; height:5px; background:#DC2626; border-radius:50%;
  animation:puls 1.5s infinite; }
@keyframes puls {
  0%,100% { box-shadow:0 0 0 2px rgba(220,38,38,.2); }
  50%      { box-shadow:0 0 0 6px rgba(220,38,38,.04); }
}

/* ── Exponat-Spalte ──────────────────────────────────────── */
.hero-exhibit-col {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}

.hero-stage {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

/* Das Gerät */
.product-tv {
  width:100%;
  max-width:480px;
  height:auto;
  filter:drop-shadow(0 32px 64px rgba(33,48,77,.16))
         drop-shadow(0 8px 20px rgba(33,48,77,.10));
}

/* Boden-Schatten */
.product-floor {
  width:62%;
  height:12px;
  margin-top:-4px;
  background:radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(33,48,77,.14) 0%,
    transparent 100%
  );
  pointer-events:none;
}

/* ── Hero-Streifen (Monospace-Fakten) ────────────────────── */
.hero-strip {
  background:var(--navy);
  padding:.9rem 0;
  position:relative;
  z-index:1;
  flex-shrink:0;
}

.hero-strip-row {
  display:flex;
  align-items:center;
  gap:0;
  overflow:hidden;
}

.hero-strip-item {
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.08em;
  color:rgba(255,255,255,.45);
  padding-inline:.25rem;
  white-space:nowrap;
  flex:1;
  text-align:center;
}

.hero-strip-div {
  display:block;
  width:1px;
  height:14px;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
}

/* ════════════════════════════════════════════════════════════
   CTA-BUTTONS  –  Keine Pillen
════════════════════════════════════════════════════════════ */
.cta-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.75rem;
  background:var(--navy); color:#fff;
  font-size:.84rem; font-weight:800;
  letter-spacing:.02em; white-space:nowrap;
  border-radius:2px;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.cta-primary svg { width:16px; height:16px; }
.cta-primary:hover {
  background:#2E4470;
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(33,48,77,.22);
}
.cta-ghost {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.72rem 1.4rem;
  background:transparent; color:var(--navy);
  font-size:.82rem; font-weight:800;
  letter-spacing:.02em; white-space:nowrap;
  border:1.5px solid var(--rule-mid); border-radius:2px;
  transition:border-color var(--t), color var(--t), background var(--t);
}
.cta-ghost:hover { border-color:var(--navy); background:rgba(33,48,77,.04); }

/* ════════════════════════════════════════════════════════════
   STATEMENT-BAND  –  Lime. Vier Wörter. Fertig.
════════════════════════════════════════════════════════════ */
#stats {
  background:var(--lime); overflow:hidden;
}
.trust-grid {
  display:flex; align-items:stretch; width:100%;
}
.trust-vsep {
  width:1px; background:rgba(255,255,255,.2);
  margin-block:3rem; flex-shrink:0;
}
.trust-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:5.5rem 1.5rem;
  transform:none !important; cursor:default;
}
.trust-word { overflow:hidden; line-height:1; margin-bottom:.6rem; }
.twi {
  display:block;
  font-size:clamp(2.2rem,4.5vw,5rem);
  font-weight:900; letter-spacing:-.055em; color:#fff;
  white-space:nowrap;
  transform:translateY(110%);
  transition:transform .88s var(--ease);
}
.trust-sub {
  font-size:.65rem; font-weight:800;
  color:rgba(255,255,255,.55); letter-spacing:.12em;
  text-transform:uppercase; line-height:1.58;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
}
.trust-item.on .twi   { transform:translateY(0); }
.trust-item.on .trust-sub { opacity:1; transform:none; }
.trust-item.s1 .twi { transition-delay:.12s; }
.trust-item.s2 .twi { transition-delay:.24s; }
.trust-item.s3 .twi { transition-delay:.36s; }
.trust-item:not(.s1):not(.s2):not(.s3) .trust-sub { transition-delay:.52s; }
.trust-item.s1 .trust-sub { transition-delay:.64s; }
.trust-item.s2 .trust-sub { transition-delay:.76s; }
.trust-item.s3 .trust-sub { transition-delay:.88s; }

/* ════════════════════════════════════════════════════════════
   LEISTUNGEN  –  Gedruckter Fachkatalog.
   Cream-Hintergrund. Kein Grid. Keine Cards. Nur Text.
════════════════════════════════════════════════════════════ */
#srv {
  background:var(--cream); padding:9rem 0;
  position:relative;
}
#srv::after {
  content:''; position:absolute; inset:0;
  background-image:var(--grain); opacity:.013;
  pointer-events:none; mix-blend-mode:multiply;
}

/* Kopfzeile: Titel links, Intro rechts – asymmetrisch */
.srv-head {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2rem clamp(3rem,6vw,7rem);
  align-items:end;
  margin-bottom:clamp(3rem,5vw,5rem);
  position:relative; z-index:1;
}
.srv-title {
  font-size:clamp(2.8rem,5.5vw,5.5rem);
  font-weight:900; letter-spacing:-.058em; line-height:1;
  color:var(--navy);
}
.srv-title em { font-style:normal; color:var(--lime-d); }
.srv-intro {
  font-size:clamp(.92rem,1.5vw,1.02rem);
  color:var(--ink-2); line-height:1.76;
  padding-bottom:.4rem;
}

/* Liste */
.srv-grid {
  display:block;
  border-top:2px solid var(--navy);
  position:relative; z-index:1;
}
.srv-card {
  display:grid;
  grid-template-columns:5rem 1fr auto;
  grid-template-rows:auto auto;
  column-gap:clamp(2rem,4vw,4rem);
  padding:3rem 0;
  border-bottom:1px solid var(--rule);
  position:relative;
  background:transparent; border-radius:0;
  cursor:default;
  transition:padding-left .35s var(--ease);
}
.srv-card:hover { padding-left:.5rem; }
.srv-card:nth-child(n) { grid-column:unset !important; }

/* Kleine, präzise Nummer */
.srv-card::before {
  content:attr(data-num);
  grid-column:1; grid-row:1/3; align-self:center;
  font-size:.8rem; font-weight:800;
  letter-spacing:.1em; color:var(--lime-d);
  display:flex; align-items:center;
  transition:color .32s var(--ease);
}
.srv-card:hover::before { color:var(--lime); }

/* Lime-Linie wächst */
.srv-card::after {
  content:''; position:absolute; bottom:-1px; left:0;
  height:2px; width:0; background:var(--lime);
  transition:width .55s var(--ease);
}
.srv-card:hover::after { width:100%; }

.srv-icon { display:none !important; }

.srv-card h3 {
  grid-column:2; grid-row:1;
  font-size:clamp(1.15rem,2vw,1.65rem);
  font-weight:900; letter-spacing:-.04em;
  color:var(--navy); margin-bottom:.5rem;
  transition:color .32s var(--ease);
}
.srv-card:hover h3 { color:var(--lime-d); }

.srv-card p {
  grid-column:2; grid-row:2;
  font-size:.87rem; color:var(--ink-2);
  max-width:60ch; line-height:1.72; margin:0;
}
.srv-tag {
  grid-column:3; grid-row:1; align-self:center;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:.6rem; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule-mid);
  padding:.25rem .72rem; border-radius:2px;
  transition:color .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease);
}
.srv-card:hover .srv-tag {
  color:var(--lime-d); border-color:var(--lime-d);
  background:var(--lime-pale);
}

/* ════════════════════════════════════════════════════════════
   ÜBER UNS  –  Navy. Die Farbe der 30 Jahre.
   Das dekorative „30" steht hinter allem.
   Foto mit clip-path statt Standard-Rechteck.
════════════════════════════════════════════════════════════ */
#why {
  background:var(--navy);
  padding:10rem 0; position:relative;
  overflow:hidden;
}

/* „30" als riesiges dekoratives Wasserzeichen */
.why-deco {
  position:absolute;
  right:-.05em; top:50%;
  transform:translateY(-50%);
  font-size:clamp(18rem,32vw,46rem);
  font-weight:900; letter-spacing:-.07em; line-height:1;
  color:rgba(255,255,255,.022);
  pointer-events:none; user-select:none; z-index:0;
}

.why-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem); align-items:center;
  position:relative; z-index:1;
}

/* Foto-Spalte */
.why-img-col { position:relative; }

/* Rahmen: kein border-radius, clip-path regiert */
.why-frame {
  overflow:visible;
  position:relative;
}

/* clip-path: diagonale Kante rechts statt Standard-Rechteck */
.why-frame img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  position:relative; z-index:1;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,.14),
    0 24px 60px rgba(0,0,0,.28);
}

/* Lime-Akzentlinie: nimmt die Diagonale der clip-path auf */
.why-frame::before {
  content:''; position:absolute;
  right:-10px; top:16px; bottom:-16px;
  width:2px;
  background:var(--lime);
  opacity:.32;
  z-index:0;
  pointer-events:none;
}

/* „30 Jahre"-Karte */
.why-float {
  position:absolute; top:2.25rem; right:-2.25rem;
  background:var(--lime); color:#fff;
  border-radius:3px; padding:1.25rem 1.75rem; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18),0 0 0 6px rgba(132,188,53,.14);
  z-index:10;
}
.fn { font-size:3rem; font-weight:900; letter-spacing:-.07em; line-height:1; }
.fl {
  font-family:var(--mono);
  font-size:.65rem; font-weight:700; opacity:.82; line-height:1.4;
  margin-top:.3rem; letter-spacing:.06em; text-transform:uppercase;
}

/* Text-Spalte auf Navy */
.why-label {
  font-family:var(--mono);
  font-size:.6rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lime);
  margin-bottom:1rem; opacity:.9;
}
.why-title {
  font-size:clamp(2.4rem,4vw,3.8rem);
  font-weight:900; letter-spacing:-.054em; line-height:1.06;
  color:#fff; margin-bottom:1.5rem;
}
.why-title em { font-style:normal; color:var(--lime); }
.why-lead {
  font-size:clamp(.92rem,1.4vw,1.01rem);
  color:rgba(255,255,255,.55); line-height:1.78;
  max-width:50ch; margin-bottom:0;
}

/* Leistungs-Liste */
.why-list { display:flex; flex-direction:column; gap:1.6rem; margin-top:2.5rem; }
.why-item { display:flex; gap:1rem; align-items:flex-start; }
.why-icon {
  width:42px; height:42px; flex-shrink:0;
  background:rgba(132,188,53,.14);
  border:1px solid rgba(132,188,53,.24);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--lime);
}
.why-icon svg { width:18px; height:18px; }
.why-body h3 { font-size:.93rem; font-weight:900; color:#fff; margin-bottom:.28rem; }
.why-body p  { font-size:.85rem; color:rgba(255,255,255,.48); line-height:1.70; }

/* Signatur */
.why-sig {
  display:flex; align-items:center; gap:.85rem;
  margin-top:3rem; padding:1rem 1.25rem;
  background:rgba(255,255,255,.05);
  border-left:3px solid var(--lime);
}
.why-sig-mark {
  width:32px; height:32px; border-radius:50%;
  background:rgba(132,188,53,.2);
  border:1.5px solid var(--lime);
  flex-shrink:0;
}
.why-sig-name {
  display:block; font-size:.95rem; font-weight:900; color:#fff;
  margin-bottom:.15rem;
}
.why-sig-role {
  font-family:var(--mono);
  display:block; font-size:.65rem; font-weight:600;
  color:rgba(255,255,255,.38); letter-spacing:.08em; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════
   MARKEN  –  Nahtloser Markenfluss
════════════════════════════════════════════════════════════ */
#brands {
  background:var(--navy-mid);
  padding:6.5rem 0; overflow:hidden; position:relative;
  border-top:1px solid rgba(255,255,255,.06);
}
.brands-label {
  font-family:var(--mono);
  font-size:.62rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.22);
  text-align:center; margin-bottom:3rem;
}
.brands-label::before, .brands-label::after {
  content:''; display:inline-block; width:38px; height:1px;
  background:rgba(255,255,255,.14); vertical-align:middle; margin-inline:.8rem;
}
.brands-track-wrap {
  position:relative; overflow:hidden;
  mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
#brands-row {
  display:flex; gap:.75rem; width:max-content;
  animation:scroll-brands 38s linear infinite; will-change:transform;
}
#brands-row:hover { animation-play-state:paused; }
@keyframes scroll-brands { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.brand-pill {
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--mono);
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.36);
  background:rgba(255,255,255,.044); border:1px solid rgba(255,255,255,.07);
  padding:.7rem 1.65rem; border-radius:2px; flex-shrink:0;
  transition:background .26s ease, color .26s ease, border-color .26s ease;
  cursor:default;
}
.brand-pill:hover {
  background:rgba(132,188,53,.14); color:rgba(255,255,255,.85);
  border-color:rgba(132,188,53,.24);
}

/* ════════════════════════════════════════════════════════════
   KONTAKT  –  Weiß. Direkt. Typografisch.
════════════════════════════════════════════════════════════ */
#ct { background:var(--white); padding:9.5rem 0; }

.ct-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem); align-items:start;
}

/* Linke Spalte: editorial */
.ct-left { position:sticky; top:calc(60px + 2rem); }

.ct-label {
  font-family:var(--mono);
  font-size:.6rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lime-d);
  margin-bottom:1.1rem; opacity:.75;
}
.ct-h2 {
  font-size:clamp(4rem,8.5vw,9rem);
  font-weight:900; letter-spacing:-.065em; line-height:.95;
  color:var(--navy); margin-bottom:2.5rem;
}
.ct-h2 em { font-style:normal; color:var(--lime-d); }

.ct-address { line-height:1.7; margin-bottom:1.75rem; }
.ct-address strong {
  display:block; font-size:1.05rem; font-weight:900;
  color:var(--navy); margin-bottom:.35rem;
}
.ct-address span { font-size:.94rem; color:var(--ink-2); }

/* Telefon: groß, Monospace */
.ct-tel-row {
  display:flex; align-items:center; gap:.72rem; margin-bottom:.35rem;
}
.ct-tel-row svg { width:17px; height:17px; color:var(--lime-d); flex-shrink:0; }
.ct-tel-row a {
  font-family:var(--mono);
  font-size:1.5rem; font-weight:700; color:var(--lime-d);
  letter-spacing:-.01em;
  border-bottom:2px solid transparent;
  transition:border-color var(--t), color var(--t);
}
.ct-tel-row a:hover { color:var(--lime); border-bottom-color:var(--lime); }
.ct-hint { font-size:.78rem; color:var(--ink-3); padding-left:1.75rem; }

/* Rechte Spalte: Karten */
.ct-right { display:flex; flex-direction:column; gap:1.1rem; }

.info-card {
  background:var(--cream); border:1px solid var(--rule);
  border-radius:3px; padding:1.75rem;
}
.info-card-head {
  display:flex; align-items:center; gap:.6rem;
  font-size:.65rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  margin-bottom:1.25rem;
}
.info-card-head svg { width:15px; height:15px; color:var(--lime-d); }

.hours-rows { display:flex; flex-direction:column; gap:.35rem; }
.hours-row  { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:.83rem; }
.hours-day  { font-family:var(--mono); font-weight:600; color:var(--ink-2); }
.hours-time { font-family:var(--mono); font-weight:700; color:var(--navy); }
.hours-closed { font-family:var(--mono); font-weight:600; color:var(--ink-3); }

.map-card {
  background:var(--cream); border:1px solid var(--rule);
  border-radius:3px; padding:1.75rem;
}
.map-note { font-size:.8rem; color:var(--ink-2); line-height:1.62; }
.map-note strong { color:var(--navy); font-weight:900; }

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
footer {
  background:var(--navy-deep); color:rgba(255,255,255,.46);
  border-top:3px solid var(--lime);
  position:relative;
}
footer::before {
  content:''; position:absolute; inset:0;
  background-image:var(--grain); opacity:.024;
  pointer-events:none; mix-blend-mode:overlay;
}
.ft-top {
  padding:4.5rem 0 3rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; z-index:1;
}
.ft-top-inner {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.ft-brand img {
  height:46px; width:auto;
  filter:brightness(0) invert(1); opacity:.82;
  transition:opacity var(--t);
}
.ft-brand:hover img { opacity:1; }
.ft-tagline { font-size:.9rem; color:rgba(255,255,255,.3); line-height:1.72; max-width:32ch; }

.ft-body { padding:3rem 0; position:relative; z-index:1; }
.ft-grid {
  display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:3.5rem;
}
.ft-head {
  font-size:.6rem; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.2); margin-bottom:1rem;
}
.ft-link {
  display:block; font-size:.83rem; font-weight:600;
  color:rgba(255,255,255,.4); padding:.22rem 0;
  transition:color var(--t);
}
.ft-link:hover { color:rgba(255,255,255,.88); }
.ft-row {
  display:flex; align-items:flex-start; gap:.6rem;
  margin-bottom:.65rem; font-size:.83rem;
}
.ft-row svg { width:12px; height:12px; flex-shrink:0; margin-top:.22rem; color:var(--lime); }
.ft-row a { color:rgba(255,255,255,.4); transition:color var(--t); }
.ft-row a:hover { color:#fff; }
.ft-hr-row { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.18rem; }
.ft-hr-tag  { font-family:var(--mono); font-size:.77rem; color:rgba(255,255,255,.26); }
.ft-hr-time { font-family:var(--mono); font-size:.77rem; font-weight:700; color:rgba(255,255,255,.52); }

.ft-bottom {
  border-top:1px solid rgba(255,255,255,.06);
  padding:1.4rem 0; position:relative; z-index:1;
}
.ft-bottom-inner {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:.75rem;
}
.ft-copy   { font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.2); }
.ft-legal  { display:flex; gap:1.4rem; }
.ft-legal a { font-size:.7rem; color:rgba(255,255,255,.24); transition:color var(--t); }
.ft-legal a:hover { color:rgba(255,255,255,.68); }

/* ── FAB & BACK-TO-TOP ─────────────────────────────────────── */
#fab {
  position:fixed; bottom:5.5rem; right:1.5rem;
  width:48px; height:48px; background:var(--lime);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(132,188,53,.3),0 2px 8px rgba(0,0,0,.1);
  z-index:500; transition:transform var(--t), box-shadow var(--t);
}
#fab svg { width:20px; height:20px; color:#fff; }
#fab:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(132,188,53,.4); }

#btt {
  position:fixed; bottom:1.5rem; right:1.5rem;
  width:40px; height:40px;
  background:rgba(33,48,77,.9);
  border:1px solid rgba(255,255,255,.12); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  z-index:500; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity var(--t), transform var(--t);
  backdrop-filter:blur(10px);
}
#btt.on { opacity:1; transform:none; pointer-events:auto; }
#btt svg { width:14px; height:14px; color:rgba(255,255,255,.76); }
#btt:hover { background:var(--navy-mid); }

/* ── FLOATING CTA ──────────────────────────────────────────── */
#float-cta {
  display:none; position:fixed; bottom:1.75rem; left:50%;
  transform:translateX(-50%) translateY(16px); z-index:600;
}
#float-cta.fcta-in  { animation:fcta-in  .52s var(--ease) forwards; }
#float-cta.fcta-out { animation:fcta-out .26s ease forwards; }
@keyframes fcta-in  { from { transform:translateX(-50%) translateY(16px); opacity:0; }
                      to   { transform:translateX(-50%) translateY(0); opacity:1; } }
@keyframes fcta-out { to   { transform:translateX(-50%) translateY(16px); opacity:0; } }
.float-cta-inner {
  display:flex; align-items:center; gap:.85rem;
  background:var(--navy); border:1px solid rgba(255,255,255,.10);
  padding:.88rem 1.6rem; border-radius:2px;
  box-shadow:0 8px 28px rgba(0,0,0,.2),0 48px 96px rgba(33,48,77,.2);
  position:relative;
}
.float-cta-pulse {
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  flex-shrink:0; animation:puls 2s infinite;
}
.float-cta-icon svg { width:16px; height:16px; color:var(--lime); }
.float-cta-text { display:flex; flex-direction:column; line-height:1.3; }
.float-cta-text strong { font-size:.84rem; color:#fff; font-weight:900; }
.float-cta-text span   { font-size:.72rem; color:rgba(255,255,255,.42); }
#float-cta-close {
  position:absolute; top:-7px; right:-7px;
  width:18px; height:18px; background:var(--ink-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:.72; transition:opacity var(--t);
}
#float-cta-close:hover { opacity:1; }
#float-cta-close svg { width:9px; height:9px; color:#fff; }

/* ════════════════════════════════════════════════════════════
   AKTUELL  –  Statischer Content-Bereich
   Datierter, spezifischer Text direkt im HTML — crawler-sichtbar.
════════════════════════════════════════════════════════════ */
#aktuell {
  background:var(--white);
  padding:8rem 0;
  position:relative;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.aktuell-head {
  margin-bottom:clamp(2.5rem,4vw,4rem);
}
.aktuell-eyebrow {
  font-family:var(--mono);
  font-size:.6rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lime-d);
  margin-bottom:.75rem; opacity:.8;
}
.aktuell-title {
  font-size:clamp(2.4rem,4.5vw,4.5rem);
  font-weight:900; letter-spacing:-.058em; line-height:1;
  color:var(--navy);
}
.aktuell-title em { font-style:normal; color:var(--lime-d); }

/* Grid: 3 Spalten, auf mobil 1 */
.aktuell-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
}

/* Karte */
.ak-card {
  background:var(--cream);
  border:1px solid var(--rule);
  border-top:3px solid transparent;
  border-radius:2px;
  padding:1.75rem;
  display:flex; flex-direction:column; gap:.75rem;
  transition:transform var(--t), box-shadow var(--t);
}
.ak-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(33,48,77,.08);
}

/* Akzentfarben per Typ */
.ak-card--angebot  { border-top-color:var(--lime); }
.ak-card--neuigkeit{ border-top-color:var(--navy); }
.ak-card--aktion   { border-top-color:var(--lime-d); }
.ak-card--info     { border-top-color:var(--ink-3); }

/* Meta-Zeile */
.ak-meta {
  display:flex; align-items:center;
  justify-content:space-between; gap:.75rem;
}
.ak-badge {
  font-family:var(--mono);
  font-size:.58rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase;
  padding:.22rem .65rem; border-radius:2px;
}
.ak-card--angebot  .ak-badge { color:var(--lime-d); background:var(--lime-pale); }
.ak-card--neuigkeit.ak-badge,
.ak-card--neuigkeit .ak-badge { color:var(--navy); background:rgba(33,48,77,.07); }
.ak-card--aktion   .ak-badge { color:var(--lime-d); background:var(--lime-pale); }
.ak-card--info     .ak-badge { color:var(--ink-2); background:rgba(33,48,77,.05); }

.ak-date {
  font-family:var(--mono);
  font-size:.65rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.04em;
}

/* Titel */
.ak-title {
  font-size:clamp(1rem,1.8vw,1.2rem);
  font-weight:900; letter-spacing:-.03em; line-height:1.25;
  color:var(--navy);
}

/* Text */
.ak-text {
  font-size:.88rem; color:var(--ink-2);
  line-height:1.75; margin:0;
  flex:1;
}

/* Dark Mode */
[data-theme="dark"] #aktuell         { background:var(--white); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .ak-card         { background:#0D1E34; border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .ak-title        { color:var(--ink); }
[data-theme="dark"] .ak-card--neuigkeit .ak-badge { color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }
[data-theme="dark"] .ak-card--info   .ak-badge { color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); }

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

/* ════════════════════════════════════════════════════════════
   SONDERTAGE / ANKÜNDIGUNGSKARTEN
   Typen: geschlossen · sonderoeffnung · event
════════════════════════════════════════════════════════════ */
#hero-ankuendigung {
  display:flex; flex-direction:column; gap:.5rem;
  margin-bottom:1.75rem;
}

.st-card {
  display:flex; align-items:flex-start; gap:.8rem;
  background:var(--white);
  border:1px solid var(--rule);
  border-left:3px solid transparent;
  border-radius:2px;
  padding:.8rem 1.1rem;
  animation:st-in .45s var(--ease) both;
  max-width:44ch;
}

/* Farb-Akzente per Typ */
.st-card--geschlossen    { border-left-color:#DC2626; }
.st-card--sonderoeffnung { border-left-color:var(--lime); }
.st-card--event          { border-left-color:var(--navy-mid); }

/* LED-Dot */
.st-dot {
  display:inline-block; width:7px; height:7px;
  border-radius:50%; flex-shrink:0; margin-top:.38rem;
}
.st-card--geschlossen    .st-dot { background:#DC2626; }
.st-card--sonderoeffnung .st-dot { background:var(--lime); }
.st-card--event          .st-dot { background:var(--navy-mid); }

.st-body { flex:1; min-width:0; }

/* Monospace-Label */
.st-label {
  font-family:var(--mono); font-size:.58rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.3rem; line-height:1;
}
.st-card--geschlossen    .st-label { color:#B91C1C; }
.st-card--sonderoeffnung .st-label { color:var(--lime-d); }
.st-card--event          .st-label { color:var(--navy); }

/* Titelzeile */
.st-title {
  font-size:.87rem; font-weight:800;
  color:var(--navy); line-height:1.45;
}
.st-title strong { color:inherit; }

/* Unterzeile (Uhrzeit, Beschreibung) */
.st-sub {
  font-family:var(--mono); font-size:.68rem;
  color:var(--ink-3); margin-top:.22rem; line-height:1.5;
}

@keyframes st-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}

/* Dark Mode */
[data-theme="dark"] .st-card {
  background:#0D1A2E; border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .st-card--geschlossen    { border-left-color:#EF4444; }
[data-theme="dark"] .st-card--sonderoeffnung { border-left-color:var(--lime); }
[data-theme="dark"] .st-card--event          { border-left-color:rgba(255,255,255,.3); }
[data-theme="dark"] .st-title               { color:var(--ink); }
[data-theme="dark"] .st-card--geschlossen    .st-label { color:#FCA5A5; }
[data-theme="dark"] .st-card--geschlossen    .st-dot   { background:#EF4444; }

/* ════════════════════════════════════════════════════════════
   DARK MODE
════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --cream:  #0A1420; --cream-2:#0D1A2E; --sand:#07101C;
  --white:  #0C1828;
  --ink:    #D4E6F8; --ink-2:#5A80A2; --ink-3:#3A5468;
  --rule:   rgba(255,255,255,.07); --rule-mid:rgba(255,255,255,.13);
}
[data-theme="dark"] #nav                { background:rgba(10,20,32,.98); border-bottom-color:rgba(255,255,255,.10); }
[data-theme="dark"] #nav.scrolled       { background:rgba(8,14,26,.98); }
[data-theme="dark"] .nav-logo img       { filter:brightness(0) invert(1); }
[data-theme="dark"] .hbar               { background:rgba(255,255,255,.78); }
[data-theme="dark"] #hbg                { border-color:rgba(255,255,255,.12); }
[data-theme="dark"] #dark-toggle        { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.7); }
[data-theme="dark"] .nl:hover           { color:#fff; }
[data-theme="dark"] .nav-phone:hover    { color:#fff; }
[data-theme="dark"] .nav-status         { border-left-color:rgba(255,255,255,.12); }
[data-theme="dark"] #hero               { background:var(--cream); }
[data-theme="dark"] .hero-bg-num        { color:rgba(255,255,255,.04); opacity:1; }
[data-theme="dark"] .hero-h1            { color:var(--ink); }
[data-theme="dark"] .hero-strip         { background:var(--navy-deep); }
[data-theme="dark"] #stats              { background:var(--navy-mid); }
[data-theme="dark"] .cta-ghost          { color:var(--ink); border-color:rgba(255,255,255,.14); }
[data-theme="dark"] .cta-ghost:hover    { background:rgba(255,255,255,.06); }
[data-theme="dark"] .srv-card h3        { color:var(--ink); }
[data-theme="dark"] .srv-grid           { border-top-color:rgba(255,255,255,.25); }
[data-theme="dark"] #ct                 { background:var(--white); }
[data-theme="dark"] .ct-h2             { color:var(--ink); }
[data-theme="dark"] .info-card,
[data-theme="dark"] .map-card          { background:#0D1E34; border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .why-frame::before  { opacity:.18; }
[data-theme="dark"] .hero-led-badge     { background:rgba(132,188,53,.05); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .ft-top-inner { flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .ft-tagline   { max-width:100%; }
}
@media (max-width:1000px) {
  .ct-layout  { grid-template-columns:1fr; }
  .ct-left    { position:static; }
  .ft-grid    { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width:900px) {
  /* Hero: einspaltiges Layout, TV unter dem Text */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-inner {
    padding: clamp(1.75rem,4vh,3rem) 0 1.5rem;
  }

  /* TV: sichtbar, aber kleiner und zentriert */
  .hero-exhibit-col {
    display: flex;
    justify-content: center;
    /* Reihenfolge: TV kommt nach dem Text */
    order: 2;
  }
  .hero-text-col { order: 1; }

  .hero-stage { width: auto; }

  .product-tv {
    max-width: 280px;
    /* Schatten auf Mobile leichter */
    filter: drop-shadow(0 16px 32px rgba(33,48,77,.14))
            drop-shadow(0 4px 10px rgba(33,48,77,.08));
  }

  .product-floor {
    width: 55%;
    height: 8px;
  }

  /* Subtext auf Mobile weglassen — TV kommuniziert bereits */
  .hero-sub { display: none; }

  /* Anpassungen für andere Sections */
  .why-grid    { grid-template-columns: 1fr; }
  .why-img-col { display: none; }
  .why-deco    { font-size: 55vw; }

  /* Nav */
  #nav .nav-links,
  #nav .nav-actions .nav-phone { display: none; }
  #hbg { display: flex; margin-left: auto; }

  /* Mob-Overlay */
  #mob {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    padding-top: 56px;
    overflow-y: auto;
    z-index: 299;
  }
  #mob .mob-inner { padding-bottom: 3rem; }

  .srv-head { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Nav-status: auf kleinen Screens nur im Nav-Bar ausblenden, nicht im Mob-Menü */
@media (max-width:640px) {
  #nav .nav-status { display:none !important; }
}

/* Status-Zeile im Mobilmenü */
.mob-status-row {
  padding:.85rem var(--px) .5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mob-status-row .nav-status {
  border-left:none !important;
  padding-left:.72rem !important;
  margin-left:0 !important;
  font-size:.74rem !important;
}
@media (max-width:768px) {
  .hero-strip-item { font-size:.6rem; }

  /* Ghost-Zahl auf Mobile kleiner — überlagert sonst die Animation */
  .hero-bg-num { font-size:clamp(12rem,55vw,20rem); opacity:.03; }

  .trust-grid    { flex-wrap:wrap; }
  .trust-item    { flex:0 0 50%; padding:4rem 1.25rem; }
  .trust-vsep    { display:none; }
  .twi           { font-size:clamp(2.2rem,7vw,3.8rem); }

  .srv-card      { grid-template-columns:3.5rem 1fr; column-gap:1rem; }
  .srv-tag       { display:none; }

  .ft-grid       { grid-template-columns:1fr; gap:2rem; }
  .ft-body       { padding:2.5rem 0; }
  .ft-top        { padding:3rem 0 2.25rem; }
}
@media (max-width:480px) {
  /* TV noch kompakter auf sehr kleinen Screens */
  .product-tv { max-width: 200px; }
  .product-floor { display: none; } /* Schatten-Ellipse weglassen */

  /* Headline etwas kompakter */
  .hero-h1 { max-width: none; }

  .hero-strip-row { gap: 0; }
  .hero-strip-item { flex: 1; text-align: center; font-size: .57rem; }

  #ct             { padding: 6rem 0; }
  .ct-h2          { font-size: clamp(3.2rem,11vw,5rem); }
  #float-cta      { width: calc(100% - 2rem); max-width: 380px; }
  .trust-item     { flex: 0 0 100%; }
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .sr     { opacity:1; transform:none; }
  .led-dot { animation:none !important; }
  #brands-row { animation:none !important; }
  .twi    { transform:none !important; }
  .trust-sub { opacity:1 !important; transform:none !important; }
  /* TV-Szene 1 dauerhaft sichtbar statt Endlosschleife */
  .tv-s1  { opacity:1 !important; animation:none !important; }
  .tv-s2,.tv-s3,.tv-s4 { display:none !important; }
  .tv-checkmark,.tv-road-marks,.tv-s2-box,.tv-s3-van { animation:none !important; }
}

/* ── TV SCREEN ANIMATION ───────────────────────────────────── */
/*
   4 Szenen · 20s Loop · 5s pro Szene (25% je)
   S1 Beratung (0-25%) · S2 Einladen (25-50%)
   S3 Unterwegs (50-75%) · S4 Aufbau (75-100%)
*/
.tv-s1, .tv-s2, .tv-s3, .tv-s4 { opacity:0; }
.tv-s1 { animation:tvs1 20s linear infinite; }
.tv-s2 { animation:tvs2 20s linear infinite; }
.tv-s3 { animation:tvs3 20s linear infinite; }
.tv-s4 { animation:tvs4 20s linear infinite; }

@keyframes tvs1 { 0%{opacity:0} 2%{opacity:1} 23%{opacity:1} 25%{opacity:0} 100%{opacity:0} }
@keyframes tvs2 { 0%,25%{opacity:0} 27%{opacity:1} 48%{opacity:1} 50%,100%{opacity:0} }
@keyframes tvs3 { 0%,50%{opacity:0} 52%{opacity:1} 73%{opacity:1} 75%,100%{opacity:0} }
@keyframes tvs4 { 0%,75%{opacity:0} 77%{opacity:1} 98%{opacity:1} 100%{opacity:0} }

/* Lieferwagen fährt von links nach rechts (synchron mit Szene 3: 50-75%) */
@keyframes tv-van-drive {
  0%,50%  { transform:translateX(-250px) }
  75%     { transform:translateX(490px) }
  100%    { transform:translateX(490px) }
}
.tv-s3-van { animation:tv-van-drive 20s linear infinite; }

/* Straßenmarkierungen laufen nach links (Fahrtillusion) */
@keyframes tv-road-scroll {
  from { transform:translateX(0) }
  to   { transform:translateX(-100px) }
}
.tv-road-marks { animation:tv-road-scroll 1.4s linear infinite; }

/* Karton gleitet in den Lieferwagen (synchron mit Szene 2: 25-50%) */
@keyframes tv-box-load {
  0%,22%  { transform:translateX(-95px); opacity:0 }
  25%     { transform:translateX(-95px); opacity:1 }
  44%     { transform:translateX(62px);  opacity:1 }
  48%,100%{ transform:translateX(62px);  opacity:0 }
}
.tv-s2-box { animation:tv-box-load 20s linear infinite; }

/* Haken zeichnet sich (synchron mit Szene 4: 75-100%) */
@keyframes tv-check-draw {
  0%,80%  { stroke-dashoffset:58 }
  94%     { stroke-dashoffset:0  }
  98%     { stroke-dashoffset:0  }
  100%    { stroke-dashoffset:58 }
}
.tv-checkmark {
  stroke-dasharray:58;
  stroke-dashoffset:58;
  animation:tv-check-draw 20s linear infinite;
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  #nav, #fab, #btt, #float-cta, .brands-track-wrap { display:none !important; }
  #hero { min-height:auto; background:#fff; color:#000; }
  .hero-bg-num { display:none; }
  .hero-strip { background:#eee; }
  .hero-strip-item { color:#333; }
  #why { background:#fff; color:#000; }
  .why-deco, .why-frame::before { display:none; }
  .why-body p, .why-lead { color:#444; }
  .why-body h3, .why-title, .why-sig-name { color:#000; }
  footer { background:#fff; color:#000; }
  .ft-brand img { filter:none; }
}