/* waschbecken-montieren-graz.at · Anker D (Steinbecken randlos, Text rechts auf Creme) · F4 Ziegel und Creme · S4 DM Serif Display / Karla */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/karla-200-800.woff2) format("woff2")}
:root{
  --tinte:#2B1E19;--tinte-mitte:#3A2A23;--tinte-2:#5A4A42;
  --ziegel:#9C3A24;--ziegel-tief:#6E2617;--ziegel-linie:#B04A2E;--ziegel-hell:#EBA48C;--ziegel-blass:#F3DDD2;
  --creme:#F5EDE0;--putz:#E7D8C3;--putz-tief:#D6C3A8;--weiss:#FFFBF5;
  --titel:"DM Serif Display",Georgia,serif;--text:"Karla",Arial,sans-serif;
  --breite:1180px;--rand:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0}
html{font-family:var(--text);color:var(--tinte);background:var(--creme);-webkit-font-smoothing:antialiased;scroll-padding-top:90px}
body{font-size:18px;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{color:var(--ziegel)}
::selection{background:var(--ziegel-blass);color:var(--tinte)}
:focus-visible{outline:3px solid var(--ziegel-linie);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--tinte);color:var(--creme);padding:10px 16px;border-radius:8px}
.skip:focus{top:8px}
.tab,.tel{font-variant-numeric:tabular-nums;white-space:nowrap}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:22px}
h3{font-size:clamp(21px,2vw,25px);margin:26px 0 8px}
p+p{margin-top:14px}
.ikon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Kopf */
.kopf{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:28px;padding:20px var(--rand)}
.kopf .name{font-family:var(--titel);font-size:20px;text-decoration:none;white-space:nowrap}
.kopf nav{display:flex;gap:18px;font-size:15px;font-weight:500}
.kopf nav a{text-decoration:none;padding:12px 0}
.kopf nav a:hover{text-decoration:underline}
.kopf .anruf{margin-left:auto;text-align:right;line-height:1.3}
.kopf .anruf a{font-weight:700;font-size:18px;text-decoration:none}
.kopf .anruf small{display:block;font-size:13px;font-weight:600;color:var(--ziegel)}
.kopf .knopf[data-nach-hero]{display:none}
.kopf.fest{position:fixed;background:rgba(245,237,224,.96);box-shadow:0 8px 24px -18px rgba(43,30,25,.6);padding-top:10px;padding-bottom:10px}
.kopf.fest .knopf[data-nach-hero].zeigen{display:inline-flex}
html:not(.js) .kopf .knopf[data-nach-hero]{display:inline-flex}

