@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');
:root{color-scheme:dark light;--font-body:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;--font-head:'Bebas Neue','Arial Narrow',Impact,sans-serif;--bg:#060709;--surface:#0d1116;--surface2:#11161c;--card:#10151c;--text:#f5f6f7;--muted:#c2cad2;--line:rgba(255,255,255,.10);--red:#ef5f52;--red2:#ff9360;--green:#4cad66;--green2:#6cc07a;--orange:#f7a31f;--orange2:#ffd063;--blue:#0e3260;--shadow:0 22px 60px rgba(0,0,0,.28);--container:1240px;--split:50%}
html[data-theme="light"]{color-scheme:light;--bg:#fff;--surface:#fff;--surface2:#faf7f5;--card:#fff;--text:#170e0b;--muted:#504844;--line:rgba(30,20,18,.12);--blue:#12396c;--shadow:0 18px 50px rgba(40,25,18,.10)}
html[data-theme="dark"]{color-scheme:dark;--bg:#060709;--surface:#0d1116;--surface2:#11161c;--card:#10151c;--text:#f5f6f7;--muted:#c2cad2;--line:rgba(255,255,255,.10);--blue:#0e3260;--shadow:0 22px 60px rgba(0,0,0,.28)}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]){color-scheme:light;--bg:#fff;--surface:#fff;--surface2:#faf7f5;--card:#fff;--text:#170e0b;--muted:#504844;--line:rgba(30,20,18,.12);--blue:#12396c;--shadow:0 18px 50px rgba(40,25,18,.10)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.56;overflow-x:hidden}a{color:inherit}img{display:block;max-width:100%}svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.container{width:min(100% - 40px,var(--container));margin-inline:auto}.site-header{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-row{height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.logo{display:flex;align-items:center;text-decoration:none;gap:10px;min-width:242px}.logo-badge{width:42px;height:42px;border-radius:12px;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:950}.logo-text strong{display:block;font-weight:950;line-height:.95;letter-spacing:.02em;font-size:18px}.logo-text span{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--muted);margin-top:4px}.main-nav{display:flex;gap:22px;justify-content:center;align-items:center;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.main-nav a{text-decoration:none;color:color-mix(in srgb,var(--text) 82%,transparent)}.head-tools{display:flex;align-items:center;gap:10px;justify-self:end}.seg{height:44px;display:inline-flex;align-items:center;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}.seg button{height:36px;min-width:38px;padding:0 10px;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:999px;font-weight:850;cursor:pointer}.seg button.active{background:var(--text);color:var(--bg)}.theme-seg button{font-size:11px}.header-cta{display:flex;gap:10px}.menu-btn{display:none;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;width:42px;height:42px;place-items:center;font-size:24px;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border:0;border-radius:999px;padding:13px 18px;font-weight:950;letter-spacing:.01em;cursor:pointer;transition:.2s transform,.2s filter;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}.btn svg{width:18px;height:18px;min-width:18px;display:block;flex:0 0 18px}.btn-red{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 14px 30px color-mix(in srgb,var(--red) 25%,transparent)}.btn-green{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 14px 30px color-mix(in srgb,var(--green) 22%,transparent)}.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text)}.small-phone{display:block;font-size:11px;opacity:.9;line-height:1.1}.mobile-menu{display:none;position:fixed;inset:72px 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);padding:18px;box-shadow:var(--shadow)}.mobile-menu.open{display:grid;gap:10px}.mobile-menu a{padding:14px 16px;text-decoration:none;border:1px solid var(--line);border-radius:14px;font-weight:900}.hero{position:relative;padding:42px 0 26px;background:radial-gradient(circle at 82% 12%,rgba(239,95,82,.14),transparent 34%),var(--bg)}.hero-inner{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr);gap:42px;align-items:center}.eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.22em;color:var(--red);font-size:16px;margin:0 0 12px}.hero h1,.section h2,.display{font-family:var(--font-head);text-transform:uppercase;line-height:.92;margin:0;letter-spacing:.01em}.hero h1{font-size:clamp(58px,7vw,104px);max-width:620px}.hero h1 .grad{background:linear-gradient(135deg,var(--orange),var(--orange2));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:19px;color:var(--muted);max-width:550px;margin:20px 0}.hero-media{position:relative;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface2);aspect-ratio:1916/821}.hero-media img{width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:12px;justify-content:space-between;align-items:flex-end}.hero-sticker,.hero-note{background:rgba(8,10,14,.74);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px}.hero-sticker{font-family:var(--font-head);font-size:26px;line-height:.95;text-transform:uppercase}.hero-note{font-size:14px;max-width:300px}.emergency-strip{padding:0 0 34px;background:var(--bg)}.emergency-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.emergency-card{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 12px 34px rgba(0,0,0,.06)}.emergency-card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}.emergency-card h3{margin:0;font-family:var(--font-head);font-size:28px;line-height:.95;text-transform:uppercase}.emergency-card p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.35}.free-cta-row{display:grid;grid-template-columns:minmax(320px,430px) minmax(420px,1fr);gap:24px;align-items:start;margin-top:18px}.free-card{display:grid;grid-template-columns:82px 1fr;gap:16px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--card);box-shadow:var(--shadow)}.cash-icon{width:66px;height:66px;border-radius:18px;background:linear-gradient(135deg,#e8f4df,#d6eac8);display:grid;place-items:center;font-size:30px}.free-card strong{display:block;font-family:var(--font-head);font-size:32px;color:var(--red);text-transform:uppercase;line-height:.95}.free-card b{display:block;margin-top:4px;font-size:16px}.free-card p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}.quick-cta{display:grid;gap:12px;justify-items:start}.quote{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 13%,transparent),transparent);border-radius:14px;padding:14px 16px;color:var(--text);width:min(100%,620px)}.quote b{font-size:34px;line-height:1;color:var(--red);font-family:Georgia,serif}.hero-cta{display:flex;gap:12px;flex-wrap:wrap}.trust-row{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-weight:850}.trust-row span{display:flex;align-items:center;gap:8px}.section{padding:70px 0}.section-head{max-width:900px;margin-bottom:24px}.section h2{font-size:clamp(42px,5vw,66px)}.muted{color:var(--muted)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.video-card,.review-card,.interactive-card,.service-card,.cash-item,.step,.district-panel,.faq details{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 42px rgba(0,0,0,.07)}.video-card{padding:18px}.short-frame{position:relative;aspect-ratio:9/16;max-height:560px;margin:auto;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#111,#333);display:grid;place-items:center;color:#fff}.short-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.short-placeholder{text-align:center;padding:30px}.short-placeholder svg{width:54px;height:54px;color:var(--red)}.interactive-grid{display:grid;grid-template-columns:300px 1fr;gap:18px}.tab-buttons{display:grid;gap:10px}.tab-btn{text-align:left;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:16px;padding:16px;font-weight:950;cursor:pointer}.tab-btn.active{border-color:var(--red);box-shadow:0 12px 32px color-mix(in srgb,var(--red) 12%,transparent)}.interactive-card{padding:24px}.interactive-card h3{font-family:var(--font-head);font-size:42px;line-height:.95;text-transform:uppercase;margin:0 0 10px}.interactive-card ul{margin:0;padding-left:20px;color:var(--muted)}.slider-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:stretch}.slider{position:relative;aspect-ratio:16/7;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface2)}.slider .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.slider .after{clip-path:polygon(var(--split) 0,100% 0,100% 100%,var(--split) 100%)}.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-50%);z-index:4}.handle{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);z-index:5;width:58px;height:58px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-weight:950;box-shadow:0 10px 30px rgba(0,0,0,.28)}.slider input{position:absolute;inset:0;opacity:0;cursor:ew-resize;z-index:6;width:100%;height:100%}.tag{position:absolute;z-index:5;top:16px;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.68);color:#fff;font-family:var(--font-head);font-size:20px;text-transform:uppercase}.tag.left{left:16px}.tag.right{right:16px}.cash-badge{position:absolute;z-index:5;bottom:16px;left:16px;border-radius:999px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-weight:950;padding:10px 14px}.cash-side{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}.cash-side h3{font-family:var(--font-head);font-size:32px;line-height:.94;text-transform:uppercase;margin:0 0 12px}.cash-side ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.cash-side li{display:flex;gap:10px;color:var(--muted)}.cash-side li:before{content:'€';color:var(--red);font-weight:950}.service-card,.cash-item,.step{padding:20px}.service-card .icon,.cash-item .icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);margin-bottom:12px}.service-card h3,.cash-item h3,.step h3{font-family:var(--font-head);font-size:30px;line-height:.95;text-transform:uppercase;margin:0 0 8px}.service-card p,.cash-item p,.step p{margin:0;color:var(--muted);font-size:14px}.reviews{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.review-grid{display:grid;gap:14px}.review-card{padding:18px}.stars{color:#f7a31f;letter-spacing:.08em}.review-card strong{display:block;margin:8px 0 4px}.maps-box{border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:360px;background:var(--surface2)}.maps-box iframe{width:100%;height:100%;min-height:360px;border:0}.district-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.district-link{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;font-weight:900}.upload-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px}.upload-box{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:24px}.drop{border:2px dashed color-mix(in srgb,var(--red) 38%,var(--line));border-radius:18px;min-height:160px;display:grid;place-items:center;text-align:center;padding:20px;cursor:pointer;background:color-mix(in srgb,var(--red) 5%,transparent)}.drop input{display:none}.drop strong{font-family:var(--font-head);font-size:30px;text-transform:uppercase}.file-list{margin-top:8px;color:var(--muted);font-size:14px}.form-grid{display:grid;gap:12px;margin-top:14px}.field{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:12px;padding:14px;font:inherit}.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}.thumbs img{aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.faq details{padding:18px;margin:10px 0}.faq summary{cursor:pointer;font-weight:950}.footer{padding:48px 0 104px;background:var(--surface2);border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}.footer h3{font-family:var(--font-head);font-size:34px;line-height:1;text-transform:uppercase;margin:0 0 10px}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.footer a{text-decoration:none;color:var(--muted)}.footer p,.footer li{color:var(--muted)}.sticky-contact{position:fixed;left:0;right:0;bottom:0;z-index:70;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:10px 14px}.sticky-contact .inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:540px;margin:auto}
@media (max-width:1180px){.main-nav,.header-cta{display:none}.menu-btn{display:grid}.hero-inner,.slider-wrap,.reviews,.upload-grid,.interactive-grid{grid-template-columns:1fr}.emergency-grid{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.district-grid{grid-template-columns:1fr 1fr}.free-cta-row{grid-template-columns:1fr}}
@media (max-width:760px){.container{width:min(100% - 28px,var(--container))}.header-row{height:66px}.logo{min-width:0}.logo-text strong{font-size:14px}.logo-text span{font-size:8px}.theme-seg{display:none}.hero{padding-top:28px}.hero h1{font-size:clamp(54px,15vw,72px)}.lead{font-size:17px}.hero-overlay{position:static;padding:12px;background:var(--surface)}.hero-sticker,.hero-note{max-width:100%;width:100%}.emergency-grid,.grid-4,.grid-3,.district-grid{grid-template-columns:1fr}.free-card{grid-template-columns:70px 1fr}.hero-cta{display:grid;grid-template-columns:1fr}.section{padding:54px 0}.section h2{font-size:clamp(38px,12vw,50px)}.short-frame{max-height:none}.thumbs{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr}}


/* v4 cleanup: no Google referentials / no YouTube Shorts, slider overlap fix, WhatsApp icon fix */
.wa-svg{width:18px;height:18px;min-width:18px;display:block;flex:0 0 18px;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wa-link,.wa-link span{display:inline-flex;align-items:center;gap:10px}
.slider-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:28px;align-items:stretch}
.slider,.cash-side{min-width:0}
.cash-side{position:relative;z-index:1;overflow:hidden}
.cash-side h3{font-size:clamp(28px,2.1vw,36px);line-height:.96}
.cash-side ul{gap:12px}
.cash-side li{line-height:1.45;overflow-wrap:anywhere;word-break:normal}
.slider .cash-badge{max-width:calc(100% - 32px);white-space:normal;line-height:1.2}
.slider .tag{max-width:calc(50% - 24px);white-space:nowrap}
@media (max-width: 1320px){
  .slider-wrap{grid-template-columns:1fr;}
  .cash-side{max-width:none}
}



/* v5 WhatsApp-Icon-Fix: gefülltes Logo, nicht vom globalen Stroke-SVG-System beeinflussen */
.wa-svg,
.btn .wa-svg,
.header-cta .wa-svg,
.hero-cta .wa-svg,
.sticky-contact .wa-svg,
.mobile-menu .wa-svg,
.emergency-card .wa-svg{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  display:block !important;
  flex:0 0 18px !important;
  margin:0 !important;
  transform:none !important;
  fill:currentColor !important;
  stroke:none !important;
}

.wa-svg path,
.btn .wa-svg path,
.header-cta .wa-svg path,
.hero-cta .wa-svg path,
.sticky-contact .wa-svg path,
.mobile-menu .wa-svg path,
.emergency-card .wa-svg path{
  fill:currentColor !important;
  stroke:none !important;
  stroke-width:0 !important;
}

.emergency-card .ico .wa-svg{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
}

.wa-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

.wa-link span{
  display:inline-flex !important;
  flex-direction:column;
  justify-content:center;
  line-height:1.05;
}



/* v6 Ablauf-Reset: Größe/Optik wie Screenshot und direkt nach dem Schieberegler */
.ablauf-section{
  padding-top:58px !important;
  padding-bottom:58px !important;
  background:var(--bg);
}

.ablauf-head{
  max-width:760px;
  margin-bottom:26px;
}

.ablauf-head h2{
  font-size:clamp(42px,4.8vw,66px) !important;
  line-height:.94 !important;
}

.ablauf-head .muted{
  font-size:18px;
  line-height:1.55;
}

.steps-reset{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.step-reset{
  min-height:248px;
  padding:28px 28px 26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:0 18px 44px rgba(0,0,0,.07);
}

.step-reset .step-num{
  font-family:var(--font-head);
  font-size:34px;
  line-height:1;
  color:var(--red);
  letter-spacing:.04em;
  margin-bottom:12px;
}

.step-reset h3{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-size:34px;
  line-height:.96;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text);
}

.step-reset p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.5;
}

.ablauf-quote{
  margin-top:26px;
  padding-left:18px;
  border-left:4px solid var(--orange);
  font-family:var(--font-head);
  font-size:clamp(34px,3.4vw,48px);
  line-height:.96;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text);
}

/* Light Mode exakt wie Screenshot: helle Karten, schwarzer Text, rote Nummern */
html[data-theme="light"] .step-reset,
html:not([data-theme="dark"]) .step-reset{
  background:#fff;
}

/* Responsive */
@media (max-width:980px){
  .steps-reset{
    grid-template-columns:1fr;
  }

  .step-reset{
    min-height:0;
  }
}

@media (max-width:760px){
  .ablauf-section{
    padding-top:46px !important;
    padding-bottom:46px !important;
  }

  .step-reset{
    padding:22px;
  }

  .step-reset h3{
    font-size:30px;
  }

  .step-reset p{
    font-size:16px;
  }

  .ablauf-quote{
    font-size:clamp(30px,9vw,42px);
  }
}



/* v7 Leistungen: klickbare ausfahrende Karten wie Screenshot 1 + Detailtext aus älterer Version */
.leistungen-expand-section{
  padding-top:64px !important;
  padding-bottom:70px !important;
}

.service-expand-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.service-expand-card{
  padding:0 !important;
  overflow:hidden;
  transition:grid-column .28s ease, box-shadow .25s ease, transform .25s ease;
}

.service-expand-card:hover{
  transform:translateY(-2px);
}

.service-card-head{
  width:100%;
  min-height:184px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  padding:20px;
  cursor:pointer;
  font:inherit;
}

.service-card-head .icon{
  width:50px;
  height:50px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--red) 12%,transparent);
  color:var(--red);
  margin-bottom:14px;
}

