/* ============================================================
   Lumis Wechselservice — Design-System
   Brand: Navy #121F3B · Orange #E8500A · Off-White #F8F7F5
   Typo: Poppins (Headlines) · Inter (Body) · JetBrains Mono (Zahlen)
   ============================================================ */

:root{
  --navy:#121F3B;
  --navy-mid:#1A2A4A;
  --navy-light:#24365C;
  --orange:#E8500A;
  --orange-dark:#CC4508;
  --orange-soft:#FBE9DF;
  --green:#1E9E6A;
  --green-soft:#E4F3EC;
  --red:#DC2626;
  --red-soft:#FDE8E8;
  --ink:#1B2436;
  --muted:#5C6472;
  --paper:#FAF8F5;
  --off-white:#F8F7F5;
  --card:#FFFFFF;
  --line:#E7E1D8;
  --line-soft:#EFEAE2;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(18,31,59,.07);
  --shadow:0 6px 24px -6px rgba(18,31,59,.12);
  --shadow-lg:0 18px 50px -12px rgba(18,31,59,.22);
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--paper);font-size:16px;line-height:1.65;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:600}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:clamp(48px,8vw,96px) 0}
.section-alt{background:#fff}
.section-navy{background:var(--navy);color:#fff}
.section-navy h2{color:#fff}

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

/* ── Header ─────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{max-width:1380px}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);height:72px}
@media (min-width:901px) and (max-width:1150px){
  .nav-actions .nav-cta.btn{padding:10px 14px;font-size:.84rem}
  .nav-logo .logo-word{font-size:1.2rem}
  .nav-logo img{height:40px}
  .nav-links{gap:10px}
  .nav-links a{font-size:.78rem}
}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{height:46px;width:auto;border-radius:10px}
.nav-logo .logo-word{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--navy);letter-spacing:-.01em;line-height:1}
.nav-links{display:flex;gap:clamp(12px,1.6vw,24px);margin-left:4px;min-width:0}
.nav-links a{color:var(--navy);font-weight:600;font-size:clamp(.8rem,.55vw + .62rem,.92rem);white-space:nowrap}
.nav-links a:hover{color:var(--orange);text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;color:var(--navy);background:transparent;
  border:none;transition:background .2s;
}
.nav-icon:hover{background:var(--off-white);text-decoration:none}
@media (min-width:901px){
  .nav-icon{width:38px;height:38px}
  .nav-actions{gap:6px}
  .nav-actions .nav-cta{margin-left:6px}
}
/* Zwischenbereich: zu schmal für Menü + Icons + CTA → Icons weichen */
@media (min-width:901px) and (max-width:1290px){.nav-icon{display:none}}
@media (min-width:901px) and (max-width:1040px){.nav-logo .logo-word{display:none}}
.nav-icon svg{width:22px;height:22px}
.nav-cta{white-space:nowrap}
.nav-burger{display:none}

@media (max-width:900px){
  .nav{height:62px;gap:10px}
  .nav-actions{gap:4px}
  .nav-logo img{height:42px}
  .nav-logo .logo-word{font-size:1.35rem}
  .nav-links{
    display:none;position:absolute;top:62px;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 22px;border-top:1px solid var(--line-soft)}
  .nav-actions .nav-cta.btn{display:none}
  .nav-burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border:none;background:none;color:var(--navy);
  }
}
@media (max-width:400px){
  .nav{gap:6px}
  .nav-logo{gap:8px}
  .nav-logo img{height:36px}
  .nav-logo .logo-word{font-size:1.15rem}
  .nav-icon{width:38px;height:38px}
}
/* Sehr schmale Geräte (≤360px, z. B. iPhone SE): Kontakt-/Telefon-Icons weichen,
   sonst schiebt der Header die Seite in den horizontalen Überlauf (345px bei 320er-Viewport).
   Beide Wege bleiben über Menü bzw. /kontakt erreichbar. */
@media (max-width:360px){
  .nav-icon{display:none}
  .nav{gap:4px}
}

/* Account-Icon + Dropdown ("Mein Lumis") */
.account-wrap{position:relative}
.account-panel{
  display:none;position:absolute;top:52px;right:0;min-width:270px;
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);
  padding:18px;z-index:200;
}
.account-panel.open{display:block}
.account-panel a{
  display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;font-size:.92rem;
  padding:9px 0;border-top:1px solid var(--line-soft);
}
.account-panel a:first-of-type{border-top:none}
.account-panel a svg{width:15px;height:15px;color:var(--orange);flex-shrink:0}
.account-panel a:hover{color:var(--orange);text-decoration:none}
.account-panel a.logout{color:var(--red)}
.account-panel a.logout svg{color:var(--red)}
.account-panel input{padding:10px 12px;font-size:.92rem}
@media (max-width:400px){.account-panel{right:-70px;min-width:250px}}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:12px;font-weight:700;font-size:1rem;
  border:none;transition:transform .15s,box-shadow .2s,background .2s;
  text-decoration:none !important;min-height:48px;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px -4px rgba(232,80,10,.45)}
