/* =====================================================================
   Rückbauhelden Leipzig – gemeinsames Stylesheet
   Wird von index.html, leistungen.html, warum-wir.html, einsatzgebiet.html
   und 404.html genutzt. Alle Design-Tokens stehen in :root.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:rgb(var(--green-rgb) / .18);
}
a{color:inherit;text-decoration:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green);color:#07120a;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:800}
.skip-link:focus{left:0}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin-inline:auto}
section{padding:46px 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;color:var(--green);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.76rem;margin-bottom:12px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);display:inline-block;flex-shrink:0}
h2.section-title{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.2;margin-bottom:12px;font-weight:800;letter-spacing:-.01em}
.section-intro{color:var(--muted);max-width:600px;font-size:1.02rem;line-height:1.65}
.center{text-align:center;margin-inline:auto}
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;
  padding:13px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.btn-primary{background:var(--green);color:#0B0F0C;box-shadow:0 10px 30px rgb(var(--green-rgb) / .3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgb(var(--green-rgb) / .45)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgb(var(--bg-rgb) / .78);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.scrolled{border-color:var(--line);background:rgb(var(--bg-rgb) / .95)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.12rem}
.logo-mark{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;
}
.brand small{display:block;font-size:.66rem;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--muted);font-weight:600;font-size:.9rem;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--green)}
.nav-cta{background:#2e7d32;color:#fff;padding:10px 22px;border-radius:999px;font-weight:800;letter-spacing:.01em;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.nav-cta:hover{color:#fff;background:#36913b}
.nav-cta.active{color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--text);border-radius:2px;transition:.3s}

/* ---------- Hero ---------- */
.hero{
  min-height:82vh;min-height:82svh;display:flex;align-items:center;padding:104px 0 56px;
  background:
    radial-gradient(900px 500px at 80% -10%,rgb(var(--green-rgb) / .14),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgb(var(--green-rgb) / .07),transparent 55%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .86),rgb(var(--bg-rgb) / .93)),
    url('hero.jpg?v=20260827c') center/cover no-repeat,
    var(--bg);
  position:relative;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.hero h1 .hl{color:var(--green)}
.hero p.lead{margin:18px 0 28px;font-size:1.14rem;color:var(--muted);max-width:540px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.hero-trust div{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:600;font-size:.95rem}
.hero-trust svg{flex-shrink:0}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;background:var(--green-soft);
  border:1px solid rgb(var(--green-rgb) / .3);color:var(--green);padding:8px 16px;border-radius:999px;
  font-weight:700;font-size:.85rem;margin-bottom:24px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgb(var(--green-rgb) / .25)}
.hero-visual{position:relative;display:grid;place-items:center}
.hero-logo{
  width:min(380px,84%);aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px var(--line),0 0 70px rgb(var(--green-rgb) / .18);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.hero-logo{animation:none}}

/* ---------- Subpage-Hero (Unterseiten) ---------- */
.subhero{
  padding:104px 0 40px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 85% -20%,rgb(var(--green-rgb) / .16),transparent 60%),
    linear-gradient(180deg,rgb(var(--bg-rgb) / .7),rgb(var(--bg-rgb) / .95)),
    var(--bg-2);
  border-bottom:1px solid var(--line);
}
.subhero h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;max-width:760px}
.subhero h1 .hl{color:var(--green)}
.subhero p.lead{margin-top:14px;font-size:1.08rem;color:var(--muted);max-width:640px}
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;font-weight:600;margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb span{color:var(--green)}

/* ---------- Leistungen (Karten) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;transition:transform .2s,border-color .2s,background .2s;position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);border-color:rgb(var(--green-rgb) / .45);background:var(--bg-3)}
.card-img{display:block;width:calc(100% + 56px);height:142px;object-fit:cover;margin:-32px -28px 22px;background:var(--bg-3)}
.card .ic{
  width:54px;height:54px;border-radius:14px;background:var(--green-soft);
  display:grid;place-items:center;margin-bottom:20px;border:1px solid rgb(var(--green-rgb) / .25)}
.card h3{font-size:1.25rem;margin-bottom:10px;font-weight:800}
.card p{color:var(--muted);font-size:.97rem}
.card .tag{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;color:var(--green);
  font-weight:700;font-size:.85rem;background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:inherit;-webkit-tap-highlight-color:transparent}
.card .tag:hover{color:#7bd06d}
.card .tag .arw{transition:transform .3s ease;display:inline-block}
.card.open .tag .arw{transform:rotate(90deg)}
.card-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .38s ease,opacity .3s ease,margin .38s ease}
.card.open .card-more{max-height:360px;opacity:1;margin-top:14px}
.card-more p{color:var(--muted);font-size:.93rem;margin:0}
.card-more .meta{display:block;margin-top:12px;color:var(--text);font-size:.85rem;font-weight:700;border-left:3px solid var(--green);padding-left:10px}
.cards-cta{display:flex;justify-content:center;margin-top:24px}

/* ---------- Leistungs-Detailblöcke (Unterseite) ---------- */
.detail-section{padding:8px 0 40px}
.detail-block{
  display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line)}
.detail-block:first-child{padding-top:6px}
.detail-block:last-of-type{border-bottom:0;padding-bottom:6px}
.detail-block:nth-child(even) .detail-media{order:2}
.detail-media img{width:100%;height:340px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.detail-text .ic{
  width:54px;height:54px;border-radius:14px;background:var(--green-soft);
  display:grid;place-items:center;margin-bottom:18px;border:1px solid rgb(var(--green-rgb) / .25)}
.detail-text h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;margin-bottom:12px}
.detail-text p{color:var(--muted);font-size:1.02rem;margin-bottom:14px}
.detail-list{list-style:none;margin:18px 0 0;display:grid;gap:10px}
.detail-list li{display:flex;gap:11px;align-items:flex-start;color:var(--text);font-size:.98rem}
.detail-list li svg{flex-shrink:0;margin-top:3px}
.detail-meta{display:block;margin-top:20px;color:var(--text);font-size:.92rem;font-weight:700;border-left:3px solid var(--green);padding-left:12px}
@media (max-width:1024px){
  .detail-block{grid-template-columns:1fr;gap:24px;padding:26px 0}
  .detail-block:nth-child(even) .detail-media{order:0}
  .detail-media img{height:260px}
}