/* Knöpfe und Badges */
.knopf{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:4px;font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;font-family:inherit;transition:transform .15s ease-out,background .15s ease-out}
.knopf.haupt{background:var(--ziegel);color:#fff}
.knopf.haupt:hover{background:#6E2617;color:#fff;transform:translateY(-1px)}
.knopf.tel{background:transparent;border:2px solid currentColor;color:inherit}
.knopf.tel .ikon{color:var(--ziegel)}
.knopf.zurueck{background:transparent;border:2px solid var(--tinte-2);color:var(--tinte-mitte)}
.knopf .ikon{width:20px;height:20px}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badges{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px 12px}
.badges li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;font-size:16px;font-weight:600;line-height:1.25;border:1px solid rgba(58,42,35,.62)}
.badges li .ikon{width:20px;height:20px;color:var(--ziegel)}
.badges li.partner{border-color:var(--ziegel)}

/* Hero, Anker D: Foto randlos, Creme-Verlauf von rechts, Text rechts */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;min-height:min(900px,100vh);background:var(--putz);overflow:hidden}
.hero.kurz{min-height:660px}
.hero .bild{position:absolute;inset:0;z-index:-2;background:var(--putz-tief)}
.hero .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(270deg,rgba(245,237,224,.95) 0%,rgba(245,237,224,.91) 44%,rgba(245,237,224,0) 68%)}
.hero .text{width:min(720px,54%);padding:140px var(--rand) 72px 0;display:flex;flex-direction:column}
.hero .aktionen{flex-wrap:nowrap}
.hero .knopf{padding:0 22px}
.hero.ohne-bild{justify-content:flex-start;min-height:560px;background:var(--creme)}
.hero.ohne-bild::before{display:none}
.hero.ohne-bild::after{content:"";position:absolute;right:-12vw;bottom:-46vw;width:62vw;height:62vw;border-radius:50%;border:2px solid var(--putz-tief);z-index:-1}
.hero.ohne-bild .text{width:auto;max-width:900px;padding:150px var(--rand) 72px}
.hero-marke{order:1;white-space:nowrap;font-family:var(--titel);font-size:clamp(52px,6vw,88px);line-height:.94;letter-spacing:-.015em;margin:12px 0 22px}
.hero.kurz .hero-marke,.hero.ohne-bild .hero-marke{font-size:clamp(46px,5.6vw,82px)}
.hero h1{order:0;font-family:var(--text);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:.01em;color:var(--ziegel);margin:0}
.hero h1 span{display:inline;color:inherit}
.hero .hero-h2,.hero .hero-text{order:2;font-family:var(--text);font-weight:500;font-size:24px;line-height:1.42;letter-spacing:0;color:var(--tinte);max-width:36ch;margin:0 0 30px}
.hero .hero-h2{text-wrap:balance}
.hero .aktionen{order:3}
.hero .badges{order:4}
.hero .brotkrume{order:-1}
.vorzeile{font-size:18px;font-weight:600;color:var(--ziegel)}
.unterzeile{font-size:21px;line-height:1.45;max-width:30em;margin:0 0 30px}
.bildnachweis{position:absolute;z-index:3;left:14px;bottom:12px;font-size:12px;line-height:1.3;color:#fff;background:rgba(43,30,25,.74);padding:3px 8px;border-radius:3px;max-width:calc(100% - 30px)}
.bildnachweis a{color:#fff}
.brotkrume ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:15px;margin-bottom:14px}
.brotkrume li+li::before{content:"/";margin-right:6px;color:var(--tinte-2)}

/* Inhalt */
main{display:block}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:84px 0}
.abschnitt+.abschnitt{padding-top:0}
.abschnitt.hell{background:var(--weiss);padding-top:84px}
.abschnitt.stein{background:var(--putz);padding-top:84px}
.abschnitt.dunkel{background:var(--ziegel-tief);color:var(--creme);padding-top:84px}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:var(--creme)}
.abschnitt.dunkel a{color:var(--ziegel-blass)}
.abschnitt.dunkel .ikon{color:var(--ziegel-hell)}
.abschnitt.hell+.abschnitt:not(.hell),.abschnitt.stein+.abschnitt:not(.stein),.abschnitt.dunkel+.abschnitt:not(.dunkel){padding-top:84px}
.lesen{max-width:68ch}
.antwort{padding:64px 0 56px;background:var(--creme)}
.antwort p{font-size:22px;line-height:1.55;max-width:62ch}
.kopfzeile{display:flex;align-items:center;gap:14px;margin-bottom:6px;color:var(--ziegel)}
.kopfzeile .ikon{width:34px;height:34px}