.service-card-head .icon svg{
  width:21px;
  height:21px;
}

.service-card-copy{
  display:grid;
  gap:6px;
}

.service-kicker{
  display:none;
  font-family:var(--font-head);
  color:var(--red);
  font-size:26px;
  line-height:1;
  letter-spacing:.04em;
}

.service-title{
  font-family:var(--font-head);
  font-size:30px;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.service-short{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.service-plus{
  justify-self:end;
  align-self:end;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--red);
  font-weight:950;
  transition:.2s transform,.2s background;
}

.service-more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
  border-top:1px solid transparent;
}

.service-more > *{
  min-height:0;
  overflow:hidden;
}

.service-more p{
  margin:0;
  padding:0 20px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

.service-more strong{
  margin:12px 20px 20px;
  padding-left:14px;
  border-left:3px solid var(--orange);
  font-weight:950;
  color:var(--text);
}

.service-expand-card.open{
  grid-column:span 2;
  box-shadow:var(--shadow);
}

.service-expand-card.open .service-card-head{
  min-height:142px;
  grid-template-columns:64px 1fr auto;
  grid-template-rows:auto;
  gap:16px;
  align-items:center;
}

.service-expand-card.open .service-card-head .icon{
  margin:0;
  width:64px;
  height:64px;
  border-radius:18px;
  background:var(--blue);
  color:#fff;
}

.service-expand-card.open .service-kicker{
  display:block;
}

.service-expand-card.open .service-title{
  font-size:34px;
}

.service-expand-card.open .service-plus{
  transform:rotate(45deg);
  background:color-mix(in srgb,var(--red) 12%,transparent);
}

.service-expand-card.open .service-more{
  grid-template-rows:1fr;
  border-top:1px solid var(--line);
}

/* Desktop: damit 4 geschlossene Karten wie Screenshot bleiben */
@media (min-width:1181px){
  .service-expand-card:not(.open) .service-plus{
    opacity:.75;
  }
}

/* Tablet: zwei Spalten */
@media (max-width:1180px){
  .service-expand-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service-expand-card.open{
    grid-column:span 2;
  }
}

/* Mobile: eine Spalte */
@media (max-width:760px){
  .service-expand-grid{
    grid-template-columns:1fr;
  }

  .service-expand-card.open,
  .service-expand-card{
    grid-column:span 1;
  }

  .service-card-head,
  .service-expand-card.open .service-card-head{
    min-height:0;
    grid-template-columns:56px 1fr auto;
    grid-template-rows:auto;
    gap:14px;
    align-items:center;
    padding:18px;
  }

  .service-card-head .icon,
  .service-expand-card.open .service-card-head .icon{
    width:56px;
    height:56px;
    border-radius:16px;
    margin:0;
  }

  .service-title,
  .service-expand-card.open .service-title{
    font-size:28px;
  }

  .service-short{
    font-size:14px;
  }

  .service-more p{
    padding:0 18px;
    font-size:15px;
  }

  .service-more strong{
    margin:12px 18px 18px;
  }
}



/* v8 Reihenfolge: Upload direkt nach Ablauf, Interaktiv direkt vor Bezirke */
.ablauf-section + #upload{
  padding-top:28px !important;
}

#upload + #leistungen{
  padding-top:64px !important;
}

#interaktiv + #bezirke{
  padding-top:48px !important;
}

