/* Waller Bau – Stylesheet, Neufassung 09.11.2026
   Ersetzt style.css aus dem Entwurf vom 08.11.2026 samt inhalt/style-ergaenzung.css (deren Regeln stehen hier mit drin).
   Richtung: eckig, Linien statt Kästen, keine Schatten, echte Fotos.
   Ruhige Fassung 09.11.2026 (Abgleich mit OLYMP Sanierung): eine Schrift (Archivo), Rot nur am Hauptknopf,
   mehr Luft zwischen den Abschnitten. Leistungszeilen, Bildband und rotes Band sind entfallen. */
@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{
  --rot:#C4342A;--rot-dunkel:#A52B22;--anth:#33383C;--anth-2:#2A2E31;--kalk:#F2EFE9;--sand:#DCD3C3;
  --beton:#6B6D6B;--weiss:#FBFAF7;--text:#33383C;--text-2:#4F5357;--linie:#D6CEBF;
  --max:1240px;--pad:clamp(20px,4vw,40px);--r:2px;
  --h1:clamp(2.3rem,5vw,4.1rem);--h2:clamp(1.8rem,3.2vw,2.6rem);--h3:1.22rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Archivo",Arial,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--weiss)}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--anth);color:var(--kalk);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* Lange Wörter (Sanierungsleistungen, Haushaltsauflösung …) sprengten am Handy die Breite (gemessen 08.11.2026) */
h1,h2,h3{font-weight:800;line-height:1.06;letter-spacing:-.012em;margin:0 0 .5em;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:var(--h1);font-stretch:115%}
h2{font-size:var(--h2);font-stretch:110%;font-weight:780}
h3{font-size:var(--h3);font-weight:700;line-height:1.2}
p{margin:0 0 1em}
.eyebrow{font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--beton);margin:0 0 16px}
.mono{font-weight:600}
.lead{font-size:1.18rem;line-height:1.55;color:var(--text-2);max-width:40em}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo svg{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-weight:600;font-size:.97rem;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{border-bottom-color:var(--anth)}
.nav a[aria-current=page]{border-bottom-color:var(--anth)}
.nav .btn{padding:10px 16px;border:2px solid transparent}
.nav a.btn-rot:hover{color:#fff}
.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--anth)}
.menu-btn svg{width:28px;height:28px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--r);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;line-height:1.2;transition:background-color .15s,color .15s,border-color .15s}
.btn-rot{background:var(--rot);color:#fff}
.btn-rot:hover{background:var(--rot-dunkel);color:#fff}
.btn-linie{border-color:currentColor;color:var(--anth)}
.btn-linie:hover{background:var(--anth);border-color:var(--anth);color:var(--kalk)}
.dunkel .btn-linie,.hero .btn-linie{color:var(--kalk)}
.dunkel .btn-linie:hover,.hero .btn-linie:hover{background:var(--kalk);border-color:var(--kalk);color:var(--anth)}
.btn svg{width:20px;height:20px;flex:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Abschnitte */
section{padding:clamp(72px,10vw,148px) 0}
.kalk{background:var(--kalk)}
.dunkel{background:var(--anth);color:var(--kalk)}
.dunkel .lead,.dunkel p{color:var(--sand)}
.dunkel .eyebrow{color:var(--sand)}
.dunkel h2,.dunkel h3{color:var(--kalk)}

/* Seitenkopf der Unterseiten: ruhiges Textband, das große Bildzeichen fällt weg */
.hero{background:var(--anth);color:var(--kalk);padding:clamp(56px,8vw,112px) 0 clamp(56px,7vw,96px)}
.hero .wrap{display:block}
.hero .wrap>div{max-width:54rem}
.hero h1{color:var(--kalk)}
.hero .punch{display:block;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:800;font-stretch:112%;margin-top:.35em;color:var(--kalk)}
.hero .lead{color:var(--sand)}
/* Rot auf Anthrazit hat nur 2,2:1 Kontrast → Kleinzeile im dunklen Kopf in Sand (8,0:1) */
.hero .eyebrow{color:var(--sand)}
.vertrauen{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;font-size:.95rem;color:var(--sand)}
.vertrauen span{display:flex;align-items:center;gap:8px}
.vertrauen span::before{content:"";width:14px;height:2px;background:var(--sand);flex:none}
.pfad{font-size:.8rem;color:var(--sand);margin:0 0 22px}
.pfad a{text-decoration:none;border-bottom:1px solid rgba(220,211,195,.45)}
.pfad a:hover{color:#fff;border-bottom-color:#fff}

/* Startseite */
.fakten-leiste{padding:0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.fakten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fakten li{padding:26px 24px 28px;border-left:1px solid var(--linie)}
.fakten li:first-child{border-left:0;padding-left:0}
.fakten b{display:block;font-size:1.05rem;font-stretch:105%;margin-bottom:4px}
.fakten span{display:block;color:var(--text-2);font-size:.95rem;line-height:1.45}

/* Abschnittskopf zweispaltig: Überschrift links, Einleitung rechts */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(32px,4.5vw,60px)}
.kopfzeile h2,.kopfzeile p{margin:0}

/* Fotos im Text */
.bild{margin:0}
.bild img{width:100%}
.bild.hoch img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.bild.quer img{aspect-ratio:3/2;object-fit:cover}
.bild figcaption{font-size:.8rem;line-height:1.45;color:var(--beton);margin-top:10px}
.dunkel .bild figcaption{color:var(--sand)}
.drei-spalten{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}
.person{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,88px);align-items:center}
.portrait{margin:0;background:#fff;border:1px solid var(--linie);max-width:440px}
.person-text{color:var(--text-2);max-width:36em}

/* Karten: Linie oben statt Kasten */
.raster{display:grid;gap:44px 32px}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.karte{border-top:2px solid var(--anth);padding:22px 0 0;display:flex;flex-direction:column;gap:6px}
.dunkel .karte{border-top-color:var(--sand)}
.karte .nr{font-size:.82rem;letter-spacing:.04em;color:var(--beton)}
.karte h3{margin:.1em 0 .35em}
.karte p{color:var(--text-2);margin:0}
.karte a.mehr{margin-top:auto;padding-top:16px;font-weight:700;text-decoration:none;color:var(--anth)}
.karte a.mehr:hover{text-decoration:underline}
.karte a.mehr::after{content:" →"}
.karte .wer{margin-top:auto;padding-top:14px}
.karte .wer+a.mehr{margin-top:0}
.wer{font-size:.82rem;line-height:1.5;color:var(--beton)}
.detail{scroll-margin-top:96px}
.detail ul,.liste{margin:.4em 0 .2em;padding-left:1.15em;color:var(--text-2)}
.detail ul li,.liste li{margin:.2em 0}

/* Schritte: nummerierte Linie statt Kreise */
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;list-style:none;padding:0;margin:0}
.schritte.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.schritte li{counter-increment:s;border-top:2px solid var(--anth);padding-top:18px}
.schritte li::before{content:counter(s,decimal-leading-zero);display:block;font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--beton);margin-bottom:26px}
.schritte h3{margin-bottom:.35em}
.schritte p{color:var(--text-2);margin:0}

/* Preisfaktoren */
.faktoren{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-bottom:1px solid var(--linie)}
.faktoren li{border-top:1px solid var(--linie);padding:18px 0 20px;color:var(--text-2)}
.faktoren b{display:block;color:var(--text);font-size:1.08rem;margin-bottom:2px}
.nachsatz{margin:28px 0 0;max-width:46em}

/* Listen */
.haken{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.haken li{padding-left:28px;position:relative}
.haken li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:2px;background:var(--anth)}
.dunkel .haken li::before{background:var(--sand)}

/* Zitat, Spalten, Platzhalter-Fotos */
.zitat{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;font-stretch:110%;line-height:1.2;margin:0 0 .6em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.oben{align-items:start}
.split>*,.formular label{min-width:0}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.foto{background:var(--sand);aspect-ratio:4/3;display:grid;place-items:center;color:var(--text-2);font-weight:600;text-align:center;padding:20px;border:2px dashed #A8A396}
.foto.hoch{aspect-ratio:4/5}

/* Vorher/Nachher */
.vn{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand);user-select:none}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vn .nach{clip-path:inset(0 0 0 var(--pos,50%))}
.vn .linie{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.vn .linie::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:48px;background:var(--anth);border:2px solid #fff;transform:translate(-50%,-50%)}
.vn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vn .tag{position:absolute;top:14px;padding:5px 10px;font-size:.74rem;font-weight:500;letter-spacing:.08em;color:#fff}
.vn .tag.v{left:14px;background:var(--anth)}
.vn .tag.n{right:14px;background:var(--kalk);color:var(--anth)}
.projekt h3{margin-top:18px}
.projekt p{color:var(--text-2)}

/* Fragen */
.faq-block{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:24px 64px;align-items:start}
.faq-block>div:first-child p{color:var(--text-2)}
.faq details{border-top:1px solid var(--linie);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--anth);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{text-decoration:underline}
.faq details p{margin:12px 0 0;color:var(--text-2);max-width:60em}

/* Hinweis */
.hinweis{border-left:3px solid var(--anth);padding:4px 0 4px 18px;margin:28px 0;color:var(--text-2)}
.dunkel .hinweis{color:var(--sand);border-left-color:var(--sand)}

/* Formular */
.formular{display:grid;gap:16px}
.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formular label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
/* Auswahlliste wird so breit wie ihr längster Eintrag → Spalte bei 320 px 327 px breit (gemessen 08.11.2026) */
.formular input,.formular select,.formular textarea{font:inherit;padding:13px 14px;border:1.5px solid #A8A396;border-radius:var(--r);background:#fff;color:var(--text);width:100%;max-width:100%;min-width:0}
.formular input:focus,.formular select:focus,.formular textarea:focus{border-color:var(--anth);outline:3px solid rgba(51,56,60,.28)}
.formular textarea{min-height:140px;resize:vertical}
.formular .klein{font-size:.88rem;color:var(--text-2);font-weight:400}
.hp{position:absolute;left:-5000px}
.fehler{background:#FBE9E7;border:1px solid var(--rot);padding:12px 16px;display:none}
.fehler.zeigen{display:block}
.kontaktblock{display:grid;gap:22px;overflow-wrap:anywhere}
.kontaktblock a{text-decoration:none}
.kontaktblock .gross{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;font-stretch:110%}

/* Rechtstexte */
.recht{max-width:780px;overflow-wrap:anywhere}
.recht h2{font-size:1.4rem;font-stretch:100%;margin-top:1.6em}
/* Prüf-Hinweise: immer dunkle Schrift auf Gelb, auch im dunklen Kopf (gesehen 08.11.2026, Über mich) */
.platzhalter{background:#FFF4D6;padding:0 4px;color:var(--text)}

/* Fuß */
.fuss{background:var(--anth-2);color:var(--sand);padding:64px 0 110px;font-size:.95rem}
.fuss .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.fuss h3{color:var(--kalk);font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .unten{grid-column:1/-1;border-top:1px solid #4A5055;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.88rem}
.fuss svg{height:44px;width:auto;margin-bottom:16px}

/* Mobile Leiste */
.leiste{display:none}

/* Fünf Menüpunkte + Telefon passen erst ab ca. 975 px in eine Zeile (gemessen 08.11.2026) → darunter Klappmenü */
@media (max-width:1000px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--weiss);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px;border-bottom:1px solid var(--linie)}
  .nav.offen{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linie)}
  .nav a[aria-current=page]{font-weight:800;border-bottom-color:var(--linie)}
  .nav .btn{margin-top:14px;justify-content:center}
}
@media (max-width:960px){
  .r4,.r3,.schritte,.schritte.s3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss .wrap{grid-template-columns:1fr 1fr}
  .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fakten li:nth-child(odd){border-left:0;padding-left:0}
  .fakten li:nth-child(n+3){border-top:1px solid var(--linie)}
  .drei-spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .drei-spalten .bild{grid-column:1/-1;max-width:520px}
  .drei-spalten .bild.hoch img{aspect-ratio:3/2}
}
@media (max-width:760px){
  .hero .wrap,.split,.r2,.formular .zwei,.zwei-spalten,.kopfzeile,.faq-block,.person,.drei-spalten{grid-template-columns:1fr}
  .zwei-spalten{gap:28px}
  .r4,.r3,.schritte,.schritte.s3,.faktoren{grid-template-columns:1fr}
  .schritte li::before{margin-bottom:12px}
  .fuss .wrap{grid-template-columns:1fr}
  .portrait{max-width:320px}
  .leiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid var(--anth-2)}
  .leiste a{display:flex;justify-content:center;align-items:center;gap:8px;padding:15px 10px;font-weight:700;text-decoration:none;color:#fff}
  .leiste a:first-child{background:var(--anth-2);border-right:1px solid #4A5055}
  .leiste a:last-child{background:var(--anth-2)}
  .leiste svg{width:20px;height:20px}
}
@media (max-width:600px){
  h1,h2,h3{-webkit-hyphens:manual;hyphens:manual} /* nur an ­ trennen, die umbau.py an Wortfugen setzt */
  h1{font-size:clamp(1.7rem,7.6vw,2.05rem)}
  .hero .punch{font-size:1.6rem}
  .fakten{grid-template-columns:1fr}
  .fakten li,.fakten li:nth-child(odd){border-left:0;padding:16px 0}
  .fakten li+li{border-top:1px solid var(--linie)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Ergänzung 09.11.2026 (2): Logo WALLER BAU, Leistungsliste, Vergleich, Einzugsgebiet ---------- */
.logo .logo-A{height:24px}
.logo .logo-B{height:36px}
.fuss .logo-A{height:30px}
.fuss .logo-B{height:44px}

.vergleich{width:100%;border-collapse:collapse}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-top:1px solid var(--linie)}
.vergleich thead th{font-size:.8rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--beton);border-top:0;padding-bottom:12px}
.vergleich tbody th{font-weight:700;width:22%}
.vergleich td{color:var(--text-2);width:39%}
.vergleich tbody tr:last-child>*{border-bottom:1px solid var(--linie)}
.vergleich.hervor td:last-child{color:var(--anth);font-weight:600;border-left:2px solid var(--anth);padding-left:18px}
.vergleich.hervor thead th:last-child{color:var(--anth);padding-left:20px}

.gebiet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:start}
.gebiet h2{margin-top:0}
.orte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));border-top:1px solid var(--linie)}
.orte li{padding:14px 10px 14px 0;border-bottom:1px solid var(--linie);font-weight:600}

.schritte.s1{grid-template-columns:1fr;gap:26px}
.schritte.s1 li::before{margin-bottom:10px}
.fotopaar{margin-top:clamp(40px,5vw,64px)}
.fotopaar .bild img{aspect-ratio:4/5;object-fit:cover}

@media (max-width:760px){
  .gebiet{grid-template-columns:1fr}
  .raster.fotopaar{grid-template-columns:1fr 1fr;gap:12px}
  .vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vergleich,.vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block;width:auto}
  .vergleich tr{border-top:2px solid var(--anth);padding:14px 0 18px}
  .vergleich tbody th,.vergleich td,.vergleich tbody tr:last-child>*{border:0;padding:3px 0}
  .vergleich td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--beton);margin-top:10px}
  .vergleich.hervor td:last-child{border-left:0;padding-left:0}
  .vergleich.hervor td:last-child::before{color:var(--anth)}
}
@media (max-width:600px){
  .logo .logo-A{height:20px}
  .logo .logo-B{height:30px}
}

/* ===== Ergänzung 09.11.2026 (3): Logo F und Bewegung =====
   Logo F laut Dominiks Foto: WALLER, darunter BAU weiß auf Rot (Kopf ohne Zeile, Fuß mit „Wir räumen. Wir sanieren.“) */
.logo .logo-F{height:50px}
.fuss .logo-F{height:104px}
.kopf{transition:box-shadow .3s}
.kopf.gescrollt{box-shadow:0 8px 24px -16px rgba(42,46,49,.45)}

/* Auftakt der Startseite (09.11.2026 abends, ersetzt den Scroll-Eingang): ruhig, Text links, Dominik rechts,
   darunter drei Wege (Räumen, Sanieren, Verkaufen). Farben je Variante in eingang-a/b/c.css (umbau.py, EINGANG). */
.auftakt{position:relative;overflow:hidden;padding:0;--wege-h:132px;--rand:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.at-innen{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);
  min-height:clamp(560px,calc(100svh - 72px - var(--wege-h)),760px)}
.at-text{align-self:center;padding:clamp(48px,6vw,88px) 0}
.at-ort{font-size:.82rem;letter-spacing:.03em;margin:0 0 22px}
.auftakt h1{font-size:clamp(2.3rem,4.2vw,3.75rem);font-stretch:112%;max-width:15em}
.at-akzent{display:block;font-weight:650;font-stretch:100%;font-size:.62em;line-height:1.2;margin-top:.45em;letter-spacing:0}
.auftakt .lead{max-width:33em}
.at-bild{margin:0;position:relative;align-self:end;justify-self:center;display:flex;align-items:flex-end}
.at-bild img{height:clamp(500px,calc(100svh - 72px - var(--wege-h) - 28px),730px);width:auto;max-width:none;position:relative;z-index:1}
.at-bild figcaption{position:absolute;z-index:2;left:-18px;bottom:28px;background:var(--anth-2);color:var(--kalk);padding:10px 16px 11px;line-height:1.35}
.at-bild figcaption b{display:block;font-size:1rem}
.at-bild figcaption span{display:block;font-size:.74rem;opacity:.85}
.wege{list-style:none;margin:0;padding:0 var(--rand);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;z-index:3}
.wege a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:baseline;height:100%;
  padding:24px clamp(20px,3vw,40px) 26px;text-decoration:none;transition:background-color .2s}
