/* entkalkungsanlage-graz.at · Ocker und Tinte (F5), Gloock / Onest (S5) · Anker D Runde 2 */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gloock-400.woff2) format("woff2")}
@font-face{font-family:"Onest";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/onest-300-800.woff2) format("woff2")}
:root{
  --tinte-tief:#10161F;--tinte:#1A2230;--tinte-mild:#46505E;
  --ocker:#B5801F;--ocker-dunkel:#7E5410;--ocker-hell:#E6B655;--ocker-blass:#F2E2BC;
  --papier:#F3ECDD;--kalk:#FBF8F1;--linie:#D8CCB2;
  --kopf:"Gloock",Georgia,serif;--text:"Onest",Verdana,sans-serif;
  --rand:56px;--breit:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{background:var(--kalk);color:var(--tinte);font:400 18px/1.6 var(--text);padding-bottom:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px}
main a{color:var(--ocker-dunkel);font-weight:600}
img{max-width:100%;display:block}
::selection{background:var(--ocker-blass);color:var(--tinte-tief)}
:focus-visible{outline:3px solid var(--ocker);outline-offset:3px}
.tab{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--tinte-tief);color:var(--kalk);padding:10px 16px}
.skip:focus{left:16px}

/* Icons, eine Familie: 24er Raster, Strich 1.8 */
.ic{display:inline-block;width:20px;height:20px;flex:none}
.ic svg,svg.ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Kopf */
.kopf{position:relative;z-index:5;display:flex;align-items:center;gap:36px;height:96px;padding:0 var(--rand);background:var(--kalk)}
.kopf .marke{display:flex;align-items:center;gap:12px;text-decoration:none;font:400 22px/1.1 var(--kopf);color:var(--tinte-tief)}
.kopf .marke svg{flex:none;color:var(--ocker)}
.kopf nav{display:flex;gap:28px;margin-left:auto}
.kopf nav a{text-decoration:none;font:500 16px/1 var(--text);padding:14px 0}
.kopf nav a:hover,.kopf nav a[aria-current]{text-decoration:underline}
.kopf-ruf{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-decoration:none}
.kopf-ruf b{font:700 18px/1.2 var(--text);font-variant-numeric:tabular-nums}
.kopf-ruf .vermittlungshinweis{font:500 14px/1.35 var(--text);color:var(--tinte)}
.kopf .knopf.klein{display:none}
.kopf .knopf.klein.zeigen{display:inline-flex}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px;border-radius:3px;text-decoration:none;font:700 18px/1 var(--text);cursor:pointer;border:0;white-space:nowrap;transition:background .2s ease,transform .2s ease}
main a.knopf,.knopf{color:var(--kalk);background:var(--tinte-tief)}
.knopf:hover{background:var(--ocker-dunkel);transform:translateY(-1px)}
.knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knopf.tel,main a.knopf.tel{background:transparent;color:var(--tinte-tief);border:2px solid currentColor;font-variant-numeric:tabular-nums}
.knopf.tel:hover{background:var(--papier)}
.knopf.klein{min-height:46px;padding:0 18px;font-size:16px}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.badges{list-style:none;display:flex;flex-direction:column;gap:10px;font:500 16px/1.35 var(--text)}
.badges li{display:flex;align-items:center;gap:9px}
.badges .ic{color:var(--ocker-dunkel)}
.badges .vermittlungshinweis{font:inherit}