/* ---------- Warum wir ---------- */
.why{background:var(--bg-2);border-block:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:28px}
.why-item{display:flex;gap:16px;align-items:flex-start}
.why-item .num{
  flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--green);color:#0B0F0C;
  display:grid;place-items:center;font-weight:800;font-size:1.15rem}
.why-item h3{font-size:1.12rem;margin-bottom:6px;font-weight:800}
.why-item p{color:var(--muted);font-size:.95rem}

/* Warum-wir Detail-Karten (Unterseite) */
.why-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:28px}
.why-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:transform .2s,border-color .2s}
.why-card:hover{transform:translateY(-5px);border-color:rgb(var(--green-rgb) / .4)}
.why-card .num{
  width:50px;height:50px;border-radius:13px;background:var(--green);color:#0B0F0C;
  display:grid;place-items:center;font-weight:800;font-size:1.25rem;margin-bottom:18px}
.why-card h3{font-size:1.18rem;margin-bottom:10px;font-weight:800}
.why-card p{color:var(--muted);font-size:.97rem}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px;counter-reset:step}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative}
.step .step-num{
  font-size:3rem;font-weight:800;color:var(--green-soft);line-height:1;
  -webkit-text-stroke:1.5px var(--green);color:transparent;margin-bottom:8px}
.step h3{font-size:1.15rem;margin-bottom:8px;font-weight:800}
.step p{color:var(--muted);font-size:.94rem}
.step::after{
  content:"→";position:absolute;top:50%;right:-22px;transform:translateY(-50%);
  color:var(--green);font-size:1.6rem;font-weight:700;z-index:2}
.step:last-child::after{display:none}

/* ---------- Einblicke (Bild-Band) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.gallery-grid figure{
  margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);transition:transform .2s,border-color .2s}
.gallery-grid figure:hover{transform:translateY(-4px);border-color:rgb(var(--green-rgb) / .4)}
.gallery-grid img{width:100%;height:205px;object-fit:cover;display:block;background:var(--bg-3)}
.gallery-grid figcaption{padding:11px 16px;color:var(--muted);font-size:.9rem}
@media (max-width:1024px){.gallery-grid{grid-template-columns:1fr;gap:14px}.gallery-grid img{height:220px}}

/* ---------- Einsatzgebiet ---------- */
.area{background:var(--bg-2);border-block:1px solid var(--line)}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:30px}
.area-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.area-list span{
  background:var(--bg-3);border:1px solid var(--line);padding:9px 16px;border-radius:999px;
  font-size:.9rem;font-weight:600;color:var(--text)}
