/* Peters Heizung & Sanitär. Flaschengrün und Messing, eine Schrift (Archivo, breiter Schnitt wie ein Typenschild), eckige Formen. */
@font-face{font-family:Archivo;src:url(/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --bg:#133621;--surface:#1a4429;--ink:#f4d96c;--muted:#c4b46a;--accent:#f4d96c;--accent-ink:#133621;
  --s-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --s-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --s-head:clamp(2.25rem,1.2rem + 3.6vw,4.75rem);
  --s-mono:clamp(5rem,14vw,15rem);
  --m:clamp(20px,2.2vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s-body)/1.5 Archivo,"Arial Narrow",sans-serif;font-kerning:normal;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;transition:text-underline-offset .2s var(--ease),color .2s}
a:hover{text-underline-offset:.3em}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
h1,h2,h3{margin:0;font-weight:750;font-stretch:112%;letter-spacing:-.01em;line-height:1}
h2{font-size:var(--s-head);line-height:.95;letter-spacing:-.015em}
h3{font-size:var(--s-body);font-weight:600;font-stretch:100%;letter-spacing:0;line-height:1.3}
p{margin:0 0 1em}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:500}
.skip:focus{left:8px}
mark.ph{background:#fff1a6;color:#133621;padding:0 .25em;font-weight:500}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 var(--s-body)/1 inherit;font-family:inherit;padding:18px 26px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-inv{background:var(--bg);color:var(--ink)}
.btn:focus-visible{outline-color:var(--ink);outline-offset:4px}
.btn-inv:focus-visible{outline-color:var(--bg)}

/* Saison-Hinweis: nur sichtbar, wenn saison.js ein Thema setzt */
.saison{display:none;margin:0;padding:12px var(--m);background:var(--surface);color:var(--ink);font-size:var(--s-small);align-items:center;gap:12px}
.saison svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-saison=halloween] .saison-halloween,html[data-saison=weihnachten] .saison-weihnachten,html[data-saison=silvester] .saison-silvester{display:flex}

/* ---------- Erster Bildschirm ---------- */
.hero{position:relative;min-height:max(100svh,660px);overflow:hidden}
.hero-pic{position:absolute;left:20px;top:20px;bottom:20px;width:calc(47% - 20px);overflow:hidden}
.hero-pic img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.hero-pic figcaption,.mobil-pic figcaption,.leist-pic figcaption,.ruf-pic figcaption{font-size:var(--s-small);color:var(--muted);padding-top:8px}
.hero-pic figcaption{position:absolute;left:0;top:0;background:var(--bg);padding:6px 10px;max-width:80%}
.hero-nav{position:absolute;top:28px;right:var(--m);z-index:3}
.hero-nav ul{display:flex;gap:28px;font-size:var(--s-small)}
.hero-nav ul a{text-decoration:none}
.hero-nav ul a:hover{text-decoration:underline}
.hero-nav li:last-child a{text-decoration:underline}
.menu{display:none}
.hero-txt{position:absolute;left:calc(47% + 6vw);top:26%;max-width:27ch;z-index:2}
.statement{font-size:var(--s-lead);font-weight:500;line-height:1.25;margin-bottom:.6em}
.slogan{color:var(--muted);margin-bottom:1.6em}
.live{font-size:var(--s-small);color:var(--muted);margin-top:1em}
.name{position:absolute;right:var(--m);bottom:24px;z-index:2;font-size:var(--s-mono);line-height:.8;letter-spacing:-.02em;font-weight:800;font-stretch:125%;pointer-events:none}
.name-in{display:inline-block;transform-origin:100% 100%}

/* ---------- Leistungen: Namensspalten ---------- */
.leist{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:18vh var(--m) 20vh}
.leist h2{grid-column:1/-1;margin-bottom:.5em}
.leist-intro{grid-column:1/8;font-size:var(--s-lead);line-height:1.3;margin-bottom:64px}
.gruppe{grid-column:span 3;grid-row:3}
.gruppe:nth-of-type(1){grid-column:1/4}.gruppe:nth-of-type(2){grid-column:4/7}.gruppe:nth-of-type(3){grid-column:7/10}
.gruppe h3{margin-bottom:1em}
.gruppe ul{color:var(--muted);line-height:1.35;margin-bottom:1.2em}
.gruppe p{max-width:30ch}
.leist-pic{grid-column:10/13;grid-row:2/4;align-self:end}