@media (max-width:760px){
  .ablauf-section + #upload{
    padding-top:18px !important;
  }

  #interaktiv + #bezirke{
    padding-top:36px !important;
  }
}



/* v9 Upload-Fokus: Schnell-Voreinschätzung stärker und eindrücklicher */
.upload-focus-section{
  padding-top:38px !important;
  padding-bottom:72px !important;
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb,var(--red) 11%, transparent), transparent 34%),
    var(--bg);
}

.upload-focus-grid{
  display:grid;
  grid-template-columns:minmax(340px,.92fr) minmax(420px,1.08fr);
  gap:28px;
  align-items:stretch;
}

.upload-focus-copy{
  position:relative;
  padding:30px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--red) 8%, transparent), transparent 42%),
    var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.upload-focus-copy::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:color-mix(in srgb,var(--orange) 14%, transparent);
  filter:blur(2px);
  pointer-events:none;
}

.upload-focus-copy .display{
  font-size:clamp(42px,5vw,68px) !important;
  line-height:.92 !important;
  max-width:740px;
  position:relative;
  z-index:1;
}

.upload-focus-lead{
  margin:18px 0 22px;
  color:var(--muted);
  font-size:19px;
  line-height:1.55;
  max-width:680px;
  position:relative;
  z-index:1;
}

.upload-focus-callout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--surface) 78%, transparent);
  margin:18px 0;
}

.upload-callout-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;
}

.upload-callout-icon svg{
  width:28px;
  height:28px;
}

.upload-focus-callout strong{
  display:block;
  font-weight:950;
  font-size:18px;
  margin-bottom:3px;
}

.upload-focus-callout span{
  display:block;
  color:var(--muted);
  line-height:1.45;
}

.upload-mini-points{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.upload-mini-points span{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  font-weight:900;
  color:var(--text);
  line-height:1.25;
}

.upload-mini-points svg{
  width:18px;
  height:18px;
  min-width:18px;
  color:var(--red);
}

.upload-focus-box{
  padding:22px !important;
  border-radius:26px !important;
}

.upload-drop-focus{
  min-height:260px !important;
  border-radius:24px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--red) 9%, transparent), color-mix(in srgb,var(--orange) 7%, transparent)),
    var(--surface2) !important;
  border:2px dashed color-mix(in srgb,var(--red) 45%,var(--line)) !important;
  transition:.22s transform,.22s border-color,.22s background;
}

.upload-drop-focus:hover{
  transform:translateY(-2px);
  border-color:var(--red) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--red) 14%, transparent), color-mix(in srgb,var(--orange) 10%, transparent)),
    var(--surface2) !important;
}

.drop-inner-focus{
  display:grid;
  justify-items:center;
  gap:9px;
  max-width:520px;
}

.drop-icon-focus{
  width:72px;
  height:72px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;
  box-shadow:0 18px 36px color-mix(in srgb,var(--red) 25%, transparent);
  margin-bottom:4px;
}

.drop-icon-focus svg{
  width:34px;
  height:34px;
}

.upload-drop-focus strong{
  font-size:clamp(32px,3.6vw,48px) !important;
  line-height:.95 !important;
}

.upload-drop-focus p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

.upload-form-focus{
  grid-template-columns:1fr 1fr;
}

.upload-form-focus textarea,
.upload-form-focus select,
.upload-submit-focus{
  grid-column:1 / -1;
}

.upload-submit-focus{
  min-height:58px;
  border-radius:16px;
  justify-content:center;
  font-size:16px;
}

.upload-submit-focus span{
  display:inline-flex;
  flex-direction:column;
  line-height:1.05;
}

/* Mobile */
@media (max-width:980px){
  .upload-focus-grid{
    grid-template-columns:1fr;
  }

  .upload-focus-copy .display{
    max-width:none;
  }
}

@media (max-width:760px){
  .upload-focus-section{
    padding-top:24px !important;
    padding-bottom:52px !important;
  }

  .upload-focus-copy{
    padding:22px;
  }

  .upload-focus-copy .display{
    font-size:clamp(36px,10vw,52px) !important;
  }

  .upload-focus-lead{
    font-size:16px;
  }

  .upload-focus-callout{
    grid-template-columns:54px 1fr;
    padding:15px;
  }

  .upload-callout-icon{
    width:54px;
    height:54px;
  }

  .upload-mini-points{
    grid-template-columns:1fr;
  }

  .upload-form-focus{
    grid-template-columns:1fr;
  }

  .upload-drop-focus{
    min-height:230px !important;
  }

  .upload-drop-focus strong{
    font-size:clamp(28px,8vw,40px) !important;
  }

  .drop-icon-focus{
    width:62px;
    height:62px;
  }
}



/* v10 Cash-Summe: 3.500 € / direkt aufs Konto stärker herausstellen */
.cash-sum-banner{
  margin-top:14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:12px;
  align-items:stretch;
}

.cash-sum-main,
.cash-sum-side{
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--orange) 11%, transparent), transparent 54%),
    var(--card);
  box-shadow:0 16px 44px rgba(0,0,0,.08);
}

.cash-sum-main{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:20px;
}

.cash-sum-icon{
  width:76px;
  height:76px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#170e0b;
  box-shadow:0 16px 36px color-mix(in srgb,var(--orange) 20%, transparent);
}

.cash-sum-icon svg{
  width:36px;
  height:36px;
}

.cash-sum-main strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(38px,4vw,58px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text);
}

.cash-sum-main p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}

.cash-sum-side{
  padding:20px;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:8px;
}

.cash-sum-side span{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
}

.cash-sum-side span svg{
  width:24px;
  height:24px;
}

.cash-sum-side b{
  font-family:var(--font-head);
  font-size:32px;
  line-height:.95;
  text-transform:uppercase;
}

.cash-sum-side small{
  color:var(--muted);
  font-weight:800;
  line-height:1.3;
}

.cash-side-highlight{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--orange) 12%, transparent), transparent);
  margin:0 0 16px;
}

.cash-side-highlight span{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red2));
}

.cash-side-highlight strong{
  display:block;
  font-weight:950;
  line-height:1.2;
}

.cash-side-highlight small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  line-height:1.35;
}

.upload-cash-note{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--orange) 8%, var(--surface));
  margin:14px 0;
}

.upload-cash-note span{
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#170e0b;
}

.upload-cash-note span svg{
  width:24px;
  height:24px;
}

.upload-cash-note strong{
  display:block;
  font-weight:950;
  margin-bottom:3px;
}

.upload-cash-note p{
  margin:0;
  color:var(--muted);
  line-height:1.4;
  font-size:14px;
}

@media (max-width:980px){
  .cash-sum-banner{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .cash-sum-main{
    grid-template-columns:62px minmax(0,1fr);
    padding:16px;
  }

  .cash-sum-icon{
    width:62px;
    height:62px;
    border-radius:18px;
  }

  .cash-sum-icon svg{
    width:30px;
    height:30px;
  }

  .cash-sum-main strong{
    font-size:clamp(32px,9vw,46px);
  }

  .cash-sum-main p{
    font-size:14px;
  }

  .cash-sum-side{
    padding:16px;
  }

  .cash-sum-side b{
    font-size:28px;
  }
}



/* v11 Unterschied: Ingenieur-Kompetenz + Verkehrsrechtsanwälte */
.difference-section{
  padding-top:68px !important;
  padding-bottom:76px !important;
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb,var(--orange) 10%, transparent), transparent 32%),
    var(--bg);
}

.difference-head{
  max-width:980px;
}

.difference-grid{
  display:grid;
  grid-template-columns:minmax(420px,1.05fr) minmax(360px,.95fr);
  gap:20px;
  align-items:stretch;
}

.difference-main,
.difference-mini{
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow);
}

.difference-main{
  position:relative;
  border-radius:28px;
  padding:34px;
  overflow:hidden;
}

.difference-main::after{
  content:"ING";
  position:absolute;
  right:-18px;
  bottom:-42px;
  font-family:var(--font-head);
  font-size:170px;
  line-height:.8;
  color:color-mix(in srgb,var(--red) 8%, transparent);
  pointer-events:none;
}

.difference-badge{
  width:76px;
  height:76px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  margin-bottom:20px;
}

.difference-badge svg{
  width:36px;
  height:36px;
}

.difference-main h3{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  font-family:var(--font-head);
  font-size:clamp(40px,4.8vw,66px);
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.difference-main p:not(.eyebrow){
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:18px;
  line-height:1.58;
  max-width:760px;
}

.difference-main strong{
  position:relative;
  z-index:1;
  display:block;
  margin-top:20px;
  padding-left:16px;
  border-left:4px solid var(--orange);
  font-weight:950;
  font-size:18px;
}

.difference-side{
  display:grid;
  gap:14px;
}

.difference-mini{
  border-radius:22px;
  padding:22px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.difference-mini span{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--red) 18%, transparent), color-mix(in srgb,var(--orange) 12%, transparent));
  color:var(--red);
}

.difference-mini span svg{
  width:30px;
  height:30px;
}

.difference-mini h3{
  margin:0 0 6px;
  font-family:var(--font-head);
  font-size:32px;
  line-height:.96;
  text-transform:uppercase;
}

.difference-mini p{
  margin:0;
  color:var(--muted);
  line-height:1.48;
}

@media (max-width:1050px){
  .difference-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .difference-section{
    padding-top:52px !important;
    padding-bottom:56px !important;
  }

  .difference-main{
    padding:24px;
  }

  .difference-main h3{
    font-size:clamp(36px,10vw,52px);
  }

  .difference-main p:not(.eyebrow){
    font-size:16px;
  }

  .difference-mini{
    grid-template-columns:56px minmax(0,1fr);
    padding:18px;
  }

  .difference-mini span{
    width:56px;
    height:56px;
  }

  .difference-mini h3{
    font-size:28px;
  }
}