.area-list span::before{content:"📍 ";font-size:.85rem}
.map-card{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.map-card .ring{
  width:170px;height:170px;border-radius:50%;border:2px dashed rgb(var(--green-rgb) / .5);
  margin:10px auto 24px;display:grid;place-items:center;position:relative}
.map-card .ring .core{width:90px;height:90px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#0B0F0C;font-weight:800;text-align:center;line-height:1.1;font-size:.95rem;box-shadow:0 0 0 10px rgb(var(--green-rgb) / .15)}
.map-card .radius-note{text-align:center;color:var(--muted);font-size:.95rem}
.map-card .radius-note strong{color:var(--text)}

/* ---------- CTA-Band (Unterseiten) ---------- */
.cta-band{background:var(--bg-2);border-block:1px solid var(--line)}
.cta-band .inner{text-align:center;max-width:640px;margin-inline:auto}
.cta-band h2{font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:800;margin-bottom:14px}
.cta-band p{color:var(--muted);font-size:1.05rem;margin-bottom:28px}
.cta-band .hero-actions{justify-content:center}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;margin-top:24px;align-items:start}
.contact-info h3{font-size:1.4rem;margin-bottom:14px;font-weight:800}
.contact-info p{color:var(--muted);margin-bottom:26px}
.contact-line{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.contact-line .ci{width:46px;height:46px;border-radius:12px;background:var(--green-soft);border:1px solid rgb(var(--green-rgb) / .25);display:grid;place-items:center;flex-shrink:0}
.contact-line a,.contact-line span{font-weight:700;font-size:1.05rem}
.contact-line small{display:block;color:var(--muted);font-weight:500;font-size:.82rem}
form{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
label .req{color:var(--green)}
input,select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;color:var(--text);font-size:16px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
textarea{resize:vertical;min-height:110px}
.error-msg{color:#ff7a6b;font-size:.82rem;margin-top:6px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#ff7a6b}
.field.invalid .error-msg{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.consent input{width:auto;margin-top:4px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:14px;text-align:center}
.form-success{
  display:none;background:var(--green-soft);border:1px solid rgb(var(--green-rgb) / .4);color:var(--text);
  border-radius:10px;padding:16px;margin-bottom:18px;font-weight:600}
.form-success.show{display:block}

/* ---------- WhatsApp ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:0;
  background:#25D366;color:#fff;border-radius:999px;padding:14px;box-shadow:0 12px 30px rgba(37,211,102,.4);
  font-weight:700;overflow:hidden;transition:gap .25s,padding .25s}
.wa-float span{max-width:0;white-space:nowrap;overflow:hidden;transition:max-width .25s,margin .25s;opacity:.95}
.wa-float:hover{gap:10px;padding-right:22px}
.wa-float:hover span{max-width:160px;margin-left:2px}
.wa-float svg{flex-shrink:0}

/* ---------- Footer ---------- */
footer{background:var(--bg-0);border-top:1px solid var(--line);padding:46px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:.95rem;max-width:340px}
.foot-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:16px;font-weight:800}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.95rem;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.impressum{background:var(--bg-2);border:1px dashed var(--line);border-radius:12px;padding:22px 24px;margin-bottom:30px;color:var(--muted);font-size:.9rem}
.impressum h4{color:var(--text);font-size:1rem;margin-bottom:10px}
.impressum .ph{color:var(--green);font-style:italic}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.foot-bottom a:hover{color:var(--green)}
.credit{text-align:center;margin-top:18px;font-size:.72rem;color:rgba(170,176,186,.6);letter-spacing:.04em}

/* ---------- Modal (Datenschutz) ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);padding:24px 16px}
.modal.open{display:flex}
.modal-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  max-width:780px;width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  overflow:hidden;box-shadow:var(--shadow)}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 30px;border-bottom:1px solid var(--line)}
.modal-header h2{font-size:1.5rem;font-weight:800}
.modal-close{width:42px;height:42px;flex-shrink:0;border:0;border-radius:10px;background:var(--bg-3);
  color:var(--text);font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.modal-close:hover{background:var(--green);color:#0B0F0C}
.modal-body{padding:24px 30px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-body .stand{color:var(--muted);font-size:.85rem;margin-bottom:20px}
.modal-body h3{color:var(--green);font-size:1.05rem;margin:24px 0 8px;font-weight:800}
.modal-body h3:first-of-type{margin-top:0}
.modal-body p{color:var(--muted);font-size:.94rem;margin-bottom:12px;line-height:1.7}
.modal-body ul{color:var(--muted);font-size:.94rem;margin:0 0 12px 22px;line-height:1.7}
.modal-body li{margin-bottom:6px}
.modal-body strong{color:var(--text)}
.modal-body a{color:var(--green)}
.modal-body h4{color:var(--text);font-size:.98rem;margin:18px 0 6px;font-weight:800}
.modal-body .legal-meta{color:var(--text);font-weight:700}
@media (max-width:560px){.modal-header{padding:16px 20px}.modal-body{padding:20px}}

/* ---------- Cookie-Banner & Einstellungen ---------- */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:560px;margin-inline:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;display:none}
.cookie-banner.show{display:block}
.cookie-banner h3{font-size:1.1rem;font-weight:800;margin-bottom:8px}
.cookie-banner p{color:var(--muted);font-size:.9rem;margin-bottom:16px;line-height:1.6}
.cookie-banner p a{color:var(--green);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:12px 22px;font-size:.95rem;flex:1 1 auto;justify-content:center}
/* Ghost-Buttons im Cookie-Bereich klar sichtbar machen (höherer Kontrast) */
.cookie-actions .btn-ghost{
  background:var(--bg-3);border-color:rgba(255,255,255,.28);color:var(--text);font-weight:700}
.cookie-actions .btn-ghost:hover{border-color:var(--green);color:var(--green);background:var(--bg-3)}
.cookie-toggle{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.cookie-toggle .ct-text h4{margin:0 0 4px;color:var(--text);font-size:.98rem;font-weight:800}
.cookie-toggle .ct-text p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}
.switch{position:relative;flex-shrink:0;width:48px;height:27px;margin-top:2px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#3a414c;border-radius:999px;transition:.25s;cursor:pointer}
.slider::before{content:"";position:absolute;height:21px;width:21px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider::before{transform:translateX(21px)}
.switch input:disabled + .slider{opacity:.6;cursor:not-allowed}
.switch input:focus-visible + .slider{box-shadow:0 0 0 3px var(--green-soft)}
@media (max-width:560px){.cookie-banner{padding:18px 18px calc(18px + env(safe-area-inset-bottom))}.cookie-actions .btn{flex:1 1 100%}}

/* ---------- Reveal ---------- */
/* Ohne JavaScript greift der Beobachter nicht – dann muessen die Abschnitte
   sichtbar bleiben. Die Klasse js setzt ein kurzes Skript im <head>. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav{height:64px}
  header.scrolled,header{backdrop-filter:blur(12px)}
  .nav-links{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--bg-2);
    border-bottom:1px solid var(--line);padding:14px 22px calc(20px + env(safe-area-inset-bottom));
    gap:2px;align-items:stretch;
    transform:translateY(-130%);transition:transform .3s ease;box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 4px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav-links a.nav-cta{border-bottom:0;text-align:center;margin-top:10px;padding:15px 20px}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hero{min-height:auto;padding:96px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-visual{order:-1}
  .hero-logo{width:min(230px,60%)}
  .hero-badge,.hero p.lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-trust{justify-content:center;gap:12px 22px}
  .subhero{padding:92px 0 32px}
  .subhero p.lead{margin-inline:0}
  .area-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .step::after{display:none}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  section{padding:48px 0}
  .wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .container{width:90%}
  section{padding:40px 0}
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(1.95rem,8.5vw,2.6rem)}
  .hero p.lead{font-size:1.05rem;margin-top:18px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-trust{flex-direction:column;align-items:center;gap:10px}
  .row2{grid-template-columns:1fr;gap:0}
  .cards,.steps,.why-grid{gap:16px}
  .card{padding:26px 22px}
  .card-img{width:calc(100% + 44px);height:150px;margin:-26px -22px 18px}
  form{padding:24px 20px}
  .map-card{padding:28px 22px}
  .map-card .ring{width:140px;height:140px}
  .map-card .ring .core{width:78px;height:78px;font-size:.85rem}
  .contact-line .ci{width:42px;height:42px}
  .foot-bottom{flex-direction:column;gap:8px}
  .btn{padding:15px 22px}
}

/* =====================================================================
   Einsatzgebiet – professionelle Darstellung + Google-Maps (Consent)
   ===================================================================== */
.coverage{display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:stretch;margin-top:10px}
.map-wrap{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg-3);min-height:460px}
.map-wrap iframe{display:block;width:100%;height:100%;min-height:460px;border:0}
/* Consent-Overlay (Karte lädt erst nach Einwilligung) */
.map-consent{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:34px;
  background:
    radial-gradient(700px 360px at 50% 0%,rgb(var(--green-rgb) / .12),transparent 65%),
    linear-gradient(180deg,var(--bg-3),var(--bg-2));
}
.map-consent .mc-ic{
  width:64px;height:64px;border-radius:18px;background:var(--green-soft);border:1px solid rgb(var(--green-rgb) / .3);
  display:grid;place-items:center;margin-bottom:4px}
.map-consent h3{font-size:1.25rem;font-weight:800}
.map-consent p{color:var(--muted);font-size:.94rem;max-width:440px;line-height:1.6}
.map-consent p a{color:var(--green);text-decoration:underline}
.map-consent .mc-check{display:flex;gap:9px;align-items:center;font-size:.85rem;color:var(--muted);margin-top:2px}
.map-consent .mc-check input{width:auto;margin:0}
.map-consent .btn{margin-top:6px}

/* Info-Karte neben der Karte */
.coverage-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.coverage-card h2{font-size:1.5rem;font-weight:800;margin-bottom:8px}
.coverage-card .sub{color:var(--muted);font-size:.97rem;margin-bottom:22px}
.cov-points{display:grid;gap:18px;margin-bottom:26px}
.cov-point{display:flex;gap:14px;align-items:flex-start}
.cov-point .ci{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--green-soft);
  border:1px solid rgb(var(--green-rgb) / .25);display:grid;place-items:center}
.cov-point h4{font-size:1.02rem;font-weight:800;margin-bottom:3px}
.cov-point p{color:var(--muted);font-size:.9rem;line-height:1.55}
.coverage-card .btn{justify-content:center;margin-top:auto}

/* Kennzahlen-Streifen */
.area-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:28px}
.area-stat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;text-align:center;transition:transform .2s,border-color .2s}
.area-stat:hover{transform:translateY(-4px);border-color:rgb(var(--green-rgb) / .4)}
.area-stat .big{font-size:1.85rem;font-weight:800;color:var(--green);line-height:1.1}
.area-stat .lbl{font-size:1.02rem;font-weight:800;margin-top:6px}
.area-stat p{color:var(--muted);font-size:.86rem;margin-top:5px;line-height:1.5}

/* Orte gruppiert */
.places{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.place-group{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.place-group h3{font-size:1.12rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.place-group h3 svg{flex-shrink:0}
.place-group .pg-sub{color:var(--muted);font-size:.88rem;margin-bottom:16px}
.place-group .area-list{margin-top:0}

@media (max-width:1024px){
  .coverage{grid-template-columns:1fr;gap:22px}
  .map-wrap,.map-wrap iframe{min-height:360px}
  .places{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  .map-wrap,.map-wrap iframe{min-height:320px}
  .map-consent{padding:26px 20px}
  .coverage-card{padding:26px 22px}
}

.mc-fallback{color:var(--muted);font-size:.84rem;text-decoration:underline;margin-top:2px;transition:color .2s}
.mc-fallback:hover{color:var(--green)}

/* ---------- Laufband (Leistungen & Region) ---------- */
.marquee{
  background:var(--green);color:#07120a;overflow:hidden;padding:11px 0;
  border-block:1px solid rgba(0,0,0,.14);
}
.marquee-track{
  display:flex;gap:2.6rem;white-space:nowrap;width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee-track span{
  display:inline-flex;align-items:center;gap:2.6rem;
  font-weight:600;font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;
}
.marquee-track span::after{content:"\00b7";color:rgba(7,18,10,.42)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}

/* ---------- Statusmeldung Cookie-Einstellungen ---------- */
.consent-status{
  margin-top:10px;font-size:.9rem;color:var(--green);font-weight:700;min-height:1.2em;
}
.cookie-banner:focus{outline:2px solid var(--green);outline-offset:3px}

/* =====================================================================
   AUSBAUSTUFE 03.08.2026 – Typografie, Raster, Abstände, Feinschliff
   Übernimmt Schrift, Farben und Abstandsskala aus dem Design-System v2
   der Marke (Poppins, #58A642, 8er-Raster), damit Website und
   Social-Media-Auftritt identisch wirken.
   Dieser Block steht bewusst am Dateiende und überschreibt die
   Grundregeln oben.
   ===================================================================== */

/* ---------- Schrift: lokal eingebunden, kein externer Abruf ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/poppins-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Gestaltungswerte ---------- */
:root{
  /* Farben nach Design-System v2 */
  --bg:#181C20;
  --bg-2:#1E2328;
  --bg-3:#252B31;
  --green:#58A642;          /* Markengrün, Kontrast 5,7:1 auf --bg */
  --green-rgb:88 166 66;    /* Kanäle für Transparenzstufen */
  --bg-rgb:24 28 32;
  --bg-0:#13171B;           /* tiefste Ebene: Fußzeile */
  --green-bright:#6FBF56;   /* Hover und Fokus */
  --green-dark:#478936;
  --green-soft:rgba(88,166,66,.12);
  --text:#F4F5F3;
  --muted:#AAB4B6;
  --faint:#8B959B;
  --line:rgba(244,245,243,.10);
  --line-strong:rgba(244,245,243,.18);

  /* Abstandsskala – 8er-Raster, andere Werte sind nicht vorgesehen */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:64px; --s9:72px; --s10:96px;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 48px rgba(0,0,0,.42);
  --shadow-soft:0 8px 24px rgba(0,0,0,.28);
  --maxread:64ch;           /* Lesebreite für Fließtext */
}

/* ---------- Grundtypografie ---------- */
body{
  font-family:'Poppins','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;line-height:1.7;letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
}
h1,h2,h3,h4{font-family:inherit;text-wrap:balance;letter-spacing:-.015em}
h1{font-weight:700;line-height:1.12}
h2{font-weight:700;line-height:1.16}
h3{font-weight:600;line-height:1.28;letter-spacing:-.005em}
p{text-wrap:pretty}

.hero h1{font-size:clamp(2.15rem,5.2vw,3.7rem);font-weight:700;letter-spacing:-.025em}
h2.section-title{font-size:clamp(1.65rem,3.3vw,2.45rem);margin-bottom:var(--s2)}
.subhero h1{font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-.022em}

.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:var(--s2);gap:12px;
}
.eyebrow::before{width:26px;height:2px}

/* Fließtext: begrenzte Zeilenlänge, bündige Blockform mit Silbentrennung */
.hero p.lead,.subhero p.lead,.section-intro,.detail-text p,.coverage-card p,.why-card p{
  max-width:var(--maxread);
}
.hero p.lead,.subhero p.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.6;color:var(--muted)}
.section-intro{font-size:1.02rem;line-height:1.65;color:var(--muted)}

/* Blocksatz erst ab ausreichender Spaltenbreite – darunter entstehen Löcher */
@media (min-width:820px){
  .hero p.lead,.subhero p.lead,.section-intro,.detail-text p,.modal-body p{
    text-align:justify;text-justify:inter-word;
    hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;
  }
  .section-intro.center,.center .section-intro{text-align:center;hyphens:manual}
}

/* ---------- Rhythmus und Freifläche ---------- */
section{padding:var(--s9) 0}
.subhero{padding:calc(74px + var(--s9)) 0 var(--s7)}
section+section{padding-top:var(--s8)}
.cards,.steps,.gallery-grid{margin-top:var(--s6)}
.cards-cta{margin-top:var(--s6)}
h2.section-title+.section-intro{margin-top:0}

/* ---------- Kopfzeile ---------- */
#header{backdrop-filter:saturate(140%) blur(10px)}
.nav-links a{font-weight:500;letter-spacing:.005em}
.nav-links a.active{color:var(--green)}
.nav-cta{background:var(--green);color:#0B0F0C;font-weight:700;letter-spacing:.01em}
.nav-cta:hover{background:var(--green-bright);color:#0B0F0C}
.brand span{font-weight:700;letter-spacing:-.02em}
.brand small{letter-spacing:.22em;font-weight:500}

/* ---------- Schaltflächen ---------- */
.btn{
  font-weight:600;letter-spacing:.01em;border-radius:999px;
  padding:14px 26px;transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--green);color:#0B0F0C;font-weight:700;box-shadow:var(--shadow-soft)}
.btn-primary:hover{background:var(--green-bright);color:#0B0F0C;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--green);color:var(--text);transform:translateY(-1px)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green-bright);outline-offset:3px;border-radius:6px;
}

/* ---------- Karten: gleiche Höhe, bündige Kanten ---------- */
.cards{gap:var(--s3);align-items:stretch}
.card{
  display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4) var(--s4) var(--s5);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:rgba(88,166,66,.42);background:var(--bg-3)}
.card-img{height:150px;margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  width:calc(100% + var(--s4) * 2);border-radius:var(--radius) var(--radius) 0 0}
.card h3{font-size:1.16rem;margin:var(--s2) 0 var(--s1)}
.card p{color:var(--muted);font-size:.96rem;line-height:1.62;margin-top:auto}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(88,166,66,.22)}

/* ---------- Ablaufschritte ---------- */
.steps{gap:var(--s3)}
.step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);display:flex;flex-direction:column}
.step .step-num{
  font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--green);
  margin-bottom:var(--s2);
}
.step h3{font-size:1.06rem;margin-bottom:var(--s1)}
.step p{color:var(--muted);font-size:.94rem;line-height:1.6}

/* ---------- Bildstrecke ---------- */
.gallery-grid{gap:var(--s3)}
.gallery-grid figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);display:flex;flex-direction:column}
.gallery-grid img{height:230px}
.gallery-grid figcaption{padding:var(--s2) var(--s3) var(--s3);color:var(--muted);
  font-size:.92rem;font-weight:500;margin-top:auto}

