/* ============================================================
   genaumeinauto.de – Retheme + Interaktion
   - Schriften/Farben der neuen Version auf dem ALTEN Layout
   - Frage-Flow als horizontaler Slider (rein per Override,
     altes Markup + alte Bottom-Bar bleiben unverändert)
   Lädt NACH style.css. Schriftdateien liegen in assets/fonts/.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face{font-family:'Bricolage Grotesque';font-weight:400 800;font-style:normal;font-display:swap;
  src:url('../fonts/bricolage-grotesque.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/inter-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/inter-medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/inter-semibold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/inter-semibold.woff2') format('woff2')}

body{font-family:'Inter',system-ui,sans-serif}
/* Überschriften = Bricolage (Farbe kommt aus body color = --color_primary) */
main h1, main h2, .text_wrap h1, .text_wrap h2{
  font-family:'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.02em;
}

/* ============================================================
   Frage-Flow als Slider  (nur Template t_client)
   ============================================================ */
html.t_client, html.t_client body{height:100%}
html.t_client body{overflow:hidden}

/* Bühne zwischen (fixiertem) Header und (fixierter) Bottom-Bar */
html.t_client main{
  position:relative; height:100vh; height:100dvh; overflow:hidden;
  display:block; padding:7rem 0 8.5rem; min-height:0;
}
@media (max-width:1000px){
  html.t_client main{padding:4.5rem 0 7rem}
}

/* Projekt-Wechsel-Nav am Formularende ausblenden */
html.t_client main form#questions nav.meta{display:none}

/* Jede „Folie" (Splash + Fragen) füllt die Bühne und gleitet seitlich */
html.t_client main > .splash,
html.t_client main form#questions .question{
  position:absolute; left:0; right:0; top:0; bottom:0; width:auto; max-width:none;
  min-height:0; padding-top:1rem; padding-bottom:1rem; margin:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
html.t_client main > .splash.is-active,
html.t_client main form#questions .question.is-active{
  transform:translateX(0); opacity:1; pointer-events:auto;
}
html.t_client main > .splash.is-prev,
html.t_client main form#questions .question.is-prev{
  transform:translateX(-100%); opacity:0; pointer-events:none;
}
/* Beim ersten Rendern keine Animation */
html.t_client main.no-anim > .splash,
html.t_client main.no-anim form#questions .question{transition:none !important}

/* Bottom-Bar: nur sichtbar, sobald der Flow läuft (nicht auf dem Splash) */
html.t_client main.is-running .question_menu{visibility:visible; pointer-events:auto}

/* Zurück-Button (per JS in die Bar eingefügt) */
.gma-back-btn{
  font-family:'Inter',sans-serif; font-size:.85rem; line-height:1;
  background:none; border:none; cursor:pointer; color:var(--color_secondary);
  padding:.45rem .6rem; margin-right:.4rem; white-space:nowrap; border-radius:6px;
  transition:background .15s ease;
}
.gma-back-btn:hover{background:rgba(0,0,0,.05)}
@media (max-width:1000px){.gma-back-btn{font-size:.75rem;padding:.35rem .4rem;margin-right:.2rem}}

/* „Frage X von Y" ausblenden (Fortschritt zeigen die Punkte) */
html.t_client .question_position{display:none}

/* ============================================================
   Ergebnisseite: ganze Kachel als Favoriten-Button
   ============================================================ */
.car{position:relative}
/* Unsichtbarer Overlay-Link über der gesamten Karte */
.car .car_link{
  position:absolute; inset:0; z-index:20;
  border-radius:10px; cursor:pointer; text-decoration:none;
  font-size:0; line-height:0;
}
/* Umwählbar: Overlay-Link bleibt klickbar, auch wenn ein Favorit gesetzt ist */
.car.no-favourite .car_link, .car.favourite .car_link{pointer-events:auto}
/* Nicht-Favoriten beim Hover wieder voll sichtbar (Einladung zum Umwählen) */
.car.no-favourite{transition:opacity .2s ease}
.car.no-favourite:hover{opacity:1 !important}
/* Stern beim Hover über die Karte füllen */
.car:hover .car_favorite svg{fill:currentColor}

