:root{
  --navy:#0a3560; --blue:#0b66c3; --text:#0b1f3a; --muted:#5d6a78;
  --line:#dce3ea; --card:#ffffff; --soft:#f7f9fb; --green:#0a8a2a;
  --amber:#9a6700;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#fff;color:var(--text)}
.hero{background:linear-gradient(112deg,#062a4f 0%,#0a3f74 28%,#1f6fa8 50%,#8fa3b5 72%,#dfe5ea 100%);color:#fff;padding:52px 0 50px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 0%,transparent 48%,rgba(255,255,255,.16) 62%,rgba(255,255,255,.04) 78%,transparent 100%);pointer-events:none}
.hero-inner{max-width:1180px;margin:auto;padding:0 28px;position:relative;z-index:1}
.hero h1{margin:0;font-size:60px;line-height:1;font-weight:760;letter-spacing:-1.8px}
.hero h1 .e{color:#1786ee}.hero .claim{font-size:30px;margin-top:20px}.hero .traits{font-size:17px;margin-top:16px;opacity:.95}
.container{max-width:1180px;margin:auto;padding:0 28px 40px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border-bottom:1px solid #e6eaee;padding:28px 6px 0}
.step{padding:0 0 22px;position:relative;color:#697584;background:none;border:0;text-align:left;font:inherit;cursor:pointer;width:100%}
.step.active{color:#0b4f99}.step.active:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:#0b69d1}
.step-top{display:flex;align-items:center;gap:12px;font-weight:700}.step-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eceff2;color:#56616d;font-size:17px}
.step.active .step-num{background:#0b68bf;color:#fff}.step-sub{font-size:13px;margin:6px 0 0 50px;color:#6c7885}
.cards{padding-top:26px;display:flex;flex-direction:column;gap:18px}
.section-card{border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(12,37,60,.045);padding:28px;scroll-margin-top:18px}
.section-grid{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start}
.section-title{display:flex;gap:18px;align-items:flex-start}.section-number{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0a67bd;color:white;font-weight:700;font-size:18px}
.section-title h2{font-size:20px;margin:3px 0 0}.section-title p{margin:6px 0 0;color:#506176;font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}.span2{grid-column:span 2}
.field label{display:block;font-size:13px;font-weight:600;color:#111827;margin-bottom:7px}
.field input,.field select{width:100%;border:1px solid #ccd6df;background:white;border-radius:7px;padding:11px 12px;font-size:15px;color:#17233a}
.field input[readonly]{background:#f7f9fb;color:#364152}
.help{font-size:11px;line-height:1.4;color:#68778a;margin-top:5px}
.auto-box{grid-column:1/-1;border:1px solid #cfe0f0;background:#f5f9fd;border-radius:10px;padding:14px 16px}
.auto-title{font-weight:700;color:#0b4f99;font-size:14px;margin-bottom:8px}
.auto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric{background:#fff;border:1px solid #dfe6ed;border-radius:8px;padding:12px}.metric b{display:block;font-size:18px;margin-top:4px}.metric small{color:#657487}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#eef6ff;color:#0b5aa6;border-radius:999px;padding:6px 9px}
.leasing-box{grid-column:1/-1;border:1px dashed #c8d3df;border-radius:10px;padding:14px 16px;background:#fbfcfd}
.leasing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.result-wrap{display:grid;grid-template-columns:260px 1fr;gap:44px}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{border-radius:8px;padding:18px 16px;text-align:center;background:linear-gradient(145deg,#e8f2fb,#f7f9fb)}.kpi.alt{background:linear-gradient(145deg,#f1f3f6,#fafbfc)}
.kpi.diff.good{background:#edf8ef}.kpi.diff.bad{background:#fbecee}.kpi .label{font-size:14px;color:#0953a4;font-weight:600}.kpi .value{font-size:30px;font-weight:650;margin-top:14px}.kpi small{display:block;margin-top:5px;color:#334155;font-size:12px}
.reco{margin-top:18px;border:1px solid #e6e9ed;border-radius:8px;background:#fbfcfd;padding:18px 20px;display:flex;gap:16px;align-items:flex-start}.reco-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0a67bd;color:white;font-size:24px}
.reco h3{margin:0 0 5px;font-size:17px}.reco p{margin:0;color:#213047;line-height:1.5;font-size:14px}
.badge{display:inline-block;padding:7px 10px;border-radius:999px;font-size:13px;font-weight:700}.ok{background:#e8f5eb;color:#267443}.warn{background:#fff3df;color:#8a5b16}.bad{background:#f9e7e9;color:#8c2f39}
.actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}button{border:0;border-radius:8px;padding:12px 18px;background:#0a67bd;color:white;font-weight:700;font-size:14px;cursor:pointer}button.secondary{background:#edf2f6;color:#213047}
.costs{margin-top:18px;border-top:1px solid #e5e9ed;padding-top:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:9px 8px;border-bottom:1px solid #e6eaee;text-align:right}th:first-child,td:first-child{text-align:left}
.note{margin-top:20px;border:1px solid #cfe0f0;background:#f4f9fd;color:#42566e;border-radius:8px;padding:14px 18px;font-size:13px;line-height:1.5}
.procurement{grid-column:1/-1;border:1px solid #dce3ea;border-radius:10px;padding:15px 16px;background:#fbfcfd}
.procurement-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.procurement-options label{border:1px solid #ccd6df;border-radius:8px;padding:10px 13px;background:#fff;cursor:pointer;font-size:14px;font-weight:650}
.procurement-options input{margin-right:7px}
.hidden{display:none!important}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;margin-top:10px}
.checkbox-grid label{font-size:13px;color:#334155}
.location-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.charge-price-box{grid-column:1/-1;border:1px solid #d8e5ef;background:#f8fbfe;border-radius:10px;padding:14px 16px}
.charge-mix{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:10px}
.api-status{font-size:12px;color:#5e6f82;margin-top:8px}
@media(max-width:560px){.charge-mix{grid-template-columns:1fr}}
.site-footer{margin-top:34px;border-top:1px solid #dfe5eb;padding:22px 0 4px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#64748b;font-size:13px}
.site-footer a{color:#315f8c;text-decoration:none}.site-footer a:hover{text-decoration:underline}
@media(max-width:560px){.location-row{grid-template-columns:1fr}.checkbox-grid{grid-template-columns:1fr}}



.result-matrix{margin-top:18px;background:transparent}
.result-matrix-header{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:14px
}
.result-matrix-header>div{
  padding:16px 18px;
  border-radius:14px;
  background:linear-gradient(145deg,#f7fafc,#ffffff);
  border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(16,45,75,.06)
}
.result-matrix-header>div:nth-child(1){
  background:linear-gradient(145deg,#0a3d6a,#63819a);
  color:#fff;
  border-color:transparent
}
.result-matrix-header>div:nth-child(2){
  background:linear-gradient(145deg,#eef5fb,#ffffff)
}
.result-matrix-header>div:nth-child(3){
  background:linear-gradient(145deg,#f1f4f7,#ffffff)
}
.vehicle-col-title{
  font-size:11px;
  opacity:.72;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:750
}
.vehicle-col-name{
  font-size:17px;
  margin-top:5px;
  line-height:1.25;
  font-weight:850
}
.result-matrix-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:14px
}
.result-matrix-row>div{
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 12px rgba(16,45,75,.045)
}
.result-matrix-row .metric-title{
  font-size:12px;
  color:var(--muted);
  font-weight:750;
  line-height:1.35
}
.result-matrix-row .money{
  font-size:24px;
  font-weight:900;
  margin-top:7px
}
.result-matrix-row.highlight>div{
  background:linear-gradient(145deg,#eef5fb,#ffffff)
}
.result-matrix-row.highlight .money{
  font-size:26px
}
.diff-good{
  color:#08752b!important;
  background:linear-gradient(145deg,#eaf7ee,#ffffff)!important;
  border-color:#cfe9d6!important
}
.diff-bad{
  color:#a22c3b!important;
  background:linear-gradient(145deg,#faecee,#ffffff)!important;
  border-color:#efcfd4!important
}
.diff-neutral{
  color:#526170!important;
  background:linear-gradient(145deg,#f2f5f7,#ffffff)!important
}
@media(max-width:700px){
  .result-matrix-header,.result-matrix-row{grid-template-columns:1fr}
}


/* v0.9.19 – einheitliche Wertehöhe in den Ergebnis-Karten */
.result-matrix-row>div{
  display:flex;
  flex-direction:column;
  min-height:112px;
}
.result-matrix-row .metric-title{
  min-height:38px;
  display:flex;
  align-items:flex-start;
}
.result-matrix-row .money{
  margin-top:auto;
  width:100%;
  text-align:center;
  justify-content:center;
  align-items:center;
  line-height:1.15;
}

@media(max-width:900px){.hero h1{font-size:44px}.steps{grid-template-columns:1fr 1fr}.section-grid,.result-wrap{grid-template-columns:1fr;gap:18px}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.kpis,.auto-grid,.leasing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.container,.hero-inner{padding-left:16px;padding-right:16px}.hero{padding:36px 0}.hero h1{font-size:38px}.hero .claim{font-size:21px}.steps{display:flex;gap:10px;overflow-x:auto;padding:18px 0 8px}.step{flex:0 0 auto;min-width:150px;padding:10px 12px 14px;border:1px solid #dfe5eb;border-radius:10px;background:#fff}.step.active{background:#f4f9fd}.step-sub{margin-left:38px;font-size:11px}.section-card{padding:20px 16px}.auto-grid,.leasing-grid{grid-template-columns:1fr}}

@media(max-width:700px){
  .result-matrix-row>div{min-height:106px}
  .result-matrix-row .metric-title{min-height:36px}
}


/* v1.0.0 – Desktop-Ergebnisansicht und geführter Mobile-Wizard */
.view-hidden{display:none!important}
.desktop-analyze-wrap{display:flex;justify-content:center;margin:28px 0 8px}
.desktop-analyze-btn{min-width:330px;padding:17px 30px;border-radius:13px;font-size:18px;box-shadow:0 8px 24px rgba(10,103,189,.18)}
.result-view-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 14px}
.result-view-head h2{margin:2px 0 0;font-size:28px}
.result-view-head .secondary{background:#edf2f6;color:#213047}
.mobile-wizard-top,.mobile-wizard-nav{display:none}
.wizard-hidden{display:none!important}

@media(max-width:700px){
  .steps{display:none!important}
  .desktop-analyze-wrap{display:none}
  .mobile-wizard-top{display:block;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .mobile-wizard-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:7px}
  .mobile-wizard-track{height:7px;background:#e9eef2;border-radius:999px;overflow:hidden}
  .mobile-wizard-fill{height:100%;background:#0a67bd;width:0%;transition:width .2s ease}
  .mobile-wizard-title{font-size:22px;font-weight:850;margin:16px 0 4px}
  .mobile-wizard-sub{font-size:13px;color:var(--muted);margin-bottom:14px}
  .mobile-wizard-nav{display:flex;position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));margin:18px -16px 0;gap:10px}
  .mobile-wizard-nav button{flex:1}
  .mobile-wizard-nav .wizard-prev{background:#edf2f6;color:#213047}
  #inputView .section-card{border:0;box-shadow:none;padding:0;margin:0}
  #inputView .section-grid{display:block}
  #inputView .section-title{display:none}
  #inputView .form-grid{grid-template-columns:1fr;gap:14px}
  #inputView .auto-grid,#inputView .leasing-grid,#inputView .charge-mix{grid-template-columns:1fr}
  #inputView .procurement-options{display:grid;grid-template-columns:1fr}
  .result-view-head{align-items:flex-start;flex-direction:column;margin-top:12px}
}


/* v1.0.1 – stärkere Ergebnis-Hierarchie */
.result-hero{
  margin:18px 0 20px;
  padding:26px 24px;
  border-radius:18px;
  background:linear-gradient(120deg,#08345d 0%,#0d5f9e 48%,#d7e0e7 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 10px 28px rgba(7,48,85,.16)
}
.result-hero-eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.82;
  font-weight:800
}
.result-hero-label{
  margin-top:6px;
  font-size:15px;
  font-weight:750
}
.result-hero-value{
  margin-top:8px;
  font-size:42px;
  line-height:1;
  font-weight:950
}
.result-hero-sub{
  margin-top:10px;
  font-size:14px;
  line-height:1.45;
  opacity:.94
}
.reco-premium{
  border:1px solid #d5e2ec;
  background:linear-gradient(145deg,#f5f9fc,#fff);
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 5px 16px rgba(16,45,75,.055)
}
.reco-premium .reco-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#5f7891;
  font-weight:800;
  margin-bottom:3px
}
.reco-premium h3{margin:0 0 5px}
.reco-premium p{font-size:15px;line-height:1.5;margin:0}
.fit-explanation{
  margin-top:10px;
  padding:13px 15px;
  border-radius:12px;
  background:#f5f8fa;
  border:1px solid #dbe4eb;
  color:#33475b;
  font-size:14px;
  line-height:1.55
}
@media(max-width:700px){
  .result-hero{padding:22px 16px}
  .result-hero-value{font-size:34px}
  .fit-explanation{font-size:14px}
}


/* v1.0.5 – klare Ergebnis-Hierarchie und Farblogik */
.result-hero{
  background:linear-gradient(120deg,#0a3157 0%,#0d5f9e 52%,#dbe3e9 100%);
  text-align:left;
}
.result-hero-label{
  font-size:13px;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
  opacity:.92;
}
.result-hero-value{font-size:48px;margin-top:6px}
.result-hero-sub{font-size:16px;max-width:760px}
.result-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px
}
.result-summary-card{
  padding:17px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#173047;
  box-shadow:0 4px 14px rgba(9,42,72,.10)
}
.result-summary-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:#60788e
}
.result-summary-title{
  margin-top:4px;
  font-size:18px;
  line-height:1.25;
  font-weight:900
}
.result-summary-text{
  margin-top:6px;
  font-size:14px;
  line-height:1.5;
  color:#3d5164
}
.recommendation-card{
  border:1px solid rgba(60,117,86,.18);
  background:linear-gradient(145deg,#f3f8f4,#ffffff)
}
.fit-card{
  border:1px solid rgba(30,80,125,.15);
  background:linear-gradient(145deg,#f3f7fb,#ffffff)
}

/* Result columns */
.result-matrix-header>div:nth-child(1){
  background:linear-gradient(145deg,#0a3d6a,#4f7898)!important;
  color:#fff!important
}
.result-matrix-header>div:nth-child(2){
  background:linear-gradient(145deg,#e9f3ec,#ffffff)!important;
  color:#234735!important;
  border-color:#d6e7da!important
}
.result-matrix-header>div:nth-child(3){
  background:linear-gradient(145deg,#eef1f4,#ffffff)!important;
  color:#2f3d4b!important;
  border-color:#d8dfe5!important
}
.result-matrix-row>div:nth-child(1){
  border-left:4px solid #2d6d9e
}
.result-matrix-row>div:nth-child(2){
  border-left:4px solid #6c9a79
}
.result-matrix-row>div:nth-child(3){
  border-left:4px solid #6b7783
}
@media(max-width:700px){
  .result-summary-grid{grid-template-columns:1fr}
  .result-hero-value{font-size:38px}
}


/* v1.0.6 – stärkere Hauptergebnis-Hierarchie + moderne Detailfarben */
.result-hero{
  text-align:center!important;
}
.result-hero-label{
  text-align:center;
  font-size:14px;
  opacity:.92;
}
.result-hero-value{
  text-align:center;
  font-size:56px!important;
  line-height:1;
  margin:10px auto 0;
  display:inline-block;
  padding:10px 20px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 8px 24px rgba(5,35,60,.10);
}
.result-hero-sub{
  text-align:center;
  margin:12px auto 0;
  max-width:760px;
  font-size:16px;
}
.result-summary-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:24px;
  text-align:left;
}
.compact-fit{
  max-width:none;
  padding:15px 18px;
  background:linear-gradient(145deg,#f2f7fb,#ffffff);
}
.compact-fit .result-summary-title{
  font-size:17px;
}
.compact-fit .result-summary-text{
  font-size:13px;
}
.recommendation-dominant{
  padding:22px 22px;
  background:linear-gradient(145deg,#edf6ef,#ffffff);
  border:1px solid #d4e7d8;
  box-shadow:0 8px 22px rgba(52,91,66,.08);
}
.recommendation-dominant .result-summary-kicker{
  color:#567a61;
}
.recommendation-dominant .result-summary-title{
  font-size:22px;
  color:#244331;
}
.recommendation-dominant .result-summary-text{
  font-size:16px;
  line-height:1.55;
  color:#324b3a;
}

/* Detailergebnis: gleiche moderne Verlaufslogik für alle Spalten */
.result-matrix-header>div:nth-child(1),
.result-matrix-row>div:nth-child(1){
  background:linear-gradient(145deg,#eaf3fb,#ffffff)!important;
  color:#234d72!important;
  border:1px solid #d8e6f1!important;
}
.result-matrix-header>div:nth-child(2),
.result-matrix-row>div:nth-child(2){
  background:linear-gradient(145deg,#edf6ef,#ffffff)!important;
  color:#2d5037!important;
  border:1px solid #d9eadc!important;
}
.result-matrix-header>div:nth-child(3),
.result-matrix-row>div:nth-child(3){
  background:linear-gradient(145deg,#f1f3f5,#ffffff)!important;
  color:#394651!important;
  border:1px solid #dfe4e8!important;
}
.result-matrix-row>div{
  border-left-width:1px!important;
}
.result-matrix-row.highlight>div:nth-child(1){
  background:linear-gradient(145deg,#e4eff8,#ffffff)!important;
}
.result-matrix-row.highlight>div:nth-child(2){
  background:linear-gradient(145deg,#e8f3eb,#ffffff)!important;
}
.result-matrix-row.highlight>div:nth-child(3){
  background:linear-gradient(145deg,#eceff2,#ffffff)!important;
}
.diff-good{
  color:#287341!important;
}
.diff-bad{
  color:#9a3542!important;
}
.diff-neutral{
  color:#526170!important;
}
@media(max-width:700px){
  .result-hero-value{font-size:44px!important}
  .recommendation-dominant .result-summary-title{font-size:20px}
  .recommendation-dominant .result-summary-text{font-size:15px}
}


/* v1.1.0 – neue E-Fleet Designwelt */
header,.hero,.top-hero{
  position:relative;
  overflow:hidden;
}
.claim-charge-mark{
  display:inline-flex;
  width:56px;
  height:42px;
  margin-left:10px;
  vertical-align:middle;
  color:#fff;
  opacity:.95;
}
.claim-charge-mark svg{width:100%;height:100%}

.fleet-hero-art{
  position:absolute;
  right:-24px;
  bottom:18px;
  width:min(48vw,760px);
  height:110px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:2px;
  color:rgba(255,255,255,.92);
  pointer-events:none;
}
.fleet-hero-art svg{width:100%;height:100%}
.fleet-charge{width:64px;height:58px;flex:0 0 auto}
.fleet-line{
  width:34px;
  height:2px;
  background:currentColor;
  margin-bottom:22px;
  opacity:.9
}
.fleet-car{height:60px;display:flex;align-items:flex-end}
.fleet-car.car1{width:92px}
.fleet-car.car2{width:112px}
.fleet-car.car3{width:126px}
.fleet-car.car4{width:150px}
.fleet-car svg{overflow:visible}

.section-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-symbol{
  width:58px;
  height:46px;
  flex:0 0 auto;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#f3f7fb,#ffffff);
  box-shadow:0 4px 12px rgba(16,45,75,.05)
}
.section-symbol svg{width:50px;height:38px}
.section-symbol.step-blue{color:#175c98}
.section-symbol.step-green{
  color:#3c8b4e;
  background:linear-gradient(145deg,#eef7f0,#ffffff)
}

/* mobile wizard icon */
.mobile-wizard-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px
}
.mobile-wizard-icon{
  width:52px;
  height:42px;
  flex:0 0 auto;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#f3f7fb,#ffffff);
  box-shadow:0 3px 10px rgba(16,45,75,.05)
}
.mobile-wizard-icon.step-blue{color:#175c98}
.mobile-wizard-icon.step-green{
  color:#3c8b4e;
  background:linear-gradient(145deg,#eef7f0,#ffffff)
}
.mobile-wizard-icon svg{width:44px;height:34px}

/* top step navigation uses the same visual language */
.steps .step{
  position:relative;
  overflow:hidden;
}
.steps .step[data-target="vergleichsfahrzeug"]{
  background:linear-gradient(145deg,#eef7f0,#ffffff)
}
.steps .step[data-target="vergleichsfahrzeug"].active{
  border-color:#b9d8c0
}

@media(max-width:900px){
  .fleet-hero-art{width:52vw;opacity:.76;right:-80px}
}
@media(max-width:700px){
  .fleet-hero-art{
    width:92vw;
    right:-44vw;
    bottom:10px;
    opacity:.38
  }
  .claim-charge-mark{width:44px;height:34px}
  .section-symbol{display:none}
}


/* v1.1.1 – Design exakt an freigegebener Skizze ausgerichtet */
.efleet-hero{
  min-height:310px!important;
  padding:0!important;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 45%,rgba(18,89,168,.38),transparent 32%),
    linear-gradient(118deg,#031b39 0%,#052852 47%,#073f80 100%)!important;
  color:#fff;
}
.hero-diagonal{
  position:absolute;
  right:-7%;
  top:-25%;
  width:42%;
  height:155%;
  transform:skewX(-34deg);
  pointer-events:none
}
.hero-diagonal-a{background:rgba(15,82,157,.28)}
.hero-diagonal-b{right:-24%;background:rgba(15,91,175,.22)}
.efleet-brand{
  position:absolute;
  left:max(34px,calc((100vw - 1440px)/2 + 42px));
  top:34px;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:3
}
.efleet-mark{
  width:58px;height:58px;position:relative;display:grid;place-items:center
}
.mark-ring{
  position:absolute;inset:3px;border:7px solid #fff;border-radius:50%;
  border-right-color:transparent
}
.mark-e{
  position:relative;font-size:34px;font-weight:950;color:#fff;line-height:1
}
.mark-arrow{
  position:absolute;right:-2px;top:23px;width:24px;height:8px;background:#1473d4;border-radius:999px
}
.mark-arrow:after{
  content:"";position:absolute;right:-4px;top:-5px;border-left:9px solid #1473d4;border-top:9px solid transparent;border-bottom:9px solid transparent
}
.efleet-brand-text{
  font-size:32px;font-weight:900;letter-spacing:.01em;white-space:nowrap
}
.efleet-brand-text span{font-weight:950}
.hero-copy{
  position:absolute;
  left:max(34px,calc((100vw - 1440px)/2 + 42px));
  bottom:52px;
  z-index:3;
  max-width:56%
}
.hero-claim{
  font-size:clamp(33px,3.45vw,55px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.025em;
  white-space:nowrap
}
.hero-traits{
  margin-top:14px;
  font-size:clamp(17px,1.55vw,25px);
  font-weight:450;
  opacity:.96
}
.hero-fleet-illustration{
  position:absolute;
  z-index:2;
  right:-18px;
  bottom:50px;
  width:52%;
  min-width:690px;
  height:122px;
  color:rgba(255,255,255,.96);
  display:flex;
  align-items:flex-end;
  gap:0;
  pointer-events:none
}
.hero-cable{
  flex:1 1 auto;
  height:2.6px;
  background:currentColor;
  margin-bottom:24px;
  border-radius:999px;
  min-width:64px
}
.hero-charge-station{width:72px;height:92px;flex:0 0 72px;margin:0 7px 0 -2px}
.fleet-outline{height:auto;flex:0 0 auto;margin-left:-3px}
.fleet-small{width:107px}
.fleet-mid{width:130px}
.fleet-suv{width:143px}
.fleet-van{width:173px}

/* Four visual step cards exactly like the concept */
.design-steps{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:28px!important;
  margin:28px 0 22px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important
}
.design-step{
  position:relative;
  min-height:320px;
  padding:22px 22px 20px!important;
  border:1px solid #e7edf3!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#f4f8fd,#ffffff)!important;
  color:#082a57!important;
  box-shadow:0 5px 18px rgba(8,43,83,.055)!important;
  text-align:left!important;
  overflow:visible!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}
.design-step:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(8,43,83,.09)!important
}
.design-step.green-step{
  background:linear-gradient(145deg,#eff8f1,#ffffff)!important;
  border-color:#e0eee3!important;
  color:#286f37!important
}
.design-step.active{
  box-shadow:0 8px 26px rgba(13,82,153,.13)!important;
  border-color:#cbddec!important
}
.design-step:after{
  content:"›";
  position:absolute;
  right:-23px;
  top:44%;
  transform:translateY(-50%);
  font-size:52px;
  font-weight:200;
  color:#bdc9d5;
  pointer-events:none
}
.design-step:last-child:after{display:none}
.design-step-head{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:20px;
  color:#082a57
}
.green-step .design-step-head{color:#174f26}
.design-step-num{
  display:inline-grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  background:#0d55aa;
  color:#fff;
  font-size:17px;
  font-weight:900;
  flex:0 0 auto
}
.green-step .design-step-num{background:#2d8b42}
.design-step-icon{
  height:130px;
  margin:14px auto 6px;
  display:grid;
  place-items:center;
  color:#0a3471
}
.green-step .design-step-icon{color:#329247}
.design-step-icon svg{width:86%;height:100%}
.design-step p{
  margin:8px 8px 0!important;
  text-align:center;
  font-size:14px!important;
  line-height:1.55!important;
  color:#283c57!important
}
.green-step p{color:#355742!important}

/* Detail-section symbol treatment from the same family */
.section-symbol{
  width:76px!important;
  height:62px!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#f2f7fc,#fff)!important;
  box-shadow:0 4px 14px rgba(8,43,83,.055)!important;
  color:#0a3471!important
}
.section-symbol.step-green{
  color:#329247!important;
  background:linear-gradient(145deg,#eff8f1,#fff)!important
}
.section-symbol svg{width:68px!important;height:52px!important}
.section-number{
  background:#0d55aa!important
}
#vergleichsfahrzeug .section-number{background:#2d8b42!important}

/* Mobile follows the same icon/color logic */
.mobile-wizard-icon{
  width:64px!important;height:52px!important;
  border-radius:12px!important;
  color:#0a3471!important
}
.mobile-wizard-icon.step-green{
  color:#329247!important;
  background:linear-gradient(145deg,#eff8f1,#fff)!important
}
.mobile-wizard-icon svg{width:58px!important;height:44px!important}

@media(max-width:1100px){
  .efleet-brand-text{font-size:27px}
  .hero-copy{max-width:58%}
  .hero-fleet-illustration{right:-100px;opacity:.82}
  .design-steps{gap:16px!important}
  .design-step{min-height:300px;padding:18px!important}
  .design-step-head{font-size:17px}
}
@media(max-width:900px){
  .hero-fleet-illustration{opacity:.48;right:-240px}
  .hero-copy{max-width:78%}
  .design-step p{font-size:13px!important}
}
@media(max-width:700px){
  .efleet-hero{min-height:225px!important}
  .efleet-brand{left:20px;top:22px;gap:10px}
  .efleet-mark{width:42px;height:42px}
  .mark-ring{border-width:5px}
  .mark-e{font-size:25px}
  .mark-arrow{top:17px;width:18px;height:6px}
  .mark-arrow:after{top:-4px;border-left-width:7px;border-top-width:7px;border-bottom-width:7px}
  .efleet-brand-text{font-size:21px}
  .hero-copy{left:20px;bottom:28px;max-width:92%}
  .hero-claim{font-size:29px;white-space:normal;max-width:92%}
  .hero-traits{font-size:15px;margin-top:9px}
  .hero-fleet-illustration{right:-430px;bottom:22px;opacity:.22}
  .design-steps{display:none!important}
}


/* v1.1.2 – freigegebenen Designentwurf direkt übernommen */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}

/* Desktop: the approved header artwork itself, pixel-faithful */
@media(min-width:701px){
  .exact-mockup-hero{
    min-height:310px!important;
    height:310px!important;
    background:linear-gradient(118deg,#031b39 0%,#052852 47%,#073f80 100%)!important;
    padding:0!important;
  }
  .exact-mockup-hero > *:not(.exact-hero-image){
    visibility:hidden!important;
  }
}

/* The four approved cards themselves */
.exact-design-steps{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:28px!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:28px 0 24px!important;
}
.exact-step-card{
  display:block!important;
  position:relative!important;
  padding:0!important;
  margin:0!important;
  min-height:0!important;
  height:auto!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  box-shadow:0 5px 18px rgba(7,40,77,.07)!important;
  overflow:hidden!important;
  appearance:none!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.exact-step-card img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:337/328!important;
  object-fit:cover!important;
  pointer-events:none!important;
}
.exact-step-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 26px rgba(7,40,77,.11)!important;
}
.exact-step-card.active{
  outline:3px solid rgba(16,89,177,.16)!important;
  outline-offset:2px!important;
}
.exact-step-card[data-target="vergleichsfahrzeug"].active{
  outline-color:rgba(47,139,66,.18)!important;
}
.exact-step-card:after{display:none!important}

/* Exact approved symbols in detail sections */
.section-symbol.exact-symbol{
  width:84px!important;
  height:62px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(145deg,#f4f8fd,#fff)!important;
  border:1px solid #e7edf3!important;
  box-shadow:0 4px 14px rgba(8,43,83,.05)!important;
  overflow:hidden!important;
}
.section-symbol.exact-symbol.step-green{
  background:linear-gradient(145deg,#eff8f1,#fff)!important;
  border-color:#e0eee3!important;
}
.section-symbol.exact-symbol img{
  width:78px!important;
  height:54px!important;
  object-fit:contain!important;
}

/* Exact approved symbols in mobile wizard */
.mobile-wizard-icon.exact-mobile-symbol{
  width:68px!important;
  height:54px!important;
  padding:0!important;
  overflow:hidden!important;
}
.mobile-wizard-icon.exact-mobile-symbol img{
  width:64px!important;
  height:48px!important;
  object-fit:contain!important;
}

@media(max-width:1100px) and (min-width:701px){
  .exact-design-steps{gap:14px!important}
}
@media(max-width:700px){
  .exact-design-steps{display:none!important}
  .exact-mockup-hero{
    /* Keep the responsive live header on phones instead of shrinking the desktop artwork. */
    background-image:none!important;
  }
}


/* v1.1.3 – Vorschau-/Farbfix für direkt eingebetteten Designentwurf */
.exact-mockup-hero{
  background:linear-gradient(118deg,#031b39 0%,#052852 47%,#073f80 100%)!important;
}
.exact-hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  z-index:20;
  opacity:1;
  visibility:visible!important;
  pointer-events:none;
}
@media(max-width:700px){
  .exact-hero-image{display:none!important}
  .exact-mockup-hero > *:not(.exact-hero-image){visibility:visible!important}
}


.exact-step-card{
  background:#f5f8fc!important;
}
.exact-step-card[data-target="vergleichsfahrzeug"]{
  background:#f0f8f2!important;
}
.exact-step-card img{
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
}


/* v1.1.4 – Header, Markenlogo und Symbolproportionen */
@media(min-width:701px){
  .exact-mockup-hero{
    height:clamp(252px,20.1823vw,330px)!important;
    min-height:252px!important;
    max-height:330px!important;
    background:#031b39!important;
  }
  .exact-hero-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#031b39!important;
  }
  .efleet-brand-overlay{
    position:absolute;
    left:max(28px,calc((100vw - 1536px)/2 + 42px));
    top:25px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    visibility:visible!important;
  }
  .efleet-brand-overlay:before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-18px;
    top:-13px;
    width:430px;
    height:94px;
    background:linear-gradient(100deg,#041c3b 0%,#062650 72%,rgba(6,38,80,0) 100%);
    border-radius:12px;
  }
  .efleet-monogram{
    position:relative;
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
  }
  .efleet-monogram .mono-e{
    font-size:39px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.07em;
    color:#fff;
  }
  .efleet-monogram .mono-charge{
    position:absolute;
    right:-2px;
    top:22px;
    width:18px;
    height:5px;
    border-radius:999px;
    background:#1876d2;
  }
  .efleet-monogram .mono-charge:after{
    content:"";
    position:absolute;
    right:-5px;
    top:-4px;
    border-left:8px solid #1876d2;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
  }
  .efleet-overlay-wordmark{
    font-size:30px;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
    font-weight:500;
  }
  .efleet-overlay-wordmark strong{font-weight:900}
}

.exact-step-card{
  position:relative!important;
  overflow:hidden!important;
}
.exact-step-card .card-visual-mask{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:76px;
  height:150px;
  background:#f6f9fd;
  pointer-events:none;
}
.exact-step-card[data-target="vergleichsfahrzeug"] .card-visual-mask{
  background:#f1f8f3;
}
.exact-step-card .step-mini-symbol{
  position:absolute;
  z-index:3;
  top:112px;
  left:50%;
  transform:translateX(-50%);
  width:54px!important;
  height:44px!important;
  object-fit:contain!important;
  pointer-events:none;
}
.section-symbol.exact-symbol{
  width:46px!important;
  height:38px!important;
  border-radius:9px!important;
}
.section-symbol.exact-symbol img{
  width:38px!important;
  height:30px!important;
}
.mobile-wizard-icon.exact-mobile-symbol{
  width:48px!important;
  height:40px!important;
}
.mobile-wizard-icon.exact-mobile-symbol img{
  width:42px!important;
  height:34px!important;
}
@media(max-width:700px){
  .efleet-brand-overlay{display:none!important}
}


/* v1.1.5 – sauberer Neuaufbau von Header und Schritt-Karten */
.clean-hero{
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  min-height:310px!important;
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 42%,rgba(24,93,170,.35),transparent 34%),
    linear-gradient(118deg,#031b39 0%,#062952 48%,#0a4382 100%)!important;
  color:#fff!important;
}
.clean-hero .hero-bg-shape{
  position:absolute;top:-35%;height:170%;width:34%;transform:skewX(-34deg);
}
.clean-hero .shape-a{right:4%;background:rgba(13,73,143,.26)}
.clean-hero .shape-b{right:-18%;background:rgba(16,88,170,.20)}
.hero-inner{
  width:min(1440px,calc(100% - 64px));
  height:310px;
  margin:0 auto;
  position:relative;
}
.clean-brand{
  position:absolute;left:0;top:34px;display:flex;align-items:center;gap:13px;z-index:2
}
.clean-brand-mark{
  position:relative;width:56px;height:56px;display:grid;place-items:center;flex:0 0 56px
}
.clean-e{font-size:45px;font-weight:950;line-height:1;color:#fff;letter-spacing:-.07em}
.clean-arrow{position:absolute;right:0;top:25px;width:21px;height:6px;background:#1c78d3;border-radius:999px}
.clean-arrow:after{content:"";position:absolute;right:-5px;top:-5px;border-left:9px solid #1c78d3;border-top:8px solid transparent;border-bottom:8px solid transparent}
.clean-wordmark{font-size:31px;font-weight:500;white-space:nowrap}
.clean-wordmark strong{font-weight:900}
.hero-main-copy{position:absolute;left:0;bottom:50px;z-index:2}
.hero-claim{font-size:clamp(38px,3.3vw,55px);font-weight:900;line-height:1.05;letter-spacing:-.025em}
.hero-subline{font-size:clamp(18px,1.5vw,24px);margin-top:13px}
.clean-fleet-art{
  position:absolute;right:-14px;bottom:46px;width:56%;display:flex;align-items:flex-end;color:#fff;opacity:.95
}
.clean-fleet-art svg{flex:0 0 auto}
.charge-station{width:66px;height:88px;margin-right:4px}
.fleet-car.small{width:104px}.fleet-car.mid{width:125px}.fleet-car.suv{width:139px}.fleet-car.van{width:164px}
.fleet-car{margin-left:-3px}

/* compact cards */
.compact-steps{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:18px!important;
  margin:22px 0 24px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important
}
.compact-step{
  min-height:188px!important;
  padding:16px 18px 14px!important;
  border-radius:14px!important;
  border:1px solid #e6edf3!important;
  background:linear-gradient(145deg,#f5f8fc,#ffffff)!important;
  box-shadow:0 4px 14px rgba(8,43,83,.05)!important;
  color:#092d5f!important;
  text-align:left!important
}
.compact-step.green-card{
  background:linear-gradient(145deg,#eff8f1,#ffffff)!important;
  border-color:#e0eee3!important
}
.compact-step-top{display:flex;align-items:center;gap:10px;font-size:16px}
.step-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#0d55aa;color:#fff;font-weight:900;font-size:13px}
.step-num.green{background:#2d8b42}
.compact-icon{
  height:64px!important;
  margin:9px auto 4px!important;
  display:grid!important;
  place-items:center!important
}
.compact-icon svg{width:68px!important;height:52px!important}
.compact-icon.blue{color:#0a3471}.compact-icon.green{color:#329247}
.compact-step p{margin:2px 0 0!important;text-align:center!important;font-size:12px!important;line-height:1.4!important;color:#44556a!important}

/* smaller in form section headers too */
.section-symbol{width:42px!important;height:34px!important}
.section-symbol svg,.section-symbol img{width:34px!important;height:26px!important}

/* mobile wizard icon remains compact */
.mobile-wizard-icon{width:44px!important;height:36px!important}
.mobile-wizard-icon svg,.mobile-wizard-icon img{width:38px!important;height:30px!important}

@media(max-width:1100px){
  .clean-fleet-art{right:-170px;opacity:.72}
  .compact-steps{gap:12px!important}
}
@media(max-width:700px){
  .clean-hero{min-height:230px!important}
  .hero-inner{width:calc(100% - 36px);height:230px}
  .clean-brand{top:22px}
  .clean-brand-mark{width:42px;height:42px;flex-basis:42px}.clean-e{font-size:34px}.clean-arrow{top:19px;width:17px}
  .clean-wordmark{font-size:22px}
  .hero-main-copy{bottom:28px}
  .hero-claim{font-size:29px;max-width:92%}
  .hero-subline{font-size:15px}
  .clean-fleet-art{right:-390px;bottom:20px;opacity:.20}
  .compact-steps{display:none!important}
}


/* v1.1.6 – Nummern entfernt, Eingabebereich verbreitert */
.compact-step-top{
  justify-content:center!important;
  text-align:center!important;
  min-height:40px;
}
.compact-step-top strong{
  font-size:16px;
  line-height:1.15;
}
.step-num{display:none!important}

/* Eingabeblöcke: linke Überschrift deutlich schmäler */
@media(min-width:901px){
  .section-grid{
    grid-template-columns:150px minmax(0,1fr)!important;
    gap:20px!important;
  }
  .section-title{
    align-items:flex-start!important;
    gap:8px!important;
    padding-right:4px!important;
  }
  .section-title .section-symbol{
    flex:0 0 38px!important;
  }
  .section-title h2{
    font-size:16px!important;
    line-height:1.15!important;
    margin:0!important;
  }
  .section-title p{
    font-size:11px!important;
    line-height:1.35!important;
    margin-top:4px!important;
  }
}

/* Vergleichsfahrzeug darf bewusst zweizeilig sein */
#vergleichsfahrzeug .section-title h2{
  max-width:95px;
}

/* Ergebnis-Detailblock ebenfalls ohne Nummern-Badge */
.section-number{display:none!important}

@media(max-width:900px) and (min-width:701px){
  .section-grid{
    grid-template-columns:125px minmax(0,1fr)!important;
    gap:16px!important;
  }
  .section-title h2{font-size:15px!important}
  .section-title p{font-size:10.5px!important}
}


/* v1.2.0 – freigegebenen Grafikentwurf exakt übernommen */
.exact-approved-hero{
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  background:#031b39!important;
  position:relative!important;
}
.approved-hero-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
}

.approved-steps{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:28px!important;
  padding:0!important;
  margin:28px 0 24px!important;
  background:transparent!important;
  border:0!important;
}
.approved-step{
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:0 5px 18px rgba(8,43,83,.06)!important;
  overflow:hidden!important;
  cursor:pointer!important;
  min-height:0!important;
  height:auto!important;
  appearance:none!important;
  transition:transform .16s ease, box-shadow .16s ease, outline-color .16s ease!important;
}
.approved-step img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
}
.approved-step:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 10px 24px rgba(8,43,83,.10)!important;
}
.approved-step.active{
  outline:3px solid rgba(13,85,170,.17)!important;
  outline-offset:2px!important;
}
.approved-step[data-target="vergleichsfahrzeug"].active{
  outline-color:rgba(45,139,66,.18)!important;
}
.approved-step:before,
.approved-step:after{
  display:none!important;
}

/* Keep input areas from the latest functional version compact */
@media(min-width:901px){
  .section-grid{
    grid-template-columns:150px minmax(0,1fr)!important;
    gap:20px!important;
  }
}

/* Mobile: hide desktop visual cards, keep the wizard */
@media(max-width:700px){
  .approved-steps{display:none!important}
  .exact-approved-hero{
    width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  .approved-hero-image{
    width:100%!important;
    height:auto!important;
  }
}


/* v1.2.2 – Kabel erst nach vollständigem Textblock */
.exact-approved-hero{
  background:#031b39!important;
}
.approved-hero-image{
  width:100%!important;
  height:auto!important;
  display:block!important;
}


/* v1.3.1 – Header aus einem Guss, weicher Blau-Grau-Verlauf */
.efleet-v130-hero{
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  position:relative!important;
  overflow:hidden!important;
  background:#fff!important;
  line-height:0!important;
}
.efleet-v130-hero-art{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.efleet-v130-hotspot{
  position:absolute!important;
  z-index:10!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer!important;
  text-decoration:none!important;
}
.efleet-v130-hotspot.top-analyse{left:81.4%;top:2.6%;width:15.9%;height:6.2%}
.efleet-v130-hotspot.hero-analyse{left:4.1%;top:68.6%;width:20.0%;height:6.2%}
.efleet-v130-hotspot.example-load{left:25.8%;top:69.0%;width:13.2%;height:5.7%}
@media(max-width:700px){
  .efleet-v130-hero{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
  .efleet-v130-hero-art{width:100%!important;height:auto!important}
  .efleet-v130-hotspot{display:none!important}
}


/* v1.3.3 – durchgehender Verlauf + Line-Art-Wortmarke */
html,body{margin:0!important;padding:0!important;background:#08285c!important;}
body{overflow-x:hidden!important;}
.efleet-v130-hero{margin-top:0!important;padding-top:0!important;border:0!important;top:0!important;background:#08285c!important;}
.efleet-v130-hero-art{margin:0!important;padding:0!important;border:0!important;vertical-align:top!important;}


/* v1.3.4 – Topzeile entfernt, Wortmarke über Fahrzeugen, linearer Verlauf */
.efleet-v130-hotspot.top-analyse{display:none!important;}


/* v1.3.5 – Wortmarke und Ladesäule proportional neu ausgerichtet */


/* v1.3.6 – freigegebener Headerstand integriert; Funktionslogik unverändert */
.efleet-v130-hotspot{display:none!important;}

/* v1.4.0 – kompakter Header + Landingpage + Wizard auf allen Endgeräten */

/* Header: maximal etwa ein Drittel der sichtbaren Seite */
.efleet-v130-hero{
  height:min(32vh,320px)!important;
  min-height:210px!important;
  max-height:320px!important;
  background:#073a82!important;
}
.efleet-v130-hero-art{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 52%!important;
}

/* Alte Desktop-Schrittübersicht wird durch den Wizard ersetzt */
.approved-steps{display:none!important}

/* Landingpage vor den Eingaben */
.check-landing{
  min-height:calc(68vh - 40px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 16px 64px;
}
.check-landing-card{
  width:min(820px,100%);
  text-align:center;
  padding:42px 38px;
  border:1px solid #e3eaf1;
  border-radius:22px;
  background:linear-gradient(145deg,#ffffff,#f5f9fd);
  box-shadow:0 18px 45px rgba(17,55,94,.10);
}
.check-landing-kicker{
  color:#2e7f3f;
  font-size:13px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.check-landing h1{
  margin:0 auto 14px;
  max-width:720px;
  color:#102f55;
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
}
.check-landing p{
  margin:0 auto 26px;
  max-width:670px;
  color:#56677a;
  font-size:17px;
  line-height:1.6;
}
.check-start-btn{
  min-width:min(440px,100%);
  padding:18px 34px!important;
  border-radius:14px!important;
  font-size:20px!important;
  font-weight:850!important;
  box-shadow:0 12px 26px rgba(10,103,189,.20)!important;
}
.check-landing-note{
  margin-top:14px;
  color:#7a8898;
  font-size:12px;
}

/* Der bisherige Mobile-Wizard wird zum allgemeinen Check-Wizard */
.mobile-wizard-top{
  display:block!important;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  padding:12px 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.mobile-wizard-nav{
  display:flex!important;
  gap:12px;
  max-width:760px;
  margin:24px auto 0!important;
  padding:14px 0 8px!important;
  position:static!important;
  background:transparent!important;
  border-top:1px solid var(--line)!important;
}
.mobile-wizard-nav button{flex:1;min-height:48px}
.mobile-wizard-nav .wizard-prev{background:#edf2f6;color:#213047}

/* Wizard soll auf Desktop ebenfalls fokussiert und nicht wie die alte lange Eingabeseite wirken */
#inputView{
  max-width:1000px;
  margin:0 auto;
  padding-top:12px;
}
#inputView .section-card{
  margin-top:0!important;
  box-shadow:0 10px 28px rgba(20,55,90,.07);
}
.desktop-analyze-wrap{display:none!important}

/* Result view bleibt voll nutzbar */
#resultView{padding-top:16px}

@media(max-width:700px){
  .efleet-v130-hero{
    height:min(28vh,230px)!important;
    min-height:165px!important;
  }
  .efleet-v130-hero-art{
    object-position:center 52%!important;
  }
  .check-landing{
    min-height:auto;
    padding:28px 12px 42px;
  }
  .check-landing-card{
    padding:30px 20px;
    border-radius:18px;
  }
  .check-landing p{font-size:15px}
  .check-start-btn{
    min-width:100%;
    font-size:18px!important;
  }
  .mobile-wizard-nav{
    position:sticky!important;
    bottom:0!important;
    z-index:30!important;
    background:rgba(255,255,255,.98)!important;
    backdrop-filter:blur(8px);
    margin:18px -16px 0!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
  }
}


/* v1.4.1 – proportionaler Header, weißer Seitenhintergrund, reine Landingpage */

/* Gesamte Seite neutral/weiß */
html, body{
  background:#fff!important;
}

/* Headerbild immer vollständig sichtbar, kein Cropping/Zoom */
.efleet-v130-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

.efleet-v130-hero-art{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:32vh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  background:#fff!important;
}

/* Startseite: nur Landingpage, keine Eingaben und kein Ergebnis */
#checkLanding:not(.view-hidden){
  display:flex!important;
}
#inputView.view-hidden,
#resultView.view-hidden{
  display:none!important;
}

/* Landingpage bewusst hell */
.check-landing{
  background:#fff!important;
}

.check-landing-card{
  background:linear-gradient(145deg,#ffffff,#f8fbfe)!important;
}

/* Keine versehentlichen alten Ergebnis-/Input-Blöcke auf der Landingpage */
body.landing-active #inputView,
body.landing-active #resultView{
  display:none!important;
}

/* Desktop */
@media(min-width:701px){
  .efleet-v130-hero-art{
    max-height:32vh!important;
  }
}

/* Mobile */
@media(max-width:700px){
  .efleet-v130-hero-art{
    max-height:28vh!important;
  }
}


/* v1.4.2 – strukturierter Landing/Wizard/Result Aufbau + proportionaler Desktop-Header */
html,body{margin:0!important;padding:0!important;background:#fff!important}

/* The image itself is already cropped to the designed banner content.
   Therefore it can scale by width without zoom/cropping. */
.efleet-v130-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  overflow:hidden!important;
  line-height:0!important;
}
.efleet-v130-hero-art{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:unset!important;
  margin:0!important;
  padding:0!important;
}

/* Landing is the only content visible on first load. */
#checkLanding:not(.view-hidden){display:flex!important}
#inputView.view-hidden,
#resultView.view-hidden{display:none!important}

/* Result section now lives INSIDE resultView, so it disappears together. */
#resultView #ergebnis{display:block!important}

/* no legacy top hotspots */
.efleet-v130-hotspot{display:none!important}

@media(min-width:701px){
  /* Keep a comfortable maximum width on very wide monitors, but fill normal laptop widths. */
  .efleet-v130-hero-art{
    width:100%!important;
  }
}



/* =========================================================
   E-Fleet modular architecture v2.0
   ========================================================= */
html,body{margin:0;padding:0;background:#fff}
body{min-height:100vh}
.view-hidden,.state-shadow{display:none!important}

.modular-hero{
  height:min(29vh,270px);
  min-height:190px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(90deg,#073c84 0%,#13589b 48%,#9bb4d2 100%);
}
.modular-hero img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
}

.modular-landing{
  max-width:920px;
  margin:0 auto;
  padding:42px 18px 70px;
  text-align:center;
}
.modular-landing-card{
  background:linear-gradient(145deg,#fff,#f7fafc);
  border:1px solid #dfe7ef;
  border-radius:22px;
  box-shadow:0 16px 42px rgba(19,54,90,.10);
  padding:42px 34px;
}
.modular-landing-card h1{
  font-size:clamp(30px,4vw,46px);
  line-height:1.1;
  margin:4px auto 14px;
  color:#102f55;
}
.modular-landing-card p{
  max-width:680px;
  margin:0 auto 26px;
  color:#56677a;
  font-size:17px;
  line-height:1.55;
}
.modular-kicker{
  color:#23843b;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850;
  font-size:13px;
}
.modular-start{
  display:inline-block;
  min-width:min(440px,100%);
  padding:18px 30px;
  border-radius:14px;
  background:linear-gradient(135deg,#0b66c3,#0983d8);
  color:#fff!important;
  text-decoration:none;
  font-size:20px;
  font-weight:850;
  box-shadow:0 12px 25px rgba(11,102,195,.22);
}

.modular-shell{max-width:1080px;margin:0 auto;padding:20px 18px 60px}
.modular-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px 0 17px;border-bottom:1px solid #e2e8ef;margin-bottom:18px;
}
.modular-brand{font-weight:900;letter-spacing:.04em;color:#123e70;text-decoration:none}
.modular-home{color:#607386;text-decoration:none;font-size:14px}
.modular-progress{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin:8px 0 24px;
}
.modular-step{
  padding:11px 8px;border-radius:11px;background:#eef3f7;color:#607386;
  text-align:center;font-size:13px;font-weight:750;text-decoration:none;
}
.modular-step.active{background:#0b66c3;color:#fff}
.modular-step.done{background:#e7f5eb;color:#24793a}
.modular-nav{
  display:flex;gap:14px;justify-content:space-between;align-items:center;
  border-top:1px solid #e1e7ee;margin-top:22px;padding-top:18px;
}
.modular-nav a,.modular-nav button{
  flex:1;display:flex;justify-content:center;align-items:center;min-height:48px;
  border-radius:12px;text-decoration:none;font-weight:800;border:0;
}
.modular-prev{background:#edf2f6;color:#27384c}
.modular-next{background:linear-gradient(135deg,#0b66c3,#0983d8);color:#fff}

.mobile-wizard-top,.mobile-wizard-nav,.approved-steps,.desktop-analyze-wrap{display:none!important}
.modular-visible-section{display:block!important;margin-top:0!important}

.modular-result-actions{display:flex;gap:12px;margin:22px 0 4px}
.modular-result-actions a{padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:800}
.modular-result-actions .edit{background:#edf2f6;color:#24394e}
.modular-result-actions .restart{background:#0b66c3;color:#fff}

@media(max-width:700px){
  .modular-hero{height:min(25vh,210px);min-height:150px}
  .modular-landing{padding:28px 12px 45px}
  .modular-landing-card{padding:30px 20px}
  .modular-progress{grid-template-columns:repeat(4,1fr);gap:5px}
  .modular-step{font-size:11px;padding:10px 3px}
  .modular-shell{padding:12px 12px 45px}
}


/* =========================================================
   v2.1 – Desktop-Header linksbündig, Verlauf läuft rechts weiter
   Nur Layoutänderung; Headergrafik und Funktionalität unverändert.
   ========================================================= */
@media(min-width:701px){
  .modular-hero{
    justify-content:flex-start!important;
    background:linear-gradient(90deg,#073c84 0%,#13589b 55%,#9bb4d2 100%)!important;
  }
  .modular-hero img{
    margin:0!important;
    height:100%!important;
    width:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    flex:0 0 auto!important;
  }
}


/* =========================================================
   v2.2 – Compact Corporate-Identity bar for wizard pages
   ========================================================= */
.wizard-ci{
  width:100%;
  background:linear-gradient(90deg,#073c84 0%,#13589b 58%,#9bb4d2 100%);
  border-radius:14px;
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 20px 8px 12px;
  box-sizing:border-box;
  margin:0 0 18px;
  overflow:hidden;
}
.wizard-ci-left{
  display:flex;
  align-items:center;
  min-width:0;
  height:66px;
}
.wizard-ci-mark{
  height:66px;
  width:auto;
  display:block;
  object-fit:contain;
  object-position:left center;
  margin-right:10px;
}
.wizard-ci-wordmark{
  display:flex;
  flex-direction:column;
  line-height:.92;
  letter-spacing:.10em;
  font-weight:500;
  font-size:22px;
  white-space:nowrap;
}
.wizard-ci-wordmark .efleet{color:#fff}
.wizard-ci-wordmark .check{color:#69c52f;margin-top:6px}
.wizard-ci-home{
  color:#fff!important;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  opacity:.95;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:9px;
  white-space:nowrap;
}
.wizard-ci-home:hover{background:rgba(255,255,255,.10)}
.modular-topbar{display:none!important;}

@media(max-width:700px){
  .wizard-ci{min-height:68px;padding:6px 10px;border-radius:10px;margin-bottom:12px}
  .wizard-ci-left{height:56px}
  .wizard-ci-mark{height:56px;margin-right:7px}
  .wizard-ci-wordmark{font-size:17px;letter-spacing:.08em}
  .wizard-ci-wordmark .check{margin-top:5px}
  .wizard-ci-home{font-size:12px;padding:7px 9px}
}


/* =========================================================
   v2.3 – Seamless continuation of approved header edge
   The extension begins with the actual right-edge colour
   of assets/header.jpg and only then continues subtly.
   ========================================================= */
@media(min-width:701px){
  .modular-hero{
    background:linear-gradient(
      90deg,
      rgb(84,118,173) 0%,
      rgb(93,127,180) 52%,
      rgb(112,145,193) 100%
    )!important;
  }
}


/* =========================================================
   v2.4 – pixelgenaue Header-Fortsetzung mit Auslauf nach Weiß
   Die rechte Verlängerung nutzt die tatsächliche letzte
   Pixelspalte des freigegebenen Headerbildes.
   ========================================================= */
@media(min-width:701px){
  .modular-hero{
    position:relative!important;
    justify-content:flex-start!important;
    background:#fff!important;
  }

  .modular-hero::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:auto;
    width:calc(100% - min(100%, 922px));
    min-width:0;
    pointer-events:none;

    /* Bottom layer: exact vertical colour profile from header edge.
       Top layer: smooth fade to white. */
    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.08) 18%,
        rgba(255,255,255,.28) 45%,
        rgba(255,255,255,.62) 72%,
        rgba(255,255,255,1) 100%
      ),
      url("../assets/header-edge.png");

    background-repeat:no-repeat, repeat-x;
    background-size:100% 100%, 100% 100%;
    background-position:left top, left top;
  }

  .modular-hero img{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    height:100%!important;
    width:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:left center!important;
    flex:0 0 auto!important;
  }
}


/* =========================================================
   v2.5 – Seam-Fix: 3px overlap removes the white hairline
   ========================================================= */
@media(min-width:701px){
  .modular-hero::after{
    /* overlap the image edge slightly to eliminate subpixel seam */
    width:calc(100% - min(100%, 922px) + 3px)!important;
    transform:translateX(0)!important;
    z-index:2!important;
  }

  .modular-hero img{
    z-index:1!important;
  }
}


/* =========================================================
   v2.6 – kompakter CI-Header auf Check- und Ergebnisseiten
   Exakt aus Elementen des freigegebenen Hauptheaders aufgebaut.
   ========================================================= */
.wizard-ci{display:none!important}
.wizard-mini{
  width:100%;
  height:104px;
  margin:0 0 18px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(90deg,#073c84 0%,#13589b 58%,#9bb4d2 100%);
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.wizard-mini img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:700px){
  .wizard-mini{
    height:82px;
    border-radius:10px;
    margin-bottom:12px;
  }
}


/* =========================================================
   v2.7 – Wizard-Header = exakt der freigegebene Hauptheader,
   proportional auf 70 % Breite verkleinert.
   Keine Bildbearbeitung, kein Crop, keine Neukomposition.
   ========================================================= */
.wizard-mini{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 18px!important;
  padding:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
.wizard-mini img{
  display:block!important;
  width:70%!important;
  height:auto!important;
  max-width:70%!important;
  object-fit:contain!important;
  object-position:left top!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:700px){
  .wizard-mini img{
    width:100%!important;
    max-width:100%!important;
  }
}


/* =========================================================
   v2.8 – Wizard-Header: seamless full-width fade + rounded corners
   ========================================================= */
@media(min-width:701px){
  .wizard-mini{
    position:relative!important;
    width:100%!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:#fff!important;
  }

  .wizard-mini::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:calc(70% - 3px);
    z-index:2;
    pointer-events:none;

    /* Exact edge profile from the approved header, then fade softly to white */
    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.06) 15%,
        rgba(255,255,255,.20) 34%,
        rgba(255,255,255,.45) 58%,
        rgba(255,255,255,.76) 80%,
        rgba(255,255,255,1) 100%
      ),
      url("../assets/header-edge.png");
    background-repeat:no-repeat, repeat-x;
    background-size:100% 100%, 100% 100%;
    background-position:left top,left top;
  }

  .wizard-mini img{
    position:relative!important;
    z-index:1!important;
    width:70%!important;
    max-width:70%!important;
    height:auto!important;
    border-radius:14px 0 0 14px!important;
  }
}

@media(max-width:700px){
  .wizard-mini{
    overflow:hidden!important;
    border-radius:12px!important;
  }
  .wizard-mini img{
    border-radius:12px!important;
  }
}


/* =========================================================
   v2.9 – frühere freigegebene grafische Vier-Schritt-Navigation
   wiederhergestellt
   ========================================================= */
.modular-progress{display:none!important}

.graphic-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:4px 0 24px;
  padding:0;
  background:transparent;
}

.graphic-step{
  display:block;
  padding:0;
  border:0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 5px 18px rgba(8,43,83,.07);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, outline-color .16s ease, opacity .16s ease;
}

.graphic-step img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}

.graphic-step:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(8,43,83,.12);
}

.graphic-step.active{
  outline:3px solid rgba(13,85,170,.20);
  outline-offset:2px;
  box-shadow:0 9px 24px rgba(13,85,170,.11);
}

.graphic-step.done{
  opacity:.88;
}

.graphic-step:nth-child(3).active{
  outline-color:rgba(45,139,66,.22);
}

@media(max-width:800px){
  .graphic-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
  }
}

@media(max-width:480px){
  .graphic-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .graphic-step{
    border-radius:10px;
  }
}


/* =========================================================
   v3.0 – Startseite: mobile Header wie Wizard + vier Kernkacheln
   ========================================================= */

/* Landing etwas breiter für vier Kacheln */
.modular-landing{
  max-width:1180px!important;
}
.modular-landing-card{
  padding:34px 28px 38px!important;
}
.landing-intro{
  max-width:760px!important;
  margin-bottom:28px!important;
}

/* Vier zentrale Funktionsbereiche */
.core-areas{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:28px auto 30px;
  width:100%;
}
.core-card{
  background:#f4f8fb;
  border:1px solid #dce6ef;
  border-radius:16px;
  padding:20px 16px 18px;
  min-height:220px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  box-shadow:0 6px 18px rgba(20,60,100,.06);
}
.core-card:nth-child(3){
  background:#f2f8f3;
  border-color:#d8eadc;
}
.core-icon{
  width:92px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.core-icon img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.core-card h2{
  color:#173a63;
  font-size:18px;
  line-height:1.15;
  margin:4px 0 9px;
}
.core-card p{
  color:#627488;
  font-size:13px;
  line-height:1.45;
  margin:0;
}
.modular-start{
  margin-top:2px;
}

/* Mobile Startseite: exakt derselbe Karten-Header-Look wie im Wizard.
   Keine blauen Zusatzflächen ober-/unterhalb des eigentlichen Bildes. */
@media(max-width:700px){
  .index-hero{
    height:auto!important;
    min-height:0!important;
    background:#fff!important;
    padding:14px 22px 0!important;
    box-sizing:border-box;
    overflow:visible!important;
  }
  .index-hero img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    border-radius:12px!important;
    display:block!important;
  }

  .modular-landing{
    padding:26px 12px 44px!important;
  }
  .modular-landing-card{
    padding:28px 18px 30px!important;
  }
  .core-areas{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:22px 0 26px;
  }
  .core-card{
    min-height:190px;
    border-radius:13px;
    padding:16px 11px 14px;
  }
  .core-icon{
    width:76px;
    height:66px;
  }
  .core-card h2{
    font-size:15px;
  }
  .core-card p{
    font-size:12px;
  }
}

/* Very small phones */
@media(max-width:390px){
  .core-card{
    min-height:180px;
    padding-left:9px;
    padding-right:9px;
  }
  .core-card h2{font-size:14px}
  .core-card p{font-size:11px}
}


/* =========================================================
   v3.1 – Rechtliches + Testhinweis + Rückweg zur Startseite
   ========================================================= */

.test-notice{
  max-width:860px;
  margin:28px auto 10px;
  padding:16px 18px;
  border:1px solid #dce6ef;
  border-radius:14px;
  background:#f8fbfd;
  color:#5f7185;
  font-size:13px;
  line-height:1.5;
  text-align:left;
}
.test-notice strong{
  display:block;
  color:#173a63;
  margin-bottom:4px;
}
.test-notice p{margin:0}
.test-notice a{color:#0b66c3;font-weight:700}

.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin:18px 0 0;
  padding:16px 0 4px;
  color:#8090a0;
  font-size:13px;
}
.site-footer a{
  color:#5f7185;
  text-decoration:none;
}
.site-footer a:hover{text-decoration:underline}

.wizard-home-link{
  display:block;
  width:70%;
  max-width:70%;
}
.wizard-home-link img{
  width:100%!important;
  max-width:100%!important;
}

.wizard-homebar{
  display:flex;
  justify-content:flex-end;
  margin:-8px 0 10px;
}
.desktop-home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:9px;
  border:1px solid #d8e2ec;
  background:#fff;
  color:#31506f;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  box-shadow:0 3px 10px rgba(20,55,90,.05);
}
.desktop-home-btn:hover{
  background:#f4f8fb;
}

/* Legal pages */
.legal-shell{
  max-width:900px;
  margin:0 auto;
  padding:36px 18px 70px;
}
.legal-back{
  display:inline-block;
  margin-bottom:16px;
  color:#31506f;
  text-decoration:none;
  font-weight:700;
}
.legal-card{
  border:1px solid #dce6ef;
  border-radius:18px;
  background:#fff;
  padding:30px 32px;
  box-shadow:0 10px 28px rgba(20,55,90,.07);
  color:#53677b;
  line-height:1.6;
}
.legal-card h1{
  margin-top:0;
  color:#173a63;
}
.legal-card a{color:#0b66c3}

@media(max-width:700px){
  .wizard-home-link{
    width:100%;
    max-width:100%;
  }
  .wizard-homebar{
    display:none!important;
  }
  .test-notice{
    margin-top:22px;
    font-size:12px;
  }
  .site-footer{
    font-size:12px;
    padding-bottom:0;
  }
  .legal-shell{
    padding:22px 12px 50px;
  }
  .legal-card{
    padding:24px 20px;
    border-radius:14px;
  }
}


/* =========================================================
   v3.2 – Startseite erklärt die vier Bereiche;
   Wizard zeigt nur noch die jeweilige Modulüberschrift.
   ========================================================= */
.modular-visible-section > h2,
.modular-visible-section > h3{
  margin-top:0!important;
}


/* =========================================================
   v3.3 – Startseiten-Symbole größer und deutlicher,
   direkt aus der früheren Wizard-Grafik übernommen.
   ========================================================= */
.core-icon{
  width:128px!important;
  height:104px!important;
  margin:0 auto 8px!important;
}
.core-icon img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
.core-card{
  padding-top:14px!important;
}
@media(max-width:700px){
  .core-icon{
    width:102px!important;
    height:86px!important;
    margin-bottom:6px!important;
  }
}


/* =========================================================
   v3.5 – Grafikkorrektur
   1) Startseite: saubere, freigestellte Symbole aus den exakten
      ursprünglichen Wizard-Illustrationen.
   2) Wizard: Kartenfarbe füllt den Rahmen vollständig;
      keine weißen Haarlinien / ungefüllten Ecken.
   ========================================================= */

/* Start page symbols */
.core-icon{
  width:132px!important;
  height:108px!important;
  overflow:visible!important;
}
.core-icon img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  mix-blend-mode:multiply;
}

/* Wizard navigation cards: fill the whole rounded frame */
.graphic-step{
  position:relative!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:14px!important;
  border:1px solid #d8e4ed!important;
  background:#eef5f8!important;
  line-height:0!important;
}
.graphic-step:nth-child(3){
  background:#eef7ef!important;
  border-color:#d5e8d9!important;
}
.graphic-step img{
  display:block!important;
  width:calc(100% + 2px)!important;
  max-width:none!important;
  height:auto!important;
  margin:-1px!important;
  border:0!important;
  border-radius:14px!important;
  object-fit:cover!important;
  vertical-align:top!important;
}

/* Do not let outline reveal a white strip around the card. */
.graphic-step.active{
  outline:none!important;
  box-shadow:
    0 0 0 3px rgba(13,85,170,.16),
    0 9px 24px rgba(13,85,170,.11)!important;
}
.graphic-step:nth-child(3).active{
  box-shadow:
    0 0 0 3px rgba(45,139,66,.18),
    0 9px 24px rgba(45,139,66,.10)!important;
}

@media(max-width:700px){
  .core-icon{
    width:108px!important;
    height:90px!important;
  }
  .graphic-step{
    border-radius:11px!important;
  }
  .graphic-step img{
    border-radius:11px!important;
  }
}


/* =========================================================
   v4.0 – Wizard-Navigation komplett neu und isoliert
   ========================================================= */

.graphic-steps,
.modular-progress{
  display:none!important;
}

.efleet-wizard-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:8px 0 20px;
}

.efleet-wizard-step{
  box-sizing:border-box;
  min-width:0;
  height:116px;
  padding:10px 8px 8px;
  border:1px solid #d8e4ed;
  border-radius:14px;
  background:#eef5f8;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(20,55,90,.05);
}

.efleet-wizard-step:nth-child(3){
  background:#eef7ef;
  border-color:#d6e9da;
}

.efleet-wizard-step img{
  position:static!important;
  display:block!important;
  width:68px!important;
  height:60px!important;
  max-width:72%!important;
  margin:0!important;
  transform:none!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
}

.efleet-wizard-step span{
  display:block;
  width:100%;
  color:#173a63;
  font-size:13px;
  line-height:1.12;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  white-space:normal;
}

.efleet-wizard-step.active{
  border-color:#89b5df;
  box-shadow:
    0 0 0 2px rgba(13,85,170,.13),
    0 5px 15px rgba(20,55,90,.06);
}

.efleet-wizard-step:nth-child(3).active{
  border-color:#98cba3;
  box-shadow:
    0 0 0 2px rgba(45,139,66,.13),
    0 5px 15px rgba(20,55,90,.06);
}

.efleet-wizard-step.done{
  opacity:.92;
}

/* Mobil: alle vier bleiben nebeneinander, aber sehr kompakt. */
@media(max-width:700px){
  .efleet-wizard-steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    margin:5px 0 12px;
  }

  .efleet-wizard-step{
    height:82px;
    padding:6px 2px 5px;
    border-radius:10px;
    gap:4px;
  }

  .efleet-wizard-step img{
    width:42px!important;
    height:40px!important;
    max-width:72%!important;
  }

  .efleet-wizard-step span{
    font-size:8.6px;
    line-height:1.02;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
  }
}

@media(max-width:390px){
  .efleet-wizard-steps{
    gap:4px;
  }

  .efleet-wizard-step{
    height:78px;
  }

  .efleet-wizard-step img{
    width:39px!important;
    height:37px!important;
  }

  .efleet-wizard-step span{
    font-size:7.8px;
  }
}

/* =========================================================
   v4.1 – Desktop layout repair for modular pages
   The legacy two-column section grid expected a separate
   section-title column. In the modular pages that title is
   now above the grid, so the actual form/result must span
   the full available width.
   ========================================================= */
@media(min-width:701px){
  .modular-visible-section > .section-grid{
    display:block!important;
    width:100%!important;
  }
  .modular-visible-section > .section-grid > .form-grid{
    width:100%!important;
    max-width:none!important;
  }
  #ergebnis.modular-visible-section .result-wrap{
    display:block!important;
    width:100%!important;
  }
  #ergebnis.modular-visible-section .result-wrap > div{
    width:100%!important;
    max-width:none!important;
  }
}

.analysis-auto-status{
  margin:0 0 16px;
  padding:13px 16px;
  border-radius:12px;
  background:#eef5fb;
  border:1px solid #d5e4f1;
  color:#24486b;
  font-weight:800;
  text-align:center;
}
.analysis-auto-status.error{
  background:#fff3f3;
  border-color:#efcccc;
  color:#922f2f;
}

/* v4.7 – mobile detail result */
.mobile-detail-result{display:none}
@media (max-width: 700px){
  .result-matrix{display:none !important}
  .mobile-detail-result{
    display:block;
    margin-top:18px;
  }
  .mobile-detail-result h2{
    margin:0 0 14px;
    font-size:1.55rem;
    color:#173b64;
  }
  .mobile-result-group{margin:0 0 14px}
  .mobile-result-bar{
    padding:10px 14px;
    border:1px solid #d8e3ec;
    border-radius:14px;
    background:linear-gradient(90deg,#eef5fb 0%,#f7fbfd 62%,#ffffff 100%);
    color:#234b70;
    font-weight:800;
    font-size:.92rem;
  }
  .mobile-result-values{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:7px;
  }
  .mobile-result-card{
    min-width:0;
    min-height:78px;
    padding:10px 5px;
    border:1px solid #dce5eb;
    border-radius:14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .mobile-result-card.current{
    background:linear-gradient(145deg,#edf6fd 0%,#f8fbfe 100%);
    border-color:#d2e5f4;
  }
  .mobile-result-card.alternative{
    background:linear-gradient(145deg,#eef8ee 0%,#f9fcf8 100%);
    border-color:#d5ead3;
  }
  .mobile-result-card.difference{
    background:linear-gradient(145deg,#f0f2f4 0%,#fafafa 100%);
    border-color:#dfe3e6;
  }
  .mobile-result-label{
    font-size:.72rem;
    line-height:1.15;
    font-weight:800;
    color:#607286;
    margin-bottom:7px;
  }
  .mobile-result-money{
    font-size:1rem;
    line-height:1.15;
    font-weight:900;
    color:#173b64;
    overflow-wrap:anywhere;
  }
  .mobile-result-money.is-cheaper{color:#2f8f43}
  .mobile-result-money.is-more-expensive{color:#c33b32}
  .mobile-result-money.is-neutral{color:#65717d}
}


/* =========================================================
   v4.8 – Ergebnis: nur Detailergebnis + verständlicher Syllabus
   ========================================================= */
.result-syllabus{
  margin:22px 0 6px;
  padding:18px 20px;
  border:1px solid #dce6ee;
  border-radius:16px;
  background:linear-gradient(145deg,#f8fbfd,#ffffff);
  color:#566a7d;
}
.result-syllabus h3{
  margin:0 0 12px;
  color:#173b64;
  font-size:1.05rem;
}
.result-syllabus-item{
  display:grid;
  grid-template-columns:minmax(190px, .9fr) minmax(0, 2fr);
  gap:14px;
  padding:10px 0;
  border-top:1px solid #e8edf2;
}
.result-syllabus-item:first-of-type{
  border-top:0;
  padding-top:0;
}
.result-syllabus-item strong{
  color:#234a70;
  font-size:.9rem;
}
.result-syllabus-item span{
  font-size:.86rem;
  line-height:1.45;
}
@media(max-width:700px){
  .result-syllabus{
    margin-top:18px;
    padding:16px 14px;
    border-radius:14px;
  }
  .result-syllabus h3{
    font-size:1rem;
  }
  .result-syllabus-item{
    grid-template-columns:1fr;
    gap:4px;
    padding:10px 0;
  }
  .result-syllabus-item strong{
    font-size:.86rem;
  }
  .result-syllabus-item span{
    font-size:.8rem;
  }
}


/* =========================================================
   v4.9 – Tablet-Header der Startseite
   Auf Tablet dieselbe kompakte Header-Logik wie im Wizard.
   Desktop- und Mobile-Regeln bleiben unverändert.
   ========================================================= */
@media (min-width:701px) and (max-width:1100px){
  .index-hero{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:0 0 16px 16px !important;
    background:linear-gradient(90deg,#0b376b 0%,#315f88 58%,#eef4f7 100%) !important;
  }
  .index-hero img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:left top !important;
  }
}

/* v5.1 – Zielgruppen-Satz Startseite */
.landing-audience{
  max-width:900px;
  margin:10px auto 22px;
  color:#536b80;
  font-size:.98rem;
  line-height:1.55;
  text-align:center;
}
@media(max-width:700px){
  .landing-audience{
    margin:9px 4px 18px;
    font-size:.9rem;
    line-height:1.5;
  }
}


/* =========================================================
   v5.2 – Tablet-Header Startseite kompakt wie im Wizard
   ========================================================= */
@media (min-width:701px) and (max-width:1200px){
  .index-hero{
    width:min(92vw, 980px) !important;
    max-width:980px !important;
    height:auto !important;
    min-height:0 !important;
    margin:18px auto 0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:#ffffff !important;
    box-sizing:border-box !important;
  }

  .index-hero img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
    border-radius:16px !important;
    transform:none !important;
  }
}

/* iPad-ähnliche Breiten im Querformat: noch etwas kompakter */
@media (min-width:900px) and (max-width:1200px){
  .index-hero{
    width:min(86vw, 940px) !important;
  }
}


/* =========================================================
   v5.8 – M1.2: Fahrzeugstammdaten sauber clustern
   Marke | Modell | Erstzulassung | Kilometerstand
   ========================================================= */
#aktuelles-fahrzeug .vehicle-identity-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:end;
}

#aktuelles-fahrzeug .vehicle-identity-grid .field{
  min-width:0;
}

#aktuelles-fahrzeug .vehicle-identity-grid input,
#aktuelles-fahrzeug .vehicle-identity-grid select{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:1000px){
  #aktuelles-fahrzeug .vehicle-identity-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  #aktuelles-fahrzeug .vehicle-identity-grid{
    grid-template-columns:1fr;
  }
}

/* v5.11 – robustes Kosten-Grid + unabhängige Info-Icons */
#aktuelles-fahrzeug .vehicle-cost-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px 14px;
  align-items:start;
}
#aktuelles-fahrzeug .vehicle-cost-grid .field{min-width:0}
#aktuelles-fahrzeug .vehicle-cost-grid .field-head{
  min-height:38px;
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin-bottom:6px;
}
#aktuelles-fahrzeug .vehicle-cost-grid .field-head label{
  margin:0;
  line-height:1.25;
  flex:0 1 auto;
}
#aktuelles-fahrzeug .vehicle-cost-grid input,
#aktuelles-fahrzeug .vehicle-cost-grid select{
  width:100%;
  box-sizing:border-box;
}
.field-info{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;min-width:17px;
  padding:0;margin:0;
  border:1px solid currentColor;
  border-radius:50%;
  background:transparent;
  color:#64748b;
  font:700 11px/15px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  position:relative;
  z-index:20;
}
.field-info::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  width:240px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;color:#334155;
  box-shadow:0 8px 24px rgba(15,23,42,.16);
  font:500 12px/1.35 Arial,sans-serif;
  text-align:left;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;
}
.field-info:hover::after,.field-info:focus::after,.field-info:focus-visible::after{
  opacity:1;visibility:visible;
}
@media(max-width:1000px){
 #aktuelles-fahrzeug .vehicle-cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 #aktuelles-fahrzeug .vehicle-cost-grid{grid-template-columns:1fr}
 .field-info::after{left:auto;right:-8px;transform:none;width:min(240px,75vw)}
}


/* =========================================================
   v5.12 – Feldraster & mobile Info-Popups stabilisieren
   ========================================================= */

/* Einheitliche Feldkopf-Höhe pro Rasterzeile.
   Kurze Labels vermeiden unschöne Einzel-Umbrüche von Einheiten. */
#aktuelles-fahrzeug .vehicle-cost-grid .field{
  display:grid;
  grid-template-rows:46px auto;
  align-content:start;
  min-width:0;
}

#aktuelles-fahrzeug .vehicle-cost-grid .field-head{
  min-height:0 !important;
  height:46px;
  margin-bottom:0 !important;
  display:flex;
  align-items:flex-start;
  gap:5px;
  overflow:visible;
}

#aktuelles-fahrzeug .vehicle-cost-grid .field-head label{
  line-height:1.25;
  margin:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

#aktuelles-fahrzeug .vehicle-cost-grid input,
#aktuelles-fahrzeug .vehicle-cost-grid select{
  align-self:start;
}

/* Tablet: dieselbe saubere 2xN-Logik */
@media (min-width:601px) and (max-width:1000px){
  #aktuelles-fahrzeug .vehicle-cost-grid .field{
    grid-template-rows:46px auto;
  }
  #aktuelles-fahrzeug .vehicle-cost-grid .field-head{
    height:46px;
  }
}

/* Mobil: keine künstliche Label-Höhe; Popup bleibt garantiert im Viewport */
@media(max-width:600px){
  #aktuelles-fahrzeug .vehicle-cost-grid .field{
    display:block;
  }

  #aktuelles-fahrzeug .vehicle-cost-grid .field-head{
    height:auto;
    min-height:0 !important;
    margin-bottom:8px !important;
  }

  .field-info{
    position:static;
  }

  .field-info::after{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    bottom:22px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    box-sizing:border-box;
    z-index:99999 !important;
    font-size:14px;
    line-height:1.4;
    padding:12px 14px;
  }
}

/* =========================================================
   v6.0 PREVIEW – Wizard Design System v1
   Architecture preview: 2 columns desktop/tablet, 1 mobile.
   Info icons intentionally removed until architecture is approved.
   ========================================================= */
#aktuelles-fahrzeug .wizard-clusters{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}
#aktuelles-fahrzeug .wizard-cluster{
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  padding:20px;
  background:rgba(255,255,255,.72);
}
#aktuelles-fahrzeug .wizard-cluster-title{
  margin-bottom:16px;
}
#aktuelles-fahrzeug .wizard-cluster-title h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
  color:#173a6b;
}
#aktuelles-fahrzeug .wizard-cluster-title p{
  margin:5px 0 0;
  font-size:13px;
  line-height:1.35;
  color:#64748b;
}
#aktuelles-fahrzeug .wizard-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px;
  align-items:start;
}
#aktuelles-fahrzeug .wizard-two-col .field{
  display:flex !important;
  flex-direction:column;
  min-width:0;
}
#aktuelles-fahrzeug .wizard-two-col .field label{
  display:block;
  min-height:22px;
  margin:0 0 7px;
  line-height:1.25;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
#aktuelles-fahrzeug .wizard-two-col input,
#aktuelles-fahrzeug .wizard-two-col select{
  width:100%;
  box-sizing:border-box;
}
@media(max-width:600px){
  #aktuelles-fahrzeug .wizard-cluster{padding:16px}
  #aktuelles-fahrzeug .wizard-two-col{grid-template-columns:1fr;gap:14px}
  #aktuelles-fahrzeug .wizard-two-col .field label{min-height:0}
}

/* =========================================================
   v6.1 PREVIEW – Wizard Design System: semantic colors + info
   ========================================================= */
.wizard-clusters{gap:12px!important}
.wizard-cluster{
  padding:16px 18px!important;
  border-radius:16px!important;
}
.wizard-cluster-title{margin-bottom:12px!important}
.wizard-cluster-title h3{font-size:17px!important}
.wizard-cluster-title p{margin-top:3px!important}
.wizard-two-col{gap:12px 16px!important}

/* Semantic pastel language – same meaning throughout wizard */
.cluster-vehicle{
  background:rgba(235,244,255,.72)!important;
  border-color:rgba(91,141,202,.24)!important;
}
.cluster-capital{
  background:rgba(246,242,255,.76)!important;
  border-color:rgba(139,116,190,.22)!important;
}
.cluster-energy{
  background:rgba(235,250,246,.80)!important;
  border-color:rgba(71,157,130,.22)!important;
}
.cluster-running{
  background:rgba(247,248,250,.92)!important;
  border-color:rgba(100,116,139,.20)!important;
}
.cluster-vehicle .wizard-cluster-title h3{color:#315f98!important}
.cluster-capital .wizard-cluster-title h3{color:#66558f!important}
.cluster-energy .wizard-cluster-title h3{color:#397c69!important}
.cluster-running .wizard-cluster-title h3{color:#526173!important}

/* Info icon is a sibling, never part of the label text flow */
.wd-label-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-width:0;
  margin-bottom:7px;
}
.wd-label-row label{margin:0!important;min-height:0!important}
.wd-info{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;min-width:17px;
  padding:0;margin:0;
  border:1px solid #64748b;border-radius:50%;
  background:rgba(255,255,255,.7);color:#64748b;
  font:700 11px/15px Arial,sans-serif;
  cursor:pointer;position:relative;z-index:30;
}
.wd-info::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  width:240px;box-sizing:border-box;
  padding:9px 11px;border-radius:10px;
  border:1px solid rgba(148,163,184,.32);
  background:#fff;color:#334155;
  box-shadow:0 8px 24px rgba(15,23,42,.16);
  font:500 12px/1.35 Arial,sans-serif;
  text-align:left;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;
}
.wd-info:hover::after,.wd-info:focus::after,.wd-info:focus-visible::after{
  opacity:1;visibility:visible;
}
@media(max-width:600px){
  .wizard-cluster{padding:14px!important}
  .wd-info::after{
    position:fixed!important;
    left:14px!important;right:14px!important;
    bottom:18px!important;top:auto!important;
    transform:none!important;
    width:auto!important;max-width:none!important;
    z-index:99999!important;
    font-size:14px;line-height:1.4;padding:12px 14px;
  }
}

/* v6.2 PREVIEW – reine Grafikansicht: Fahrzeug + Energie, danach Kapital + laufende Kosten */
.wizard-cluster-title{margin-bottom:10px!important}
.wizard-cluster-title p{display:none!important}

/* v6.3 PREVIEW – reduzierte Zwei-Farben-Logik */

/* Sicherheit: Untertexte der Clusterüberschriften sind in dieser Preview aus */
.wizard-cluster-title > p,
.wizard-cluster-title > .small,
.wizard-cluster-title > .help,
.wizard-cluster-title > span:not(h3 span){
  display:none!important;
}

/* AKTUELLES FAHRZEUG:
   Fahrzeug + Energie = Blau
   Kapital + laufende Kosten = neutral */
#aktuelles-fahrzeug .cluster-vehicle,
#aktuelles-fahrzeug .cluster-energy{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#aktuelles-fahrzeug .cluster-vehicle .wizard-cluster-title h3,
#aktuelles-fahrzeug .cluster-energy .wizard-cluster-title h3{
  color:#315f98!important;
}
#aktuelles-fahrzeug .cluster-capital,
#aktuelles-fahrzeug .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}
#aktuelles-fahrzeug .cluster-capital .wizard-cluster-title h3,
#aktuelles-fahrzeug .cluster-running .wizard-cluster-title h3{
  color:#526173!important;
}

/* VERGLEICHSFAHRZEUG:
   Fahrzeug + Energie = E-Grün
   Kapital + laufende Kosten = dasselbe Neutralgrau */
#vergleichsfahrzeug .cluster-vehicle,
#vergleichsfahrzeug .cluster-energy{
  background:rgba(235,250,246,.82)!important;
  border-color:rgba(71,157,130,.22)!important;
}
#vergleichsfahrzeug .cluster-vehicle .wizard-cluster-title h3,
#vergleichsfahrzeug .cluster-energy .wizard-cluster-title h3{
  color:#397c69!important;
}
#vergleichsfahrzeug .cluster-capital,
#vergleichsfahrzeug .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}
#vergleichsfahrzeug .cluster-capital .wizard-cluster-title h3,
#vergleichsfahrzeug .cluster-running .wizard-cluster-title h3{
  color:#526173!important;
}

/* =========================================================
   v6.4 PREVIEW – drei Wizardseiten, ohne permanente Hinweistexte
   ========================================================= */
.wizard-cluster .help,
.wizard-cluster .hint,
.wizard-cluster .small,
.wizard-cluster .note,
.wizard-cluster .description{
  display:none!important;
}

/* Einsatzprofil: Blau für Einsatz/Flotte, Energie als dazugehöriger blauer Bereich,
   neutrale weitere Anforderungen. */
#einsatzprofil .cluster-vehicle,
#einsatzprofil .cluster-energy{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#einsatzprofil .cluster-vehicle .wizard-cluster-title h3,
#einsatzprofil .cluster-energy .wizard-cluster-title h3{
  color:#315f98!important;
}
#einsatzprofil .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}

/* Vergleich: Fahrzeug + Energie grün, Kapital + Betrieb neutral. */
#vergleichsfahrzeug .cluster-vehicle,
#vergleichsfahrzeug .cluster-energy{
  background:rgba(235,250,246,.82)!important;
  border-color:rgba(71,157,130,.22)!important;
}
#vergleichsfahrzeug .cluster-capital,
#vergleichsfahrzeug .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}

/* =========================================================
   v6.5 PREVIEW – einheitliches Wizard-Raster auf allen Hauptseiten
   Aktuelles Fahrzeug ist die visuelle Referenz.
   ========================================================= */
#einsatzprofil .wizard-clusters,
#aktuelles-fahrzeug .wizard-clusters,
#vergleichsfahrzeug .wizard-clusters{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  margin-top:18px!important;
}

#einsatzprofil .wizard-cluster,
#aktuelles-fahrzeug .wizard-cluster,
#vergleichsfahrzeug .wizard-cluster{
  display:block!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:16px 18px!important;
  border:1px solid rgba(100,116,139,.20)!important;
  border-radius:16px!important;
  overflow:visible!important;
}

#einsatzprofil .wizard-cluster-title,
#aktuelles-fahrzeug .wizard-cluster-title,
#vergleichsfahrzeug .wizard-cluster-title{
  margin:0 0 10px!important;
  padding:0!important;
}

#einsatzprofil .wizard-cluster-title h3,
#aktuelles-fahrzeug .wizard-cluster-title h3,
#vergleichsfahrzeug .wizard-cluster-title h3{
  margin:0!important;
  font-size:17px!important;
  line-height:1.2!important;
}

#einsatzprofil .wizard-two-col,
#aktuelles-fahrzeug .wizard-two-col,
#vergleichsfahrzeug .wizard-two-col{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 16px!important;
  align-items:start!important;
}

#einsatzprofil .wizard-two-col > .field,
#aktuelles-fahrzeug .wizard-two-col > .field,
#vergleichsfahrzeug .wizard-two-col > .field{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
}

#einsatzprofil .wizard-two-col input,
#einsatzprofil .wizard-two-col select,
#vergleichsfahrzeug .wizard-two-col input,
#vergleichsfahrzeug .wizard-two-col select{
  width:100%!important;
  box-sizing:border-box!important;
}

/* Einsatzprofil: Blau + Neutral, sauber getrennte Karten */
#einsatzprofil .cluster-vehicle,
#einsatzprofil .cluster-energy{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#einsatzprofil .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}
#einsatzprofil .cluster-vehicle h3,
#einsatzprofil .cluster-energy h3{color:#315f98!important}
#einsatzprofil .cluster-running h3{color:#526173!important}

/* Vergleichsfahrzeug: Grün + Neutral, gleiche Kartenmechanik */
#vergleichsfahrzeug .cluster-vehicle,
#vergleichsfahrzeug .cluster-energy{
  background:rgba(235,250,246,.82)!important;
  border-color:rgba(71,157,130,.22)!important;
}
#vergleichsfahrzeug .cluster-capital,
#vergleichsfahrzeug .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}
#vergleichsfahrzeug .cluster-vehicle h3,
#vergleichsfahrzeug .cluster-energy h3{color:#397c69!important}
#vergleichsfahrzeug .cluster-capital h3,
#vergleichsfahrzeug .cluster-running h3{color:#526173!important}

/* Mobile only becomes one column. Tablet remains two columns. */
@media(max-width:600px){
  #einsatzprofil .wizard-two-col,
  #aktuelles-fahrzeug .wizard-two-col,
  #vergleichsfahrzeug .wizard-two-col{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  #einsatzprofil .wizard-cluster,
  #aktuelles-fahrzeug .wizard-cluster,
  #vergleichsfahrzeug .wizard-cluster{
    padding:14px!important;
  }
}

/* v6.6 PREVIEW – Einsatzprofil: Fahrzeug / Einsatz / Energie */
#einsatzprofil .cluster-vehicle{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#einsatzprofil .cluster-vehicle h3{color:#315f98!important}

#einsatzprofil .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}
#einsatzprofil .cluster-running h3{color:#526173!important}

#einsatzprofil .cluster-energy{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#einsatzprofil .cluster-energy h3{color:#315f98!important}

/* v6.7 PREVIEW – Energie vom Einsatzprofil ins E-Vergleichsfahrzeug */

/* Vergleichsfahrzeug: Laden & Energie gehört zur grünen Alternative */
#vergleichsfahrzeug .cluster-energy{
  background:rgba(235,250,246,.82)!important;
  border-color:rgba(71,157,130,.22)!important;
}
#vergleichsfahrzeug .cluster-energy h3{color:#397c69!important}

/* AC und DC bleiben als Paar nebeneinander im 2-Spalten-Raster. */
#vergleichsfahrzeug .public-charge-detail{
  min-width:0;
}

/* Preview: Details zunächst sichtbar, damit das Layout beurteilt werden kann.
   Die spätere Produktlogik kann sie nur bei öffentlichem Laden einblenden. */

/* v6.8 PREVIEW – Referenzfahrzeug + Masterstruktur */

/* Referenzfahrzeug: Fahrzeug und Energie blau */
#aktuelles-fahrzeug .cluster-vehicle,
#aktuelles-fahrzeug .cluster-energy{
  background:rgba(235,244,255,.76)!important;
  border-color:rgba(91,141,202,.24)!important;
}
#aktuelles-fahrzeug .cluster-vehicle h3,
#aktuelles-fahrzeug .cluster-energy h3{color:#315f98!important}

/* Kapital + Betrieb auf beiden Fahrzeugseiten neutral */
#aktuelles-fahrzeug .cluster-capital,
#aktuelles-fahrzeug .cluster-running,
#vergleichsfahrzeug .cluster-capital,
#vergleichsfahrzeug .cluster-running{
  background:rgba(247,248,250,.94)!important;
  border-color:rgba(100,116,139,.20)!important;
}

/* v6.9 PREVIEW – Vergleichsfahrzeug Cluster-Feinschliff */
#vergleichsfahrzeug .wizard-two-col > .force-half{
  grid-column:auto!important;
  width:auto!important;
}
#vergleichsfahrzeug .wizard-two-col > .span-2{
  grid-column:1 / -1!important;
}
#vergleichsfahrzeug .capital-subhead{
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid rgba(100,116,139,.16);
  font-size:13px;
  font-weight:700;
  color:#526173;
}
#vergleichsfahrzeug .capital-mode{
  margin-bottom:2px!important;
}
#vergleichsfahrzeug .preview-derived input[readonly]{
  background:rgba(255,255,255,.58);
}

/* =========================================================
   v7.2 PREVIEW – vollständig isolierter Anschaffungskosten-Block
   ========================================================= */
#vergleichsfahrzeug .capital-v72-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 16px!important;
  align-items:start!important;
}

#vergleichsfahrzeug .capital-mode-v72{
  grid-column:1!important;
  min-width:0!important;
}

#vergleichsfahrzeug .capital-spacer-v72{
  grid-column:2!important;
}

#vergleichsfahrzeug .capital-v72-groups{
  grid-column:1 / -1!important;
}

#vergleichsfahrzeug .capital-v72-group{
  display:none!important;
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(100,116,139,.16);
}

#vergleichsfahrzeug .cluster-capital[data-capital-mode="financial"] .capital-v72-financial{
  display:block!important;
}
#vergleichsfahrzeug .cluster-capital[data-capital-mode="operating"] .capital-v72-operating{
  display:block!important;
}
#vergleichsfahrzeug .cluster-capital[data-capital-mode="purchase"] .capital-v72-purchase{
  display:block!important;
}

#vergleichsfahrzeug .capital-v72-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#526173;
}

#vergleichsfahrzeug .capital-v72-inner{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 16px!important;
}

#vergleichsfahrzeug .capital-v72-inner > .field{
  min-width:0!important;
  width:auto!important;
  margin:0!important;
}

@media(max-width:600px){
  #vergleichsfahrzeug .capital-v72-grid,
  #vergleichsfahrzeug .capital-v72-inner{
    grid-template-columns:1fr!important;
  }
  #vergleichsfahrzeug .capital-mode-v72,
  #vergleichsfahrzeug .capital-spacer-v72,
  #vergleichsfahrzeug .capital-v72-groups{
    grid-column:1!important;
  }
  #vergleichsfahrzeug .capital-spacer-v72{
    display:none!important;
  }
}

/* v7.4 – Ohne aktive Beschaffungsart bleibt der Bereich bewusst leer. */
#vergleichsfahrzeug .cluster-capital[data-capital-mode=""] .capital-v72-group{
  display:none!important;
}

/* v7.5 – transparente Quellenangabe direkt am Wert */
#vergleichsfahrzeug .data-source-note{
  margin-top:5px;
  font-size:11px;
  line-height:1.3;
  color:#64748b;
}
#vergleichsfahrzeug #cmpWLTP[readonly],
#vergleichsfahrzeug #cmpPublicDC[readonly]{
  background:rgba(255,255,255,.58);
}

/* v7.6 – keine sichtbare Quellenzeile unter dem Energiepreis */
#vergleichsfahrzeug .data-source-note{display:none!important}

/* v7.11 – Eingabe vor Ergebnis: Lademöglichkeit -> Energiepreis */
#vergleichsfahrzeug #cmpChargingAccess,
#vergleichsfahrzeug #altEnergy{width:100%}
@media(max-width:600px){
  #vergleichsfahrzeug .cluster-energy .wizard-two-col{
    grid-template-columns:1fr!important;
  }
}

.vehicle-category-title{font-weight:500;opacity:.78}
@media(max-width:600px){.vehicle-category-title{display:block;margin-top:3px;font-size:.88em}}

/* v7.16 – Quellen & Methodik */
.sources-card h2{margin:26px 0 8px;font-size:18px;color:#26384a}
.sources-card p{line-height:1.58}
.sources-card ul{padding-left:22px;line-height:1.58}
.sources-card li{margin:6px 0}

/* v7.17 – Kataloghinweis */
.catalog-policy-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.35;
  color:#64748b;
}

/* =========================================================
   v7.22 – Referenzfahrzeug: exakt dieselben Layoutregeln wie
   das E-Vergleichsfahrzeug
   ========================================================= */

/* Fahrzeug: Variante/Antrieb bleibt exakt eine Spalte breit. */
#aktuelles-fahrzeug .wizard-two-col > .force-half{
  grid-column:auto!important;
  width:auto!important;
}

/* Plug-in-Hybrid-Felder müssen bei nicht ladbarem Antrieb wirklich verschwinden.
   Diese Regel ist absichtlich spezifischer als .wizard-two-col > .field {display:flex!important}. */
#aktuelles-fahrzeug .wizard-two-col > .field.cur-phev-only.hidden{
  display:none!important;
}

/* Anschaffungskosten – 1:1 Spiegelung der bewährten Vergleichsfahrzeug-Regeln. */
#aktuelles-fahrzeug .capital-v72-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 16px!important;
  align-items:start!important;
}

#aktuelles-fahrzeug .capital-mode-v72{
  grid-column:1!important;
  min-width:0!important;
}

#aktuelles-fahrzeug .capital-spacer-v72{
  grid-column:2!important;
}

#aktuelles-fahrzeug .capital-v72-groups{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}

#aktuelles-fahrzeug .capital-v72-group{
  display:none!important;
  width:100%!important;
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(100,116,139,.16);
}

#aktuelles-fahrzeug .cluster-capital[data-capital-mode="financial"] .capital-v72-financial{
  display:block!important;
}
#aktuelles-fahrzeug .cluster-capital[data-capital-mode="operating"] .capital-v72-operating{
  display:block!important;
}
#aktuelles-fahrzeug .cluster-capital[data-capital-mode="purchase"] .capital-v72-purchase{
  display:block!important;
}
#aktuelles-fahrzeug .cluster-capital[data-capital-mode=""] .capital-v72-group{
  display:none!important;
}

#aktuelles-fahrzeug .capital-v72-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#526173;
}

#aktuelles-fahrzeug .capital-v72-inner{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 16px!important;
  width:100%!important;
}

#aktuelles-fahrzeug .capital-v72-inner > .field{
  min-width:0!important;
  width:auto!important;
  margin:0!important;
}

#aktuelles-fahrzeug .capital-v72-inner input,
#aktuelles-fahrzeug .capital-v72-inner select{
  width:100%!important;
  box-sizing:border-box!important;
}

@media(max-width:600px){
  #aktuelles-fahrzeug .capital-v72-grid,
  #aktuelles-fahrzeug .capital-v72-inner{
    grid-template-columns:1fr!important;
  }
  #aktuelles-fahrzeug .capital-mode-v72,
  #aktuelles-fahrzeug .capital-spacer-v72,
  #aktuelles-fahrzeug .capital-v72-groups{
    grid-column:1!important;
  }
  #aktuelles-fahrzeug .capital-spacer-v72{
    display:none!important;
  }
}

/* v7.23 – Fahrzeugauswahl: Marke/Modell, Variante/Motorisierung */
#aktuelles-fahrzeug .cluster-vehicle .wizard-two-col > .field{
  grid-column:auto!important;
}
#aktuelles-fahrzeug #curDrive[readonly]{
  background:rgba(255,255,255,.58);
}