/* ---------- Laufband ---------- */
.marquee{padding:13px 0;border-block:1px solid rgba(0,0,0,.16)}
.marquee-track span{font-weight:500;font-size:.86rem;letter-spacing:.19em;color:#0B0F0C}
.marquee-track span::after{color:rgba(11,15,12,.38)}

/* ---------- Formular ---------- */
label{font-weight:600;font-size:.92rem;letter-spacing:.005em}
input,select,textarea{
  font-family:inherit;font-size:.98rem;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px solid var(--line-strong);padding:13px 15px;color:var(--text);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
.field{margin-bottom:var(--s3)}
.form-note{color:var(--faint);font-size:.86rem}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--line);padding-top:var(--s8);padding-bottom:var(--s5)}
footer h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);
  font-weight:700;margin-bottom:var(--s2)}
.foot-col a,.foot-brand p{color:var(--muted);font-size:.95rem}
.foot-col a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--line);margin-top:var(--s6);padding-top:var(--s3);
  color:var(--faint);font-size:.86rem}
.credit{color:var(--faint);font-size:.82rem;margin-top:var(--s2)}

/* ---------- Dialoge ---------- */
.modal-card{border-radius:var(--radius);border:1px solid var(--line-strong)}
.modal-header h2{font-size:1.3rem;letter-spacing:-.01em}
.modal-body h3{font-size:1.02rem;margin:var(--s4) 0 var(--s1);color:var(--text)}
.modal-body p,.modal-body li{color:var(--muted);font-size:.95rem;line-height:1.68}
.modal-body .stand{color:var(--faint);font-size:.85rem;margin-bottom:var(--s3)}
.cookie-banner{border-radius:var(--radius);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.cookie-banner h3{font-size:1.05rem;margin-bottom:var(--s1)}
.cookie-banner p{color:var(--muted);font-size:.92rem;line-height:1.6}

/* ---------- Feinheiten ---------- */
::selection{background:rgba(88,166,66,.32);color:var(--text)}
.hl{color:var(--green)}
.breadcrumb{color:var(--faint);font-size:.86rem;margin-bottom:var(--s3)}
.breadcrumb a{color:var(--muted)}
hr,.divider{border-color:var(--line)}

@media (max-width:900px){
  section{padding:var(--s7) 0}
  .subhero{padding:calc(74px + var(--s6)) 0 var(--s6)}
  .cards,.steps,.gallery-grid{margin-top:var(--s5)}
}
@media (max-width:560px){
  .btn{padding:13px 22px}
  .card{padding:var(--s3) var(--s3) var(--s4)}
  .card-img{margin:calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);width:calc(100% + var(--s3) * 2)}
}

