@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/familjen-grotesk-400-700.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/literata-300-700.woff2) format("woff2")}
/* wasserleitung-eingefroren-graz.at · Stilwelt Weich + Split Foto, Anker D (Fabian, 03.11.2026)
   Eisblau und Schwarz, Familjen Grotesk / Literata. Ecken 20 bis 28 px, Knöpfe und Badges ganz rund,
   weiche Schatten, Abschnitte als runde Flächen auf hellem Grund, keine dunklen Vollbänder. */
:root{
  --schwarz:#0B1115;--eis:#DCEEF5;--eis-2:#B9DCEA;--eis-3:#8CC3DA;--eis-tief:#1F5F7D;--eis-nacht:#123B4F;
  --graphit:#33424B;--weiss:#fff;--grund:#EEF6FA;--linie:#C9DDE6;
  --anzeige:"Familjen Grotesk",sans-serif;--text:"Literata",serif;
  --rand:clamp(20px,4.4vw,64px);--breite:1200px;--flaeche:1320px;
  --rund:28px;--rund-m:20px;--rund-s:16px;--schatten:0 8px 30px rgba(11,17,21,.08);--schatten-s:0 4px 16px rgba(11,17,21,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{font-family:var(--text);color:var(--schwarz);background:var(--grund);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--eis-tief);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--schwarz)}
::selection{background:var(--eis-2);color:var(--schwarz)}
:focus-visible{outline:3px solid var(--eis-tief);outline-offset:3px;border-radius:6px}
.tab{font-variant-numeric:tabular-nums}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--anzeige);letter-spacing:-.02em;line-height:1.1;text-wrap:balance;hyphens:manual}
h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;margin-bottom:20px;max-width:24ch}
h3{font-size:1.2rem;font-weight:700;margin:24px 0 8px}
p+p{margin-top:14px}
main p,main li{max-width:66ch}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--schwarz);color:var(--weiss);padding:0 18px;min-height:44px;display:inline-flex;align-items:center;font:700 .95rem/1 var(--anzeige);border-radius:999px;text-decoration:none}
.sprung:focus{top:12px}

/* Knöpfe: ganz rund */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:700 1rem/1 var(--anzeige);
  border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .2s ease-out,color .2s ease-out,box-shadow .2s ease-out}
.knopf svg{width:19px;height:19px;flex:none}
.knopf.haupt{background:var(--schwarz);color:var(--weiss)}
.knopf.haupt:hover{background:var(--eis-tief);color:var(--weiss)}
.knopf.tel{background:transparent;color:var(--schwarz);border-color:var(--schwarz)}
.knopf.tel:hover{background:var(--weiss)}
.knopf.zurueck{background:transparent;border-color:var(--schwarz);color:var(--schwarz)}

/* Kopf: hell, schwebt mit weichem Schatten */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);color:var(--schwarz);box-shadow:var(--schatten-s)}
.kopf .innen{display:flex;align-items:center;gap:26px;min-height:72px;max-width:var(--flaeche)}
.marke{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--schwarz);text-decoration:none;font:700 1.02rem/1.05 var(--anzeige);letter-spacing:-.01em}
.marke svg{width:34px;height:34px;padding:6px;border-radius:999px;background:var(--eis);color:var(--eis-tief)}
.marke small{display:block;font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--eis-tief);margin-top:3px}
.menue{display:flex;gap:4px;margin-left:auto}
.menue a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--schwarz);text-decoration:none;font:600 .92rem/1 var(--anzeige)}
.menue a:hover,.menue a[aria-current]{background:var(--eis)}
.kopf .tel{text-align:right;line-height:1.25}
.kopf .tel a{display:inline-flex;align-items:center;min-height:44px;color:var(--schwarz);text-decoration:none;font:700 1.02rem/1.2 var(--anzeige)}
.kopf .tel small{display:block;font:500 .74rem/1.3 var(--anzeige);color:var(--graphit)}
.kopf .knopf{min-height:44px;padding:0 18px;font-size:.92rem;display:none}
.kopf .knopf.zeigen{display:inline-flex}
html:not(.js) .kopf .knopf{display:inline-flex}
.menue-knopf{display:none;margin-left:auto;background:var(--eis);border:0;color:var(--schwarz);font:600 .92rem/1 var(--anzeige);border-radius:999px;min-height:44px;padding:0 18px;cursor:pointer}

