/* =================================================================
   SVE*-Tool — Startseite
   Liegt im Child-Theme unter bricks-child/startseite/ und wird von
   startseite.php nur auf der Startseite geladen.

   Hier steht nur, was sich NICHT in Element-Einstellungen ausdrücken
   lässt: Hover, Pseudo-Elemente, Medienabfragen und Animation.
   Farben, Abstände und
   Schriftgrößen stehen als Inline-Styles im HTML und landen beim
   Einfügen in den Bricks-Element-Einstellungen — die klickst du
   normal weiter.

   Alle Regeln hängen an den festen Sektions-IDs. Änderst du im
   Builder eine ID, greift das zugehörige CSS nicht mehr.

   Breakpoints = Bricks-Standard:
     991px Tablet · 767px Handy quer · 478px Handy hoch
   ================================================================= */

/* ---------- Farben ---------- */
:root{
  --sve-bg:#212121; --sve-bg-dark:#1a1a1a; --sve-card:#303030; --sve-line:#4a4a4a;
  --sve-ink:#f5f5f5; --sve-text:#d6d6d6; --sve-muted:#bdbdbd;
  --sve-accent:#e17a00; --sve-accent-hover:#ffa23a; --sve-on-accent:#212121;
  --sve-slate:#34495e;
}

/* ---------- Grundlagen ----------
   Browser-Standards ausdrücklich setzen, damit beim Umwandeln nichts
   vom Theme durchschlägt. Der Selektor hängt an den Sektions-IDs und
   legt deshalb KEINE globale Bricks-Klasse an. */
section[id^="sek-"] h1,section[id^="sek-"] h2,
section[id^="sek-"] h3,section[id^="sek-"] p{margin:0}
/* Bricks-Layout an normales HTML angleichen.
   Bricks setzt Container und Block standardmäßig auf
   flex-direction:column + align-items:flex-start. Folge ohne diese
   Regeln: Alles, was nebeneinander stehen soll, rutscht untereinander,
   aus flex-basis (z. B. 300px) wird eine HÖHE statt einer Breite, und
   Texte/Buttons schrumpfen auf ihre Inhaltsbreite (text-align:center
   und display:block wirken dann nicht).
   Was du im Builder an einem Element selbst einstellst, gewinnt
   weiterhin — die Element-Einstellungen hängen an der Element-ID. */
section[id^="sek-"] .brxe-container,
section[id^="sek-"] .brxe-block{align-items:stretch}
section[id^="sek-"] .sve-row{flex-direction:row}
section[id^="sek-"] a:focus-visible,
section[id^="sek-"] button:focus-visible{outline:3px solid var(--sve-accent-hover);outline-offset:3px}

/* Seitenrand. Steht hier und nicht nur im HTML, damit er auch auf
   Sektionen greift, die mit "padding:… 0" eingefügt wurden.
   section:is(#…) ist stärker als die Element-Einstellung (#ID). */
section:is(#sek-hero,#sek-kennzahlen,#sek-problem,#sek-check,#sek-schritte,
  #sek-stimmen,#sek-lizenzen,#sek-mehrsalon,#sek-abschluss){padding-left:24px;padding-right:24px}

/* Hintergründe zur Sicherheit auch hier: Bricks hat sie beim Einfügen
   von Kennzahlen und Stimmen schon einmal verloren. Farbe ändern also
   HIER, nicht im Builder — die Regel hier ist stärker. */
section#sek-kennzahlen{background:var(--sve-slate)}
section#sek-stimmen{background:var(--sve-bg-dark)}

/* Ein paar Stellen, die sonst nur ein neues Einfügen repariert hätte.
   Die Selektoren treffen die Struktur aus startseite-sektionen.html,
   egal ob alte oder neue Fassung eingefügt ist. */
#sek-hero :is(.sve-trust,.brxe-container > .brxe-block:first-child > .sve-row:last-child) > :first-child{
  display:flex;flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap}
#sek-stimmen .sve-row > .brxe-block:last-child{flex-shrink:1;min-width:0}
#sek-abschluss .brxe-container{width:100%;max-width:1000px}

/* Buttons: Hover lässt sich nicht inline schreiben */
.brxe-button.sve-btn:hover{background:var(--sve-accent-hover);color:var(--sve-on-accent)}
.brxe-button.sve-btn-dark:hover{background:#000;color:var(--sve-ink)}
.sve-textlink:hover{color:var(--sve-accent-hover)}

/* Sterne */
.sve-stars{color:var(--sve-accent);letter-spacing:2px}

/* Häkchen-Listen (Mehrsalon) */
#sek-mehrsalon .sve-check{position:relative;padding-left:30px}
#sek-mehrsalon .sve-check::before{content:'';position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:3px solid var(--sve-accent);border-bottom:3px solid var(--sve-accent);transform:rotate(-45deg)}


/* =================================================================
   SEKTION 1 — Funktionsraster im Hero
   Ohne das Skript unten stehen alle zwölf Karten sofort da. Das ist
   kein Fehler, nur die ruhige Variante.
   ================================================================= */
/* width + align-self: Bricks lässt das Raster sonst auf Inhaltsbreite
   schrumpfen, und mit 1fr-Spalten wird es auf dem Handy fast 0 breit.
   Die Karte liegt im Fluss (nicht absolut), damit lange Texte den
   Platz mitwachsen lassen statt überzulaufen. */
#fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
  width:100%;align-self:stretch}
.fg-slot{position:relative;display:flex;flex-direction:column;align-items:stretch;
  min-width:0;min-height:132px;border-radius:10px;border:1px dashed var(--sve-line)}