/* ---------- Korrekturen am Raster ---------- */
/* Hero lief bisher über die volle Fensterbreite, weil .hero-grid die
   Containerbreite überschrieb – Text klebte am linken Rand. */
.container.hero-grid{width:min(1140px,92%);margin-inline:auto}
/* Kartenbilder randabfallend: img{max-width:100%} hat den Überhang gekappt */
.card-img{max-width:none}

/* ---------- Kontaktseite ---------- */
.trust-list{list-style:none;margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line)}
.trust-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--s2);
  color:var(--muted);font-size:.95rem;line-height:1.6}
.trust-list li:last-child{margin-bottom:0}
.trust-list svg{flex-shrink:0;margin-top:4px}
.trust-list strong{color:var(--text);font-weight:600}
@media (min-width:1000px){
  .contact-grid > div:first-child{position:sticky;top:104px}
}

/* ---------- Startseite: Abstand zwischen Leistungen und Abschluss ---------- */
#leistungen{padding-bottom:var(--s7)}
#anfrage{padding-top:var(--s7)}

/* ---------- Icons: folgen dem Markengrün aus dem Design-System ----------
   Vorher stand die alte Farbe #5cbb4f als stroke-Attribut in jedem SVG.
   Das Attribut bleibt als currentColor-Rückfall stehen, die Klasse gewinnt. */