/* ---------- Bilderband ---------- */
.band{padding:0 0 20vh}
.band h2{padding-left:calc(var(--m) + 16.6%);margin-bottom:64px}
.band-row{display:flex;height:68svh;min-height:420px}
.band-row figure{position:relative;flex:2 1 0;overflow:hidden;transition:flex-grow .5s var(--ease)}
.band-row .p1{flex-grow:5}.band-row .p3{flex-grow:3}
.band-row img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.band-row figure:hover{flex-grow:6}}
.band-title{position:absolute;left:24px;top:24px;margin:0;max-width:22ch;background:var(--bg);padding:10px 14px;font-size:var(--s-lead);font-weight:500;line-height:1.2}
.band-cap{padding:16px var(--m) 0;max-width:75ch;color:var(--muted);font-size:var(--s-small)}

/* ---------- Mobile Wärme: Messingfeld ---------- */
.mobil{background:var(--ink);color:var(--bg);display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:16vh var(--m)}
.mobil a:not(.btn){color:var(--bg)}
.mobil :focus-visible{outline-color:var(--bg)}
.kw{grid-column:1/-1;grid-row:1;font-size:var(--s-mono);font-weight:800;font-stretch:125%;line-height:.8;letter-spacing:-.02em;margin:0 0 .12em;white-space:nowrap}
.mobil-txt{grid-column:8/13;grid-row:2}
.mobil-txt h2{margin-bottom:.6em}
.mobil dl{margin:2em 0}
.mobil dl div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:10px 0}
.mobil dt{font-weight:500}
.mobil .alt{display:inline-block;margin:14px 0 0 12px}
.mobil-pic{grid-column:1/7;grid-row:2;align-self:start}
.mobil-pic figcaption{color:var(--bg);opacity:.85}

/* ---------- Ablauf als Treppe ---------- */
.ablauf{padding:12vh var(--m) 16vh}
.treppe li{margin:0 0 56px}
.treppe li:nth-child(2){margin-left:12%}.treppe li:nth-child(3){margin-left:24%}.treppe li:nth-child(4){margin-left:36%}
.treppe h3{font-size:var(--s-head);font-weight:750;font-stretch:112%;letter-spacing:-.015em;line-height:1;margin-bottom:12px}
.treppe p{color:var(--muted);max-width:40ch;margin:0}
.treppe li:nth-child(4) p{color:var(--ink)}