.wege li:first-child a{padding-left:0}
.wege a::after{content:"→";grid-column:3;grid-row:1;transition:transform .2s}
.wege a:hover::after{transform:translateX(4px)}
.wege a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.wege .nr{font-size:.8rem;grid-row:1}
.wege b{font-size:1.25rem;font-stretch:110%;grid-row:1}
.wege span:not(.nr){grid-column:2/4;grid-row:2;font-size:.95rem;line-height:1.45;margin-top:4px}
.wege li+li{border-left:1px solid var(--wege-linie)}
/* Ruhige Bewegung: einmal beim Laden weich einblenden, nichts beim Scrollen. Ohne „bewegt“ steht alles sofort da. */
.bewegt .at-text>*{animation:at-rein .9s cubic-bezier(.2,.7,.2,1) backwards}
.bewegt .at-text>:nth-child(2){animation-delay:.08s}.bewegt .at-text>:nth-child(3){animation-delay:.16s}.bewegt .at-text>:nth-child(4){animation-delay:.24s}
.bewegt .at-bild{animation:at-bild 1.1s cubic-bezier(.2,.7,.2,1) .1s backwards}
@keyframes at-rein{from{opacity:0;transform:translateY(14px)}}
@keyframes at-bild{from{opacity:0}}
@media (max-width:899px){
  .at-innen{grid-template-columns:1fr;min-height:0;gap:0}
  .at-bild{order:-1;justify-self:stretch;justify-content:center;height:clamp(250px,46vw,380px);overflow:hidden;align-items:flex-start;margin-top:20px}
  .at-bild img{height:auto;width:clamp(230px,44vw,330px)}
  .at-bild figcaption{left:50%;transform:translateX(-50%);bottom:14px;white-space:nowrap}
  .at-text{padding:28px 0 36px}
  .auftakt h1{font-size:clamp(2rem,8.4vw,2.6rem)}
  .wege{grid-template-columns:1fr;padding:0}
  .wege li+li{border-left:0;border-top:1px solid var(--wege-linie)}
  .wege a,.wege li:first-child a{padding:18px var(--pad)}
}
/* Ganz schmale Handys (320 px): Namensschild darf umbrechen, sonst ragt es 2 px über den Rand (gemessen 09.11.2026) */
@media (max-width:359px){.at-bild figcaption{white-space:normal;width:calc(100vw - 2*var(--pad));text-align:center}}

