/* ==========================================================================
   Universale Dienstleistungen GmbH — Corporate Website
   Markenfarben aus Logo: Dunkelgrün #1e5631, Wiesengrün #7cb342
   ========================================================================== */

:root {
  /* Marke */
  --green-950: #0f2e1b;
  --green-900: #143a20;
  --green-800: #1e5631;
  --green-700: #256b3d;
  --green-600: #2e7d32;
  --lime-600: #5f9531;
  --lime-500: #7cb342;
  --lime-400: #8bc34a;
  --lime-300: #a5d165;

  /* Notfall / Winter */
  --alert: #e11d2a;
  --alert-dark: #b3121d;
  --frost: #3aa0e0;
  --frost-light: #e6f3fb;

  /* Neutral */
  --ink: #16241b;
  --body: #3d4a41;
  --muted: #5f6e64;
  --line: #e2e8e2;
  --paper: #f6f9f5;
  --paper-2: #eef3ec;
  --white: #ffffff;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(20, 58, 32, .06);
  --shadow: 0 12px 34px rgba(20, 58, 32, .10);
  --shadow-lg: 0 26px 60px rgba(20, 58, 32, .16);

  --wrap: 1180px;
  --header-h: 74px;
  --bar-h: 44px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Sora", var(--font);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
section { position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: .82em 1.5em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .2s, color .2s;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--lime-500); color: var(--green-950); box-shadow: 0 8px 22px rgba(124, 179, 66, .38); }
.btn-primary:hover { background: var(--lime-400); box-shadow: 0 12px 30px rgba(124, 179, 66, .5); }
.btn-dark { background: var(--green-800); color: #fff; }
.btn-dark:hover { background: var(--green-700); }
.btn-ghost { background: transparent; color: var(--green-800); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green-600); color: var(--green-700); background: var(--paper); }
.btn-white { background: #fff; color: var(--green-800); }
.btn-white:hover { background: var(--paper-2); }
.btn-call { background: var(--alert); color: #fff; box-shadow: 0 8px 22px rgba(225,29,42,.34); }
.btn-call:hover { background: var(--alert-dark); }
.btn-lg { padding: 1.02em 1.9em; font-size: 1.08rem; }
.btn-block { width: 100%; justify-content: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-600);
  background: var(--paper-2); padding: .45em .95em; border-radius: 999px; margin-bottom: 1.1rem;
}
.eyebrow.on-dark { color: var(--lime-300); background: rgba(255,255,255,.08); }
.lead { font-size: 1.16rem; color: var(--body); }

/* ---------- 24/7 Notfall-Leiste (immer sichtbar) ---------- */
.emergency-bar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, var(--green-950), var(--green-800) 55%, var(--green-700));
  color: #fff; height: var(--bar-h);
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.emergency-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.emergency-tag {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--alert); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .34em .7em; border-radius: 6px;
}
.emergency-bar .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffd43b; box-shadow: 0 0 0 0 rgba(255,212,59,.8); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,212,59,.7)} 70%{box-shadow:0 0 0 9px rgba(255,212,59,0)} 100%{box-shadow:0 0 0 0 rgba(255,212,59,0)} }
.emergency-bar .txt { font-size: .92rem; }
.emergency-bar .txt b { color: #c9e8a0; }
.emergency-bar a.hot { font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.02rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4em; }
.emergency-bar a.hot:hover { color: var(--lime-300); }
.emergency-bar svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 720px) {
  .emergency-bar { height: auto; padding: 7px 0; }
  .emergency-bar .txt { display: none; }
  .emergency-bar .wrap { gap: .7rem; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: var(--bar-h); z-index: 55;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
}
@media (max-width: 720px){ .site-header{ top: 0; } .emergency-bar{ position: relative; } }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 52px; width: auto; }
.brand .bn { display: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a.link {
  font-family: var(--display); font-weight: 500; font-size: .96rem; color: var(--ink);
  padding: .55em .85em; border-radius: 9px; transition: background .18s, color .18s;
}
.nav a.link:hover, .nav a.link.active { background: var(--paper-2); color: var(--green-700); }
.header-cta { display: flex; align-items: center; gap: .6rem; }
.header-cta .btn { padding: .62em 1.15em; font-size: .95rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--green-800); }
.nav-toggle svg { width: 30px; height: 30px; }

