/* Schrift lokal eingebunden (keine Verbindung zu Google, DSGVO) – Lizenz: fonts/OFL.txt */
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --green:#1E4A3D; --green-deep:#143328; --brass:#C9973A; --chalk:#F5F6F2;
  --ink:#1A2421; --sage:#DCE5DE; --line:#C6D1C9; --muted:#56655F; --error:#A3321E;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:80px;scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 1.0625rem/1.6 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}

/* Kopfzeile */
header.top{position:sticky;top:0;z-index:10;background:var(--green-deep);color:var(--chalk);padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{font-weight:800;font-size:1.125rem;letter-spacing:-.01em;color:var(--chalk);text-decoration:none;line-height:1.2}
.logo b{font-weight:800;color:var(--brass)}
.logo span{display:block;font-weight:400;font-size:.8125rem;opacity:.75;letter-spacing:0}
header nav{display:flex;gap:1.25rem;align-items:center}
header nav a{color:var(--chalk);text-decoration:none;font-size:.9375rem}
header nav a:hover{text-decoration:underline}
.tel{border:1px solid var(--brass);padding:.45rem .8rem;border-radius:3px;white-space:nowrap}
@media(max-width:760px){header nav a:not(.tel){display:none}}
@media(max-width:420px){.logo span{display:none}.tel{padding:.4rem .6rem;font-size:.875rem}}

/* Hero: Berliner Altbau-Hausflur – grüner Ölsockel mit Messing-Zierlinie */
.hero{background:var(--green);color:var(--chalk);position:relative;padding:3.5rem 0 4.5rem}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:
   linear-gradient(var(--brass),var(--brass)) 0 3px/100% 2px no-repeat,
   repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 14px) 0 8px/100% 3px no-repeat,
   linear-gradient(var(--brass),var(--brass)) 0 12px/100% 1px no-repeat}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto 1fr;grid-template-areas:"intro calc" "facts calc";column-gap:3.5rem;align-items:start}
.hero-grid>*{min-width:0}
.hero-intro{grid-area:intro}
.hero-grid>.facts{grid-area:facts}
.calc{grid-area:calc}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"intro" "calc" "facts";row-gap:1.75rem}
  .hero-grid>.facts{margin-top:.5rem}
}
.hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.022em;font-weight:800;margin:0 0 1rem;max-width:16ch}
.hero p.lead{font-size:1.125rem;max-width:38ch;margin:0 0 1.75rem;opacity:.92}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;max-width:38ch}
.facts li{padding-left:1.4rem;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.8em;width:.6rem;height:2px;background:var(--brass)}

/* Rechner: wie ein Aushang im Treppenhaus */
.calc{background:#fff;color:var(--ink);border-radius:4px;padding:1.9rem 1.75rem 1.75rem;box-shadow:0 1px 0 var(--brass),0 18px 40px -18px rgba(0,0,0,.45);position:relative}
.calc::before,.calc::after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:var(--brass)}
.calc::before{left:12px}.calc::after{right:12px}
@media(max-width:520px){.calc{padding:1.75rem 1.1rem 1.25rem}}
.calc h2{font-size:1.375rem;margin:0 0 .25rem;letter-spacing:-.01em}
.calc .sub{margin:0 0 1.25rem;color:var(--muted);font-size:.9375rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.row{grid-template-columns:1fr;gap:0}.row.pair{grid-template-columns:1fr 1fr;gap:.75rem}}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
label,.legend{font-weight:500;font-size:.9375rem}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],select,textarea{
  font:inherit;font-size:1rem;padding:.7rem .75rem;border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(30,74,61,.18)}
