/* =================================================================
   STALUPLAN Zauntechnik – Lead-Wizard
   Custom Styles (mobile-first) auf Basis von Bootstrap 5.3.3
   Farbschema: Anthrazit (RAL 7016) + Stahlblau
   Alle Marken-Farben sind als CSS-Variablen definiert und lassen
   sich hier zentral in wenigen Sekunden austauschen.
   ================================================================= */

:root {
  /* ---- Markenfarben ---- */
  --sp-anthracite:      #2E3539;   /* Hauptfarbe (RAL 7016 angelehnt) */
  --sp-anthracite-900:  #1c2225;   /* sehr dunkel (Footer, Hero) */
  --sp-anthracite-700:  #3b454b;
  --sp-blue:            #0B6FB8;   /* Akzent / CTA */
  --sp-blue-600:        #0a5f9e;
  --sp-blue-700:        #084f84;
  --sp-blue-050:        #e9f3fb;   /* helle Flächen */
  --sp-steel:           #5b6770;   /* gedämpfter Text */
  --sp-line:            #e2e7ea;   /* Rahmen / Trennlinien */
  --sp-bg:              #f5f7f9;   /* Seitenhintergrund */
  --sp-bg-alt:          #eef2f5;
  --sp-white:           #ffffff;
  --sp-success:         #2f9e54;
  --sp-star:            #ffb400;

  /* ---- Bootstrap-Overrides ---- */
  --bs-primary:         var(--sp-blue);
  --bs-body-color:      var(--sp-anthracite);
  --bs-body-bg:         var(--sp-bg);
  --bs-body-font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --sp-radius:          16px;
  --sp-radius-sm:       12px;
  --sp-shadow:          0 6px 24px rgba(28, 34, 37, .08);
  --sp-shadow-lg:       0 18px 50px rgba(28, 34, 37, .16);
}

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-body-font-family);
  color: var(--sp-anthracite);
  background: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4,
.navbar-brand, .sp-eyebrow {
  font-family: 'Manrope', var(--bs-body-font-family);
  font-weight: 800;
  letter-spacing: -.01em;
}
h2 { line-height: 1.15; }
a { color: var(--sp-blue); text-decoration: none; }
a:hover { color: var(--sp-blue-700); }
.text-muted-sp { color: var(--sp-steel) !important; }
section { scroll-margin-top: 86px; }

.sp-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-blue);
  margin-bottom: .6rem;
}

/* Accessibility: Skip-Link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--sp-blue); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color:#fff; }

/* ---------- Buttons ---------- */
.btn { font-weight: 700; border-radius: 12px; padding: .7rem 1.35rem; }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.05rem; }
.btn-primary {
  --bs-btn-bg: var(--sp-blue); --bs-btn-border-color: var(--sp-blue);
  --bs-btn-hover-bg: var(--sp-blue-600); --bs-btn-hover-border-color: var(--sp-blue-600);
  --bs-btn-active-bg: var(--sp-blue-700); --bs-btn-active-border-color: var(--sp-blue-700);
  box-shadow: 0 8px 20px rgba(11,111,184,.28);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(11,111,184,.36); transform: translateY(-1px); }
.btn-dark {
  --bs-btn-bg: var(--sp-anthracite); --bs-btn-border-color: var(--sp-anthracite);
  --bs-btn-hover-bg: var(--sp-anthracite-700); --bs-btn-hover-border-color: var(--sp-anthracite-700);
}
.btn-outline-light { --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.5); }
.btn-outline-primary { --bs-btn-color: var(--sp-blue); --bs-btn-border-color: var(--sp-blue); }
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sp-line);
}
.navbar-brand { color: var(--sp-anthracite); display:flex; align-items:center; }
.navbar-brand svg { height: 38px; width: auto; }
.navbar .nav-link { color: var(--sp-anthracite); font-weight: 600; }
.navbar .nav-link:hover { color: var(--sp-blue); }
.nav-phone { color: var(--sp-anthracite); font-weight: 800; white-space: nowrap; }
.nav-phone i { color: var(--sp-blue); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(11,111,184,.40), transparent 60%),
    linear-gradient(160deg, var(--sp-anthracite-900) 0%, var(--sp-anthracite) 60%, #283034 100%);
  overflow: hidden;
}
.hero::after {
  /* dezentes Zaun-/Gitter-Muster */
  content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2rem, 6.2vw, 3.4rem); line-height: 1.08; }