/* ---------- Zeiten ---------- */
.zeiten{background:var(--surface);display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:16vh var(--m)}
.zeiten table{grid-column:1/9;grid-row:1/3;border-collapse:collapse;font-size:var(--s-lead);line-height:1.3}
.zeiten caption{text-align:left;padding-bottom:40px}
.zeiten th{text-align:left;font-weight:500;padding:40px 0 12px}
.zeiten tr:first-child th{padding-top:0}
.zeiten td{padding:12px 16px 12px 0;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);vertical-align:top}
.zeiten td:nth-child(2){color:var(--muted)}
.zeiten td.t{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.zeiten-jetzt{grid-column:10/13;grid-row:1;align-self:start}
.zeiten-jetzt p{margin-top:16px}
.mano{width:min(100%,240px);height:auto;fill:none;stroke:var(--ink);stroke-linecap:round}
.mano-ring{stroke-width:4}.mano-ticks{stroke-width:3;stroke:var(--muted)}
.mano-nadel{stroke-width:5;transform-origin:60px 60px;transition:transform 1.4s var(--ease)}
.mano-nabe{fill:var(--ink);stroke:none}
.zeiten-note{grid-column:10/13;grid-row:2;align-self:end;color:var(--muted);font-size:var(--s-small);margin:0}

/* ---------- Fragen ---------- */
.fragen{padding:14vh var(--m)}
.fragen h2{margin-bottom:80px;max-width:12ch}
.qa-liste{margin-left:33.33%;max-width:62ch}
.qa{margin-bottom:44px}
.qa h3{font-size:var(--s-lead);font-weight:500;margin-bottom:10px}
.qa p{margin:0;max-width:56ch}

/* ---------- Anruf ---------- */
.ruf{position:relative;background:var(--surface);min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto auto;gap:0 24px;padding:12vh var(--m) 48px}
.ruf-satz{grid-column:1/9;grid-row:1;max-width:18ch}
.ruf-pic{grid-column:10/13;grid-row:1/3}
.ruf-nr{grid-column:1/-1;grid-row:3;align-self:end;display:block;font-size:clamp(3.5rem,10.4vw,10.5rem);font-weight:800;letter-spacing:-.02em;line-height:.85;text-decoration:none;white-space:nowrap;margin:6vh 0 40px;transition:color .25s}
.ruf-nr:hover{color:var(--muted)}
.ruf-ecken{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;gap:24px;font-size:var(--s-body)}
.ruf-ecken p{margin:0}
.ruf-ecken p:last-child{text-align:right}

/* ---------- Fuß ---------- */
.fuss{background:var(--ink);color:var(--bg);min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;padding:40px var(--m) 24px}
.fuss :focus-visible{outline-color:var(--bg)}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.fcols p{margin:0 0 1em}
.fcols li{margin-bottom:.3em}
.fcols b{font-weight:500}
.flogo{width:160px;margin-bottom:20px}
.fwm{grid-row:3;width:100%;height:auto;display:block;fill:var(--bg);font:800 300px Archivo,sans-serif;font-stretch:125%;letter-spacing:-.02em;transform-origin:50% 100%}
.legal-zeile,.fuss .legal{grid-row:4;font-size:var(--s-small);margin:16px 0 0}

/* ---------- Unterseiten ---------- */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px var(--m)}
.wm{font-size:2.25rem;font-weight:800;font-stretch:125%;letter-spacing:-.02em;text-decoration:none;line-height:1}
.bar ul{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--s-small)}
.bar ul a{text-decoration:none}.bar ul a:hover,.bar ul a[aria-current]{text-decoration:underline}
.sub{padding:10vh var(--m) 18vh}
.sub h1{hyphens:auto;overflow-wrap:break-word;font-size:var(--s-head);letter-spacing:-.015em;margin-bottom:.8em}
.legal{max-width:72ch}
.legal h2{font-size:var(--s-lead);letter-spacing:-.01em;line-height:1.2;margin:2em 0 .5em}
.legal address{font-style:normal;margin-bottom:1em}
.legal ul{list-style:disc;padding-left:1.2em;margin-bottom:1em}
.credits li{margin-bottom:.6em}
.kt-cols{display:grid;grid-template-columns:5fr 1fr 6fr;gap:24px}
.kt-daten{grid-column:1}
.kt-form{grid-column:3}
.kt-nr{font-size:var(--s-head);font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:.3em;white-space:nowrap}
.kt-nr a{text-decoration:none}.kt-nr a:hover{text-decoration:underline}
.kt-daten dl div{padding:12px 0}
.kt-daten dt{font-weight:500}
.kt-daten dd{color:var(--ink)}
.note{font-size:var(--s-small);color:var(--muted);max-width:60ch}
.kt-pic{margin-top:40px}
.kt-pic figcaption{font-size:var(--s-small);color:var(--muted);padding-top:8px}
.kt-form h2{font-size:var(--s-lead);letter-spacing:-.01em;margin-bottom:1em}
.kt-form label{display:block;font-weight:500;margin:20px 0 6px}
.kt-form input,.kt-form textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--muted);border-radius:0;padding:14px 16px}
.kt-form input::placeholder,.kt-form textarea::placeholder{color:var(--muted);opacity:.85}
.kt-form input:focus-visible,.kt-form textarea:focus-visible{outline:3px solid var(--ink);outline-offset:0}
.kt-form [aria-invalid=true]{border-color:#ffb4a2}
.err{color:#ffb4a2;margin:6px 0 0;font-size:var(--s-small)}
.kt-form .btn{margin-top:8px}
.nf p{max-width:52ch;font-size:var(--s-lead)}

/* ---------- Bewegung ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
[data-rise]{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-reveal].in{opacity:1;transform:none}
.shutter img{transition:transform 1.4s var(--ease)}
.js .shutter:not(.in) img{transform:scale(1.08)}
@keyframes drift{from{transform:scale(1.07) translate(1%,1%)}to{transform:scale(1)}}
[data-zoom] img{animation:drift 14s var(--ease) both}
@supports (animation-timeline:view()){
  @keyframes sinken{to{transform:scale(.93)}}
  @keyframes wachsen{from{transform:scale(.94)}to{transform:none}}
  .name-in{animation:sinken linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  .fwm{animation:wachsen linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
}

/* ---------- Saisonfarben (Kontraste je mindestens 4,5:1) ---------- */
@media (prefers-color-scheme:dark){
html[data-saison=halloween]{--bg:#1b1420;--surface:#271c2c;--ink:#f2a650;--muted:#cbbfa8;--accent:#f2a650;--accent-ink:#1b1420}
html[data-saison=weihnachten]{--bg:#0f2e1c;--surface:#173d27;--ink:#eef3ee;--muted:#c2ccc2;--accent:#b02a30;--accent-ink:#ffffff}
html[data-saison=silvester]{--bg:#0e1626;--surface:#17223a;--ink:#eed797;--muted:#b4bccf;--accent:#eed797;--accent-ink:#0e1626}
}
html[data-saison=weihnachten] .btn-inv{background:var(--accent);color:var(--accent-ink)}
@keyframes flackern{0%,100%{opacity:1}45%{opacity:.55}55%{opacity:.9}}
@keyframes funkeln{0%,100%{transform:scale(1)}50%{transform:scale(.8) rotate(20deg)}}
.saison-halloween .flamme{animation:flackern 3.2s ease-in-out 3}
.saison-weihnachten svg,.saison-silvester svg{animation:funkeln 2.4s ease-in-out 3}

/* ---------- Helle Fassung bei heller Systemeinstellung ---------- */
@media (prefers-color-scheme:light){
  :root{--bg:#eef1ea;--surface:#e1e7dc;--ink:#133621;--muted:#3d5a46;--accent:#133621;--accent-ink:#f4d96c;color-scheme:light}
  html[data-saison=halloween]{--bg:#efedea;--surface:#e4e0da;--ink:#2b1d30;--muted:#55485a;--accent:#2b1d30;--accent-ink:#f2a650}
  html[data-saison=weihnachten]{--ink:#0f2e1c;--accent:#b02a30;--accent-ink:#ffffff}
  html[data-saison=silvester]{--bg:#eceff4;--surface:#dfe4ec;--ink:#0e1626;--muted:#46516a;--accent:#0e1626;--accent-ink:#eed797}
  .fuss{--ink:#f4d96c;--bg:#133621}
  .err{color:#a4161a}.kt-form [aria-invalid=true]{border-color:#a4161a}
}

/* ---------- Handy ---------- */
@media (max-width:48rem){
  .hero{min-height:0;display:flex;flex-direction:column;padding-bottom:40px}
  .hero-pic{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:58svh;min-height:340px;margin:12px 12px 0;order:1}
  .hero-nav{top:24px;right:24px}
  .hero-nav ul{display:none}
  .menu{display:inline-block;background:var(--bg);padding:10px 16px;text-decoration:none;font-weight:500}
  .name{position:relative;right:auto;bottom:auto;order:2;font-size:19vw;margin:-6vw 0 0;padding:0 var(--m)}
  .hero-txt{position:static;order:3;max-width:none;padding:24px var(--m) 0}
  .leist{display:block;padding:14vh var(--m)}
  .leist-intro{margin-bottom:40px}
  .gruppe{margin-bottom:40px}
  .gruppe ul{line-height:1.45}
  .leist-pic{margin-top:16px;width:72%}
  .band{padding-bottom:14vh}
  .band h2{padding-left:var(--m);margin-bottom:32px}
  .band-row{flex-wrap:wrap;height:84svh;min-height:520px}
  .band-row figure{height:50%}
  .band-row .p1,.band-row .p4{flex:0 0 64%}
  .band-row .p2,.band-row .p3{flex:0 0 36%}
  .band-title{left:12px;top:12px;font-size:var(--s-body)}
  .mobil{display:block;padding:12vh var(--m)}
  .kw{font-size:18vw}
  .mobil-pic{margin-top:40px}
  .mobil dl div{grid-template-columns:1fr;gap:2px}
  .mobil .alt{margin:16px 0 0}
  .ablauf{padding:14vh var(--m)}
  .treppe li{margin-bottom:40px}
  .treppe li:nth-child(2){margin-left:6vw}.treppe li:nth-child(3){margin-left:12vw}.treppe li:nth-child(4){margin-left:18vw}
  .zeiten{display:flex;flex-direction:column;gap:32px;padding:12vh var(--m)}
  .zeiten table{font-size:var(--s-body)}
  .zeiten td:nth-child(2):empty{display:none}
  .zeiten-jetzt{order:-1;display:flex;align-items:center;gap:20px}
  .mano{width:110px;flex:none}
  .zeiten-jetzt p{margin:0}
  .fragen{padding:14vh var(--m)}
  .fragen h2{margin-bottom:48px}
  .qa-liste{margin-left:0}
  .ruf{display:flex;flex-direction:column;min-height:86svh;padding:12vh var(--m) 40px}
  .ruf-pic{width:56%;margin:32px 0 0 auto}
  .ruf-nr{font-size:16vw;margin:8vh 0 32px}
  .ruf-nr{align-self:flex-start;line-height:1}
  .ruf-nr span{display:block}
  .ruf-ecken{flex-direction:column;gap:16px}
  .ruf-ecken p:last-child{text-align:left}
  .fuss{min-height:0}
  .fcols{grid-template-columns:1fr 1fr;gap:32px 20px;margin-bottom:20svh}
  .bar{flex-direction:column;gap:12px}
  .kt-cols{display:block}
  .kt-form{margin-top:56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .shutter:not(.in) img{transform:none}
}