/* CSS-Tooltip auf der ganzen Kachel */
.car .car_link::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:100%; transform:translate(-50%,8px);
  background:var(--color_primary); color:#fff;
  font-family:'Inter',system-ui,sans-serif; font-size:12px; line-height:1.2;
  padding:.45rem .65rem; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:30;
}
.car .car_link:hover::after{opacity:1}
/* Auf der bereits gewählten Karte keinen „wählen"-Tooltip zeigen */
.car.favourite .car_link::after{display:none}

/* ============================================================
   Splash: Bild kleiner + Fragen-Anzahl darunter
   ============================================================ */
html.t_client .splash .inner img,
html.t_client .splash .inner svg{max-width:340px;width:100%;height:auto;margin-inline:auto}
.splash_count{
  font-family:'Inter',system-ui,sans-serif; font-size:.8rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--color_secondary);
  margin:.6rem 0 0;
}

/* Splash: Nutzungstipps / Fließtext – kompakter, übersichtlicher */
html.t_client .splash .text_wrap p{
  font-size:1.1rem; line-height:1.45; margin:.55rem auto; max-width:680px;
}
/* Als Aufzählung (im Panel mit "-" formatiert) sauber, linksbündig, enger */
html.t_client .splash .text_wrap ul{
  list-style:disc; text-align:left; max-width:640px;
  margin:1rem auto; padding-left:1.3rem;
}
html.t_client .splash .text_wrap li{
  font-size:1.05rem; line-height:1.4; margin-bottom:.45rem;
}
@media (max-width:1000px){
  html.t_client .splash .text_wrap p{font-size:1rem}
  html.t_client .splash .text_wrap li{font-size:.95rem}
}

/* ============================================================
   Gewichtungs-Folie (Wahl-O-Mat) – als zusätzliche Slider-Folie
   ============================================================ */
/* gleiche Slide-Mechanik wie Splash/Fragen */
html.t_client main form#questions .weighting{
  position:absolute; left:0; right:0; top:0; bottom:0; width:auto; max-width:none;
  min-height:0; padding-top:7.5rem; padding-bottom:9rem; margin:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
@media (max-width:1000px){
  html.t_client main form#questions .weighting{padding-top:5rem; padding-bottom:7rem}
}
html.t_client main form#questions .weighting.is-active{transform:translateX(0); opacity:1; pointer-events:auto}
html.t_client main form#questions .weighting.is-prev{transform:translateX(-100%); opacity:0; pointer-events:none}
html.t_client main.no-anim form#questions .weighting{transition:none !important}

/* Übersichtsliste: schlicht, Frage + gegebene Antwort + Wichtig-Schalter */
.gma-weight-list{margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:.55rem}
.gma-weight-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  padding:.85rem 1rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.gma-weight-row.is-on{border-color:var(--color_primary); box-shadow:0 0 0 1px var(--color_primary) inset}
.gma-weight-q{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.gma-weight-question{font-family:'Inter',system-ui,sans-serif; font-size:.9rem; font-weight:600; color:var(--color_primary); line-height:1.3}
.gma-weight-answer{font-family:'Inter',system-ui,sans-serif; font-size:.82rem; color:var(--color_secondary); line-height:1.3}

/* Schalter (Toggle) */
.gma-weight-toggle{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; flex:0 0 auto; user-select:none}
.gma-weight-toggle input{position:absolute; opacity:0; width:0; height:0}
.gma-weight-switch{
  position:relative; width:44px; height:26px; border-radius:26px;
  background:rgba(0,0,0,.18); transition:background .18s ease; flex:0 0 auto;
}
.gma-weight-switch::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s ease;
}
.gma-weight-toggle input:checked + .gma-weight-switch{background:var(--color_primary)}
.gma-weight-toggle input:checked + .gma-weight-switch::after{transform:translateX(18px)}
.gma-weight-toggle input:focus-visible + .gma-weight-switch{outline:2px solid var(--color_primary); outline-offset:2px}
.gma-weight-text{font-family:'Inter',system-ui,sans-serif; font-size:.8rem; font-weight:600; color:var(--color_secondary); white-space:nowrap}