/* v12 Slider-Fix: Bildfeld und Textblock wieder sauber nebeneinander wie in älteren Versionen */
#vergleich .slider-wrap{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px) !important;
  gap:24px !important;
  align-items:stretch !important;
  position:relative !important;
}

#vergleich .slider{
  grid-column:1 !important;
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  z-index:1 !important;
  aspect-ratio:16/7 !important;
  overflow:hidden !important;
}

#vergleich .cash-side{
  grid-column:2 !important;
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  transform:none !important;
  align-self:stretch !important;
  display:block !important;
  overflow:visible !important;
  margin:0 !important;
}

#vergleich .cash-side h3{
  font-size:clamp(30px,2.25vw,38px) !important;
  line-height:.94 !important;
}

#vergleich .cash-side-highlight{
  margin:0 0 14px !important;
}

#vergleich .cash-side ul{
  gap:10px !important;
}

#vergleich .cash-side li{
  line-height:1.42 !important;
}

/* Slider-interne Elemente bleiben nur im Bild */
#vergleich .slider .cash-badge,
#vergleich .slider .tag,
#vergleich .slider .handle,
#vergleich .slider .divider{
  position:absolute !important;
}

/* Bei mittleren Breiten wie früher wieder untereinander statt überlappend */
@media (max-width:1180px){
  #vergleich .slider-wrap{
    grid-template-columns:1fr !important;
  }

  #vergleich .slider,
  #vergleich .cash-side{
    grid-column:1 !important;
  }

  #vergleich .cash-side{
    align-self:auto !important;
  }
}

@media (max-width:760px){
  #vergleich .slider{
    aspect-ratio:16/10 !important;
  }

  #vergleich .cash-side{
    padding:18px !important;
  }
}



/* v13 Mobilefix:
   1) Schadenssumme läuft mobil nicht mehr aus dem Rahmen
   2) Ablauf-Karten 01/02/03 passen sich im Dark Mode wieder dem Theme an
*/

/* Schadenssumme: generell gegen Überlauf absichern */
.cash-sum-banner,
.cash-sum-main,
.cash-sum-side,
.cash-sum-main > div{
  min-width:0 !important;
  max-width:100% !important;
}

.cash-sum-main{
  overflow:hidden !important;
}

.cash-sum-main strong{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto !important;
}

/* Dark Mode: Ablauf-Karten nicht weiß, sondern wie andere dunkle Karten */
html[data-theme="dark"] .step-reset,
html[data-theme="dark"] .steps-reset .step-reset{
  background:var(--card) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow) !important;
}

html[data-theme="dark"] .step-reset h3,
html[data-theme="dark"] .steps-reset .step-reset h3{
  color:var(--text) !important;
}

html[data-theme="dark"] .step-reset p,
html[data-theme="dark"] .steps-reset .step-reset p{
  color:var(--muted) !important;
}

/* Auto-Theme bei dunklem Android/System: ebenfalls dunkle Ablauf-Karten */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .step-reset,
  html:not([data-theme="light"]) .steps-reset .step-reset{
    background:var(--card) !important;
    color:var(--text) !important;
    border-color:var(--line) !important;
    box-shadow:var(--shadow) !important;
  }

  html:not([data-theme="light"]) .step-reset h3,
  html:not([data-theme="light"]) .steps-reset .step-reset h3{
    color:var(--text) !important;
  }

  html:not([data-theme="light"]) .step-reset p,
  html:not([data-theme="light"]) .steps-reset .step-reset p{
    color:var(--muted) !important;
  }
}

/* Mobile: 3.500 € Block kompakter und sicher im Rahmen */
@media (max-width:760px){
  .cash-sum-banner{
    width:100% !important;
    overflow:hidden !important;
  }

  .cash-sum-main{
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:14px !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .cash-sum-icon{
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
  }

  .cash-sum-icon svg{
    width:28px !important;
    height:28px !important;
  }

  .cash-sum-main strong{
    font-size:clamp(28px,8.2vw,40px) !important;
    line-height:.94 !important;
    letter-spacing:.005em !important;
  }

  .cash-sum-main p{
    font-size:15px !important;
    line-height:1.45 !important;
  }
}

/* Sehr schmale Android-Geräte: Icon oben, Text volle Breite */
@media (max-width:430px){
  .cash-sum-main{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .cash-sum-main strong{
    font-size:clamp(30px,10vw,38px) !important;
  }
}


/* v14 Mobile-Headings:
   Lange Überschriften laufen auf Android/Mobile nicht mehr aus den Karten.
   Betrifft Leistungen + Unterschied-Karten.
*/
.service-expand-card,
.service-card-head,
.service-card-copy,
.service-more,
.service-more p,
.difference-mini,
.difference-mini > div,
.difference-main,
.difference-main p,
.difference-main h3{
  min-width:0 !important;
  max-width:100% !important;
}

.service-title,
.service-expand-card.open .service-title{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
  white-space:normal !important;
}

.service-short,
.service-more p,
.service-more strong{
  max-width:100% !important;
  overflow-wrap:break-word !important;
}

.difference-mini h3,
.difference-main h3{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
  white-space:normal !important;
}

@media (max-width:760px){
  .service-card-head,
  .service-expand-card.open .service-card-head{
    grid-template-columns:56px minmax(0,1fr) 34px !important;
    gap:14px !important;
    align-items:center !important;
  }

  .service-card-copy{
    min-width:0 !important;
    max-width:100% !important;
  }

  .service-title,
  .service-expand-card.open .service-title{
    font-size:clamp(27px,7.6vw,34px) !important;
    line-height:1 !important;
    letter-spacing:.005em !important;
  }

  .service-short{
    font-size:15px !important;
    line-height:1.42 !important;
  }

  .service-plus{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    justify-self:end !important;
  }

  .difference-mini{
    grid-template-columns:56px minmax(0,1fr) !important;
    gap:16px !important;
    align-items:start !important;
  }

  .difference-mini h3{
    font-size:clamp(28px,7.8vw,38px) !important;
    line-height:1 !important;
    letter-spacing:.005em !important;
  }

  .difference-mini p{
    font-size:17px !important;
    line-height:1.48 !important;
    overflow-wrap:break-word !important;
  }

  .difference-main h3{
    font-size:clamp(34px,9vw,48px) !important;
    line-height:.98 !important;
  }
}

@media (max-width:430px){
  .service-card-head,
  .service-expand-card.open .service-card-head{
    grid-template-columns:52px minmax(0,1fr) 32px !important;
    gap:12px !important;
    padding:16px !important;
  }

  .service-card-head .icon,
  .service-expand-card.open .service-card-head .icon{
    width:52px !important;
    height:52px !important;
    border-radius:15px !important;
  }

  .service-title,
  .service-expand-card.open .service-title{
    font-size:clamp(25px,7.2vw,31px) !important;
    line-height:1.02 !important;
  }

  .service-short{
    font-size:14px !important;
  }

  .difference-mini{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:14px !important;
    padding:16px !important;
  }

  .difference-mini span{
    width:52px !important;
    height:52px !important;
    border-radius:15px !important;
  }

  .difference-mini h3{
    font-size:clamp(26px,7.4vw,33px) !important;
    line-height:1.02 !important;
  }

  .difference-mini p{
    font-size:16px !important;
  }
}



/* v15 Gutachten-Umbruch:
   Bei Unfallgutachten / Schadengutachten / Oldtimer-Gutachten bricht der Titel sauber vor "Gutachten",
   nicht mitten im Wort bei "...achten".
*/
.service-title.manual-gutachten-title,
.service-expand-card.open .service-title.manual-gutachten-title{
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  hyphens:manual !important;
  white-space:normal !important;
}

.service-title.manual-gutachten-title .title-word{
  display:inline-block;
  white-space:nowrap;
}

.service-title.manual-gutachten-title .gutachten-break{
  display:none;
}

/* Nur mobil erzwingen wir den sauberen Wortumbruch */
@media (max-width:760px){
  .service-title.manual-gutachten-title .gutachten-break{
    display:block;
  }

  .service-title.manual-gutachten-title{
    line-height:.98 !important;
  }
}



/* v16 Upload-Auswahl:
   Android soll Galerie/Fotos/Dateien anbieten statt direkt nur Kamera zu öffnen.
*/
.upload-drop-focus strong,
.drop strong{
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.upload-drop-focus small,
.drop small{
  color:var(--muted);
}



/* v17 Upload-Auswahl: Kamera oder Fotos/Dateien */
.upload-choice-panel{
  border:2px dashed color-mix(in srgb,var(--red) 42%,var(--line));
  border-radius:24px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--red) 9%, transparent), color-mix(in srgb,var(--orange) 7%, transparent)),
    var(--surface2);
  padding:22px;
  display:grid;
  gap:18px;
}

.upload-choice-head{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:16px;
  align-items:center;
}

.upload-choice-head strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(30px,3.2vw,44px);
  line-height:.98;
  text-transform:uppercase;
  color:var(--text);
  overflow-wrap:break-word;
}

.upload-choice-head p{
  margin:8px 0 4px;
  color:var(--muted);
  line-height:1.45;
}

.upload-choice-head small,
.upload-choice-note{
  display:block;
  color:var(--muted);
  font-weight:850;
  line-height:1.35;
}

.upload-choice-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.upload-choice-btn{
  appearance:none;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  color:var(--text);
  padding:18px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:13px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.08);
  transition:.2s transform,.2s border-color,.2s background;
}

.upload-choice-btn:hover{
  transform:translateY(-2px);
  border-color:var(--red);
}

.upload-choice-btn span{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;
}