/* Hero: Split Foto, Text links auf hellem Grund, Foto rechts mit großen runden Ecken */
.hero{color:var(--schwarz)}
.hero .raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:min(calc(100vh - 72px),780px);padding:20px 20px 20px 0;max-width:1600px;margin:0 auto}
.hero.seite .raster{min-height:560px}
.hero .text{padding:48px clamp(32px,4vw,64px) 48px var(--rand);display:flex;flex-direction:column;justify-content:center}
.hero .bild{position:relative;overflow:hidden;margin:0;border-radius:var(--rund);background:var(--eis)}
.hero .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bildnachweis{position:absolute;right:16px;bottom:12px;font:400 .74rem/1.3 var(--text);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.7);z-index:2;background:rgba(11,17,21,.72);padding:3px 10px;border-radius:999px;max-width:calc(100% - 32px)}
@media (max-width:600px){.bildnachweis{font-size:.64rem;right:12px;bottom:10px;padding:3px 9px;border-radius:10px;max-width:calc(100% - 24px)}}
.brotkrume ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 .86rem/1.3 var(--anzeige);color:var(--graphit);margin-bottom:18px}
.brotkrume li+li::before{content:"/";margin-right:6px;color:#7A8E98}
.brotkrume a{display:inline-flex;align-items:center;min-height:44px;color:var(--eis-tief);text-decoration:none}
.brotkrume a:hover{text-decoration:underline}
.hero-marke{font:700 clamp(2.9rem,6vw,5.8rem)/.98 var(--anzeige);letter-spacing:-.03em;color:var(--schwarz);text-wrap:balance}
.hero.seite .hero-marke,.hero.schlicht .hero-marke{font-size:clamp(2.5rem,5vw,4.6rem)}
.hero h1{font:700 1.15rem/1.35 var(--anzeige);letter-spacing:.01em;color:var(--eis-tief);margin-top:16px;max-width:none}
.hero-h2{font:400 clamp(1.12rem,1.5vw,1.32rem)/1.5 var(--text);color:var(--schwarz);margin:10px 0 0;max-width:30ch}
.hero .aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badges li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--weiss);
  font:600 .92rem/1.3 var(--anzeige);color:var(--schwarz);box-shadow:var(--schatten-s);max-width:none}
.badges svg{width:18px;height:18px;flex:none;color:var(--eis-tief)}
.hero.schlicht .text{max-width:var(--flaeche);margin:20px auto 0;padding:48px var(--rand) 52px;background:var(--weiss);border-radius:var(--rund);box-shadow:var(--schatten)}
.hero.schlicht{padding:0 20px}

/* Signature: Raureif-Linie */
.raureif{display:block;width:100%;height:18px;color:var(--eis-3)}