.err{font-size:.8125rem;color:var(--error)}
.err:empty{display:none}
fieldset{border:0;padding:0;margin:0 0 1rem}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .9rem;margin-top:.4rem}
@media(max-width:520px){.opts{grid-template-columns:1fr}}
.opt{display:flex;gap:.55rem;align-items:flex-start;font-size:.9375rem;cursor:pointer;line-height:1.35;font-weight:400}
.opt input{margin-top:.15rem;accent-color:var(--green);width:1.05rem;height:1.05rem;flex:none}
.btn{font:inherit;font-weight:700;font-size:1.0625rem;border:0;border-radius:3px;padding:.9rem 1.2rem;cursor:pointer;width:100%;background:var(--green);color:#fff}
.btn:hover{background:var(--green-deep)}
.btn.brass{background:var(--brass);color:var(--green-deep)}
.btn.brass:hover{background:#B8862C}
.btn:disabled{opacity:.6;cursor:wait}

/* Angebot */
.offer{display:none;margin-top:1.5rem;border-top:2px dashed var(--line);padding-top:1.25rem}
.offer.show{display:block;animation:rise .35s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.offer.show{animation:none}html{scroll-behavior:auto}}
.offer-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.875rem;color:var(--muted);margin-bottom:.75rem}
.offer-addr{font-weight:700;font-size:1.0625rem;margin:0}
.offer-meta{color:var(--muted);font-size:.9375rem;margin:.1rem 0 .75rem}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
td{padding:.45rem 0;border-bottom:1px solid var(--sage);vertical-align:top}
td.num{text-align:right;white-space:nowrap;padding-left:1rem}
tr.sum td{border-bottom:0;font-weight:800;font-size:1.25rem;padding-top:.8rem}
tr.muted td{color:var(--muted);font-size:.875rem}
.onetime{margin-top:.75rem;background:var(--sage);padding:.6rem .8rem;border-radius:3px;font-size:.9375rem}
.offer .note{font-size:.8125rem;color:var(--muted);margin:.9rem 0 1rem}
.accept{display:none;margin-top:1rem}
.accept.show{display:block}
.done{display:none;background:var(--sage);border-left:4px solid var(--green);padding:1rem 1.1rem;margin-top:1rem;border-radius:3px}
.done.show{display:block}

/* Inhaltsbereiche */
section.block{padding:4.5rem 0}
section.block h2{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 1rem;max-width:24ch}
section.block .intro{max-width:62ch;color:var(--muted);margin:0 0 2.25rem}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:2.25rem 2.5rem}
@media(max-width:900px){.services{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.services{grid-template-columns:1fr}}
.services article{border-top:3px solid var(--green);padding-top:1rem}
.services h3{margin:0 0 .4rem;font-size:1.1875rem}
.services p{margin:0;max-width:40ch}
.services .price{display:block;margin-top:.6rem;font-weight:700;color:var(--green)}
.pricelist{max-width:920px}
.price-group+.price-group{margin-top:3rem}
.price-group h3{font-size:1.1875rem;margin:0;padding-bottom:.6rem;border-bottom:2px solid var(--green);color:var(--green)}
.price-row{display:grid;grid-template-columns:1fr 15rem;gap:2rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.price-row h4{margin:0 0 .2rem;font-size:1.0625rem}
.price-row p{margin:0;max-width:56ch;color:var(--muted);font-size:.9375rem}
.price-row .amount{text-align:right;color:var(--ink);max-width:none}
.price-row .amount strong{display:block;font-size:1.375rem;font-weight:800;color:var(--green);line-height:1.2}
.price-row .amount span{display:block;font-size:.8125rem;color:var(--muted)}
@media(max-width:640px){.price-row{grid-template-columns:1fr;gap:.4rem}.price-row .amount{text-align:left}}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid var(--brass);font-weight:800;color:var(--green);margin-bottom:.7rem}
.steps strong{display:block;margin-bottom:.2rem}
.districts{columns:3 14rem;column-gap:2rem;padding:0;margin:0;list-style:none}
.districts li{break-inside:avoid;padding:.55rem 0;border-bottom:1px solid var(--line);font-weight:700}
.districts li small{display:block;color:var(--muted);font-weight:400;font-size:.875rem}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0;max-width:780px}
.faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-weight:800;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6rem 0 0;max-width:68ch}
footer{background:var(--green-deep);color:var(--chalk);padding:3rem 0 calc(2rem + env(safe-area-inset-bottom,0px));font-size:.9375rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer a{color:var(--chalk)}
footer h3{font-size:1rem;margin:0 0 .5rem}
footer p{margin:0 0 .35rem}
footer .legal{margin-top:2rem;opacity:.7;font-size:.8125rem}
.upsell{display:none;margin:-.2rem 0 1rem;background:#FBF6EA;border:1.5px solid var(--brass);border-left-width:5px;border-radius:3px;padding:.9rem 1rem}
.upsell.show{display:block;animation:rise .3s ease-out}
.upsell strong{display:block;color:var(--green-deep);margin-bottom:.2rem}
.upsell p{margin:0 0 .7rem;font-size:.9375rem;line-height:1.45}
.upsell .ups-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:520px){.upsell .ups-btns{grid-template-columns:1fr}}
.upsell button{font:inherit;font-size:.9375rem;font-weight:700;text-align:left;cursor:pointer;background:#fff;color:var(--green-deep);border:1.5px solid var(--green);border-radius:3px;padding:.55rem .7rem;line-height:1.3}
.upsell button:hover{background:var(--green);color:#fff}
.upsell button small{display:block;font-weight:400;font-size:.8125rem;opacity:.85}
.cond{display:none}
.cond.show{display:flex}
.opt.off{opacity:.55;cursor:default}
.opt em{display:block;font-style:normal;color:var(--muted);font-size:.8125rem;margin-top:.1rem}
td.unit{color:var(--muted);font-size:.8125rem;padding-left:.75rem;white-space:nowrap}
tr.group td{font-weight:700;padding-top:1.1rem;border-bottom:2px solid var(--green);font-size:.9375rem;color:var(--green)}
tr.total td{font-weight:800;font-size:1.125rem;border-bottom:0}
.yearly{margin-top:1rem;background:var(--green);color:#fff;padding:.8rem 1rem;border-radius:3px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.yearly strong{font-size:1.125rem}

/* ---------- Unterseiten ---------- */
.page-head{background:var(--green);color:var(--chalk);position:relative;padding:3rem 0 3.5rem}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:
   linear-gradient(var(--brass),var(--brass)) 0 3px/100% 2px no-repeat,
   repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 14px) 0 8px/100% 3px no-repeat,
   linear-gradient(var(--brass),var(--brass)) 0 12px/100% 1px no-repeat}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 .6rem;max-width:22ch}
.page-head p{margin:0;max-width:56ch;font-size:1.0625rem;opacity:.92}
.back{display:inline-block;color:var(--chalk);font-size:.9375rem;margin-bottom:1.25rem}
.legal-text{max-width:72ch;padding:3rem 0 4.5rem}
.legal-text h2{font-size:1.375rem;letter-spacing:-.01em;margin:2.5rem 0 .6rem}
.legal-text h2:first-child{margin-top:0}
.legal-text h3{font-size:1.0625rem;margin:1.5rem 0 .4rem}
.legal-text p,.legal-text li{margin:0 0 .8rem}
.legal-text ul,.legal-text ol{padding-left:1.25rem}
.legal-text address{font-style:normal;margin:0 0 .8rem}
mark.todo{background:#FFE9A8;color:var(--ink);padding:0 .2em;border-radius:2px}
.draft{background:#FFE9A8;border-left:5px solid #B8862C;padding:.9rem 1.1rem;margin:0 0 2.5rem;border-radius:3px}
.draft strong{display:block}

/* Bestätigungsseite */
.confirm-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start;padding:3rem 0 4.5rem}
.confirm-grid>*{min-width:0}
@media(max-width:900px){.confirm-grid{grid-template-columns:1fr;gap:2.5rem}}
.sheet{background:#fff;border-radius:4px;padding:1.9rem 1.75rem 1.75rem;box-shadow:0 1px 0 var(--brass),0 18px 40px -22px rgba(20,51,40,.45);position:relative;border:1px solid var(--line)}
.sheet::before,.sheet::after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:var(--brass)}
.sheet::before{left:12px}.sheet::after{right:12px}
.sheet h2{font-size:1.25rem;margin:0 0 .2rem}
.sheet .who{margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--sage);font-size:.9375rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.actions .btn{width:auto}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.btn.line{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.btn.line:hover{background:var(--green);color:#fff}
.pending{background:#FBF6EA;border:1.5px solid var(--brass);border-left-width:5px;border-radius:3px;padding:1.1rem 1.2rem;margin:0 0 2rem}
.pending h2{font-size:1.1875rem;margin:0 0 .35rem}
.pending p{margin:0 0 .8rem}
.next h2{font-size:1.375rem;margin:0 0 1.25rem}
.next .steps{grid-template-columns:1fr;gap:1.4rem}
.next .steps li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:1rem}
.next .steps li::before{margin:0;grid-row:span 2}
.help{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.help h3{font-size:1.0625rem;margin:0 0 .4rem}
.help p{margin:0 0 .35rem}
.copied{font-size:.875rem;color:var(--green);align-self:center}


/* Saison-Hinweis Winterdienst */
.season{background:var(--green-deep);color:var(--chalk);border-bottom:1px solid rgba(201,151,58,.45)}
.season p{margin:0;padding:.7rem 0;font-size:.9375rem}
.season strong{color:var(--brass)}
.season a{color:var(--chalk);font-weight:700;margin-left:.35rem;white-space:nowrap}

/* Angebotskarte: zwei Wege */
.offer-actions{display:grid;gap:.6rem}
.offer-actions .hint{margin:.1rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.multi-link{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--sage);font-size:.9375rem}
.multi-link a{font-weight:700}

/* Rahmenvertrag */
.rv-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:start}
.rv-grid>*{min-width:0}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr;gap:1rem}}
.rv-form{margin-top:0}

/* Lastschriftmandat */
.panel{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.6rem 1.75rem;margin-top:2rem}
@media(max-width:520px){.panel{padding:1.4rem 1.1rem}}
.panel h2{font-size:1.25rem;margin:0 0 .35rem}
.panel>p{margin:0 0 1.25rem;color:var(--muted);font-size:.9375rem}
.mandate-text{background:var(--chalk);border-radius:3px;padding:.9rem 1rem;font-size:.875rem;line-height:1.5;margin:0 0 1rem;color:var(--ink)}
.mandate-text dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;margin:0 0 .7rem}
.mandate-text dt{color:var(--muted)}
.mandate-text dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.mandate-text p{margin:0 0 .5rem}
.mandate-text p:last-child{margin:0}
.iban{letter-spacing:.04em}
.ok-box{background:var(--sage);border-left:4px solid var(--green);padding:1rem 1.1rem;border-radius:3px}
.ok-box strong{display:block;margin-bottom:.2rem}

@media print{
  #sepa{display:none!important}
  header.top,footer,.actions,.pending .btn,.help,.back,.page-head::after{display:none!important}
  body{background:#fff}
  .page-head{background:#fff;color:#000;padding:0 0 1rem}
  .confirm-grid{display:block;padding:0}
  .sheet{box-shadow:none;border:1px solid #999}
  .sheet::before,.sheet::after{display:none}
  .next{margin-top:1.5rem;break-inside:avoid}
}