.hero .lead { color: #d9e0e4; font-size: 1.12rem; }
.hero-rating { color: var(--sp-star); }
.hero-badges .badge-pill {
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#eef2f5; padding:.5rem .85rem; border-radius: 999px; font-size:.85rem; font-weight:600;
}
.hero-badges .badge-pill i { color: var(--sp-blue); font-size:1rem; }

/* ---------- Trust-Bar ---------- */
.trustbar { background: var(--sp-white); border-bottom: 1px solid var(--sp-line); }
.trustbar .trust-item { display:flex; align-items:center; gap:.6rem; color: var(--sp-steel); font-weight:600; font-size:.92rem; }
.trustbar .trust-item i { color: var(--sp-success); font-size:1.3rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--sp-bg-alt); }
.section-dark { background: var(--sp-anthracite); color:#fff; }
.section-dark .text-muted-sp, .section-dark .lead { color:#c5cdd2 !important; }

/* ---------- Karten ---------- */
.sp-card {
  background:#fff; border:1px solid var(--sp-line); border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow); height:100%;
}
.sp-card .sp-card-body { padding: 1.6rem; }
.feature-icon {
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background: var(--sp-blue-050); color: var(--sp-blue); font-size:1.5rem; margin-bottom:1rem;
}
.step-num {
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: var(--sp-blue); color:#fff; font-weight:800; font-size:1.2rem;
  font-family:'Manrope',sans-serif; box-shadow:0 6px 16px rgba(11,111,184,.3);
}

/* ---------- Prozess-Timeline ("So funktioniert's") ---------- */
.steps { position: relative; }
.step-item { position: relative; display: flex; gap: 1.1rem; padding-bottom: 2rem; }
.step-item:last-child { padding-bottom: 0; }
.step-badge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-700));
  box-shadow: 0 0 0 6px var(--sp-blue-050), 0 8px 16px rgba(11,111,184,.3);
  position: relative; z-index: 1;
}
.step-item:not(:last-child)::before {
  content: ""; position: absolute; left: 26px; top: 56px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--sp-blue) 0 6px, transparent 6px 14px);
  opacity: .45;
}
.step-content { padding-top: .35rem; }
.step-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: .4rem; }
@media (min-width: 768px) {
  .steps { display: flex; gap: 0; }
  .step-item { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 0 1.1rem; }
  .step-badge { margin-bottom: 1.3rem; }
  .step-content { padding-top: 0; }
  .step-item:not(:last-child)::before {
    left: 50%; right: -50%; top: 27px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--sp-blue) 0 6px, transparent 6px 14px);
  }
}