.fg-card{position:relative;flex:1 1 auto;margin:-1px;border-radius:10px;padding:14px 14px 12px;
  background:var(--sve-card);border:1px solid var(--sve-line);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
.fg-card i{display:block;height:3px;width:18px;border-radius:2px;background:var(--sve-accent);
  transform-origin:left;transition:transform .5s .25s cubic-bezier(.2,.8,.2,1),width .5s}
.fg-card h3{font-size:17px;font-weight:800;line-height:1.2;margin:8px 0 5px}
.fg-card p{font-size:13px;line-height:1.45;color:var(--sve-text)}
/* Startzustand nur, wenn das Skript läuft */
.fg-on .fg-card{opacity:0;transform:translateY(14px) scale(.96)}
.fg-on .fg-card i{transform:scaleX(0)}
.fg-on .fg-slot.on .fg-card{opacity:1;transform:none}
.fg-on .fg-slot.on .fg-card i{transform:scaleX(1)}
.fg-slot.now .fg-card{box-shadow:0 0 0 2px var(--sve-accent),0 10px 24px rgba(0,0,0,.35)}
.fg-slot.now .fg-card i{width:34px}
#fg-toggle:hover{color:var(--sve-ink);border-color:var(--sve-ink)}
#fg-foot{transition:opacity .8s ease}
.fg-on #fg-foot{opacity:.35}
.fg-on #fg-foot.on{opacity:1}


/* =================================================================
   SEKTION 2 — Kennzahlen: feine Trennlinien zwischen den Werten.
   Sobald die Leiste umbricht (Tablet abwärts), fallen sie weg.
   ================================================================= */
#sek-kennzahlen .brxe-container{align-items:center}
#sek-kennzahlen .brxe-container > .brxe-block{
  align-items:center;justify-content:center;gap:4px;text-align:center}
#sek-kennzahlen .brxe-container > .brxe-block > *{text-align:center;margin:0}
#sek-kennzahlen .brxe-container > .brxe-block + .brxe-block{border-left:1px solid rgba(255,255,255,.18)}


/* =================================================================
   SEKTION 4 — Schnell-Check
   ================================================================= */
#sek-check .sve-stepper-btn:hover{border-color:var(--sve-accent)}


/* =================================================================
   SEKTION 6 — Bewertungen
   Die Bewertungen liefert das Trustindex-Widget, das im Builder in
   #trustindex-slot gesetzt wird. Das Widget bringt sein eigenes
   Aussehen mit; hier nur, dass es die Fläche ganz ausfüllt.
   ================================================================= */
#trustindex-slot > *{width:100%}


/* =================================================================
   Medienabfragen
   ================================================================= */
@media (max-width:991px){
  #sek-hero .sve-h1{font-size:46px}
  :is(#sek-problem,#sek-schritte,#sek-stimmen,#sek-lizenzen,#sek-mehrsalon) .sve-h2{font-size:34px}
  #sek-abschluss .sve-h2{font-size:42px}
  #sek-stimmen .sve-bigquote{font-size:28px}
  #sek-kennzahlen .brxe-container > .brxe-block + .brxe-block{border-left:0}
  /* Kennzahlen 2 × 2 statt 3 + 1 oder vier untereinander */
  #sek-kennzahlen .brxe-container > .brxe-block{flex:1 1 40%}
}
@media (max-width:767px){
  #sek-hero .sve-h1{font-size:40px}
  :is(#sek-problem,#sek-schritte,#sek-stimmen,#sek-lizenzen,#sek-mehrsalon) .sve-h2{font-size:30px}
  #sek-abschluss .sve-h2{font-size:38px}
  #sek-stimmen .sve-bigquote{font-size:23px}
  #sek-stimmen #sve-zitat{padding-left:22px}
  #sek-stimmen #trustindex-slot{padding:20px 8px}
  /* Große Innenabstände der Karten auf dem Handy halbieren */
  #sek-check .brxe-container > .brxe-block,
  #sek-lizenzen :is(#sve-lizenzkarte,.brxe-container > .sve-row:nth-child(2)){padding:28px 22px}
  #sek-problem .sve-row > .brxe-block{padding:24px}
  /* Überschriften ohne .sve-h2, die auf dem Handy zu groß wären */
  #sek-check h2{font-size:28px}
  #sek-lizenzen :is(#sve-lizenzkarte,.brxe-container > .sve-row:nth-child(2)) h3{font-size:26px}
}
@media (max-width:478px){
  #sek-hero .sve-h1{font-size:33px}
  :is(#sek-problem,#sek-schritte,#sek-stimmen,#sek-lizenzen,#sek-mehrsalon) .sve-h2{font-size:26px}
  #sek-abschluss .sve-h2{font-size:30px}
  #sek-check .sve-year{font-size:42px}
  #fg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Kennzahlen: „< 60 Min" soll nicht umbrechen */
  #sek-kennzahlen .brxe-container > .brxe-block{padding:0 6px}
  #sek-kennzahlen .brxe-container > .brxe-block > :first-child{font-size:28px;line-height:36px;white-space:nowrap}
  #sek-kennzahlen .brxe-container > .brxe-block > :last-child{font-size:14px;line-height:1.4}
  #sek-hero :is(.sve-trust,.brxe-container > .brxe-block:first-child > .sve-row:last-child){flex-direction:column;gap:6px}
  #sek-hero .sve-btn{width:100%}
}

/* Wer Animationen abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion:reduce){
  .fg-card,.fg-card i{transition:none!important}
}