.upload-choice-files span{
  background:var(--blue);
}

.upload-choice-btn svg{
  width:25px;
  height:25px;
}

.upload-choice-btn b{
  display:block;
  font-weight:950;
  font-size:17px;
  line-height:1.15;
}

.upload-choice-btn small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  line-height:1.25;
}

.visually-hidden-file{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.upload-choice-panel .file-list{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

.upload-choice-note{
  padding-top:2px;
}

@media (max-width:760px){
  .upload-choice-panel{
    padding:18px;
    gap:15px;
  }

  .upload-choice-head{
    grid-template-columns:58px minmax(0,1fr);
    gap:14px;
  }

  .upload-choice-head .drop-icon-focus{
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
  }

  .upload-choice-head strong{
    font-size:clamp(27px,7.6vw,38px);
  }

  .upload-choice-buttons{
    grid-template-columns:1fr;
  }

  .upload-choice-btn{
    padding:16px;
    grid-template-columns:50px minmax(0,1fr);
  }

  .upload-choice-btn span{
    width:50px;
    height:50px;
  }
}


/* v18 Single Upload:
   Wieder ein einziges Upload-Feld.
   Kein capture-Attribut: Android/Chrome zeigt normalerweise Kamera/Galerie/Dateien als nativen Dialog.
*/
.single-upload-field{
  min-height:230px !important;
  border-radius:24px !important;
  padding:24px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  cursor:pointer !important;
}
.single-upload-field input[type="file"]{display:none !important;}
.single-upload-field .drop-inner-focus{
  display:grid !important;
  justify-items:center !important;
  gap:10px !important;
  max-width:520px !important;
}
.single-upload-field .drop-icon-focus{margin-bottom:4px !important;}
.single-upload-field strong{
  display:block !important;
  font-family:var(--font-head) !important;
  font-size:clamp(34px,3.5vw,48px) !important;
  line-height:.95 !important;
  text-transform:uppercase !important;
  color:var(--text) !important;
  max-width:100% !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
.single-upload-field small{
  display:block !important;
  color:var(--muted) !important;
  font-weight:850 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  max-width:420px !important;
}
.single-upload-field .file-list{
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.35 !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
}
.upload-choice-panel{display:none !important;}
@media (max-width:760px){
  .single-upload-field{min-height:210px !important;padding:20px !important;}
  .single-upload-field strong{font-size:clamp(30px,8.5vw,42px) !important;}
  .single-upload-field small{font-size:13px !important;}
}
@media (max-width:430px){
  .single-upload-field strong{font-size:clamp(28px,8vw,38px) !important;}
}



/* v19 Branding: SVF Gutachten – Sachverständiger Fritsch */
.logo::before{
  content:"SVF" !important;
  width:44px !important;
  height:38px !important;
  border-radius:11px !important;
  font-size:13px !important;
  letter-spacing:.02em !important;
}

.logo::after{
  content:"SVF GUTACHTEN\A SACHVERSTÄNDIGER · FRITSCH" !important;
  white-space:pre !important;
  font-size:15px !important;
  line-height:1.05 !important;
  letter-spacing:.025em !important;
}

.logo{
  min-width:230px !important;
  width:230px !important;
  max-width:230px !important;
}

@media (max-width:1360px) and (min-width:1121px){
  .logo{
    min-width:205px !important;
    width:205px !important;
    max-width:205px !important;
  }

  .logo::before{
    width:40px !important;
    height:34px !important;
    font-size:12px !important;
  }

  .logo::after{
    font-size:13px !important;
    letter-spacing:.015em !important;
  }
}

@media (max-width:760px){
  .logo{
    min-width:182px !important;
    width:182px !important;
    max-width:182px !important;
  }

  .logo::before{
    width:38px !important;
    height:34px !important;
    font-size:11.5px !important;
  }

  .logo::after{
    font-size:11.2px !important;
    letter-spacing:.012em !important;
  }
}

@media (max-width:430px){
  .logo{
    min-width:158px !important;
    width:158px !important;
    max-width:158px !important;
  }

  .logo::before{
    width:34px !important;
    height:30px !important;
    font-size:10.5px !important;
    border-radius:9px !important;
  }

  .logo::after{
    font-size:9.8px !important;
    letter-spacing:.006em !important;
  }
}



/* v20 Header-Logo:
   Header nur noch: SVF + GUTACHTEN.
   Kein "Sachverständiger Fritsch" im Header.
*/
.logo{
  min-width:160px !important;
  width:160px !important;
  max-width:160px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-shrink:0 !important;
  overflow:visible !important;
}

.logo img{
  display:none !important;
}

.logo::before{
  content:"SVF" !important;
  width:44px !important;
  height:40px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:var(--red) !important;
  color:#fff !important;
  font-weight:950 !important;
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  flex:0 0 44px !important;
}

.logo::after{
  content:"GUTACHTEN" !important;
  white-space:nowrap !important;
  display:block !important;
  color:var(--text) !important;
  font-weight:950 !important;
  font-size:19px !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  min-width:0 !important;
}

/* Header insgesamt wieder ruhiger ausrichten */
.site-header .container.header-row{
  align-items:center !important;
}

@media (max-width:1360px) and (min-width:1121px){
  .logo{
    min-width:145px !important;
    width:145px !important;
    max-width:145px !important;
    gap:8px !important;
  }

  .logo::before{
    width:40px !important;
    height:36px !important;
    flex-basis:40px !important;
    font-size:12px !important;
  }

  .logo::after{
    font-size:17px !important;
    letter-spacing:.02em !important;
  }
}

@media (max-width:760px){
  .logo{
    min-width:150px !important;
    width:150px !important;
    max-width:150px !important;
    gap:8px !important;
  }

  .logo::before{
    width:42px !important;
    height:40px !important;
    flex-basis:42px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .logo::after{
    font-size:17px !important;
    letter-spacing:.02em !important;
  }
}

@media (max-width:430px){
  .logo{
    min-width:132px !important;
    width:132px !important;
    max-width:132px !important;
    gap:7px !important;
  }

  .logo::before{
    width:38px !important;
    height:36px !important;
    flex-basis:38px !important;
    border-radius:11px !important;
    font-size:11px !important;
  }

  .logo::after{
    font-size:15px !important;
    letter-spacing:.012em !important;
  }
}



/* v21 Header: echtes Logo-Layout, altes GE-Bild vollständig entfernt */
.site-header{
  overflow:visible !important;
}

.site-header .container.header-row{
  width:min(calc(100% - 28px), 1420px) !important;
  height:72px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
}

/* altes SVG/IMG wirklich ausblenden, falls irgendwo noch vorhanden */
.logo img,
.logo svg:not(.wa-svg){
  display:none !important;
}

.logo,
.logo:before,
.logo:after{
  all:unset;
}

.logo{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:var(--text) !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
}

.logo-mark-real{
  width:50px !important;
  height:50px !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 50px !important;
  background:linear-gradient(135deg,var(--red),var(--red2)) !important;
  color:#fff !important;
  font-weight:950 !important;
  font-size:16px !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
}

.logo-copy-real{
  display:grid !important;
  gap:3px !important;
  line-height:1 !important;
  min-width:0 !important;
}

.logo-copy-real span{
  display:block !important;
  color:color-mix(in srgb,var(--text) 78%,transparent) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
}

.logo-copy-real strong{
  display:block !important;
  color:var(--text) !important;
  font-size:22px !important;
  line-height:.92 !important;
  font-weight:950 !important;
  letter-spacing:.045em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
}

.head-tools{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:max-content !important;
}

/* Desktop Navigation bleibt mittig, aber ohne Logo-Kollision */
.main-nav{
  min-width:0 !important;
  overflow:hidden !important;
}

/* Mobile: Logo links, Sprachen und Menü direkt rechts daneben */
@media (max-width:1120px){
  .site-header .container.header-row{
    width:min(calc(100% - 24px), 1420px) !important;
    height:76px !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:10px !important;
  }

  .main-nav,
  .header-cta{
    display:none !important;
  }

  .head-tools{
    justify-self:end !important;
    gap:8px !important;
  }

  .menu-btn{
    display:grid !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
  }
}

@media (max-width:760px){
  .site-header .container.header-row{
    height:72px !important;
    width:min(calc(100% - 20px), 1420px) !important;
    gap:8px !important;
  }

  .logo{
    gap:8px !important;
  }

  .logo-mark-real{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }

  .logo-copy-real span{
    font-size:10px !important;
    letter-spacing:.11em !important;
  }

  .logo-copy-real strong{
    font-size:17px !important;
    letter-spacing:.025em !important;
  }

  .lang-seg{
    gap:2px !important;
    padding:4px !important;
  }

  .lang-seg button{
    padding:8px 9px !important;
    font-size:13px !important;
  }

  .menu-btn{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }
}

@media (max-width:430px){
  .site-header .container.header-row{
    width:min(calc(100% - 16px), 1420px) !important;
    gap:6px !important;
  }

  .logo{
    gap:7px !important;
  }

  .logo-mark-real{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .logo-copy-real span{
    font-size:9px !important;
    letter-spacing:.085em !important;
  }

  .logo-copy-real strong{
    font-size:15px !important;
    letter-spacing:.015em !important;
  }

  .lang-seg button{
    padding:7px 7px !important;
    font-size:12px !important;
  }

  .menu-btn{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
}

@media (max-width:380px){
  .logo-copy-real span{
    display:none !important;
  }

  .logo-copy-real strong{
    font-size:14px !important;
  }

  .logo-mark-real{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }

  .lang-seg button{
    padding:6px 6px !important;
    font-size:11px !important;
  }
}



/* v22 Header-Clean:
   Ein einziges Logo: SVF + zweizeilig BERLIN · KFZ / GUTACHTER.
   Entfernt alle alten GE/SVF/GUTACHTEN-Pseudo-Logos endgültig.
*/

/* Alte Logo-Pseudo-Elemente endgültig ausschalten */
.logo::before,
.logo::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  visibility:hidden !important;
}

/* Alte Bild-/SVG-Logos im Header endgültig ausblenden */
.logo > img,
.logo > svg{
  display:none !important;
}

/* Header-Grundlayout */
.site-header{
  overflow:visible !important;
}

.site-header .container.header-row{
  width:min(calc(100% - 28px), 1420px) !important;
  height:72px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  overflow:visible !important;
}

/* echtes Logo */
.logo{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:var(--text) !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}

.svf-logo-mark{
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--red),var(--red2)) !important;
  color:#fff !important;
  font-weight:950 !important;
  font-size:16px !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
}

.svf-logo-text{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:3px !important;
  min-width:0 !important;
  line-height:1 !important;
}

.svf-logo-top{
  display:block !important;
  color:color-mix(in srgb,var(--text) 78%,transparent) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
}

.svf-logo-bottom{
  display:block !important;
  color:var(--text) !important;
  font-size:22px !important;
  line-height:.92 !important;
  font-weight:950 !important;
  letter-spacing:.045em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
}

/* Keine doppelte Wortmarke aus älteren Klassen anzeigen */
.logo-mark-real,
.logo-copy-real{
  display:none !important;
}

/* Desktop-Navigation bleibt rechts vom Logo, darf aber nicht drücken */
.main-nav{
  min-width:0 !important;
  overflow:hidden !important;
  justify-content:center !important;
}

.head-tools{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:max-content !important;
  flex-shrink:0 !important;
}

/* Tablet/Mobile: Logo links, Sprachwahl und Menü rechts */
@media (max-width:1120px){
  .site-header .container.header-row{
    width:min(calc(100% - 22px), 1420px) !important;
    height:72px !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:10px !important;
  }

  .main-nav,
  .header-cta{
    display:none !important;
  }

  .head-tools{
    justify-self:end !important;
    min-width:0 !important;
    gap:8px !important;
  }

  .menu-btn{
    display:grid !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
  }
}

@media (max-width:760px){
  .site-header .container.header-row{
    width:min(calc(100% - 18px), 1420px) !important;
    height:70px !important;
    gap:7px !important;
  }

  .logo{
    gap:7px !important;
  }

  .svf-logo-mark{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .svf-logo-top{
    font-size:9.5px !important;
    letter-spacing:.09em !important;
  }

  .svf-logo-bottom{
    font-size:16px !important;
    letter-spacing:.015em !important;
  }

  .lang-seg{
    gap:2px !important;
    padding:4px !important;
  }

  .lang-seg button{
    padding:7px 8px !important;
    font-size:12px !important;
  }

  .menu-btn{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
}

@media (max-width:430px){
  .site-header .container.header-row{
    width:min(calc(100% - 14px), 1420px) !important;
    gap:5px !important;
  }

  .logo{
    gap:6px !important;
  }

  .svf-logo-mark{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
    border-radius:11px !important;
    font-size:11px !important;
  }

  .svf-logo-top{
    font-size:8.5px !important;
    letter-spacing:.065em !important;
  }

  .svf-logo-bottom{
    font-size:14px !important;
    letter-spacing:.008em !important;
  }

  .lang-seg button{
    padding:6px 6px !important;
    font-size:11px !important;
  }

  .menu-btn{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
}

/* Extrem schmale Geräte: oben BERLIN · KFZ bleibt sichtbar, aber sehr kompakt */
@media (max-width:370px){
  .svf-logo-top{
    font-size:7.8px !important;
    letter-spacing:.045em !important;
  }

  .svf-logo-bottom{
    font-size:13px !important;
  }

  .lang-seg button{
    padding:6px 5px !important;
  }
}



/* v23 Header-Feinschliff:
   BERLIN · KFZ exakt mittig über GUTACHTER ausrichten.
*/
.svf-logo-text{
  justify-items:center !important;
  align-items:center !important;
  text-align:center !important;
  width:max-content !important;
}

.svf-logo-top,
.svf-logo-bottom{
  justify-self:center !important;
  text-align:center !important;
}

.svf-logo-top{
  width:100% !important;
}



/* v24 Header-Wordmark:
   Kein Kasten mehr – links nur kursives SVF in Variante 2 (grün/türkis),
   rechts daneben unverändert BERLIN · KFZ / GUTACHTER.
*/
.svf-logo-mark{
  width:72px !important;
  min-width:72px !important;
  height:auto !important;
  flex:0 0 72px !important;
  display:grid !important;
  place-items:center !important;
  background:none !important;
  border-radius:0 !important;
  color:transparent !important;
  font-family:Impact, "Arial Black", Arial, sans-serif !important;
  font-weight:900 !important;
  font-size:38px !important;
  line-height:1 !important;
  letter-spacing:-0.055em !important;
  text-align:center !important;
  white-space:nowrap !important;
  background-image:linear-gradient(90deg,#8DFF8A 0%, #3DF1B2 52%, #24D5E8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  transform:skewX(-10deg) !important;
  filter:drop-shadow(0 0 10px rgba(61,241,178,.16)) !important;
  justify-self:center !important;
  align-self:center !important;
}

.logo{
  gap:12px !important;
  align-items:center !important;
}

.svf-logo-text{
  justify-items:center !important;
  align-items:center !important;
  text-align:center !important;
  width:max-content !important;
}

.svf-logo-top,
.svf-logo-bottom{
  justify-self:center !important;
  text-align:center !important;
}

@media (max-width:760px){
  .svf-logo-mark{
    width:62px !important;
    min-width:62px !important;
    flex-basis:62px !important;
    font-size:31px !important;
    letter-spacing:-0.05em !important;
  }

  .logo{
    gap:8px !important;
  }
}

@media (max-width:430px){
  .svf-logo-mark{
    width:56px !important;
    min-width:56px !important;
    flex-basis:56px !important;
    font-size:27px !important;
    letter-spacing:-0.045em !important;
  }

  .logo{
    gap:7px !important;
  }
}



/* v25 Mobile Card Layout:
   Icons bei "Direkt auf deine Bank" und "100 % kostenlos" links,
   Text rechts daneben. Schadenssumme ruhiger/mittiger auf voller Breite.
*/

/* Cash-Banner oben: etwas ruhiger und mittiger, wenn er volle Breite hat */
.cash-sum-banner{
  align-items:stretch !important;
}

.cash-sum-main{
  align-items:center !important;
}

.cash-sum-main > div{
  min-width:0 !important;
}

.cash-sum-main strong{
  text-wrap:balance;
}

.cash-sum-main p{
  max-width:760px !important;
}

/* Direkt auf deine Bank: Desktop bleibt schön, Mobile wird Icon links + Text rechts */
.cash-sum-side{
  min-width:0 !important;
}

.cash-sum-side b,
.cash-sum-side small{
  max-width:100% !important;
}

/* 100% kostenlos Karte generell stabilisieren */
.free-card{
  min-width:0 !important;
}

.free-card > div:last-child{
  min-width:0 !important;
}

/* Mobile Feinlayout */
@media (max-width:760px){
  /* Ø 3.500 € Schadenssumme: auf volle Breite sauber mittig/ruhig */
  .cash-sum-banner{
    gap:12px !important;
  }

  .cash-sum-main{
    grid-template-columns:62px minmax(0,1fr) !important;
    gap:14px !important;
    padding:18px !important;
    align-items:center !important;
  }

  .cash-sum-icon{
    justify-self:center !important;
  }

  .cash-sum-main strong{
    font-size:clamp(30px,7.6vw,42px) !important;
    line-height:.95 !important;
    text-align:left !important;
    margin:0 !important;
  }

  .cash-sum-main p{
    font-size:14px !important;
    line-height:1.4 !important;
    text-align:left !important;
    margin-top:7px !important;
  }

  /* Direkt auf deine Bank: Icon links, Text rechts */
  .cash-sum-side{
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:4px !important;
    align-items:center !important;
    justify-items:start !important;
    align-content:center !important;
    padding:18px !important;
    min-height:108px !important;
  }

  .cash-sum-side span{
    grid-row:1 / span 2 !important;
    grid-column:1 !important;
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
    margin:0 !important;
    justify-self:center !important;
    align-self:center !important;
  }

  .cash-sum-side b{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:clamp(26px,7vw,34px) !important;
    line-height:.95 !important;
    margin:0 !important;
    text-align:left !important;
  }

  .cash-sum-side small{
    grid-column:2 !important;
    grid-row:2 !important;
    font-size:13px !important;
    line-height:1.25 !important;
    margin:0 !important;
    text-align:left !important;
  }

  /* 100 % kostenlos: Icon links, Text rechts statt unnötige Höhe/Lücken */
  .free-card{
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:center !important;
    padding:18px !important;
  }

  .free-card .cash-icon{
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
    justify-self:center !important;
    align-self:center !important;
    font-size:24px !important;
  }

  .free-card strong{
    font-size:clamp(28px,7.4vw,38px) !important;
    line-height:.95 !important;
    margin:0 !important;
  }

  .free-card b{
    font-size:14px !important;
    line-height:1.25 !important;
    margin-top:4px !important;
  }

  .free-card p{
    font-size:13px !important;
    line-height:1.35 !important;
    margin-top:7px !important;
  }
}

/* Sehr kleine Displays */
@media (max-width:430px){
  .cash-sum-main{
    grid-template-columns:56px minmax(0,1fr) !important;
    padding:16px !important;
    gap:12px !important;
  }

  .cash-sum-icon{
    width:56px !important;
    height:56px !important;
  }

  .cash-sum-main strong{
    font-size:clamp(27px,7.2vw,36px) !important;
  }

  .cash-sum-side{
    grid-template-columns:54px minmax(0,1fr) !important;
    padding:16px !important;
    gap:12px !important;
  }

  .cash-sum-side span{
    width:54px !important;
    height:54px !important;
  }

  .cash-sum-side b{
    font-size:clamp(24px,6.6vw,31px) !important;
  }

  .free-card{
    grid-template-columns:54px minmax(0,1fr) !important;
    padding:16px !important;
    gap:12px !important;
  }

  .free-card .cash-icon{
    width:54px !important;
    height:54px !important;
  }

  .free-card strong{
    font-size:clamp(25px,7vw,34px) !important;
  }
}



/* v26 Desktop Header Fix:
   - SVF Buchstabenabstand sauber
   - Desktop-Menü horizontal scrollbar ohne sichtbaren Scrollbalken
   - Sprachfelder und D/L-Felder optisch gleich groß
   - Auto-Helligkeit bleibt im Hintergrund, Auto-Button wird nur ausgeblendet
*/

/* Desktop: SVF nicht zusammengedrückt */
@media (min-width:761px){
  .svf-logo-mark{
    width:92px !important;
    min-width:92px !important;
    flex-basis:92px !important;
    font-size:37px !important;
    letter-spacing:.045em !important;
    transform:skewX(-10deg) translateX(-2px) !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .logo{
    gap:12px !important;
  }
}

/* Desktop-Menü: nicht abschneiden, sondern horizontal bewegbar machen */
@media (min-width:1121px){
  .site-header .container.header-row{
    grid-template-columns:auto minmax(260px,1fr) auto !important;
    gap:18px !important;
  }

  .main-nav{
    justify-self:stretch !important;
    justify-content:flex-start !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:clamp(18px,1.7vw,28px) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 4px !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    cursor:grab !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .main-nav:active{
    cursor:grabbing !important;
  }

  .main-nav::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    min-width:max-content !important;
  }
}

/* Sprach- und Theme-Segmente gleichmäßiger */
.lang-seg button,
.theme-seg button{
  min-width:38px !important;
  height:38px !important;
  padding:0 10px !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:950 !important;
}

/* Auto-Funktion bleibt vorhanden, Auto-Button wird nur optisch ausgeblendet */
.theme-seg button[data-theme-choice="auto"]{
  display:none !important;
}

/* Theme-Segment jetzt nur D/L */
.theme-seg{
  gap:4px !important;
  padding:5px !important;
}

/* Wenn Auto im Hintergrund aktiv ist, soll D/L nicht falsch dominieren.
   Erst wenn der Nutzer D oder L klickt, übernimmt das bestehende JS weiterhin. */
.theme-seg button[data-theme-choice="dark"],
.theme-seg button[data-theme-choice="light"]{
  min-width:38px !important;
}

/* Mobile bleibt möglichst wie v25, nur D/L sichtbar */
@media (max-width:1120px){
  .theme-seg button[data-theme-choice="auto"]{
    display:none !important;
  }

  .lang-seg button,
  .theme-seg button{
    min-width:36px !important;
    height:36px !important;
    font-size:12px !important;
    padding:0 8px !important;
  }
}

@media (max-width:430px){
  .lang-seg button,
  .theme-seg button{
    min-width:32px !important;
    height:34px !important;
    font-size:11px !important;
    padding:0 6px !important;
  }
}



/* v27 Logo + Clean Layout:
   - SVF stärker an Variante 2 angelehnt: einheitlicher grün-türkis Verlauf, saubere Abstände.
   - Texte auf Bildern mobil kleiner.
   - Vorteile-Abschnitt entfernt.
*/

/* SVF Wordmark: nicht zu eng, heller grün/türkis Verlauf wie Variante 2 */
.svf-logo-mark{
  font-family:Impact, "Arial Black", Arial, sans-serif !important;
  font-style:italic !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  color:transparent !important;
  background-image:linear-gradient(90deg,#8DFF8A 0%, #3DF1B2 54%, #24D5E8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  transform:skewX(-8deg) !important;
  filter:drop-shadow(0 0 8px rgba(61,241,178,.12)) !important;
  text-align:center !important;
}

@media (min-width:761px){
  .svf-logo-mark{
    width:94px !important;
    min-width:94px !important;
    flex-basis:94px !important;
    font-size:38px !important;
    letter-spacing:.035em !important;
  }
}

@media (max-width:760px){
  .svf-logo-mark{
    width:64px !important;
    min-width:64px !important;
    flex-basis:64px !important;
    font-size:31px !important;
    letter-spacing:.025em !important;
  }
}

@media (max-width:430px){
  .svf-logo-mark{
    width:58px !important;
    min-width:58px !important;
    flex-basis:58px !important;
    font-size:28px !important;
    letter-spacing:.02em !important;
  }
}

/* Bildtexte/Badges: Desktop leicht ruhiger */
.hero-media .media-caption,
.hero-media .caption,
.image-caption,
.media-caption,
.cash-badge,
.hero-badge,
.before-after .tag,
.slider .tag{
  max-width:calc(100% - 28px) !important;
}

/* Mobile: Texte auf Bildern deutlich kleiner, damit sie das Bild nicht überdecken */
@media (max-width:760px){
  .hero-media .media-caption,
  .hero-media .caption,
  .image-caption,
  .media-caption{
    font-size:13px !important;
    line-height:1.15 !important;
    padding:8px 10px !important;
    border-radius:11px !important;
    max-width:78% !important;
  }

  .cash-badge,
  .hero-badge{
    font-size:11px !important;
    line-height:1.1 !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    max-width:72% !important;
  }

  .before-after .tag,
  .slider .tag{
    font-size:11px !important;
    line-height:1 !important;
    padding:7px 8px !important;
    border-radius:9px !important;
  }

  .slider .cash-badge{
    font-size:11px !important;
    padding:7px 9px !important;
    max-width:70% !important;
  }

  .hero-media h3,
  .hero-media strong,
  .image-card h3,
  .district-card h3{
    font-size:clamp(22px,6vw,34px) !important;
    line-height:1 !important;
  }
}

/* Sehr kleine Geräte: noch kompakter */
@media (max-width:430px){
  .hero-media .media-caption,
  .hero-media .caption,
  .image-caption,
  .media-caption{
    font-size:12px !important;
    padding:7px 9px !important;
    max-width:74% !important;
  }

  .cash-badge,
  .hero-badge,
  .slider .cash-badge{
    font-size:10.5px !important;
    padding:6px 8px !important;
  }
}

/* Der Vorteile-Abschnitt ist entfernt; falls ein Rest via CSS/HTML existiert, ausblenden */
#vorteile{
  display:none !important;
}



/* v29: Nur Abschnitt "Was ist jetzt wichtig?" aus v28 in v27 übernommen; FAQ entfernt. */
#faq,
#fragen,
.faq-section,
.faq,
section[id*="faq"],
section[id*="fragen"]{
  display:none !important;
}

/* Styling für den übernommenen Unfall-wichtig-Abschnitt */
.accident-important-section{
  padding-top:64px !important;
  padding-bottom:72px !important;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--red) 8%, transparent), transparent 34%),
    var(--bg) !important;
}

.accident-important-head{
  max-width:980px !important;
  margin-bottom:24px !important;
}

.accident-important-head .muted{
  max-width:940px !important;
  font-size:18px !important;
  line-height:1.55 !important;
}

.accident-important-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}

.accident-important-card{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  padding:20px !important;
  border:1px solid var(--line) !important;
  border-radius:20px !important;
  background:var(--card) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.07) !important;
}

.accident-num{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--red),var(--red2)) !important;
  color:#fff !important;
  font-family:var(--font-head) !important;
  font-size:22px !important;
  line-height:1 !important;
}

.accident-important-card h3{
  margin:0 0 7px !important;
  font-family:var(--font-head) !important;
  font-size:clamp(24px,2.2vw,32px) !important;
  line-height:.98 !important;
  text-transform:uppercase !important;
  color:var(--text) !important;
}

.accident-important-card p{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1.48 !important;
}

@media (max-width:1050px){
  .accident-important-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  .accident-important-section{
    padding-top:52px !important;
    padding-bottom:58px !important;
  }

  .accident-important-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .accident-important-card{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:13px !important;
    padding:17px !important;
  }

  .accident-num{
    width:48px !important;
    height:48px !important;
    border-radius:15px !important;
    font-size:20px !important;
  }

  .accident-important-card h3{
    font-size:clamp(24px,7vw,32px) !important;
  }

  .accident-important-card p{
    font-size:15px !important;
  }
}



/* v39 Header Mockup:
   Dunkler Header wie im Mockup, sauberes SVF-Logo links,
   BERLIN · KFZ über GUTACHTER rechts daneben.
*/
.site-header{
  background:#090d12 !important;
  border-bottom:1px solid #26313b !important;
  box-shadow:0 10px 28px rgba(0,0,0,.20) !important;
  backdrop-filter:none !important;
}

.site-header .container.header-row,
.header-row{
  height:90px !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:26px !important;
}

.logo.mockup-brand,
.site-header .logo.mockup-brand{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  min-width:max-content !important;
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
  text-decoration:none !important;
}

.logo.mockup-brand::before,
.logo.mockup-brand::after,
.logo.mockup-brand .svf-logo-mark,
.logo.mockup-brand .logo-badge,
.logo.mockup-brand .logo-mark-real,
.logo.mockup-brand .logo-copy-real{
  display:none !important;
  content:none !important;
}

.logo.mockup-brand .svf-logo-image,
.site-header .logo.mockup-brand .svf-logo-image,
header.site-header a.logo.mockup-brand img.svf-logo-image{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:64px !important;
  min-height:64px !important;
  max-width:none !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  background:transparent !important;
  filter:drop-shadow(0 0 14px rgba(42,230,160,.22)) !important;
}

.logo.mockup-brand .svf-logo-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:left !important;
  min-width:max-content !important;
  line-height:1 !important;
}