.btn-primary:hover{background:var(--orange-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-light)}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--line);box-shadow:none}
.btn-outline:hover{border-color:var(--navy)}
.btn-lg{padding:17px 34px;font-size:1.08rem;border-radius:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .spinner{
  width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(232,80,10,.16), transparent 60%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-light) 100%);
  color:#fff;position:relative;
  /* overflow sichtbar: das Funnel-Widget ragt wie bei remind.me in die nächste Sektion */
}
/* Der Wrapper trägt den kompletten Versatz — Figur und Karte sitzen darin fix
   zueinander, dadurch liegt die Figur auf JEDER Viewport-Breite exakt auf. */
.hero .widget-pos{position:relative;z-index:2;transform:translateY(150px)}
.hero .funnel-card{position:relative;z-index:2}
.after-hero{padding-top:195px !important}
/* Figur steht HINTER dem Widget (z-index unter der Karte): sichtbar ist nur,
   was über die Oberkante hinausragt — Kopf, Schultern, aufgelegte Arme.
   Asset: 640×627, Kartenkante im Asset bei y=463 → Offset = -(463/640·Breite)+4 */
.funnel-figure{
  position:absolute;z-index:1;pointer-events:none;display:block;
  width:260px;left:50%;margin-left:-130px;top:-184px;
  filter:drop-shadow(0 6px 14px rgba(18,31,59,.35));
}
/* Hand + Unterarm unterhalb der Kante liegen ÜBER der Karte (deckungsgleich) */
.funnel-hand{z-index:3;filter:drop-shadow(3px 6px 6px rgba(18,31,59,.28))}
#rechner .funnel-card{padding-top:52px}
@media (max-width:980px){
  .funnel-figure{width:180px;margin-left:-90px;top:-126px}
}
.hero-bg{
  position:absolute;inset:0;
  background:url('/assets/img/hero-plate.jpg?v=4') center 30%/cover no-repeat;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(18,31,59,.96) 0%, rgba(18,31,59,.88) 34%,
    rgba(18,31,59,.5) 50%, rgba(18,31,59,.12) 64%,
    rgba(18,31,59,0) 78%, rgba(18,31,59,.1) 100%);
}
.hero .wrap{position:relative;z-index:1}
@media (max-width:980px){
  /* Mobil: klarer Navy-Verlauf statt gezoomtem Foto — Text bleibt gut lesbar,
     die Figur auf dem Widget ist der Blickfang und rückt weiter nach oben. */
  .hero-bg{display:none}
  .hero h1{font-size:1.72rem}
  .hero .hero-founder{margin-top:16px} /* Trust-Badge bleibt auch mobil sichtbar (ersetzt die alte Gründer-Zeile) */
  .hero-usps{margin:18px 0 18px}
  .hero-usps li{font-size:.98rem}
  .hero-trust{margin-top:4px;gap:14px}
  .hero-grid{gap:0;padding-top:30px}
  .hero .widget-pos{transform:translateY(36px);margin-top:34px}
  .after-hero{padding-top:80px !important}
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  padding:clamp(44px,7vw,90px) 0 clamp(28px,4vw,48px);
}
.hero h1{color:#fff}
.hero-usps{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:12px}
.hero-usps li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.04rem}
.check-badge{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--green);display:inline-flex;align-items:center;justify-content:center;
}
.check-badge svg{width:15px;height:15px;color:#fff}
.hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.hero-trust .stars{color:#F5B301;letter-spacing:2px;font-size:1.05rem}
.hero-trust small{color:rgba(255,255,255,.75)}
.hero-founder{
  display:flex;align-items:center;gap:14px;margin-top:34px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.hero-founder img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}
.hero-founder strong{display:block;font-size:.98rem}
.hero-founder span{font-size:.85rem;color:var(--muted)}
.hero .hero-founder span{color:rgba(255,255,255,.7)}

/* ── Funnel-Widget (Hero-Card) ──────────────────────────── */
.funnel-card{
  background:#fff;color:var(--ink);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:26px 24px 24px;
}
.progress-track{display:flex;gap:6px;margin-bottom:22px}
.progress-track span{flex:1;height:6px;border-radius:3px;background:var(--orange-soft);transition:background .3s}
.progress-track span.done{background:var(--orange)}
.funnel-q{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.06rem;margin:18px 0 12px}
.funnel-q:first-of-type{margin-top:0}
.tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile-row.four{grid-template-columns:repeat(4,1fr)}
.tile-row.two{grid-template-columns:repeat(2,1fr)}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px 12px;border:2px solid var(--line);border-radius:14px;background:#fff;
  font-weight:600;font-size:.86rem;color:var(--navy);transition:border-color .15s,background .15s,transform .12s;
  min-height:84px;justify-content:center;text-align:center;line-height:1.25;
}
.tile:hover{border-color:#c9c1b4}
.tile:active{transform:scale(.96)}
.tile.selected{border-color:var(--orange);background:var(--orange-soft)}
.tile svg{width:30px;height:30px;color:var(--orange)}
.funnel-note{text-align:center;font-weight:700;font-size:.92rem;color:var(--navy);margin:12px 0 0}

/* ── Formular-Elemente ─────────────────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px;color:var(--navy)}
.field .req{color:var(--red)}
.input,.select{
  width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);transition:border-color .15s;min-height:50px;
}
.input:focus,.select:focus{outline:none;border-color:var(--orange)}
.input.error,.select.error{border-color:var(--red)}
.field-error{color:var(--red);font-size:.86rem;margin-top:6px;display:none}
.field-error.show{display:block}
.field-hint{color:var(--muted);font-size:.86rem;margin-top:6px}
.input-suffix{position:relative}
.input-suffix .input{padding-right:64px}
.input-suffix .suffix{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-weight:700;color:var(--muted);pointer-events:none;
}
.radio-row{display:grid;gap:10px}
.radio-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--line);
  border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;font-weight:600;
}
.radio-card:hover{border-color:#c9c1b4}
.radio-card input{accent-color:var(--orange);width:20px;height:20px;margin:0}
.radio-card.selected{border-color:var(--orange);background:var(--orange-soft)}
.checkbox-line{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;cursor:pointer}
.checkbox-line input{accent-color:var(--orange);width:19px;height:19px;margin-top:2px;flex-shrink:0}
/* "Ohne Bonus"-Karte: ganze Fläche als Tap-Ziel, grüner Haken bei aktiv */
.check-card{position:relative}
.check-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.check-card .check-box{
  width:24px;height:24px;border:2px solid var(--line);border-radius:7px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:transparent;background:#fff;
  transition:background .15s,border-color .15s,color .15s;
}
.check-card:hover .check-box{border-color:#c9c1b4}
.check-card.selected{border-color:var(--orange);background:var(--orange-soft)}
.check-card.selected .check-box{background:var(--green);border-color:var(--green);color:#fff}

/* ── Karten & Sektionen ────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px}
.card h3{margin-top:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.grid-2 > *,.grid-3 > *{min-width:0}

.step-card{position:relative;padding-top:34px}
.step-num{
  position:absolute;top:-24px;left:26px;width:48px;height:48px;border-radius:14px;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:1.25rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -6px rgba(232,80,10,.5);
}
.step-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.step-card ul li{display:flex;gap:9px;align-items:flex-start;font-size:.94rem;color:var(--muted)}
.step-card ul li svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:3px}

/* Stat-Leiste */
.stat-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--navy);
  border-radius:var(--radius);overflow:hidden;
}
.stat-bar > div{padding:28px 20px;text-align:center;color:#fff}
.stat-bar > div + div{border-left:1px solid rgba(255,255,255,.12)}
.stat-bar .num{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:#fff;display:block}
.stat-bar small{color:rgba(255,255,255,.72);font-size:.88rem}

/* Vergleichstabelle */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.compare-table th,.compare-table td{padding:16px 14px;text-align:center;font-size:.94rem;border-top:1px solid var(--line-soft)}
.compare-table thead th{border-top:none;font-family:var(--font-head);font-size:.9rem}
.compare-table td:first-child,.compare-table th:first-child{text-align:left;font-weight:600;max-width:340px}
.compare-table .col-lumis{background:var(--orange-soft)}
.compare-table thead .col-lumis{color:var(--orange);font-weight:800}
.icon-yes{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--green);align-items:center;justify-content:center}
.icon-yes svg{width:15px;height:15px;color:#fff}
.icon-yes-plain{color:var(--green)}
.icon-no{color:var(--red);font-weight:800}
.icon-dash{color:var(--muted)}

/* Testimonials */
.quote-card{display:flex;flex-direction:column;gap:14px}
.quote-card blockquote{
  margin:0;font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--navy);line-height:1.35;
}
.quote-card .who{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem}
.quote-avatar{
  width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;
  font-family:var(--font-head);
}
.quote-euro{color:var(--green);font-family:var(--font-mono)}

/* Infografik Preisentwicklung */
.chart-panel{background:#fff;border-radius:var(--radius);border:1px solid var(--line-soft);padding:22px;box-shadow:var(--shadow-sm)}
.chart-panel svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.86rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:18px;height:4px;border-radius:2px;display:inline-block}

/* Preisprognose (remind.me-Layout, Lumis-Brand): Textkarte links, getöntes Chart-Panel rechts */
.price-forecast{display:grid;grid-template-columns:270px 1fr;gap:0;margin-top:18px}
.pf-text{padding:24px 26px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line-soft)}
.pf-text h4{font-size:1.05rem;margin:0 0 10px;color:var(--navy)}
.pf-text p{font-size:.9rem;color:var(--muted);margin:0 0 10px;line-height:1.55}
.pf-text p:last-child{margin-bottom:0}
.pf-chart{background:linear-gradient(180deg,#FAFAF8 0%,#F3F1EC 100%);padding:24px 26px}
.pf-chart svg{width:100%;height:auto;display:block;overflow:visible}
.pf-chart .legend{color:var(--navy);font-weight:600}
@media (max-width:760px){
  .price-forecast{grid-template-columns:1fr}
  .pf-text{border-right:none;border-bottom:1px solid var(--line-soft)}
}

/* FAQ Akkordeon */
.accordion{display:grid;gap:12px}
.accordion details{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.accordion summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 20px;font-weight:600;color:var(--navy);cursor:pointer;font-size:1rem;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .chev{transition:transform .25s;flex-shrink:0;color:var(--orange)}
.accordion details[open] summary .chev{transform:rotate(180deg)}
.accordion .acc-body{padding:0 20px 18px;color:var(--muted);font-size:.96rem}

/* ── Funnel-Seite (rechner.php) ────────────────────────── */
.funnel-page{max-width:560px;margin:0 auto;padding:clamp(28px,5vw,56px) 20px 80px}
.funnel-page .funnel-card{padding:30px 28px}
@media (max-width:520px){.funnel-page .funnel-card{padding:24px 18px}}
.funnel-nav{display:flex;gap:12px;margin-top:26px}
.funnel-nav .btn{flex:1}
.success-panel{
  border:2px solid var(--green);border-radius:16px;padding:26px;text-align:center;background:var(--green-soft);
}
.success-panel .big-icon{
  width:60px;height:60px;border-radius:50%;background:var(--green);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.success-panel .big-icon svg{width:30px;height:30px;color:#fff}
.spam-hint{
  display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 18px;
  border:2px solid var(--orange);border-radius:12px;background:var(--orange-soft);
  font-size:.92rem;color:var(--navy);
}
.spam-hint svg{flex:none;width:20px;height:20px;color:var(--orange)}
@media (max-width:520px){.spam-hint{padding:12px 14px}}

/* ── Angebotsseite ─────────────────────────────────────── */
.offer-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:stretch}
.offer-box{
  background:linear-gradient(150deg,var(--orange-soft),#fff 70%);
  border:2px solid var(--orange);border-radius:var(--radius);padding:26px;
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
}
.offer-box .saving-wrap{display:grid;gap:6px;justify-items:center;align-content:center;text-align:center}
.offer-box .saving-label{font-size:.88rem;color:var(--muted);max-width:220px}
.offer-box .saving-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(2.1rem,5vw,3.2rem);color:var(--green);line-height:1.05;white-space:nowrap}
.offer-kv{display:grid;gap:6px;font-size:.98rem}
.offer-kv b{color:var(--navy)}
.market-bar{position:relative;height:14px;border-radius:7px;margin:38px 0 10px;
  background:linear-gradient(90deg,var(--green) 0%,#F5B301 55%,var(--red) 100%)}
.market-bar .marker{
  position:absolute;top:-34px;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:.78rem;
  padding:4px 8px;border-radius:7px;white-space:nowrap;
}
.market-bar .marker::after{
  content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--navy);
}
.market-bar .marker.best{background:var(--green)}
.market-bar .marker.best::after{border-top-color:var(--green)}
.market-scale{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.detail-table{width:100%;border-collapse:collapse;table-layout:fixed}
.detail-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.detail-table td:first-child{width:56%}
.detail-table td:last-child{width:44%;text-align:right;font-family:var(--font-mono);font-weight:600;color:var(--navy);white-space:nowrap}
.detail-table tr.hl td{background:var(--green-soft);font-weight:700}

@media (max-width:520px){
  .detail-table td{padding:10px 6px;font-size:.8rem}
  .detail-table td:first-child{width:50%}
  .detail-table td:last-child{width:50%;font-size:.8rem}
}
.status-list{display:grid;gap:14px}
.status-item{display:flex;gap:14px;align-items:flex-start}
.status-item .dot{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;border:2.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-top:2px;color:#fff;
}
.status-item.done .dot{background:var(--green);border-color:var(--green)}
.status-item .dot svg{width:16px;height:16px}
.status-item strong{display:block;color:var(--navy)}
.status-item p{margin:4px 0 0;color:var(--muted);font-size:.93rem}

/* ── Abschluss-Wizard ──────────────────────────────────── */
.wizard-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.wizard-side{position:sticky;top:92px;display:grid;gap:18px}
.stepper{display:grid;gap:2px}
.stepper .step{
  display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;
  color:var(--muted);font-size:.92rem;font-weight:600;
}
.stepper .step .s-num{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;background:#fff;
  font-family:var(--font-mono);
}
.stepper .step.active{color:var(--navy);background:var(--orange-soft)}
.stepper .step.active .s-num{border-color:var(--orange);color:var(--orange)}
.stepper .step.done .s-num{background:var(--green);border-color:var(--green);color:#fff}
.help-panel{font-size:.9rem}
.help-panel h4{margin:0 0 8px;font-size:.95rem}
.help-panel p{color:var(--muted);margin:0 0 10px}
.wizard-summary{font-size:.92rem}
.wizard-summary .kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.wizard-summary .kv:last-child{border-bottom:none}
.sig-pad{
  border:2px dashed var(--line);border-radius:14px;background:#fff;
  width:100%;height:180px;touch-action:none;cursor:crosshair;
}
.sig-actions{display:flex;gap:10px;margin-top:10px}
.review-table{width:100%;border-collapse:collapse;font-size:.95rem}
.review-table td{padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.review-table td:first-child{color:var(--muted);width:44%}
.review-table td:last-child{font-weight:600;color:var(--navy)}
@media (max-width:900px){
  .wizard-layout{grid-template-columns:1fr}
  .wizard-side{position:static;order:2}
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--navy);color:rgba(255,255,255,.8);margin-top:0}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;
  padding:clamp(44px,6vw,70px) 0 36px;
}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.footer-brand img{height:50px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.footer-brand .logo-word{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:-.01em;line-height:1}
.footer-grid h4{color:#fff;font-size:.95rem;margin:0 0 14px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-grid a{color:rgba(255,255,255,.75);font-size:.93rem}
.footer-grid a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.85rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(255,255,255,.55);
}

/* ── Utility & Motion ──────────────────────────────────── */
.center{text-align:center}
.mt-0{margin-top:0}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}.mt-6{margin-top:52px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
/* Reveal: ohne JavaScript ist alles sichtbar. Die Klasse .js-reveal setzt das
   Skript erst, nachdem es die Bloecke unterhalb des Fensters markiert hat --
   so blitzt oben nichts auf und ein Skriptfehler kostet keinen Text. */
.reveal{transition:opacity .55s ease-out,transform .55s ease-out}
.js-reveal .reveal.warten{opacity:0;transform:translateY(22px)}
.reveal.in,.js-reveal .reveal.warten.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .grid-3{grid-template-columns:1fr;gap:34px}
  .grid-2{grid-template-columns:1fr;gap:28px}
  .offer-head{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .step-card{margin-top:24px}
}
@media (max-width:560px){
  .tile-row.four{grid-template-columns:repeat(2,1fr)}
  .stat-bar{grid-template-columns:1fr}
  .stat-bar > div + div{border-left:none;border-top:1px solid rgba(255,255,255,.12)}
  .offer-box{grid-template-columns:1fr}
  .compare-table th,.compare-table td{padding:12px 8px;font-size:.85rem}
  .footer-grid{grid-template-columns:1fr}
  .funnel-nav{flex-direction:column-reverse}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .compare-table{min-width:640px}

.nowrap{white-space:nowrap}

/* ── Preis-Chart: Story-Animation (startet, wenn .chart-panel per Reveal .in bekommt) ── */
.chart-panel .pc-grey,
.chart-panel .pc-red,
.chart-panel .pc-green { clip-path: inset(-5% 100% -5% 0); }
.chart-panel .pc-check { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.chart-panel .pc-vorteil { opacity: 0; }
.chart-panel .pc-jitter { transform-box: fill-box; transform-origin: center; }

.chart-panel.in .pc-grey  { animation: pcDraw 1s ease-out .15s forwards; }
.chart-panel.in .pc-red   { animation: pcDraw 1.2s ease-out .9s forwards; }
.chart-panel.in .pc-green { animation: pcDraw 1.1s cubic-bezier(.2,.7,.2,1) 1.9s forwards; }
.chart-panel.in .pc-check1 { animation: pcPop .5s cubic-bezier(.34,1.56,.64,1) 2.4s forwards, pcPulse 3.2s ease-in-out 3.6s infinite; }
.chart-panel.in .pc-check2 { animation: pcPop .5s cubic-bezier(.34,1.56,.64,1) 2.8s forwards, pcPulse 3.2s ease-in-out 4s infinite; }
.chart-panel.in .pc-vorteil { animation: pcFade .6s ease-out 3.3s forwards; }
.chart-panel.in .pc-jitter { animation: pcJitter 4.5s ease-in-out 3.6s infinite; }

@keyframes pcDraw   { to { clip-path: inset(-5% -5% -5% 0); } }
@keyframes pcPop    { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes pcFade   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pcPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
@keyframes pcJitter { 0%, 100% { transform: translateY(0); } 22% { transform: translateY(-2px); } 45% { transform: translateY(1.4px); } 70% { transform: translateY(-1px); } 85% { transform: translateY(1.8px); } }

@media (prefers-reduced-motion: reduce) {
  .chart-panel .pc-grey, .chart-panel .pc-red, .chart-panel .pc-green { clip-path: none; animation: none !important; }
  .chart-panel .pc-check, .chart-panel .pc-vorteil { opacity: 1; transform: none; animation: none !important; }
  .chart-panel .pc-jitter { animation: none !important; }
}

/* ── Ratgeber-Vorschau auf der Startseite (14.09.2026) ────────────────────
   Nur so viel, dass die drei Karten hier sitzen. Im Ratgeber selbst gilt
   blog.css, die spaeter geladen wird und diese Regeln ueberschreibt. */
.blog-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.blog-card-img{aspect-ratio:16/9;background:var(--orange-soft);overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{display:flex;flex-direction:column;gap:9px;padding:18px;flex:1}
.blog-card-body h3{font-size:1.02rem;line-height:1.35;margin:0;color:var(--ink)}
.blog-tag{align-self:flex-start;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--orange-dark);background:var(--orange-soft);border-radius:999px;padding:4px 10px}
.blog-date{font-size:.82rem;color:var(--muted)}
.blog-more{margin-top:auto;font-size:.88rem;font-weight:700;color:var(--orange)}
.blog-card[hidden]{display:none!important}

/* ── Seitlicher Überlauf am Handy (15.09.2026) ────────────────────────────
   Gemeldet: Artikel ließen sich seitlich verschieben, erst nach Rein- und
   Rauszoomen stand die Seite. Ursache sind lange deutsche Komposita
   ("Nebenkostenabrechnung", "Betriebskostenverordnung"), die weder umbrechen
   noch getrennt werden: Sie machen Überschriften, Brotkrume und Fließtext
   breiter als den Bildschirm. body{overflow-x:clip} schnitt das nur ab --
   scrollbar blieb die Seite trotzdem.
   Gemessen bei 390, 360 und 320 px auf allen Seiten.
   ──────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, p, li, dt, dd, figcaption, blockquote, .eyebrow, .breadcrumb, .breadcrumb * {
  overflow-wrap: break-word;
}
/* Keine automatische Silbentrennung in Ueberschriften (Manuel, 27.09.2026 -- ein fuer alle Mal):
   ein zu langes Wort rutscht komplett in die naechste Zeile statt "wirk-/lich". */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; }
img, video, svg, iframe, table { max-width: 100%; }

/* ── App-Leiste am Handy (15.09.2026) ─────────────────────────────────────
   Oben bleibt nur Logo und Burger, die Symbole wandern nach unten in eine
   mitlaufende Leiste. Vorher war der Kopf mit Logo, vier Symbolen und dem
   orangen Knopf so voll, dass er seitlich überlief.
   Ab 768 px ist die Leiste weg und der Kopf zeigt wieder alles.
   ──────────────────────────────────────────────────────────────────────── */
.app-leiste { display: none; }

@media (max-width: 767px) {
  /* Kopf entschlacken: Symbole, Konto und der CTA leben unten weiter */
  .site-header .nav-actions .nav-icon,
  .site-header .nav-actions .account-wrap,
  .site-header .nav-actions .nav-cta { display: none; }

  .app-leiste {
    display: flex; position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 16px rgba(18,31,59,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .app-leiste a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: 12px;
    color: var(--ink); text-decoration: none; min-width: 0;
  }
  .app-leiste a:active { background: var(--off-white); }
  .app-leiste .app-sym { display: flex; line-height: 0; }
  .app-leiste .app-sym svg { width: 22px; height: 22px; }
  .app-leiste .app-text {
    font-size: .68rem; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .app-leiste a[aria-current="page"] { color: var(--orange); }
  .app-leiste .app-haupt { color: var(--orange); }
  .app-leiste .app-haupt .app-sym {
    background: var(--orange); color: #fff; border-radius: 50%;
    width: 34px; height: 34px; align-items: center; justify-content: center;
    margin-top: -12px; box-shadow: 0 4px 12px rgba(232,80,10,.35);
  }
  .app-leiste .app-haupt .app-sym svg { width: 19px; height: 19px; }

  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Cookie-Banner und ähnliche fixe Elemente über die Leiste heben */
  .lumis-cc-banner, .cookie-banner { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
}