@media (max-width:1000px){
  .gma-weight-row{padding:.7rem .8rem; gap:.6rem}
  .gma-weight-text{display:none}      /* auf Mobile nur der Schalter, spart Platz */
}

/* ============================================================
   Ergebnisseite: Markenfilter + „Neu starten"-Button
   ============================================================ */
.results_filter{
  display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  width:100%; margin:0 0 1.75rem;
}
.results_filter label{
  font-family:'Inter',system-ui,sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--color_secondary);
}
.results_filter select{
  font-family:'Inter',system-ui,sans-serif; font-size:.95rem; color:var(--color_primary);
  background:#fff; border:1px solid rgba(0,0,0,.18); border-radius:10px;
  padding:.55rem 2.2rem .55rem .8rem; cursor:pointer; min-width:220px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center;
}
.results_filter select:focus-visible{outline:2px solid var(--color_primary); outline-offset:1px}
.results_filter .gma-filter-go{
  font-family:'Inter',sans-serif; font-size:.9rem; padding:.5rem .9rem;
  border:1px solid var(--color_primary); background:var(--color_primary); color:#fff;
  border-radius:10px; cursor:pointer;
}

/* prominenter Reset unter den Ergebnissen */
.results_actions{display:flex; justify-content:center; margin:2rem 0 1rem}
.gma-reset{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Inter',system-ui,sans-serif; font-size:1rem; font-weight:700;
  padding:.85rem 1.6rem; border-radius:12px; cursor:pointer; text-decoration:none;
  color:#fff; background:var(--color_primary);
  border:2px solid var(--color_primary);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.gma-reset::before{content:'\21bb'; font-size:1.15em; line-height:1}  /* ↻ */
.gma-reset:hover{background:var(--color_secondary); border-color:var(--color_secondary); color:#fff}
.gma-reset:active{transform:translateY(1px)}

/* ============================================================
   Header als opaker Balken (nur Frage-Template)
   Inhalt verschwindet beim Scrollen dahinter, statt durchzuscheinen.
   Nutzt die projekteigene Hintergrundfarbe -> hell wie dunkel korrekt.
   ============================================================ */
html.t_client header{
  background: var(--color_background, #fff) !important;
  z-index: 100 !important;
}
/* Vollbreiter weißer Balken hinter dem (nur spaltenbreiten) Header,
   damit Inhalt beim Scrollen auch an den Seiten dahinter verschwindet */
html.t_client main::before{
  content:''; position:fixed; top:0; left:0; right:0; height:7rem;
  background: var(--color_background, #fff); z-index:90; pointer-events:none;
}
@media (max-width:1000px){
  html.t_client main::before{ height:4.5rem; }
}

/* ============================================================
   Ergebnisseite: Aktionen (Zurück zur Gewichtung + Neu starten)
   ============================================================ */
.results_actions{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:1rem; margin:2rem 0 1rem;
}
/* Sekundär: zurück zur Gewichtungsseite */
.gma-back-results{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Inter',system-ui,sans-serif; font-size:1rem; font-weight:600;
  padding:.85rem 1.2rem; border-radius:12px; cursor:pointer; text-decoration:none;
  color:var(--color_primary); background:none; border:none;
}
.gma-back-results::before{content:'\2039'; font-size:1.2em; line-height:1}
.gma-back-results:hover{text-decoration:underline}

/* ============================================================
   Ergebnis-Aktionen in der Fußleiste (Neu starten + Zurück)
   Ersetzen den alten "Reset". Immer sichtbar, kosten keine
   Scrollhöhe. "Termin vereinbaren" bleibt die primäre CTA.
   ============================================================ */
.result_actions{display:flex; align-items:center; gap:.5rem}
.question_menu .gma-reset{
  padding:.5rem 1rem; font-size:.9rem; border-radius:9px;
  background:#fff; color:var(--color_primary); border:2px solid var(--color_primary);
}
.question_menu .gma-reset::before{content:'\21bb'; font-size:1.05em}
.question_menu .gma-reset:hover{background:var(--color_primary); color:#fff}
.question_menu .gma-back-results{
  padding:.45rem .6rem; font-size:.9rem;
}
@media (max-width:1000px){
  .question_menu .gma-reset{padding:.4rem .7rem; font-size:.8rem}
  .question_menu .gma-back-results{font-size:.8rem; padding:.35rem .4rem}
  .question_menu .gma-back-results{display:none}   /* auf Mobile Platz sparen */
}

/* ============================================================
   Kompaktere Ergebnis-Kacheln (Desktop), damit möglichst alles
   ohne Scrollen auf eine Seite passt.
   ============================================================ */
@media (min-width:1001px){
  .results .car_image img{
    max-height:160px; width:auto; object-fit:contain; margin-inline:auto;
  }
}

/* ============================================================
   "Neu starten" in der Frage-Leiste (neben Zurück)
   ============================================================ */
.gma-restart-btn{
  font-family:'Inter',sans-serif; font-size:.85rem; line-height:1;
  background:none; border:none; cursor:pointer; color:var(--color_secondary);
  padding:.45rem .6rem; margin-right:.4rem; white-space:nowrap; border-radius:6px;
  text-decoration:underline; text-underline-offset:2px; transition:background .15s ease;
}
.gma-restart-btn:hover{background:rgba(0,0,0,.05)}
@media (max-width:1000px){.gma-restart-btn{font-size:.75rem;padding:.35rem .4rem;margin-right:.2rem}}

/* ============================================================
   Freitext-Frage
   ============================================================ */
html.t_client .freetext textarea{
  width:100%; box-sizing:border-box; font-family:'Inter',system-ui,sans-serif;
  font-size:1.05rem; line-height:1.5; padding:.8rem 1rem; border-radius:12px;
  border:1px solid rgba(0,0,0,.2); resize:vertical; min-height:120px;
}
html.t_client .freetext textarea:focus{outline:2px solid var(--color_primary); outline-offset:1px; border-color:var(--color_primary)}

/* ============================================================
   Kontaktformular: Marken-Dropdown + Mehrfachauswahl-Gruppen
   ============================================================ */
.form_overlay select{
  width:100%; box-sizing:border-box; font-family:'Inter',system-ui,sans-serif;
  font-size:15px; padding:.65rem .9rem; border-radius:10px;
  border:1px solid rgba(0,0,0,.2); background:#fff;
}
.form_overlay .form_group{
  border:none; margin:.2rem 0; padding:0; width:100%; grid-column:1 / -1;
}
.form_overlay .form_group legend{
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:.95rem;
  margin-bottom:.5rem; padding:0;
}
.form_overlay .checkbox_option{margin-bottom:.35rem}

/* Kontaktformular: Freitext "Besondere Wünsche" (ersetzt vorherige Mehrfachauswahl) */
.form_overlay textarea{
  width:100%; box-sizing:border-box; font-family:'Inter',system-ui,sans-serif;
  font-size:15px; line-height:1.45; padding:.65rem .9rem; border-radius:10px;
  border:1px solid rgba(0,0,0,.2); resize:vertical; min-height:90px;
}
.form_overlay textarea:focus{outline:2px solid var(--color_primary); outline-offset:1px; border-color:var(--color_primary)}
.form_overlay .gma-freetext-label{display:block}
.form_overlay .gma-freetext-label textarea{margin-top:.5rem}

/* ============================================================
   Kontakt-Overlay: bei vielen Feldern höher als der Bildschirm.
   Karte auf Bildschirmhöhe begrenzen und intern scrollbar machen,
   damit oben nichts abgeschnitten wird.
   ============================================================ */
.form_overlay_inner{
  max-height:calc(100vh - 3rem);
  max-height:calc(100dvh - 3rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ============================================================
   Antworten: bis zu 6 Optionen sauber umbrechen, statt über die
   Box hinauszuragen. Bis 3 pro Reihe, danach automatisch in die
   nächste Reihe -> die Frage-Box wächst mit.
   ============================================================ */
html.t_client .answers{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:1rem;
}
html.t_client .answer_wrap{
  flex:0 1 calc(33.333% - 1rem);   /* feste Spaltenbreite -> alle Felder gleich breit */
  min-width:150px; margin:0; display:flex;
}
html.t_client .answer_wrap .answer{
  width:100%; min-height:110px;    /* gleiche Höhe, egal ob 1 oder 2 Zeilen Text */
  display:flex; align-items:center; justify-content:center; text-align:center;
}
@media (max-width:1000px){
  html.t_client .answer_wrap{ flex-basis:calc(50% - .5rem); }
}

/* --- Schriftgröße insgesamt etwas verkleinern (Startseite + Fragen).
   Die Basis-Schriftgröße dieses Templates liegt bei 20px statt der üblichen
   16px, dadurch wirkt alles, was in rem angegeben ist (praktisch der gesamte
   Text), größer als gewohnt - u.a. die Zeilenumbrüche bei den Antwortkarten.
   Eine Reduzierung des Root-Font-Size skaliert Text UND Abstände proportional
   mit, für Splash und Fragen gleichermaßen, ohne Dutzende Einzelwerte
   anfassen zu müssen. --- */
html.t_client{font-size:17px !important}

/* ============================================================
   Neue Startseite (Splash) – Hero, Ergebnis-Teaser, Ablauf,
   Info-Band, Final-CTA. Nutzt ausschließlich die bestehenden
   Projektfarben (--color_primary/--color_secondary) und die
   bestehende .button-Klasse, damit sie automatisch zum
   restlichen Tool passt. Der BMW-iX3-Bildpfad ist ein festes
   Beispiel (siehe Upload-Hinweis).
   ============================================================ */
/* --- Kopfzeilen-Freiraum: .splash startet wegen der Absolute-Positionierung
   am oberen Rand von main, NICHT unterhalb von mains eigenem padding-top
   (bekannter Effekt, siehe .weighting weiter oben). Bei der kurzen
   Original-Splash fiel das nicht auf, bei diesem deutlich längeren Inhalt
   rutschen sonst Überschrift und ein Großteil der Teaser-Karte hinter den
   fixierten Header und sind gar nicht erreichbar. Gleiche Werte wie bei
   .weighting, damit es konsistent bleibt. --- */
/* --- Der eigentliche Fund: .splash ist im Basis-Theme ein Flex-Container mit
   justify-content:center (display:flex; flex-direction:column; align-items:
   center; justify-content:center;). Für die kurze Original-Splash war das
   korrekt (kurzer Inhalt wird zentriert). In Kombination mit overflow-y:auto
   und einem deutlich höheren Inhalt wie hier führt justify-content:center zu
   einem bekannten Flexbox-Bug: der obere Überlauf wird unerreichbar, auch
   durch Scrollen nicht - das Padding allein konnte das nie beheben, weil es
   nicht das eigentliche Problem war. Für diese Seite schalten wir .splash auf
   normales Blockverhalten um, das löst es vollständig. --- */
html.t_client .splash{
  display:block !important;
  text-align:left !important;
  min-height:0 !important;
}

html.t_client main > .splash{
  padding-top:7.5rem !important; padding-bottom:9rem !important;
}
@media (max-width:1000px){
  html.t_client main > .splash{padding-top:5rem !important; padding-bottom:7rem !important}
}

html.t_client .splash .inner.gma-home{
  max-width:none; width:100%; padding:0 1.25rem; margin:0;
  display:flex; flex-direction:column; gap:clamp(3rem,6vw,5rem);
}
@media (min-width:640px){ html.t_client .splash .inner.gma-home{padding:0 2rem} }

.gma-home *{box-sizing:border-box}
.gma-home h1, .gma-home h2, .gma-home h3, .gma-home h4{margin:0}
/* Das bestehende Theme setzt Bricolage Grotesque nur für h1/h2 (main h1, main h2).
   Unsere Karten-Überschriften sind h3/h4 (Schritte, Info-Band) – hier explizit
   dieselbe Schrift ergänzen, damit alle Überschriften einheitlich aussehen. */
html.t_client .splash .inner.gma-home h3,
html.t_client .splash .inner.gma-home h4{
  font-family:'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.02em;
}
.gma-home p{margin:0}

/* --- Defensiver Reset: das bestehende Theme setzt global auf .splash .inner
   Großschrift + Grün auf Überschriften/Text sowie eine feste Bild/SVG-Größe
   (max-width:340px). Diese Regeln sind spezifischer als ein einfacher
   .gma-* Klassen-Selektor, deshalb hier gezielt mit passender Spezifität
   zurückgesetzt, bevor die eigentliche Gestaltung folgt. --- */
html.t_client .splash .inner.gma-home,
html.t_client .splash .inner.gma-home *{
  text-align:left;
}
html.t_client .splash .inner.gma-home h1,
html.t_client .splash .inner.gma-home h2,
html.t_client .splash .inner.gma-home h3,
html.t_client .splash .inner.gma-home h4{
  text-transform:none !important;
}
html.t_client .splash .inner.gma-home p,
html.t_client .splash .inner.gma-home li{
  color:#0B2340 !important; /* dunkles, gut lesbares Ink statt Marken-Grün im Fließtext */
}
html.t_client .splash .inner.gma-home ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
}
html.t_client .splash .inner.gma-home img{
  max-width:100% !important; width:100% !important; height:auto !important; margin:0 !important;
}

/* ---------- Hero ---------- */
.gma-hero{
  display:grid !important; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem);
  align-items:center; max-width:1160px; margin:0 auto; width:100%;
  padding-top:clamp(1.5rem,4vw,3rem);
}
@media (max-width:900px){ .gma-hero{grid-template-columns:1fr} }

.gma-eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color_primary); margin-bottom:16px;
}
.gma-hero h1{
  font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--color_primary); margin-bottom:18px; text-wrap:balance;
}
.gma-hero h1 .gma-accent{color:var(--color_secondary)}
.gma-lead{
  font-size:clamp(1.02rem,1.5vw,1.15rem); color:inherit; max-width:52ch;
  margin-bottom:26px; line-height:1.5;
}
.gma-chips{list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:10px}
.gma-chips li{
  display:inline-flex; align-items:center; gap:8px; background:#f3f6f4;
  border:1px solid rgba(0,0,0,.08); color:var(--color_primary); font-weight:600;
  font-size:.88rem; padding:8px 14px; border-radius:999px;
}
.gma-check{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:16px; height:16px; border-radius:50%; background:var(--color_primary);
  color:#fff; font-size:10px; line-height:1; font-weight:800;
}
a.gma-cta{display:inline-flex; align-items:center; gap:8px}

/* ---------- Ergebnis-Teaser (Signatur-Element) ---------- */
.gma-teaser-label{
  font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color_secondary); text-align:center; margin-bottom:14px;
}
.gma-stack{position:relative; max-width:400px; margin:0 auto}
.gma-ghost{
  position:absolute; inset:0; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:20px; box-shadow:0 10px 24px -18px rgba(0,0,0,.4);
}
.gma-ghost-1{transform:translate(12px,14px) scale(.97); opacity:.55}
.gma-ghost-2{transform:translate(24px,28px) scale(.94); opacity:.3}

.gma-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:20px; box-shadow:0 22px 44px -26px rgba(0,0,0,.45); padding:24px 22px;
}
.gma-ribbon{
  position:absolute; top:16px; right:-42px; transform:rotate(45deg);
  background:var(--color_primary); color:#fff; font-weight:800; font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 46px;
  box-shadow:0 2px 8px rgba(0,0,0,.25); white-space:nowrap;
}
.gma-badge{
  display:inline-flex; align-items:center; background:#f0f6f2; color:var(--color_primary);
  font-weight:700; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; margin-bottom:10px;
}
.gma-match-name{font-size:1.28rem; font-weight:800; color:var(--color_primary)}
.gma-match-sub{color:var(--color_secondary); font-size:.92rem; margin-top:4px}
.gma-car-photo{
  margin:18px 0 16px; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg,#f5f7f5,#fff);
}
.gma-car-photo img{width:100%; height:auto; display:block; max-width:none; margin:0}
.gma-reasons{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:8px}
.gma-reasons li{
  background:#f3f6f4; border:1px solid rgba(0,0,0,.08); color:var(--color_primary);
  font-weight:600; font-size:.85rem; padding:6px 11px; border-radius:999px;
}
.gma-card-foot{
  color:var(--color_secondary); font-size:.82rem; border-top:1px solid rgba(0,0,0,.08);
  padding-top:14px;
}