.logo.mockup-brand .svf-logo-kicker{
  display:block !important;
  color:#eef1f2 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.28em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.logo.mockup-brand .svf-logo-title{
  display:block !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:.92 !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  margin-top:4px !important;
}

.site-header .main-nav,
.site-header .main-nav a{
  color:#b9c1c7 !important;
}

.site-header .main-nav a:hover{
  color:#fff !important;
}

.site-header .seg{
  background:#111821 !important;
  border-color:#293541 !important;
}

.site-header .seg button{
  color:#c9d0d5 !important;
}

.site-header .seg button.active{
  background:#fff !important;
  color:#080c10 !important;
}

.site-header .menu-btn{
  background:#111821 !important;
  border-color:#293541 !important;
  color:#fff !important;
}

@media (max-width:1120px){
  .site-header .container.header-row,
  .header-row{
    height:78px !important;
    gap:14px !important;
  }

  .logo.mockup-brand,
  .site-header .logo.mockup-brand{
    gap:12px !important;
  }

  .logo.mockup-brand .svf-logo-image,
  .site-header .logo.mockup-brand .svf-logo-image,
  header.site-header a.logo.mockup-brand img.svf-logo-image{
    height:48px !important;
    min-height:48px !important;
  }

  .logo.mockup-brand .svf-logo-kicker{
    font-size:10px !important;
    letter-spacing:.20em !important;
  }

  .logo.mockup-brand .svf-logo-title{
    font-size:22px !important;
  }
}