/* ---------- Feature-Liste ("Warum ZaunMatch") – rahmenlos/editorial ---------- */
.why-intro h2 { margin-bottom: .6rem; }
.why-intro .why-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.why-intro .why-badges span {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700;
  color: var(--sp-blue); background: var(--sp-blue-050); border-radius: 999px; padding: .35rem .8rem;
}
.feature-list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 576px){ .feature-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4rem; } }
.feature-row {
  display: flex; gap: .95rem; align-items: flex-start; padding: 1.15rem .25rem;
  border-bottom: 1px solid var(--sp-line); transition: transform .15s ease;
}
@media (min-width: 576px){ .feature-list .feature-row:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 575.98px){ .feature-list .feature-row:last-child { border-bottom: 0; } }
.feature-row:hover { transform: translateX(4px); }
.fr-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sp-blue-050); color: var(--sp-blue); font-size: 1.2rem;
  transition: background .2s ease, color .2s ease;
}
.feature-row:hover .fr-icon { background: var(--sp-blue); color: #fff; }
.fr-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.04rem; margin: 0 0 .2rem; line-height: 1.2; }
.fr-desc { color: var(--sp-steel); margin: 0; font-size: .93rem; line-height: 1.45; }
[data-bs-theme="dark"] .feature-row { border-color: var(--sp-line); }
[data-bs-theme="dark"] .fr-icon { background: rgba(11,111,184,.18); color: #5db4f0; }
[data-bs-theme="dark"] .feature-row:hover .fr-icon { background: var(--sp-blue); color: #fff; }

/* Inline-Logo (immer sichtbar, auch beim Öffnen einzelner Dateien) */
.brand-logo { height: 38px; width: auto; display: block; }
[data-bs-theme="dark"] .step-badge { box-shadow: 0 0 0 6px rgba(11,111,184,.14), 0 8px 16px rgba(0,0,0,.4); }

/* Produkt-Karten */
.product-card { overflow:hidden; }
.product-card .pc-top {
  height: 92px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--sp-anthracite) 0%, var(--sp-anthracite-700) 100%);
  color:#fff; font-size:2.2rem;
}
.product-card .pc-top i { color:#fff; }

/* ---------- Wizard ---------- */
.wizard-wrap {
  background:#fff; border-radius: 22px; box-shadow: var(--sp-shadow-lg);
  border:1px solid var(--sp-line); overflow:hidden;
  color: var(--bs-body-color); /* eigene Textfarbe, damit weiße Karte im dunklen Hero lesbar bleibt */
}
.wizard-head { padding: 1.1rem 1.25rem; border-bottom:1px solid var(--sp-line); }
.wizard-progress-track { height: 8px; background: var(--sp-bg-alt); border-radius:999px; overflow:hidden; }
.wizard-progress-bar { height:100%; width:0; background: linear-gradient(90deg, var(--sp-blue), #2d96e0); border-radius:999px; transition: width .35s ease; }
.wizard-step-label { font-size:.82rem; font-weight:700; color:var(--sp-steel); }
.wizard-body { padding: clamp(1.25rem, 4vw, 2.4rem); }

.wizard-q { font-family:'Manrope',sans-serif; font-weight:800; font-size: clamp(1.3rem,4.5vw,1.7rem); line-height:1.2; }
.wizard-help { color: var(--sp-steel); margin-top:.4rem; }

/* Option-Karten (Auswahl) */
/* minmax(0,1fr) statt 1fr: verhindert, dass lange Wörter die Tracks über die
   Containerbreite hinaus aufblähen (horizontaler Overflow z.B. bei ~732px). */
/* Bis 767px (schmaler Container) jede Option einzeilig/volle Breite;
   Mehrspaltigkeit erst ab 768px, wenn der Container breit genug ist. */
.opt-grid { display:grid; grid-template-columns: minmax(0,1fr); gap:.8rem; margin-top:1.4rem; }
@media (min-width: 768px){ .opt-grid.cols-2{ grid-template-columns: repeat(2,minmax(0,1fr));} }
@media (min-width: 768px){ .opt-grid.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr));} }
@media (min-width: 768px){ .opt-grid.cols-4{ grid-template-columns: repeat(4,minmax(0,1fr));} }