/* ---------- Ablauf (3 Schritte) ---------- */
.gma-steps{max-width:1160px; margin:0 auto; width:100%}
.gma-steps h2{
  font-size:clamp(1.5rem,2.6vw,2rem); color:var(--color_primary); letter-spacing:-.015em;
  margin-bottom:28px;
}
.gma-steps-grid{display:grid !important; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:820px){ .gma-steps-grid{grid-template-columns:1fr} }
.gma-step{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px;
  padding:24px 22px; box-shadow:0 8px 20px -16px rgba(0,0,0,.35);
}
.gma-step-n{font-weight:800; font-size:.9rem; color:var(--color_primary); letter-spacing:.04em; margin-bottom:10px}
.gma-step h3{font-size:1.1rem; color:var(--color_primary); margin-bottom:8px}
.gma-step p{font-size:.92rem; color:var(--color_secondary); line-height:1.5}

/* ---------- Info-Band ---------- */
.gma-info{
  max-width:1160px; margin:0 auto; width:100%; background:#f6f8f6;
  border-radius:22px; padding:clamp(28px,4vw,44px);
}
.gma-info h2{
  font-size:clamp(1.4rem,2.4vw,1.8rem); color:var(--color_primary); letter-spacing:-.015em;
  margin-bottom:26px;
}
.gma-info-grid{display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:820px){ .gma-info-grid{grid-template-columns:1fr} }
.gma-info-grid h4{font-size:1rem; color:var(--color_primary); margin-bottom:6px}
.gma-info-grid p{font-size:.92rem; color:var(--color_secondary); line-height:1.5}

