/* ============================================================
   Sternebewertung24 — sternebewertung24.css · Phase "Design"
   Führendes Stylesheet. Lädt NACH home.css + landing.css und
   überschreibt die Design-Tokens (Grün statt Amber, tieferes
   Deep-Navy-Ink) + Premium-Politur + Animationslayer.
   Reines CSS, keine Libraries. prefers-reduced-motion aware.
   ============================================================ */

/* ---------- 1. TOKEN-OVERRIDE ---------- */
:root{
  /* Google-Grün als EINE Akzentfarbe (ersetzt Amber überall,
     da home.css/landing.css durchgängig var(--amber) nutzen) */
  --tb-green:#00B67A;
  --tb-green-2:#00A06C;
  --tb-green-3:#00875C;      /* dunkel, für Text/Hover */
  --tb-green-lite:#2FD79B;   /* hell, für Akzente/Sterne */
  --tb-green-200:#7ff0c8;
  --tb-green-soft:rgba(0,182,122,.14);
  --tb-green-soft-2:rgba(0,182,122,.22);
  --tb-green-glow:rgba(0,182,122,.38);

  /* Amber-Tokens auf Grün umbiegen -> kaskadiert in alle Alt-Komponenten */
  --amber:#00B67A;
  --amber-2:#00875C;
  --amber-soft:rgba(0,182,122,.14);

  /* Tieferes, kühleres Deep-Navy/Ink */
  --ink:#0B1120;
  --ink-2:#111a2e;
  --ink-3:#1e2a44;
  --line-ink:rgba(255,255,255,.09);

  /* Warme, hellere Content-Welt (Wechsel dunkel/hell) */
  --paper:#f6f8f7;
  --paper-2:#eef3f1;
  --line:#e0e8e4;
  --text:#0d1526;
  --text-soft:#59637a;
  --text-inv:#eef4f2;
  --text-inv-soft:#9aa8bd;

  --ok:#00B67A;

  --tb-r:20px;
  --tb-shadow-soft:0 1px 2px rgba(11,17,32,.05),0 18px 44px -20px rgba(11,17,32,.22);
  --tb-shadow-lift:0 30px 70px -28px rgba(11,17,32,.42);
  --tb-shadow-green:0 20px 48px -18px rgba(0,135,92,.55);
  --tb-ease:cubic-bezier(.22,.61,.36,1);
  --tb-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Grüner Fließtext-Link (Alt-Inline-Styles nutzten amber-2 → jetzt grün per Token) */
a[style*="c47f1a"]{color:var(--tb-green-3)!important}

/* ---------- 2. GLOBALE POLITUR ---------- */
body{background:var(--paper)}

/* Section-Rhythmus + abwechselnde helle Bänder */
.section{position:relative}
.section--soft{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
/* dünne grüne Trennfäden zwischen den hellen Sektionen */
.tb-band{position:relative}

/* Eyebrow: aus Strich-Label -> grüne Pill */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .85rem;border-radius:100px;
  background:var(--tb-green-soft);color:var(--tb-green-3);
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tb-green);box-shadow:0 0 0 3px var(--tb-green-soft);
  opacity:1;
}
.eyebrow.on-ink{background:rgba(0,182,122,.16);color:var(--tb-green-lite)}
.eyebrow.on-ink::before{background:var(--tb-green-lite)}

/* Überschriften-Akzent */
.hero h1 em{color:var(--tb-green-lite)}
.d2 em{font-style:normal;color:var(--tb-green-3)}

/* ---------- 3. BUTTONS ---------- */
.btn{border-radius:100px;transition:transform .3s var(--tb-ease),box-shadow .3s var(--tb-ease),background .25s}
.btn--amber{
  --bg:linear-gradient(135deg,var(--tb-green-lite),var(--tb-green) 45%,var(--tb-green-2));
  --fg:#03150e;
  color:#03150e;
  background:linear-gradient(135deg,var(--tb-green-lite),var(--tb-green) 45%,var(--tb-green-2));
  box-shadow:var(--tb-shadow-green);
  font-weight:700;
}
.btn--amber:hover{
  background:linear-gradient(135deg,#3fe0aa,var(--tb-green) 50%,var(--tb-green-2));
  box-shadow:0 30px 60px -18px rgba(0,135,92,.6);
}
/* dezenter Shine-Sweep beim Hover */
.btn--amber{position:relative;overflow:hidden;isolation:isolate}
.btn--amber::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--tb-ease);
}
.btn--amber:hover::after{transform:translateX(120%)}