/* v7.24 – Fahrzeugfeld-Ausrichtung */
#aktuelles-fahrzeug .cluster-vehicle .wd-label-row{
  min-height:22px!important;
  align-items:center!important;
}
#aktuelles-fahrzeug .cluster-vehicle .field > select{
  margin-top:0!important;
}
#aktuelles-fahrzeug .cluster-vehicle .vehicle-engine-field{
  align-self:start!important;
}
#aktuelles-fahrzeug input[readonly]{
  background:rgba(255,255,255,.58);
}

/* v7.25 – reduzierte Startseite */
.landing-minimal{
  min-height:calc(100vh - 150px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px 64px;
}
.landing-hero{
  width:100%;
}
.landing-hero-inner{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}
.landing-catchphrase{
  margin:0 0 20px;
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
  color:#173a6b;
}
.landing-hero h1{
  margin:0;
  font-size:clamp(34px,5vw,64px);
  line-height:1.05;
  letter-spacing:-0.03em;
}
.landing-question{
  margin:22px 0 0;
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.18;
  font-weight:700;
}
.landing-findout{
  margin:14px 0 28px;
  font-size:clamp(18px,2.3vw,26px);
  font-weight:600;
}
.landing-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 26px;
  border-radius:14px;
  text-decoration:none;
  font-weight:750;
  font-size:18px;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}