/* Hero: Text links auf Kalk, Foto rechts mit Ockerkante */
.hero{position:relative;background:var(--kalk)}
.hero-flaeche{position:relative;min-height:784px}
.hero-unter .hero-flaeche{min-height:620px}
.hero .bild{position:absolute;top:0;right:0;bottom:0;width:52%;margin:0}
.hero .bild::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--ocker);z-index:1}
.hero .bild img{width:100%;height:100%;object-fit:cover}
.hero .bild.flaeche{background:var(--ocker-blass);display:flex;align-items:center;justify-content:center}
.hero .bild.flaeche img{width:auto;height:88%;object-fit:contain}
.hero .text{position:relative;z-index:2;width:calc(48% - var(--rand) - 40px);margin-left:var(--rand);padding:72px 0 80px}
.hero-unter .text{padding:56px 0 64px}
.vorzeile{font:500 19px/1.3 var(--text);color:var(--ocker-dunkel)}
.hero h1{margin-top:18px;font:400 62px/.98 var(--kopf);letter-spacing:-.022em;color:var(--tinte-tief);text-wrap:balance}
.hero h1 span{display:block;color:var(--ocker-dunkel)}
.hero-unter h1{font-size:52px}
.unterzeile{margin-top:22px;font:400 21px/1.45 var(--text);max-width:36ch}
.hero .aktionen{margin-top:30px}
.hero .badges{margin-top:24px}
.brotkrume ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font:500 15px/1.3 var(--text);color:var(--tinte-mild);margin-bottom:22px}
.brotkrume li+li::before{content:"/";margin-right:8px;color:var(--linie)}
.brotkrume a{color:var(--tinte-mild)}
.bildnachweis{font:400 12px/1.35 var(--text);color:var(--tinte-mild)}
.hero .bild .bildnachweis{position:absolute;right:14px;bottom:10px;z-index:2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hero .bild .bildnachweis a{color:#fff}

/* Inhalt */
.innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.antwort{padding:64px 0 72px;background:var(--kalk);border-top:1px solid var(--linie)}
.antwort .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px}
.merkzeile{font:600 15px/1.3 var(--text);color:var(--ocker-dunkel);letter-spacing:.06em;text-transform:uppercase;padding-top:6px}
.antwort p:not(.merkzeile){font:400 21px/1.6 var(--text);max-width:62ch}
.abschnitt{padding:88px 0}
.abschnitt:nth-of-type(even){background:var(--papier)}
.abschnitt .innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.abschnitt .text{grid-column:1/-1;max-width:780px}
.abschnitt.hat-bild .text{grid-column:auto}
.abschnitt h2{font:400 42px/1.08 var(--kopf);color:var(--tinte-tief);letter-spacing:-.01em;margin-bottom:22px;text-wrap:balance}
.abschnitt h3{font:700 19px/1.3 var(--text);color:var(--tinte-tief)}
.abschnitt p{margin-top:14px;max-width:68ch}
.abschnitt .text>p:first-of-type{margin-top:0}
.icon.marke{display:block;width:44px;height:44px;color:var(--ocker);margin-bottom:18px}
.icon.marke svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
ul.punkte,ol.punkte{list-style:none;margin-top:20px;display:grid;gap:14px}
ul.punkte li{position:relative;padding-left:34px;max-width:68ch}
ul.punkte li .ic{position:absolute;left:0;top:3px;color:var(--ocker-dunkel)}
.abschnitt .knopf{margin-top:30px}
.knopf-zeile{margin-top:10px;font:500 15px/1.4 var(--text);color:var(--tinte-mild)}
.quelle{font:400 14px/1.5 var(--text);color:var(--tinte-mild)}
.preis-hinweis{font:600 15px/1.5 var(--text);color:var(--tinte)}
figure{margin:0}
.foto img{width:100%;height:auto;border-radius:3px}
.foto figcaption{margin-top:8px}
.zeichnung{background:var(--ocker-blass);border-radius:3px;padding:24px}
.zeichnung img{width:100%;height:auto}

/* Tafel: Felder mit Icon */
.tafel ul.punkte{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tafel ul.punkte li{background:var(--kalk);border:1.5px solid var(--linie);border-radius:3px;padding:24px 24px 24px 64px;max-width:none}
.tafel ul.punkte li .ic{left:22px;top:24px;width:26px;height:26px}
.abschnitt.tafel .text{max-width:none}

/* Härteband auf Tinte, Kontrastfläche */
.abschnitt.haerte{background:var(--tinte-tief);color:var(--kalk)}
.abschnitt.haerte h2{color:var(--kalk)}
.abschnitt.haerte a{color:var(--ocker-hell)}
.abschnitt.haerte .innen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
.abschnitt.haerte .text{grid-column:1}
.band{grid-column:2}
.band .skala{position:relative;display:grid;grid-template-columns:8.4fr 5.6fr 8fr;height:16px;border-radius:8px;overflow:hidden}
.band .skala i:nth-child(1){background:rgba(251,248,241,.28)}
.band .skala i:nth-child(2){background:rgba(230,182,85,.5)}
.band .skala i:nth-child(3){background:rgba(230,182,85,.22)}
.band .graz{position:absolute;top:-6px;height:28px;left:68.2%;width:13.6%;border-radius:14px;background:var(--ocker-hell)}
.band .feldk{position:absolute;top:-6px;height:28px;left:68.2%;width:31.8%;border-radius:14px;border:2px dashed var(--ocker-hell)}
.band .stufen{display:flex;justify-content:space-between;margin-top:14px;font:500 15px/1.3 var(--text);color:var(--ocker-blass)}
.band .gross{font:400 96px/1 var(--kopf);color:var(--ocker-hell);margin-bottom:22px}
.band .gross small{display:block;font:500 17px/1.4 var(--text);color:var(--kalk);margin-top:8px}
.band .legende{margin-top:18px;font:500 15px/1.5 var(--text);color:var(--kalk)}

/* Leistungsübersicht */
.leistungen ul.punkte{grid-template-columns:1fr;gap:16px}
.leistungen ul.punkte li{padding:16px 16px 16px 58px;background:var(--kalk);border-radius:3px;border:1.5px solid var(--linie)}
.leistungen ul.punkte li .ic{left:18px;top:18px;width:24px;height:24px}

/* Preise */
.tabelle-rahmen{margin-top:22px;overflow-x:auto;border:1.5px solid var(--linie);border-radius:3px;background:var(--kalk)}
table.preise{width:100%;border-collapse:collapse;font:400 17px/1.45 var(--text)}
table.preise th,table.preise td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--linie);vertical-align:top}
table.preise thead th{font:700 14px/1.3 var(--text);letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-mild);background:var(--papier)}
table.preise tbody tr:last-child th,table.preise tbody tr:last-child td{border-bottom:0}
table.preise td.betrag{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.abschnitt.preise .text{max-width:900px}
.abschnitt.preise .preis-hinweis{margin-top:16px}

/* Zeitleiste */
ol.zeit{list-style:none;counter-reset:s;margin-top:24px;display:grid;gap:0}
ol.zeit li{position:relative;counter-increment:s;padding:0 0 26px 64px;max-width:68ch}
ol.zeit li::before{content:counter(s);position:absolute;left:0;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--tinte-tief);color:var(--ocker-hell);font:400 21px/40px var(--kopf);text-align:center}
ol.zeit li::after{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;background:var(--linie)}
ol.zeit li:last-child::after{display:none}