/* ---------- Final CTA ---------- */
.gma-final{
  max-width:1160px; margin:0 auto; width:100%; background:var(--color_primary); color:#fff;
  border-radius:22px; padding:clamp(26px,4vw,42px); display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.gma-final h2{font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.015em; max-width:22ch}
.gma-final p{color:#fff; opacity:.75; font-size:.9rem; margin-top:8px}
.gma-final .button{background:#fff; color:var(--color_primary)}

/* --- Farbfeinschliff: einzelne Elemente behalten bewusst Marken-Grün,
   Weiß oder eine zentrierte Ausrichtung, obwohl der allgemeine Reset oben
   dunkles Ink bzw. linksbündig erzwingt. Diese Regeln sind eine Klasse
   spezifischer als der Reset und gewinnen daher gezielt dagegen. --- */
html.t_client .splash .inner.gma-home .gma-teaser-label{text-align:center !important}
html.t_client .splash .inner.gma-home .gma-chips li{color:var(--color_primary) !important}
html.t_client .splash .inner.gma-home .gma-reasons li{color:var(--color_primary) !important}
html.t_client .splash .inner.gma-home .gma-badge{color:var(--color_primary) !important}
html.t_client .splash .inner.gma-home .gma-match-sub,
html.t_client .splash .inner.gma-home .gma-card-foot,
html.t_client .splash .inner.gma-home .gma-teaser-label{color:var(--color_secondary) !important}
html.t_client .splash .inner.gma-home .gma-info-grid p,
html.t_client .splash .inner.gma-home .gma-step p{color:var(--color_secondary) !important}
html.t_client .splash .inner.gma-home .gma-final,
html.t_client .splash .inner.gma-home .gma-final p{color:#fff !important}
html.t_client .splash .inner.gma-home .gma-final .button{color:var(--color_primary) !important}