.landing-values{
  margin:20px 0 0;
  font-size:14px;
  letter-spacing:.02em;
  opacity:.72;
}
@media(max-width:600px){
  .landing-minimal{
    min-height:calc(100vh - 130px);
    padding:34px 18px 48px;
  }
  .landing-hero-inner{
    max-width:520px;
  }
  .landing-catchphrase{
    margin-bottom:16px;
  }
  .landing-cta{
    width:100%;
    max-width:360px;
  }
}

/* =========================================================
   v7.26 – Startseite kompakt, markentypisch, CTA above the fold
   ========================================================= */
.landing-minimal{
  min-height:0!important;
  display:block!important;
  padding:14px 18px 18px!important;
  background:
    linear-gradient(135deg,
      rgba(232,240,249,.96) 0%,
      rgba(247,249,251,.98) 50%,
      rgba(231,245,239,.92) 100%)!important;
}
.landing-hero{
  width:100%;
  margin:0!important;
}
.landing-hero-inner{
  width:min(92vw,900px)!important;
  max-width:900px!important;
  margin:0 auto!important;
  padding:22px 28px 24px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.66)!important;
  border:1px solid rgba(65,104,147,.13)!important;
  box-shadow:0 10px 30px rgba(34,64,94,.08)!important;
  backdrop-filter:blur(3px);
}
.landing-catchphrase{
  margin:0 0 13px!important;
  font-size:clamp(18px,2vw,24px)!important;
  line-height:1.2!important;
  font-weight:800!important;
  color:#173a6b!important;
}
.landing-message{
  margin:0!important;
}
.landing-core-line{
  margin:0!important;
  font-size:clamp(27px,3.35vw,43px)!important;
  line-height:1.14!important;
  letter-spacing:-.02em!important;
  font-weight:750!important;
  color:#244664!important;
}
.landing-core-question{
  margin-top:7px!important;
  color:#397c69!important;
}
.landing-findout{
  margin:14px 0 18px!important;
  font-size:clamp(18px,2vw,23px)!important;
  line-height:1.2!important;
  font-weight:750!important;
  color:#173a6b!important;
}
.landing-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:52px!important;
  padding:0 27px!important;
  border:2px solid #397c69!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.86)!important;
  color:#173a6b!important;
  text-decoration:none!important;
  font-weight:800!important;
  font-size:18px!important;
  box-shadow:0 7px 18px rgba(23,58,107,.10)!important;
}
.landing-cta:hover,
.landing-cta:focus-visible{
  background:rgba(231,245,239,.96)!important;
  box-shadow:0 9px 22px rgba(23,58,107,.14)!important;
}
.landing-values{display:none!important}