/* Zeitleiste (Signature: Kupferlinie) */
.zeitleiste{list-style:none;padding:0;margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.zeitleiste::before{content:"";position:absolute;left:0;right:0;top:27px;height:4px;background:var(--ziegel-linie)}
.zeitleiste li{position:relative;padding:72px 24px 0 0}
.zeitleiste li::before{content:"";position:absolute;top:14px;left:0;width:42px;height:26px;border-radius:50%;background:var(--creme);border:4px solid var(--ziegel-linie)}
.zeitleiste h3{margin-top:0}
.zeitleiste p{font-size:17px}

/* Leistungsübersicht */
.leistungen{list-style:none;padding:0;margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--putz-tief)}
.leistungen li{padding:24px 26px 26px 0;border-bottom:1px solid var(--putz-tief);display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.leistungen li .ikon{width:30px;height:30px;color:var(--ziegel);margin-top:2px}
.leistungen h3{margin:0 0 6px;font-size:21px}
.leistungen p{font-size:16px}

/* Bild und Text */
.bildtext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.bildtext.umgekehrt .medien{order:2}
.medien{position:relative}
.medien img{width:100%;height:auto;border-radius:22px 22px 22px 4px;aspect-ratio:4/3;object-fit:cover}
.medien.grafik img{aspect-ratio:auto;border-radius:6px;background:var(--putz)}
.medien figcaption{font-size:14px;margin-top:8px;color:var(--tinte-2)}
.medien figcaption a{color:inherit}
.kupferkante{border-left:6px solid var(--ziegel-linie);padding-left:28px}

/* Preise */
.preise{width:100%;border-collapse:collapse;margin-top:26px;font-variant-numeric:tabular-nums}
.preise th,.preise td{text-align:left;padding:15px 16px 15px 0;border-bottom:1px solid rgba(245,237,224,.18);vertical-align:top}
.abschnitt:not(.dunkel) .preise th,.abschnitt:not(.dunkel) .preise td{border-bottom-color:var(--putz-tief)}
.preise th{font-weight:600}
.preise td:last-child{white-space:nowrap;font-weight:700;text-align:right;padding-right:0}
.preise thead th{font-size:14px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.preishinweis{margin-top:18px;font-size:16px}
.quelle{font-size:15px;margin-top:6px}

/* Fakten in zwei Spalten, Hinweisbox */
.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;margin-top:10px}
.kasten{background:var(--weiss);border-radius:10px;padding:30px 32px;box-shadow:0 18px 40px -30px rgba(43,30,25,.45)}
.kasten .ikon{color:var(--ziegel);width:30px;height:30px;margin-bottom:12px}

/* Liste mit Häkchen */
.liste{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px}
.liste li{display:grid;grid-template-columns:24px 1fr;gap:12px}
.liste li .ikon{color:var(--ziegel);margin-top:3px}
.abschnitt.dunkel .liste li .ikon{color:var(--ziegel-hell)}

/* Teaser-Paar */
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.paar>article{background:var(--weiss);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.paar>article .medien img{border-radius:0;aspect-ratio:16/10}
.paar>article .medien.grafik img{object-fit:contain;background:var(--putz);padding:14px 0 0}
.paar>article .rumpf{padding:26px 30px 30px}
.paar h3{margin-top:0}

/* Schritte der Anfrage */
.schritte{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:28px}
.schritte li{border-top:4px solid var(--ziegel-linie);padding-top:18px}
.schritte li .ikon{width:30px;height:30px;color:var(--ziegel);margin-bottom:10px}

/* Fragen */
.fragen .liste-fragen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 56px;margin-top:10px}
.fragen h3{font-size:21px;margin-top:22px}
.fragen p{font-size:17px}

/* Abschluss */
.abschluss{background:var(--ziegel-tief);color:var(--creme);padding:84px 0;position:relative;overflow:hidden}
.abschluss .innen{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.abschluss h2{color:var(--creme)}
.abschluss .knopf.tel{color:var(--creme)}
.abschluss .knopf.tel .ikon{color:var(--ziegel-hell)}
.abschluss .vermittlungshinweis{display:block;margin-top:16px;font-size:16px;color:var(--ziegel-blass)}

/* Bezirke-Verteiler */
.bezirke{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:20px}
.bezirke a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:8px;background:var(--weiss);text-decoration:none;font-weight:600;min-height:52px}
.bezirke a .ikon{color:var(--ziegel);width:20px;height:20px}
.bezirke a:hover{background:var(--ziegel-blass)}

/* Formular */
.check{background:var(--weiss);border-radius:12px;padding:34px 36px;box-shadow:0 24px 50px -34px rgba(43,30,25,.55);max-width:760px}
.check fieldset{border:0;padding:0}
.check legend{font-family:var(--titel);font-size:30px;line-height:1.15;margin-bottom:6px}
.check .schritt{font-size:15px;font-weight:600;color:var(--ziegel);margin-bottom:18px}
.check .kacheln{display:grid;gap:10px}
.check .kacheln label{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 18px;border-radius:10px;border:1.5px solid rgba(58,42,35,.6);font-weight:600;cursor:pointer}
.check .kacheln label:has(input:checked){border-color:var(--ziegel);background:var(--ziegel-blass)}
.check .kacheln input{accent-color:var(--ziegel);width:20px;height:20px}
.check .feld{display:grid;gap:6px;margin-top:16px}
.check .feld label{font-weight:600;font-size:16px}
.check input:not([type=radio]):not([type=checkbox]),.check textarea{font:inherit;padding:13px 14px;border-radius:8px;border:1.5px solid rgba(58,42,35,.62);background:var(--creme);min-height:50px}
.check .haken{display:grid;grid-template-columns:22px 1fr;gap:12px;margin-top:16px;font-size:16px}
.check .haken input{width:20px;height:20px;accent-color:var(--ziegel);margin-top:3px}
.check .fehler{color:#9B2C12;font-weight:600;margin-top:12px;min-height:1px}
.check .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.check [aria-invalid=true]{border-color:#9B2C12!important}
.check.fertig form{display:none}
.check .ergebnis:empty{display:none}

/* Fuß und Anrufleiste */
.fuss{background:var(--tinte-mitte);color:var(--creme);padding:56px 0 40px;font-size:16px}
.fuss .reihe{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.fuss a{color:var(--creme)}
.fuss nav{display:grid;gap:8px;align-content:start}
.fuss .tel a{font-size:22px;font-weight:700;text-decoration:none}
.fuss .vermittlungshinweis{display:block;margin-top:8px;color:var(--ziegel-blass)}
.fuss .einsatz{font-weight:700;display:flex;gap:10px;align-items:center}
.fuss .einsatz .ikon{color:var(--ziegel-hell)}
.anrufleiste{display:none}

/* Rechtsseiten */
main.recht{max-width:var(--breite);margin:0 auto;padding:64px var(--rand) 84px}
main.recht h2{font-size:30px;margin-top:40px}
main.recht p,main.recht li{max-width:72ch}

@media (max-width:1300px){
  .kopf nav{display:none}
}
@media (max-width:1100px){
  .leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zeitleiste{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .zeitleiste::before{display:none}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero{display:block;min-height:0}
  .hero::before{display:none}
  .hero .bild{position:relative;inset:auto;height:24vh;min-height:180px}
  .antwort p{font-size:18px}
  .hero .text{width:auto;padding:26px var(--rand) 40px}
  .hero-marke{white-space:normal;font-size:clamp(40px,11vw,56px);margin:6px 0 12px}
  .hero .hero-h2,.hero .hero-text{font-size:18px;margin-bottom:20px}
  .hero .text{padding-top:18px}
  .hero .aktionen{flex-wrap:wrap}
  .hero.ohne-bild .text{margin-left:0;padding-top:110px;border-left:0;border-top:6px solid var(--ziegel-linie)}
  .kopf{position:absolute;padding:12px var(--rand)}
  .kopf .name{font-size:17px;background:rgba(245,237,224,.92);padding:6px 10px;border-radius:6px}
  .kopf .anruf{display:none}
  .bildtext,.paar,.zweispaltig,.schritte,.fragen .liste-fragen,.abschluss .innen,.fuss .reihe{grid-template-columns:1fr;gap:28px}
  .bildtext.umgekehrt .medien{order:0}
  .leistungen{grid-template-columns:1fr}
  .zeitleiste{grid-template-columns:1fr}
  .abschnitt,.abschnitt.hell,.abschnitt.stein,.abschnitt.dunkel,.abschluss{padding-top:56px;padding-bottom:56px}
  .abschnitt+.abschnitt{padding-top:0}
  .preise td:last-child{white-space:normal}
  .check{padding:24px 20px}
  body{padding-bottom:84px}
  .anrufleiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--tinte);color:var(--creme)}
  .anrufleiste .tel a{font-weight:700;font-size:18px;text-decoration:none;color:var(--creme)}
  .anrufleiste small{display:block;font-size:12px;color:var(--ziegel-blass);white-space:normal;max-width:52vw;line-height:1.3}
  .anrufleiste .knopf{min-height:48px;padding:0 18px;font-size:15px}
  .anrufleiste .knopf[data-nach-hero]{display:none}
  .anrufleiste .knopf[data-nach-hero].zeigen{display:inline-flex}
  html:not(.js) .anrufleiste .knopf[data-nach-hero]{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.hero .kopf .name{background:rgba(245,237,224,.9);padding:5px 12px;border-radius:6px;margin-left:-12px}

/* Craft 02.11.2026: Berührungsflächen ab 44 px, Rufnummer-Block bricht um */
.fuss .tel,.anrufleiste .tel{white-space:normal}
.kopf .name,.kopf .anruf a,.fuss .tel a,.fuss nav a{display:inline-flex;align-items:center;min-height:44px}
.fuss nav{gap:0}
.medien figcaption a{display:inline-block;padding:13px 0;margin:-13px 0}
.bildnachweis{padding:0 8px}
.bildnachweis a{display:inline-block;padding:13px 0}
.anrufleiste .tel a{display:inline-flex;align-items:center;min-height:44px}
.abschnitt.dunkel .kasten{color:var(--tinte)}
.abschnitt.dunkel .kasten h3{color:var(--tinte)}
.abschnitt.dunkel .kasten a{color:var(--ziegel)}
.abschnitt.dunkel .kasten .ikon{color:var(--ziegel)}
@media (max-width:860px){
  .kopf .knopf{display:none!important}
  main .knopf{white-space:normal;text-align:center;line-height:1.25;padding:10px 22px;max-width:100%}
}
.bildnachweis{background:#1C1F22}
.bildnachweis a{padding:14px 0}
.liste li:not(:has(.ikon)){grid-template-columns:1fr}
.hero h1{overflow-wrap:break-word;hyphens:auto}
.bildnachweis a{padding:15px 0}
.liste li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
.check .kacheln input,.check .haken input{width:24px;height:24px}

/* Nachbesserung 02.11.2026 nach blick und seo-technik-audit */
.kopf nav{background:rgba(245,237,224,.94);padding:0 16px;border-radius:999px;box-shadow:0 6px 18px -14px rgba(43,30,25,.6)}
.kopf nav a{padding:11px 0;color:var(--tinte)}
.kopf .menue{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:0;background:rgba(245,237,224,.94);font:inherit;font-weight:600;color:var(--tinte);cursor:pointer;margin-left:auto}
.kopf .menue .ikon{width:20px;height:20px;color:var(--ziegel)}
.zeitleiste{counter-reset:schritt}
.zeitleiste li{counter-increment:schritt}
.zeitleiste li::after{content:counter(schritt);position:absolute;top:14px;left:0;width:30px;height:30px;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ziegel)}
.zweispaltig+p,.schritte+p,.liste+p,.zweispaltig+.aktionen,.schritte+.aktionen,.paar+p{margin-top:26px}
.kopfzeile+h2{margin-top:6px}
@media (max-width:1300px){.kopf nav{display:none}}
@media (max-width:1300px){
  .kopf .menue{display:inline-flex}
  .kopf.offen nav{display:grid;position:absolute;top:64px;right:var(--rand);gap:0;padding:8px 18px;border-radius:12px;background:var(--creme);box-shadow:0 18px 40px -20px rgba(43,30,25,.6)}
  .kopf.offen nav a{padding:10px 0;min-height:44px;display:flex;align-items:center}
  .kopf .anruf{margin-left:16px}
}
@media (max-width:860px){
  .unterzeile{font-size:18px;margin-bottom:20px}
  .zeitleiste li{padding:56px 0 0}
}
.kopf nav{background:var(--creme)}
@media (max-width:860px){
  .kopf{gap:10px}
  .kopf .menue{padding:0 12px}
}
@media (max-width:400px){
  .kopf .name{font-size:15px;padding:5px 8px}
}
.hero>*{min-width:0}

/* Hero nach B1, 02.11.2026 abends: große Zeile ohne Heading, H1 klein, eine Hero-H2 */

/* Google-Karte (Zwei-Klick) in den Farben der Domain. karte.css lädt danach, deshalb mit main davor */
main .fplie-karte{--k-umland:#DDD3C6;--k-land:#F7F3EE;--k-linie:#B9AC9C;--k-stadt:#2C3135;--k-akzent:#8C4A27;--k-wasser:#7FA6B8;--k-text:#1C1F22;margin-top:28px;border-radius:12px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(43,30,25,.5)}
main .fplie-karte .k-name{font-family:var(--text)}

/* Haupt-Knopf auf Ziegel-tief: Creme-Fläche, sonst verschwindet sie (B4b) */
.abschnitt.dunkel .knopf.haupt,.abschluss .knopf.haupt{background:var(--creme);color:var(--ziegel-tief)}
.abschnitt.dunkel .knopf.haupt:hover,.abschluss .knopf.haupt:hover{background:#fff;color:var(--ziegel-tief)}
.medien figcaption.symbol{font-size:13px}

/* Google-Karte (microsite_teile.py karte), Farben dieser Domain */
main .fplie-karte{--k-umland:#D6C3A8;--k-land:#FFFBF5;--k-linie:#C2AB8E;--k-stadt:#6E2617;--k-akzent:#9C3A24;--k-wasser:#8FAFBF;--k-text:#2B1E19;margin-top:28px;border-radius:22px 22px 22px 4px;overflow:hidden}

/* ==================================================================================================
   Stilwelt W Weich, Anker W2 (Fabian, 02.11.2026 spätabends). Hängt css_bauen.py hinten an.
   Ecken 20 bis 32 px, Knöpfe ganz rund, weiche Schatten statt Linien, helle Rosé- und Sandflächen,
   keine dunklen Vollbänder, keine Gitterlinien, keine Großbuchstaben. Schrift S4, Farbe F4 bleiben.
   ================================================================================================== */
:root{--rose:#F7E6DF;--rose-2:#F1D6CB;--sand:#F6EFE6;--weich:0 8px 30px rgba(110,38,23,.08);--weich-klein:0 2px 10px rgba(110,38,23,.06);--r:24px;--r-gross:32px}
html{background:var(--sand)}
body{background:var(--sand)}
::selection{background:var(--rose-2)}

/* Kopf und Knöpfe */
.kopf{gap:18px}
.kopf nav{gap:2px}
.kopf nav a{padding:10px 11px;border-radius:999px}
.kopf .knopf{padding:0 20px;min-height:48px;font-size:16px}
.kopf nav a:hover{background:var(--rose);text-decoration:none}
.kopf.fest{background:rgba(246,239,230,.96);box-shadow:var(--weich)}
.hero .kopf .name{background:none;padding:0;margin-left:0}
.knopf{border-radius:999px}
.knopf.haupt{background:var(--ziegel);color:#fff;box-shadow:0 8px 24px rgba(156,58,36,.22)}
.knopf.haupt:hover{background:var(--ziegel-tief);color:#fff}
.knopf.tel{background:var(--weiss);border:0;color:var(--tinte);box-shadow:var(--weich)}
.knopf.zurueck{border:0;background:var(--rose);color:var(--tinte)}
.badges li{border:0;background:var(--weiss);box-shadow:var(--weich-klein);border-radius:999px}
.badges li.partner{border:0}

/* Hero Weich + Split Foto (DESIGNS.md seit 02.11.2026 spätabends): Text links, Foto füllt die rechte Hälfte bis
   zum Rand, innen eine weiche runde Kante. Fabians Wahl W2 bleibt in Leiste, Karten und Flächen erhalten. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;min-height:min(760px,92vh);padding:0;background:transparent;overflow:visible}
.hero::before{display:none}
.hero .text{order:1;width:auto;max-width:680px;padding:130px 48px 56px var(--rand);align-self:center}
.hero .bild{order:2;position:relative;inset:auto;z-index:0;min-height:100%;border-radius:0 0 0 56px;overflow:hidden;background:var(--rose-2)}
.hero .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .bildnachweis{left:20px;bottom:18px;transform:none;white-space:nowrap;background:rgba(255,253,251,.92);color:var(--tinte);border-radius:999px;padding:4px 12px}
.hero .bildnachweis a{color:var(--tinte)}
.hero:not(.ohne-bild) .kopf .anruf{background:rgba(255,253,251,.94);padding:8px 16px;border-radius:22px;box-shadow:var(--weich-klein)}
.kopf .anruf small{white-space:nowrap}
.hero.kurz,.hero.ohne-bild{min-height:0}
.hero.ohne-bild{grid-template-columns:minmax(0,1fr);min-height:0;padding:0 0 24px;background:transparent;overflow:visible}
.hero.ohne-bild::after{right:var(--rand);bottom:auto;top:120px;width:340px;height:340px;border:0;background:var(--rose);opacity:.9}
.hero.ohne-bild .text{padding:140px var(--rand) 32px;max-width:900px;align-self:start}
.hero .leiste{grid-column:1/-1;order:3;display:flex;align-items:center;gap:6px;margin:28px auto 0;position:relative;z-index:2;padding:10px 10px 10px 30px;background:var(--weiss);border-radius:999px;box-shadow:0 10px 36px rgba(110,38,23,.10);width:min(1100px,100%)}
.hero .leiste .frage{font:400 22px/1 var(--titel);margin-right:12px;white-space:nowrap}
.hero .leiste a{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2}
.hero .leiste a+a{box-shadow:-1px 0 0 var(--rose-2)}
.hero .leiste a:hover{background:var(--rose)}
.hero .leiste .ikon{color:var(--ziegel)}

/* Abschnitte: weiche Tafeln statt Bänder */
.abschnitt,.abschnitt.hell,.abschnitt.stein,.abschnitt.dunkel{background:transparent;color:var(--tinte);padding:28px 0}
.abschnitt+.abschnitt,.abschnitt.hell+.abschnitt:not(.hell),.abschnitt.stein+.abschnitt:not(.stein),.abschnitt.dunkel+.abschnitt:not(.dunkel){padding-top:28px}
.abschnitt.hell>.innen,.abschnitt.stein>.innen,.abschnitt.dunkel>.innen,.abschnitt.fragen>.innen{border-radius:var(--r-gross);padding:52px 56px;max-width:calc(var(--breite) + 2 * var(--rand) - 48px)}
.abschnitt.hell>.innen,.abschnitt.fragen>.innen{background:var(--weiss);box-shadow:var(--weich)}
.abschnitt.stein>.innen{background:var(--rose)}
.abschnitt.dunkel>.innen{background:var(--rose-2)}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:var(--tinte)}
.abschnitt.dunkel a{color:var(--ziegel-tief)}
.abschnitt.dunkel .ikon,.abschnitt.dunkel .liste li .ikon{color:var(--ziegel)}
.abschnitt.dunkel .knopf.haupt,.abschluss .knopf.haupt{background:var(--ziegel);color:#fff}
.abschnitt.dunkel .knopf.haupt:hover,.abschluss .knopf.haupt:hover{background:var(--ziegel-tief);color:#fff}
.antwort{background:transparent;padding:44px 0 20px}
.antwort p{font-size:22px;line-height:1.6;max-width:66ch}
.kopfzeile{width:56px;height:56px;border-radius:50%;background:var(--rose);display:grid;place-items:center;margin-bottom:14px}
.abschnitt.stein .kopfzeile,.abschnitt.dunkel .kopfzeile{background:var(--weiss)}
.kopfzeile .ikon{width:28px;height:28px}

/* Bilder */
.medien img,.paar>article .medien img{border-radius:28px}
.medien figcaption{display:inline-block;margin-top:10px;font-size:13px;background:var(--weiss);padding:4px 12px;border-radius:999px}
.medien figcaption.symbol{font-size:12px}

/* Kosten: runde Preiskarten statt Tabelle */
.preise,.preise tbody{display:block}
.preise thead{display:none}
.preise tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:22px}
.preise tr{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;background:var(--weiss);border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--weich)}
.preise th,.preise td,.abschnitt:not(.dunkel) .preise th,.abschnitt:not(.dunkel) .preise td{border:0;padding:0;text-align:left}
.preise td:last-child{font:400 32px/1.1 var(--titel);color:var(--ziegel);text-align:left;white-space:nowrap}
.preise th{font-weight:600;font-size:16px;line-height:1.4}
.preishinweis{margin-top:20px}

/* Ablauf: Karten mit runder Zahl */
.zeitleiste{counter-reset:z;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.zeitleiste::before{display:none}
.zeitleiste li{counter-increment:z;background:var(--weiss);border-radius:var(--r);padding:84px 24px 26px;box-shadow:var(--weich)}
.zeitleiste li::before{content:counter(z);top:24px;left:24px;width:44px;height:44px;border:0;border-radius:50%;background:var(--ziegel);color:#fff;display:grid;place-items:center;font:700 18px/1 var(--text)}
.schritte{gap:16px}
.schritte li{border:0;background:var(--weiss);border-radius:var(--r);padding:26px;box-shadow:var(--weich)}
.abschnitt.hell .schritte li,.abschnitt.hell .zeitleiste li,.abschnitt.hell .kasten,.abschnitt.fragen .liste-fragen>div,.abschnitt.hell .preise tr{background:var(--sand);box-shadow:none}
.schritte li .ikon{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--rose)}

/* Leistungen, Kästen, Listen, Paare */
.leistungen{border:0;gap:16px}
.leistungen li{border:0;background:var(--weiss);border-radius:var(--r);padding:22px 24px;box-shadow:var(--weich);grid-template-columns:52px 1fr}
.leistungen li .ikon{width:52px;height:52px;padding:13px;border-radius:50%;background:var(--rose);margin:0}
.kasten{border-radius:var(--r);box-shadow:var(--weich)}
.kasten .ikon{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--rose)}
.liste li .ikon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--rose)}
.paar>article{border-radius:var(--r-gross);box-shadow:var(--weich)}
.kupferkante{border-left:0;padding-left:0}

/* Fragen: runde Karten, immer offen */
.fragen .liste-fragen{gap:14px}
.fragen .liste-fragen>div{background:var(--sand);border-radius:var(--r);padding:22px 26px}
.fragen h3{margin-top:0}

/* Bezirke als runde Pillen */
.bezirke a{border-radius:999px;box-shadow:var(--weich-klein)}
.abschnitt.hell .bezirke a{background:var(--sand);box-shadow:none}
.bezirke a:hover{background:var(--rose)}

/* Abschluss und Fuß hell */
.abschluss{background:transparent;color:var(--tinte);padding:28px 0 56px}
.abschluss>.innen{background:var(--rose);border-radius:var(--r-gross);padding:52px 56px}
.abschluss h2{color:var(--tinte)}
.abschluss .knopf.tel{color:var(--tinte)}
.abschluss .knopf.tel .ikon{color:var(--ziegel)}
.abschluss .vermittlungshinweis{color:var(--ziegel-tief)}
.fuss{background:var(--weiss);color:var(--tinte);border-radius:var(--r-gross) var(--r-gross) 0 0;box-shadow:var(--weich)}
.fuss a{color:var(--tinte)}
.fuss .vermittlungshinweis{color:var(--ziegel-tief)}
.fuss .einsatz .ikon{color:var(--ziegel)}

/* Formular */
.check{border-radius:var(--r-gross);box-shadow:var(--weich)}
.check .kacheln label{border-radius:18px;border:1.5px solid #A06E60;background:var(--weiss)}
.check .kacheln label:has(input:checked){background:var(--rose);border-color:var(--ziegel)}
.check input:not([type=radio]):not([type=checkbox]),.check textarea{border-radius:14px;border-color:#A06E60;background:var(--sand)}

/* Karte und Rechtsseiten */
main .fplie-karte{--k-umland:#F1D6CB;--k-land:#FFFDFB;--k-linie:#E2BFB1;--k-stadt:#9C3A24;--k-akzent:#9C3A24;--k-wasser:#9DBBCB;--k-text:#2B1E19;border-radius:28px;overflow:hidden;box-shadow:var(--weich)}
main.recht{background:var(--weiss);border-radius:var(--r-gross);margin:28px auto 56px;box-shadow:var(--weich);max-width:calc(var(--breite) - 48px)}

@media (max-width:1100px){.zeitleiste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0 0 24px}
  .hero .bild{order:0;width:auto;height:28vh;min-height:190px;border-radius:0 0 32px 32px}
  .hero .text{padding:22px var(--rand) 0}
  .hero .leiste{margin:24px 12px 0;width:auto}
  .hero .kopf .anruf{display:none}
  .hero .leiste{flex-direction:column;align-items:stretch;border-radius:28px;padding:16px;gap:4px}
  .hero .leiste .frage{margin:4px 8px 8px}
  .hero .leiste a+a{box-shadow:0 -1px 0 var(--rose-2)}
  .hero.ohne-bild::after{display:none}
  .abschnitt.hell>.innen,.abschnitt.stein>.innen,.abschnitt.dunkel>.innen,.abschnitt.fragen>.innen,.abschluss>.innen{padding:32px 22px;margin:0 12px;border-radius:26px}
  .zeitleiste{grid-template-columns:1fr}
  .antwort p{font-size:18px}
  main.recht{margin:20px 12px 40px;padding:32px 22px}
  .anrufleiste{left:10px;right:10px;bottom:10px;border-radius:24px;box-shadow:0 10px 30px rgba(43,30,25,.25)}
}

/* Nachbesserung nach craft.py: große Zeile im halben Hero, Kopf mit sichtbarem Knopf (Rechtsseiten) */
.hero-marke{font-size:clamp(48px,5vw,76px)}
.hero.ohne-bild .hero-marke{font-size:clamp(46px,5.6vw,82px)}
@media (min-width:1301px){
  .kopf:has(> .knopf.haupt:not([data-nach-hero])) nav{display:none}
  .kopf:has(> .knopf.haupt:not([data-nach-hero])) .menue{display:inline-flex;margin-left:0}
  .kopf.offen:has(> .knopf.haupt:not([data-nach-hero])) nav{display:grid;position:absolute;top:64px;left:var(--rand);gap:0;padding:8px 18px;border-radius:20px;background:var(--weiss);box-shadow:var(--weich)}
}
@media (max-width:860px){.hero .text,.hero.ohne-bild .text{max-width:100%;min-width:0;width:100%}.hero .knopf{white-space:normal}}
.kopf:has(> .knopf.haupt:not([data-nach-hero])) .anruf small{white-space:normal;max-width:190px;margin-left:auto}
@media (max-width:860px){.hero.ohne-bild .hero-marke{font-size:clamp(34px,10vw,56px);overflow-wrap:anywhere}}

/* Split Foto weiter unten: die Fotos der Bild-Text-Abschnitte bekommen die größere Hälfte (design_vergleich, Abstand zu wc-tauschen) */
.bildtext{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px}
.bildtext.umgekehrt{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bildtext .medien img{aspect-ratio:5/4}
#karte .medien img{aspect-ratio:16/9 !important}
.hero .bildnachweis{white-space:normal;max-width:calc(100% - 40px)}
@media (max-width:860px){.bildtext,.bildtext.umgekehrt{grid-template-columns:1fr}}

/* Ortsseiten (03.11.2026): große Zeile „Waschbeckentausch Graz <Bezirk>“ darf umbrechen, nie über den Rand */
.hero-marke{white-space:normal;text-wrap:balance}
.hero.kurz .hero-marke{font-size:clamp(40px,4.2vw,62px)}
@media (max-width:860px){.hero.kurz .hero-marke{font-size:clamp(32px,9vw,46px);overflow-wrap:anywhere}}