.i-green{stroke:var(--green)}

/* ---------- Weiterführende Kacheln unter den Leistungskarten ----------
   Bewusst anders gebaut als die Leistungskarten darüber: das Bild trägt die
   ganze Fläche, der Text liegt auf einer eigenen dunklen Platte am unteren
   Rand. Die Platte ist nötig, weil sich sonst die Lesbarkeit danach richtet,
   welche Bildstelle zufällig darunter liegt – bei hellen Motiven fiel der
   Kontrast der Rubrik auf 1,8:1. */
.teasers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s7);
}
.teaser{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  min-height:330px;border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow-soft);text-decoration:none;color:var(--text);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.teaser img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
/* leichter Gesamtschleier, damit die drei Motive zusammen ruhig wirken */
.teaser-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgb(var(--bg-rgb) / .20), rgb(var(--bg-rgb) / .38));
}
/* Textplatte: ab 26 % praktisch deckend, darüber ein kurzer weicher Auslauf */
.teaser-body{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s6) var(--s4) var(--s4);
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / 0) 0%,
    rgb(var(--bg-rgb) / .78) 14%,
    rgb(var(--bg-rgb) / .97) 24%,
    rgb(var(--bg-rgb) / 1) 38%,
    rgb(var(--bg-rgb) / 1) 100%);
}
.teaser-kicker{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-bright);
}
.teaser-title{font-size:1.28rem;font-weight:600;letter-spacing:-.012em;line-height:1.28}
.teaser-line{color:var(--muted);font-size:.94rem;line-height:1.55;max-width:34ch}
.teaser-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-size:.92rem;font-weight:600;color:var(--text);
}
.teaser-go svg{transition:transform .22s ease;stroke:var(--green-bright)}
.teaser:hover{transform:translateY(-4px);border-color:rgb(var(--green-rgb) / .42);box-shadow:var(--shadow)}
.teaser:hover img{transform:scale(1.05)}
.teaser:hover .teaser-go svg{transform:translateX(4px)}
.teaser:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px}
@media (max-width:900px){
  .teasers{grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s6)}
  .teaser{min-height:260px}
}

/* ============================================================================
   FEINSCHLIFF – 05.08.2026
   Bildführung, Seitenköpfe der Unterseiten, Tiefe und Zustände.
   Additive Ebene: alles hier überschreibt bewusst die Regeln weiter oben.
   ============================================================================ */

/* ---------- 1. Seitenköpfe der Unterseiten ----------
   Aufbau wie auf der Startseite: Motiv, darüber ein Grünschleier und ein
   Abdunkler, damit die Schrift auch über hellen Bildstellen sicher über der
   AA-Schwelle bleibt. Das Motiv kommt je Seite über --shot. */
.subhero{
  --shot:none;
  position:relative;overflow:hidden;
  padding:calc(74px + var(--s9)) 0 var(--s9);
  background:
    radial-gradient(1000px 480px at 88% -25%, rgb(var(--green-rgb) / .16), transparent 62%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .88), rgb(var(--bg-rgb) / .96)),
    var(--shot) center/cover no-repeat,
    var(--bg-2);
  border-bottom:1px solid var(--line);
}
.subhero > .container{position:relative;z-index:1}
/* Weicher Übergang in die Seitenfläche statt harter Kante */
.subhero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg));
}
.subhero h1{font-size:clamp(2.05rem,4.6vw,3.3rem);letter-spacing:-.028em;max-width:20ch}
.subhero p.lead{margin-top:var(--s3);max-width:60ch}
.subhero .eyebrow{margin-bottom:var(--s2)}

/* Motiv je Seite – keins doppelt, keins, das weiter unten auf derselben
   Seite noch einmal in voller Größe auftaucht. */