@media (max-width: 940px) {
  .header-cta .btn-call span.lbl { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* backdrop-filter macht den Header sonst zum Containing-Block des fixed-Panels
     -> Panel bliebe auf Header-Höhe. Mobil entfernen + Header-Kontext anheben. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; z-index: 100; }
  .emergency-bar { z-index: 90; }
  .header-cta { position: relative; z-index: 110; }
  .nav {
    position: fixed; inset: 0 0 0 auto; height: 100dvh; width: min(84vw, 340px);
    background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 92px 22px 26px; gap: 4px; box-shadow: var(--shadow-lg); overflow-y: auto;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 70;
  }
  .nav.open { transform: translateX(0); }
  .nav a.link { font-size: 1.1rem; padding: .8em .9em; }
  .nav .btn { margin-top: 8px; justify-content: center; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(15,46,27,.45); opacity: 0; visibility: hidden; transition: .28s; z-index: 85; }
  .nav-scrim.show { opacity: 1; visibility: visible; }
  .header-cta .btn.hide-mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--green-950); color: #eaf3ea; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(124,179,66,.28), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(58,160,224,.20), transparent 55%),
    linear-gradient(160deg, var(--green-950), var(--green-900) 60%, #0c2717);
}
.hero-snow { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; padding: 66px 22px 78px; }
.hero h1 { color: #fff; }
.hero h1 .hl { color: var(--lime-400); }
.hero .lead { color: #cfe3d0; max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 1.8rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero-trust .t { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: #d6e6d7; }
.hero-trust .t svg { width: 22px; height: 22px; color: var(--lime-400); flex: none; }

/* Hero-Karte (Notfall/Schnellanfrage) */
.hero-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}
.hero-card .hc-top { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.hero-card .hc-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--alert); display: grid; place-items: center; color: #fff; flex: none; }
.hero-card .hc-icon svg { width: 24px; height: 24px; }
.hero-card h3 { color: #fff; margin: 0; font-size: 1.15rem; }
.hero-card .hc-sub { color: #b9d0ba; font-size: .86rem; }
.hero-card .hc-phone { font-family: var(--display); font-weight: 800; font-size: 1.8rem; color: #fff; letter-spacing: .01em; display: block; margin: .3rem 0 .1rem; }
.hero-card .hc-note { font-size: .82rem; color: #9fbca2; margin-bottom: 1.1rem; }
.hero-card .hc-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.hero-card .hc-mini .m { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; }
.hero-card .hc-mini .m b { color: #fff; font-family: var(--display); font-size: 1.05rem; display: block; }
.hero-card .hc-mini .m span { font-size: .76rem; color: #a8c4aa; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; padding: 40px 22px 54px; }
  .hero-card { order: 2; }
}

/* ---------- Sections generic ---------- */
.section { padding: 84px 0; }
.section.tight { padding: 60px 0; }
.section.paper { background: var(--paper); }
.section.dark { background: var(--green-950); color: #d9e7da; }
.section.dark h2, .section.dark h3 { color: #fff; }
.sec-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.sec-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }
.section.dark .sec-head p { color: #a9c1ab; }

/* ---------- Leistungen Grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.svc .ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: var(--paper-2); color: var(--green-700); }
.svc .ic svg { width: 27px; height: 27px; }
.svc.feature { background: linear-gradient(165deg, var(--green-800), var(--green-950)); color: #d9e7da; border-color: transparent; }
.svc.feature h3 { color: #fff; }
.svc.feature .ic { background: var(--alert); color: #fff; }
.svc.feature .more { color: var(--lime-300); }
.svc h3 { margin-bottom: .4rem; }
.svc p { font-size: .96rem; margin-bottom: 1rem; }
.svc .more { font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--green-700); display: inline-flex; align-items: center; gap: .35em; }
.svc .more svg { width: 16px; height: 16px; transition: transform .2s; }
.svc:hover .more svg { transform: translateX(4px); }
.svc .badge-win { position: absolute; top: 16px; right: 16px; background: var(--frost); color: #fff; font-size: .68rem; font-weight: 700; font-family: var(--display); padding: .3em .6em; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px){ .svc-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .svc-grid { grid-template-columns: 1fr;} }

/* ---------- Einsatzgebiet ---------- */
.region { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.region-map { background: linear-gradient(160deg, var(--paper), var(--paper-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm); }
.region-map svg { width: 100%; height: auto; display: block; }
.region-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; }
.chip { display: inline-flex; align-items: center; gap: .45em; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5em 1em; font-size: .92rem; font-weight: 500; color: var(--ink); }
.chip svg { width: 15px; height: 15px; color: var(--lime-600); }
@media (max-width: 860px){ .region { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Ablauf / Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; position: relative; }
.step .n { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--green-600); line-height: 1; margin-bottom: .5rem; }
.step .n svg { display: block; }
.step h3 { font-size: 1.08rem; }
.step p { font-size: .93rem; margin: 0; color: var(--muted); }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr; } }

/* ---------- KI-Banner ---------- */
.ai-band { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ai-item { display: flex; gap: 14px; align-items: flex-start; }
.ai-item .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(124,179,66,.16); color: var(--lime-300); display: grid; place-items: center; flex: none; }
.ai-item .ic svg { width: 24px; height: 24px; }
.ai-item h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.ai-item p { font-size: .93rem; margin: 0; color: #a9c1ab; }
@media (max-width: 780px){ .ai-band { grid-template-columns: 1fr; } }

/* ---------- CTA-Band ---------- */
.cta-band { background: linear-gradient(135deg, var(--green-800), var(--green-950)); border-radius: var(--radius-lg); padding: 54px 48px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% -20%, rgba(124,179,66,.3), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfe3d0; max-width: 52ch; margin: 0 auto 1.8rem; }
.cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px){ .cta-band { padding: 40px 24px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-950); color: #b7cbb9; padding: 60px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer h4 { color: #fff; font-family: var(--display); font-size: 1rem; margin: 0 0 1rem; letter-spacing: .01em; }
.footer-logo { background: #fff; border-radius: 14px; padding: 12px 14px; display: inline-block; margin-bottom: 1rem; }
.footer-logo img { height: 56px; }
.site-footer a { color: #b7cbb9; transition: color .18s; }
.site-footer a:hover { color: var(--lime-300); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .95rem; }
.footer-contact { display: grid; gap: .7rem; font-size: .95rem; }
.footer-contact .fc { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .fc svg { width: 18px; height: 18px; color: var(--lime-400); flex: none; margin-top: 3px; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: #8aa38d; }
.footer-bottom a { color: #8aa38d; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Floating Aktionen (mobil) ---------- */
.float-actions { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 12px; }
.fab { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-lg); transition: transform .18s; }
.fab:hover { transform: scale(1.07); }
.fab svg { width: 28px; height: 28px; }
.fab.wa { background: #25d366; }
.fab.call { background: var(--alert); }
@media (min-width: 861px){ .float-actions .fab.call { display: none; } }

/* ---------- Page Hero (Unterseiten) ---------- */
.page-hero { background: var(--green-950); color: #d9e7da; padding: 58px 0 62px; position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(800px 400px at 85% -20%, rgba(124,179,66,.22), transparent 60%); }
.page-hero .wrap { position: relative; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: #cfe3d0; max-width: 58ch; font-size: 1.12rem; }
.crumbs { font-size: .86rem; color: #9fbca2; margin-bottom: 1rem; display: flex; gap: .5em; align-items: center; }
.crumbs a:hover { color: var(--lime-300); }
.page-hero.frost { background: linear-gradient(160deg, #0d3350, var(--green-950) 70%); }

/* ---------- Winterdienst spezifisch ---------- */
.win-hero-badge { display:inline-flex; align-items:center; gap:.5em; background: var(--frost); color:#fff; font-family:var(--display); font-weight:700; font-size:.8rem; padding:.4em .9em; border-radius:999px; margin-bottom:1rem; }
.win-hero-badge svg { width: 15px; height: 15px; flex: none; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.split.rev .txt { order: 2; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: 28px; } .split.rev .txt { order: 0; } }
.feature-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .85rem; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; }
.feature-list li svg { width: 22px; height: 22px; color: var(--lime-600); flex: none; margin-top: 2px; }
.feature-list li b { color: var(--ink); font-family: var(--display); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.info-card.frost { background: linear-gradient(160deg, var(--frost-light), #fff); border-color: #cfe6f6; }
.pricing-tiles { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ptile { border:1px solid var(--line); border-radius: var(--radius); padding: 24px; background:#fff; }
.ptile.hi { border-color: var(--green-600); box-shadow: var(--shadow); position: relative; }
.ptile.hi .tag { position:absolute; top:-12px; left: 24px; background: var(--green-600); color:#fff; font-size:.72rem; font-weight:700; font-family:var(--display); padding:.35em .8em; border-radius:6px; text-transform:uppercase; letter-spacing:.06em; }
.ptile h3 { font-size:1.15rem; margin-bottom:.3rem; }
.ptile .pr { font-family:var(--display); font-weight:800; font-size:1.7rem; color: var(--green-700); margin:.3rem 0; }
.ptile .pr small { font-size:.9rem; color: var(--muted); font-weight:500; }
.ptile ul { list-style:none; padding:0; margin: .8rem 0 0; display:grid; gap:.5rem; font-size:.92rem; }
.ptile ul li { display:flex; gap:.5em; align-items:flex-start; }
.ptile ul li svg { width:18px; height:18px; color: var(--lime-600); flex:none; margin-top:3px; }
@media (max-width: 560px){ .pricing-tiles { grid-template-columns: 1fr; } }

/* ---------- Angebotsrechner ---------- */
.calc-wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: start; }
.calc-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.calc-step-head { display:flex; align-items:center; gap:.7rem; margin: 0 0 1.2rem; }
.calc-step-head .sn { width:30px; height:30px; border-radius:50%; background: var(--green-800); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.9rem; flex:none; }
.calc-step-head h3 { margin:0; font-size:1.15rem; }
.field { margin-bottom: 1.15rem; }
.field > label { display:block; font-family: var(--display); font-weight:600; font-size:.92rem; color: var(--ink); margin-bottom:.5rem; }
.field .hint { font-size:.8rem; color: var(--muted); font-weight:400; }
.input, select.input, textarea.input {
  width:100%; font: inherit; font-size:1rem; color: var(--ink); background: var(--paper);
  border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.8em 1em; transition: border-color .18s, box-shadow .18s;
}
.input:focus, select.input:focus, textarea.input:focus { outline:none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(46,125,50,.12); background:#fff; }
.input::placeholder, textarea.input::placeholder { color: var(--muted); opacity: 1; }
textarea.input { min-height: 110px; resize: vertical; }
.opt-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.opt-grid.three { grid-template-columns: repeat(3,1fr); }
.opt {
  position:relative; border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.85em 1em;
  cursor:pointer; transition: border-color .18s, background .18s; display:flex; flex-direction:column; gap:2px; background:#fff;
}
.opt:hover { border-color: var(--lime-500); }
.opt input { position:absolute; opacity:0; }
.opt .ot { font-family:var(--display); font-weight:600; font-size:.95rem; color: var(--ink); }
.opt .od { font-size:.78rem; color: var(--muted); }
.opt.sel { border-color: var(--green-600); background: rgba(46,125,50,.06); box-shadow: 0 0 0 3px rgba(46,125,50,.1); }
.range-row { display:flex; align-items:center; gap: 16px; }
.range-row input[type=range]{ flex:1; accent-color: var(--green-600); height: 6px; }
.range-val { font-family:var(--display); font-weight:800; font-size:1.5rem; color: var(--green-700); min-width: 132px; text-align:right; }
.range-val small { font-size:.85rem; color: var(--muted); font-weight:600; }

.est {
  position: sticky; top: calc(var(--bar-h) + var(--header-h) + 16px);
  background: linear-gradient(165deg, var(--green-800), var(--green-950)); color:#fff;
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg);
}
.est h3 { color:#fff; display:flex; align-items:center; gap:.5em; }
.est .est-sub { color:#b9d0ba; font-size:.88rem; margin-bottom: 1.2rem; }
.est .est-amount { font-family:var(--display); font-weight:800; font-size: 2.7rem; line-height:1; color:#fff; }
.est .est-amount small { font-size:1rem; color: var(--lime-300); font-weight:600; }
.est .est-per { color:#b9d0ba; font-size:.85rem; margin-top:.3rem; }
.est-break { margin: 1.3rem 0; padding: 1.1rem 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); display:grid; gap:.6rem; }
.est-break .er { display:flex; justify-content:space-between; font-size:.9rem; color:#cfe3d0; }
.est-break .er b { color:#fff; font-family:var(--display); text-align:right; }
.est-note { font-size:.76rem; color:#9fbca2; margin-top: 1rem; line-height:1.5; }
.est-ai { display:flex; align-items:center; gap:.5em; font-size:.8rem; color: var(--lime-300); margin-bottom: 1rem; font-family:var(--display); font-weight:600; }
.est-ai svg { width:16px; height:16px; }
@media (max-width: 900px){ .calc-wrap { grid-template-columns: 1fr; } .est { position: static; } }

/* ---------- Kontakt ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-cards { display:grid; gap: 14px; }
.ccard { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; transition: border-color .18s, box-shadow .18s; }
.ccard:hover { border-color: transparent; box-shadow: var(--shadow-sm); }
.ccard .ic { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; flex:none; background: var(--paper-2); color: var(--green-700); }
.ccard.alert .ic { background: var(--alert); color:#fff; }
.ccard.wa .ic { background:#25d366; color:#fff; }
.ccard .ic svg { width:24px; height:24px; }
.ccard .ct-lbl { font-size:.82rem; color: var(--muted); }
.ccard .ct-val { font-family:var(--display); font-weight:700; font-size:1.12rem; color: var(--ink); }
.ccard .ct-sub { font-size:.84rem; color: var(--muted); }
.map-embed { position:relative; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); margin-top: 8px; min-height: 260px; background: linear-gradient(160deg, var(--paper), var(--paper-2)); }
.map-embed iframe { position:relative; z-index:2; width:100%; height: 260px; border:0; display:block; }
.map-fallback { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:var(--green-700); text-align:center; padding:20px; }
.map-fallback svg { width:38px; height:38px; }
.map-fallback b { font-family:var(--display); font-size:1.05rem; color:var(--ink); }
.map-fallback span { font-size:.86rem; color:var(--muted); }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }

/* Formular-Erfolg */
.form-success { display:none; text-align:center; padding: 20px 0; }
.form-success.show { display:block; }
.form-success:focus { outline: none; }
/* Sticky-Leisten nicht über die Meldung schieben */
.form-success, .form-status, .input, .check-row { scroll-margin-top: calc(var(--bar-h) + var(--header-h) + 20px); }
@media (max-width: 720px){ .form-success, .form-status, .input, .check-row { scroll-margin-top: calc(var(--header-h) + 16px); } }
.form-success .ok-ic { width:64px; height:64px; border-radius:50%; background: rgba(46,125,50,.12); color: var(--green-600); display:grid; place-items:center; margin: 0 auto 1rem; }
.form-success .ok-ic svg { width:34px; height:34px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .form-row { grid-template-columns: 1fr; } }
.check-row { display:flex; gap:.6em; align-items:flex-start; font-size:.85rem; color: var(--muted); margin-bottom:1rem; }
.check-row input { margin-top:4px; accent-color: var(--green-600); }

/* Pflichtfeld-Fehler + Sende-Status */
.field-error { display:none; color: var(--alert-dark); font-size:.84rem; font-weight:500; line-height:1.4; margin-top:.4rem; }
.field-error.show { display:block; }
.input.invalid, textarea.input.invalid, select.input.invalid { border-color: var(--alert); background:#fff6f6; }
.input.invalid:focus, textarea.input.invalid:focus, select.input.invalid:focus { border-color: var(--alert); box-shadow: 0 0 0 4px rgba(225,29,42,.14); }
.check-row.invalid > label { color: var(--alert-dark); }
.check-row .field-error { margin-top:.3rem; }

.form-status { display:none; margin-top: 1.1rem; padding: 15px 17px; border-radius: var(--radius-sm); font-size:.95rem; line-height:1.55; }
.form-status.show { display:block; }
.form-status:focus { outline: 3px solid rgba(46,125,50,.35); outline-offset: 2px; }
.form-status.err:focus { outline-color: rgba(225,29,42,.4); }
.form-status.busy { background: var(--paper-2); border:1px solid var(--line); color: var(--ink); }
.form-status.err { background:#fff2f2; border:1px solid #efc3c7; color: var(--alert-dark); }
.form-status .fs-title { font-family: var(--display); font-weight:700; display:block; margin-bottom:.25rem; }
.form-status .fs-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:.9rem; }
.form-status .fs-actions .btn { font-size:.92rem; padding:.62em 1.1em; }
.btn[disabled] { opacity:.62; cursor: progress; }
.btn[disabled]:hover { transform:none; }

/* Anfragenummer aus dem System */
.anfrage-nr { display:inline-block; font-family: var(--display); font-weight:700; color: var(--green-800); background: var(--paper-2); border-radius:8px; padding:.08em .5em; letter-spacing:.02em; }

/* Kontaktdaten-Schritt im Rechner */
.calc-kontakt { border-top:1px solid var(--line); margin-top:1.6rem; padding-top:1.5rem; }

/* Interner Bereich (dezent im Fußbereich) */
.footer-intern { color:#8aa38d; }
.footer-intern:hover { color: var(--lime-300); }

/* Utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.center{text-align:center}
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none} *{scroll-behavior:auto!important} }