@media (max-width:760px){
  .site-header .container.header-row,
  .header-row{
    height:72px !important;
    gap:10px !important;
  }

  .logo.mockup-brand,
  .site-header .logo.mockup-brand{
    gap:9px !important;
  }

  .logo.mockup-brand .svf-logo-image,
  .site-header .logo.mockup-brand .svf-logo-image,
  header.site-header a.logo.mockup-brand img.svf-logo-image{
    height:42px !important;
    min-height:42px !important;
  }

  .logo.mockup-brand .svf-logo-kicker{
    font-size:8px !important;
    letter-spacing:.16em !important;
  }

  .logo.mockup-brand .svf-logo-title{
    font-size:17px !important;
  }
}

@media (max-width:420px){
  .logo.mockup-brand .svf-logo-image,
  .site-header .logo.mockup-brand .svf-logo-image,
  header.site-header a.logo.mockup-brand img.svf-logo-image{
    height:36px !important;
    min-height:36px !important;
  }

  .logo.mockup-brand .svf-logo-title{
    font-size:15px !important;
  }

  .logo.mockup-brand .svf-logo-kicker{
    font-size:7px !important;
  }
}



/* v40 Header Theme Reset:
   Header nicht mehr schwarz, sondern wieder im normalen Website-Theme.
   SVF-Logo und Mockup-Branding bleiben erhalten.
*/
.site-header{
  background:color-mix(in srgb,var(--surface) 92%,transparent) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  backdrop-filter:blur(16px) !important;
}