.subhero--leistungen   {--shot:url('hero.jpg?v=20260827c')}
.subhero--warum        {--shot:url('einblick-besenrein.jpg?v=20260827c')}
.subhero--einsatzgebiet{--shot:url('leistung-abbruch.jpg?v=20260827c')}
.subhero--kontakt      {--shot:url('einblick-rueckbau.jpg?v=20260827c')}

/* ---------- 2. Startseiten-Hero: Motiv wird sichtbar, Text bleibt lesbar ----------
   Vorher lag ein flächiger Schleier mit 86–93 % über dem Foto, das Bild war
   praktisch nicht zu erkennen. Jetzt läuft der Abdunkler diagonal: dunkel auf
   der Textseite, offen auf der Bildseite. */
.hero{
  background:
    radial-gradient(900px 520px at 78% -10%, rgb(var(--green-rgb) / .14), transparent 60%),
    linear-gradient(100deg,
      rgb(var(--bg-rgb) / .96) 0%,
      rgb(var(--bg-rgb) / .90) 40%,
      rgb(var(--bg-rgb) / .66) 100%),
    url('hero.jpg?v=20260827c') center/cover no-repeat,
    var(--bg);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgb(var(--bg-rgb) / .55));
}
.hero-grid{position:relative;z-index:1}
@media (max-width:900px){
  /* Einspaltig steht der Text über der gesamten Breite – dann flächig abdunkeln */
  .hero{
    background:
      radial-gradient(700px 420px at 80% -10%, rgb(var(--green-rgb) / .13), transparent 62%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / .93), rgb(var(--bg-rgb) / .96)),
      url('hero.jpg?v=20260827c') center/cover no-repeat,
      var(--bg);
  }
}

/* ---------- 3. Bild und Text auf gleicher Höhe ----------
   Die Bilder saßen mittig neben der Textspalte und waren deutlich kleiner.
   Jetzt füllt das Bild die Spalte: gleiche Ober- und Unterkante wie der Text. */
.detail-block{align-items:stretch;gap:var(--s6);padding:var(--s7) 0}
.detail-media{position:relative;display:flex;min-height:100%}
.detail-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  min-height:clamp(300px,26vw,460px);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
/* Feine Innenkante, damit helle Motive nicht ausfransen */
.detail-media::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.detail-text{display:flex;flex-direction:column;justify-content:center}
.detail-text h2{font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:700;margin-bottom:var(--s2)}
.detail-text .ic{margin-bottom:var(--s3)}
.detail-list{margin-top:var(--s3);gap:var(--s1)}
.detail-meta{
  margin-top:var(--s4);border-left:2px solid var(--green);padding:var(--s1) 0 var(--s1) var(--s2);
  font-weight:600;color:var(--text);background:linear-gradient(90deg,var(--green-soft),transparent 70%);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
@media (max-width:1024px){
  .detail-block{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0}
  .detail-media img{height:auto;min-height:0;aspect-ratio:4/3}
}

/* ---------- 4. Flächen: Tiefe statt Rahmen ---------- */
.card,.why-card,.step,.gallery-grid figure,.area-stat,.map-card{
  background:linear-gradient(180deg, var(--bg-2), rgb(var(--bg-rgb) / .55));
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.card{overflow:hidden}
.card-img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.card:hover{transform:translateY(-4px);border-color:rgb(var(--green-rgb) / .38);box-shadow:var(--shadow)}
.card:hover .card-img{transform:scale(1.045)}
.why-card:hover,.area-stat:hover{transform:translateY(-4px);border-color:rgb(var(--green-rgb) / .38)}

/* Bildstrecke: Zoom beim Überfahren, Bildunterschrift ruhiger */
.gallery-grid figure{overflow:hidden}
.gallery-grid img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.gallery-grid figure:hover{transform:none;border-color:rgb(var(--green-rgb) / .38);box-shadow:var(--shadow)}
.gallery-grid figure:hover img{transform:scale(1.05)}
.gallery-grid figcaption{
  font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);
  padding:var(--s2) var(--s3);
}

/* Ablaufschritte: Pfeil durch eine feine Verbindungslinie ersetzt */
.step::after{
  content:"";width:var(--s3);height:1px;right:calc(var(--s3) * -1);top:50%;
  background:linear-gradient(90deg,var(--line-strong),transparent);
  transform:none;
}
.step .step-num{color:var(--green);-webkit-text-stroke:0}

/* ---------- 5. Einsatzgebiet: Emoji durch Markenpunkt ersetzt ---------- */
.area-list span{display:inline-flex;align-items:center;gap:9px}
.area-list span::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgb(var(--green-rgb) / .18);flex:none;
}
.map-card .ring{border-color:rgb(var(--green-rgb) / .42)}