/* Flächen: jeder Abschnitt ist eine runde Fläche auf dem Grund */
main{padding:8px 20px 40px}
main>section{max-width:var(--flaeche);margin:24px auto 0;border-radius:var(--rund);background:var(--weiss);padding:clamp(40px,5vw,72px) 0}
main>section.band{background:var(--eis)}
main>section.karte-sektion{background:var(--weiss)}
.abschnitt+.abschnitt{padding-top:clamp(40px,5vw,72px)}
.zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.zwei.links-bild{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.icon{width:52px;height:52px;padding:12px;border-radius:999px;background:var(--eis);color:var(--eis-tief);margin-bottom:18px}
.band .icon{background:var(--weiss)}
.grafik{border-radius:var(--rund-m);overflow:hidden}
.grafik img{width:100%;height:auto;display:block}
.foto{position:relative;margin:0;overflow:hidden;border-radius:var(--rund-m)}
.foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.foto figcaption{font:400 .84rem/1.4 var(--text);color:var(--graphit);padding:10px 4px 0}
.foto.mit-text img{aspect-ratio:auto}
.zwei>div>.foto,.zwei>div>figure{margin-top:28px}

/* Antwortabsatz: weiße Karte, auf der Startseite mit Foto daneben */
main>section.antwort{background:var(--weiss);box-shadow:var(--schatten);margin-top:8px}
.antwort .raureif{color:var(--eis-3);margin:-20px 0 30px}
.antwort p{font-size:clamp(1.1rem,1.45vw,1.28rem);line-height:1.65;max-width:64ch}
main>section.antwort.mit-bild{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:20px 52px 20px 20px}
.antwort.mit-bild .antwort-bild img{aspect-ratio:4/3}
.antwort.mit-bild .innen{padding:0}

/* Pflichten: Paragrafen als runde Zeilenkarten */
.paragrafen{list-style:none;display:grid;gap:12px;margin-top:20px}
.paragrafen li{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;padding:18px 22px;border-radius:var(--rund-s);background:var(--eis);max-width:none}
.band .paragrafen li{background:var(--weiss)}
.paragrafen b{font:700 .92rem/1.5 var(--anzeige);color:var(--eis-tief)}

/* Gegenüberstellung: zwei runde Karten */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.gegenueber>div{padding:30px;border-radius:var(--rund-m);background:var(--eis)}
.band .gegenueber>div{background:var(--weiss)}
.gegenueber h3{margin-top:0}
.gegenueber .icon{margin-bottom:12px;background:var(--weiss)}
.band .gegenueber .icon{background:var(--eis)}

/* Leistungsübersicht: runde Karten mit Symbol im Kreis */
.index{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.index li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:22px;border-radius:var(--rund-m);background:var(--eis);max-width:none}
.index li>svg{width:48px;height:48px;padding:11px;border-radius:999px;background:var(--weiss);color:var(--eis-tief)}
.index h3{margin:0 0 4px;font-size:1.12rem}
.index p{font-size:.98rem}
.index .weiter{grid-column:2;display:inline-flex;align-items:center;min-height:44px;font:700 .92rem/1 var(--anzeige)}
.zwei.mit-grafik{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);align-items:start}
.mit-grafik .grafik{position:sticky;top:96px}

/* Ablauf: Karten mit runder Zahl */
main>section.zeitleiste-sektion{background:var(--eis-2)}
.zeitleiste-sektion .raureif{display:none}
.zeitleiste{list-style:none;counter-reset:schritt;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:28px}
.zeitleiste li{counter-increment:schritt;position:relative;padding:24px 22px 22px;border-radius:var(--rund-m);background:var(--weiss);max-width:none}
.zeitleiste .knoten{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:13px;border-radius:999px;background:var(--eis);color:var(--eis-tief);margin-bottom:14px}
.zeitleiste li::after{content:counter(schritt);position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:999px;background:var(--schwarz);color:var(--weiss);font:700 .88rem/30px var(--anzeige);text-align:center}
.zeitleiste h3{margin:0 0 6px;font-size:1.12rem}
.zeitleiste p{font-size:.98rem}
.zeitleiste-sektion .aktion,.kosten .aktion,.abschluss .aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Zahlen: runde Karten */
main>section.zahlen{background:var(--eis-2)}
.zahlen .reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.zahl{padding:28px;border-radius:var(--rund-m);background:var(--weiss)}
.zahl b{display:block;font:700 clamp(2.6rem,5vw,4.4rem)/.95 var(--anzeige);letter-spacing:-.03em;color:var(--eis-tief)}
.zahl span{display:block;margin-top:12px;font-size:1rem;max-width:28ch}
.zahlen .quelle{margin-top:22px;font-size:.88rem;color:var(--graphit)}