/* Hinweisfeld */
.abschnitt.hinweis .text{background:var(--ocker-blass);border-radius:3px;padding:40px 44px;max-width:900px}

/* Vergleich: Vorteile und Nachteile */
.vergleich ul.punkte li.plus .ic{color:#2F6B3A}
.vergleich ul.punkte li.minus .ic{color:var(--ocker-dunkel)}

/* Bezirke und Zonen */
.zonen-liste{list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.zonen-liste li{padding:8px 14px;border-radius:20px;border:1.5px solid var(--linie);background:var(--kalk);font:500 16px/1.2 var(--text)}
.zonen-liste li.sued{border-color:var(--ocker);background:var(--ocker-blass)}
.zonen-liste a{text-decoration:none;color:var(--tinte)}
.zonen-liste a:hover{text-decoration:underline}

/* FAQ offen */
.faq .text{max-width:860px}
.faq h3{margin-top:30px;font:700 20px/1.35 var(--text)}
.faq h3+p{margin-top:8px}

/* Abschluss mit Kacheln */
.abschnitt.abschluss{background:var(--tinte-tief);color:var(--kalk)}
.abschnitt.abschluss h2{color:var(--kalk)}
.abschnitt.abschluss .innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.abschnitt.abschluss .text{grid-column:1}
.karte{background:var(--kalk);color:var(--tinte);border-radius:4px;padding:34px 30px}
.karte .karte-titel{font:400 30px/1.1 var(--kopf);color:var(--tinte-tief)}
.kacheln{list-style:none;margin-top:20px;display:grid;gap:10px}
.kacheln a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:0 18px;border:1.5px solid var(--linie);border-radius:3px;text-decoration:none;font:600 18px/1.25 var(--text);color:var(--tinte)}
.kacheln a:hover{border-color:var(--ocker);background:var(--papier)}
.kacheln .ic{color:var(--ocker-dunkel)}
.abschnitt.abschluss .aktionen{margin-top:26px}
.abschnitt.abschluss .knopf.tel{color:var(--kalk)}
.abschnitt.abschluss .badges .ic{color:var(--ocker-hell)}
.abschnitt.abschluss .badges{margin-top:22px}

/* Formular */
.check{margin-top:28px;background:var(--kalk);border:1.5px solid var(--linie);border-radius:4px;padding:34px}
.check fieldset{border:0}
.check legend{font:400 30px/1.15 var(--kopf);color:var(--tinte-tief);margin-bottom:6px}
.check .schritt{font:600 14px/1.3 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--ocker-dunkel);margin:0 0 18px}
.check .kacheln-form{display:grid;gap:10px;margin-top:6px}
.check .kacheln-form label{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border:1.5px solid var(--linie);border-radius:3px;font:600 17px/1.3 var(--text);cursor:pointer}
.check .kacheln-form label:has(input:checked){border-color:var(--ocker);background:var(--ocker-blass)}
.check .kacheln-form input{accent-color:var(--ocker-dunkel);width:20px;height:20px}
.feld{display:grid;gap:6px;margin-top:16px}
.feld label{font:600 16px/1.3 var(--text)}
.feld input,.feld textarea{font:400 17px/1.4 var(--text);padding:13px 14px;border:1.5px solid var(--linie);border-radius:3px;background:#fff;color:var(--tinte);min-height:48px}
.feld input[aria-invalid],.feld textarea[aria-invalid]{border-color:#A3341F}
.haken{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font:400 16px/1.45 var(--text)}
.haken input{margin-top:4px;width:20px;height:20px;accent-color:var(--ocker-dunkel);flex:none}
.schritt-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.zurueck{background:none;border:0;font:600 16px/1 var(--text);color:var(--tinte-mild);text-decoration:underline;cursor:pointer;min-height:48px;padding:0 8px}
.fehler{color:#A3341F;font:600 15px/1.4 var(--text);margin-top:12px}
.fehler:empty{display:none}
.check.fertig form{display:none}
.ergebnis p{margin-top:10px}

/* Fuß und Anrufleiste */
.fuss{background:var(--tinte-tief);color:var(--kalk);padding:64px 0 48px}
.fuss .raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.fuss .marke{font:400 24px/1.1 var(--kopf)}
.fuss p{margin-top:10px;font:400 16px/1.55 var(--text);color:#E7E1D3}
.fuss .kopf-ruf{align-items:flex-start}
.fuss .kopf-ruf .vermittlungshinweis{color:#E7E1D3;font:500 15px/1.45 var(--text)}
.fuss nav{display:flex;flex-direction:column;gap:10px}
.fuss nav a{font:500 16px/1.4 var(--text);color:var(--kalk)}
.anrufleiste{display:none}

/* Rechtsseiten aus der Vorlage */
main.recht{max-width:var(--breit);margin:0 auto;padding:64px var(--rand) 88px}
main.recht h2{font:400 32px/1.15 var(--kopf);color:var(--tinte-tief);margin:40px 0 14px}
main.recht h3{font:700 19px/1.3 var(--text);margin:24px 0 8px}
main.recht p,main.recht li{max-width:72ch;margin-top:10px}
main.recht ul{padding-left:22px}

/* Tablet und Handy */
@media (max-width:1100px){
  .kopf nav{display:none}
  .hero .text{width:calc(54% - var(--rand) - 24px)}
  .hero .bild{width:46%}
  .hero h1{font-size:50px}
  .abschnitt .innen,.abschnitt.haerte .innen,.abschnitt.abschluss .innen{grid-template-columns:1fr;gap:40px}
  .abschnitt.hat-bild .text,.abschnitt.haerte .text,.abschnitt.abschluss .text,.band{grid-column:1}
  .fuss .raster{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--rand:16px}
  body{padding-bottom:84px}
  .kopf{height:72px;gap:12px}
  .kopf .marke{font-size:19px}
  .kopf-ruf{display:none}
  .hero-flaeche,.hero-unter .hero-flaeche{min-height:0;display:flex;flex-direction:column-reverse}
  .hero .bild{position:relative;width:100%;height:300px}
  .hero .bild::before{width:100%;height:8px;bottom:auto}
  .hero .text,.hero-unter .text{width:auto;margin:0 var(--rand);padding:32px 0 40px}
  .hero h1{font-size:40px}
  .hero-unter h1{font-size:34px}
  .unterzeile{font-size:19px}
  .antwort .innen{grid-template-columns:1fr;gap:12px}
  .antwort p:not(.merkzeile){font-size:19px}
  .abschnitt{padding:60px 0}
  .abschnitt h2{font-size:31px}
  .tafel ul.punkte{grid-template-columns:1fr}
  .band .gross{font-size:64px}
  .abschnitt.hinweis .text{padding:28px 22px}
  .check{padding:22px 18px}
  .anrufleiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;align-items:center;padding:10px 16px;background:var(--tinte-tief);color:var(--kalk);box-shadow:0 -6px 18px rgba(0,0,0,.25)}
  .anrufleiste .ruf{display:flex;flex-direction:column;gap:2px;min-width:0}
  .anrufleiste .ruf a{font:700 18px/1.2 var(--text);text-decoration:none;color:var(--kalk);display:flex;align-items:center;gap:8px;min-height:44px}
  .anrufleiste .vermittlungshinweis{font:500 12px/1.3 var(--text);color:#E7E1D3}
  .anrufleiste .knopf{display:none;margin-left:auto;background:var(--ocker-hell);color:var(--tinte-tief)}
  .anrufleiste .knopf.zeigen{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Nachbesserung craft.py, 02.11.2026 */
.kopf .marke,.kopf-ruf{min-height:44px;justify-content:center}
.fuss .knopf.tel,main .abschluss a.knopf.tel{color:var(--kalk)}
.fuss nav a,.bildnachweis a{display:inline-block;padding:13px 0;margin:-13px 0}
.kacheln a,.check .kacheln-form label{border-color:#8A7A57}
.hero .bild .bildnachweis{background:rgba(16,22,31,.78);padding:3px 8px;border-radius:2px;text-shadow:none}
.abschnitt .text,.band{min-width:0}
@media (max-width:1100px){.abschnitt .innen,.abschnitt.haerte .innen,.abschnitt.abschluss .innen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.hero h1{font-size:34px}.hero-unter h1{font-size:30px}}
@media (max-width:380px){.hero h1{font-size:31px}}
.tabelle-rahmen{border-color:#8A7A57}
.fuss nav a,.bildnachweis a{padding:14px 0;margin:-14px 0}
@media (max-width:760px){
  table.preise thead{display:none}
  table.preise,table.preise tbody,table.preise tr,table.preise th,table.preise td{display:block;width:100%}
  table.preise tr{padding:12px 14px;border-bottom:1px solid var(--linie)}
  table.preise th,table.preise td{padding:2px 0;border:0}
  table.preise td.betrag{white-space:normal}
}
.hero .bild .bildnachweis{background:var(--tinte-tief);padding:4px 10px;line-height:1.5}
.tafel ul.punkte li,.leistungen ul.punkte li,.zonen-liste li,.check,.feld input,.feld textarea{border-color:#8A7A57}
.zonen-liste li.sued{border-color:var(--ocker-dunkel)}
@media (max-width:760px){.kopf .knopf.klein,.kopf .knopf.klein.zeigen{display:none}}
.skip{left:16px;transform:translateY(-300%)}
.skip:focus{transform:none}
/* Auswahlfelder: ganze Kachel ist die Klickfläche, Markierung gezeichnet */
.check .kacheln-form label,.haken{position:relative}
.check .kacheln-form input,.haken input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.check .kacheln-form label::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #8A7A57;background:#fff}
.check .kacheln-form label:has(input:checked)::before{border:7px solid var(--ocker-dunkel)}
.haken{min-height:44px;padding-left:34px}
.haken::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:3px;border:2px solid #8A7A57;background:#fff}
.haken:has(input:checked)::before{background:var(--ocker-dunkel);border-color:var(--ocker-dunkel);box-shadow:inset 0 0 0 4px #fff}
.check .kacheln-form label:has(input:focus-visible),.haken:has(input:focus-visible){outline:3px solid var(--ocker);outline-offset:3px}
.haken a{position:relative;z-index:1}
@media (max-width:760px){body{padding-bottom:0}.fuss{padding-bottom:132px}}
.zeichnung.dunkel{background:var(--tinte)}
/* Critic 02.11.2026: Vergleich als Tafel, FAQ als Karten */
.vergleich ul.punkte{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vergleich ul.punkte li{background:var(--kalk);border:1.5px solid #8A7A57;border-radius:3px;padding:20px 20px 20px 56px;max-width:none}
.vergleich ul.punkte li .ic{left:18px;top:21px;width:24px;height:24px}
.abschnitt.vergleich .text{max-width:none}
.faq .text{max-width:none}
.fragen-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.frage-karte{background:var(--kalk);border:1.5px solid #8A7A57;border-radius:3px;padding:24px 26px}
.abschnitt.faq .frage-karte h3{margin-top:0}
@media (max-width:760px){.vergleich ul.punkte,.fragen-raster{grid-template-columns:minmax(0,1fr)}}

/* Hero seit 02.11.2026: große Zeile ohne Heading, H1 klein, eine Hero-H2 */
.hero-marke{font:400 104px/.94 var(--kopf);letter-spacing:-.025em;color:var(--tinte-tief);text-wrap:balance}
.hero-unter .hero-marke{font-size:80px}
.hero h1,.hero-unter h1{margin-top:22px;font:600 20px/1.35 var(--text);letter-spacing:0;color:var(--ocker-dunkel);text-wrap:balance}
.hero-h2{margin-top:12px;font:400 26px/1.32 var(--text);color:var(--tinte);max-width:32ch;text-wrap:balance}
@media (max-width:1180px){.hero-marke{font-size:82px}.hero-unter .hero-marke{font-size:64px}.hero h1,.hero-unter h1{font-size:19px}}
@media (max-width:760px){.hero-marke{font-size:58px}.hero-unter .hero-marke{font-size:46px}.hero h1,.hero-unter h1{font-size:18px;margin-top:16px}.hero-h2{font-size:21px}}
@media (max-width:380px){.hero-marke{font-size:50px}.hero-unter .hero-marke{font-size:40px}.hero h1,.hero-unter h1{font-size:17px}.hero-h2{font-size:19px}}

/* Google-Karte (Zwei-Klick aus microsite_teile.py), Farben F5 */
main .fplie-karte{--k-umland:#EDE3CC;--k-land:#FBF8F1;--k-linie:#C9B98F;--k-stadt:#46505E;--k-akzent:#7E5410;--k-wasser:#6F9CB0;--k-text:#1A2230;
  border:1px solid #8A7A57;border-radius:4px;overflow:hidden}
main .fplie-karte__nachweis{padding:0 12px 10px;opacity:1}
.karte-abschnitt .innen{align-items:center}
@media (max-width:1024px){.karte-abschnitt .innen{grid-template-columns:minmax(0,1fr)}}
.kopf .marke{white-space:nowrap}
.kopf:has(.knopf.zeigen){gap:24px}.kopf:has(.knopf.zeigen) nav{gap:20px}
@media (max-width:1320px){.kopf .knopf.klein.zeigen{display:none}}
/* große Zeile mit langem Wort (Entkalkungsanlage): kleiner, damit sie nie überläuft */
.hero-marke.lang{font-size:68px;line-height:1}
@media (max-width:1180px){.hero-marke.lang{font-size:54px}}
@media (max-width:760px){.hero-marke.lang{font-size:40px}}
@media (max-width:380px){.hero-marke.lang{font-size:35px}}

/* ==== Stilwelt Klar + Split Foto, Anker B (Fabian, 02.11.2026 spätabends) ====
   Foto links bis zum Rand, Text rechts auf satter Tinte-Fläche. Gerade Kanten, Linien statt Kästen,
   Wechsel zwischen weißen und sandfarbenen Abschnitten. Gloock nur in der großen Zeile. */
:root{--weiss:#FFFFFF;--sand:#F3ECDD;--linie-k:#CFC5B0}
body{background:var(--weiss)}
.hero{background:var(--weiss)}
.kopf{background:var(--weiss);height:80px;border-bottom:1px solid var(--linie-k)}
.kopf .marke{font:700 18px/1.1 var(--text)}
.kopf nav a{border-bottom:2px solid transparent;padding:12px 0}
.kopf nav a:hover,.kopf nav a[aria-current]{text-decoration:none;border-bottom-color:var(--ocker)}
.kopf-ruf{padding-left:24px;border-left:1px solid var(--linie-k)}

/* Hero geteilt: Foto 7, Text 5 */
.hero-flaeche,.hero-unter .hero-flaeche{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:720px}
.hero-unter .hero-flaeche{min-height:600px}
.hero .bild{position:relative;inset:auto;width:auto;height:100%;min-height:inherit}
.hero .bild::before{left:0;right:0;top:auto;bottom:0;width:auto;height:10px}
.hero .bild img{position:absolute;inset:0}
.hero .bild.flaeche{background:var(--sand)}
.hero .bild.flaeche img{position:static}
.hero .bild .bildnachweis{left:16px;right:auto;bottom:22px}
.hero .text,.hero-unter .text{width:auto;margin:0;padding:64px 52px 64px 52px;background:var(--tinte-tief);color:#fff;
  display:flex;flex-direction:column;justify-content:center}
.hero .hero-marke{color:#fff;font-size:64px;line-height:1}
.hero-unter .hero-marke{font-size:58px}
.hero .hero-marke.lang{font-size:54px}
.hero h1,.hero-unter h1{color:var(--ocker-hell);font:700 18px/1.35 var(--text);margin-top:20px}
.hero .hero-h2{color:#fff;font-size:24px;max-width:28ch}
.hero .aktionen{flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px}
.hero .knopf{background:var(--ocker-hell);color:var(--tinte-tief)}
.hero .knopf:hover{background:#fff}
.hero .knopf.tel{background:transparent;color:#fff;border-color:#fff}
.hero .knopf.tel:hover{background:rgba(255,255,255,.12)}
.hero .badges{margin-top:26px;color:#fff;font-size:15px}
.hero .badges .ic{color:var(--ocker-hell)}
.hero .brotkrume ol,.hero .brotkrume a{color:#C8CDD6}
.hero .brotkrume li+li::before{color:#6B7482}

/* Abschnitte: Onest-Überschriften, Wechsel weiß und Sand */
.abschnitt h2{font:700 36px/1.16 var(--text);letter-spacing:-.015em}
.abschnitt:nth-of-type(even){background:var(--sand)}
.antwort{background:var(--weiss);border-top:0;border-bottom:1px solid var(--linie-k)}
.antwort .innen>div{padding-left:28px;border-left:4px solid var(--ocker)}
.merkzeile{letter-spacing:0;text-transform:none;font:700 15px/1.3 var(--text)}
.icon.marke{width:36px;height:36px;color:var(--ocker-dunkel)}

/* Listen mit Linien statt Kästen */
.tafel ul.punkte{gap:0 40px;margin-top:28px}
.tafel ul.punkte li,.leistungen ul.punkte li,.vergleich ul.punkte li{background:none;border:0;border-top:2px solid var(--tinte-tief);border-radius:0;padding:20px 0 22px 40px}
.tafel ul.punkte li .ic,.leistungen ul.punkte li .ic,.vergleich ul.punkte li .ic{left:0;top:22px;width:24px;height:24px}
.leistungen ul.punkte{gap:0}
.leistungen ul.punkte li{border-top:1px solid var(--linie-k)}
.leistungen ul.punkte li:first-child{border-top:2px solid var(--tinte-tief)}
.fragen-raster{gap:0 40px}
.frage-karte{background:none;border:0;border-top:2px solid var(--tinte-tief);border-radius:0;padding:22px 0 26px}
.abschnitt.hinweis .text{border-radius:0;background:var(--sand);border-left:6px solid var(--ocker)}
.abschnitt:nth-of-type(even).hinweis .text{background:var(--weiss)}

/* Preise: schlichte Tabelle mit Linien */
.tabelle-rahmen{border:0;border-top:2px solid var(--tinte-tief);border-radius:0;background:transparent}
table.preise thead th{background:transparent;letter-spacing:0;text-transform:none;font:700 15px/1.3 var(--text)}
table.preise th,table.preise td{border-bottom:1px solid var(--linie-k);padding:14px 16px 14px 0}

/* Ablauf: eckige Zahlen */
ol.zeit li::before{border-radius:0;font:700 18px/40px var(--text)}

/* Härteskala, Zonen, Karten, Formular: gerade */
.band .skala,.band .graz,.band .feldk{border-radius:0}
.band .gross{font:700 80px/1 var(--text)}
.zonen-liste li{border-radius:0;background:var(--weiss)}
.foto img,.zeichnung,.karte,.kacheln a,.check,.check .kacheln-form label,.feld input,.feld textarea{border-radius:0}
.zeichnung{background:var(--sand)}
.abschnitt:nth-of-type(even) .zeichnung{background:var(--weiss)}
.zeichnung.dunkel{background:var(--tinte)}
.karte .karte-titel,.check legend{font:700 26px/1.2 var(--text)}
.check{background:var(--weiss)}
main .fplie-karte{border-radius:0;border-color:var(--linie-k)}
main.recht h2{font:700 28px/1.2 var(--text)}
.fuss .marke{font:700 20px/1.1 var(--text)}

@media (max-width:1100px){
  .hero-flaeche,.hero-unter .hero-flaeche{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero .hero-marke.lang{font-size:46px}
}
@media (max-width:760px){
  .hero-flaeche,.hero-unter .hero-flaeche{display:flex;flex-direction:column;min-height:0}
  .hero .bild{height:280px;min-height:0}
  .hero .text,.hero-unter .text{padding:34px var(--rand) 40px}
  .hero .hero-marke{font-size:44px}.hero-unter .hero-marke{font-size:40px}
  .hero .hero-marke.lang{font-size:38px}
  .hero .hero-h2{font-size:20px}
  .abschnitt h2{font-size:28px}
  .tafel ul.punkte{gap:0}
  .band .gross{font-size:56px}
  .antwort .innen>div{padding-left:18px}
}
@media (max-width:380px){.hero .hero-marke.lang{font-size:33px}}
/* dunkle Flächen gewinnen gegen den Sand-Wechsel */
.abschnitt.abschluss,.abschnitt.haerte,.abschnitt:nth-of-type(even).abschluss,.abschnitt:nth-of-type(even).haerte{background:var(--tinte-tief)}
/* Auswahl „Worum geht es?“: Zeilen mit Linien statt umrahmter Kästen */
.kacheln{gap:0}
.kacheln a{border:0;border-top:1px solid var(--linie-k);padding:0 4px}
.kacheln li:last-child a{border-bottom:1px solid var(--linie-k)}
.kacheln a:hover{background:var(--sand)}
/* craft: Rahmen ab 3:1, Menü ab 44 px */
main .fplie-karte{border-color:#8A7A57}
.kacheln a{border-top-color:#8A7A57}.kacheln li:last-child a{border-bottom-color:#8A7A57}
.kopf nav a{padding:13px 0}
/* Fotofeld: deutscher Knopf, Browser-Knopf verborgen (03.11.2026) */
.feld.datei{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.feld.datei .feld-titel{flex-basis:100%;margin:0;font:600 16px/1.3 var(--text)}
.feld.datei input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.datei-knopf{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--tinte-tief);font:700 16px/1 var(--text);color:var(--tinte-tief);cursor:pointer;background:var(--weiss)}
.datei-knopf:hover{background:var(--sand)}
.feld.datei input:focus-visible + .datei-knopf{outline:3px solid var(--ocker);outline-offset:3px}
.datei-name{font:400 15px/1.4 var(--text);color:var(--tinte-mild)}