.site-header .container.header-row,
.header-row{
  height:78px !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:22px !important;
}

.logo.mockup-brand,
.site-header .logo.mockup-brand{
  gap:16px !important;
}

.logo.mockup-brand .svf-logo-image,
.site-header .logo.mockup-brand .svf-logo-image,
header.site-header a.logo.mockup-brand img.svf-logo-image{
  height:58px !important;
  min-height:58px !important;
  filter:drop-shadow(0 0 11px rgba(42,230,160,.18)) !important;
}

.logo.mockup-brand .svf-logo-kicker{
  color:color-mix(in srgb,var(--text) 72%,var(--muted)) !important;
  font-size:12px !important;
  letter-spacing:.24em !important;
}

.logo.mockup-brand .svf-logo-title{
  color:var(--text) !important;
  font-size:28px !important;
  line-height:.92 !important;
  margin-top:3px !important;
}

.site-header .main-nav,
.site-header .main-nav a{
  color:color-mix(in srgb,var(--text) 82%,transparent) !important;
}

.site-header .main-nav a:hover{
  color:var(--text) !important;
}

.site-header .seg{
  background:var(--surface) !important;
  border-color:var(--line) !important;
}

.site-header .seg button{
  color:var(--muted) !important;
}

.site-header .seg button.active{
  background:var(--text) !important;
  color:var(--bg) !important;
}

.site-header .menu-btn{
  background:var(--surface) !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}

@media (max-width:1120px){
  .site-header .container.header-row,
  .header-row{
    height:72px !important;
    gap:12px !important;
  }

  .logo.mockup-brand,
  .site-header .logo.mockup-brand{
    gap:10px !important;
  }

  .logo.mockup-brand .svf-logo-image,
  .site-header .logo.mockup-brand .svf-logo-image,
  header.site-header a.logo.mockup-brand img.svf-logo-image{
    height:44px !important;
    min-height:44px !important;
  }

  .logo.mockup-brand .svf-logo-kicker{
    font-size:9px !important;
    letter-spacing:.18em !important;
  }

  .logo.mockup-brand .svf-logo-title{
    font-size:19px !important;
  }
}

@media (max-width:760px){
  .site-header .container.header-row,
  .header-row{
    height:68px !important;
    gap:9px !important;
  }

  .logo.mockup-brand .svf-logo-image,
  .site-header .logo.mockup-brand .svf-logo-image,
  header.site-header a.logo.mockup-brand img.svf-logo-image{
    height:38px !important;
    min-height:38px !important;
  }

  .logo.mockup-brand .svf-logo-kicker{
    font-size:8px !important;
    letter-spacing:.15em !important;
  }

  .logo.mockup-brand .svf-logo-title{
    font-size:16px !important;
  }
}



/* v41 Green-Gold Theme:
   Rot wird zu #28D895.
   Rote Verlauf-Icons werden grün.
   Goldene Elemente bleiben über --orange / --orange2 unverändert gold.
*/
:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --red:#28D895 !important;
  --red2:#20BF84 !important;
  --green:#28D895 !important;
  --green2:#20BF84 !important;

  /* Gold bewusst beibehalten */
  --orange:#f7a31f !important;
  --orange2:#ffd063 !important;
}

/* Rote Verlaufselemente jetzt grün */
.btn-red,
.emergency-card .ico,
.cash-badge,
.slider .cash-badge,
.accident-num,
.cash-side-highlight span,
.upload-choice-btn span,
.logo-badge{
  background:linear-gradient(135deg,#28D895,#20BF84) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(40,216,149,.22) !important;
}

/* Icons, die vorher rot als Akzent hatten, jetzt grün */
.service-card .icon,
.cash-item .icon,
.difference-mini span,
.short-placeholder svg,
.cash-side li:before,
.quote b,
.eyebrow,
.section .eyebrow,
.free-card strong,
.step-reset .step-num{
  color:#28D895 !important;
}

.service-card .icon,
.cash-item .icon,
.difference-mini span{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,#28D895 18%, transparent),
      color-mix(in srgb,#20BF84 11%, transparent)
    ) !important;
}

/* Aktive/markierte Elemente vorher rot, jetzt grün */
.tab-btn.active,
.upload-choice-btn:hover{
  border-color:#28D895 !important;
  box-shadow:0 12px 32px rgba(40,216,149,.16) !important;
}

.drop,
.upload-drop-focus{
  border-color:color-mix(in srgb,#28D895 42%,var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,#28D895 8%, transparent),
      color-mix(in srgb,#20BF84 6%, transparent)
    ),
    var(--card) !important;
}

.quote{
  background:linear-gradient(90deg,color-mix(in srgb,#28D895 13%,transparent),transparent) !important;
}

/* "0€ Kosten" bewusst grün */
.zero-cost-title{
  color:#28D895 !important;
}

/* Goldene Elemente explizit gold halten */
.hero h1 .grad,
.cash-sum-icon,
.upload-cash-note span{
  background:linear-gradient(135deg,var(--orange),var(--orange2)) !important;
}

.hero h1 .grad{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.cash-sum-main,
.cash-sum-side,
.cash-side-highlight,
.upload-cash-note{
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--orange) 10%, transparent), transparent 54%),
    var(--card) !important;
}

.cash-sum-icon,
.upload-cash-note span{
  color:#170e0b !important;
  box-shadow:0 16px 36px color-mix(in srgb,var(--orange) 20%, transparent) !important;
}

.upload-cash-note p,
.difference-copy p{
  border-left-color:var(--orange) !important;
}

.stars{
  color:var(--orange) !important;
}



/* v42 Call CTA Red:
   Im Green/Gold-Theme bleibt der Button/Text „Jetzt anrufen“ rot wie vorher.
*/
.btn.call-red-cta,
a.call-red-cta,
.header-cta .call-red-cta,
.sticky-contact .call-red-cta,
.hero-cta .call-red-cta,
.quick-cta .call-red-cta{
  background:linear-gradient(135deg,#ef5f52,#ff9360) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(239,95,82,.25) !important;
  border-color:transparent !important;
}

.btn.call-red-cta:hover,
a.call-red-cta:hover{
  filter:saturate(1.05) !important;
  transform:translateY(-1px) !important;
}

.btn.call-red-cta svg,
a.call-red-cta svg,
.btn.call-red-cta span,
a.call-red-cta span,
.btn.call-red-cta small,
a.call-red-cta small{
  color:#fff !important;
}