/* Kosten: runde Preiskarten statt Gittertabelle */
.preise{display:block;width:100%;margin-top:24px;font-variant-numeric:tabular-nums}
.preise thead{display:none}
.preise tbody{display:grid;gap:12px}
.preise tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:20px 24px;border-radius:var(--rund-s);background:var(--eis)}
.band .preise tr{background:var(--weiss)}
.preise td{display:block;padding:0;border:0}
.preise td:first-child{font:600 1.02rem/1.4 var(--anzeige)}
.preise td small{display:block;font:400 .86rem/1.45 var(--text);color:var(--graphit);margin-top:4px}
.preise td:nth-child(2){font:700 1.18rem/1.3 var(--anzeige);color:var(--eis-tief);text-align:right;white-space:nowrap}
.preise td:nth-child(2) small{font:500 .8rem/1.3 var(--anzeige);color:var(--graphit);white-space:normal}
.preishinweis{margin-top:16px;font-size:.95rem;font-weight:600}

/* Schritte der Anfrage */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.schritte li{padding:24px;border-radius:var(--rund-m);background:var(--eis);max-width:none}
.band .schritte li{background:var(--weiss)}
.schritte svg{width:52px;height:52px;padding:13px;border-radius:999px;background:var(--weiss);color:var(--eis-tief);margin-bottom:14px}
.band .schritte svg{background:var(--eis)}
.schritte h3{margin:0 0 6px}

/* Bezirke */
.bezirksliste{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bezirksliste li{font:600 1rem/1.3 var(--anzeige);max-width:none}
.bezirksliste a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--eis);color:var(--schwarz);text-decoration:none}
.band .bezirksliste a{background:var(--weiss)}
.bezirksliste a:hover{background:var(--eis-2)}
.bezirksliste li span{font:400 .86rem var(--text);color:var(--graphit)}

