/* ════════════════════════════════════════════════════════════════════
   AUFFRISCHUNG 18.09.2026 — nach unserem eigenen Bausteinlager
   Neue Regeln ans Dateiende: bei gleicher Spezifität gewinnt die spätere.

   1 · LICHTFELDER im Grund. Glas sieht man nur, wenn etwas dahinterliegt.
       Drei weiche Felder in den Hausfarben, fest im Hintergrund, dazu
       eine feine Körnung. Kostet nichts und macht die Tiefe.
   2 · GLAS nach der Apple-Machart. Der Weichzeichner liegt NIE auf dem
       Element mit dem Text, sondern auf einem ::before dahinter — sonst
       zeichnet Safari die Schrift als Bild. Elternelement isoliert.
   3 · LAUFBAND für die Referenzen: Reihe zweimal, linear, nahtlos.
   Alles drei schaltet sich bei „Bewegung reduzieren" ab.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Lichtfelder + Körnung ───────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% 8%,  rgba(239,183,76,.10), transparent 62%),
    radial-gradient(680px 620px at 88% 26%, rgba(239,183,76,.055), transparent 66%),
    radial-gradient(900px 700px at 50% 92%, rgba(255,215,125,.05), transparent 64%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) .5px, transparent .5px);
  background-size:3px 3px;
}

/* ── 2 · Glas ────────────────────────────────────────────────────── */
.glas{position:relative;isolation:isolate}
.glas::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.022) 44%,rgba(255,255,255,.05));
  background-color:rgba(20,21,23,.58);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,
             0 -1px 0 rgba(0,0,0,.34) inset,
             0 24px 60px -28px rgba(0,0,0,.85);
}
.glas::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.055) 43%,transparent 56%);
}

/* Der Hauptknopf wird zum Glasknopf in Gold – Verlauf, helle Innenkante
   oben, dunkle unten, weicher Schein nach aussen. */
.btn-primary, .cta-primary, .hero-cta .primary, a.btn.gold, button.gold{
  position:relative;isolation:isolate;
  background:linear-gradient(168deg,#ffd77d 0%,#efb74c 52%,#d99f34 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 -1px 0 rgba(0,0,0,.20) inset,
             0 14px 34px -14px rgba(239,183,76,.55);
}

/* Kopfzeile und klebende Leisten: halbtransparent NUR mit Weichzeichner
   und mindestens 0,88 Deckkraft – darunter scheint der Text durch. */
.header{
  background:rgba(11,12,13,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
}

/* ── 3 · Laufband ────────────────────────────────────────────────── */
.client-strip .band{
  overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.client-strip .band-lauf{
  display:flex;width:max-content;
  animation:band-zieht 26s linear infinite;
}
.client-strip .band-reihe{display:flex;align-items:center;gap:clamp(28px,4.4vw,64px);padding-right:clamp(28px,4.4vw,64px)}
.client-strip .band:hover .band-lauf{animation-play-state:paused}
@keyframes band-zieht{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

@media(prefers-reduced-motion:reduce){
  body::before,body::after{display:none}
  .client-strip .band{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .client-strip .band-lauf{animation:none;flex-wrap:wrap;width:auto}
  .client-strip .band-reihe[aria-hidden="true"]{display:none}
  .glas::before{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(20,21,23,.92)}
}

/* ── Glas auf die vorhandenen Bausteine legen ────────────────────────
   Gezielt, nicht flaechendeckend: Karten, Preisblock und die
   Aufklapper der Fragen. Jedes Element bekommt die Isolierung, damit
   der Weichzeichner hinter dem Text bleibt. */
.feature-card,
.price-card,
.faq-list > *{
  position:relative;isolation:isolate;
}
.feature-card::before,
.price-card::before,
.faq-list > *::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 44%,rgba(255,255,255,.045));
  background-color:rgba(20,21,23,.55);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,
             0 -1px 0 rgba(0,0,0,.30) inset,
             0 22px 54px -26px rgba(0,0,0,.8);
}
.feature-card::after,
.price-card::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.05) 44%,transparent 57%);
}
/* Die Preiskarte traegt die Hausfarbe im Glas */
.price-card::before{
  background-color:rgba(28,24,14,.58);
  border-color:rgba(239,183,76,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,
             0 -1px 0 rgba(0,0,0,.34) inset,
             0 26px 64px -26px rgba(0,0,0,.85),
             0 0 60px -30px rgba(239,183,76,.45);
}
@media(prefers-reduced-motion:reduce){
  .feature-card::before,.price-card::before,.faq-list > *::before{
    -webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(20,21,23,.94)}
}

/* Das Abspielzeichen neben „Erst mal erleben" lag bei 3,47:1 gegen den
   Glasgrund – für Zeichen unter 24px gilt 4,5:1. Aufgehellt. */
.play-icon{color:#dcd8d0}
/* Die Monatspfeile in der Terminvorschau standen bei 3,47:1 gegen den
   neuen Glasgrund. Die Vorschau ist aria-hidden, also reine Deko –
   trotzdem aufgehellt, damit sie nicht schmutzig wirkt. */
.calendar-preview>div:first-child span{color:#cfcac2}
/* Spezifitaet: die bestehende Regel ist .calendar-preview>div:first-child span
   (0,2,2) – eine schlichte .calendar-preview span (0,1,1) verliert dagegen.
   Gemessen, nicht geraten. */