/* =========================================================================
BUSHATI Gebäudedienste — Design-System
Farben aus dem Logo gemessen (siehe _tools/logo_prep.py):
Blau #1884c0 · Sand #ccc0a8 · Creme #f7f4ef · Anthrazit von der Visitenkarte
========================================================================= */
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;
font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;
font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
src:url(fonts/manrope-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
src:url(fonts/manrope-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* -------------------------------------------------------------------------
04.08.2026 — HELLE FASSUNG.
Vorgabe (Mirwan): "die seite ist viel zu dunkel, er will lieber weiss und
viel freundlicher, nicht so starr, professioneller wie eine grosse firma."
Zwei Drittel der Startseite waren dunkel gemessen (7.195 von 10.849 px).
Statt achtzehn Seiten einzeln umzufaerben ist EINE Rolle umgestellt: was
frueher eine dunkle Flaeche war, ist jetzt eine helle Akzentflaeche. Die
Klasse heisst weiter .dunkel, damit die Vorlagen unveraendert bleiben -
was sie BEDEUTET, steht hier an einer Stelle.
------------------------------------------------------------------------- */
:root{
--kreide:#FFFFFF; --papier:#FFFFFF; --kreide-2:#EEF2F6;
--flaeche:#F5F8FB; /* ruhige helle Bandflaeche */
--luft:#EFF6FD; /* zarter Blauhauch (Kontakt, Winter) */
--linie:#E2E8EE; /* Standardlinie auf Weiss */
--linie-2:#D3DCE4; /* kraeftigere Linie */
--sand:#8A7A4E; --sand-hell:#E9E2D2; --sand-tief:#6F6238;
--tinte:#111A21; --tinte-2:#28343D; --tinte-3:#4B5964;
--blau:#0E7BC0; --blau-tief:#0A4E7C; --blau-hell:#5FB3E8; --blau-nebel:#E8F3FC;
--blau-schrift:#0B6299; /* Blau, das auf Weiss 4.5:1 erreicht */
/* #65727C erreichte auf Weiss 5,2:1, auf der getoenten Chip-Flaeche (--kreide-2)
aber nur 4,39:1 - alle 20 verbliebenen Kontrastbefunde kamen aus dieser EINEN
Farbe. Ein Ton dunkler: 5,7:1 auf Weiss, 4,86:1 auf --kreide-2. */
--grau:#5E6B75; --grau-hell:#98A2A9;
--gruen:#1C7F46; /* Verfuegbarkeit: freundlich und auf Hell noch lesbar */
--winter:#1F6FA8; --fruehling:#5F8A3C; --sommer:#A6871F; --herbst:#9A5F22;
--lese:66ch;
--r-s:12px; --r-m:18px; --r-l:24px; --r-xl:32px;
--schatten:0 1px 2px rgba(17,26,33,.04),0 10px 28px -16px rgba(17,26,33,.20);
--schatten-hoch:0 2px 6px rgba(17,26,33,.05),0 30px 64px -30px rgba(17,26,33,.28);
--schatten-weich:0 24px 60px -34px rgba(17,26,33,.34);
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--kreide);color:var(--tinte);
font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:clamp(16.5px,.55vw + 15px,18px);line-height:1.62;
font-weight:400;letter-spacing:-.003em;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-weight:750;line-height:1.04;
letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
::selection{background:var(--blau);color:#fff}
/* --- Fokus: jeder Zustand muss lesbar sein --- */
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible{outline-color:var(--blau-tief)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:999;background:var(--tinte);color:#fff;
padding:12px 20px;border-radius:0 0 var(--r-s) var(--r-s);font-weight:700;transition:top .2s}
.skip:focus{top:0}
.wrap{width:min(1240px,100% - 2 * clamp(20px,5vw,64px));margin-inline:auto}
.eng{width:min(880px,100% - 2 * clamp(20px,5vw,64px));margin-inline:auto}
section{position:relative}
.block{padding-block:clamp(76px,10vw,148px)}
/* =========================== MARKEN-FORMEN ==============================
04.08.2026. Die Bildmarke besteht aus drei Dingen: einer sandfarbenen RAUTE,
drei blauen Haeusern und einem sandfarbenen BOGEN darunter. Blau war auf der
Seite ueberall, Raute und Bogen nirgends und Sand fast nicht - die Seite sah
darum aus wie ein sauberes Baukastenlayout und nicht wie DIESE Firma.
Beide Formen kommen jetzt als Gestaltungsmittel zurueck, sparsam: der Bogen
an zwei Abschnittsuebergaengen, die Raute als Wasserzeichen an zwei Stellen.
Zweimal ist ein Motiv, ueberall waere Effekthascherei.
====================================================================== */
/* Der BOGEN: die Farbe des Abschnitts DARUEBER schwingt nach unten in den
naechsten hinein - dieselbe Richtung wie der Bogen in der Bildmarke (Enden
hoch, Mitte tief). Er sitzt am folgenden Abschnitt, nicht am vorigen: die
Winterflaeche hat overflow:hidden und wuerde ihn abschneiden. */
.bogen-oben{--bogen:#FFFFFF}
.bogen-oben::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
height:clamp(26px,3.6vw,54px);background:var(--bogen);
border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none;z-index:1}
.bogen-oben > .wrap{position:relative;z-index:2}
.bogen-winter{--bogen:#EEF5FB}
.bogen-flaeche{--bogen:var(--flaeche)}
/* Die RAUTE: gerundetes Quadrat auf der Spitze, wie in der Bildmarke. Als
grosses, sehr leises Wasserzeichen - sie soll wirken, nicht auffallen. */
.raute-zeichen{position:absolute;aspect-ratio:1;border-radius:16%;
transform:rotate(45deg);pointer-events:none;
background:linear-gradient(140deg,var(--sand-hell),transparent 70%)}
/* Getoente Bandflaeche. Sie ersetzt die frueheren dunklen Sektionen als
Mittel, um Abschnitte voneinander zu trennen: hell genug fuer "weiss",
deutlich genug, damit weisse Karten darauf stehen. */
.getoent{background:var(--flaeche)}
.getoent + .getoent{padding-top:0}
/* Eine dunkle Sektion muss ihre Textfarbe selbst mitbringen. Ohne diese Zeile
erbt jede h2/h3 die dunkle Grundfarbe und steht unlesbar auf dunklem Grund -
auf sechs Unterseiten passiert, vom Kontrast-Durchlauf gefunden. */
/* .dunkel heisst seit dem 04.08. nicht mehr "dunkler Grund", sondern
"hervorgehobene Flaeche". Die Textfarben bleiben darum die normalen -
die Zeile muss trotzdem stehen bleiben, weil einzelne Bausteine sie
vorher ueberschrieben haben. */
.dunkel{color:var(--tinte-3)}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:var(--tinte)}
/* --- Kleine Marken-Bausteine --- */
/* Die Kennzeile war eine Versalien-Zeile mit Strich davor - korrekt, aber hart.
Als weiche Kapsel liest sie sich freundlicher und ordnet den Abschnitt
trotzdem eindeutig zu. */
.label{font-family:'Archivo',sans-serif;font-size:.73rem;font-weight:680;text-transform:uppercase;
letter-spacing:.14em;color:var(--blau-schrift);display:inline-flex;align-items:center;gap:.6em;
margin-bottom:1.25rem;background:var(--blau-nebel);border-radius:100px;
padding:.5em 1em .5em .8em;line-height:1}
.label::before{content:"";width:7px;height:7px;background:var(--blau);flex:none;border-radius:50%}
.dunkel .label{color:var(--blau-schrift);background:#fff;
box-shadow:inset 0 0 0 1px rgba(14,123,192,.16)}
.dunkel .label::before{background:var(--blau)}
.h-l{font-size:clamp(2rem,4.4vw,3.5rem)}
.lead{font-size:clamp(1.06rem,1.15vw,1.28rem);line-height:1.6;color:var(--tinte-3);max-width:var(--lese)}
.dunkel .lead{color:var(--tinte-3)}
/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:.62em;font-family:'Archivo',sans-serif;
font-weight:660;font-size:.98rem;letter-spacing:-.01em;padding:.92em 1.5em;border-radius:100px;
text-decoration:none;border:2px solid transparent;cursor:pointer;
transition:transform .28s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .28s}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-p{background:var(--blau);color:#fff;box-shadow:0 2px 6px -2px rgba(10,78,124,.28)}
.btn-p:hover{background:var(--blau-tief);color:#fff;transform:translateY(-2px);
box-shadow:0 6px 14px -6px rgba(10,78,124,.34)}
.btn-s{border-color:var(--linie-2);color:var(--tinte);background:#fff}
.btn-s:hover{border-color:var(--blau);background:#fff;color:var(--blau-tief);transform:translateY(-2px);
box-shadow:var(--schatten)}
.dunkel .btn-s{border-color:var(--linie-2);color:var(--tinte);background:#fff}
.dunkel .btn-s:hover{border-color:var(--blau);color:var(--blau-tief);background:#fff}
/* .btn-hell hiess "hell auf dunklem Grund". Auf heller Flaeche waere das
unsichtbar - er wird darum zum vollwertigen Hauptknopf. */
.btn-hell{background:var(--blau);color:#fff;box-shadow:0 2px 6px -2px rgba(10,78,124,.28)}
.btn-hell:hover{background:var(--blau-tief);color:#fff;transform:translateY(-2px)}
/* =========================== KOPFLEISTE ================================= */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;padding:14px 0 0;background:#fff;
transition:background .35s,box-shadow .35s,padding .35s}
.kopf.fest{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
box-shadow:0 1px 0 var(--linie),0 12px 30px -24px rgba(17,26,33,.55);padding:9px 0 0}
.kopf > .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,44px);margin-bottom:13px}
.kopf.fest > .wrap{margin-bottom:10px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;margin-right:auto}
.marke img{height:42px;width:auto;transition:height .35s}
.kopf.fest .marke img{height:36px}
.marke-txt{display:flex;flex-direction:column;line-height:1;gap:3px}
.marke-txt b{font-family:'Archivo',sans-serif;font-weight:760;font-size:1.2rem;letter-spacing:.02em;
color:var(--blau);font-stretch:100%}
.marke-txt span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-3);font-weight:600}
.nav{display:flex;gap:clamp(14px,1.6vw,28px);align-items:center}
.nav a{text-decoration:none;font-size:.93rem;font-weight:600;color:var(--tinte-3);
padding:6px 2px;position:relative;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
background:var(--blau);transition:right .3s var(--ease)}
.nav a:hover{color:var(--tinte)}
.nav a:hover::after{right:0}
.kopf .btn{padding:.72em 1.2em;font-size:.9rem}
/* Der Anruf-Knopf im ausgeklappten Menü — auf dem Handy ist er der einzige
sichtbare Weg zur Nummer, weil der Kopf-Knopf dort keinen Platz hat. */
.nav-tel{display:none}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
align-items:center;justify-content:center;flex:none;border-radius:50%}
.burger span{display:block;width:22px;height:2px;background:var(--tinte);position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;
background:inherit;transition:.3s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.menue-auf .burger span{background:transparent!important}
body.menue-auf .burger span::before{top:0;transform:rotate(45deg);background:var(--tinte)}
body.menue-auf .burger span::after{top:0;transform:rotate(-45deg);background:var(--tinte)}
/* =========================== HERO ======================================= */
/* Heller Hero: die Tiefe kommt nicht mehr aus einer dunklen Flaeche, sondern
aus zwei sehr weichen Farbschleiern und dem Schatten unter dem Foto. Das
Raster und die Koernung sind raus - beide haben die Seite technisch und
starr wirken lassen, genau das, was weg sollte. */
.hero{background:
radial-gradient(88% 72% at 86% 14%,var(--blau-nebel) 0%,transparent 64%),
radial-gradient(60% 50% at 2% 100%,#F1F6FA 0%,transparent 62%),
#fff;
color:var(--tinte-3);position:relative;overflow:hidden;
padding-top:clamp(150px,18vh,206px);padding-bottom:clamp(40px,5vh,64px);min-height:min(92vh,860px);
display:flex;align-items:center}
.hero .wrap{position:relative;z-index:2;display:grid;gap:clamp(36px,4vw,64px);
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
.hero h1{font-size:clamp(2.4rem,5.3vw,4.35rem);font-stretch:100%;font-weight:780;
letter-spacing:-.032em;color:var(--tinte)}
/* Kein Auftritt: die Ueberschrift steht beim ersten Bild vollstaendig da. */
.hero h1 .zeile{display:block}
.hero h1 .zeile i{display:block;font-style:normal}
/* Dritter Anlauf, und diesmal typografisch statt gebastelt: als Verlaufsbalken
lag die Betonung entweder ueber den Unterlaengen (62 %) oder als dicker
Streifen darin (92 %). text-decoration kennt die Schriftlinien und setzt den
Strich dorthin, wo er hingehoert - und laesst die Unterlaengen frei. */
.hero h1 em{font-style:normal;color:var(--blau);
text-decoration:underline;text-decoration-color:rgba(14,123,192,.32);
text-decoration-thickness:.055em;text-underline-offset:.16em;
text-decoration-skip-ink:auto}
@keyframes auf{to{transform:translateY(0)}}
.hero .lead{margin-top:1.4rem;font-size:clamp(1.06rem,1.2vw,1.24rem);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}
@keyframes ein{to{opacity:1}}
.tel-gross{font-family:'Archivo',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
/* Drei Zusagen direkt unter den Knoepfen. Sie stehen woertlich fuer das, was
weiter unten ausgefuehrt wird - eine grosse Firma beantwortet die drei
ersten Fragen, bevor man scrollen muss. */
.hero-zusagen{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;
gap:10px 26px}
.hero-zusagen li{display:flex;align-items:center;gap:10px;font-size:.93rem;
color:var(--tinte-2);font-weight:560}
.hero-zusagen svg{width:19px;height:19px;flex:none;stroke:var(--blau);fill:none;
stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Das Band unter dem Hero nennt die sieben Gewerke. Auf hellem Grund braucht
es keine eigene Flaeche mehr, nur eine ruhige Linie darueber. */
.band-dunkel{background:#fff;padding-bottom:clamp(30px,4.5vh,50px)}
.leistungsband{border-top:1px solid var(--linie);
padding-top:clamp(22px,2.6vw,32px);position:relative;z-index:2}
.leistungsband ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:10px}
.leistungsband li{font-family:'Archivo',sans-serif;font-size:.87rem;font-weight:640;
letter-spacing:-.01em;color:var(--tinte-2);display:inline-flex;align-items:center;gap:.6em;
background:var(--flaeche);border:1px solid var(--linie);border-radius:100px;
padding:.5em .95em .5em .75em;line-height:1.2;
transition:border-color .25s,background .25s,transform .25s var(--ease)}
.leistungsband li:hover{background:#fff;border-color:rgba(14,123,192,.35);transform:translateY(-1px)}
.leistungsband svg{width:17px;height:17px;flex:none;stroke:var(--blau);fill:none;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){
.leistungsband li{font-size:.8rem;padding:.42em .8em .42em .62em}
.leistungsband svg{width:15px;height:15px}
}
/* Gebäude-Zeichnung */
.haus{position:relative;justify-self:center;width:100%;max-width:520px}
/* Statt der Raute ein versetzter Sandrahmen hinter dem Foto: die Raute haette
ein hochformatiges Bild nur umschliessen koennen, wenn sie den halben Hero
fuellt - der Rahmen nimmt die Sandfarbe des Logos auf und bleibt ruhig. */
.raute-svg{display:none}
/* Hinter dem Foto stand erst eine kaum sichtbare 1-px-Linie, dann ein neutrales
blaugraues Rechteck. Beides war Gestaltung ohne Herkunft. Jetzt steht dort die
RAUTE aus der Bildmarke: sie ragt hinter dem Foto an allen vier Seiten hervor,
in Sand - der zweiten Markenfarbe, die auf der Seite sonst nirgends vorkam. */
.haus::before{content:"";position:absolute;z-index:0;
width:104%;aspect-ratio:1;left:50%;top:50%;
transform:translate(-50%,-50%) rotate(45deg);
border-radius:14%;pointer-events:none;
background:linear-gradient(135deg,#F2EDE0 0%,#F7F3EA 46%,#EFF4F8 100%)}
/* Ein hochformatiges Foto laesst sich von einer Raute nur umschliessen, wenn die
Raute deutlich breiter ist als der Platz - auf schmalen Geraeten stiess sie
darum an beide Bildschirmraender und hinterliess dort eine harte Diagonale.
Statt sie zu verkleinern (dann verschwindet sie hinter dem Foto) bekommt sie
dort weiche Kanten: die Form bleibt, der Schnitt faellt weg. */
@media (max-width:820px){
.haus::before{background:radial-gradient(closest-side,#F3EEE2 0%,#F6F2E9 55%,rgba(246,242,233,0) 100%)}
}
/* Hier stand zusaetzlich der Bogen als feine Linie unter dem Foto. Im Bild war er
kaum zu sehen und las sich eher wie ein Schmutzrand als wie Gestaltung - und
die Raute traegt an dieser Stelle die Marke schon. EINE Form je Stelle; der
Bogen arbeitet an den Abschnittsuebergaengen, wo er Struktur schafft. */
.hero-bild{position:relative;z-index:1;margin:0;border-radius:var(--r-xl);overflow:hidden;
box-shadow:var(--schatten-weich),0 0 0 1px rgba(17,26,33,.06);
transform:translateY(14px)}
.hero-bild img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;
will-change:transform}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.haus .raute{fill:none;stroke:var(--linie-2);stroke-width:2}
/* Das Schild sass als dunkler Glaskasten auf dem Foto. Als weisse Karte wirkt
es wie ein Beleg statt wie ein Overlay - und bleibt auf jedem Foto lesbar. */
.haus-schild{position:absolute;left:-5%;bottom:4%;z-index:4;background:#fff;
border:1px solid var(--linie);border-radius:var(--r-m);
padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--schatten-hoch);
opacity:1}
.haus-schild .punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen);flex:none;
box-shadow:0 0 0 0 rgba(28,127,70,.55);animation:puls 2.6s infinite}
/* 8 px statt 11: bei 11 ragte der Ring aus der Verfuegbarkeits-Kapsel heraus und
durchbrach deren Umriss. 9 px Punkt + 2 x 8 px = 25 px, die Kapsel ist hoeher. */
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(28,127,70,0)}100%{box-shadow:0 0 0 0 rgba(28,127,70,0)}}
.haus-schild b{font-family:'Archivo',sans-serif;font-size:.9rem;font-weight:700;display:block;
color:var(--tinte)}
.haus-schild span{font-size:.78rem;color:var(--grau);display:block}
/* =========================== LEISTUNGEN ================================= */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);
align-items:end;margin-bottom:clamp(38px,5vw,64px)}
.karten{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.4vw,20px)}
.karte{--kp:clamp(22px,2.2vw,30px);
grid-column:span 2;background:#fff;border:1px solid var(--linie);
border-radius:var(--r-xl);padding:var(--kp);position:relative;overflow:hidden;
display:flex;flex-direction:column;gap:13px;box-shadow:var(--schatten);
transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
.karte::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--blau);
transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.karte:hover{transform:translateY(-5px);box-shadow:var(--schatten-hoch);border-color:rgba(14,123,192,.28)}
.karte:hover::before{transform:scaleX(1)}
.karte.gross,.karte.halb{grid-column:span 3}
.karte-bild{margin:calc(-1 * var(--kp)) calc(-1 * var(--kp)) 4px;overflow:hidden;
background:var(--kreide-2);position:relative}
.karte-bild img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;
transition:transform .7s var(--ease)}
.karte:hover .karte-bild img{transform:scale(1.045)}
/* Sieben Fotos aus sieben Quellen sehen nebeneinander aus wie eine Bildersammlung.
Ein sehr leiser Markenschleier bindet sie zu einer Reihe zusammen; beim
Ueberfahren weicht er, dann sieht man das Foto pur. */
.karte-bild::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,24,28,.28) 0%,transparent 46%),
linear-gradient(150deg,rgba(14,123,192,.16),rgba(138,122,78,.1));
transition:opacity .5s var(--ease)}
.karte:hover .karte-bild::after{opacity:.35}
.karte .nr{position:absolute;top:clamp(10px,1.2vw,16px);right:clamp(16px,1.8vw,24px);
font-family:'Archivo',sans-serif;font-size:clamp(3.2rem,4.6vw,4.4rem);font-weight:830;
line-height:1;letter-spacing:-.04em;color:transparent;pointer-events:none;
-webkit-text-stroke:1.4px rgba(247,244,239,.62);z-index:2;
transition:color .4s var(--ease),-webkit-text-stroke-color .4s}
.karte:hover .nr{color:rgba(247,244,239,.16);-webkit-text-stroke-color:rgba(247,244,239,.9)}
.karte.gross{background:linear-gradient(158deg,#FFFFFF 0%,#FBFDFF 58%,#F2F8FD 100%)}
.karte .ikon{width:54px;height:54px;border-radius:16px;background:#fff;
display:grid;place-items:center;flex:none;margin-top:-40px;position:relative;z-index:2;
box-shadow:0 8px 22px -10px rgba(17,26,33,.4),0 0 0 1px var(--linie);
transition:background .3s,transform .35s var(--ease)}
.karte:hover .ikon{transform:translateY(-3px)}
.karte .ikon svg{width:27px;height:27px;stroke:var(--blau);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.karte:hover .ikon{background:var(--blau)}
.karte:hover .ikon svg{stroke:#fff}
.karte h3{font-size:clamp(1.16rem,1.35vw,1.38rem);letter-spacing:-.02em}
.karte p{color:var(--tinte-3);font-size:.97rem;line-height:1.58}
.karte{text-decoration:none;color:inherit}
.karte-mehr{margin-top:auto;font-family:'Archivo',sans-serif;font-weight:660;font-size:.88rem;
color:var(--blau-schrift);display:flex;align-items:center;gap:.5em;transition:gap .25s var(--ease)}
.karte-mehr::after{content:"›";font-size:1.2em;line-height:1}
.karte:hover .karte-mehr{gap:.85em}
.karte:focus-visible{outline-offset:4px}
.karte ul{list-style:none;margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--linie);
display:flex;flex-wrap:wrap;gap:7px}
.karte li{font-size:.79rem;font-weight:600;color:var(--tinte-3);background:var(--kreide-2);
padding:5px 11px;border-radius:100px;letter-spacing:-.005em}
.karte.gross p{font-size:1.02rem}
/* =========================== JAHR AM OBJEKT ============================= */
/* --jahr-bg an EINER Stelle: die klebende Ringhuelle auf dem Handy deckt den
durchlaufenden Text mit derselben Farbe ab. Zwei getrennte Werte waeren
irgendwann auseinandergelaufen. */
.jahr{--jahr-bg:#FFFFFF;background:var(--jahr-bg);color:var(--tinte-3);overflow:clip}
.jahr-lang{height:280vh;position:relative}
/* Das Panel klebt bei top:0 und zentriert seinen Inhalt ueber die volle
Bildschirmhoehe - die feste Kopfleiste liegt aber darueber und hat die obere
Kante des Rings samt DEZ/JAN/FEB verdeckt (auf 900 px Hoehe gemessen: Ring-
Oberkante bei 87 px, Leiste reicht bis 110 px). Ein Innenabstand in Hoehe der
Leiste zentriert im tatsaechlich sichtbaren Bereich. */
.jahr-kleben{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
padding-top:var(--kopf-h,152px)}
.jahr-kleben::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(46% 52% at 27% 48%,var(--blau-nebel) 0%,transparent 72%),
radial-gradient(50% 60% at 92% 8%,var(--flaeche) 0%,transparent 70%)}
.jahr-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:clamp(30px,5vw,70px);align-items:center;width:100%}
.ring-huelle{justify-self:center;width:100%}
.ring{position:relative;width:min(100%,460px);aspect-ratio:1;margin-inline:auto}
.ring svg{width:100%;height:100%;overflow:visible}
/* Der Ring lag auf Anthrazit und arbeitete darum mit hellen Linien auf dunklem
Grund. Auf heller Flaeche ist jede dieser Farben umgedreht: die Bahn wird
zur ruhigen grauen Spur, die Monate zu lesbarer Schrift. */
.ring .bahn{fill:none;stroke:#DDE5EC;stroke-width:5}
.ring .fort{fill:none;stroke:var(--blau);stroke-width:5;stroke-linecap:round;
transition:stroke-dashoffset .5s var(--ease),stroke .6s}
.ring .saison{fill:none;stroke-width:3;stroke-linecap:round;opacity:.3;
transition:opacity .5s,stroke-width .5s}
.ring .saison.an{opacity:1;stroke-width:5}
.ring .strich{stroke:#C6D2DC;stroke-width:1.5;stroke-linecap:round}
.ring .mon{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:660;letter-spacing:.06em;
fill:var(--grau);text-anchor:middle;dominant-baseline:middle;cursor:pointer;
transition:fill .3s,font-size .3s}
.ring .mon:hover{fill:var(--blau-tief)}
.ring .mon.aktiv{fill:var(--tinte);font-size:14.5px;font-weight:800}
.ring .zeiger{transition:transform .55s var(--ease)}
.ring .kugel{fill:var(--blau);stroke:#fff;stroke-width:3;
filter:drop-shadow(0 3px 8px rgba(14,123,192,.5))}
/* Die Mitte bekommt eine eigene weisse Scheibe: sonst schwimmt die Monatsangabe
ohne Halt in der Flaeche, sobald der Grund nicht mehr dunkel ist. */
.ring-mitte{position:absolute;inset:27%;display:grid;place-content:center;text-align:center;gap:5px;
background:#fff;border-radius:50%;box-shadow:0 8px 26px -16px rgba(17,26,33,.45),
0 0 0 1px rgba(17,26,33,.05)}
.ring-mitte .jz{font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--sand);font-weight:700;transition:color .5s}
.ring-mitte .mo{font-family:'Archivo',sans-serif;font-size:clamp(1.6rem,3vw,2.5rem);font-weight:780;
letter-spacing:-.02em;line-height:1;color:var(--tinte)}
.ring-mitte .heute{font-size:.72rem;color:var(--blau-schrift);font-weight:700;letter-spacing:.04em;
min-height:1.2em}
.jahr-text h2{margin-bottom:1.1rem}
.jahr-liste{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.jahr-liste li{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:var(--r-m);
border:1px solid transparent;
transition:background .35s,opacity .35s,border-color .35s,box-shadow .35s;opacity:.5}
.jahr-liste li.an{background:#fff;opacity:1;border-color:var(--linie);box-shadow:var(--schatten)}
.jahr-liste .pkt{width:8px;height:8px;border-radius:50%;background:var(--grau-hell);margin-top:.5em;flex:none;
transition:background .35s,transform .35s}
.jahr-liste li.an .pkt{background:var(--blau);transform:scale(1.35)}
.jahr-liste b{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;display:block;
color:var(--tinte)}
.jahr-liste span{font-size:.9rem;color:var(--tinte-3);display:block;line-height:1.5}
.jahr-hinweis{margin-top:1.7rem;font-size:.86rem;color:var(--grau);display:flex;
align-items:center;gap:10px}
.jahr-hinweis::before{content:"";width:22px;height:1px;background:var(--linie-2);flex:none}
/* =========================== WINTERDIENST =============================== */
/* 04.08.: Der Winterabschnitt war der dunkelste Block der Seite (#0B2537).
Winter braucht keine Nacht - eine helle Eisflaeche traegt dasselbe Thema
und bleibt im Rest der Seite. Die Schneeflocken bekommen in app.js einen
blaugrauen Ton, weil weisse auf Hell nicht mehr zu sehen waeren. */
.winter{background:linear-gradient(172deg,#F2F8FD 0%,#E8F2FA 58%,#EEF5FB 100%);
color:var(--tinte-3);overflow:hidden;position:relative}
.winter::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(1200px 500px at 22% -10%,rgba(255,255,255,.9),transparent 66%),
radial-gradient(900px 420px at 88% 110%,rgba(95,179,232,.14),transparent 70%)}
.winter canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75;z-index:1}
.winter .wrap{position:relative;z-index:2}
.winter-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(32px,5vw,76px);align-items:center}
.pflicht{background:#fff;border:1px solid rgba(31,111,168,.16);
border-radius:var(--r-xl);padding:clamp(24px,3vw,38px);box-shadow:var(--schatten)}
.pflicht h3{font-size:1.2rem;margin-bottom:.7rem;color:var(--winter)}
.pflicht p{font-size:.98rem;color:var(--tinte-3);line-height:1.6}
.pflicht p + p{margin-top:.8rem}
.winter-punkte{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:12px}
.winter-punkte li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;
color:var(--tinte-2)}
.winter-punkte svg{width:21px;height:21px;stroke:var(--winter);fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.24em}
/* =========================== FÜR WEN ==================================== */
/* Vier Zielgruppen als redaktionelle Zeilen statt vier gleicher Kaesten:
die Reihe liest sich als Liste, das Auge laeuft an den Nummern entlang,
und beim Ueberfahren tritt die jeweilige Zeile hervor. */
.wen{list-style:none;margin:0;padding:0;border-top:1px solid rgba(20,24,28,.12)}
/* 30.07.: Die Spalten richten sich nach dem, was in der Zeile steht.
Vorher standen hier fest vier Spalten. Auf den sieben Leistungsseiten hat eine
Zeile aber nur zwei Kinder (Nummer + Text) - die Folge waren 540 von 1212 px
leere Flaeche, waehrend der Text sich auf 519 px quetschte. Gemessen, nicht
geschaetzt. Startseite und Hausverwaltungen haben vier Kinder und behalten
ihre Aufteilung ueber die :has()-Regel darunter. */
.wen-z{display:grid;grid-template-columns:auto minmax(0,1fr);
gap:clamp(16px,2.4vw,38px);align-items:center;
padding:clamp(22px,2.6vw,34px) clamp(10px,1.4vw,22px);
border-bottom:1px solid rgba(20,24,28,.12);position:relative;
transition:background .4s var(--ease),padding-left .4s var(--ease)}
.wen-z::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--blau);transform:scaleY(0);transform-origin:top;
transition:transform .45s var(--ease)}
.wen-z:hover{background:var(--papier)}
.wen-z:hover::before{transform:scaleY(1)}
.wen-nr{font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;
color:#7A6B45;align-self:start;padding-top:.35em} /* dunkler als --sand-tief: 4.5:1 auf Kreide */
.wen-bild{width:56px;height:56px;border-radius:16px;background:var(--kreide-2);
display:grid;place-items:center;flex:none;transition:background .35s,transform .35s var(--ease)}
.wen-bild svg{width:28px;height:28px;stroke:var(--tinte-3);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.wen-z:hover .wen-bild{background:var(--blau);transform:rotate(-4deg) scale(1.04)}
.wen-z:hover .wen-bild svg{stroke:#fff}
.wen-txt b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1.1rem,1.5vw,1.32rem);
letter-spacing:-.02em;display:block;margin-bottom:.35rem}
.wen-txt>span{font-size:.95rem;color:var(--tinte-3);line-height:1.56;display:block;max-width:56ch}
.wen-tags{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.wen-tags i{font-style:normal;font-size:.76rem;font-weight:600;color:var(--grau);
background:var(--kreide-2);padding:5px 11px;border-radius:100px;white-space:nowrap}
/* =========================== ABLAUF ===================================== */
.ablauf{background:var(--flaeche);border-block:1px solid var(--linie)}
/* 04.08.2026: Die drei Schritte waren eine winzige blaue Ziffer, eine gestrichelte
Linie und zwei Absaetze - inhaltlich vollstaendig, optisch das Duennste auf der
Seite. Jetzt eine gesetzte Ziffer im Kreis, und die Verbindungslinie laeuft von
Kreis zu Kreis statt irgendwo darueber. */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:clamp(22px,2.6vw,40px);counter-reset:s;margin-top:clamp(34px,4.4vw,58px)}
.schritt{position:relative;padding-top:70px}
.schritt::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
font-family:'Archivo',sans-serif;font-size:1.28rem;font-weight:800;letter-spacing:-.02em;
color:#fff;background:var(--blau);
box-shadow:0 2px 8px -2px rgba(10,78,124,.4),0 0 0 6px #fff}
.schritt::after{content:"";position:absolute;top:26px;left:58px;right:calc(-1 * clamp(22px,2.6vw,40px));
height:2px;background:repeating-linear-gradient(90deg,var(--linie-2) 0 6px,transparent 6px 12px)}
.schritt:last-child::after{display:none}
/* --- Die drei Schritte laufen ab, statt einfach dazustehen -------------
Der Abschnitt beschreibt eine REIHENFOLGE. Wenn er ins Bild kommt, soll man
sie auch sehen: Ziffer 1 setzt sich, die Linie zeichnet sich bis Ziffer 2,
die setzt sich, und so weiter. Ausgeloest wird es von derselben Klasse .da,
die app.js schon fuer alle .rv-Elemente setzt - kein zweiter Beobachter.
---------------------------------------------------------------------- */
.schritt::before{transform:scale(.55);opacity:0;
transition:transform .55s cubic-bezier(.34,1.35,.5,1),opacity .4s var(--ease)}
.schritt.da::before{transform:none;opacity:1}
.schritt::after{transform:scaleX(0);transform-origin:left center;
transition:transform .8s var(--ease)}
.schritt.da::after{transform:scaleX(1)}
.schritte > .schritt:nth-child(1)::before{transition-delay:.05s}
.schritte > .schritt:nth-child(1)::after {transition-delay:.35s}
.schritte > .schritt:nth-child(2)::before{transition-delay:.95s}
.schritte > .schritt:nth-child(2)::after {transition-delay:1.15s}
.schritte > .schritt:nth-child(3)::before{transition-delay:1.75s}
/* 🚨 Jede Regel, die etwas UNSICHTBAR macht, braucht die Gegenregel.
Zwei Faelle, in denen .da nie gesetzt wird und die Ziffern sonst fuer immer
verschwunden waeren:
1. kein JavaScript -> .no-js bleibt am stehen
2. das Element steht beim Laden schon im Bild -> app.js gibt ihm .sofort und
nimmt es aus der Beobachtung. Das passiert, sobald jemand die Seite
gescrollt neu laedt. */
.no-js .schritt::before,.no-js .schritt::after,
.schritt.sofort::before,.schritt.sofort::after{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
.schritt::before,.schritt::after{opacity:1;transform:none;transition:none}
}
.schritt h3{font-size:1.2rem;margin-bottom:.5rem}
.schritt p{font-size:.95rem;color:var(--tinte-3);line-height:1.58}
@media (max-width:820px){
/* Untereinander gestapelt zeigt die waagerechte Linie ins Leere. */
.schritt::after{display:none}
.schritt{padding-top:0;padding-left:70px;min-height:52px}
.schritt::before{top:-4px}
}
/* =========================== KONTAKT ==================================== */
.kontakt{background:linear-gradient(180deg,#FFFFFF 0%,var(--luft) 100%);
color:var(--tinte-3);position:relative;overflow:hidden}
.kontakt::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 55% at 88% 12%,rgba(14,123,192,.07),transparent 70%)}
.kontakt .wrap{position:relative;z-index:2}
.k-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,76px)}
.k-wege{display:grid;gap:14px;margin-top:2rem}
.k-weg{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--r-m);
background:#fff;border:1px solid var(--linie);text-decoration:none;box-shadow:var(--schatten);
transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.k-weg:hover{border-color:var(--blau);transform:translateX(5px);box-shadow:var(--schatten-hoch)}
.k-weg .ikon{width:46px;height:46px;border-radius:13px;background:var(--blau-nebel);
display:grid;place-items:center;flex:none}
.k-weg svg{width:22px;height:22px;stroke:var(--blau);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.k-weg small{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--grau);font-family:'Archivo',sans-serif;font-weight:660;margin-bottom:3px}
.k-weg b{font-family:'Archivo',sans-serif;font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:720;
letter-spacing:-.01em;word-break:break-word;display:block;color:var(--tinte)}
/* Zwei Mobilnummern in einer Zeile: beide gleichwertig, beide anklickbar */
.k-tel{cursor:default}
.k-tel b + b{margin-top:2px}
.k-tel b a{text-decoration:none;transition:color .2s}
.k-tel b a:hover{color:var(--blau)}
.form{background:#fff;border:1px solid var(--linie);
border-radius:var(--r-xl);padding:clamp(24px,2.8vw,38px);box-shadow:var(--schatten-hoch)}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;
color:var(--tinte-2);margin-bottom:7px;font-family:'Archivo',sans-serif}
.feld input,.feld textarea,.feld select{width:100%;background:#FBFCFD;
border:1px solid var(--linie-2);border-radius:var(--r-s);padding:13px 15px;
color:var(--tinte);font-family:inherit;font-size:.97rem;transition:border-color .25s,background .25s,box-shadow .25s}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--grau-hell)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--blau);
background:#fff;box-shadow:0 0 0 4px rgba(14,123,192,.13)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--grau-hell)}
/* Das beanstandete Feld zeigt es selbst an - nicht nur der Satz darunter. */
.feld [aria-invalid="true"]{border-color:#B3402C;background:#FDF6F4}
.feld [aria-invalid="true"]:focus{border-color:#B3402C;box-shadow:0 0 0 4px rgba(179,64,44,.16)}
.feld textarea{resize:vertical;min-height:104px}
.feld select option{background:#fff;color:var(--tinte)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-hinweis{font-size:.8rem;color:var(--grau);margin-top:14px;line-height:1.5}
.form-hinweis a{color:var(--blau-schrift)}
.pflicht-stern{color:var(--blau)}
/* Bot-Falle: nicht display:none, sonst fuellen manche Bots sie trotzdem aus */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung{margin-top:14px;font-size:.92rem;line-height:1.5;min-height:0}
.form-meldung.gut{color:#14622F;font-weight:650}
.form-meldung.fehler{color:#96341F;font-weight:650}
.form .btn[disabled]{opacity:.62;cursor:progress}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* =========================== FUSS ======================================= */
.fuss{background:var(--flaeche);color:var(--tinte-3);
border-top:1px solid var(--linie);padding-block:clamp(48px,6vw,72px) 0;
font-size:.92rem;position:relative;overflow:hidden}
/* Die Raute der Bildmarke als grosses, halb angeschnittenes Wasserzeichen -
der Fuss war die einzige Flaeche der Seite ganz ohne Gestaltung. */
.fuss::before{content:"";position:absolute;pointer-events:none;
width:min(420px,42vw);aspect-ratio:1;right:-8%;top:-22%;
transform:rotate(45deg);border-radius:16%;
background:linear-gradient(140deg,rgba(233,226,210,.85),rgba(233,226,210,0) 68%)}
.fuss > .wrap{position:relative;z-index:1}
@media (max-width:760px){.fuss::before{display:none}}
/* 04.08.: Es sind VIER Spalten (Marke, Leistungen, Ratgeber, Kontakt), die
Regel liess aber nur drei zu - die Kontaktspalte fiel in eine zweite Reihe,
waehrend rechts daneben die halbe Breite leer blieb. */
.fuss-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
gap:clamp(28px,3.4vw,54px)}
/* 04.08.: aus h4 wurde h2. Die Fuss-Spalten waren die EINZIGE Stelle, an der die
Ueberschriften-Ebene sprang - h2 (letzter Abschnitt der Seite) -> h4 (Fuss), auf
JEDER der 19 Seiten. Das Aussehen bleibt gleich, nur die Ebene stimmt jetzt. */
.fuss h2{font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--tinte);margin-bottom:16px;font-weight:700;line-height:1.3}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{text-decoration:none;transition:color .2s}
.fuss a:hover{color:var(--blau-tief)}
.fuss .marke img{height:44px}
.fuss-unten{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--linie);
padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font-size:.84rem;
color:var(--grau)}
.fuss-unten .rechts{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
/* =========================== REVEAL ===================================== */
/* Nur was beim Laden unterhalb des Bildschirms liegt, wird eingeblendet - alles
Sichtbare bekommt .sofort und erscheint ohne Uebergang (siehe app.js). */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.da{opacity:1;transform:none}
.rv.sofort{opacity:1;transform:none;transition:none}
.rv-2{transition-delay:.06s}.rv-3{transition-delay:.11s}.rv-4{transition-delay:.16s}
.no-js .rv{opacity:1;transform:none}
/* =========================== RECHTSSEITEN =============================== */
.recht{padding-top:clamp(150px,16vh,196px)}
.recht h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:2rem}
.recht h2{font-size:1.25rem;margin:2.4rem 0 .8rem}
.recht h3{font-size:1.02rem;margin:1.6rem 0 .5rem}
.recht p,.recht li{color:var(--tinte-3);max-width:var(--lese)}
.recht ul{padding-left:1.1rem;display:grid;gap:.4rem}
.recht address{font-style:normal;line-height:1.8}
.entwurf{background:#FFF7E2;border:1px solid #E8CE85;border-left:4px solid #D9A93A;
border-radius:var(--r-s);padding:18px 22px;margin-bottom:2.4rem;font-size:.93rem;color:#6B5313}
.entwurf b{color:#4A3808}
/* =========================== RESPONSIV ================================== */
@media (max-width:1080px){
.hero .wrap{grid-template-columns:1fr;gap:44px}
.haus{max-width:440px;order:-1}
.karte{grid-column:span 3}
.karte.gross,.karte.halb{grid-column:span 6}
.kopfzeile{grid-template-columns:1fr;align-items:start;gap:18px}
.jahr-grid{grid-template-columns:1fr;gap:34px}
.ring{max-width:340px}
.winter-grid,.k-grid{grid-template-columns:1fr}
.fuss-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
/* Der obere Innenabstand muss die Kopfleiste freilassen - das Menue liegt mit
z-index:-1 dahinter. 96 px war fuer die alte Leiste geschaetzt; gemessen
ist sie hier rund 110 px hoch, der erste Menuepunkt lag darunter. */
.nav{position:fixed;inset:0 0 auto 0;flex-direction:column;background:var(--kreide);
padding:calc(var(--kopf-h,110px) + 16px) clamp(20px,5vw,40px) 40px;gap:4px;align-items:stretch;
box-shadow:0 24px 50px -20px rgba(20,24,28,.5);
transform:translateY(-101%);transition:transform .45s var(--ease);z-index:-1}
body.menue-auf .nav{transform:none}
body.menue-auf{overflow:hidden}
/* Ohne Abdunklung endete das aufgeklappte Menue als harte Kante mitten in der
Ueberschrift darunter - es sah aus, als waere die Seite zerschnitten. Der
Schleier liegt unter der Kopfleiste (z-index 100) und ueber dem Inhalt. */
body.menue-auf::before{content:"";position:fixed;inset:0;z-index:98;
background:rgba(17,26,33,.42);animation:schleier .35s var(--ease) both}
@keyframes schleier{from{opacity:0}to{opacity:1}}
.nav a{font-family:'Archivo',sans-serif;font-size:1.3rem;font-weight:680;color:var(--tinte)!important;
padding:15px 0;border-bottom:1px solid rgba(20,24,28,.08)}
.nav a::after{display:none}
.nav .nav-tel,.kopf .nav .nav-tel{display:inline-flex;justify-content:center;
background:var(--blau);color:#fff!important;border-bottom:0;margin-top:24px;
padding:1em 1.4em;font-size:1.05rem;box-shadow:0 2px 6px -2px rgba(10,78,124,.28)}
.nav .nav-tel:hover,.kopf .nav .nav-tel:hover{background:var(--blau-tief);color:#fff!important}
.nav{padding-bottom:48px}
.burger{display:flex;order:3}
.kopf .btn-tel{display:none}
.kopf.fest{background:var(--kreide)}
/* Jahr auf dem Handy: das Panel kann nicht kleben (Ring + Text passen nicht in
einen Bildschirm), also klebt nur der RING. Die Leistungsliste laeuft darunter
durch und treibt denselben Monatswechsel wie am Rechner. */
.jahr-lang{height:auto}
/* overflow:hidden am Vorfahren macht position:sticky wirkungslos - der Ring
scrollte dadurch einfach weg. (overflow:clip am Abschnitt stoert nicht.) */
.jahr-kleben{position:static;height:auto;overflow:visible;
padding-block:clamp(70px,10vw,110px) 0}
.jahr-grid{gap:0}
/* Der klebende Ring muss den durchlaufenden Text UEBERDECKEN. Dafuer traegt
er seine eigene Flaeche bis ueber den Bildschirmrand hinaus - jetzt in
der hellen Bandfarbe statt in Anthrazit. */
/* KEIN Abstand zur Kopfleiste: die Huelle deckt den durchlaufenden Text ab,
und clip-path:inset(0 …) schneidet oben genau an ihrer Kante. Jeder Spalt
zwischen Leiste und Huelle laesst Text durchscheinen (bei 6 px im Bild
gesehen). Der Abstand kommt darum als Innenabstand, nicht als Versatz. */
.ring-huelle{position:sticky;top:var(--kopf-h,110px);z-index:3;background:var(--jahr-bg);
padding:16px 0 18px;margin-bottom:26px;
box-shadow:0 20px 24px -10px var(--jahr-bg),0 0 0 100vmax var(--jahr-bg);
clip-path:inset(0 -100vmax)}
.ring{max-width:250px}
.ring .mon{font-size:11px}
.ring .mon.aktiv{font-size:13px}
.ring-mitte .mo{font-size:1.5rem}
.jahr-text{padding-bottom:clamp(70px,10vw,110px)}
.jahr-liste{margin-top:1.2rem}
.jahr-liste li{padding:34px 16px}
}
@media (max-width:900px){
.wen-z{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
.wen-nr{grid-row:1;align-self:center;padding-top:0}
.wen-bild{display:none}
.wen-tags{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
justify-content:flex-start;text-align:left}
}
@media (max-width:680px){
.karte,.karte.gross,.karte.halb{grid-column:span 6}
.zwei{grid-template-columns:1fr}
.fuss-grid{grid-template-columns:1fr}
/* Die Fuss-Verweise standen mit 27 px Hoehe eng untereinander - auf dem Handy
trifft man damit regelmaessig den Nachbarn. Groessere Trefferflaeche, ohne
dass die Liste optisch auseinanderfaellt. */
.fuss ul{gap:2px}
.fuss li a{display:inline-block;padding-block:9px}
.schritt::after{display:none}
.haus-schild{left:0;bottom:-14px;padding:11px 14px}
/* Der versetzte Rahmen ragte auf schmalen Geraeten ueber den Bildschirmrand */
.haus::before{inset:20px -8px -12px 20px}
.hero{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
.hero h1 .zeile i{transform:none}
.hero .lead,.hero-cta,.leistungsband,.haus-schild{opacity:1}
.haus .kontur{stroke-dashoffset:0}
.rv{opacity:1;transform:none}
}
/* =========================================================================
AB 30.07.2026 — MEHRSEITIGE FASSUNG
Neue Bausteine: Verfuegbarkeits-Band, Seitenkopf, Artikel-Layout,
Leistungsuebersicht, Argument-Karten, Aufklapper, Tabelle.
========================================================================= */
/* --- Verfuegbarkeit: das Band unter der Kopfleiste -----------------------
Vorgabe: eine Hausverwaltung muss auf den ersten Blick erkennen, ob er
ueberhaupt neue Objekte annimmt. Darum steht es auf JEDER Seite an erster
Stelle - nicht irgendwo weiter unten. Inhalt aus assets/status.json. */
/* Das Band ist die zweite Zeile der festen Kopfleiste. Frei darunter gesetzt
verschwand es unter der Kopfleiste (position:fixed) - erst der Seiten-Durchgang
hat das gezeigt. Eigener halbdurchsichtiger Grund, damit es sowohl ueber dem
dunklen Hero als auch unter der hellen Kopfleiste sitzt. */
.status{background:var(--flaeche);color:var(--tinte-3);font-size:.88rem;
border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
/* 04.08.: Hier stand overflow:hidden. Der Verfuegbarkeits-Punkt sass buendig
an der linken Kante des .wrap, und sein Pulsring (box-shadow mit 11 px
Ausdehnung) wurde genau dort abgeschnitten - Mirwan hat den halbierten Ring
gesehen. Geclippt wird jetzt nur noch der EINE Text, der zu lang werden
kann, statt der ganzen Zeile. */
.status .wrap{display:flex;align-items:center;gap:13px;padding-block:8px;flex-wrap:nowrap;
overflow:visible}
/* Verfuegbarkeit als Kapsel: sie ist die Angabe, auf die eine Hausverwaltung
zuerst schaut, und hebt sich als eigenes Element deutlicher ab als fette
Schrift in einer Zeile. */
.status-lage{display:inline-flex;align-items:center;gap:9px;flex:none;
background:#fff;box-shadow:inset 0 0 0 1px var(--linie);
border-radius:100px;padding:6px 15px 6px 13px;color:var(--tinte)}
.status-punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen);flex:none;
box-shadow:0 0 0 0 rgba(28,127,70,.55);animation:puls 2.8s infinite}
.status-punkt.knapp{background:#B7761B;animation:none}
.status-punkt.zu{background:#B3402C;animation:none}
/* Die Kapsel nimmt die Lage auf. Kennt ein Browser :has() nicht, bleibt sie
weiss und neutral - das ist in keinem Zustand falsch. */
.status:has(.status-punkt:not(.knapp):not(.zu)) .status-lage{
background:#EAF6EE;box-shadow:inset 0 0 0 1px rgba(28,127,70,.24);color:#14522F}
.status:has(.status-punkt.knapp) .status-lage{
background:#FCF3E4;box-shadow:inset 0 0 0 1px rgba(183,118,27,.26);color:#6B4408}
.status:has(.status-punkt.zu) .status-lage{
background:#FBEDEA;box-shadow:inset 0 0 0 1px rgba(179,64,44,.24);color:#7A2A1B}
.status b{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.01em}
.status-detail{color:var(--grau);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.status-stand{color:var(--grau-hell);font-size:.82rem;white-space:nowrap}
.status-stand::before{content:"\00B7";margin-right:.7em;color:var(--grau-hell)}
.status-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.5em;
font-family:'Archivo',sans-serif;font-weight:660;font-size:.88rem;text-decoration:none;
color:var(--blau-schrift);white-space:nowrap;flex:none;
transition:gap .25s var(--ease),color .2s}
.status-cta svg{width:1em;height:1em}
.status-cta:hover{gap:.85em;color:var(--blau-tief)}
@media (max-width:980px){
.status-stand{display:none}
}
@media (max-width:760px){
.status .wrap{gap:10px;padding-block:7px}
.status-detail,.status-cta{display:none}
.status{font-size:.82rem}
.status-lage{padding:4px 12px 4px 10px}
}
/* --- Seitenkopf der Unterseiten ---------------------------------------- */
.seitenkopf{background:
radial-gradient(80% 78% at 82% 16%,var(--blau-nebel) 0%,transparent 64%),
linear-gradient(180deg,#FFFFFF 0%,var(--flaeche) 100%);
color:var(--tinte-3);position:relative;overflow:hidden;
border-bottom:1px solid var(--linie);
padding-top:clamp(142px,15vh,184px);padding-bottom:clamp(46px,6vh,72px)}
.seitenkopf .wrap{position:relative;z-index:2}
/* --- Das Kopfbild ------------------------------------------------------
Drei Fassungen, und die ersten beiden waren falsch:
1. Als 22-%-Schleier ueber die volle Breite (aus der dunklen Zeit): auf hellem
Grund nur noch ein grauer Hauch, den man fuer einen Rendering-Rest hielt.
2. Volle Breite mit weissem Verlauf darueber, links deckend, nach rechts
aufblendend. Damit blieb die Ueberschrift lesbar - aber Mirwan hat genau
das Ergebnis beschrieben: "warum ist das Bild nur rechts? und mittig und
links nichts?" Ein Foto, das aus dem Nichts auftaucht, ist kein Bild,
sondern ein Schmier.
3. Jetzt ein BEGRENZTES Bild in der rechten Spalte, gerahmt und mit Schatten -
dieselbe Zweiteilung wie der Hero der Startseite. Es ist als Foto erkennbar,
hat einen Anfang und ein Ende, und die Ueberschrift steht auf weissem Grund.
---------------------------------------------------------------------- */
/* Der Kasten hing frueher oben UND unten am Inhalt. Damit wurde er so hoch wie
der Text - bei langen Ueberschriften ein hochkantiger Ausschnitt, in den von
einem Querformat-Foto nur ein Streifen passt ("man sieht nur einen Ausschnitt
von Balkons"). Jetzt hat er ein festes Verhaeltnis von 4:3, dasselbe wie die
Fotos: der Zuschnitt entspricht dem Bild, nicht der Textlaenge.
--kopfbild-pos kann eine Seite setzen, wenn ihr Motiv nicht mittig sitzt. */
.seitenkopf.mit-bild::after{content:"";position:absolute;z-index:1;pointer-events:none;
right:max(clamp(20px,5vw,64px),calc((100% - 1240px) / 2));
top:50%;transform:translateY(-50%);
width:min(38%,420px);aspect-ratio:4 / 3;
background-image:var(--kopfbild);background-size:cover;
background-position:var(--kopfbild-pos,center);
border-radius:var(--r-xl);
box-shadow:var(--schatten-weich),0 0 0 1px rgba(17,26,33,.07)}
/* Damit das Bild bei kurzem Text nicht aus dem Abschnitt ragt: der Kopf ist
mindestens so hoch wie Bild + Innenabstaende. Nebenwirkung ist erwuenscht -
alle Kopfbereiche mit Bild sind jetzt gleich hoch. */
@media (min-width:901px){
.seitenkopf.mit-bild{min-height:calc(clamp(142px,15vh,184px) + min(28.5vw,315px)
+ clamp(46px,6vh,72px));display:flex;align-items:center}
.seitenkopf.mit-bild > .wrap{width:min(1240px,100% - 2 * clamp(20px,5vw,64px))}
}
/* Die Raute der Bildmarke auch hier hinter dem Bild - dasselbe Motiv wie im Hero. */
.seitenkopf.mit-bild::before{content:"";position:absolute;z-index:0;pointer-events:none;
right:max(clamp(20px,5vw,64px),calc((100% - 1240px) / 2));
top:50%;width:min(38%,420px);aspect-ratio:1;
transform:translate(14%,-50%) rotate(45deg);border-radius:16%;
background:linear-gradient(140deg,rgba(233,226,210,.9),rgba(233,226,210,0) 72%)}
/* Der Text darf nicht unter das Bild laufen. */
.seitenkopf.mit-bild .wrap > *{max-width:min(52%,600px)}
@media (max-width:900px){
/* Zu schmal fuer zwei Spalten: das Bild wuerde den Text erdruecken. Die
Seiten ohne Kopfbild sehen genauso aus - kein Bruch im System. */
.seitenkopf.mit-bild::after,.seitenkopf.mit-bild::before{display:none}
.seitenkopf.mit-bild .wrap > *{max-width:none}
.seitenkopf h1{max-width:24ch}
.seitenkopf .lead{max-width:62ch}
}
.seitenkopf h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-stretch:100%;max-width:24ch;
color:var(--tinte)}
.seitenkopf .lead{margin-top:1.2rem;max-width:62ch}
.seitenkopf .hero-cta{margin-top:2rem}
/* --grau kam auf dem blaeulichen Kopfverlauf nur auf 4,39:1 - knapp unter AA.
Ein Ton dunkler, dann traegt die Zeile auf jedem Kopfbild. */
.krumen{display:flex;flex-wrap:wrap;gap:.5em;font-size:.82rem;margin-bottom:1.5rem;
color:var(--tinte-3);font-family:'Archivo',sans-serif;font-weight:600}
.krumen a{text-decoration:none;color:var(--blau-schrift)}
.krumen a:hover{color:var(--blau-tief);text-decoration:underline}
.krumen span::before{content:"\203A";margin-right:.6em;opacity:.6}
.nav a.hier{color:var(--tinte)!important;font-weight:700}
.nav a.hier::after{right:0}
/* --- Artikel (Ratgeber) ------------------------------------------------- */
.artikel{padding-block:clamp(48px,6vw,84px)}
.artikel-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;
gap:clamp(32px,5vw,72px);align-items:start}
.artikel-text{min-width:0;max-width:100%}
.artikel-text > * + *{margin-top:1.15em}
.artikel-text h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-top:2.3em;letter-spacing:-.022em;
scroll-margin-top:calc(var(--kopf-h,152px) + 20px)}
.artikel-text h3{font-size:clamp(1.14rem,1.5vw,1.34rem);margin-top:1.9em}
.artikel-text p,.artikel-text li{color:var(--tinte-3);line-height:1.68;max-width:70ch}
.artikel-text ul,.artikel-text ol{padding-left:1.25rem;display:grid;gap:.55rem}
.artikel-text li::marker{color:var(--sand-tief)}
.artikel-text strong{color:var(--tinte);font-weight:650}
.artikel-text a{color:#0B6299;text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:2px}
.artikel-text a:hover{color:var(--blau-tief)}
.artikel-vorsatz{font-size:clamp(1.08rem,1.25vw,1.24rem);color:var(--tinte-2);
line-height:1.6;font-weight:500;border-left:3px solid var(--sand);padding-left:1.2em}
.merke{background:var(--blau-nebel);border:1px solid rgba(14,123,192,.22);
border-radius:var(--r-m);padding:clamp(18px,2vw,26px);margin-block:1.8em}
.merke b{display:block;font-family:'Archivo',sans-serif;font-size:.76rem;letter-spacing:.15em;
text-transform:uppercase;color:#0B6299;margin-bottom:.6rem}
.merke p{color:var(--tinte-2);margin:0;max-width:none}
.merke.warnung{background:#FFF7E2;border-color:#E8CE85;border-left:4px solid #D9A93A}
.merke.warnung b{color:#7A5A0E}
.artikel-meta{display:flex;flex-wrap:wrap;gap:.6em 1.4em;font-size:.85rem;color:var(--grau);
font-family:'Archivo',sans-serif;font-weight:600;margin-bottom:2rem;
padding-bottom:1.4rem;border-bottom:1px solid rgba(20,24,28,.1)}
/* Seitenspalte */
.rand{position:sticky;top:calc(var(--kopf-h,152px) + 12px);display:grid;gap:18px}
.rand-karte{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten);
border-radius:var(--r-xl);padding:clamp(20px,2vw,26px)}
.rand-karte h4{font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.15em;
text-transform:uppercase;color:#7A6B45;margin-bottom:14px;font-weight:640}
/* #7A6B45 statt --sand-tief: erst dort werden 4.5:1 auf Papierweiss erreicht */
.rand-karte p{font-size:.92rem;color:var(--tinte-3);line-height:1.55}
.rand-karte ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rand-karte li a{font-size:.92rem;text-decoration:none;color:var(--tinte-2);
display:flex;gap:.6em;transition:color .2s}
.rand-karte li a::before{content:"\203A";color:var(--sand-tief)}
.rand-karte li a:hover{color:var(--blau)}
.rand-karte .btn{width:100%;justify-content:center;margin-top:14px}
.rand-tel{font-family:'Archivo',sans-serif;font-weight:760;font-size:1.28rem;
letter-spacing:-.01em;display:block;text-decoration:none;margin-bottom:4px}
.rand-tel:hover{color:var(--blau)}
/* Inhaltsverzeichnis */
.inhalt-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:iv}
.inhalt-liste li{counter-increment:iv}
.inhalt-liste a{display:flex;gap:.7em;font-size:.92rem;text-decoration:none;
color:var(--tinte-3);transition:color .2s}
.inhalt-liste a::before{content:counter(iv,decimal-leading-zero);
font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:700;color:var(--sand-tief);
padding-top:.25em}
.inhalt-liste a:hover{color:var(--blau)}
/* --- Aufklapper (FAQ) -------------------------------------------------- */
.faq{display:grid;gap:10px;margin-top:clamp(26px,3vw,40px)}
.faq details{background:var(--papier);border:1px solid rgba(20,24,28,.09);
border-radius:var(--r-m);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:rgba(14,123,192,.3);box-shadow:var(--schatten)}
.faq summary{cursor:pointer;padding:clamp(16px,1.8vw,22px) clamp(48px,5vw,58px)
clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
font-family:'Archivo',sans-serif;font-weight:680;font-size:clamp(1rem,1.2vw,1.12rem);
letter-spacing:-.015em;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:clamp(18px,2vw,26px);top:50%;
width:11px;height:11px;border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);
transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--blau-tief)}
.faq .antwort{padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,24px);
color:var(--tinte-3);line-height:1.65}
.faq .antwort > * + *{margin-top:.8em}
.faq .antwort ul{padding-left:1.1rem;display:grid;gap:.4rem}
/* --- Tabelle ----------------------------------------------------------- */
.tabelle-huelle{overflow-x:auto;max-width:100%;margin-block:1.8em;border-radius:var(--r-m);
border:1px solid rgba(20,24,28,.1)}
table.daten{width:100%;min-width:520px;border-collapse:collapse;font-size:.94rem;background:var(--papier)}
table.daten th,table.daten td{padding:13px 16px;text-align:left;
border-bottom:1px solid rgba(20,24,28,.09);vertical-align:top}
table.daten th{font-family:'Archivo',sans-serif;font-weight:680;font-size:.79rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--tinte);background:var(--kreide-2)}
table.daten td{color:var(--tinte-3);line-height:1.55}
table.daten tr:last-child td{border-bottom:0}
table.daten .ja{color:#256B42;font-weight:650}
table.daten .nein{color:#A03A28;font-weight:650}
/* --- Leistungsuebersicht ----------------------------------------------- */
.uebersicht{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:clamp(16px,1.8vw,24px)}
.ue-karte{background:var(--papier);border:1px solid rgba(20,24,28,.08);
border-radius:var(--r-l);overflow:hidden;text-decoration:none;display:flex;
flex-direction:column;transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.ue-karte:hover{transform:translateY(-5px);box-shadow:var(--schatten-hoch)}
.ue-karte img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
transition:transform .7s var(--ease)}
.ue-karte:hover img{transform:scale(1.045)}
.ue-txt{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.ue-txt h3{font-size:clamp(1.14rem,1.4vw,1.34rem)}
.ue-txt p{font-size:.95rem;color:var(--tinte-3);line-height:1.55}
.ue-mehr{margin-top:auto;font-family:'Archivo',sans-serif;font-weight:660;font-size:.9rem;
color:#0B6299;display:flex;align-items:center;gap:.5em;transition:gap .25s var(--ease)}
.ue-mehr::after{content:"\203A";font-size:1.2em;line-height:1}
.ue-karte:hover .ue-mehr{gap:.8em}
/* Kennzeile ueber dem Kartentitel - dieselbe Einordnung wie in der
Ratgeber-Uebersicht, damit ein Beitrag ueberall gleich aussieht. */
.ue-kat{font-family:'Archivo',sans-serif;font-size:.71rem;font-weight:680;
letter-spacing:.14em;text-transform:uppercase;color:var(--blau-schrift);
display:block;margin-bottom:-4px}
/* Abschluss unter einer Kartenreihe: mittig, als ruhiger Sekundaerknopf. */
.ratgeber-alle{margin-top:clamp(26px,3vw,40px);text-align:center}
.ratgeber-alle a{font-family:'Archivo',sans-serif;font-weight:660;font-size:.98rem;
color:var(--blau-schrift);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;
padding:.8em 1.6em;border:2px solid var(--linie-2);border-radius:100px;background:#fff;
transition:border-color .22s,color .22s,transform .28s var(--ease),box-shadow .28s}
.ratgeber-alle a::after{content:"\203A";font-size:1.25em;line-height:1}
.ratgeber-alle a:hover{border-color:var(--blau);color:var(--blau-tief);
transform:translateY(-2px);box-shadow:var(--schatten)}
/* --- Argument-Karten (dunkler Grund) ----------------------------------- */
.arg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:clamp(16px,1.8vw,22px)}
.arg-k{padding:clamp(22px,2.4vw,30px);border-radius:var(--r-xl);
background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)}
.arg-k .nr{font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:700;
letter-spacing:.15em;color:var(--blau-schrift);display:block;margin-bottom:12px}
.arg-k h3{font-size:clamp(1.08rem,1.3vw,1.24rem);margin-bottom:.5rem;color:var(--tinte)}
.arg-k p{font-size:.94rem;color:var(--tinte-3);line-height:1.6}
/* --- Ratgeber-Uebersicht ----------------------------------------------- */
.beitraege{display:grid;gap:clamp(14px,1.6vw,20px)}
/* 30.07.: Bildspalte ergaenzt. Die Ratgeber-Uebersicht war die einzige Kartenreihe
der Seite ohne Bilder und wirkte darum leer neben allen anderen. Die Bilder sind
dieselben, die im jeweiligen Beitrag oben stehen - so erkennt man den Beitrag wieder. */
.beitrag{display:grid;grid-template-columns:clamp(180px,24%,270px) 178px minmax(0,1fr);
gap:clamp(18px,2vw,28px);
background:var(--papier);border:1px solid rgba(20,24,28,.08);border-radius:var(--r-l);
padding:clamp(20px,2.2vw,26px);text-decoration:none;align-items:start;
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.beitrag:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.beitrag-kat{font-family:'Archivo',sans-serif;font-size:.71rem;font-weight:660;
letter-spacing:.14em;text-transform:uppercase;color:#0B6299}
.beitrag-lese{font-size:.82rem;color:var(--grau);display:block;margin-top:6px}
/* height:auto ist hier PFLICHT: das traegt width/height als Attribut (gegen
Layoutspruenge beim Laden). Stehen beide Masse fest, ignoriert der Browser
aspect-ratio - das Bild wurde 270x350 statt 270x169. */
.beitrag-bild{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
border-radius:var(--r-m);display:block;background:var(--kreide-2)}
.beitrag-drin{display:block;margin-top:.85rem;padding-top:.8rem;
border-top:1px solid rgba(20,24,28,.09);font-size:.83rem;color:var(--grau);
line-height:1.55}
.beitrag-drin b{font-family:'Archivo',sans-serif;font-weight:680;font-size:.72rem;
letter-spacing:.12em;text-transform:uppercase;color:#7A6B45;margin-right:.5em}
@media (max-width:900px){
.beitrag{grid-template-columns:clamp(150px,30%,220px) minmax(0,1fr)}
/* Die Meta-Spalte wandert ueber die Ueberschrift, sobald es eng wird. */
.beitrag > span:nth-of-type(1){grid-column:2;margin-bottom:-.4rem}
.beitrag > span:nth-of-type(2){grid-column:2}
}
@media (max-width:560px){
.beitrag{grid-template-columns:1fr}
.beitrag > span:nth-of-type(1),.beitrag > span:nth-of-type(2){grid-column:1}
.beitrag-bild{aspect-ratio:16/9}
}
.beitrag h3{font-size:clamp(1.16rem,1.5vw,1.42rem);margin-bottom:.5rem;letter-spacing:-.022em}
.beitrag p{font-size:.96rem;color:var(--tinte-3);line-height:1.58}
/* --- Abschluss-Aufruf -------------------------------------------------- */
.abschluss{background:linear-gradient(140deg,var(--luft) 0%,#FFFFFF 60%,var(--flaeche) 100%);
color:var(--tinte-3);position:relative;overflow:hidden;
border-top:1px solid var(--linie)}
.abschluss::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(56% 70% at 82% 20%,rgba(14,123,192,.08),transparent 70%)}
.abschluss .wrap{position:relative;z-index:2;display:grid;
grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.abschluss h2{font-size:clamp(1.6rem,3vw,2.5rem)}
.abschluss .lead{margin-top:.9rem}
.abschluss-tel{display:grid;gap:12px;justify-items:start}
@media (max-width:900px){
/* minmax(0,1fr) statt 1fr: sonst waechst die Spalte mit ihrem breitesten
Kind (der Tabelle) und die ganze Seite scrollt waagerecht - gemessen
562 px auf einem 390-px-Bildschirm. */
.artikel-grid{grid-template-columns:minmax(0,1fr)}
.rand{position:static}
.abschluss .wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
.beitrag{grid-template-columns:1fr;gap:12px}
}
/* --- Ablauf als numerierte Liste (Leistungsseiten) --------------------- */
.schritt-liste{list-style:none;margin:0;padding:0;counter-reset:sl;
display:grid;gap:2px;max-width:900px}
.schritt-liste li{counter-increment:sl;display:grid;grid-template-columns:auto 1fr;
gap:clamp(16px,2vw,26px);align-items:start;padding:clamp(16px,1.8vw,22px) 0;
border-bottom:1px solid rgba(20,24,28,.1)}
.schritt-liste li::before{content:counter(sl,decimal-leading-zero);
font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.1em;
color:#7A6B45;padding-top:.3em}
.schritt-liste li:last-child{border-bottom:0}
.schritt-liste span{color:var(--tinte-3);line-height:1.62;max-width:68ch}
/* --- Lesefortschritt (Artikelseiten) -----------------------------------
Bewegung, die auf den Nutzer reagiert statt beim Laden abzulaufen. Nur
transform, damit sie auf der Grafikkarte laeuft und kein Layout anfasst. */
.fortschritt{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;
background:var(--blau);transform:scaleX(0);transform-origin:0 50%;
will-change:transform;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fortschritt{display:none}}
/* --- Bilder in Ratgeber-Beitraegen ------------------------------------- */
/* Die Platzhalterfarbe sass an der FIGUR und lief darum als graue Flaeche hinter
der Bildunterschrift weiter. Sie gehoert ans Bild - dort tut sie, wozu sie da
ist (Flaeche waehrend des Ladens), und nirgends sonst. */
.artikel-band{width:min(1240px,100% - 2 * clamp(20px,5vw,64px));margin:clamp(26px,3vw,44px) auto 0;
position:relative}
.artikel-band img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover;
background:var(--kreide-2);border-radius:var(--r-xl)}
.artikel-band figcaption{margin:14px 0 0;padding-inline:2px;
font-size:.88rem;color:var(--grau);line-height:1.5;max-width:min(78ch,1240px);
padding-bottom:clamp(10px,1.5vw,18px)}
/* Bildunterschrift des Bandes */
.artikel-band figcaption::before{content:"";display:inline-block;width:22px;height:1px;
background:var(--sand-tief);vertical-align:middle;margin-right:.8em}
.artikel-bild{margin:2.2em 0}
.artikel-bild img{width:100%;height:auto;display:block;border-radius:var(--r-m);
aspect-ratio:16/10;object-fit:cover}
.artikel-bild figcaption{font-size:.87rem;color:var(--grau);line-height:1.5;margin-top:10px;
padding-left:1em;border-left:2px solid var(--sand)}
/* --- Vorschau-Leiste (nur solange die Seite nicht freigegeben ist) ------
Sitzt UEBER der Kopfleiste im Dokumentfluss, damit sie nichts verdeckt.
Die feste Kopfleiste rutscht dafuer um ihre Hoehe nach unten. */
.vorschau{position:relative;z-index:130;background:#7A2E22;color:#FBEFE9;
font-size:.84rem;line-height:1.4}
.vorschau .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
padding-block:9px}
.vorschau b{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;font-size:.72rem}
.vorschau-von{margin-left:auto;color:rgba(251,239,233,.78)}
.vorschau-von a{color:#F6C9B6}
body.mit-vorschau .kopf{top:var(--vh,42px)}
@media (max-width:760px){.vorschau-von{margin-left:0}}
/* --- Postfach-Seite -----------------------------------------------------
Nur er sieht diese Seite. Sie ist trotzdem gestaltet wie der Rest, denn sie ist das
erste, was er von dem bekommt, was er bezahlt. Aufbau bewusst als drei numerierte
Wege statt als Anleitungsliste: er soll EINEN Weg wählen, nicht alles lesen. */
.pf-einleitung{color:var(--tinte-3);font-size:clamp(1rem,1.3vw,1.1rem);
margin:0 0 .55rem;line-height:1.55}
.pf-adresse{font-family:'Archivo',sans-serif;font-weight:800;
font-size:clamp(1.02rem,3.4vw,1.62rem);letter-spacing:-.02em;color:var(--tinte);
background:var(--papier);border:1px solid rgba(20,24,28,.1);
border-left:5px solid var(--blau);border-radius:var(--r-s);
padding:.7em .9em;margin:0 0 .7rem;overflow-wrap:anywhere;
box-shadow:var(--schatten)}
.pf-passwort{color:var(--tinte-3);font-size:.95rem;margin:0 0 clamp(28px,3.4vw,44px)}
.pf-weg{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,22px);
background:var(--papier);border:1px solid rgba(20,24,28,.09);border-radius:var(--r-l);
padding:clamp(20px,2.4vw,30px);margin-bottom:clamp(14px,1.8vw,20px);
align-items:start}
.pf-weg-1{border-color:rgba(14,123,192,.34);box-shadow:var(--schatten)}
.pf-nr{width:44px;height:44px;flex:none;border-radius:50%;
display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:820;
font-size:1.2rem;background:var(--kreide-2);color:var(--tinte-2)}
.pf-weg-1 .pf-nr{background:var(--blau);color:#fff;
box-shadow:0 2px 6px -2px rgba(10,78,124,.3)}
.pf-weg h2{font-size:clamp(1.14rem,1.9vw,1.44rem);margin:.05em 0 .5em;letter-spacing:-.02em}
.pf-weg p{color:var(--tinte-3);line-height:1.6;margin:0 0 .9em;max-width:none}
.pf-weg > div > *:last-child{margin-bottom:0}
.pf-btn{margin:.2em 0 .9em}
.pf-klein{font-size:.88rem !important;color:var(--grau) !important;line-height:1.55}
.pf-schritte{margin:0 0 .9em;padding-left:1.35rem;display:grid;gap:.45rem;
color:var(--tinte-3);line-height:1.55;font-size:.95rem}
.pf-zwei{list-style:none;margin:0 0 .9em;padding:0;display:grid;gap:.5rem}
.pf-zwei li{position:relative;padding-left:1.6rem;color:var(--tinte-2);
font-size:1rem;overflow-wrap:anywhere}
/* Haken als Rahmen gezeichnet, damit kein Zeichensatz nachgeladen wird und nichts
als Ersatzkästchen erscheint. */
.pf-zwei li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.52rem;
height:.28rem;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);
transform:rotate(-45deg)}
.pf-faq{margin-top:clamp(26px,3.2vw,40px)}
.pf-faq .tabelle-huelle{margin:0}
.pf-hilfe{margin-top:clamp(22px,2.6vw,32px)}
.pf-zurueck{margin-top:clamp(26px,3vw,38px)}
@media (max-width:560px){
.pf-weg{grid-template-columns:1fr;gap:0}
.pf-nr{margin-bottom:14px}
.pf-btn{width:100%;justify-content:center}
}
/* ---------------------------------------------------------------------------
04.08.2026: Die vierteiligen Zeilen (Startseite, Hausverwaltungen) waren als
breite Zeilen gebaut. Gemessen war davon rund die Haelfte leere Flaeche: der
Text behaelt sein Lesemass, die Schlagworte kleben ganz rechts, dazwischen
ueber 300 px nichts. Vier Karten im 2x2-Raster fuellen dieselbe Hoehe mit
Inhalt statt mit Luft.
Die Auswahl bleibt an :has(> :nth-child(4)) haengen - genau der Regel, die
diese Zeilen schon vorher von den zweiteiligen der Leistungsseiten getrennt
hat. Die sieben Leistungsseiten sind damit unberuehrt.
--------------------------------------------------------------------------- */
/* Grundform zuerst, damit die Kartenregeln darunter sie ueberschreiben. */
.wen-z:has(> :nth-child(4)){grid-template-columns:auto auto minmax(0,1fr) auto}
.wen:has(.wen-z > :nth-child(4)){border-top:0;display:grid;gap:clamp(16px,1.8vw,22px)}
@media (min-width:760px){
.wen:has(.wen-z > :nth-child(4)){grid-template-columns:1fr 1fr}
}
.wen:has(.wen-z > :nth-child(4)) .wen-z{overflow:hidden;
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"nr bild" "txt txt" "tags tags";
align-items:center;gap:14px clamp(14px,1.6vw,18px);
background:#fff;border:1px solid var(--linie);border-radius:var(--r-xl);
box-shadow:var(--schatten);padding:clamp(22px,2.4vw,30px);
border-bottom:1px solid var(--linie)}
.wen:has(.wen-z > :nth-child(4)) .wen-z::before{
inset:auto 0 0 0;width:auto;height:3px;
transform:scaleX(0);transform-origin:left;
transition:transform .45s var(--ease)}
.wen:has(.wen-z > :nth-child(4)) .wen-z:hover{background:#fff;
border-color:rgba(14,123,192,.28);box-shadow:var(--schatten-hoch);
transform:translateY(-4px)}
.wen:has(.wen-z > :nth-child(4)) .wen-z:hover::before{transform:scaleX(1)}
.wen:has(.wen-z > :nth-child(4)) .wen-nr{grid-area:nr;align-self:center;padding-top:0}
.wen:has(.wen-z > :nth-child(4)) .wen-bild{grid-area:bild;justify-self:start;display:grid}
.wen:has(.wen-z > :nth-child(4)) .wen-txt{grid-area:txt}
.wen:has(.wen-z > :nth-child(4)) .wen-txt > span{max-width:none}
.wen:has(.wen-z > :nth-child(4)) .wen-tags{grid-area:tags;flex-direction:row;flex-wrap:wrap;
align-items:flex-start;justify-content:flex-start;text-align:left;
padding-top:.9rem;border-top:1px solid var(--linie)}
/* Ohne :has()-Unterstuetzung bleibt die alte Zeilenform stehen - die war nie
falsch, nur luftig. Kein Browser sieht dadurch etwas Kaputtes. */
/* Erste Spalte der Datentabellen festlegen: ohne Vorgabe misst der Browser nach
Inhalt, und dieselbe Tabelle war auf jeder Leistungsseite anders breit
(gemessen 179, 189, 255, 265 px). Das laesst die Seiten uneinheitlich wirken,
obwohl es dieselbe Sektion ist. */
table.daten th{width:26%;min-width:190px}
@media (max-width:620px){table.daten th{width:34%;min-width:140px}}
/* 11.08.2026: Auf dem Handy war diese Tabelle nur durch Wischen zu lesen. Gemessen
bei 375px: die Huelle ist 331 breit, die Tabelle 520 (min-width), also blieb vom
Wert eine 152px schmale Spalte uebrig - eine Hausverwaltung haette fuer JEDE
Zeile wischen muessen, ausgerechnet auf der Seite, die erklaert, was der
Winterdienst umfasst. Es ist eine Bezeichnungs-/Wert-Tabelle mit zwei Spalten,
also wird sie schmal einfach gestapelt: Bezeichnung ueber Wert, volle Breite,
kein seitliches Scrollen mehr. */
@media (max-width:620px){
.tabelle-huelle{overflow-x:visible}
table.daten{min-width:0}
table.daten tr{display:block;border-bottom:1px solid rgba(20,24,28,.12)}
table.daten tr:last-child{border-bottom:0}
table.daten th,table.daten td{display:block;width:auto;min-width:0;border-bottom:0}
table.daten th{padding:12px 16px 4px;background:transparent}
table.daten td{padding:0 16px 14px}
}
/* Sechs kurze Punkte in einer Spalte lassen rechts die halbe Seite leer - der Text
behaelt (richtigerweise) sein Lesemass, die Zeile ist aber ueber 1100 px breit.
Auf breiten Schirmen darum zwei Spalten. Nur fuer die einfachen Zeilen: die
vierteiligen auf Startseite und Hausverwaltungen brauchen die volle Breite. */
@media (min-width:900px){
.wen:not(:has(.wen-z > :nth-child(4))){display:grid;grid-template-columns:1fr 1fr;
column-gap:clamp(30px,3.4vw,62px)}
.wen:not(:has(.wen-z > :nth-child(4))) .wen-z{padding-inline:clamp(6px,.8vw,14px)}
}
/* --- Anrufen-Dialog ------------------------------------------------------
Drei Nummern statt einer in der Kopfleiste. Natives