/* ---------- 6. Laufband: leiser, aber weiterhin grün ---------- */
.marquee{
  padding:11px 0;border-block:1px solid rgb(var(--bg-rgb) / .22);
  background:linear-gradient(180deg,var(--green),var(--green-dark));
}
.marquee-track span{font-weight:600;font-size:.8rem;letter-spacing:.22em;color:#0B0F0C}
.marquee-track span::after{color:rgb(var(--bg-rgb) / .42)}

/* ---------- 7. CTA-Band ---------- */
.cta-band{
  background:
    radial-gradient(760px 380px at 50% 0%, rgb(var(--green-rgb) / .10), transparent 68%),
    var(--bg-2);
}
.cta-band h2{font-weight:700;letter-spacing:-.02em}
.cta-band p{max-width:56ch;margin-inline:auto}

/* ---------- 8. Fußzeile ---------- */
footer h4,.foot-col h4{font-size:.72rem;letter-spacing:.22em;font-weight:700}
.foot-brand p{max-width:36ch}

/* ---------- 9. Bewegung ----------
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine
   Animationen mehr – das betrifft auch das Laufband, das in der
   Barrierefreiheitserklärung als Einschränkung benannt ist. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- 10. Lesbarkeit über den Motiven ----------
   Gemessen wurde das hellste Hintergrundpixel unter jedem Textelement.
   Brotkrümel und Rubrik lagen über den Fotos unter 4,5:1 und sind deshalb
   eine Stufe heller gesetzt. */
.subhero .breadcrumb,
.subhero .breadcrumb a{color:var(--muted)}
.subhero .breadcrumb a:hover{color:var(--green-bright)}
.subhero .breadcrumb span{color:var(--green-bright)}
.subhero .eyebrow{color:var(--green-bright)}
.subhero .eyebrow::before{background:var(--green-bright)}
.subhero h1{font-weight:700}

/* ---------- 11. Überschriftenhierarchie vereinheitlicht ----------
   Vorher standen 800 und 900 gemischt neben der v2-Vorgabe (h2 700, h3 600). */
.detail-text h2,.cta-band h2,.why-item h3,.why-card h3,.step h3,.contact-info h3{
  font-weight:600;letter-spacing:-.01em;
}
.detail-text h2,.cta-band h2{font-weight:700}

/* Badge im Hero: eigene dunkle Fläche statt Grünschleier – dadurch hängt die
   Lesbarkeit nicht mehr davon ab, welche Bildstelle darunter liegt. */
.hero-badge{
  color:var(--green-bright);
  background:rgb(var(--bg-rgb) / .62);
  border:1px solid rgb(var(--green-rgb) / .34);
  backdrop-filter:blur(6px);font-weight:600;font-size:.82rem;letter-spacing:.02em;
}
.hero-badge .dot{background:var(--green-bright);box-shadow:0 0 0 4px rgb(var(--green-rgb) / .22)}

/* ---------- 12. Bündige Blockform durchgängig ----------
   Auf Wunsch stehen auch die Einleitungen wieder im Blocksatz. Damit dabei
   keine Löcher zwischen den Wörtern entstehen, trennt der Browser früher und
   an mehr Stellen: kürzere Restsilben, mehr Trennungen in Folge erlaubt. */
@media (min-width:820px){
  .hero p.lead,.subhero p.lead{
    text-align:justify;text-justify:inter-word;
    hyphens:auto;-webkit-hyphens:auto;
    hyphenate-limit-chars:6 3 3;hyphenate-limit-lines:3;
    text-wrap:wrap;
  }
  .hero p.lead,.subhero p.lead,.section-intro,.detail-text p,.modal-body p,.legal-text p{
    word-spacing:-.01em;
  }
}

/* ---------- 13. Rhythmus zwischen Leistungen und Abschluss ---------- */
#leistungen{padding-bottom:var(--s6)}
#anfrage{padding-top:var(--s6)}

/* Schritte: Überschriften auf gemeinsamer Grundlinie, auch wenn eine umbricht */
.step h3{min-height:calc(1.28em * 2);display:flex;align-items:flex-start}
@media (max-width:520px){.step h3{min-height:0;display:block}}

/* ---------- 14. Laufband ohne Sprung ----------
   Vorher lagen zehn Felder mit gleicher Flex-Lücke nebeneinander und die
   Bewegung ging auf -50 %. Eine Wiederholung war aber 1063 px breit, die halbe
   Spur nur 1042 px – bei jedem Durchlauf sprang das Band um 21 px zurück.
   Jetzt sind es zwei in sich geschlossene Gruppen; -50 % trifft exakt. */
.marquee-track{gap:0;width:max-content}
.marquee-group{display:flex;flex:none;gap:0}
.marquee-group span{padding-inline-end:2.6rem}
.marquee-track span{gap:2.6rem}
/* Ränder weich auslaufen lassen statt hart abschneiden */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
}
@media (max-width:560px){
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
                   mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  .marquee-group span{padding-inline-end:1.8rem}
}

/* ---------- 15. Nur für Screenreader ----------
   Trägt Zusatzangaben, die sehende Nutzer aus dem Zusammenhang erkennen –
   etwa den Hinweis, dass ein Link in einem neuen Fenster öffnet (WCAG 3.2.5). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ---------- 16. Rechtstexte als eigene Seiten ----------
   Die sechs Dokumente lagen bis zum 05.08.2026 als Dialoge in index.html und
   waren ohne JavaScript nicht erreichbar. Jetzt sind es eigene Seiten; die
   Textgestaltung entspricht der bisherigen Dialogfassung. */
.subhero--recht{--shot:url('hero-alternativ.jpg?v=20260827c')}
.legal-section{padding-top:var(--s7)}
.legal-text{max-width:78ch}
.legal-text .stand{color:var(--faint);font-size:.86rem;margin-bottom:var(--s4)}
.legal-text h2{font-size:1.3rem;font-weight:700;margin:var(--s6) 0 var(--s2)}
.legal-text h3{color:var(--green);font-size:1.06rem;font-weight:600;margin:var(--s5) 0 var(--s2);
  letter-spacing:.005em}
.legal-text h3:first-of-type{margin-top:0}
.legal-text h4{color:var(--text);font-size:1rem;font-weight:600;margin:var(--s4) 0 var(--s1)}
.legal-text p{color:var(--muted);font-size:.96rem;line-height:1.75;margin-bottom:var(--s2)}
.legal-text ul,.legal-text ol{color:var(--muted);font-size:.96rem;line-height:1.75;
  margin:0 0 var(--s2) var(--s3)}
.legal-text li{margin-bottom:var(--s1)}
.legal-text strong{color:var(--text);font-weight:600}
.legal-text a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.legal-text a:hover{color:var(--green-bright)}
.legal-text code{background:var(--bg-3);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:.9em}
.legal-text table{width:100%;border-collapse:collapse;font-size:.9rem;color:var(--muted)}
.legal-text th{color:var(--text);font-weight:600}
.legal-text .legal-meta{color:var(--text)}
@media (min-width:820px){
  .legal-text p{text-align:justify;text-justify:inter-word;
    hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
}

/* Widerruf der Einwilligung auf cookies.html */
.consent-revoke{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.consent-revoke h3{margin-top:0}