.landing-footer{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:14px 16px 18px!important;
  font-size:13px!important;
  color:#64748b!important;
  background:#fff!important;
}
.landing-footer a{
  color:#526173!important;
  text-decoration:none!important;
}
.landing-footer a:hover{text-decoration:underline!important}

/* weniger Weißraum direkt unter dem Header */
.index-hero + .landing-minimal{
  margin-top:0!important;
}

/* iPhone/mobile: CTA sicher ohne Scrollen sichtbar */
@media(max-width:600px){
  .index-hero{
    padding-bottom:0!important;
  }
  .landing-minimal{
    padding:6px 12px 12px!important;
  }
  .landing-hero-inner{
    width:100%!important;
    padding:15px 15px 17px!important;
    border-radius:16px!important;
  }
  .landing-catchphrase{
    margin-bottom:9px!important;
    font-size:17px!important;
  }
  .landing-core-line{
    font-size:clamp(23px,7vw,30px)!important;
    line-height:1.12!important;
  }
  .landing-core-question{
    margin-top:5px!important;
  }
  .landing-findout{
    margin:10px 0 13px!important;
    font-size:18px!important;
  }
  .landing-cta{
    width:100%!important;
    max-width:340px!important;
    min-height:48px!important;
    padding:0 16px!important;
    font-size:17px!important;
  }
  .landing-footer{
    padding-top:10px!important;
  }
}

/* Tablet: ebenfalls kompakt halten, CTA bleibt im ersten Viewport */
@media(min-width:601px) and (max-width:1200px){
  .landing-minimal{
    padding:10px 18px 16px!important;
  }
  .landing-hero-inner{
    padding:20px 26px 22px!important;
  }
}

/* v7.27 – Startseiten-Textfassung */
.landing-core-question{
  margin-top:8px!important;
}
.landing-cta{
  margin-top:20px!important;
}
@media(max-width:600px){
  .landing-cta{
    margin-top:14px!important;
  }
}

/* =========================================================
   v7.28 – Startseite Feinschliff: weißer Hintergrund, silberne Box,
   leichterer Schriftschnitt, Stromgrün/Blau gemäß E-Fleet-Logik
   ========================================================= */
.landing-minimal{
  background:#fff!important;
}