.opt {
  position:relative; display:flex; align-items:center; gap:.9rem; text-align:left;
  width:100%; background:#fff; border:2px solid var(--sp-line); border-radius:14px;
  padding: 1rem 1.05rem; cursor:pointer; transition: all .15s ease; font: inherit; color:inherit;
}
.opt:hover { border-color: var(--sp-blue); background: var(--sp-blue-050); transform: translateY(-1px); }
.opt:focus-visible { outline:3px solid rgba(11,111,184,.35); outline-offset:2px; }
.opt.selected { border-color: var(--sp-blue); background: var(--sp-blue-050); box-shadow: inset 0 0 0 1px var(--sp-blue); }
.opt .opt-ico {
  flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
  background: var(--sp-bg-alt); color: var(--sp-anthracite); font-size:1.35rem;
}
.opt.selected .opt-ico { background: var(--sp-blue); color:#fff; }
.opt .opt-txt { flex:1 1 auto; min-width:0; }
.opt .opt-title { display:block; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.opt .opt-desc { display:block; font-size:.85rem; color:var(--sp-steel); margin-top:.15rem; overflow-wrap:anywhere; }
.opt .opt-check {
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--sp-line);
  display:grid; place-items:center; color:#fff;
}
.opt.selected .opt-check { background: var(--sp-blue); border-color: var(--sp-blue); }
.opt .opt-check i { opacity:0; font-size:.85rem; }
.opt.selected .opt-check i { opacity:1; }

/* Formularfelder */
.wizard-body .form-control, .wizard-body .form-select {
  border:2px solid var(--sp-line); border-radius:12px; padding:.8rem 1rem; font-size:1rem;
}
.wizard-body .form-control:focus, .wizard-body .form-select:focus {
  border-color: var(--sp-blue); box-shadow: 0 0 0 .2rem rgba(11,111,184,.15);
}
.wizard-body .form-label { font-weight:600; }
.field-error { color:#c0392b; font-size:.85rem; margin-top:.3rem; display:none; }
.has-error .form-control, .has-error .form-select { border-color:#e07a6f; }
.has-error .field-error { display:block; }

/* Navigation im Wizard */
.wizard-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.8rem; }
.btn-back { background:transparent; border:none; color:var(--sp-steel); font-weight:700; }
.btn-back:hover { color: var(--sp-anthracite); }
.btn-back[disabled]{ opacity:0; pointer-events:none; }

/* Vertrauen unter dem Wizard */
.wizard-trust { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--sp-steel); font-size:.85rem; }
.wizard-trust span { display:inline-flex; align-items:center; gap:.4rem; }
.wizard-trust i { color: var(--sp-success); }

/* Ergebnis-Screen */
.result-hero { text-align:center; }
.result-badge {
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1rem;
  background: rgba(47,158,84,.12); color: var(--sp-success); font-size:2.6rem;
}
.match-card {
  border:2px solid var(--sp-blue); background: linear-gradient(180deg, var(--sp-blue-050), #fff);
  border-radius:18px; padding:1.4rem;
}
.summary-list { list-style:none; padding:0; margin:0; }
.summary-list li { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px dashed var(--sp-line); font-size:.95rem; }
.summary-list li:last-child{ border-bottom:none; }
.summary-list .sl-key { color:var(--sp-steel); }
.summary-list .sl-val { font-weight:700; text-align:right; }

/* ---------- Testimonials ---------- */
.testi-card .stars { color: var(--sp-star); }
.testi-card .quote { font-size:1.02rem; }
.testi-author { font-weight:700; }
.testi-meta { color: var(--sp-steel); font-size:.85rem; }
.avatar {
  width:46px; height:46px; border-radius:50%; background:var(--sp-blue); color:#fff;
  display:grid; place-items:center; font-weight:800; font-family:'Manrope',sans-serif;
}

/* ---------- FAQ ---------- */
.accordion-button { font-weight:700; color:var(--sp-anthracite); border-radius:12px !important; }
.accordion-button:not(.collapsed){ background: var(--sp-blue-050); color: var(--sp-blue-700); box-shadow:none; }
.accordion-button:focus { box-shadow:0 0 0 .2rem rgba(11,111,184,.18); }
.accordion-item { border:1px solid var(--sp-line); border-radius:12px !important; margin-bottom:.7rem; overflow:hidden; }

/* ---------- CTA Band ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(11,111,184,.45), transparent 60%),
    linear-gradient(135deg, var(--sp-anthracite-900), var(--sp-anthracite));
  color:#fff; border-radius: 22px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--sp-anthracite-900); color:#c5cdd2; }
.site-footer a { color:#c5cdd2; }
.site-footer a:hover { color:#fff; }
.site-footer h6 { color:#fff; font-weight:800; font-family:'Manrope',sans-serif; letter-spacing:.02em; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); }

/* Sticky Mobile-CTA */
.mobile-cta {
  position: fixed; left:0; right:0; bottom:0; z-index:1030;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top:1px solid var(--sp-line); padding:.6rem .8rem;
  display:flex; gap:.6rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.mobile-cta .btn {
  flex:1 1 0;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem .4rem;
  white-space:nowrap;            /* Text immer einzeilig */
  font-size:clamp(.82rem, 3.5vw, 1rem);
  line-height:1.15;
}
/* Platz schaffen, damit die fixe CTA-Leiste den Seiteninhalt (Footer) nicht überlappt.
   Nur auf Seiten mit .mobile-cta; exakte Höhe wird per JS als --cta-h gesetzt
   (Fallback 64px), damit kein Spalt zwischen Footer und Leiste entsteht. */
@media (max-width: 991.98px){ body:has(.mobile-cta){ padding-bottom: var(--cta-h, 64px); } }
@media (min-width: 992px){ .mobile-cta{ display:none; } }

/* kleine Utilities */
.rounded-xl { border-radius: var(--sp-radius) !important; }
.fw-800 { font-weight:800 !important; }
.lh-sm { line-height:1.25 !important; }
.divider { height:1px; background:var(--sp-line); border:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; } * { transition:none !important; }
}

/* ---------- Sprachumschalter ---------- */
.lang-switch .btn {
  border-radius: 10px; font-weight: 700; border:1px solid var(--sp-line);
  color: var(--sp-anthracite); background:#fff;
}
.lang-switch .dropdown-menu { border-radius: 12px; border:1px solid var(--sp-line); box-shadow: var(--sp-shadow); }
.lang-switch .dropdown-item { font-weight:600; border-radius:8px; }
.lang-switch .dropdown-item.active,
.lang-switch .dropdown-item:active { background: var(--sp-blue); color:#fff; }
.lang-switch .flag { font-size:1.05rem; line-height:1; }
.theme-toggle {
  border:1px solid var(--sp-line); background:#fff; color: var(--sp-anthracite);
  border-radius:10px; width:38px; height:38px; display:grid; place-items:center; font-size:1.05rem;
}
.theme-toggle:hover { color: var(--sp-blue); border-color: var(--sp-blue); }

/* ---------- DARK MODE ---------- */
[data-bs-theme="dark"] {
  --sp-bg:        #15181b;
  --sp-bg-alt:    #1b2024;
  --sp-white:     #222932;
  --sp-line:      #2d343c;
  --sp-steel:     #9aa6ae;
  --sp-blue-050:  rgba(11,111,184,.16);
  --bs-body-bg:   #15181b;
  --bs-body-color:#e7ebee;
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background: var(--sp-bg); color: #e7ebee; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] .wizard-q,
[data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .summary-list .sl-val { color: #f1f4f6; }
[data-bs-theme="dark"] .text-muted-sp { color: #9aa6ae !important; }
[data-bs-theme="dark"] .section-alt { background: var(--sp-bg-alt); }

[data-bs-theme="dark"] .navbar { background: rgba(21,24,27,.92); border-bottom-color: var(--sp-line); }
[data-bs-theme="dark"] .navbar .nav-link, [data-bs-theme="dark"] .nav-phone { color: #e7ebee; }
[data-bs-theme="dark"] .navbar .nav-link:hover { color: var(--sp-blue); }

[data-bs-theme="dark"] .sp-card { background: var(--sp-white); border-color: var(--sp-line); }
[data-bs-theme="dark"] .trustbar { background: var(--sp-white); border-bottom-color: var(--sp-line); }
[data-bs-theme="dark"] .feature-icon { background: rgba(11,111,184,.18); }

[data-bs-theme="dark"] .wizard-wrap { background: var(--sp-white); border-color: var(--sp-line); }
[data-bs-theme="dark"] .wizard-head { border-bottom-color: var(--sp-line); }
[data-bs-theme="dark"] .wizard-progress-track { background: #2c333c; }
[data-bs-theme="dark"] .opt { background: var(--sp-white); border-color: var(--sp-line); color: #e7ebee; }
[data-bs-theme="dark"] .opt:hover { background: rgba(11,111,184,.16); }
[data-bs-theme="dark"] .opt.selected { background: rgba(11,111,184,.20); }
[data-bs-theme="dark"] .opt-ico { background: #2c333c; color: #e7ebee; }
[data-bs-theme="dark"] .opt-check { border-color: var(--sp-line); }
[data-bs-theme="dark"] .match-card { background: linear-gradient(180deg, rgba(11,111,184,.14), var(--sp-white)); border-color: var(--sp-blue); }
[data-bs-theme="dark"] .summary-list li { border-color: var(--sp-line); }
[data-bs-theme="dark"] .wizard-body .form-control,
[data-bs-theme="dark"] .wizard-body .form-select,
[data-bs-theme="dark"] .form-control { background: #1b2026; color: #e7ebee; border-color: var(--sp-line); }
[data-bs-theme="dark"] .form-control::placeholder { color: #6f7a82; }

[data-bs-theme="dark"] .accordion-item { border-color: var(--sp-line); }
[data-bs-theme="dark"] .accordion-button { background: var(--sp-white); color: #e7ebee; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(11,111,184,.18); color: #cfe3f4; }
[data-bs-theme="dark"] .accordion-body { background: var(--sp-white); color: #c5cdd2; }

[data-bs-theme="dark"] .mobile-cta { background: rgba(21,24,27,.96); border-top-color: var(--sp-line); }
[data-bs-theme="dark"] .lang-switch .btn, [data-bs-theme="dark"] .theme-toggle { background: var(--sp-white); color: #e7ebee; border-color: var(--sp-line); }
[data-bs-theme="dark"] .lang-switch .dropdown-menu { background: var(--sp-white); border-color: var(--sp-line); }
[data-bs-theme="dark"] .lang-switch .dropdown-item { color: #e7ebee; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #5db4f0; --bs-btn-border-color: #2d6f9e; }
[data-bs-theme="dark"] .alert-info { background:#11212e; border-color:#1d3a4f; color:#cfe3f4; }
[data-bs-theme="dark"] code { color:#9fd0f0; }
/* Theme-Toggle Icon-Wechsel */
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display:none; }
.theme-toggle .bi-sun { display:none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display:inline-block; }

/* ---------- RTL (Arabisch) ---------- */
[dir="rtl"] body { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .navbar-brand,[dir="rtl"] .sp-eyebrow,
[dir="rtl"] .wizard-q,[dir="rtl"] .step-num,[dir="rtl"] .avatar,
[dir="rtl"] .site-footer h6 { font-family: 'Cairo', 'Manrope', sans-serif; }

[dir="rtl"] .opt { text-align: right; }
[dir="rtl"] .sp-eyebrow,
[dir="rtl"] .wizard-trust { letter-spacing: 0; }
[dir="rtl"] .navbar-nav { padding-right: 0; }
[dir="rtl"] .summary-list .sl-val { text-align: left; }
[dir="rtl"] .me-1,[dir="rtl"] .me-2 { margin-right:0 !important; }
[dir="rtl"] .bi-arrow-right::before { content: "\f12f"; }   /* zeigt nach links */
[dir="rtl"] .bi-arrow-left::before  { content: "\f138"; }   /* zeigt nach rechts */
[dir="rtl"] .hero-badges,[dir="rtl"] .wizard-trust,
[dir="rtl"] .trustbar .trust-item { direction: rtl; }
[dir="rtl"] .text-lg-start { text-align: right !important; }
/* Icons mit Text-Abstand spiegeln */
[dir="rtl"] .nav-phone i,[dir="rtl"] .btn i.me-1,[dir="rtl"] .btn i.me-2 { margin-left:.35rem; margin-right:0 !important; }