/* Fragen: runde Karten, immer offen */
.faq h3{font-size:1.1rem;margin:0 0 8px}
.faq .spalten{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.faq .frage{padding:24px;border-radius:var(--rund-m);background:var(--eis)}
.band.faq .frage,.faq.band .frage{background:var(--weiss)}

/* Abschluss: pastellige Fläche, kein dunkles Band */
main>section.abschluss{background:var(--eis-2)}
.abschluss .raureif{display:none}
.abschluss h2{max-width:22ch}
.abschluss .badges li{background:var(--weiss)}

/* Bildband und Bildstrecke: Fotos mit großen runden Ecken */
.bildband{position:relative;max-width:var(--flaeche);margin:24px auto 0;border-radius:var(--rund);overflow:hidden;height:clamp(260px,42vw,520px)}
.bildband img{width:100%;height:100%;object-fit:cover}
.bildband figcaption{position:absolute;left:24px;bottom:22px;padding:10px 18px;border-radius:999px;background:var(--weiss);font:600 .95rem/1.3 var(--anzeige);box-shadow:var(--schatten-s)}
.bildstrecke{max-width:var(--flaeche);margin:24px auto 0;display:grid;gap:16px}
.bildstrecke.anzahl-2{grid-template-columns:1fr 1fr}
.bildstrecke.anzahl-3{grid-template-columns:1.3fr 1fr 1fr}
.bildstrecke figure{position:relative;margin:0;border-radius:var(--rund-m);overflow:hidden;height:340px}
.bildstrecke img{width:100%;height:100%;object-fit:cover}
.bildstrecke figcaption{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:var(--weiss);font:600 .9rem/1.3 var(--anzeige)}
.bildstrecke .bildnachweis,.bildband .bildnachweis{bottom:14px;right:16px}

/* Google-Karte: hell, runde Ecken */
body .fplie-karte{--k-umland:#DCEEF5;--k-land:#FFFFFF;--k-linie:#9DC3D4;--k-stadt:#1F5F7D;--k-akzent:#1F5F7D;--k-wasser:#8CC3DA;--k-text:#0B1115;border-radius:var(--rund-m);overflow:hidden}
.karte-sektion .zwei{align-items:start}

/* Anfrageformular */
.anfrage{background:var(--weiss);border-radius:var(--rund);padding:34px;max-width:720px;margin-top:28px;box-shadow:var(--schatten)}
.anfrage fieldset{border:0}
.anfrage legend{font:700 1.5rem/1.15 var(--anzeige);letter-spacing:-.02em;margin-bottom:6px}
.anfrage .schritt{font:600 .86rem/1 var(--anzeige);color:var(--eis-tief);margin-bottom:18px}
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kacheln label{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:0 18px 0 52px;border:2px solid var(--eis);border-radius:var(--rund-s);font:600 1.02rem/1.25 var(--anzeige);cursor:pointer;background:var(--eis)}
.kacheln label:hover{border-color:var(--eis-3)}
.kacheln input{position:absolute;opacity:0;width:1px;height:1px}
.kacheln label::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--eis-tief);border-radius:50%;background:var(--weiss)}
.kacheln label:has(input:checked){border-color:var(--schwarz);background:var(--weiss)}
.kacheln label:has(input:checked)::before{border-color:var(--schwarz);background:radial-gradient(circle,var(--schwarz) 0 5px,var(--weiss) 6px)}
.kacheln label:has(input:focus-visible){outline:3px solid var(--eis-tief);outline-offset:2px}
.feld{margin-top:16px}
.feld label{display:block;font:600 .92rem/1.3 var(--anzeige);margin-bottom:6px}
.feld input,.feld textarea{width:100%;font:400 1rem/1.4 var(--text);padding:14px 16px;border:2px solid var(--eis-2);border-radius:14px;background:var(--weiss);color:var(--schwarz)}
.feld input:focus,.feld textarea:focus{outline:3px solid var(--eis-3);outline-offset:1px;border-color:var(--eis-tief)}
[aria-invalid=true]{border-color:#A3271C!important}
.haken{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:.95rem;line-height:1.45}
.haken input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--eis-tief)}
.fehler{color:#A3271C;font:600 .95rem/1.4 var(--anzeige);min-height:1.2em;margin-top:12px}
.knoepfe{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.anfrage .hinweis{margin-top:14px;font-size:.95rem}
.ergebnis{display:none}
.anfrage.fertig form{display:none}
.anfrage.fertig .ergebnis{display:block}

/* Rechtsseiten */
main.recht{padding:8px 20px 40px}
main.recht>*{max-width:var(--flaeche);margin-left:auto;margin-right:auto}
main.recht>section,main.recht>.abschnitt{background:var(--weiss);border-radius:var(--rund);padding:48px var(--rand);margin-top:24px}
main.recht>section+section{padding-top:48px}
main.recht h2{margin-top:30px;font-size:1.5rem}
main.recht>section>h2:first-child,main.recht>.abschnitt>h2:first-child{margin-top:0}
main.recht ul{padding-left:20px}
main.recht dl{display:grid;grid-template-columns:220px 1fr;gap:8px 0;max-width:860px}
main.recht dt,main.recht dd{padding:12px 16px;background:var(--eis)}
main.recht dt{font:600 .92rem/1.4 var(--anzeige);color:var(--graphit);border-radius:12px 0 0 12px}
main.recht dd{border-radius:0 12px 12px 0}
main.recht p,main.recht li{max-width:70ch}

/* Fuß: runde dunkle Fläche, kein Vollband */
.fuss{max-width:var(--flaeche);margin:24px auto 28px;border-radius:var(--rund);background:var(--schwarz);color:#D5E5EC;padding:52px 0 40px;font-size:.95rem}
body>.fuss{margin-left:max(20px,calc((100% - var(--flaeche))/2));margin-right:max(20px,calc((100% - var(--flaeche))/2))}
.fuss .reihe{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.fuss a{color:var(--eis-2)}
.fuss .tel a{display:inline-flex;align-items:center;min-height:44px;font:700 1.2rem/1.2 var(--anzeige);color:var(--weiss);text-decoration:none}
.fuss .tel small{display:block;font:500 .86rem/1.4 var(--anzeige);color:var(--eis-2);margin-top:4px}
.fuss nav{display:flex;flex-direction:column}
.fuss nav a{display:inline-flex;align-items:center;min-height:44px}
.fuss .klein{margin-top:28px;padding-top:20px;border-top:1px solid #27343C;font-size:.84rem;color:#B5C7CF}

/* Anrufleiste mobil: schwebende runde Leiste */
.anrufleiste{display:none}

@media (max-width:1100px){
  .menue{display:none}
  .menue-knopf{display:inline-flex;align-items:center;gap:8px}
  .kopf .innen{position:relative}
  .menue.offen{display:flex;position:absolute;left:12px;right:12px;top:calc(100% + 8px);flex-direction:column;gap:4px;background:var(--weiss);border-radius:var(--rund-m);padding:12px;box-shadow:var(--schatten)}
  .menue a{font-size:1.02rem;padding:0 16px}
}
@media (max-width:900px){
  .hero .raster{grid-template-columns:1fr;min-height:0;padding:12px}
  .hero .bild{order:-1;aspect-ratio:2/1}
  .hero .text{padding:28px 8px 20px}
  .zwei,.zwei.links-bild,.gegenueber,.faq .spalten,.fuss .reihe,.index,.zahlen .reihe,.schritte,.bildstrecke.anzahl-2,.bildstrecke.anzahl-3{grid-template-columns:1fr}
  main>section.antwort.mit-bild{grid-template-columns:1fr;gap:24px;padding:12px 12px 28px}
  .antwort.mit-bild .innen{padding:0 12px}
  .kacheln{grid-template-columns:1fr}
  .paragrafen li{grid-template-columns:1fr;gap:4px}
  .mit-grafik .grafik{position:static}
  .kopf .tel small{display:none}
  .bildstrecke figure{height:240px}
}
@media (max-width:700px){
  main{padding:4px 10px 24px}
  main>section{border-radius:var(--rund-m);padding:36px 0}
  .kopf .tel,.kopf .knopf{display:none!important}
  .hero-marke,.hero.seite .hero-marke,.hero.schlicht .hero-marke{font-size:2.5rem}
  .hero .aktion{flex-wrap:nowrap;gap:8px;margin-top:22px}
  .hero .aktion .knopf{flex:1 1 0;padding:0 10px;font-size:.94rem;min-height:50px}
  .badges{margin-top:16px;gap:8px}
  .badges li{padding:7px 12px;font-size:.86rem}
  .preise tr{grid-template-columns:1fr}
  .preise td:nth-child(2){text-align:left;white-space:normal}
  .fuss{margin:16px 10px 96px;border-radius:var(--rund-m)}
  body>.fuss{margin-left:10px;margin-right:10px}
  .anrufleiste{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;background:var(--weiss);color:var(--schwarz);border-radius:999px;box-shadow:0 8px 30px rgba(11,17,21,.18);
    gap:12px;align-items:center;justify-content:space-between;padding:8px 8px 8px 20px;margin-bottom:env(safe-area-inset-bottom)}
  .anrufleiste .tel a{display:inline-flex;align-items:center;min-height:44px;color:var(--schwarz);text-decoration:none;font:700 1.06rem/1.2 var(--anzeige)}
  .anrufleiste .tel small{display:block;font:500 .72rem/1.3 var(--anzeige);color:var(--graphit)}
  .anrufleiste .knopf{min-height:46px;padding:0 16px;font-size:.9rem;display:none}
  .anrufleiste .knopf.zeigen{display:inline-flex}
  main.recht dl{grid-template-columns:1fr}
  main.recht dt{border-radius:12px 12px 0 0}
  main.recht dd{border-radius:0 0 12px 12px}
  .bildband figcaption{left:12px;bottom:12px;font-size:.86rem}
  body{padding-bottom:20px}
}
@media (max-width:900px){.zwei.mit-grafik{grid-template-columns:1fr}.zwei.mit-grafik .grafik{max-width:420px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}