.landing-hero-inner{
  background:linear-gradient(135deg,#eef1f4 0%,#e5e9ed 100%)!important;
  border:1px solid rgba(82,97,115,.18)!important;
  box-shadow:0 10px 24px rgba(34,64,94,.07)!important;
}

.landing-catchphrase{
  color:#4f9f72!important;
  font-weight:600!important;
}

.landing-core-line{
  color:#244664!important;
  font-weight:500!important;
}

.landing-core-question{
  color:#244664!important;
  font-weight:500!important;
}

.landing-cta{
  background:#fff!important;
  border:2px solid #173a6b!important;
  color:#4f9f72!important;
  font-weight:650!important;
}

.landing-cta:hover,
.landing-cta:focus-visible{
  background:#f7fafc!important;
  border-color:#173a6b!important;
  color:#4f9f72!important;
}

@media(max-width:600px){
  .landing-catchphrase{
    font-weight:600!important;
  }
  .landing-core-line,
  .landing-core-question{
    font-weight:500!important;
  }
}

/* =========================================================
   v7.29 – Startseite Mobile/Tablet:
   Silberblock exakt auf Headerbreite, Kernbotschaften einzeilig
   ========================================================= */

/* Die drei Botschaftszeilen bleiben bewusst jeweils einzeilig. */
.landing-catchphrase,
.landing-core-line,
.landing-core-question{
  white-space:nowrap!important;
}

/* Tablet: dieselbe Breite wie der dortige Header (v5.2: 92vw/980px,
   im Querformat 86vw/940px). */
@media (min-width:601px) and (max-width:1200px){
  .landing-hero-inner{
    width:min(92vw,980px)!important;
    max-width:980px!important;
  }
  .landing-catchphrase{
    font-size:clamp(15px,2.25vw,22px)!important;
  }
  .landing-core-line,
  .landing-core-question{
    font-size:clamp(18px,3.15vw,34px)!important;
  }
}
@media (min-width:900px) and (max-width:1200px){
  .landing-hero-inner{
    width:min(86vw,940px)!important;
    max-width:940px!important;
  }
}

/* Mobile: Header liegt innerhalb 22px Seitenpadding und ist dort 100% breit.
   Der Silberblock verwendet exakt dieselbe horizontale Geometrie. */
@media(max-width:600px){
  .landing-minimal{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .landing-hero-inner{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Skalierung nach verfügbarer Viewportbreite statt Umbruch. */
  .landing-catchphrase{
    font-size:clamp(11px,3.55vw,17px)!important;
    letter-spacing:-.015em!important;
  }
  .landing-core-line,
  .landing-core-question{
    font-size:clamp(11px,4.25vw,23px)!important;
    letter-spacing:-.025em!important;
    line-height:1.16!important;
  }
}

/* =========================================================
   v7.30 – Startseite nutzt den verfügbaren Viewport dynamisch
   Header oben, Footer unten, Silberblock füllt den Zwischenraum.
   ========================================================= */

/* Gesamte Startseite als vertikale Viewport-Komposition */
body:has(.landing-minimal){
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
}

/* Header bleibt oben */
body:has(.landing-minimal) > .index-hero{
  flex:0 0 auto!important;
}

/* Hauptbereich wächst zwischen Header und Footer */
body:has(.landing-minimal) > .landing-minimal{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Footer bildet den sichtbaren Abschluss */
body:has(.landing-minimal) > .landing-footer{
  flex:0 0 auto!important;
  margin-top:0!important;
}

/* Silberner Block nutzt die verfügbare Höhe, ohne die CTA nach unten zu drücken */
.landing-hero{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
}
.landing-hero-inner{
  min-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* Die Botschaft wird über die Höhe entzerrt */
.landing-catchphrase{
  margin-bottom:clamp(14px,2.3vh,28px)!important;
}
.landing-message{
  display:flex!important;
  flex-direction:column!important;
  gap:clamp(8px,1.8vh,20px)!important;
}
.landing-core-question{
  margin-top:0!important;
}

/* CTA bleibt klar separat und sichtbar */
.landing-cta{
  margin-top:clamp(22px,4vh,42px)!important;
  align-self:center!important;
  flex:0 0 auto!important;
}

/* Footer optisch klarer Abschluss */
.landing-footer{
  border-top:1px solid rgba(82,97,115,.10)!important;
}

/* Desktop: Silberblock darf großzügig werden, aber nicht absurd hoch */
@media(min-width:1201px){
  .landing-hero-inner{
    justify-content:center!important;
    padding-top:clamp(34px,5vh,64px)!important;
    padding-bottom:clamp(34px,5vh,64px)!important;
  }
}

/* Tablet */
@media(min-width:601px) and (max-width:1200px){
  body:has(.landing-minimal) > .landing-minimal{
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
  .landing-hero-inner{
    justify-content:center!important;
    padding-top:clamp(24px,4vh,42px)!important;
    padding-bottom:clamp(24px,4vh,42px)!important;
  }
  .landing-cta{
    margin-top:clamp(20px,3vh,34px)!important;
  }
}

/* Mobile: volle Höhe nutzen, CTA im ersten Viewport halten */
@media(max-width:600px){
  body:has(.landing-minimal){
    min-height:100svh!important;
  }
  body:has(.landing-minimal) > .landing-minimal{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  .landing-hero-inner{
    justify-content:space-evenly!important;
    padding-top:16px!important;
    padding-bottom:16px!important;
  }
  .landing-message{
    gap:clamp(6px,1.4vh,12px)!important;
  }
  .landing-catchphrase{
    margin-bottom:clamp(10px,1.8vh,16px)!important;
  }
  .landing-cta{
    margin-top:clamp(16px,2.4vh,24px)!important;
  }
  .landing-footer{
    padding-top:9px!important;
    padding-bottom:11px!important;
  }
}

/* Niedrige Viewports: kompakter werden, damit nichts unter den Fold rutscht */
@media(max-height:720px){
  .landing-hero-inner{
    padding-top:14px!important;
    padding-bottom:14px!important;
  }
  .landing-catchphrase{
    margin-bottom:10px!important;
  }
  .landing-message{
    gap:6px!important;
  }
  .landing-cta{
    margin-top:16px!important;
  }
}

/* =========================================================
   v7.31 – Startseite Mobile neu balanciert
   Tablet-Regeln bleiben unverändert.
   ========================================================= */

/* Auf allen Größen den verfügbaren Silberblock auch textlich nutzen. */
.landing-hero-inner{
  justify-content:space-between!important;
}
.landing-catchphrase,
.landing-message,
.landing-cta{
  flex:0 0 auto!important;
}

/* Desktop/Tablet: Text vertikal über den Block verteilen, ohne das gute Layout zu zerstören. */
@media(min-width:601px){
  .landing-hero-inner{
    justify-content:space-evenly!important;
  }
  .landing-message{
    gap:clamp(14px,2.4vh,28px)!important;
  }
  .landing-cta{
    margin-top:clamp(18px,2.8vh,30px)!important;
  }
}

/* Mobile komplett eigenständig: weniger "gestapelt", mehr über die verfügbare Höhe verteilt. */
@media(max-width:600px){
  .landing-minimal{
    display:flex!important;
    align-items:stretch!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  .landing-hero{
    display:flex!important;
    align-items:stretch!important;
  }
  .landing-hero-inner{
    display:grid!important;
    grid-template-rows:auto 1fr auto!important;
    align-items:center!important;
    justify-items:center!important;
    width:100%!important;
    min-height:100%!important;
    padding:18px 14px 18px!important;
    box-sizing:border-box!important;
  }

  .landing-catchphrase{
    margin:0!important;
    align-self:start!important;
    font-size:clamp(11px,3.4vw,15px)!important;
    line-height:1.18!important;
  }

  .landing-message{
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-evenly!important;
    gap:0!important;
    width:100%!important;
    padding:clamp(18px,5vh,42px) 0!important;
    box-sizing:border-box!important;
  }

  .landing-core-line,
  .landing-core-question{
    margin:0!important;
    font-size:clamp(12px,4.1vw,20px)!important;
    line-height:1.18!important;
    white-space:nowrap!important;
  }

  .landing-cta{
    align-self:end!important;
    margin:0!important;
    width:100%!important;
    max-width:340px!important;
    min-height:48px!important;
  }

  .landing-footer{
    padding-top:8px!important;
    padding-bottom:10px!important;
  }
}

/* Sehr kleine bzw. niedrige Mobilgeräte: vertikale Abstände enger,
   die drei Sätze bleiben trotzdem getrennt. */
@media(max-width:600px) and (max-height:700px){
  .landing-hero-inner{
    padding-top:13px!important;
    padding-bottom:13px!important;
  }
  .landing-message{
    padding:14px 0!important;
  }
  .landing-core-line,
  .landing-core-question{
    font-size:clamp(11px,3.85vw,18px)!important;
  }
}

/* =========================================================
   v7.32 – FINALER Mobile-Startseiten-Fix
   Tablet/Desktop bleiben unverändert.
   Mobile übernimmt die kompakten Proportionen der Tablet-Version.
   ========================================================= */
@media(max-width:600px){

  /* Keine künstliche Viewport-Streckung mehr auf Mobile. */
  body:has(.landing-minimal){
    min-height:100svh!important;
    display:block!important;
  }

  body:has(.landing-minimal) > .index-hero{
    display:flex!important;
  }

  body:has(.landing-minimal) > .landing-minimal{
    display:block!important;
    min-height:0!important;
    padding:6px 22px 10px!important;
  }

  .landing-hero{
    display:block!important;
    width:100%!important;
  }

  /* Gleiche Breite wie der mobile Header, aber Höhe nur nach Inhalt. */
  .landing-hero-inner{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:22px 16px 24px!important;
    box-sizing:border-box!important;
  }

  /* Tablet-artige, ruhige Abstände statt space-evenly. */
  .landing-catchphrase{
    margin:0 0 22px!important;
    font-size:clamp(11px,3.4vw,15px)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .landing-message{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }

  .landing-core-line,
  .landing-core-question{
    margin:0!important;
    font-size:clamp(12px,4.05vw,20px)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  /* CTA wie am Tablet separat, aber unmittelbar nach der Botschaft. */
  .landing-cta{
    display:inline-flex!important;
    width:auto!important;
    min-width:min(82%,340px)!important;
    max-width:340px!important;
    min-height:48px!important;
    margin:26px auto 0!important;
    padding:0 18px!important;
  }

  /* Footer folgt danach; verbleibender Bildschirmraum darf bewusst weiß bleiben. */
  body:has(.landing-minimal) > .landing-footer{
    margin-top:0!important;
    padding:10px 12px 12px!important;
  }
}

/* Auch bei niedrigen Mobilgeräten keine erneute Entzerrung. */
@media(max-width:600px) and (max-height:700px){
  .landing-hero-inner{
    padding:18px 14px 20px!important;
  }
  .landing-catchphrase{
    margin-bottom:17px!important;
  }
  .landing-message{
    gap:9px!important;
  }
  .landing-cta{
    margin-top:20px!important;
  }
}

/* v7.33 – Einsatzprofil-Kopf identisch zu Referenz-/E-Vergleichsfahrzeug */
#einsatzprofil > h2{
  /* gemeinsame Wizard-H2-Typografie verwenden */
}

/* v7.41 – neue Startseiten-Texthierarchie, keine strukturelle Layoutänderung */
.landing-findout{
  display:block!important;
  margin:14px 0 0!important;
  color:#244664!important;
  font-weight:600!important;
}

/* =========================================================
   v7.43 – Startseite: einheitliche Schriftgröße + Headerfarben
   Farbwerte direkt aus assets/header.jpg abgeleitet:
   Dunkelblau #02276c / #033077, Stromgrün ca. #69b937.
   ========================================================= */
:root{
  --efleet-header-blue:#02276c;
  --efleet-header-blue-mid:#1e4a8b;
  --efleet-header-green:#69b937;
}

/* Alle vier zentralen Aussagen dieselbe Größe. */
.landing-catchphrase,
.landing-core-line,
.landing-core-question,
.landing-findout{
  font-size:clamp(18px,2vw,24px)!important;
  line-height:1.25!important;
  font-weight:500!important;
}
.landing-catchphrase{margin-bottom:16px!important}
.landing-message{gap:12px!important}
.landing-findout{margin:16px 0 0!important}

.efleet-green{color:var(--efleet-header-green)!important}
.efleet-blue{color:var(--efleet-header-blue)!important}

/* CTA als Wiederaufnahme des Header-Looks. */
.landing-cta{
  margin-top:22px!important;
  background:linear-gradient(90deg,var(--efleet-header-blue) 0%,var(--efleet-header-blue-mid) 62%,#4a6da4 100%)!important;
  border:1px solid rgba(2,39,108,.88)!important;
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  box-shadow:0 8px 20px rgba(2,39,108,.20)!important;
}
.landing-cta .cta-white{color:#fff!important}
.landing-cta .cta-green{color:var(--efleet-header-green)!important}
.landing-cta:hover,
.landing-cta:focus-visible{
  background:linear-gradient(90deg,#032f7c 0%,#255394 62%,#5677aa 100%)!important;
  color:#fff!important;
}

/* Mobile/Tablet: gleiche Textgröße innerhalb des jeweiligen Viewports;
   keine neue strukturelle Layoutänderung. */
@media(max-width:600px){
  .landing-catchphrase,
  .landing-core-line,
  .landing-core-question,
  .landing-findout{
    font-size:clamp(11px,3.45vw,15px)!important;
    line-height:1.22!important;
    white-space:nowrap!important;
  }
  .landing-catchphrase{margin-bottom:16px!important}
  .landing-message{gap:10px!important}
  .landing-findout{margin-top:14px!important}
  .landing-cta{margin-top:20px!important}
}
@media(min-width:601px) and (max-width:1200px){
  .landing-catchphrase,
  .landing-core-line,
  .landing-core-question,
  .landing-findout{
    font-size:clamp(15px,2.25vw,22px)!important;
    line-height:1.24!important;
  }
}

/* =========================================================
   v7.44 – Mobile Startseite: längste Botschaft bleibt im Silberblock
   Alle zentralen Textzeilen behalten dieselbe Schriftgröße.
   ========================================================= */
@media(max-width:600px){
  .landing-catchphrase,
  .landing-core-line,
  .landing-core-question,
  .landing-findout{
    font-size:clamp(9px,2.35vw,13px)!important;
    line-height:1.24!important;
    white-space:nowrap!important;
    letter-spacing:-.01em!important;
  }
}

/* =========================================================
   v7.48 – Startseite NUR Mobile: größere Typografie und klare Blöcke
   Tablet/Desktop bleiben unverändert.
   ========================================================= */
.mobile-only-break{display:none!important;}

@media(max-width:600px){
  .mobile-only-break{display:inline!important;}

  /* Silberblock etwas großzügiger nutzen. */
  .landing-hero-inner{
    padding-top:26px!important;
    padding-bottom:28px!important;
  }

  /* E-Fleet Check prominent, aber in derselben mobilen Grundgröße
     wie die restliche Botschaft. */
  .landing-catchphrase,
  .landing-core-line,
  .landing-core-question,
  .landing-findout{
    font-size:clamp(17px,4.55vw,21px)!important;
    line-height:1.28!important;
    letter-spacing:-.015em!important;
  }

  .landing-catchphrase{
    margin:0 0 28px!important;
    font-weight:600!important;
  }

  /* Positionierungssatz darf bewusst zweizeilig sein. */
  .landing-core-line{
    white-space:normal!important;
  }

  /* Zwischen Positionierung und Zielgruppen-/Nutzenblock derselbe
     deutliche Abstand wie nach E-Fleet Check. */
  .landing-message{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  .landing-message .landing-core-line:first-child{
    margin:0 0 28px!important;
  }

  /* Zielgruppe + Nutzen als zusammengehöriger Block. */
  .landing-core-question{
    margin:0!important;
    white-space:nowrap!important;
  }
  .landing-findout{
    margin:8px 0 0!important;
    white-space:nowrap!important;
  }

  /* CTA wieder deutlich vom Textblock absetzen; darf weiter unten stehen. */
  .landing-cta{
    margin-top:32px!important;
  }
}

/* Sehr schmale Geräte: Schrift nur so weit reduzieren, dass die beiden
   einzeiligen Kernzeilen sicher im Silberblock bleiben. */
@media(max-width:380px){
  .landing-catchphrase,
  .landing-core-line,
  .landing-core-question,
  .landing-findout{
    font-size:clamp(15px,4.15vw,18px)!important;
  }
}

/* =========================================================
   v7.49 – Mobile Startseite: Kernblock passt sicher + E-Fleet-Check
   mit abgerundeter CI-Anmutung wie im Headerbild.
   Tablet/Desktop bleiben unverändert.
   ========================================================= */
@media(max-width:600px){

  /* Die beiden zusammengehörigen Kernzeilen dürfen etwas kleiner sein,
     damit sie jeweils sauber in eine Zeile passen. */
  .landing-core-question,
  .landing-findout{
    font-size:clamp(14px,3.72vw,18px)!important;
    line-height:1.24!important;
    letter-spacing:-.018em!important;
    white-space:nowrap!important;
  }

  /* E-Fleet Check bekommt eine abgerundete, technischere Wortmarken-Anmutung.
     Der Header selbst ist ein Bild; deshalb verwenden wir hier die nächstliegende
     lokal verfügbare Rounded-Font-Kaskade statt eine externe Schrift nachzuladen. */
  .landing-catchphrase{
    font-family:"Arial Rounded MT Bold","Avenir Next Rounded","Nunito Sans Rounded","Trebuchet MS",system-ui,sans-serif!important;
    font-weight:700!important;
    letter-spacing:.025em!important;
  }
}

/* Sehr schmale Geräte: Kernblock minimal weiter reduzieren, ohne Umbruch. */
@media(max-width:380px){
  .landing-core-question,
  .landing-findout{
    font-size:clamp(13px,3.55vw,16px)!important;
  }
}

/* v7.52 – fünf Ergebniszeilen, bestehendes Karten-Design */
.mobile-purchase-note{margin:12px 0 18px;padding:12px 14px;border:1px solid #d7e0e9;border-radius:12px;background:#f7f9fb;color:#526173;font-size:.88rem;line-height:1.4}
@media(max-width:1100px){.mobile-result-bar{line-height:1.25!important}}
@media(max-width:600px){.mobile-result-bar{font-size:clamp(15px,4vw,18px)!important}.mobile-result-group{margin-bottom:16px!important}}

/* =========================================================
   v7.53 – Startseite: „Ihr Vergleich in vier Bereichen“
   Inhalt/Typografie/Trennlinien = bestehendes result-syllabus Design.
   Nur Breite/Position an Startseiten-Silberblock angeglichen.
   ========================================================= */
.landing-comparison-explainer{
  width:100%;
  margin:0;
  padding:0 18px 28px;
  box-sizing:border-box;
  background:#fff;
}
.landing-comparison-explainer > .result-syllabus{
  width:min(92vw,900px)!important;
  max-width:900px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
@media(max-width:600px){
  .landing-comparison-explainer{
    padding:0 22px 22px!important;
  }
  .landing-comparison-explainer > .result-syllabus{
    width:100%!important;
    max-width:none!important;
  }
}
@media(min-width:601px) and (max-width:1200px){
  .landing-comparison-explainer{
    padding-left:0!important;
    padding-right:0!important;
  }
  .landing-comparison-explainer > .result-syllabus{
    width:min(92vw,900px)!important;
    max-width:900px!important;
  }
}

/* =========================================================
   v7.54 – Universeller buchhalterischer Ergebnisblock
   Eine Komponente für Desktop, Tablet und Mobile.
   Farbspalten ziehen sich durch Kopf, Zeilentitel und Wertebereich.
   ========================================================= */
.accounting-result{
  width:100%;
  margin:22px 0 26px;
  border:1px solid #d7e0e9;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-sizing:border-box;
}
.accounting-head,
.accounting-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.accounting-col,
.accounting-value{
  min-width:0;
  text-align:center;
  padding:18px 12px;
  box-sizing:border-box;
}
.accounting-col strong{display:block;color:#173a6b;font-size:1rem}
.accounting-col span{display:block;margin-top:5px;color:#5f7083;font-size:.86rem}
.accounting-alt strong{color:#26733a}
.accounting-ref{background:linear-gradient(90deg,rgba(222,238,252,.92),rgba(255,255,255,.90))}
.accounting-alt{background:linear-gradient(90deg,rgba(232,247,226,.92),rgba(255,255,255,.90))}
.accounting-diff{background:linear-gradient(90deg,rgba(226,229,234,.92),rgba(255,255,255,.90))}
.accounting-head{border-bottom:1px solid #d5dde6}

.accounting-row{border-bottom:1px solid #d9e0e7}
.accounting-row:last-of-type{border-bottom:0}
.accounting-row-title{
  position:relative;
  padding:14px 20px 9px;
  font-weight:700;
  color:#173a6b;
  line-height:1.3;
  /* same three-color field continues behind the full-width label */
  background:linear-gradient(90deg,
    rgba(222,238,252,.78) 0%,rgba(255,255,255,.88) 33.333%,
    rgba(232,247,226,.78) 33.334%,rgba(255,255,255,.88) 66.666%,
    rgba(226,229,234,.78) 66.667%,rgba(255,255,255,.88) 100%);
}
.accounting-row-title small{
  display:block;
  margin-top:4px;
  font-weight:400;
  color:#5f7083;
  font-size:.84em;
}
.accounting-value{
  padding-top:16px;
  padding-bottom:20px;
  font-size:1.35rem;
  font-weight:750;
  color:#173a6b;
}
.accounting-value.accounting-alt{color:#26733a}
.accounting-value.accounting-diff.diff-positive{color:#c93636}
.accounting-value.accounting-diff.diff-negative{color:#26733a}
.accounting-sum{border-top:2px solid #49627c}
.accounting-total{border-top:3px solid #49627c}
.accounting-sum .accounting-row-title,
.accounting-total .accounting-row-title{font-weight:800}
.accounting-note{
  margin:16px;
  padding:12px 14px;
  border:1px solid #d7e0e9;
  border-radius:12px;
  background:#f7f9fb;
  color:#526173;
  font-size:.88rem;
  line-height:1.4;
}

/* Mobile: gleiche Logik, nur kompakter. Keine separaten Karten mehr. */
@media(max-width:600px){
  .accounting-result{border-radius:15px;margin-top:16px}
  .accounting-col,.accounting-value{padding-left:6px;padding-right:6px}
  .accounting-col strong{font-size:clamp(11px,3.05vw,14px);line-height:1.15}
  .accounting-col span{font-size:clamp(9px,2.55vw,12px);line-height:1.15}
  .accounting-row-title{padding:12px 14px 7px;font-size:clamp(14px,3.8vw,17px)}
  .accounting-value{font-size:clamp(17px,5vw,23px);padding-top:13px;padding-bottom:16px}
}
/* Tablet: etwas großzügiger, aber identische Struktur. */
@media(min-width:601px) and (max-width:1100px){
  .accounting-col strong{font-size:.95rem}
  .accounting-value{font-size:1.28rem}
}

/* =========================================================
   v7.56 – Mobile Ergebnisblock: Schriftgrößen korrigiert
   ========================================================= */
@media(max-width:600px){
  .accounting-head{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .accounting-col{
    padding:12px 5px!important;
  }

  .accounting-col strong{
    font-size:clamp(9px,2.55vw,12px)!important;
    line-height:1.12!important;
    overflow-wrap:anywhere!important;
  }

  .accounting-col span{
    font-size:clamp(8px,2.15vw,10px)!important;
    line-height:1.12!important;
    margin-top:3px!important;
    overflow-wrap:anywhere!important;
  }

  .accounting-row-title{
    font-size:clamp(12px,3.25vw,15px)!important;
    line-height:1.2!important;
    padding:10px 12px 7px!important;
    overflow-wrap:anywhere!important;
  }

  .accounting-row-title small{
    font-size:.78em!important;
    line-height:1.18!important;
  }

  .accounting-value{
    font-size:clamp(15px,4.4vw,20px)!important;
    line-height:1.1!important;
    padding:12px 4px 14px!important;
  }
}

/* =========================================================
   v7.57 – Ergebnis Feinschliff
   ========================================================= */

/* Feiner Buchhaltungsstrich zwischen Zeilenbezeichnung und Beträgen.
   Der stärkere Abschlussstrich zwischen den Kostenblöcken bleibt bestehen. */
.accounting-row-title{
  border-bottom:1px solid rgba(91,111,132,.22)!important;
}
.accounting-sum .accounting-row-title{
  border-bottom-color:rgba(73,98,124,.30)!important;
}
.accounting-total .accounting-row-title{
  border-bottom-color:rgba(73,98,124,.34)!important;
}

.accounting-title-with-info{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
.accounting-title-with-info .wd-info{
  flex:0 0 17px!important;
}

/* Kostenübersicht als eigener abgerundeter Ergebnisblock. */
.result-detail-card{
  margin-top:22px!important;
  padding:18px 18px 14px!important;
  border:1px solid #d7e0e9!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 6px 20px rgba(34,64,94,.055)!important;
  overflow:hidden!important;
}
.result-detail-card h3{
  margin:0 0 14px!important;
  color:#173a6b!important;
}
.result-cost-table{
  width:100%!important;
  border-collapse:collapse!important;
}
.result-cost-table th,
.result-cost-table td{
  padding:11px 10px!important;
  border-bottom:1px solid #e1e7ed!important;
}
.result-cost-table tbody tr:last-child td{
  border-bottom:0!important;
}
.result-cost-table th:first-child,
.result-cost-table td:first-child{
  text-align:left!important;
}
.result-cost-table th:not(:first-child),
.result-cost-table td:not(:first-child){
  text-align:right!important;
  white-space:nowrap!important;
}
.result-cost-table tr[hidden]{
  display:none!important;
}

@media(max-width:600px){
  .accounting-title-with-info{
    gap:5px!important;
  }
  .accounting-title-with-info .wd-info{
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
    font-size:10px!important;
    line-height:13px!important;
  }

  .result-detail-card{
    padding:14px 10px 10px!important;
    border-radius:15px!important;
  }
  .result-cost-table th,
  .result-cost-table td{
    padding:9px 5px!important;
    font-size:clamp(10px,2.75vw,13px)!important;
  }
  .result-cost-table th:first-child,
  .result-cost-table td:first-child{
    width:46%!important;
  }
}

/* =========================================================
   v7.59 – FULL INTEGRATION
   Neuer Hintergrund + reduzierter Header
   Desktop / Tablet / Mobile
   ========================================================= */
:root{
  --v759-navy:#03152d;
  --v759-navy2:#06284d;
  --v759-blue:#1f78d1;
  --v759-green:#69c52f;
  --v759-glass:rgba(248,251,255,.92);
}

html{background:#03152d!important}

body{
  min-height:100vh;
  background:
    linear-gradient(90deg,rgba(2,15,35,.92) 0%,rgba(3,24,51,.76) 42%,rgba(3,21,44,.50) 100%),
    url("../assets/efleet-charging-background-v760.jpg") center center/cover fixed no-repeat!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(1,11,28,.10),rgba(1,15,34,.38));
}

/* ---------- Header ---------- */
.v759-header{
  width:min(1180px,calc(100% - 36px));
  height:92px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1000;
  box-sizing:border-box;
}

.v759-brand{
  display:flex;
  align-items:center;
  height:72px;
  max-width:min(470px,72vw);
}

.v759-brand img{
  display:block;
  width:auto;
  height:64px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}

.v759-menu-button{
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  background:rgba(2,20,43,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid;
  place-content:center;
  gap:5px;
  cursor:pointer;
}

.v759-menu-button span{
  display:block;
  width:23px;
  height:2px;
  border-radius:2px;
  background:#fff;
}

.v759-menu{
  position:fixed;
  top:18px;
  right:18px;
  width:min(330px,calc(100vw - 36px));
  padding:58px 24px 22px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(2,20,44,.98),rgba(5,39,75,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.98);
  transition:.2s ease;
  z-index:2000;
}

.v759-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
}

.v759-menu-close{
  position:absolute;
  right:16px;
  top:10px;
  border:0;
  background:none;
  color:#fff;
  font:300 36px/1 Arial,sans-serif;
  cursor:pointer;
}

.v759-menu a{
  display:block;
  padding:18px 4px;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:650;
  font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.v759-menu a:last-child{border-bottom:0!important}

.modular-hero{display:none!important}

/* ---------- Startseite ---------- */
body:has(.landing-minimal) .landing-minimal{
  width:min(1180px,calc(100% - 36px))!important;
  margin:0 auto!important;
  padding:4vh 0 2vh!important;
  background:transparent!important;
}

body:has(.landing-minimal) .landing-hero{
  width:min(650px,58%)!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body:has(.landing-minimal) .landing-hero-inner{
  padding:30px 0 34px!important;
  background:transparent!important;
  min-height:0!important;
}

body:has(.landing-minimal) .landing-catchphrase,
body:has(.landing-minimal) .landing-core-line,
body:has(.landing-minimal) .landing-core-question,
body:has(.landing-minimal) .landing-findout{
  color:#fff!important;
  text-align:left!important;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}

body:has(.landing-minimal) .landing-catchphrase{
  font-size:clamp(28px,3vw,46px)!important;
  margin-bottom:24px!important;
}

body:has(.landing-minimal) .landing-core-line{
  font-size:clamp(20px,2vw,30px)!important;
  line-height:1.28!important;
}

body:has(.landing-minimal) .landing-core-question{
  margin-top:22px!important;
}

body:has(.landing-minimal) .landing-findout{
  font-size:clamp(21px,2.15vw,31px)!important;
  margin-top:8px!important;
}

body:has(.landing-minimal) .efleet-green,
body:has(.landing-minimal) .cta-green{
  color:var(--v759-green)!important;
}

body:has(.landing-minimal) .efleet-blue{
  color:#6ab6ff!important;
}

body:has(.landing-minimal) .landing-cta{
  margin:34px 0 0!important;
  width:max-content!important;
  min-width:270px!important;
  border:1px solid #28a7ff!important;
  background:linear-gradient(105deg,rgba(3,25,54,.94),rgba(5,59,103,.88))!important;
  box-shadow:
    0 0 0 1px rgba(105,197,47,.55),
    0 10px 32px rgba(0,0,0,.25)!important;
}

/* Erklärung "Ihr Vergleich in vier Bereichen" */
.landing-comparison-explainer{
  width:min(1180px,calc(100% - 36px))!important;
  margin:26px auto 34px!important;
  padding:0!important;
  background:transparent!important;
}

.landing-comparison-explainer>.result-syllabus{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:var(--v759-glass)!important;
  border:1px solid rgba(255,255,255,.58)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}

.v759-footer-note{
  color:rgba(255,255,255,.78)!important;
  background:transparent!important;
}

/* ---------- Wizard / Ergebnis / Rechtliches ---------- */
body:not(:has(.landing-minimal)) main,
body:not(:has(.landing-minimal)) .page-shell{
  background:transparent!important;
}

body:not(:has(.landing-minimal)) .section-card,
body:not(:has(.landing-minimal)) .wizard-cluster,
body:not(:has(.landing-minimal)) .result-syllabus,
body:not(:has(.landing-minimal)) .accounting-result,
body:not(:has(.landing-minimal)) .result-detail-card{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body:not(:has(.landing-minimal)) .section-card{
  background:rgba(248,251,255,.92)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
}

/* Rechtliche Seiten etwas lesbarer auf dem Bildhintergrund */
body[data-page="impressum"] main,
body[data-page="datenschutz"] main,
body[data-page="quellen"] main{
  background:rgba(248,251,255,.94)!important;
  border-radius:18px!important;
  padding:24px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  body{background-position:58% center!important}

  .v759-header{
    height:82px;
    width:calc(100% - 28px);
  }

  .v759-brand{
    height:62px;
    max-width:68vw;
  }

  .v759-brand img{height:56px}

  body:has(.landing-minimal) .landing-minimal{
    width:calc(100% - 32px)!important;
    padding-top:2vh!important;
  }

  body:has(.landing-minimal) .landing-hero{
    width:72%!important;
  }

  .landing-comparison-explainer{
    width:calc(100% - 32px)!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:600px){
  body{
    background-position:63% center!important;
    background-attachment:scroll!important;
  }

  .v759-header{
    height:72px;
    width:calc(100% - 24px);
  }

  .v759-brand{
    height:54px;
    max-width:72vw;
  }

  .v759-brand img{height:49px}

  .v759-menu-button{
    width:43px;
    height:43px;
    border-radius:10px;
  }

  .v759-menu{
    top:12px;
    right:12px;
    width:calc(100vw - 24px);
  }

  body:has(.landing-minimal) .landing-minimal{
    width:calc(100% - 32px)!important;
    padding:2vh 0 0!important;
  }

  body:has(.landing-minimal) .landing-hero{
    width:100%!important;
  }

  body:has(.landing-minimal) .landing-hero-inner{
    padding:20px 0 26px!important;
  }

  body:has(.landing-minimal) .landing-catchphrase{
    font-size:clamp(23px,7vw,31px)!important;
    margin-bottom:22px!important;
  }

  body:has(.landing-minimal) .landing-core-line{
    font-size:clamp(17px,4.7vw,21px)!important;
    line-height:1.28!important;
  }

  body:has(.landing-minimal) .landing-core-question{
    font-size:clamp(15px,4.05vw,18px)!important;
    white-space:normal!important;
  }

  body:has(.landing-minimal) .landing-findout{
    font-size:clamp(16px,4.35vw,19px)!important;
    white-space:normal!important;
  }

  body:has(.landing-minimal) .landing-cta{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin-top:28px!important;
  }

  .landing-comparison-explainer{
    width:calc(100% - 32px)!important;
    margin-top:18px!important;
  }

  .landing-comparison-explainer>.result-syllabus{
    border-radius:16px!important;
  }
}

/* =========================================================
   v7.60 – Startseite: 4 Schritte transparent auf Bild
   ========================================================= */

/* Hero bleibt ohne eigene Box direkt auf dem Hintergrund. */
body:has(.landing-minimal) .landing-hero,
body:has(.landing-minimal) .landing-hero-inner{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Startseitentext konsequent links, damit die Szene rechts sichtbar bleibt. */
body:has(.landing-minimal) .landing-minimal{
  align-items:flex-start!important;
}
body:has(.landing-minimal) .landing-hero{
  margin-left:0!important;
  margin-right:auto!important;
}

/* Alter heller Erklärungskasten ist in v7.60 ersetzt. */
.landing-comparison-explainer{display:none!important}

.landing-steps-v760{
  width:min(1180px,calc(100% - 36px));
  margin:18px auto 30px;
  padding:0;
  color:#fff;
}

.steps-title-wrap{
  display:grid;
  grid-template-columns:minmax(60px,1fr) auto minmax(60px,1fr);
  align-items:center;
  gap:22px;
  margin:0 0 18px;
}
.steps-title-wrap h2{
  margin:0;
  color:#fff;
  font-size:clamp(20px,2vw,29px);
  line-height:1.2;
  font-weight:720;
  text-align:center;
  text-shadow:0 2px 16px rgba(0,0,0,.38);
}
.steps-title-line{
  height:1px;
  background:linear-gradient(90deg,transparent,#27a4f0);
}
.steps-title-line:last-child{
  background:linear-gradient(90deg,#27a4f0,transparent);
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.step-card{
  min-height:210px;
  padding:22px 24px 20px;
  box-sizing:border-box;
  border:1px solid rgba(204,220,238,.72);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(3,23,48,.44),rgba(2,15,35,.30));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.step-card-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.step-icon{
  width:56px;
  height:56px;
  border:1px solid #2ea8ff;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#66c5ff;
  font-size:28px;
  flex:0 0 56px;
  background:rgba(1,22,46,.38);
  box-shadow:inset 0 0 20px rgba(46,168,255,.10);
}
.step-card-green .step-icon{
  border-color:#69c52f;
  color:#8ee54d;
}
.step-icon-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.step-icon-list span{
  width:24px;height:3px;border-radius:3px;background:currentColor;
}
.step-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.step-number{
  font-size:1.05rem;
  font-weight:800;
  color:#67bbff;
}
.step-card-green .step-number{color:#83d943}
.step-heading strong{
  font-size:1.05rem;
  line-height:1.2;
  color:#fff;
}
.step-card p{
  margin:18px 0 20px;
  color:rgba(255,255,255,.92);
  font-size:.96rem;
  line-height:1.45;
}
.step-time{
  margin-top:auto;
  color:rgba(255,255,255,.76);
  font-size:.9rem;
}

/* Das Layout bleibt transparent: Hintergrundbild sichtbar bis hinter die Karten. */
.v759-footer-note{
  margin-top:0!important;
  padding-top:8px!important;
  color:rgba(255,255,255,.70)!important;
}

/* Tablet */
@media(max-width:900px){
  .landing-steps-v760{
    width:calc(100% - 32px);
  }
  .steps-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .step-card{min-height:190px}
}

/* Mobile */
@media(max-width:600px){
  .landing-steps-v760{
    width:calc(100% - 28px);
    margin-top:18px;
  }
  .steps-title-wrap{
    grid-template-columns:34px 1fr 34px;
    gap:10px;
  }
  .steps-title-wrap h2{
    font-size:clamp(18px,5.2vw,22px);
  }
  .steps-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .step-card{
    min-height:0;
    padding:16px 17px 15px;
    border-radius:14px;
  }
  .step-card-top{
    gap:12px;
  }
  .step-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:21px;
  }
  .step-heading{
    flex-direction:row;
    align-items:baseline;
    gap:10px;
  }
  .step-heading strong{
    font-size:1rem;
  }
  .step-card p{
    margin:10px 0 10px 56px;
    font-size:.9rem;
    line-height:1.38;
  }
  .step-time{
    margin-left:56px;
    font-size:.82rem;
  }
}

/* =========================================================
   v7.61 – freigegebene Responsive-Hintergründe + transparente Startseite
   ========================================================= */

/* Desktop + Tablet landscape use the approved wide image. */
body{
  background:
    url("../assets/efleet-background-desktop-v761.png")
    center top / cover fixed no-repeat!important;
}

/* No extra dark overlay: the image already contains the intended navy gradient. */
body::before{
  display:none!important;
}

/* Homepage surfaces fully transparent. */
body:has(.landing-minimal) .landing-minimal,
body:has(.landing-minimal) .landing-hero,
body:has(.landing-minimal) .landing-hero-inner,
body:has(.landing-minimal) .landing-message,
body:has(.landing-minimal) .landing-comparison-explainer,
body:has(.landing-minimal) .landing-steps-v760,
body:has(.landing-minimal) .steps-grid{
  background:transparent!important;
  box-shadow:none!important;
}

/* Hero text sits in the purpose-built navy copy space on the left. */
body:has(.landing-minimal) .landing-minimal{
  min-height:48vh!important;
  padding-top:2.5vh!important;
}
body:has(.landing-minimal) .landing-hero{
  width:min(540px,37vw)!important;
  max-width:540px!important;
}
body:has(.landing-minimal) .landing-hero-inner{
  padding-top:18px!important;
}
body:has(.landing-minimal) .landing-catchphrase,
body:has(.landing-minimal) .landing-core-line,
body:has(.landing-minimal) .landing-core-question,
body:has(.landing-minimal) .landing-findout{
  text-shadow:0 2px 14px rgba(0,0,0,.28)!important;
}

/* CTA is transparent too, only outlined. */
body:has(.landing-minimal) .landing-cta{
  background:rgba(3,24,51,.12)!important;
  border:1px solid #28a7ff!important;
  box-shadow:0 0 0 1px rgba(105,197,47,.42)!important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* Four-step area: transparent dots/cards exactly in the visual language of the mockup. */
.landing-steps-v760{
  margin-top:6px!important;
  color:#fff!important;
}
.step-card{
  background:rgba(2,20,43,.18)!important;
  border:1px solid rgba(209,225,240,.58)!important;
  box-shadow:none!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
.step-icon{
  background:rgba(2,20,43,.10)!important;
  box-shadow:none!important;
}
.step-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.step-heading strong,
.step-card p,
.step-time{
  text-shadow:0 1px 9px rgba(0,0,0,.30);
}

/* Footer is text only on the image. */
.v759-footer-note{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Tablet portrait: keep wide scene but give the copy enough room. */
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){
  body{
    background-position:58% top!important;
    background-size:auto 100vh!important;
    background-color:#03152d!important;
  }
  body:has(.landing-minimal) .landing-hero{
    width:min(480px,58vw)!important;
  }
}

/* Mobile uses the separately approved tall image, with navy space above/below. */
@media(max-width:600px){
  body{
    background:
      url("../assets/efleet-background-mobile-v761.png")
      center top / 100% auto scroll no-repeat!important;
    background-color:#03152d!important;
  }

  body:has(.landing-minimal) .landing-minimal{
    min-height:0!important;
    padding-top:8px!important;
  }

  body:has(.landing-minimal) .landing-hero{
    width:100%!important;
    max-width:none!important;
  }

  body:has(.landing-minimal) .landing-hero-inner{
    padding:8px 0 22px!important;
  }

  /* Keep the hero in the upper navy zone; cards flow into the lower navy zone. */
  .landing-steps-v760{
    margin-top:44vh!important;
  }

  .step-card{
    background:rgba(2,20,43,.24)!important;
    border-color:rgba(216,229,242,.60)!important;
  }

  .step-icon svg{
    width:24px;
    height:24px;
  }
}

/* =========================================================
   v7.62 – finale freigegebene Hintergrundmotive
   ========================================================= */
body{
  background:
    url("../assets/efleet-background-desktop-v762.png")
    center top / cover fixed no-repeat!important;
  background-color:#03152d!important;
}
@media(max-width:600px){
  body{
    background:
      url("../assets/efleet-background-mobile-v762.png")
      center top / 100% auto scroll no-repeat!important;
    background-color:#03152d!important;
  }
}
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){
  body{
    background:
      url("../assets/efleet-background-desktop-v762.png")
      58% top / auto 100vh fixed no-repeat!important;
    background-color:#03152d!important;
  }
}

/* =========================================================
   v7.63 – vom Nutzer freigegebenes Mobile-Hintergrundbild
   ========================================================= */
@media(max-width:600px){
  body{
    background:
      url("../assets/efleet-background-mobile-v763.jpg")
      center top / 100% auto scroll no-repeat!important;
    background-color:#020d1d!important;
  }
}

/* =========================================================
   v7.64 – Desktop: konsequent an die Außenkanten
   Mobile/Tablet unverändert
   ========================================================= */
@media(min-width:901px){
  /* Header nutzt fast die gesamte Viewportbreite:
     Brand links, Burger rechts. */
  .v759-header{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
  }

  .v759-brand{
    margin-left:0!important;
  }

  .v759-menu-button{
    margin-left:auto!important;
    margin-right:0!important;
  }

  /* Hero-/Textblock in den eigens dafür vorgesehenen dunklen Bereich links. */
  body:has(.landing-minimal) .landing-minimal{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  body:has(.landing-minimal) .landing-hero{
    width:min(520px,34vw)!important;
    max-width:520px!important;
    margin-left:0!important;
    margin-right:auto!important;
  }

  body:has(.landing-minimal) .landing-hero-inner,
  body:has(.landing-minimal) .landing-message,
  body:has(.landing-minimal) .landing-catchphrase,
  body:has(.landing-minimal) .landing-core-line,
  body:has(.landing-minimal) .landing-core-question,
  body:has(.landing-minimal) .landing-findout{
    text-align:left!important;
    margin-left:0!important;
  }

  body:has(.landing-minimal) .landing-cta{
    margin-left:0!important;
    margin-right:auto!important;
  }

  /* Auch der 4-Schritte-Bereich nutzt die verfügbare Desktopbreite,
     bleibt aber unterhalb der Szene. */
  .landing-steps-v760{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
  }

  .v759-footer-note{
    width:calc(100% - 32px)!important;
    margin-left:16px!important;
    margin-right:16px!important;
  }
}

/* =========================================================
   v7.66 – Desktop: Fahrzeuge freistellen / Schritte auf Fahrbahn
   Nur Desktop; Tablet und Mobile unverändert.
   ========================================================= */
@media(min-width:901px){
  /* Motiv etwas kleiner und höher positioniert:
     mehr Fahrzeuge + Fahrbahn sichtbar, weniger Himmel dominiert. */
  body{
    background-image:url("../assets/efleet-background-desktop-v762.png")!important;
    background-size:100% auto!important;
    background-position:center -92px!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
    background-color:#03152d!important;
  }

  /* Hero kompakter, damit die Fahrzeugzone früher frei wird. */
  body:has(.landing-minimal) .landing-minimal{
    min-height:40vh!important;
    padding-top:1.5vh!important;
  }

  body:has(.landing-minimal) .landing-hero-inner{
    padding-top:10px!important;
    padding-bottom:18px!important;
  }

  body:has(.landing-minimal) .landing-catchphrase{
    margin-bottom:18px!important;
  }

  body:has(.landing-minimal) .landing-core-question{
    margin-top:16px!important;
  }

  body:has(.landing-minimal) .landing-cta{
    margin-top:22px!important;
  }

  /* Schritte tiefer auf die Fahrbahn legen und etwas kompakter machen. */
  .landing-steps-v760{
    margin-top:34px!important;
  }

  .steps-title-wrap{
    margin-bottom:12px!important;
  }

  .steps-grid{
    gap:12px!important;
  }

  .step-card{
    min-height:164px!important;
    padding:15px 17px 14px!important;
    border-radius:12px!important;
  }

  .step-icon{
    width:43px!important;
    height:43px!important;
    flex-basis:43px!important;
  }

  .step-icon svg{
    width:23px!important;
    height:23px!important;
  }

  .step-heading strong{
    font-size:.94rem!important;
  }

  .step-number{
    font-size:.92rem!important;
  }

  .step-card p{
    margin:11px 0 11px!important;
    font-size:.84rem!important;
    line-height:1.35!important;
  }

  .step-time{
    font-size:.79rem!important;
  }
}

/* Große Desktop-Bildschirme: etwas weniger aggressiver Shift,
   damit das Motiv bei höherem Viewport nicht oben abgeschnitten wirkt. */
@media(min-width:1500px) and (min-height:900px){
  body{
    background-position:center -65px!important;
  }
}

/* =========================================================
   v7.67 – Desktop-Komposition nach Referenzbild
   Himmel oben beschnitten, Straße unten als Content-Zone.
   Nur Desktop; Tablet/Mobile unverändert.
   ========================================================= */
@media(min-width:901px){
  body{
    background:
      url("../assets/efleet-background-desktop-v767.jpg")
      center top / 100% auto fixed no-repeat!important;
    background-color:#03152d!important;
  }

  /* Textblock ausschließlich links oben im dunklen Verlauf. */
  body:has(.landing-minimal) .landing-minimal{
    min-height:38vh!important;
    width:calc(100% - 32px)!important;
    margin:0 16px!important;
    padding-top:1vh!important;
  }
  body:has(.landing-minimal) .landing-hero{
    width:min(510px,33vw)!important;
    max-width:510px!important;
    margin:0 auto 0 0!important;
  }
  body:has(.landing-minimal) .landing-hero-inner{
    padding:8px 0 12px!important;
  }

  /* Vier Schritte gezielt in die freie Straßenfläche UNTER den Fahrzeugen. */
  .landing-steps-v760{
    width:calc(100% - 64px)!important;
    max-width:none!important;
    margin:14vh 32px 24px!important;
  }
  .steps-title-wrap{
    margin-bottom:10px!important;
  }
  .step-card{
    min-height:148px!important;
    padding:13px 15px 12px!important;
    background:rgba(2,20,43,.16)!important;
  }
  .step-icon{
    width:39px!important;
    height:39px!important;
    flex-basis:39px!important;
  }
  .step-icon svg{
    width:21px!important;
    height:21px!important;
  }
  .step-card p{
    margin:9px 0!important;
    font-size:.81rem!important;
  }
  .step-time{
    font-size:.76rem!important;
  }
}

/* =========================================================
   v7.68 – Desktop: noch weniger Himmel, mehr Straße
   ========================================================= */
@media(min-width:901px){
  body{
    background:
      url("../assets/efleet-background-desktop-v768.jpg")
      center top / 100% auto fixed no-repeat!important;
    background-color:#03152d!important;
  }

  /* Oben kompakt halten; die vier Schritte beginnen weiter unten
     auf dem nun stärker sichtbaren Straßenbereich. */
  body:has(.landing-minimal) .landing-minimal{
    min-height:34vh!important;
  }

  .landing-steps-v760{
    margin-top:17vh!important;
  }
}

/* =========================================================
   v7.69 – Desktop: Fahrzeuge und Kabel vollständig freihalten
   ========================================================= */
@media(min-width:901px){
  body{
    background:
      url("../assets/efleet-background-desktop-v769.jpg")
      center top / 100% auto fixed no-repeat!important;
    background-color:#03152d!important;
  }

  /* Hero ausschließlich links oben im dunklen Freiraum. */
  body:has(.landing-minimal) .landing-minimal{
    min-height:31vh!important;
    padding-top:.5vh!important;
  }
  body:has(.landing-minimal) .landing-hero{
    width:min(485px,31vw)!important;
    max-width:485px!important;
  }
  body:has(.landing-minimal) .landing-hero-inner{
    padding-top:4px!important;
    padding-bottom:8px!important;
  }

  /*
   * Harte Schutzzone:
   * Zwischen Hero und Schrittbereich bleibt eine große komplett freie Zone.
   * Kein Text, keine Linie, kein Icon und keine Karte liegt über Fahrzeugen
   * oder Ladekabeln.
   */
  .landing-steps-v760{
    margin-top:31vh!important;
    width:calc(100% - 64px)!important;
    margin-left:32px!important;
    margin-right:32px!important;
  }

  .steps-title-wrap{
    margin-bottom:9px!important;
  }

  .step-card{
    min-height:136px!important;
    padding:11px 14px 10px!important;
  }
  .step-icon{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }
  .step-icon svg{
    width:19px!important;
    height:19px!important;
  }
  .step-heading strong{
    font-size:.88rem!important;
  }
  .step-number{
    font-size:.86rem!important;
  }
  .step-card p{
    margin:7px 0!important;
    font-size:.77rem!important;
    line-height:1.3!important;
  }
  .step-time{
    font-size:.72rem!important;
  }
}

/* =========================================================
   v7.71 – Wizard Redesign: transparent + icon-only steps
   ========================================================= */

/* Alte Wizard-Navigation/Topbars ausblenden, falls Legacy-Markup irgendwo übrig bleibt. */
.wizard-mini,
.wizard-homebar,
.modular-topbar,
.efleet-wizard-steps{
  display:none!important;
}

/* Wizard-Hauptfläche vollständig transparent. */
body[data-page="einsatzprofil"] .modular-shell,
body[data-page="current"] .modular-shell,
body[data-page="vergleich"] .modular-shell,
body[data-page="result"] .modular-shell,
body[data-page="einsatzprofil"] .section-card,
body[data-page="current"] .section-card,
body[data-page="vergleich"] .section-card,
body[data-page="result"] .section-card{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
}

/* Überschriften auf dunklem Hintergrund gut lesbar. */
body[data-page="einsatzprofil"] .section-card>h2,
body[data-page="current"] .section-card>h2,
body[data-page="vergleich"] .section-card>h2,
body[data-page="result"] .section-card>h2{
  color:#fff!important;
  text-shadow:0 2px 14px rgba(0,0,0,.32);
}

/* Neue reduzierte 4-Schritt-Navigation. */
.efleet-wizard-steps-v771{
  width:min(460px,calc(100% - 28px));
  margin:10px auto 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  gap:18px;
  position:relative;
  z-index:5;
}
.efleet-wizard-steps-v771::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:27px;
  height:1px;
  background:rgba(255,255,255,.24);
  z-index:-1;
}
.efleet-wizard-step-v771{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none!important;
  color:rgba(255,255,255,.68)!important;
}
.wizard-step-icon-v771{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(3,24,51,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.wizard-step-icon-v771 svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wizard-step-number-v771{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
}
.efleet-wizard-step-v771.active{
  color:#84dd43!important;
}
.efleet-wizard-step-v771.active .wizard-step-icon-v771{
  border-color:#84dd43;
  box-shadow:0 0 18px rgba(132,221,67,.17);
}
.efleet-wizard-step-v771.done{
  color:#5ebdff!important;
}

/* Innere Blöcke/Felder: nicht weiß, sondern leicht transparentes Glas. */
body[data-page="einsatzprofil"] .wizard-cluster,
body[data-page="current"] .wizard-cluster,
body[data-page="vergleich"] .wizard-cluster,
body[data-page="result"] .wizard-cluster,
body[data-page="einsatzprofil"] .field,
body[data-page="current"] .field,
body[data-page="vergleich"] .field,
body[data-page="result"] .field,
body[data-page="einsatzprofil"] .form-block,
body[data-page="current"] .form-block,
body[data-page="vergleich"] .form-block,
body[data-page="result"] .form-block{
  background:rgba(247,250,253,.72)!important;
  border-color:rgba(214,225,235,.72)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* Normale Input-Flächen ebenfalls etwas transparenter. */
body[data-page="einsatzprofil"] input,
body[data-page="einsatzprofil"] select,
body[data-page="einsatzprofil"] textarea,
body[data-page="current"] input,
body[data-page="current"] select,
body[data-page="current"] textarea,
body[data-page="vergleich"] input,
body[data-page="vergleich"] select,
body[data-page="vergleich"] textarea{
  background:rgba(255,255,255,.78)!important;
}

/* Tablet/mobile: Step dots kompakter. */
@media(max-width:700px){
  .efleet-wizard-steps-v771{
    width:min(330px,calc(100% - 24px));
    gap:9px;
    margin-top:6px;
    margin-bottom:14px;
  }
  .efleet-wizard-steps-v771::before{
    top:22px;
  }
  .wizard-step-icon-v771{
    width:43px;
    height:43px;
  }
  .wizard-step-icon-v771 svg{
    width:21px;
    height:21px;
  }
  .wizard-step-number-v771{
    font-size:.64rem;
  }
}

/* =========================================================
   v7.72 – Wizard Feinschliff nach Desktop-Referenz
   ========================================================= */

/* Abschnittsüberschriften wie "Fahrzeug", "Einsatz" etc.:
   keine eigene farbige/eckige Fläche mehr. */
body[data-page="einsatzprofil"] .wizard-cluster > h3,
body[data-page="current"] .wizard-cluster > h3,
body[data-page="vergleich"] .wizard-cluster > h3,
body[data-page="result"] .wizard-cluster > h3,
body[data-page="einsatzprofil"] .cluster-title,
body[data-page="current"] .cluster-title,
body[data-page="vergleich"] .cluster-title,
body[data-page="result"] .cluster-title,
body[data-page="einsatzprofil"] .subsection-title,
body[data-page="current"] .subsection-title,
body[data-page="vergleich"] .subsection-title,
body[data-page="result"] .subsection-title{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Die großen Eingabeblöcke deutlich transparenter. */
body[data-page="einsatzprofil"] .wizard-cluster,
body[data-page="current"] .wizard-cluster,
body[data-page="vergleich"] .wizard-cluster,
body[data-page="result"] .wizard-cluster{
  background:rgba(245,249,252,.43)!important;
  border:1px solid rgba(225,235,243,.52)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* Einzelne Feldcontainer nicht mehr als weiße/eckige Streifen. */
body[data-page="einsatzprofil"] .field,
body[data-page="current"] .field,
body[data-page="vergleich"] .field,
body[data-page="result"] .field,
body[data-page="einsatzprofil"] .form-block,
body[data-page="current"] .form-block,
body[data-page="vergleich"] .form-block,
body[data-page="result"] .form-block{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Inputs selbst bleiben lesbar, aber ebenfalls stärker transparent. */
body[data-page="einsatzprofil"] input,
body[data-page="einsatzprofil"] select,
body[data-page="einsatzprofil"] textarea,
body[data-page="current"] input,
body[data-page="current"] select,
body[data-page="current"] textarea,
body[data-page="vergleich"] input,
body[data-page="vergleich"] select,
body[data-page="vergleich"] textarea{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(197,213,226,.68)!important;
}

/* Desktop: Wizard insgesamt schmäler und ruhiger zentriert. */
@media(min-width:901px){
  body[data-page="einsatzprofil"] .modular-shell,
  body[data-page="current"] .modular-shell,
  body[data-page="vergleich"] .modular-shell,
  body[data-page="result"] .modular-shell{
    width:min(920px,calc(100% - 64px))!important;
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body[data-page="einsatzprofil"] .section-card,
  body[data-page="current"] .section-card,
  body[data-page="vergleich"] .section-card,
  body[data-page="result"] .section-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .efleet-wizard-steps-v771{
    width:min(400px,100%)!important;
  }
}

/* =========================================================
   v7.73 – Wizard/Ergebnis stärker transparent + neue Buttons
   ========================================================= */

/* ---------- Wizard: noch stärker transparent ---------- */
body[data-page="einsatzprofil"] .wizard-cluster,
body[data-page="current"] .wizard-cluster,
body[data-page="vergleich"] .wizard-cluster,
body[data-page="result"] .wizard-cluster{
  background:rgba(240,247,252,.26)!important;
  border:1px solid rgba(220,234,244,.32)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.035)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

body[data-page="einsatzprofil"] input,
body[data-page="einsatzprofil"] select,
body[data-page="einsatzprofil"] textarea,
body[data-page="current"] input,
body[data-page="current"] select,
body[data-page="current"] textarea,
body[data-page="vergleich"] input,
body[data-page="vergleich"] select,
body[data-page="vergleich"] textarea{
  background:rgba(255,255,255,.40)!important;
  border-color:rgba(201,218,231,.45)!important;
  box-shadow:none!important;
}

/* weitere Boxen, Auto-Daten, Hinweise etc. deutlich gläserner */
body[data-page="einsatzprofil"] .auto-box,
body[data-page="current"] .auto-box,
body[data-page="vergleich"] .auto-box,
body[data-page="einsatzprofil"] .info-box,
body[data-page="current"] .info-box,
body[data-page="vergleich"] .info-box,
body[data-page="einsatzprofil"] .sub-card,
body[data-page="current"] .sub-card,
body[data-page="vergleich"] .sub-card{
  background:rgba(244,249,253,.24)!important;
  border-color:rgba(215,229,240,.30)!important;
  box-shadow:none!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

/* ---------- Ergebnis: Hauptflächen ebenfalls transparent ---------- */
body[data-page="result"] .state-shadow,
body[data-page="result"] .accounting-result,
body[data-page="result"] .result-detail-card,
body[data-page="result"] .result-syllabus,
body[data-page="result"] .result-block,
body[data-page="result"] .cost-overview,
body[data-page="result"] .auto-box,
body[data-page="result"] .result-card,
body[data-page="result"] .summary-card{
  background:rgba(240,247,252,.24)!important;
  border-color:rgba(218,232,243,.30)!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}

/* Tabellen der Ergebnisseite: keine großen weißen Flächen mehr */
body[data-page="result"] table{
  background:rgba(248,251,254,.20)!important;
  border-color:rgba(218,232,243,.28)!important;
}
body[data-page="result"] th,
body[data-page="result"] td{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(207,224,237,.26)!important;
}

/* Farbcodierte Ergebnis-Spalten behalten die Logik, aber transparenter */
body[data-page="result"] .current-col,
body[data-page="result"] .reference-col{
  background:rgba(121,190,238,.12)!important;
}
body[data-page="result"] .alternative-col,
body[data-page="result"] .ev-col{
  background:rgba(129,205,106,.12)!important;
}
body[data-page="result"] .difference-col,
body[data-page="result"] .diff-col{
  background:rgba(190,198,207,.11)!important;
}

/* ---------- Neue Button-Sprache ---------- */
.modular-nav{
  gap:14px!important;
}

.modular-prev,
.modular-next,
.modular-result-actions a{
  border-radius:12px!important;
  background:rgba(2,20,43,.34)!important;
  border:1px solid rgba(78,176,240,.68)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  font-weight:700!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}

.modular-prev,
.modular-result-actions .edit{
  border-color:rgba(200,218,232,.52)!important;
  color:rgba(255,255,255,.92)!important;
}

.modular-next,
.modular-result-actions .restart{
  border-color:rgba(105,197,47,.78)!important;
  box-shadow:
    inset 0 0 0 1px rgba(42,166,235,.32),
    0 0 18px rgba(105,197,47,.06)!important;
}

.modular-next:hover,
.modular-result-actions .restart:hover{
  background:rgba(5,44,75,.48)!important;
  border-color:#84dd43!important;
}

.modular-prev:hover,
.modular-result-actions .edit:hover{
  background:rgba(5,38,66,.44)!important;
  border-color:rgba(111,193,245,.78)!important;
}

.modular-prev:active,
.modular-next:active,
.modular-result-actions a:active{
  transform:translateY(1px)!important;
}

/* "Analyse durchführen" / "Weiter" als primärer Aktionsbutton mit Grün-Akzent */
.modular-next{
  color:#fff!important;
}
.modular-next::first-letter{
  color:inherit!important;
}

/* Ergebnis-Aktionsleiste ebenfalls ohne weiße Grundfläche */
.modular-result-actions{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Umrandungen insgesamt ruhiger/feiner */
body[data-page="einsatzprofil"] .section-card,
body[data-page="current"] .section-card,
body[data-page="vergleich"] .section-card,
body[data-page="result"] .section-card{
  border-color:transparent!important;
}

/* Mobile: Buttons sauber stapeln, Transparenz beibehalten */
@media(max-width:700px){
  .modular-nav,
  .modular-result-actions{
    gap:10px!important;
  }
  .modular-prev,
  .modular-next,
  .modular-result-actions a{
    min-height:46px!important;
  }
}

/* =========================================================
   v7.74 – Transparenter Visor nun explizit auch Tablet + Mobile
   ========================================================= */

/* Tablet und Mobile: dieselbe Glas-/Transparenzlogik wie Desktop erzwingen.
   Diese Regeln stehen bewusst am Ende, damit ältere responsive Styles
   keine weißen/hellen Flächen zurückbringen. */
@media(max-width:900px){

  body[data-page="einsatzprofil"] .modular-shell,
  body[data-page="current"] .modular-shell,
  body[data-page="vergleich"] .modular-shell,
  body[data-page="result"] .modular-shell,
  body[data-page="einsatzprofil"] .section-card,
  body[data-page="current"] .section-card,
  body[data-page="vergleich"] .section-card,
  body[data-page="result"] .section-card{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }

  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster,
  body[data-page="result"] .wizard-cluster{
    background:rgba(240,247,252,.24)!important;
    border:1px solid rgba(220,234,244,.28)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.03)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }

  body[data-page="einsatzprofil"] .field,
  body[data-page="current"] .field,
  body[data-page="vergleich"] .field,
  body[data-page="result"] .field,
  body[data-page="einsatzprofil"] .form-block,
  body[data-page="current"] .form-block,
  body[data-page="vergleich"] .form-block,
  body[data-page="result"] .form-block{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }

  body[data-page="einsatzprofil"] .wizard-cluster > h3,
  body[data-page="current"] .wizard-cluster > h3,
  body[data-page="vergleich"] .wizard-cluster > h3,
  body[data-page="result"] .wizard-cluster > h3,
  body[data-page="einsatzprofil"] .cluster-title,
  body[data-page="current"] .cluster-title,
  body[data-page="vergleich"] .cluster-title,
  body[data-page="result"] .cluster-title,
  body[data-page="einsatzprofil"] .subsection-title,
  body[data-page="current"] .subsection-title,
  body[data-page="vergleich"] .subsection-title,
  body[data-page="result"] .subsection-title{
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(255,255,255,.38)!important;
    border-color:rgba(201,218,231,.42)!important;
    box-shadow:none!important;
  }

  body[data-page="einsatzprofil"] .auto-box,
  body[data-page="current"] .auto-box,
  body[data-page="vergleich"] .auto-box,
  body[data-page="result"] .auto-box,
  body[data-page="einsatzprofil"] .info-box,
  body[data-page="current"] .info-box,
  body[data-page="vergleich"] .info-box,
  body[data-page="result"] .info-box,
  body[data-page="einsatzprofil"] .sub-card,
  body[data-page="current"] .sub-card,
  body[data-page="vergleich"] .sub-card,
  body[data-page="result"] .sub-card{
    background:rgba(244,249,253,.22)!important;
    border-color:rgba(215,229,240,.26)!important;
    box-shadow:none!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }

  /* Ergebnis-Mobile/Tablet */
  body[data-page="result"] .state-shadow,
  body[data-page="result"] .accounting-result,
  body[data-page="result"] .result-detail-card,
  body[data-page="result"] .result-syllabus,
  body[data-page="result"] .result-block,
  body[data-page="result"] .cost-overview,
  body[data-page="result"] .result-card,
  body[data-page="result"] .summary-card{
    background:rgba(240,247,252,.22)!important;
    border-color:rgba(218,232,243,.27)!important;
    box-shadow:none!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }

  body[data-page="result"] table{
    background:rgba(248,251,254,.18)!important;
    border-color:rgba(218,232,243,.24)!important;
  }

  body[data-page="result"] th,
  body[data-page="result"] td{
    background:rgba(255,255,255,.15)!important;
    border-color:rgba(207,224,237,.23)!important;
  }

  /* Button-Visor auch responsive erzwingen */
  .modular-prev,
  .modular-next,
  .modular-result-actions a{
    background:rgba(2,20,43,.31)!important;
    box-shadow:none!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
  }
}

/* Mobile noch einen Tick leichter als Tablet. */
@media(max-width:600px){
  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster,
  body[data-page="result"] .wizard-cluster{
    background:rgba(240,247,252,.20)!important;
  }

  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(255,255,255,.34)!important;
  }
}

/* =========================================================
   v7.75 – Ergebnis: Einsatzzweck lesbar + Aktionen zentriert
   Desktop / Tablet / Mobile
   ========================================================= */

/* Einsatzzweck und Zwischenfazit erhalten eine dunkle,
   transparente Glasfläche statt einer fast weißen Fläche.
   Dadurch bleiben sie auf dem Bildhintergrund klar lesbar. */
body[data-page="result"] .result-usage-summary,
body[data-page="result"] .result-conclusions{
  background:rgba(2,20,43,.34)!important;
  border:1px solid rgba(190,216,235,.28)!important;
  box-shadow:none!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

body[data-page="result"] .result-usage-summary h3,
body[data-page="result"] .result-conclusions h3{
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:0 1px 10px rgba(0,0,0,.34)!important;
}

body[data-page="result"] .result-usage-summary .result-syllabus-item,
body[data-page="result"] .result-conclusions .result-syllabus-item{
  background:transparent!important;
  border-color:rgba(214,228,239,.18)!important;
}

body[data-page="result"] .result-usage-summary .result-syllabus-item strong,
body[data-page="result"] .result-conclusions .result-syllabus-item strong{
  color:#eaf5ff!important;
}

body[data-page="result"] .result-usage-summary .result-syllabus-item span,
body[data-page="result"] .result-conclusions .result-syllabus-item span{
  color:rgba(255,255,255,.88)!important;
}

/* Die beiden Ergebnis-Aktionsbuttons immer mittig ausrichten. */
body[data-page="result"] .modular-result-actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  gap:14px!important;
}

body[data-page="result"] .modular-result-actions a{
  flex:0 1 240px!important;
  width:auto!important;
  min-width:210px!important;
  max-width:280px!important;
  text-align:center!important;
  justify-content:center!important;
}

/* Mobile: beide mittig; bei wenig Breite sauber untereinander. */
@media(max-width:600px){
  body[data-page="result"] .result-usage-summary,
  body[data-page="result"] .result-conclusions{
    background:rgba(2,20,43,.38)!important;
  }

  body[data-page="result"] .modular-result-actions{
    padding-left:12px!important;
    padding-right:12px!important;
    box-sizing:border-box!important;
  }

  body[data-page="result"] .modular-result-actions a{
    flex:0 1 min(100%,280px)!important;
    width:min(100%,280px)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* =========================================================
   v7.76 – Wizard: einheitliches Glass-Design auf allen Bereichen
   Desktop / Tablet / Mobile
   ========================================================= */

/* Alle Wizard-Bereiche bekommen exakt dieselbe transparente Fläche.
   Damit sehen Einsatz / Anschaffungskosten / Laufende Kosten genauso
   aus wie Fahrzeug bzw. Kraftstoff & Energie. */
body[data-page="einsatzprofil"] .wizard-cluster,
body[data-page="current"] .wizard-cluster,
body[data-page="vergleich"] .wizard-cluster{
  background:rgba(224,236,248,.28)!important;
  background-image:none!important;
  border:1px solid rgba(210,225,238,.32)!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}

/* Jede alte farbliche Sonderbehandlung der Cluster neutralisieren. */
body[data-page="einsatzprofil"] .cluster-vehicle,
body[data-page="einsatzprofil"] .cluster-running,
body[data-page="current"] .cluster-vehicle,
body[data-page="current"] .cluster-energy,
body[data-page="current"] .cluster-acquisition,
body[data-page="current"] .cluster-running,
body[data-page="vergleich"] .cluster-vehicle,
body[data-page="vergleich"] .cluster-energy,
body[data-page="vergleich"] .cluster-acquisition,
body[data-page="vergleich"] .cluster-running{
  background:rgba(224,236,248,.28)!important;
  background-image:none!important;
  border-color:rgba(210,225,238,.32)!important;
}

/* Überschriften wie Fahrzeug, Einsatz, Anschaffungskosten,
   Laufende Fahrzeugkosten etc. ohne eigenes Farbfeld. */
body[data-page="einsatzprofil"] .wizard-cluster-title,
body[data-page="current"] .wizard-cluster-title,
body[data-page="vergleich"] .wizard-cluster-title,
body[data-page="einsatzprofil"] .wizard-cluster-title h3,
body[data-page="current"] .wizard-cluster-title h3,
body[data-page="vergleich"] .wizard-cluster-title h3{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Die Beschriftungen der eigentlichen Eingabefelder dürfen keinerlei
   weiße/hellblaue Rechtecke mehr hinter sich haben. */
body[data-page="einsatzprofil"] .field,
body[data-page="current"] .field,
body[data-page="vergleich"] .field,
body[data-page="einsatzprofil"] .field label,
body[data-page="current"] .field label,
body[data-page="vergleich"] .field label,
body[data-page="einsatzprofil"] .wd-label-row,
body[data-page="current"] .wd-label-row,
body[data-page="vergleich"] .wd-label-row,
body[data-page="einsatzprofil"] .wd-label-row label,
body[data-page="current"] .wd-label-row label,
body[data-page="vergleich"] .wd-label-row label{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Auch Hilfs-/Vorschauzeilen nicht als farbige Streifen darstellen. */
body[data-page="einsatzprofil"] .preview-derived,
body[data-page="current"] .preview-derived,
body[data-page="vergleich"] .preview-derived,
body[data-page="einsatzprofil"] .capital-mode-v72,
body[data-page="current"] .capital-mode-v72,
body[data-page="vergleich"] .capital-mode-v72{
  background:transparent!important;
  background-image:none!important;
}

/* Eingabeelemente selbst gläsern statt weiß. */
body[data-page="einsatzprofil"] input,
body[data-page="einsatzprofil"] select,
body[data-page="einsatzprofil"] textarea,
body[data-page="current"] input,
body[data-page="current"] select,
body[data-page="current"] textarea,
body[data-page="vergleich"] input,
body[data-page="vergleich"] select,
body[data-page="vergleich"] textarea{
  background:rgba(246,250,254,.34)!important;
  border:1px solid rgba(204,220,233,.42)!important;
  box-shadow:none!important;
}

/* Mobile / Tablet: etwas stärker durchsichtig, damit der Hintergrund
   sichtbar bleibt und keine alten Responsive-Regeln wieder weiße Flächen setzen. */
@media(max-width:900px){
  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster,
  body[data-page="einsatzprofil"] .cluster-vehicle,
  body[data-page="einsatzprofil"] .cluster-running,
  body[data-page="current"] .cluster-vehicle,
  body[data-page="current"] .cluster-energy,
  body[data-page="current"] .cluster-acquisition,
  body[data-page="current"] .cluster-running,
  body[data-page="vergleich"] .cluster-vehicle,
  body[data-page="vergleich"] .cluster-energy,
  body[data-page="vergleich"] .cluster-acquisition,
  body[data-page="vergleich"] .cluster-running{
    background:rgba(224,236,248,.22)!important;
    border-color:rgba(210,225,238,.28)!important;
  }

  body[data-page="einsatzprofil"] .field,
  body[data-page="current"] .field,
  body[data-page="vergleich"] .field,
  body[data-page="einsatzprofil"] .field label,
  body[data-page="current"] .field label,
  body[data-page="vergleich"] .field label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(248,251,255,.30)!important;
    border-color:rgba(204,220,233,.38)!important;
  }
}

@media(max-width:600px){
  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster{
    background:rgba(224,236,248,.20)!important;
  }

  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(248,251,255,.27)!important;
  }
}

/* =========================================================
   v7.77 – Gesamtergebnis im selben Stil wie Einsatzzweck
   ========================================================= */
body[data-page="result"] .result-hero{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:14px 0 18px!important;
  padding:20px 22px!important;
  border-radius:16px!important;
  background:rgba(2,20,43,.34)!important;
  border:1px solid rgba(190,216,235,.28)!important;
  box-shadow:none!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  text-align:left!important;
}

body[data-page="result"] .result-hero-label{
  color:#eaf5ff!important;
  font-weight:700!important;
  background:transparent!important;
}

body[data-page="result"] .result-hero-value{
  color:#fff;
  background:transparent!important;
  text-shadow:0 1px 10px rgba(0,0,0,.30);
}

body[data-page="result"] .result-hero-sub{
  color:rgba(255,255,255,.88)!important;
  background:transparent!important;
}

@media(max-width:600px){
  body[data-page="result"] .result-hero{
    padding:17px 18px!important;
    background:rgba(2,20,43,.38)!important;
  }
}

/* =========================================================
   v7.78 – Gesamtergebnis: Wert exakt zentriert und nie abgeschnitten
   Desktop / Tablet / Mobile
   ========================================================= */

/* Der gesamte Ergebnis-Visor bleibt als ein sauberer, zentrierter Block. */
body[data-page="result"] .result-hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:visible!important;
}

/* Label, Wert und Aussage teilen exakt dieselbe Mittelachse. */
body[data-page="result"] .result-hero-label,
body[data-page="result"] .result-hero-sub{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Wichtigster Fix:
   Kein inline-block mehr, keine seitliche Verschiebung, kein abgeschnittener Betrag. */
body[data-page="result"] .result-hero-value{
  display:block!important;
  position:static!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:12px auto 0!important;
  padding:8px 8px 10px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
  font-size:clamp(38px,5vw,58px)!important;
  line-height:1.08!important;
  letter-spacing:-0.02em!important;
}

/* Tablet */
@media(min-width:601px) and (max-width:900px){
  body[data-page="result"] .result-hero-value{
    font-size:clamp(38px,6vw,52px)!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
}

/* Mobile: Betrag wird bewusst kleiner skaliert, bleibt aber prominent.
   So passt auch ein fünfstelliger Eurobetrag vollständig in den Visor. */
@media(max-width:600px){
  body[data-page="result"] .result-hero{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body[data-page="result"] .result-hero-value{
    width:100%!important;
    max-width:100%!important;
    margin-top:10px!important;
    padding:6px 0 8px!important;
    font-size:clamp(32px,10.2vw,44px)!important;
    line-height:1.08!important;
    letter-spacing:-0.025em!important;
  }

  body[data-page="result"] .result-hero-sub{
    margin-top:12px!important;
    font-size:clamp(15px,4vw,18px)!important;
    line-height:1.45!important;
  }
}

/* =========================================================
   v7.81 – Mobile/Tablet Wizard: Rollback auf das funktionierende
   Desktop-Prinzip aus v7.72
   ========================================================= */

@media(max-width:900px){

  /* Alle Kategorien identisch – keine semantisch unterschiedlich
     eingefärbten Karten mehr. */
  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster,
  body[data-page="einsatzprofil"] .cluster-vehicle,
  body[data-page="einsatzprofil"] .cluster-energy,
  body[data-page="einsatzprofil"] .cluster-running,
  body[data-page="current"] .cluster-vehicle,
  body[data-page="current"] .cluster-energy,
  body[data-page="current"] .cluster-capital,
  body[data-page="current"] .cluster-running,
  body[data-page="vergleich"] .cluster-vehicle,
  body[data-page="vergleich"] .cluster-energy,
  body[data-page="vergleich"] .cluster-capital,
  body[data-page="vergleich"] .cluster-running{
    background:rgba(245,249,252,.43)!important;
    background-color:rgba(245,249,252,.43)!important;
    background-image:none!important;
    border:1px solid rgba(225,235,243,.52)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
  }

  /* Der entscheidende Punkt:
     Ein .field besitzt überhaupt keine sichtbare Fläche.
     Dadurch steht die Bezeichnung einfach auf der großen Karte. */
  body[data-page="einsatzprofil"] .field,
  body[data-page="current"] .field,
  body[data-page="vergleich"] .field,
  body[data-page="einsatzprofil"] .form-block,
  body[data-page="current"] .form-block,
  body[data-page="vergleich"] .form-block{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding:0!important;
  }

  /* Labels und Label-Zeilen sind nur Text – kein Rechteck,
     keine eigene Farbe, kein eigener Hintergrund. */
  body[data-page="einsatzprofil"] .field label,
  body[data-page="current"] .field label,
  body[data-page="vergleich"] .field label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row,
  body[data-page="einsatzprofil"] .wd-label-row label,
  body[data-page="current"] .wd-label-row label,
  body[data-page="vergleich"] .wd-label-row label,
  body[data-page="current"] .field-head,
  body[data-page="vergleich"] .field-head,
  body[data-page="current"] .field-head label,
  body[data-page="vergleich"] .field-head label{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
    color:#111827!important;
  }

  /* Nur das tatsächliche Eingabeelement erhält eine helle Glasfläche,
     exakt wie beim funktionierenden Desktop-Prinzip. */
  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(255,255,255,.58)!important;
    background-color:rgba(255,255,255,.58)!important;
    background-image:none!important;
    border:1px solid rgba(197,213,226,.68)!important;
    box-shadow:none!important;
    color:#17233a!important;
  }

  body[data-page="einsatzprofil"] input::placeholder,
  body[data-page="current"] input::placeholder,
  body[data-page="vergleich"] input::placeholder{
    color:#68778a!important;
  }

  /* Kategorieüberschrift ebenfalls nur Text auf der gemeinsamen Karte. */
  body[data-page="einsatzprofil"] .wizard-cluster-title,
  body[data-page="current"] .wizard-cluster-title,
  body[data-page="vergleich"] .wizard-cluster-title,
  body[data-page="einsatzprofil"] .wizard-cluster-title h3,
  body[data-page="current"] .wizard-cluster-title h3,
  body[data-page="vergleich"] .wizard-cluster-title h3{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Finanzierungs-/Sonderbereiche dürfen die Feldlogik nicht wieder
     mit eigenen weißen Flächen überschreiben. */
  body[data-page="current"] .capital-v72-group,
  body[data-page="vergleich"] .capital-v72-group,
  body[data-page="current"] .auto-box,
  body[data-page="vergleich"] .auto-box{
    box-shadow:none!important;
  }
}

/* Mobile bleibt einspaltig; ansonsten exakt dieselbe visuelle Logik. */
@media(max-width:600px){
  body[data-page="einsatzprofil"] .wizard-two-col,
  body[data-page="current"] .wizard-two-col,
  body[data-page="vergleich"] .wizard-two-col,
  body[data-page="current"] .capital-v72-grid,
  body[data-page="current"] .capital-v72-inner,
  body[data-page="vergleich"] .capital-v72-grid,
  body[data-page="vergleich"] .capital-v72-inner{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   v7.82 – Gesamtergebnis komplett neu aufgebaut
   Keine Legacy-.result-hero-Klassen mehr.
   ========================================================= */
body[data-page="result"] .result-total-v782{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:14px 0 18px!important;
  padding:20px 22px!important;
  overflow:visible!important;
  border:1px solid rgba(190,216,235,.28)!important;
  border-radius:16px!important;
  background:rgba(2,20,43,.34)!important;
  box-shadow:none!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  text-align:center!important;
}

body[data-page="result"] .result-total-label-v782{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#eaf5ff!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:750!important;
  text-align:center!important;
}

body[data-page="result"] .result-total-value-v782{
  all:unset;
  display:block!important;
  position:static!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:14px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  color:#eef8ea!important;
  font-family:Arial, Helvetica, sans-serif!important;
  font-size:52px!important;
  line-height:1.15!important;
  font-weight:850!important;
  letter-spacing:-1px!important;
  text-align:center!important;
  text-indent:0!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  clip:auto!important;
  clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
}

body[data-page="result"] .result-total-text-v782{
  display:block!important;
  width:100%!important;
  max-width:760px!important;
  box-sizing:border-box!important;
  margin:14px auto 0!important;
  padding:0!important;
  color:rgba(255,255,255,.88)!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  font-size:16px!important;
  line-height:1.45!important;
  text-align:center!important;
}

@media(max-width:900px){
  body[data-page="result"] .result-total-value-v782{
    font-size:46px!important;
  }
}

@media(max-width:600px){
  body[data-page="result"] .result-total-v782{
    padding:18px 16px!important;
    background:rgba(2,20,43,.38)!important;
  }

  body[data-page="result"] .result-total-value-v782{
    font-size:38px!important;
    line-height:1.2!important;
    letter-spacing:-.5px!important;
    white-space:nowrap!important;
  }

  body[data-page="result"] .result-total-text-v782{
    margin-top:13px!important;
    font-size:16px!important;
    line-height:1.45!important;
  }
}

/* =========================================================
   v7.85 – Wizard Glassoptik direkt im Markup erzwungen
   Entspricht dem freigegebenen Mockup: dunkle transparente
   Außenkarte, leicht dichtere neutrale Eingabeflächen.
   ========================================================= */

/* Seite und Hauptkarte bleiben transparent. */
body[data-page="einsatzprofil"] .modular-shell,
body[data-page="current"] .modular-shell,
body[data-page="vergleich"] .modular-shell,
body[data-page="einsatzprofil"] .section-card,
body[data-page="current"] .section-card,
body[data-page="vergleich"] .section-card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Seitentitel immer weiß und klar lesbar. */
body[data-page="einsatzprofil"] .section-card>h2,
body[data-page="current"] .section-card>h2,
body[data-page="vergleich"] .section-card>h2{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.38)!important;
}

/* Readonly + Platzhalter lesbar. */
body[data-page="einsatzprofil"] input[readonly],
body[data-page="current"] input[readonly],
body[data-page="vergleich"] input[readonly]{
  background:rgba(255,255,255,.10)!important;
  color:#e8eef4!important;
}
body[data-page="einsatzprofil"] input::placeholder,
body[data-page="current"] input::placeholder,
body[data-page="vergleich"] input::placeholder{
  color:rgba(236,243,249,.58)!important;
}

/* Native Optionen im geöffneten Select brauchen dunklen Text. */
body[data-page="einsatzprofil"] select option,
body[data-page="current"] select option,
body[data-page="vergleich"] select option{
  color:#17233a!important;
  background:#fff!important;
}

/* Info-Buttons auf dunkler Glasfläche. */
.wd-info,.field-info{
  background:rgba(2,20,43,.55)!important;
  color:#dce9f4!important;
  border-color:rgba(220,235,246,.58)!important;
}

/* Beschaffungsarten: neutrale Glasbuttons, nicht farbige Karten. */
body[data-page="current"] .procurement-options label,
body[data-page="vergleich"] .procurement-options label{
  background:rgba(255,255,255,.09)!important;
  color:#f3f7fa!important;
  border-color:rgba(215,230,241,.22)!important;
}

/* Mobile: gleiche Optik wie Desktop, nur einspaltig und kompakter. */
@media(max-width:600px){
  body[data-page="einsatzprofil"] .wizard-cluster,
  body[data-page="current"] .wizard-cluster,
  body[data-page="vergleich"] .wizard-cluster{
    padding:18px!important;
    margin-bottom:14px!important;
  }

  body[data-page="einsatzprofil"] .wizard-two-col,
  body[data-page="current"] .wizard-two-col,
  body[data-page="vergleich"] .wizard-two-col,
  body[data-page="current"] .capital-v72-grid,
  body[data-page="current"] .capital-v72-inner,
  body[data-page="vergleich"] .capital-v72-grid,
  body[data-page="vergleich"] .capital-v72-inner{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   v7.87 – letzte Bereinigung vor 8.0
   1) Desktop: Flottenanzahl vertikal ausrichten
   2) Tablet: Labels exakt wie Desktop/Mobile ohne eigene Fläche
   ========================================================= */

/* Desktop: "Anzahl der Fahrzeuge" inklusive Info-i auf dieselbe
   Feldkopf-/Input-Achse wie Fahrzeugtyp und Nutzungsdauer setzen. */
@media(min-width:901px){
  body[data-page="einsatzprofil"] .cluster-vehicle .wizard-two-col{
    align-items:start!important;
  }

  body[data-page="einsatzprofil"] .cluster-vehicle .field{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-self:start!important;
  }

  body[data-page="einsatzprofil"] .cluster-vehicle .field > label,
  body[data-page="einsatzprofil"] .cluster-vehicle .wd-label-row{
    min-height:22px!important;
    height:22px!important;
    margin:0 0 7px!important;
    padding:0!important;
    box-sizing:border-box!important;
    align-items:center!important;
  }

  body[data-page="einsatzprofil"] .cluster-vehicle .wd-label-row label{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }

  body[data-page="einsatzprofil"] .cluster-vehicle input,
  body[data-page="einsatzprofil"] .cluster-vehicle select{
    margin-top:0!important;
  }
}

/* Tablet: Feldbezeichnungen dürfen keine eigene Box/Fläche bilden.
   Das wird bewusst nach allen älteren Tablet-Regeln nochmals erzwungen. */
@media(min-width:601px) and (max-width:900px){
  body[data-page="einsatzprofil"] .field,
  body[data-page="current"] .field,
  body[data-page="vergleich"] .field,
  body[data-page="einsatzprofil"] .field > label,
  body[data-page="current"] .field > label,
  body[data-page="vergleich"] .field > label,
  body[data-page="einsatzprofil"] .field label,
  body[data-page="current"] .field label,
  body[data-page="vergleich"] .field label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row,
  body[data-page="einsatzprofil"] .wd-label-row label,
  body[data-page="current"] .wd-label-row label,
  body[data-page="vergleich"] .wd-label-row label,
  body[data-page="current"] .field-head,
  body[data-page="vergleich"] .field-head,
  body[data-page="current"] .field-head label,
  body[data-page="vergleich"] .field-head label{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:none!important;
  }

  /* Die Bezeichnung ist nur Text auf der gemeinsamen Glasscheibe. */
  body[data-page="einsatzprofil"] .field label,
  body[data-page="current"] .field label,
  body[data-page="vergleich"] .field label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row{
    color:#f2f6fa!important;
  }

  /* Nur das tatsächliche Eingabeelement bleibt als Glas-Control sichtbar. */
  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(255,255,255,.14)!important;
    background-color:rgba(255,255,255,.14)!important;
    background-image:none!important;
    border:1px solid rgba(220,234,244,.30)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  }
}

/* =========================================================
   v7.88 – Desktop/Tablet: unsichtbare Label-Flächen
   Referenz: Nutzerfoto – sichtbare Rechtecke hinter Marke,
   Modell, Variante, Motorisierung und allen anderen Labels.
   Mobile bewusst unverändert.
   ========================================================= */

@media(min-width:601px){

  /*
   * Die sichtbare Fläche stammt nicht vom eigentlichen Input,
   * sondern von den Feld-/Label-Zeilen. Deshalb werden ALLE
   * möglichen Label-Träger im Wizard explizit flächenlos.
   */
  body[data-page="einsatzprofil"] .field,
  body[data-page="current"] .field,
  body[data-page="vergleich"] .field,
  body[data-page="einsatzprofil"] .field > label,
  body[data-page="current"] .field > label,
  body[data-page="vergleich"] .field > label,
  body[data-page="einsatzprofil"] .field label,
  body[data-page="current"] .field label,
  body[data-page="vergleich"] .field label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row,
  body[data-page="einsatzprofil"] .wd-label-row label,
  body[data-page="current"] .wd-label-row label,
  body[data-page="vergleich"] .wd-label-row label,
  body[data-page="einsatzprofil"] .field-head,
  body[data-page="current"] .field-head,
  body[data-page="vergleich"] .field-head,
  body[data-page="einsatzprofil"] .field-head label,
  body[data-page="current"] .field-head label,
  body[data-page="vergleich"] .field-head label{
    background:none!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    border-top:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-left:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
    filter:none!important;
  }

  /*
   * Auch Pseudo-Elemente ausschalten. Ältere Designstände
   * konnten über ::before/::after eine Label-Fläche erzeugen.
   */
  body[data-page="einsatzprofil"] .field::before,
  body[data-page="einsatzprofil"] .field::after,
  body[data-page="current"] .field::before,
  body[data-page="current"] .field::after,
  body[data-page="vergleich"] .field::before,
  body[data-page="vergleich"] .field::after,
  body[data-page="einsatzprofil"] .field label::before,
  body[data-page="einsatzprofil"] .field label::after,
  body[data-page="current"] .field label::before,
  body[data-page="current"] .field label::after,
  body[data-page="vergleich"] .field label::before,
  body[data-page="vergleich"] .field label::after,
  body[data-page="einsatzprofil"] .wd-label-row::before,
  body[data-page="einsatzprofil"] .wd-label-row::after,
  body[data-page="current"] .wd-label-row::before,
  body[data-page="current"] .wd-label-row::after,
  body[data-page="vergleich"] .wd-label-row::before,
  body[data-page="vergleich"] .wd-label-row::after{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Label bleibt reiner Text und nimmt nur die notwendige Höhe ein. */
  body[data-page="einsatzprofil"] .field > label,
  body[data-page="current"] .field > label,
  body[data-page="vergleich"] .field > label,
  body[data-page="einsatzprofil"] .wd-label-row,
  body[data-page="current"] .wd-label-row,
  body[data-page="vergleich"] .wd-label-row,
  body[data-page="einsatzprofil"] .field-head,
  body[data-page="current"] .field-head,
  body[data-page="vergleich"] .field-head{
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Die eigentlichen Controls bleiben unverändert sichtbar.
     Nur sie dürfen eine Glasfläche besitzen. */
  body[data-page="einsatzprofil"] input,
  body[data-page="einsatzprofil"] select,
  body[data-page="einsatzprofil"] textarea,
  body[data-page="current"] input,
  body[data-page="current"] select,
  body[data-page="current"] textarea,
  body[data-page="vergleich"] input,
  body[data-page="vergleich"] select,
  body[data-page="vergleich"] textarea{
    background:rgba(255,255,255,.14)!important;
    background-color:rgba(255,255,255,.14)!important;
    background-image:none!important;
    border:1px solid rgba(220,234,244,.30)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  }
}

/* =========================================================
   v7.89 – echte Ursache bereinigt:
   valides Form-Markup + keine Zusatzbox im Anschaffungskostenblock
   ========================================================= */

/* Feldcontainer und Beschriftungszeilen sind auf ALLEN Endgeräten
   vollständig flächenlos. Nur das eigentliche Control darf sichtbar sein. */
body[data-page="einsatzprofil"] .field,
body[data-page="current"] .field,
body[data-page="vergleich"] .field,
body[data-page="einsatzprofil"] .field > label,
body[data-page="current"] .field > label,
body[data-page="vergleich"] .field > label,
body[data-page="einsatzprofil"] .field label,
body[data-page="current"] .field label,
body[data-page="vergleich"] .field label,
body[data-page="einsatzprofil"] .wd-label-row,
body[data-page="current"] .wd-label-row,
body[data-page="vergleich"] .wd-label-row,
body[data-page="einsatzprofil"] .wd-label-row label,
body[data-page="current"] .wd-label-row label,
body[data-page="vergleich"] .wd-label-row label,
body[data-page="current"] .field-head,
body[data-page="vergleich"] .field-head,
body[data-page="current"] .field-head label,
body[data-page="vergleich"] .field-head label{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Keine künstliche Fläche via Pseudo-Elementen. */
body[data-page="einsatzprofil"] .field::before,
body[data-page="einsatzprofil"] .field::after,
body[data-page="current"] .field::before,
body[data-page="current"] .field::after,
body[data-page="vergleich"] .field::before,
body[data-page="vergleich"] .field::after,
body[data-page="einsatzprofil"] .wd-label-row::before,
body[data-page="einsatzprofil"] .wd-label-row::after,
body[data-page="current"] .wd-label-row::before,
body[data-page="current"] .wd-label-row::after,
body[data-page="vergleich"] .wd-label-row::before,
body[data-page="vergleich"] .wd-label-row::after{
  content:none!important;
  display:none!important;
}

/* Anschaffungskosten:
   Finanzierungsleasing / Operating Leasing / Kauf sind keine zweite Karte
   innerhalb der bereits vorhandenen Glasscheibe mehr. */
body[data-page="current"] .capital-v72-group,
body[data-page="vergleich"] .capital-v72-group,
body[data-page="current"] .capital-v72-financial,
body[data-page="vergleich"] .capital-v72-financial,
body[data-page="current"] .capital-v72-operating,
body[data-page="vergleich"] .capital-v72-operating,
body[data-page="current"] .capital-v72-purchase,
body[data-page="vergleich"] .capital-v72-purchase{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Untertitel wie "Finanzierungsleasing" nur als Text. */
body[data-page="current"] .capital-v72-title,
body[data-page="vergleich"] .capital-v72-title{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Auch der Beschaffungsart-Wrapper selbst ist keine zusätzliche Karte. */
body[data-page="current"] .capital-mode-v72,
body[data-page="vergleich"] .capital-mode-v72,
body[data-page="current"] .capital-v72-groups,
body[data-page="vergleich"] .capital-v72-groups,
body[data-page="current"] .capital-v72-inner,
body[data-page="vergleich"] .capital-v72-inner{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Nur Inputs/Selects/Textareas behalten die eigentliche Glas-Controlfläche. */
body[data-page="einsatzprofil"] input,
body[data-page="einsatzprofil"] select,
body[data-page="einsatzprofil"] textarea,
body[data-page="current"] input,
body[data-page="current"] select,
body[data-page="current"] textarea,
body[data-page="vergleich"] input,
body[data-page="vergleich"] select,
body[data-page="vergleich"] textarea{
  background:rgba(255,255,255,.14)!important;
  background-color:rgba(255,255,255,.14)!important;
  background-image:none!important;
  border:1px solid rgba(220,234,244,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* =========================================================
   E-FLEET CHECK 8.0 – PHASE 1
   Neue Seitenarchitektur:
   - fixes, endgerätabhängiges Hintergrundmotiv
   - fixer Header
   - kompakte fixe Wizard-Schrittleiste
   - scrollender Inhaltsbereich
   - fixe Aktionsleiste unten
   - Startseite Desktop/Tablet viewportfest
   ========================================================= */

:root{
  --v800-header-h:74px;
  --v800-steps-h:82px;
  --v800-actions-h:78px;
  --v800-safe-top:env(safe-area-inset-top,0px);
  --v800-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------------------------------------------------------
   1. Ein einziges festes Hintergrund-Layer
   --------------------------------------------------------- */
body{
  position:relative!important;
  min-height:100dvh!important;
  background:none!important;
  background-color:#020d1d!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat!important;
  background-color:#020d1d!important;
  background-size:cover!important;
  transform:translateZ(0);
}

/* Desktop: freigegebenes Desktop-Master */
@media(min-width:1280px){
  body::before{
    background-image:url("../assets/efleet-background-desktop-v800.jpg")!important;
    background-position:center top!important;
  }
}

/* Tablet: exakt aus demselben freigegebenen Desktop-Master abgeleitet.
   Kein neues Fahrzeugmotiv, nur eigener Breakpoint/Ausschnitt. */
@media(min-width:601px) and (max-width:1279px){
  body::before{
    background-image:url("../assets/efleet-background-tablet-v800.jpg")!important;
    background-position:center top!important;
  }
}

/* Mobile: freigegebenes Hochformat-Master, Seitenverhältnis bleibt erhalten. */
@media(max-width:600px){
  body::before{
    background-image:url("../assets/efleet-background-mobile-v800.jpg")!important;
    background-position:center top!important;
    background-size:cover!important;
  }
}

/* ---------------------------------------------------------
   2. Fixer Header auf Wizard + Ergebnis
   --------------------------------------------------------- */
body[data-page] .v759-header{
  position:fixed!important;
  top:var(--v800-safe-top)!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  max-width:none!important;
  height:var(--v800-header-h)!important;
  margin:0!important;
  padding:0 22px!important;
  box-sizing:border-box!important;
  z-index:1000!important;
  display:flex!important;
  align-items:center!important;
  background:linear-gradient(
    180deg,
    rgba(2,13,29,.88) 0%,
    rgba(2,13,29,.68) 70%,
    rgba(2,13,29,.28) 100%
  )!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

body[data-page] .v759-menu-button{
  margin-left:auto!important;
  margin-right:0!important;
}

/* ---------------------------------------------------------
   3. Kompakte fixe Wizard-Schrittleiste
   --------------------------------------------------------- */
body[data-page] .efleet-wizard-steps-v771{
  position:fixed!important;
  top:calc(var(--v800-safe-top) + var(--v800-header-h))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:990!important;
  width:min(430px,calc(100% - 28px))!important;
  height:var(--v800-steps-h)!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:8px 8px 10px!important;
  gap:14px!important;
  background:rgba(2,13,29,.52)!important;
  border:1px solid rgba(190,216,235,.18)!important;
  border-radius:0 0 16px 16px!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

body[data-page] .efleet-wizard-steps-v771::before{
  top:31px!important;
}

body[data-page] .wizard-step-icon-v771{
  width:40px!important;
  height:40px!important;
}

body[data-page] .wizard-step-icon-v771 svg{
  width:20px!important;
  height:20px!important;
}

body[data-page] .wizard-step-number-v771{
  font-size:.64rem!important;
  line-height:1!important;
}

/* ---------------------------------------------------------
   4. Nur Inhalt scrollt unter den fixen Ebenen
   --------------------------------------------------------- */
body[data-page] .modular-shell{
  padding-top:calc(
    var(--v800-safe-top) +
    var(--v800-header-h) +
    var(--v800-steps-h) +
    18px
  )!important;
  padding-bottom:calc(
    var(--v800-actions-h) +
    var(--v800-safe-bottom) +
    30px
  )!important;
  box-sizing:border-box!important;
}

body[data-page] .section-card{
  margin-top:0!important;
}

/* ---------------------------------------------------------
   5. Fixe Aktionsleiste unten
   --------------------------------------------------------- */
body[data-page] .modular-nav,
body[data-page="result"] .modular-result-actions{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:1000!important;
  min-height:var(--v800-actions-h)!important;
  margin:0!important;
  padding:12px max(18px,env(safe-area-inset-left))
          calc(12px + var(--v800-safe-bottom))
          max(18px,env(safe-area-inset-right))!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  background:linear-gradient(
    0deg,
    rgba(2,13,29,.94) 0%,
    rgba(2,13,29,.76) 75%,
    rgba(2,13,29,.22) 100%
  )!important;
  border-top:1px solid rgba(190,216,235,.18)!important;
  box-shadow:none!important;
  backdrop-filter:blur(11px)!important;
  -webkit-backdrop-filter:blur(11px)!important;
}

body[data-page] .modular-nav > *,
body[data-page="result"] .modular-result-actions > *{
  flex:0 1 260px!important;
  width:min(260px,46vw)!important;
  max-width:260px!important;
}

/* ---------------------------------------------------------
   6. Startseite – Desktop/Tablet viewportfest
   --------------------------------------------------------- */
@media(min-width:601px){
  body:not([data-page]){
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }

  body:not([data-page]) .v759-header{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:20!important;
  }

  body:not([data-page]) .landing-minimal{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body:not([data-page]) .landing-steps-v760{
    position:absolute!important;
    left:50%!important;
    bottom:18px!important;
    transform:translateX(-50%)!important;
    width:calc(100% - 40px)!important;
    max-width:1180px!important;
    margin:0!important;
  }
}

/* Tablet: etwas kompaktere vier Schritte, damit alles im Viewport bleibt. */
@media(min-width:601px) and (max-width:1279px){
  body:not([data-page]) .landing-steps-v760{
    bottom:12px!important;
  }

  body:not([data-page]) .landing-steps-v760 .steps-grid{
    gap:9px!important;
  }

  body:not([data-page]) .landing-steps-v760 .step-card{
    min-height:124px!important;
    padding:11px 12px!important;
  }

  body:not([data-page]) .landing-steps-v760 .step-card p{
    font-size:.74rem!important;
    line-height:1.3!important;
  }
}

/* Mobile: gleiche feste Hintergrundlogik; Startseite darf weiterhin
   bei kleinen Höhen scrollen, damit nichts abgeschnitten wird. */
@media(max-width:600px){
  :root{
    --v800-header-h:66px;
    --v800-steps-h:70px;
    --v800-actions-h:72px;
  }

  body[data-page] .v759-header{
    padding:0 14px!important;
  }

  body[data-page] .efleet-wizard-steps-v771{
    width:min(330px,calc(100% - 20px))!important;
    gap:8px!important;
    padding-top:7px!important;
  }

  body[data-page] .wizard-step-icon-v771{
    width:34px!important;
    height:34px!important;
  }

  body[data-page] .wizard-step-icon-v771 svg{
    width:18px!important;
    height:18px!important;
  }

  body[data-page] .efleet-wizard-steps-v771::before{
    top:25px!important;
  }

  body[data-page] .modular-nav > *,
  body[data-page="result"] .modular-result-actions > *{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
}

/* =========================================================
   v8.01 – Phase 1.1
   Mobile-Fix: echte App-Shell statt Dokument-Scroll
   ========================================================= */

/* Wizard/Ergebnis: Viewport selbst ist fest. Nur main scrollt. */
body[data-page]{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

/* Fester Hintergrund: niemals Teil des Scroll-Containers. */
body[data-page]::before{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:-5!important;
}

/* Header ist echtes Viewport-Sibling und nicht Teil des Scrollbereichs. */
body[data-page] > .v759-header{
  position:fixed!important;
  top:var(--v800-safe-top)!important;
  left:0!important;
  right:0!important;
  z-index:3000!important;
  transform:none!important;
  will-change:auto!important;
}

/* Schrittleiste wurde aus <main> herausgezogen. */
body[data-page] > .efleet-wizard-steps-v771{
  position:fixed!important;
  top:calc(var(--v800-safe-top) + var(--v800-header-h))!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:2900!important;
  margin:0!important;
}

/* Der EINZIGE vertikale Scroll-Container im Wizard. */
body[data-page] > .modular-shell{
  position:fixed!important;
  top:calc(var(--v800-safe-top) + var(--v800-header-h) + var(--v800-steps-h))!important;
  left:0!important;
  right:0!important;
  bottom:calc(var(--v800-actions-h) + var(--v800-safe-bottom))!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:18px 18px 28px!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  scroll-behavior:smooth!important;
}

/* Desktop behält den schmäleren eigentlichen Formularinhalt. */
@media(min-width:901px){
  body[data-page] > .modular-shell > .section-card{
    width:min(920px,calc(100% - 64px))!important;
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Bottom-Bar wurde ebenfalls aus dem Scrollbereich herausgezogen. */
body[data-page] > .modular-nav,
body[data-page="result"] > .modular-result-actions{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:3000!important;
  margin:0!important;
  transform:none!important;
}

/* Menü muss immer über Header/Steps/Bottom-Bar liegen. */
body[data-page] .v759-menu{
  position:fixed!important;
  z-index:5000!important;
}

/* =========================================================
   Hintergrund-Ausschnitte v8.01
   Keine neuen Bilder – ausschließlich freigegebene Master.
   ========================================================= */

/* Desktop-Master: vollständig in der Breite, kein künstliches Cropping. */
@media(min-width:1280px){
  body::before{
    background-image:url("../assets/efleet-background-desktop-v800.jpg")!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-color:#020d1d!important;
  }
}

/* Tablet = dasselbe Desktop-Master.
   100% auto verhindert, dass Fahrzeuge seitlich abgeschnitten werden. */
@media(min-width:601px) and (max-width:1279px){
  body::before{
    background-image:url("../assets/efleet-background-tablet-v800.jpg")!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-color:#020d1d!important;
  }
}

/* Mobile = freigegebenes Hochformat-Master.
   Kein cover mehr: Seitenverhältnis bleibt unverändert,
   keine Fahrzeuge werden durch Cropping abgeschnitten. */
@media(max-width:600px){
  body::before{
    background-image:url("../assets/efleet-background-mobile-v800.jpg")!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-color:#020d1d!important;
  }

  /* iOS: exakt genug Abstand trotz Dynamic Island / Browserleisten. */
  body[data-page] > .modular-shell{
    padding:14px 12px 22px!important;
  }

  body[data-page] > .efleet-wizard-steps-v771{
    width:min(330px,calc(100% - 20px))!important;
  }
}

/* =========================================================
   v8.02 – Phase 1.2
   Startseiten-Positionen + saubere Sticky-Schrittleiste
   Hintergründe bewusst noch NICHT verändert.
   ========================================================= */

/* ---------------------------------------------------------
   A) STARTSEITE DESKTOP / TABLET
   Header bekommt eine feste Schutzzone. Hero beginnt erst darunter.
   Dadurch überschneiden sich Logo und "E-Fleet Check." nicht mehr.
   --------------------------------------------------------- */
@media(min-width:601px){

  body:not([data-page]) .v759-header{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(1180px,calc(100% - 36px))!important;
    height:92px!important;
    margin:0!important;
    padding:0!important;
    z-index:50!important;
  }

  body:not([data-page]) .landing-minimal{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding-top:112px!important;
    padding-bottom:0!important;
    box-sizing:border-box!important;
  }

  body:not([data-page]) .landing-hero{
    margin-top:0!important;
  }

  body:not([data-page]) .landing-hero-inner{
    padding-top:8px!important;
  }
}

/* Tablet: etwas mehr Abstand, weil Browserleisten und kleinere Höhe
   die optische Überschneidung stärker sichtbar machen. */
@media(min-width:601px) and (max-width:1279px){
  body:not([data-page]) .landing-minimal{
    padding-top:118px!important;
  }

  body:not([data-page]) .landing-hero-inner{
    padding-top:4px!important;
  }
}

/* ---------------------------------------------------------
   B) STICKY WIZARD-NAVIGATION
   Kein Rahmen/keine umschließende Karte mehr.
   --------------------------------------------------------- */
body[data-page] > .efleet-wizard-steps-v771{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding-left:8px!important;
  padding-right:8px!important;
}

/* Verbindungslinie liegt hinter den Kreisen. */
body[data-page] > .efleet-wizard-steps-v771::before{
  z-index:0!important;
  height:1px!important;
  background:rgba(190,207,222,.42)!important;
}

/* Jeder Kreis maskiert die Linie vollständig.
   So läuft die Linie auf Tablet/Mobile NICHT durch das Symbol. */
body[data-page] > .efleet-wizard-steps-v771 .efleet-wizard-step-v771{
  position:relative!important;
  z-index:2!important;
}

body[data-page] > .efleet-wizard-steps-v771 .wizard-step-icon-v771{
  position:relative!important;
  z-index:3!important;
  background:rgba(2,13,29,.96)!important;
  box-shadow:0 0 0 5px rgba(2,13,29,.96)!important;
}

/* Aktiver Kreis behält seine Akzentfarbe, aber ebenfalls als saubere Maske. */
body[data-page] > .efleet-wizard-steps-v771 .efleet-wizard-step-v771.active .wizard-step-icon-v771{
  background:rgba(2,13,29,.98)!important;
  box-shadow:
    0 0 0 5px rgba(2,13,29,.96),
    0 0 16px rgba(132,221,67,.12)!important;
}

/* Tablet/Mobile: Verbindungslinie endet optisch an den Kreisen,
   ohne durch sie hindurchzulaufen. */
@media(max-width:1279px){
  body[data-page] > .efleet-wizard-steps-v771::before{
    left:11%!important;
    right:11%!important;
  }
}

@media(max-width:600px){
  body[data-page] > .efleet-wizard-steps-v771 .wizard-step-icon-v771{
    box-shadow:0 0 0 4px rgba(2,13,29,.96)!important;
  }

  body[data-page] > .efleet-wizard-steps-v771 .efleet-wizard-step-v771.active .wizard-step-icon-v771{
    box-shadow:
      0 0 0 4px rgba(2,13,29,.96),
      0 0 14px rgba(132,221,67,.10)!important;
  }
}

/* =========================================================
   v8.03 – Structural cleanup
   Fixes are DOM-backed, not only CSS overrides.
   ========================================================= */

/* HOME: real reserved header zone */
@media(min-width:601px){
  body.v803-home{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }

  body.v803-home .v803-home-main{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding-top:124px!important;
    padding-bottom:0!important;
    overflow:hidden!important;
  }

  body.v803-home .landing-hero{
    margin-top:0!important;
    padding-top:0!important;
  }

  body.v803-home .landing-hero-inner{
    padding-top:0!important;
  }

  body.v803-home .landing-catchphrase{
    margin-top:0!important;
  }
}

@media(min-width:601px) and (max-width:1279px){
  body.v803-home .v803-home-main{
    padding-top:130px!important;
  }
}

/* WIZARD STEPS: remove ALL legacy wrapper visuals and pseudo-line */
body[data-page] > .v803-wizard-steps{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-page] > .v803-wizard-steps::before,
body[data-page] > .v803-wizard-steps::after{
  content:none!important;
  display:none!important;
}

/* Explicit segmented connectors: never run through icons */
body[data-page] > .v803-wizard-steps .v803-step-connector{
  display:block!important;
  flex:1 1 48px!important;
  min-width:24px!important;
  max-width:72px!important;
  height:1px!important;
  margin-top:20px!important;
  background:rgba(190,207,222,.42)!important;
  border:0!important;
  box-shadow:none!important;
}

body[data-page] > .v803-wizard-steps .efleet-wizard-step-v771{
  flex:0 0 52px!important;
  width:52px!important;
  min-width:52px!important;
  position:relative!important;
  z-index:2!important;
}

body[data-page] > .v803-wizard-steps .wizard-step-icon-v771{
  background:rgba(2,13,29,.96)!important;
  box-shadow:none!important;
}

@media(max-width:600px){
  body[data-page] > .v803-wizard-steps .efleet-wizard-step-v771{
    flex-basis:44px!important;
    width:44px!important;
    min-width:44px!important;
  }

  body[data-page] > .v803-wizard-steps .v803-step-connector{
    min-width:16px!important;
    max-width:42px!important;
    margin-top:17px!important;
  }
}

/* v8.04 diagnostic marker */
#v804BuildBadge{display:block!important}

/* =========================================================
   v8.05 – Homepage positioning per breakpoint
   Screenshots: mobile overlap, desktop header width, tablet gap
   ========================================================= */

/* Reset previous home-only experiments so v8.05 owns the geometry. */
body.v805-home .v759-header,
body.v805-home .v805-home-header{
  transform:none!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}

body.v805-home .v805-home-main{
  box-sizing:border-box!important;
}

/* ---------------- DESKTOP ----------------
   Header uses full viewport width.
   Content gets a stable inner left/right gutter.
*/
@media(min-width:1280px){
  body.v805-home .v805-home-header{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:92px!important;
    padding:0 28px!important;
    z-index:100!important;
  }

  body.v805-home .v805-home-main{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding-top:108px!important;
    padding-left:28px!important;
    padding-right:28px!important;
    overflow:hidden!important;
  }

  body.v805-home .landing-hero{
    margin-top:0!important;
  }

  body.v805-home .landing-hero-inner{
    padding-top:0!important;
  }
}

/* ---------------- TABLET ----------------
   Same full-width header, but much smaller gap below it.
*/
@media(min-width:601px) and (max-width:1279px){
  body.v805-home .v805-home-header{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:84px!important;
    padding:0 18px!important;
    z-index:100!important;
  }

  body.v805-home .v805-home-main{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding-top:94px!important;
    padding-left:18px!important;
    padding-right:18px!important;
    overflow:hidden!important;
  }

  body.v805-home .landing-hero,
  body.v805-home .landing-hero-inner{
    margin-top:0!important;
    padding-top:0!important;
  }

  body.v805-home .landing-catchphrase{
    margin-top:0!important;
  }
}

/* ---------------- MOBILE ----------------
   Explicit reserved header zone, so the green H1 can never overlap logo/menu.
   Mobile remains scrollable.
*/
@media(max-width:600px){
  body.v805-home{
    min-height:100dvh!important;
    height:auto!important;
    overflow-y:auto!important;
  }

  body.v805-home .v805-home-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:92px!important;
    padding:0 18px!important;
    z-index:100!important;
  }

  body.v805-home .v805-home-main{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:18px 18px 0!important;
    overflow:visible!important;
  }

  body.v805-home .landing-hero,
  body.v805-home .landing-hero-inner{
    margin-top:0!important;
    padding-top:0!important;
  }

  body.v805-home .landing-catchphrase{
    margin-top:0!important;
  }

  body.v805-home .landing-steps-v760{
    margin-top:58vh!important;
  }
}

/* v8.07: obsolete landing footer permanently removed */
.landing-footer,.v759-footer-note{display:none!important}


/* =========================================================
   BACKGROUND-MINIMAL-VERIFIED
   One real DOM layer. No pseudo-elements. No negative z-index.
   ========================================================= */

html {
  background: #020d1d !important;
}

body {
  background: transparent !important;
  background-image: none !important;
}

/* Disable all legacy pseudo-backgrounds. */
body::before,
body::after,
html::before,
html::after {
  content: none !important;
  display: none !important;
}

.efleet-fixed-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background-color: #020d1d !important;
  background-repeat: no-repeat !important;
}

/* Every actual page element is above the image. */
body > :not(.efleet-fixed-background) {
  position: relative;
  z-index: 1;
}

/* Preserve existing fixed/sticky UI stacking. */
.v759-header,
.efleet-wizard-steps-v771,
.modular-nav,
.modular-result-actions,
.v759-menu {
  z-index: 3000 !important;
}

/* Desktop and tablet: one shared approved master. */
@media (min-width: 601px) {
  .efleet-fixed-background {
    background-image: url("../assets/background-desktop-tablet-final.png") !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Mobile: approved portrait master, full width, no horizontal crop/distortion. */
@media (max-width: 600px) {
  .efleet-fixed-background {
    background-image: url("../assets/background-mobile-final.png") !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }
}

/* =========================================================
   HOME TYPOGRAPHY TUNING – Desktop + Tablet only
   Confirmed background/mobile implementation untouched.
   ========================================================= */

/* Desktop: subtle reduction only. */
@media(min-width:1280px){
  body.v805-home .landing-catchphrase,
  body:not([data-page]) .landing-catchphrase{
    font-size:clamp(1.55rem,1.85vw,2.15rem)!important;
    line-height:1.06!important;
  }

  body.v805-home .landing-core-line,
  body:not([data-page]) .landing-core-line{
    font-size:clamp(.88rem,1.00vw,1.05rem)!important;
    line-height:1.34!important;
  }

  body.v805-home .landing-findout,
  body:not([data-page]) .landing-findout{
    font-size:clamp(.90rem,1.02vw,1.08rem)!important;
    line-height:1.30!important;
  }

  body.v805-home .landing-cta,
  body:not([data-page]) .landing-cta{
    font-size:.86rem!important;
    padding:.62rem 1.12rem!important;
  }
}

/* Tablet: slightly stronger reduction so text remains in the calm left zone. */
@media(min-width:601px) and (max-width:1279px){
  body.v805-home .landing-catchphrase,
  body:not([data-page]) .landing-catchphrase{
    font-size:clamp(1.35rem,2.55vw,1.85rem)!important;
    line-height:1.05!important;
  }

  body.v805-home .landing-core-line,
  body:not([data-page]) .landing-core-line{
    font-size:clamp(.80rem,1.55vw,.96rem)!important;
    line-height:1.32!important;
  }

  body.v805-home .landing-findout,
  body:not([data-page]) .landing-findout{
    font-size:clamp(.82rem,1.60vw,.98rem)!important;
    line-height:1.28!important;
  }

  body.v805-home .landing-cta,
  body:not([data-page]) .landing-cta{
    font-size:.80rem!important;
    padding:.58rem 1.02rem!important;
  }
}

/* =========================================================
   TABLET CTA POSITION TEST
   Only tablet: move CTA lower to avoid vehicle collision.
   Desktop + mobile intentionally untouched.
   ========================================================= */
@media(min-width:601px) and (max-width:1279px){
  body.v805-home .landing-cta,
  body:not([data-page]) .landing-cta{
    margin-top:2.05rem!important;
  }
}

/* =========================================================
   REVERSIBLE DESIGN TEST – transparent fixed UI bars
   Only visual surfaces change. Geometry/sticky logic untouched.
   ========================================================= */

/* Header: no dark strip, blur, border or shadow.
   Logo and burger remain exactly where they are. */
.v759-header,
body[data-page] > .v759-header,
body.v805-home .v759-header{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Wizard bottom action bar: completely invisible surface.
   Buttons themselves retain their glass styling. */
body[data-page] > .modular-nav,
body[data-page="result"] > .modular-result-actions,
body[data-page] .modular-nav,
body[data-page="result"] .modular-result-actions{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Do not alter the actual action buttons. */

/* =========================================================
   RESULT ACTIONS – cache-proof structural fix
   Side-by-side on every breakpoint; mobile sizing tightened.
   ========================================================= */
body[data-page="result"] .modular-result-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  box-sizing:border-box!important;
}

body[data-page="result"] .modular-result-actions > a{
  flex:1 1 0!important;
  width:0!important;
  min-width:0!important;
  max-width:260px!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

@media(max-width:600px){
  body[data-page="result"] .modular-result-actions{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body[data-page="result"] .modular-result-actions > a{
    max-width:none!important;
    min-height:44px!important;
    padding:8px 8px!important;
    font-size:.78rem!important;
    line-height:1.12!important;
    white-space:normal!important;
  }

  body[data-page="result"] > .modular-shell{
    padding-bottom:28px!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V1
   Ein zusammenhängender Glasblock, horizontale Linien,
   keine vertikalen Trenner.
   ========================================================= */

body[data-page="result"] .result-master-v1{
  width:min(980px,calc(100% - 32px))!important;
  max-width:980px!important;
  margin:0 auto 24px!important;
  padding:0 26px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(205,224,239,.24)!important;
  border-radius:18px!important;
  background:rgba(3,20,42,.46)!important;
  box-shadow:none!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  color:#f4f7fb!important;
}

body[data-page="result"] .result-section-v1{
  padding:24px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(205,224,239,.22)!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-page="result"] .result-section-v1:last-child{
  border-bottom:0!important;
}

body[data-page="result"] .result-section-v1 h3{
  margin:0 0 16px!important;
  padding:0!important;
  color:#f7f9fc!important;
  font-size:1.03rem!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}

body[data-page="result"] .result-kicker-v1{
  color:rgba(239,246,252,.72)!important;
  font-size:.78rem!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

body[data-page="result"] .result-total-value-v1{
  margin-top:8px!important;
  font-size:clamp(2.15rem,5vw,3.65rem)!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
  text-align:left!important;
}

body[data-page="result"] .result-total-text-v1{
  margin-top:12px!important;
  max-width:720px!important;
  font-size:1rem!important;
  line-height:1.45!important;
  color:#f4f7fb!important;
}

/* Aussagen: keine Karten – nur Einzug und Text */
body[data-page="result"] .result-statement-v1{
  display:grid!important;
  grid-template-columns:minmax(150px,210px) minmax(0,1fr)!important;
  gap:22px!important;
  padding:9px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body[data-page="result"] .result-statement-v1 strong{
  color:#eaf2f8!important;
  font-size:.87rem!important;
  line-height:1.4!important;
}

body[data-page="result"] .result-statement-v1 span{
  color:rgba(247,250,252,.92)!important;
  font-size:.9rem!important;
  line-height:1.45!important;
}

body[data-page="result"] .result-statement-total-v1{
  margin-top:4px!important;
  padding-top:13px!important;
  border-top:1px solid rgba(205,224,239,.14)!important;
}

/* Monatskosten: 4 Spalten nur durch Einzüge / Grid, ohne Vertikallinien */
body[data-page="result"] .result-cost-head-v1,
body[data-page="result"] .result-cost-row-v1{
  display:grid!important;
  grid-template-columns:minmax(190px,1.55fr) minmax(120px,1fr) minmax(120px,1fr) minmax(82px,.65fr)!important;
  gap:18px!important;
  align-items:center!important;
}

body[data-page="result"] .result-cost-head-v1{
  padding:0 0 10px!important;
  color:rgba(232,241,248,.76)!important;
  font-size:.72rem!important;
}

body[data-page="result"] .result-cost-head-v1 > div:not(:first-child){
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}

body[data-page="result"] .result-cost-head-v1 strong{
  font-size:.78rem!important;
  color:#eef4f8!important;
}

body[data-page="result"] .result-cost-head-v1 span{
  font-size:.67rem!important;
  color:rgba(232,241,248,.58)!important;
}

body[data-page="result"] .result-cost-row-v1{
  min-height:44px!important;
  padding:8px 0!important;
  border-top:1px solid rgba(205,224,239,.13)!important;
}

body[data-page="result"] .result-cost-label-v1{
  font-size:.86rem!important;
  color:#eef4f8!important;
  background:transparent!important;
  border:0!important;
}

body[data-page="result"] .result-cost-row-v1 .accounting-value{
  font-size:.9rem!important;
  text-align:right!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body[data-page="result"] .result-cost-sum-v1{
  margin-top:4px!important;
  padding-top:13px!important;
  border-top:1px solid rgba(205,224,239,.30)!important;
  font-weight:800!important;
}

body[data-page="result"] .result-note-v1{
  margin-top:10px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:rgba(232,241,248,.66)!important;
  font-size:.74rem!important;
}

/* Laufzeitkosten: 3 Spalten, ebenfalls nur horizontale Linien */
body[data-page="result"] .result-section-heading-v1{
  display:flex!important;
  justify-content:space-between!important;
  align-items:baseline!important;
  gap:18px!important;
  margin-bottom:10px!important;
}

body[data-page="result"] .result-section-heading-v1 h3{
  margin-bottom:0!important;
}

body[data-page="result"] .result-section-heading-v1 > span{
  color:rgba(232,241,248,.62)!important;
  font-size:.72rem!important;
  text-align:right!important;
}

body[data-page="result"] .result-lifetime-head-v1,
body[data-page="result"] .result-lifetime-row-v1,
body[data-page="result"] .result-lifetime-total-v1{
  display:grid!important;
  grid-template-columns:minmax(200px,1.6fr) minmax(120px,1fr) minmax(120px,1fr)!important;
  gap:18px!important;
  align-items:center!important;
}

body[data-page="result"] .result-lifetime-head-v1{
  padding:0 0 10px!important;
  color:rgba(232,241,248,.72)!important;
  font-size:.72rem!important;
}

body[data-page="result"] .result-lifetime-row-v1{
  min-height:42px!important;
  padding:7px 0!important;
  border-top:1px solid rgba(205,224,239,.13)!important;
  font-size:.86rem!important;
}

body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(n+2),
body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(n+2){
  text-align:right!important;
}

body[data-page="result"] .result-lifetime-total-v1{
  margin-top:4px!important;
  padding:13px 0 0!important;
  border-top:1px solid rgba(205,224,239,.30)!important;
  font-weight:800!important;
}

/* Alte Result-Cards aus früheren Versionen dürfen die neue Struktur nicht beeinflussen */
body[data-page="result"] .result-total-v782,
body[data-page="result"] .result-syllabus,
body[data-page="result"] .accounting-result,
body[data-page="result"] .result-detail-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Mobile: Inhalte werden lesbar untereinander geführt.
   Keine vertikalen Linien, Header-Zeile kompakt. */
@media(max-width:600px){
  body[data-page="result"] .result-master-v1{
    width:calc(100% - 20px)!important;
    padding:0 16px!important;
    border-radius:15px!important;
  }

  body[data-page="result"] .result-section-v1{
    padding:19px 0!important;
  }

  body[data-page="result"] .result-statement-v1{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:8px 0!important;
  }

  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(110px,1.25fr) repeat(3,minmax(0,.8fr))!important;
    gap:7px!important;
  }

  body[data-page="result"] .result-cost-head-v1{
    font-size:.62rem!important;
  }

  body[data-page="result"] .result-cost-head-v1 strong{
    font-size:.64rem!important;
  }

  body[data-page="result"] .result-cost-head-v1 span{
    display:none!important;
  }

  body[data-page="result"] .result-cost-label-v1{
    font-size:.72rem!important;
    line-height:1.25!important;
  }

  body[data-page="result"] .result-cost-row-v1 .accounting-value{
    font-size:.72rem!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(116px,1.25fr) repeat(2,minmax(0,.9fr))!important;
    gap:8px!important;
  }

  body[data-page="result"] .result-lifetime-row-v1{
    font-size:.73rem!important;
  }

  body[data-page="result"] .result-section-heading-v1{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:3px!important;
  }

  body[data-page="result"] .result-section-heading-v1 > span{
    text-align:left!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V2
   - Gesamtkosten ohne weiße/grüne Hinterlegung
   - sauberere Umbrüche in engen Breakpoints
   - Zahlenpositionierung bewusst NICHT verändert
   ========================================================= */

/* Gesamtkostenzeile vollständig in dieselbe ruhige Glassprache ziehen.
   Keine weiße/grüne Zusatzfläche, kein Pill-/Karten-Look. */
body[data-page="result"] .result-lifetime-total-v1,
body[data-page="result"] .result-lifetime-total-v1 > div,
body[data-page="result"] .result-lifetime-total-v1 .accounting-value{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}

body[data-page="result"] .result-lifetime-total-v1{
  border-top:1px solid rgba(205,224,239,.30)!important;
  color:#f4f7fb!important;
}

body[data-page="result"] .result-lifetime-total-v1 .accounting-ref,
body[data-page="result"] .result-lifetime-total-v1 .accounting-alt,
body[data-page="result"] .result-lifetime-total-v1 .accounting-diff{
  color:#f4f7fb!important;
}

/* Auch eventuelle ältere semantische Ergebnisfarben in der Gesamtkostenzeile neutralisieren. */
body[data-page="result"] .result-lifetime-total-v1 [class*="positive"],
body[data-page="result"] .result-lifetime-total-v1 [class*="negative"],
body[data-page="result"] .result-lifetime-total-v1 [class*="good"],
body[data-page="result"] .result-lifetime-total-v1 [class*="bad"]{
  background:transparent!important;
  color:#f4f7fb!important;
}

/* Tablet: etwas mehr Raum für Beschriftungen, damit Wörter nicht unsauber umbrechen. */
@media(min-width:601px) and (max-width:900px){
  body[data-page="result"] .result-master-v1{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  body[data-page="result"] .result-statement-v1{
    grid-template-columns:minmax(135px,180px) minmax(0,1fr)!important;
    gap:16px!important;
  }

  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(175px,1.45fr) minmax(110px,1fr) minmax(110px,1fr) minmax(74px,.58fr)!important;
    gap:12px!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(180px,1.5fr) minmax(105px,1fr) minmax(105px,1fr)!important;
    gap:12px!important;
  }

  body[data-page="result"] .result-cost-label-v1,
  body[data-page="result"] .result-lifetime-row-v1 > div:first-child,
  body[data-page="result"] .result-lifetime-total-v1 > div:first-child{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto!important;
  }
}

/* Mobile: kontrolliertere Zeilenhöhe und sinnvolle Umbrüche.
   Beschriftungen dürfen umbrechen, Werte bleiben kompakt. */
@media(max-width:600px){
  body[data-page="result"] .result-master-v1{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(116px,1.35fr) repeat(3,minmax(58px,.78fr))!important;
    gap:6px!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(122px,1.38fr) repeat(2,minmax(66px,.82fr))!important;
    gap:7px!important;
  }

  body[data-page="result"] .result-cost-label-v1,
  body[data-page="result"] .result-lifetime-row-v1 > div:first-child,
  body[data-page="result"] .result-lifetime-total-v1 > div:first-child{
    line-height:1.28!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:auto!important;
  }

  body[data-page="result"] .result-cost-row-v1 .accounting-value,
  body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(n+2),
  body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(n+2){
    white-space:nowrap!important;
  }

  body[data-page="result"] .result-cost-head-v1 > div,
  body[data-page="result"] .result-lifetime-head-v1 > div{
    line-height:1.15!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* Sehr schmale Geräte: Labels minimal kompakter, ohne Zahlen-Spalten neu auszurichten. */
@media(max-width:390px){
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(105px,1.28fr) repeat(3,minmax(52px,.74fr))!important;
    gap:5px!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(108px,1.30fr) repeat(2,minmax(60px,.78fr))!important;
    gap:6px!important;
  }

  body[data-page="result"] .result-cost-label-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    font-size:.69rem!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V3
   Responsive density + readable color logic + trend icons
   ========================================================= */

:root{
  --ef-blue:#69b9ff;
  --ef-blue-strong:#3ea7ff;
  --ef-green:#8bd63f;
  --ef-green-soft:#a8e466;
  --ef-red:#ff6464;
  --ef-text:#f5f8fb;
  --ef-muted:rgba(238,245,250,.72);
  --ef-line:rgba(204,224,240,.18);
}

/* Master block: denser on large screens, unchanged glass language */
body[data-page="result"] .result-master-v1{
  width:min(1180px,calc(100% - 28px))!important;
  max-width:1180px!important;
  padding:0 clamp(16px,2.2vw,30px)!important;
}

/* Overall result becomes two-column on larger viewports to use space better */
@media(min-width:760px){
  body[data-page="result"] .result-overall-v1{
    display:grid!important;
    grid-template-columns:minmax(210px,.75fr) minmax(320px,1.25fr)!important;
    column-gap:34px!important;
    align-items:center!important;
  }
  body[data-page="result"] .result-overall-v1 .result-kicker-v1{
    grid-column:1 / -1!important;
  }
  body[data-page="result"] .result-total-value-v1{
    margin-top:10px!important;
  }
  body[data-page="result"] .result-total-text-v1{
    margin-top:10px!important;
    max-width:560px!important;
  }
}

/* Einsatz purpose: two parallel readable statements on tablet/desktop */
@media(min-width:760px){
  body[data-page="result"] .result-section-v1:nth-of-type(2){
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:34px!important;
  }
  body[data-page="result"] .result-section-v1:nth-of-type(2) > h3{
    grid-column:1 / -1!important;
  }
  body[data-page="result"] .result-section-v1:nth-of-type(2) .result-statement-v1{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
}

/* Four verbalized conclusions: visual signal + responsive columns */
body[data-page="result"] .result-conclusions-v1{
  display:grid!important;
  grid-template-columns:1fr!important;
}
body[data-page="result"] .result-conclusions-v1 .result-statement-v1{
  grid-template-columns:1fr!important;
  gap:4px!important;
  padding:10px 0!important;
}
body[data-page="result"] .result-conclusions-v1 .result-statement-v1 strong{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
}
body[data-page="result"] .trend-icon-v3{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
}
body[data-page="result"] .result-statement-v1.trend-good-v3 .trend-icon-v3{
  color:var(--ef-green)!important;
}
body[data-page="result"] .result-statement-v1.trend-bad-v3 .trend-icon-v3{
  color:var(--ef-red)!important;
}
body[data-page="result"] .result-statement-v1.trend-neutral-v3 .trend-icon-v3{
  color:var(--ef-blue)!important;
}

@media(min-width:760px){
  body[data-page="result"] .result-conclusions-v1{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:0!important;
  }
  body[data-page="result"] .result-conclusions-v1 .result-statement-v1{
    padding:12px clamp(12px,1.5vw,22px)!important;
    min-width:0!important;
  }
  body[data-page="result"] .result-conclusions-v1 .result-statement-v1:first-child{
    padding-left:0!important;
  }
  body[data-page="result"] .result-conclusions-v1 .result-statement-v1:last-child{
    padding-right:0!important;
  }
}

/* Monthly cost columns: readable, centered values, calm colors */
body[data-page="result"] .result-cost-head-v1,
body[data-page="result"] .result-cost-row-v1{
  grid-template-columns:minmax(185px,1.45fr) minmax(115px,1fr) minmax(115px,1fr) minmax(84px,.7fr)!important;
  gap:clamp(8px,1.7vw,22px)!important;
}
body[data-page="result"] .result-cost-head-v1 > div:not(:first-child),
body[data-page="result"] .result-cost-row-v1 > div:not(:first-child){
  text-align:center!important;
  justify-content:center!important;
}
body[data-page="result"] .result-cost-row-v1 .accounting-value{
  text-align:center!important;
  color:var(--ef-text)!important;
  font-weight:700!important;
}
body[data-page="result"] .result-cost-row-v1 .accounting-alt{
  color:var(--ef-green-soft)!important;
}
body[data-page="result"] .result-cost-row-v1 .accounting-diff.diff-negative{
  color:var(--ef-green)!important;
}
body[data-page="result"] .result-cost-row-v1 .accounting-diff.diff-positive{
  color:var(--ef-red)!important;
}

/* Lifetime costs: 4 columns, including difference */
body[data-page="result"] .result-lifetime-head-v1,
body[data-page="result"] .result-lifetime-row-v1,
body[data-page="result"] .result-lifetime-total-v1{
  grid-template-columns:minmax(190px,1.5fr) minmax(115px,1fr) minmax(115px,1fr) minmax(84px,.7fr)!important;
  gap:clamp(8px,1.7vw,22px)!important;
}
body[data-page="result"] .result-lifetime-head-v1 > div:not(:first-child),
body[data-page="result"] .result-lifetime-row-v1 > div:not(:first-child),
body[data-page="result"] .result-lifetime-total-v1 > div:not(:first-child){
  text-align:center!important;
}
body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(3),
body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(3){
  color:var(--ef-green-soft)!important;
}
body[data-page="result"] .life-diff-v3,
body[data-page="result"] .result-lifetime-total-v1 .accounting-diff{
  font-weight:800!important;
}
body[data-page="result"] .life-diff-v3.diff-good-v3,
body[data-page="result"] .result-lifetime-total-v1 .accounting-diff.diff-negative{
  color:var(--ef-green)!important;
}
body[data-page="result"] .life-diff-v3.diff-bad-v3,
body[data-page="result"] .result-lifetime-total-v1 .accounting-diff.diff-positive{
  color:var(--ef-red)!important;
}
body[data-page="result"] .life-diff-v3.diff-neutral-v3{
  color:var(--ef-blue)!important;
}

/* Desktop density: less empty space, more information per viewport */
@media(min-width:1100px){
  body[data-page="result"] .result-section-v1{
    padding:18px 0!important;
  }
  body[data-page="result"] .result-cost-row-v1,
  body[data-page="result"] .result-lifetime-row-v1{
    min-height:38px!important;
    padding:6px 0!important;
  }
  body[data-page="result"] .result-cost-label-v1,
  body[data-page="result"] .result-lifetime-row-v1{
    font-size:.82rem!important;
  }
}

/* Tablet density */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] .result-master-v1{
    width:calc(100% - 22px)!important;
    padding:0 18px!important;
  }
  body[data-page="result"] .result-section-v1{
    padding:17px 0!important;
  }
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1,
  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    gap:10px!important;
  }
}

/* Mobile: readable breakpoints, no header collisions */
@media(max-width:600px){
  body[data-page="result"] .result-master-v1{
    width:calc(100% - 16px)!important;
    padding:0 12px!important;
  }

  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(118px,1.35fr) minmax(54px,.72fr) minmax(54px,.72fr) minmax(58px,.76fr)!important;
    gap:5px!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(118px,1.35fr) minmax(64px,.8fr) minmax(64px,.8fr) minmax(58px,.76fr)!important;
    gap:5px!important;
  }

  body[data-page="result"] .result-cost-head-v1 strong,
  body[data-page="result"] .result-lifetime-head-v1{
    font-size:.60rem!important;
    line-height:1.08!important;
  }

  body[data-page="result"] .result-cost-head-v1 > div,
  body[data-page="result"] .result-lifetime-head-v1 > div{
    min-width:0!important;
    overflow-wrap:anywhere!important;
    hyphens:auto!important;
  }

  body[data-page="result"] .result-cost-label-v1,
  body[data-page="result"] .result-lifetime-row-v1 > div:first-child,
  body[data-page="result"] .result-lifetime-total-v1 > div:first-child{
    font-size:.70rem!important;
    line-height:1.22!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto!important;
  }

  body[data-page="result"] .result-cost-row-v1 .accounting-value,
  body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(n+2),
  body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(n+2){
    font-size:.69rem!important;
    white-space:nowrap!important;
  }

  body[data-page="result"] .result-conclusions-v1 .result-statement-v1{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

/* very narrow mobile */
@media(max-width:390px){
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1,
  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    gap:4px!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V4
   Mini-Fix: "Gesamt" in der 4er-Verbalisierungszeile
   exakt auf dieselbe Höhe wie die anderen drei Spalten.
   ========================================================= */

/* V1 hatte der letzten Statement-Zeile eine eigene Summen-Trennlinie
   und zusätzlichen oberen Abstand gegeben. Im 4-Spalten-Layout ist
   das falsch: Gesamt ist eine gleichwertige vierte Spalte. */
body[data-page="result"] .result-conclusions-v1 .result-statement-total-v1{
  margin-top:0!important;
  padding-top:12px!important;
  border-top:0!important;
}

/* Auf Desktop/Tablet exakt dieselben Innenabstände wie alle Geschwister. */
@media(min-width:760px){
  body[data-page="result"] .result-conclusions-v1 .result-statement-total-v1{
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
}

/* Mobile ebenfalls keine zusätzliche Summenlinie/Vertikalverschiebung. */
@media(max-width:759px){
  body[data-page="result"] .result-conclusions-v1 .result-statement-total-v1{
    margin-top:0!important;
    padding-top:10px!important;
    border-top:0!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V5
   1) Gesamtdifferenz in E-Fleet Farblogik
   2) Gesamtkosten mit Differenzsumme
   3) Mobile Info-Popup direkt beim Info-Button
   ========================================================= */

/* Gesamtdifferenz: Größe bleibt, Farbe folgt derselben Semantik wie Differenzwerte. */
body[data-page="result"] .result-total-value-v1{
  color:var(--ef-blue)!important;
  text-shadow:none!important;
}
body[data-page="result"] .result-total-value-v1.total-good-v5{
  color:var(--ef-green)!important;
}
body[data-page="result"] .result-total-value-v1.total-bad-v5{
  color:var(--ef-red)!important;
}
body[data-page="result"] .result-total-value-v1.total-neutral-v5{
  color:var(--ef-blue)!important;
}

/* Gesamtkosten: vierte Spalte ist die Summe/Differenz der Gesamtkosten. */
body[data-page="result"] .result-lifetime-total-v1 .lifetime-total-diff-v5{
  font-weight:850!important;
  text-align:center!important;
}
body[data-page="result"] .result-lifetime-total-v1 .lifetime-total-diff-v5.diff-negative{
  color:var(--ef-green)!important;
}
body[data-page="result"] .result-lifetime-total-v1 .lifetime-total-diff-v5.diff-positive{
  color:var(--ef-red)!important;
}

/* Der alte globale Mobile-Fix schob wd-info-Popups an den Viewport-Boden.
   Für den Ergebnis-Info-Button wird das bewusst aufgehoben. */
body[data-page="result"] .accounting-title-with-info{
  position:relative!important;
  overflow:visible!important;
}
body[data-page="result"] .accounting-info{
  position:relative!important;
}
body[data-page="result"] .accounting-info::after{
  z-index:10000!important;
}

@media(max-width:600px){
  body[data-page="result"] .accounting-info::after{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    transform:translateX(-42%)!important;
    width:min(280px,calc(100vw - 34px))!important;
    max-width:calc(100vw - 34px)!important;
    padding:11px 12px!important;
    border-radius:10px!important;
    background:rgba(3,20,42,.97)!important;
    color:#f4f7fb!important;
    border:1px solid rgba(205,224,239,.34)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
    font-size:12px!important;
    line-height:1.4!important;
    text-align:left!important;
    white-space:normal!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V6
   Farbsemantik:
   Referenzfahrzeug = Blau
   E-Vergleichsfahrzeug = Weiß
   Differenz günstiger = Grün
   Differenz teurer = Rot
   ========================================================= */

/* Gesamtdifferenz: gleiche Größe, aber deutlich schlanker und typografisch
   näher an der restlichen Ergebnisseite. */
body[data-page="result"] .result-total-value-v1{
  font-family:inherit!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
}

/* Referenzfahrzeug konsequent Blau. */
body[data-page="result"] .result-cost-row-v1 .accounting-ref,
body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(2),
body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(2){
  color:var(--ef-blue)!important;
}

/* E-Vergleichsfahrzeug neutral Weiß.
   Grün wird ausschließlich für eine günstige Differenz verwendet. */
body[data-page="result"] .result-cost-row-v1 .accounting-alt,
body[data-page="result"] .result-lifetime-row-v1 > div:nth-child(3),
body[data-page="result"] .result-lifetime-total-v1 > div:nth-child(3){
  color:var(--ef-text)!important;
}

/* Spaltenköpfe spiegeln dieselbe Logik wider. */
body[data-page="result"] .result-cost-head-v1 > div:nth-child(2) strong,
body[data-page="result"] .result-lifetime-head-v1 > div:nth-child(2){
  color:var(--ef-blue)!important;
}
body[data-page="result"] .result-cost-head-v1 > div:nth-child(3) strong,
body[data-page="result"] .result-lifetime-head-v1 > div:nth-child(3){
  color:var(--ef-text)!important;
}

/* Differenzspalte bleibt semantisch reserviert:
   Grün = E günstiger, Rot = E teurer, Blau = neutral. */
body[data-page="result"] .accounting-diff.diff-negative,
body[data-page="result"] .life-diff-v3.diff-good-v3{
  color:var(--ef-green)!important;
}
body[data-page="result"] .accounting-diff.diff-positive,
body[data-page="result"] .life-diff-v3.diff-bad-v3{
  color:var(--ef-red)!important;
}
body[data-page="result"] .life-diff-v3.diff-neutral-v3{
  color:var(--ef-blue)!important;
}

/* =========================================================
   RESULT REDESIGN TEST V7
   - Monatskosten kompakter
   - stärkere visuelle Trennung zwischen Ergebnisbereichen
   ========================================================= */

/* Monatliche Kosten etwas dichter setzen:
   weniger vertikale Höhe pro Zeile, engere Headline/Tabellenabstände. */
body[data-page="result"] #accountingResult{
  padding-bottom:20px!important;
}

body[data-page="result"] #accountingResult .result-section-heading-v1{
  margin-bottom:6px!important;
}

body[data-page="result"] #accountingResult .result-cost-head-v1{
  padding-bottom:6px!important;
}

body[data-page="result"] #accountingResult .result-cost-row-v1{
  min-height:34px!important;
  padding:4px 0!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1{
  margin-top:2px!important;
  padding-top:9px!important;
}

body[data-page="result"] #accountingResult .result-note-v1{
  margin-top:6px!important;
}

/* Die großen Bereiche klarer voneinander absetzen.
   Nur horizontale Linie + Luft, keine zusätzliche Box. */
body[data-page="result"] #costOverviewCard{
  margin-top:16px!important;
  padding-top:26px!important;
  border-top:1px solid rgba(205,224,239,.34)!important;
}

/* Damit nicht zusätzlich die alte Abschnittslinie doppelt wirkt. */
body[data-page="result"] #accountingResult{
  border-bottom:0!important;
}

/* Desktop darf noch kompakter sein, damit die Information dichter wirkt. */
@media(min-width:1100px){
  body[data-page="result"] #accountingResult .result-cost-row-v1{
    min-height:31px!important;
    padding:3px 0!important;
  }

  body[data-page="result"] #costOverviewCard{
    margin-top:18px!important;
    padding-top:28px!important;
  }
}

/* Tablet: kompakt, aber nicht gequetscht. */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-row-v1{
    min-height:34px!important;
    padding:4px 0!important;
  }

  body[data-page="result"] #costOverviewCard{
    margin-top:16px!important;
    padding-top:24px!important;
  }
}

/* Mobile: weniger Leerraum in den Monatskosten,
   dafür klarer Abstand vor den Laufzeitkosten. */
@media(max-width:600px){
  body[data-page="result"] #accountingResult{
    padding-bottom:16px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1{
    min-height:32px!important;
    padding:4px 0!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1{
    padding-top:8px!important;
  }

  body[data-page="result"] #costOverviewCard{
    margin-top:14px!important;
    padding-top:22px!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V8
   1) Monats- und Laufzeitkosten typografisch identisch
   2) Abschnittsüberschriften exakt auf gleicher Grundlinie
   3) Monatliche Gesamtbelastung gleich prominent wie Gesamtkosten
   ========================================================= */

/* Gemeinsame Typografie für BEIDE Kostenbereiche. */
body[data-page="result"] #accountingResult,
body[data-page="result"] #costOverviewCard{
  font-family:inherit!important;
  font-weight:400!important;
}

body[data-page="result"] #accountingResult .result-cost-label-v1,
body[data-page="result"] #accountingResult .accounting-value,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
  font-family:inherit!important;
  font-size:.82rem!important;
  line-height:1.28!important;
}

/* Beide Bereichstitel exakt gleich definieren.
   Keine unterschiedlichen line-height/margin-Berechnungen mehr. */
body[data-page="result"] #accountingResult .result-section-heading-v1,
body[data-page="result"] #costOverviewCard .result-section-heading-v1{
  min-height:28px!important;
  margin:0 0 8px!important;
  padding:0!important;
  display:flex!important;
  align-items:baseline!important;
}

body[data-page="result"] #accountingResult .result-section-heading-v1 h3,
body[data-page="result"] #costOverviewCard .result-section-heading-v1 h3{
  margin:0!important;
  padding:0!important;
  font-family:inherit!important;
  font-size:1.03rem!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}

/* Der Zusatz "Gesamtkosten über ..." bleibt sekundär und darf die
   vertikale Position der Überschrift nicht verändern. */
body[data-page="result"] #costOverviewCard .result-section-heading-v1{
  justify-content:space-between!important;
  gap:16px!important;
}
body[data-page="result"] #costOverviewCard .result-section-heading-v1 > span{
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
}

/* Monatliche Gesamtbelastung = gleiche visuelle Gewichtung wie Gesamtkosten. */
body[data-page="result"] #accountingResult .result-cost-sum-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
  font-family:inherit!important;
  font-weight:800!important;
  font-size:.92rem!important;
  line-height:1.25!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
  font-family:inherit!important;
  font-weight:800!important;
  font-size:.92rem!important;
  line-height:1.25!important;
}

/* Tablet */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.78rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.88rem!important;
  }
}

/* Mobile: gleiche Relation beibehalten, ohne Umbruchfixes aus V7 anzutasten. */
@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-section-heading-v1,
  body[data-page="result"] #costOverviewCard .result-section-heading-v1{
    min-height:24px!important;
    margin-bottom:7px!important;
  }

  body[data-page="result"] #accountingResult .result-section-heading-v1 h3,
  body[data-page="result"] #costOverviewCard .result-section-heading-v1 h3{
    font-size:1rem!important;
    line-height:1.2!important;
  }

  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.70rem!important;
    line-height:1.22!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.78rem!important;
    line-height:1.22!important;
  }

  /* Auf Mobile steht der Untertitel weiterhin unter der Überschrift,
     ohne deren Grundlinie zu verschieben. */
  body[data-page="result"] #costOverviewCard .result-section-heading-v1{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
    align-items:start!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V9
   - Gesamtdifferenz ca. 2/3 der bisherigen Größe
   - neutrale Differenz = Weiß
   - Abschnittsüberschriften strukturell auf gleiche Geometrie gebracht
   ========================================================= */

/* 1) Gesamtdifferenz: weiterhin prominent, aber deutlich ruhiger. */
body[data-page="result"] .result-total-value-v1{
  font-size:clamp(1.45rem,3.35vw,2.45rem)!important;
  line-height:1.02!important;
  font-weight:600!important;
}

/* 2) Neutrale Differenz ist nicht Blau, sondern Weiß.
   Blau bleibt exklusiv beim Referenzfahrzeug. */
body[data-page="result"] .result-total-value-v1.total-neutral-v5,
body[data-page="result"] .life-diff-v3.diff-neutral-v3,
body[data-page="result"] .accounting-diff:not(.diff-negative):not(.diff-positive){
  color:var(--ef-text)!important;
}

/* 3) Beide Kostenüberschriften bekommen exakt dieselbe Box-Geometrie.
   Keine Baseline-/Flex-Abhängigkeit mehr. */
body[data-page="result"] #accountingResult .result-section-heading-v1,
body[data-page="result"] #costOverviewCard .result-section-heading-v1{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  min-height:0!important;
  margin:0 0 10px!important;
  padding:0!important;
  line-height:1!important;
}

/* Überschrift selbst immer exakt gleich hoch und auf identischem Startpunkt. */
body[data-page="result"] #accountingResult .result-section-heading-v1 h3,
body[data-page="result"] #costOverviewCard .result-section-heading-v1 h3{
  display:block!important;
  margin:0!important;
  padding:0!important;
  height:auto!important;
  min-height:0!important;
  font-family:inherit!important;
  font-size:1.03rem!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  transform:none!important;
  vertical-align:baseline!important;
}

/* Sekundärtext der Laufzeitkosten darf die Position der H3 nicht mehr beeinflussen. */
body[data-page="result"] #costOverviewCard .result-section-heading-v1 > span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  align-self:start!important;
  line-height:1.15!important;
  transform:none!important;
}

/* Mobile: gleiche Logik, Sekundärtext bewusst darunter, Heading bleibt aber identisch. */
@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-section-heading-v1,
  body[data-page="result"] #costOverviewCard .result-section-heading-v1{
    grid-template-columns:1fr!important;
    row-gap:4px!important;
    margin-bottom:8px!important;
  }

  body[data-page="result"] #accountingResult .result-section-heading-v1 h3,
  body[data-page="result"] #costOverviewCard .result-section-heading-v1 h3{
    font-size:1rem!important;
    line-height:1!important;
  }

  body[data-page="result"] #costOverviewCard .result-section-heading-v1 > span{
    line-height:1.15!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V10
   Responsive readability pass:
   - Desktop/Tablet Kosten auf Einsatzzweck-Lesbarkeit anheben
   - Mobile breiter nutzen, dichter setzen, aber Schrift vergrößern
   ========================================================= */

/* ---------- Desktop + Tablet ---------- */
@media(min-width:601px){

  /* Kostenzeilen auf ungefähr dieselbe Lesestufe wie Einsatzzweck. */
  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.90rem!important;
    line-height:1.38!important;
  }

  /* Summen etwas stärker, aber nicht überdimensioniert. */
  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.98rem!important;
    line-height:1.32!important;
  }

  /* Spaltenköpfe lesbarer. */
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-lifetime-head-v1{
    font-size:.78rem!important;
    line-height:1.18!important;
  }

  body[data-page="result"] .result-cost-head-v1 strong{
    font-size:.82rem!important;
    line-height:1.18!important;
  }

  /* Etwas mehr Raum für Kostenart, trotzdem große Zahlenfelder. */
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1,
  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(215px,1.5fr) minmax(125px,1fr) minmax(125px,1fr) minmax(90px,.7fr)!important;
    gap:clamp(10px,1.5vw,20px)!important;
  }
}

/* Desktop: etwas großzügiger, weil die Breite vorhanden ist. */
@media(min-width:1100px){
  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.94rem!important;
  }

  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-lifetime-head-v1{
    font-size:.82rem!important;
  }

  body[data-page="result"] .result-cost-head-v1 strong{
    font-size:.86rem!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:600px){

  /* Master fast über die gesamte Breite nutzen. */
  body[data-page="result"] .result-master-v1{
    width:calc(100% - 8px)!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  /* Weniger verschenkter horizontaler Raum. */
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1{
    grid-template-columns:minmax(108px,1.28fr) minmax(60px,.78fr) minmax(60px,.78fr) minmax(60px,.78fr)!important;
    gap:3px!important;
  }

  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    grid-template-columns:minmax(108px,1.28fr) minmax(64px,.82fr) minmax(64px,.82fr) minmax(60px,.78fr)!important;
    gap:3px!important;
  }

  /* Labels und Werte bewusst größer als V9. */
  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.76rem!important;
    line-height:1.26!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.82rem!important;
    line-height:1.24!important;
  }

  /* Tabellenköpfe ebenfalls leicht größer, mit kontrolliertem Umbruch. */
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-lifetime-head-v1{
    font-size:.66rem!important;
    line-height:1.08!important;
  }

  body[data-page="result"] .result-cost-head-v1 strong{
    font-size:.68rem!important;
    line-height:1.08!important;
  }

  body[data-page="result"] .result-cost-head-v1 > div,
  body[data-page="result"] .result-lifetime-head-v1 > div{
    min-width:0!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:auto!important;
  }

  /* Mehr Länge statt kleiner Schrift: Zeilen dürfen wachsen. */
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1{
    min-height:0!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
}

/* Sehr schmale Geräte: Schrift nicht wieder drastisch verkleinern;
   stattdessen noch engeres Grid. */
@media(max-width:390px){
  body[data-page="result"] .result-cost-head-v1,
  body[data-page="result"] .result-cost-row-v1,
  body[data-page="result"] .result-lifetime-head-v1,
  body[data-page="result"] .result-lifetime-row-v1,
  body[data-page="result"] .result-lifetime-total-v1{
    gap:2px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-label-v1,
  body[data-page="result"] #accountingResult .accounting-value,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.73rem!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V11 – Heading Alignment Hard Fix
   ========================================================= */
body[data-page="result"] .result-section-heading-v11{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 9px!important;
  padding:0!important;
  border:0!important;
  line-height:1!important;
  transform:none!important;
}
body[data-page="result"] .result-section-heading-v11 h3{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  position:static!important;
  transform:none!important;
  font-family:inherit!important;
  font-size:1.03rem!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
}
body[data-page="result"] .result-section-subtitle-v11{
  display:block!important;
  margin:-3px 0 9px!important;
  padding:0!important;
  color:rgba(232,241,248,.62)!important;
  font-family:inherit!important;
  font-size:.76rem!important;
  font-weight:400!important;
  line-height:1.2!important;
}
@media(max-width:600px){
  body[data-page="result"] .result-section-heading-v11{
    margin-bottom:8px!important;
  }
  body[data-page="result"] .result-section-heading-v11 h3{
    font-size:1rem!important;
    line-height:1.15!important;
  }
  body[data-page="result"] .result-section-subtitle-v11{
    margin:-2px 0 8px!important;
    font-size:.72rem!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V12
   Monatskosten und Laufzeitkosten: exakt dieselbe Tabellenlogik
   Typografie, Gewicht, Zeilenhöhe und vertikale Abstände.
   ========================================================= */

/* Gemeinsame Basis für ALLE normalen Kostenzeilen. */
body[data-page="result"] #accountingResult .result-cost-row-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1{
  min-height:0!important;
  padding:6px 0!important;
  margin:0!important;
  align-items:center!important;
  border-top:1px solid var(--ef-line)!important;
  font-family:inherit!important;
  font-size:.90rem!important;
  font-weight:400!important;
  line-height:1.30!important;
}

/* Jede Zelle folgt exakt derselben Schriftlogik. */
body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
  margin:0!important;
  padding:0!important;
  font-family:inherit!important;
  font-size:.90rem!important;
  font-weight:400!important;
  line-height:1.30!important;
}

/* Werte dürfen stärker sein – aber in BEIDEN Bereichen identisch. */
body[data-page="result"] #accountingResult .result-cost-row-v1 .accounting-value,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div:nth-child(n+2){
  font-weight:600!important;
}

/* Kostenart links ebenfalls identisch, keine dünnere Laufzeit-Schrift mehr. */
body[data-page="result"] #accountingResult .result-cost-label-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div:first-child{
  font-weight:400!important;
}

/* Tabellenköpfe beider Bereiche ebenfalls exakt angleichen. */
body[data-page="result"] #accountingResult .result-cost-head-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-head-v1{
  padding:0 0 7px!important;
  margin:0!important;
  font-family:inherit!important;
  font-size:.78rem!important;
  font-weight:400!important;
  line-height:1.15!important;
}

body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
  font-family:inherit!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.15!important;
}

/* Summenzeilen bleiben in beiden Bereichen gleich prominent. */
body[data-page="result"] #accountingResult .result-cost-sum-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
  min-height:0!important;
  margin:2px 0 0!important;
  padding:9px 0 0!important;
  font-family:inherit!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
  font-family:inherit!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

/* Desktop */
@media(min-width:1100px){
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.94rem!important;
    line-height:1.30!important;
  }
}

/* Tablet */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:.90rem!important;
    line-height:1.30!important;
  }
}

/* Mobile: gleiche Relation, kompaktere Abstände, keine Mini-Schrift. */
@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1{
    padding:6px 0!important;
    font-size:.76rem!important;
    line-height:1.24!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:.76rem!important;
    line-height:1.24!important;
  }

  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
  body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
    font-size:.66rem!important;
    line-height:1.10!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.82rem!important;
    line-height:1.22!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V13
   ========================================================= */

/* Optional lifetime rows truly disappear when JS marks them hidden.
   This fixes display:grid overrides that can defeat the hidden attribute. */
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1[hidden],
body[data-page="result"] #costOverviewCard [hidden]{
  display:none!important;
}

/* Monthly table: one authoritative row geometry */
body[data-page="result"] #accountingResult .result-cost-head-v1,
body[data-page="result"] #accountingResult .result-cost-row-v1{
  display:grid!important;
  grid-template-columns:minmax(215px,1.5fr) minmax(125px,1fr) minmax(125px,1fr) minmax(90px,.7fr)!important;
  column-gap:clamp(10px,1.5vw,20px)!important;
  row-gap:0!important;
  align-items:stretch!important;
}

body[data-page="result"] #accountingResult .result-cost-row-v1{
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border-top:1px solid var(--ef-line)!important;
}

body[data-page="result"] #accountingResult .result-cost-row-v1 > div{
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  margin:0!important;
  padding:6px 0!important;
  box-sizing:border-box!important;
  line-height:1.28!important;
}

body[data-page="result"] #accountingResult .result-cost-row-v1 > div:nth-child(n+2){
  justify-content:center!important;
  text-align:center!important;
}

body[data-page="result"] #accountingResult .result-cost-label-v1{
  justify-content:flex-start!important;
  text-align:left!important;
}

body[data-page="result"] #accountingResult .accounting-title-with-info{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
}

/* Sum row follows same geometry */
body[data-page="result"] #accountingResult .result-cost-sum-v1{
  min-height:46px!important;
  margin:2px 0 0!important;
  padding:0!important;
  border-top:1px solid rgba(205,224,239,.30)!important;
}
body[data-page="result"] #accountingResult .result-cost-sum-v1 > div{
  min-height:46px!important;
  padding:8px 0!important;
}

/* Keep blank header cell only for alignment */
body[data-page="result"] #accountingResult .result-cost-diff-head-v13{
  min-height:1px!important;
}

@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1{
    grid-template-columns:minmax(190px,1.45fr) minmax(115px,1fr) minmax(115px,1fr) minmax(82px,.68fr)!important;
    column-gap:10px!important;
  }
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div{
    min-height:40px!important;
  }
}

@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1{
    grid-template-columns:minmax(108px,1.28fr) minmax(60px,.78fr) minmax(60px,.78fr) minmax(60px,.78fr)!important;
    column-gap:3px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div{
    min-height:38px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1{
    min-height:42px!important;
  }
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div{
    min-height:42px!important;
    padding:7px 0!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V14
   Tablet spacing restored + monthly total visually matched
   to lifetime Gesamtkosten.
   Desktop V13 geometry intentionally left untouched.
   ========================================================= */

/* ---------- Tablet only: restore breathing room ---------- */
@media(min-width:601px) and (max-width:1099px){

  /* Sections get clear rhythm again instead of one dense block. */
  body[data-page="result"] .result-section-v1{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  body[data-page="result"] #accountingResult{
    padding-top:20px!important;
    padding-bottom:22px!important;
  }

  body[data-page="result"] #costOverviewCard{
    margin-top:18px!important;
    padding-top:26px!important;
    padding-bottom:22px!important;
  }

  /* Monthly rows: enough height for readability, but still compact. */
  body[data-page="result"] #accountingResult .result-cost-row-v1{
    min-height:48px!important;
  }
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div{
    min-height:48px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  /* Lifetime rows use the same visual rhythm. */
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1{
    min-height:48px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    min-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* More air between table header and first value row. */
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1{
    padding-bottom:10px!important;
  }
}

/* ---------- Both totals: one identical visual language ---------- */

/* Monthly running burden is no longer just another row.
   It follows the same spacing, line and typography as Gesamtkosten. */
body[data-page="result"] #accountingResult .result-cost-sum-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
  margin-top:12px!important;
  padding-top:14px!important;
  padding-bottom:4px!important;
  min-height:54px!important;
  border-top:1px solid rgba(205,224,239,.38)!important;
  background:transparent!important;
  font-family:inherit!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  font-family:inherit!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

/* Tablet totals slightly more prominent, identically. */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
    margin-top:14px!important;
    padding-top:16px!important;
    min-height:58px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:1rem!important;
  }
}

/* Mobile retains compact layout, but both totals still match each other. */
@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
    margin-top:9px!important;
    padding-top:11px!important;
    min-height:48px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:.82rem!important;
  }
}

/* =========================================================
   RESULT REDESIGN TEST V15
   ONE COST TABLE SYSTEM
   "Kosten monatlich" + "Kosten über die Laufzeit"
   use the exact same typography, row height, spacing,
   headers, separators and total-row treatment.
   ========================================================= */

/* ---------- Shared section rhythm ---------- */
body[data-page="result"] #accountingResult,
body[data-page="result"] #costOverviewCard{
  padding-top:22px!important;
  padding-bottom:22px!important;
}

body[data-page="result"] #accountingResult .result-section-heading-v11,
body[data-page="result"] #costOverviewCard .result-section-heading-v11{
  margin:0 0 10px!important;
}

/* ---------- Shared table headers ---------- */
body[data-page="result"] #accountingResult .result-cost-head-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-head-v1{
  display:grid!important;
  grid-template-columns:minmax(230px,1.5fr) minmax(135px,1fr) minmax(135px,1fr) minmax(95px,.72fr)!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:end!important;
  margin:0!important;
  padding:0 0 10px!important;
  font-family:inherit!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1.15!important;
}

body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
  margin:0!important;
  padding:0!important;
  font-family:inherit!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1.15!important;
}

body[data-page="result"] #accountingResult .result-cost-head-v1 > div:not(:first-child),
body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div:not(:first-child){
  text-align:center!important;
}

/* ---------- Shared normal rows ---------- */
body[data-page="result"] #accountingResult .result-cost-row-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1{
  display:grid!important;
  grid-template-columns:minmax(230px,1.5fr) minmax(135px,1fr) minmax(135px,1fr) minmax(95px,.72fr)!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:stretch!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  border-top:1px solid var(--ef-line)!important;
  font-family:inherit!important;
  font-size:.96rem!important;
  font-weight:400!important;
  line-height:1.28!important;
}

body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  margin:0!important;
  padding:8px 0!important;
  box-sizing:border-box!important;
  font-family:inherit!important;
  font-size:.96rem!important;
  font-weight:400!important;
  line-height:1.28!important;
}

/* Left labels identical */
body[data-page="result"] #accountingResult .result-cost-label-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div:first-child{
  justify-content:flex-start!important;
  text-align:left!important;
  font-weight:400!important;
}

/* All numeric columns identical */
body[data-page="result"] #accountingResult .result-cost-row-v1 > div:nth-child(n+2),
body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div:nth-child(n+2){
  justify-content:center!important;
  text-align:center!important;
  font-weight:600!important;
}

/* ---------- Shared total rows ---------- */
body[data-page="result"] #accountingResult .result-cost-sum-v1,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
  display:grid!important;
  grid-template-columns:minmax(230px,1.5fr) minmax(135px,1fr) minmax(135px,1fr) minmax(95px,.72fr)!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:stretch!important;
  min-height:58px!important;
  margin:14px 0 0!important;
  padding:0!important;
  border-top:1px solid rgba(205,224,239,.38)!important;
  background:transparent!important;
  font-family:inherit!important;
  font-size:1.04rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
  display:flex!important;
  align-items:center!important;
  min-height:58px!important;
  margin:0!important;
  padding:12px 0 4px!important;
  box-sizing:border-box!important;
  font-family:inherit!important;
  font-size:1.04rem!important;
  font-weight:800!important;
  line-height:1.25!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div:first-child,
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div:first-child{
  justify-content:flex-start!important;
  text-align:left!important;
}

body[data-page="result"] #accountingResult .result-cost-sum-v1 > div:nth-child(n+2),
body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div:nth-child(n+2){
  justify-content:center!important;
  text-align:center!important;
}

/* ---------- Desktop: intentionally larger ---------- */
@media(min-width:1100px){
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
  body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
    font-size:.90rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    font-size:1rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    font-size:1.10rem!important;
  }
}

/* ---------- Tablet: exact same rules, only scaled to viewport ---------- */
@media(min-width:601px) and (max-width:1099px){
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
    grid-template-columns:minmax(185px,1.42fr) minmax(108px,1fr) minmax(108px,1fr) minmax(80px,.7fr)!important;
    column-gap:10px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
  body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
    font-size:.82rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    min-height:48px!important;
    font-size:.92rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    min-height:58px!important;
    font-size:1rem!important;
  }
}

/* ---------- Mobile: same system, compact scale ---------- */
@media(max-width:600px){
  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1{
    grid-template-columns:minmax(106px,1.25fr) minmax(58px,.78fr) minmax(58px,.78fr) minmax(58px,.78fr)!important;
    column-gap:3px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-head-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1,
  body[data-page="result"] #accountingResult .result-cost-head-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-head-v1 > div,
  body[data-page="result"] #accountingResult .result-cost-head-v1 strong{
    font-size:.66rem!important;
  }

  body[data-page="result"] #accountingResult .result-cost-row-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1,
  body[data-page="result"] #accountingResult .result-cost-row-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-row-v1 > div{
    min-height:40px!important;
    font-size:.76rem!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  body[data-page="result"] #accountingResult .result-cost-sum-v1,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1,
  body[data-page="result"] #accountingResult .result-cost-sum-v1 > div,
  body[data-page="result"] #costOverviewCard .result-lifetime-total-v1 > div{
    min-height:48px!important;
    font-size:.82rem!important;
  }
}


/* =========================================================
   FUNCTION FIX V17 – Operating Leasing UI
   ========================================================= */
body[data-page="current"] .operating-simple-v17,
body[data-page="vergleich"] .operating-simple-v17{
  grid-template-columns:minmax(0,1fr)!important;
}
body[data-page="current"] .operating-rate-v17,
body[data-page="vergleich"] .operating-rate-v17{
  max-width:420px!important;
}
body[data-page="current"] .operating-note-v17,
body[data-page="vergleich"] .operating-note-v17{
  grid-column:1/-1!important;
  color:rgba(238,245,250,.72)!important;
  font-size:.78rem!important;
  line-height:1.4!important;
  margin-top:2px!important;
}
body[data-page="current"] .operating-included-v17,
body[data-page="vergleich"] .operating-included-v17{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:14px!important;
}
body[data-page="current"] .operating-included-v17 label,
body[data-page="vergleich"] .operating-included-v17 label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 10px!important;
  border:1px solid rgba(205,224,239,.18)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  color:#f2f6fa!important;
  font-size:.78rem!important;
  line-height:1.25!important;
}
@media(max-width:700px){
  body[data-page="current"] .operating-included-v17,
  body[data-page="vergleich"] .operating-included-v17{
    grid-template-columns:1fr!important;
  }
}