.btn--ghost:hover{border-color:var(--tb-green);color:var(--tb-green-3);background:var(--tb-green-soft)}
.btn--on-ink-ghost{border-color:rgba(255,255,255,.16)}
.btn--on-ink-ghost:hover{border-color:var(--tb-green-lite);background:rgba(0,182,122,.1);color:#fff}

/* ---------- 4. TOPLINE / HEADER ---------- */
.topline{
  background:linear-gradient(90deg,var(--ink),#0e1830 55%,var(--ink));
  color:var(--text-inv);border-bottom:1px solid var(--line-ink);
}
.topline .tl-star{fill:var(--tb-green-lite)!important}
.topline b{background:var(--tb-green-soft);color:var(--tb-green-lite);border:1px solid rgba(0,182,122,.3)}
.topline button{background:var(--tb-green);color:#03150e}
.topline button:hover,.topline button.copied{background:var(--tb-green-lite)}

.hdr[data-stuck="true"]{
  background:rgba(246,248,247,.82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(11,17,32,.4);
}
.brand svg path:first-child{fill:var(--tb-green)!important}
.hdr .brand:hover svg{transform:rotate(-6deg) scale(1.05);transition:transform .4s var(--tb-ease)}
.hdr .brand svg{transition:transform .4s var(--tb-ease)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  border-radius:2px;background:var(--tb-green);transition:right .3s var(--tb-ease);
}
.nav-links a:hover{color:var(--tb-green-3)}
.nav-links a:hover::after{right:0}

/* ---------- 5. HERO — Deep-Navy + Bewegung ---------- */
.hero{
  background:
    radial-gradient(1100px 620px at 80% -12%,rgba(0,182,122,.20),transparent 58%),
    radial-gradient(760px 560px at -6% 108%,rgba(37,86,160,.18),transparent 55%),
    linear-gradient(180deg,#0a0f1c,#0c1324 60%,#0b1120);
}
/* animierte Leucht-/Float-Verlaeufe */
.hero::before{
  background:
    radial-gradient(620px 460px at 18% 22%,rgba(0,182,122,.16),transparent 62%),
    radial-gradient(520px 420px at 88% 78%,rgba(0,182,122,.10),transparent 60%);
  animation:tb-hero-float 16s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(680px 500px at 30% 20%,#000,transparent 75%);
  mask-image:radial-gradient(680px 500px at 30% 20%,#000,transparent 75%);
}
@keyframes tb-hero-float{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(2%,-2%,0) scale(1.05)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.02)}
}
.hero-grid{z-index:1}

/* Kicker-Badge mit Live-Dot */
.hero-kick{
  background:rgba(255,255,255,.03);border-color:rgba(0,182,122,.28);
  backdrop-filter:blur(6px);
}
.hero-kick .st{color:var(--tb-green-lite);letter-spacing:.08em}

/* Hero-Meta-Zahlen bekommen gruenen Akzentwert */
.hero-meta .m b{color:#fff}
.hero-meta .m b [data-tb-count]{color:var(--tb-green-lite)}

/* ---------- 6. HERO-KONSOLE ---------- */
.console-card{
  background:
    radial-gradient(120% 100% at 100% 0,rgba(0,182,122,.10),transparent 55%),
    linear-gradient(180deg,#121b2e,#0d1424);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 110px -46px rgba(0,0,0,.8),0 0 0 1px rgba(0,182,122,.05);
  animation:tb-card-in .9s var(--tb-ease-out) both;
}
@keyframes tb-card-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
/* sanftes Schweben der ganzen Konsole */
.console{animation:tb-bob 7s ease-in-out infinite}
@keyframes tb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.console-score b{color:#fff}
/* animierte 5 Sterne im Score */
.console-score .st{display:inline-flex;gap:2px;color:transparent;letter-spacing:normal}
.tb-stars{display:inline-flex;gap:3px;align-items:center}
.tb-stars .tb-star{
  width:17px;height:17px;display:inline-block;color:#26324c;
  opacity:0;transform:scale(.5) rotate(-25deg);
  transition:opacity .45s var(--tb-ease),transform .5s var(--tb-ease),color .45s var(--tb-ease);
}
.tb-stars.on .tb-star{opacity:1;transform:none;color:var(--tb-green)}
.tb-stars.on .tb-star:nth-child(1){transition-delay:.05s}
.tb-stars.on .tb-star:nth-child(2){transition-delay:.18s}
.tb-stars.on .tb-star:nth-child(3){transition-delay:.31s}
.tb-stars.on .tb-star:nth-child(4){transition-delay:.44s}
.tb-stars.on .tb-star:nth-child(5){transition-delay:.57s}
.tb-stars .tb-star svg{width:100%;height:100%;display:block;fill:currentColor}

.console-badge{background:var(--tb-green-soft);color:var(--tb-green-lite)}
.cfill{background:linear-gradient(90deg,var(--tb-green-3),var(--tb-green-lite))}
.console-chip{box-shadow:0 24px 50px -22px rgba(0,0,0,.6)}
.console-chip .ic{background:var(--tb-green-soft);color:var(--tb-green-3)}
.console-chip b{color:var(--tb-green-3)}
.console-chip.a{animation:tb-chip-a 5s ease-in-out infinite}
.console-chip.b{animation:tb-chip-b 6s ease-in-out infinite}
@keyframes tb-chip-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tb-chip-b{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- 7. LOGO-STRIP ---------- */
.logostrip{
  background:linear-gradient(180deg,#0b1120,#0c1426);
  border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
}
.logostrip .ls-label{color:#8b97ae}
.logostrip .ls-set a{border-color:rgba(0,182,122,.22);color:#d5e6df}
.logostrip .ls-set a:hover{border-color:var(--tb-green);background:var(--tb-green-soft);color:#fff}

/* ---------- 8. BENEFIT / KARTEN — Hover-Lift ---------- */
.benefit,.pcard,.voice-card{
  border-radius:var(--tb-r);
  transition:transform .38s var(--tb-ease),box-shadow .38s var(--tb-ease),border-color .3s,background .3s;
  will-change:transform;
}
.benefit{background:#fff;border:1px solid var(--line)}
.benefit:hover,.pcard:hover{
  transform:translateY(-6px);box-shadow:var(--tb-shadow-lift);
  border-color:rgba(0,182,122,.35);
}
.benefit .bx{
  background:linear-gradient(135deg,var(--tb-green-soft),var(--tb-green-soft-2));
  color:var(--tb-green-3);transition:transform .4s var(--tb-ease);
}
.benefit:hover .bx{transform:scale(1.08) rotate(-4deg)}
.pcard{background:#fff;border:1px solid var(--line)}
a.pcard .pc-go{color:var(--tb-green-3);font-weight:600;margin-top:auto;padding-top:1rem;display:inline-flex;gap:.4rem;align-items:center}
a.pcard:hover .pc-go .arw{transform:translateX(4px)}
.pcard .pc-go .arw{transition:transform .3s var(--tb-ease);display:inline-block}

/* ---------- 9. PREIS-KARTEN ---------- */
.lp-card{transition:transform .35s var(--tb-ease),box-shadow .35s var(--tb-ease),z-index 0s;background:linear-gradient(180deg,#ffffff,#f4f8f6)}
.lp-card:hover{transform:translateY(-8px);z-index:3;box-shadow:var(--tb-shadow-lift)}
.lp-card--best{
  background:radial-gradient(120% 90% at 100% 0,rgba(0,182,122,.14),transparent 55%),linear-gradient(180deg,#111a2e,#0c1324)!important;
  box-shadow:0 40px 80px -30px rgba(0,135,92,.5),0 0 0 1px rgba(0,182,122,.14);
}
.lp-card--best .lp-name{color:var(--tb-green-lite)}
.lp-card--best .lp-feat li svg{background:rgba(0,182,122,.2);color:var(--tb-green-lite)}
.lp-tag,.cmp-tag{background:var(--tb-green);color:#03150e;font-weight:700}
.lp-feat li svg{color:var(--tb-green-3)}
.pricing-note-top{background:var(--tb-green-soft);color:var(--tb-green-3);border:1px solid rgba(0,182,122,.28);
  border-radius:100px;padding:.5rem .9rem;font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.4rem}
.pricing-note-top svg{width:16px;height:16px}
.cmp-best,.cmp-tbl tr:hover{background:var(--tb-green-soft)}
.cmp-tbl th{background:var(--ink);color:var(--text-inv)}

/* ---------- 10. PROZESS-Ringe grün ---------- */
.proc-step.active .dot{background:var(--tb-green);color:#03150e;box-shadow:0 0 0 6px var(--tb-green-soft)}
.v-num{color:var(--tb-green)}
.v-ring{border-color:var(--tb-green)!important}
.proc-visual[data-step="3"] .v-ring{box-shadow:0 0 40px var(--tb-green-glow)!important}

/* ---------- 11. SECTION--INK (Argumente) + CTA ---------- */
.section--ink{
  background:
    radial-gradient(800px 480px at 85% 0,rgba(0,182,122,.12),transparent 60%),
    linear-gradient(180deg,#0b1120,#0d1526);
}
.why-list .wi{background:var(--tb-green-soft);color:var(--tb-green-lite)}
.cta{
  background:
    radial-gradient(700px 460px at 20% -10%,rgba(0,182,122,.18),transparent 60%),
    linear-gradient(135deg,#0c1426,#0b1120);
  border:1px solid rgba(0,182,122,.14);border-radius:var(--r-lg);
  overflow:hidden;
}
.cta::before{
  background:radial-gradient(500px 320px at 80% 120%,rgba(0,182,122,.16),transparent 60%);
  animation:tb-hero-float 14s ease-in-out infinite alternate;
}

/* ---------- 12. RECHNER (tsr) ---------- */
.tsr{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--tb-shadow-soft)}
.tsr-result{background:radial-gradient(140% 120% at 100% 0,rgba(0,182,122,.14),transparent 55%),linear-gradient(180deg,#111a2e,#0c1324)}
.tsr-result-kick{color:var(--tb-green-lite)}
.tsr-needed b{color:var(--tb-green-lite)}
.tsr-range{accent-color:var(--tb-green)}
.tsr-field input:focus{border-color:var(--tb-green);box-shadow:0 0 0 3px var(--tb-green-soft)}

/* ---------- 13. FAQ ---------- */
.faq summary .pm::before,.faq summary .pm::after{background:var(--tb-green-3)}
.faq details[open] summary{color:var(--tb-green-3)}
.faq details{transition:border-color .3s}
.faq details[open]{border-top-color:var(--tb-green)}

/* ---------- 14. VOICE / KUNDENSTIMMEN ---------- */
.voice-card{background:#fff;border:1px solid var(--line)}
.voice-card:hover{transform:translateY(-5px);box-shadow:var(--tb-shadow-lift);border-color:rgba(0,182,122,.3)}
.voice-stars{color:var(--tb-green);letter-spacing:.12em}

/* ---------- 15. FOOTER ---------- */
.foot{background:linear-gradient(180deg,#0b1120,#080d18);color:var(--text-inv-soft)}
.foot .brand svg path:first-child{fill:var(--tb-green)!important}
.foot-col a:hover{color:var(--tb-green-lite)}
.foot-bottom a:hover{color:var(--tb-green-lite)}

/* ---------- 16. SCROLL-REVEAL (unabhängig, additiv) ---------- */
.tb-reveal{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--tb-ease-out),transform .8s var(--tb-ease-out)}
.tb-reveal.tb-in{opacity:1;transform:none}
.tb-reveal[data-tb-d="1"]{transition-delay:.09s}
.tb-reveal[data-tb-d="2"]{transition-delay:.18s}
.tb-reveal[data-tb-d="3"]{transition-delay:.27s}

/* ---------- 17. STICKY-CTA (mobil + Desktop) ---------- */
.tb-sticky-cta{
  position:fixed;left:50%;bottom:-120px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:.9rem;
  padding:.6rem .7rem .6rem 1.15rem;max-width:calc(100vw - 1.5rem);
  background:rgba(12,20,38,.92);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(0,182,122,.3);border-radius:100px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:bottom .5s var(--tb-ease-out),opacity .5s var(--tb-ease-out);
}
.tb-sticky-cta.tb-show{bottom:18px;opacity:1;pointer-events:auto}
.tb-sticky-cta .tb-sc-text{display:flex;flex-direction:column;line-height:1.15;color:#eef4f2}
.tb-sticky-cta .tb-sc-text b{font-family:var(--display);font-size:.95rem;color:#fff}
.tb-sticky-cta .tb-sc-text span{font-size:.76rem;color:var(--tb-green-lite);font-weight:600}
.tb-sticky-cta .btn{white-space:nowrap}
.tb-sticky-cta .tb-sc-close{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:#0c1426;color:#9aa8bd;
  font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.tb-sticky-cta .tb-sc-close:hover{color:#fff;border-color:var(--tb-green)}
@media (max-width:560px){
  .tb-sticky-cta .tb-sc-text span{display:none}
  .tb-sticky-cta{gap:.6rem;padding-left:1rem}
}

/* ---------- 18. Scroll-Progress-Bar oben ---------- */
.tb-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--tb-green-3),var(--tb-green-lite));
  box-shadow:0 0 12px var(--tb-green-glow);transition:width .1s linear}

/* ---------- 19. Deko: grüne Section-Kante ---------- */
.section--soft::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,182,122,.4),transparent);
}

/* ---------- 20. MOBILE-FIRST GUARDS (kein Overflow @390) ---------- */
*{min-width:0}
img,svg,figure,table{max-width:100%}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .hero::after{background-size:40px 40px}
  .console{animation:none}
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::before,.cta::before,.console,.console-card,
  .console-chip.a,.console-chip.b{animation:none!important}
  .tb-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .tb-stars .tb-star{opacity:1!important;transform:none!important;color:var(--tb-green)!important}
  .btn--amber::after{display:none}
  .tb-sticky-cta{transition:opacity .2s linear}
  .tb-progress{transition:none}
}