/* ===== Ruhige Fassung 09.11.2026 (4), aus dem Abgleich mit OLYMP Sanierung =====
   Abgeschaut ist nur der Aufbau: Leistungen als Foto-Kacheln, Formular am Seitenende, wenig Farbe.
   Farben, Schrift und die eckigen Kanten bleiben unsere. Der Auftakt weiter oben ist unverändert. */
.nav .btn-rot{background:var(--anth);color:var(--kalk)}
.nav .btn-rot:hover{background:var(--anth-2);color:#fff}
/* Kleine Etiketten standen in Schreibmaschinenschrift. Jetzt Archivo, etwas kräftiger und weiter gesetzt. */
.eyebrow,.fuss h3,.vergleich thead th,.vn .tag{font-weight:600;letter-spacing:.09em}
.at-ort{font-weight:600;letter-spacing:.05em}
.wege .nr{font-weight:700;letter-spacing:.06em}
.ohne-fuss{padding-bottom:0}
/* Der Senden-Knopf ist ein <button> und erbte die Schrift nicht (stand in Arial, gemessen 09.11.2026) */
button.btn{font-family:inherit;cursor:pointer}

/* Leistungen als Foto-Kacheln */
.kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px}
.kachel{display:block;text-decoration:none}
.kachel-bild{display:block;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.kachel-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.kachel:hover .kachel-bild img{transform:scale(1.03)}
.kachel-bild .foto{width:100%;height:100%;aspect-ratio:auto;font-size:.9rem}
.kachel h3{margin:16px 0 .3em;font-size:1.18rem;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kachel h3::after{content:"→";font-weight:400;color:var(--beton);transition:transform .2s}
.kachel:hover h3::after{transform:translateX(4px)}
.kachel p{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.5}
.ausserdem{margin:clamp(36px,4.5vw,60px) 0 0;padding-top:22px;border-top:1px solid var(--linie);color:var(--text-2);line-height:1.9}
.ausserdem a{font-weight:700;color:var(--anth);white-space:nowrap}

/* Anfrage am Seitenende: links Telefon und WhatsApp, rechts das Kurzformular auf heller Karte */
.anfrage{scroll-margin-top:72px}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.anfrage h2{margin-bottom:.5em}
.anfrage-tel{display:inline-block;margin-top:26px;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;font-stretch:110%;line-height:1.1;color:var(--kalk);text-decoration:none}
.anfrage-tel:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.anfrage .knoepfe{margin-top:18px}
.anfrage .orte-zeile{margin:36px 0 0;padding-top:20px;border-top:1px solid #4A5055;font-size:.95rem;line-height:1.7}
.anfrage .orte-zeile b{color:var(--kalk)}
.anfrage .formular{background:var(--weiss);color:var(--text);padding:clamp(22px,3vw,40px)}
.anfrage .formular h3{color:var(--text);margin:0 0 4px}
.anfrage .formular a{color:var(--anth)}
.anfrage .formular textarea{min-height:104px}

@media (max-width:960px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
}
@media (max-width:860px){
  .anfrage-raster{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Vergleich am Handy: Zeilentitel über die volle Breite. Vorher blieb er 22 % schmal und brach Wort für Wort um. */
  .vergleich tbody th,.vergleich td{width:auto}
}
@media (max-width:600px){
  .kachel h3{font-size:1.05rem;margin-top:12px}
  .kachel h3::after{content:none}
  .kachel p{font-size:.9rem}
  .ausserdem a{white-space:normal}
}

/* Einblenden beim Runterscrollen (Klasse „auf“ setzt nur das Skript, und nur unterhalb des ersten Bildschirms).
   Ruhige Fassung: kurzer Weg, kein Aufziehen der Bilder. */
.bewegt .auf{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--n,0)*60ms)}
.bewegt .auf.da{opacity:1;transform:none}
/* Unterseiten: Überschrift und Einleitung gleiten beim Laden herein */
.bewegt main > section.hero:first-child .wrap > div > *{animation:auf-rein .7s cubic-bezier(.2,.7,.2,1) backwards}
.bewegt main > section.hero:first-child .wrap > div > :nth-child(2){animation-delay:.08s}
.bewegt main > section.hero:first-child .wrap > div > :nth-child(3){animation-delay:.16s}
.bewegt main > section.hero:first-child .wrap > div > :nth-child(n+4){animation-delay:.24s}
@keyframes auf-rein{from{opacity:0;transform:translateY(14px)}}
@media print{.bewegt .auf{opacity:1;transform:none}}

/* Feinschliff 10.11.2026: weniger Linien, keine sichtbaren Lücken, ruhigere Fotos.
   Steht bewusst am Dateiende, damit er die Regeln weiter oben überstimmt. */
p,li{text-wrap:pretty}
::selection{background:var(--anth);color:var(--kalk)}

/* Faktenzeile: die senkrechten Striche sind weg, die Punkte stehen nur noch durch Abstand getrennt */
.fakten li,.fakten li:nth-child(odd){border-left:0}
@media (min-width:601px){
  .fakten{gap:0 clamp(24px,3vw,44px)}
  .fakten li,.fakten li:first-child,.fakten li:nth-child(odd){padding:28px 0 30px}
}

/* Leistung ohne eigenes Foto: dunkle Schriftkachel statt gestricheltem „Foto folgt“-Kasten */
.kachel-bild.ohne-foto{background:var(--anth);display:flex;align-items:flex-end;padding:clamp(14px,2vw,24px);transition:background .25s}
.kachel:hover .kachel-bild.ohne-foto{background:var(--anth-2)}
.kachel-wort{display:block;color:var(--kalk);font-weight:800;font-stretch:112%;font-size:clamp(1.25rem,2.3vw,2rem);line-height:1;letter-spacing:-.01em}
.kachel-wort::before{content:"";display:block;width:34px;height:2px;background:var(--sand);margin-bottom:14px}

/* Handyfotos mit Farbstich wirken nebeneinander unruhig: Farbe leicht zurücknehmen */
.kachel-bild img,.bild img,.portrait img{filter:saturate(.86)}

/* Abschnitt „Wer dahintersteht“: Querformat-Foto ohne Rahmen, am Rechner so breit wie der Text */
.portrait.quer{max-width:none;border:0;background:none}
.portrait.quer img{width:100%;aspect-ratio:3/2;object-fit:cover}

.ausserdem a{font-weight:600;text-decoration-thickness:1px}

@media (min-width:761px){
  .fuss{padding-bottom:56px} /* die 110 px braucht nur das Handy, dort liegt die feste Anrufleiste darüber */
  .fotopaar .bild img{aspect-ratio:1/1}
  .person.breit{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}

/* Startseiten-Auftakt Variante A: Hell und persönlich (Claudes Empfehlung). Stand 09.11.2026. umbau.py hängt die gewählte Datei an style.css an. */
.auftakt{background:var(--kalk);--wege-linie:var(--linie)}
.at-ort{color:var(--beton)}
.at-akzent{color:var(--text-2)}
.at-bild::before{content:"";position:absolute;left:12%;right:-6%;top:16%;bottom:0;background:var(--sand)}
.wege{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.wege .nr{color:var(--beton)}
.wege span:not(.nr){color:var(--text-2)}
@media (max-width:899px){.at-bild::before{left:18%;right:18%;top:22%}}

.vn.vn-start{aspect-ratio:1200/679;max-width:1000px;margin:0 auto}