/* Visuelles Familiensystem: lokale Hausmeisterservice-Variante der Am-Rhein-Referenzen */
:root{--navy:#082746;--blue:#0b5b90;--yellow:#ffc21c;--sky:#f4f8fb;--mint:#e7f1f5;--ink:#082746;--muted:#45627c;--line:#d7e1ea;--r:14px;--wrap:1240px}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.top{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.14);font-size:.78rem}.top>div{min-height:36px;align-items:center}.nav{height:88px}.brand{font-size:1.18rem;color:var(--navy);letter-spacing:-.025em}.brand span{color:var(--blue)}.brand small{color:#5d7489;font-weight:800}.navlinks{gap:28px;font-size:.83rem;color:var(--navy)}.navlinks a{position:relative;padding:9px 0}.navlinks a:after{content:'';position:absolute;height:2px;left:0;right:100%;bottom:2px;background:var(--yellow);transition:right .2s}.navlinks a:hover:after{right:0}.button{background:var(--yellow);border-color:var(--yellow);border-radius:5px;color:var(--navy);box-shadow:none;padding:14px 21px}.button:hover{background:#ffd24a;border-color:#ffd24a}.button.ghost{border-color:#fff;color:#fff;background:transparent}.hero{position:relative;overflow:hidden;background:var(--navy);padding:0;color:#fff}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,27,57,.95) 0%,rgba(4,27,57,.83) 43%,rgba(4,27,57,.3) 73%,rgba(4,27,57,.12)),linear-gradient(135deg,#092c4c,#0b5b90 58%,#315d5a)}.hero:after{content:'';position:absolute;right:-6vw;bottom:-14vw;width:58vw;height:58vw;border:1px solid rgba(255,255,255,.15);border-radius:50%;box-shadow:0 0 0 52px rgba(255,255,255,.035),0 0 0 104px rgba(255,255,255,.025)}.hero-grid{position:relative;z-index:1;min-height:550px;grid-template-columns:minmax(0,1fr) .68fr;gap:20px;align-items:center}.hero h1{max-width:14ch;font-size:clamp(3rem,5vw,5.3rem);line-height:.98;letter-spacing:-.06em;margin:16px 0 23px}.eyebrow{color:var(--yellow);font-size:.75rem;letter-spacing:.11em}.lead{max-width:38rem;color:#e3eef7;font-size:1.1rem;line-height:1.65}.hero .visual{z-index:1;justify-self:end;width:min(100%,470px);aspect-ratio:3/4;border:0;border-radius:0;background:linear-gradient(160deg,transparent 0 23%,rgba(223,240,246,.95) 23% 54%,transparent 54%),linear-gradient(135deg,#224d65,#73918b);box-shadow:none;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 15%)}.hero .visual:before{inset:25% 8% 0;clip-path:polygon(0 32%,52% 0,100% 25%,100% 100%,0 100%);background:linear-gradient(90deg,#dbe5e7 0 42%,#f7f8f4 42% 72%,#c8d4d7 72%)}.hero .visual b{color:#fff;text-shadow:0 2px 8px #000;font-size:.68rem}.strip{background:var(--navy);border-top:1px solid rgba(255,255,255,.16)}.strip .wrap{padding-top:26px;padding-bottom:26px}.strip strong{font-size:1rem}.strip span{color:#c9dce9;font-size:.88rem}.section{padding:92px 0}.section.alt{background:var(--sky)}.intro h2,.section h2{max-width:18ch;font-size:clamp(2.1rem,3.4vw,3.35rem);line-height:1.08;letter-spacing:-.05em}.cards{gap:16px}.card{min-height:254px;padding:0;border:1px solid #d4e0e8;border-radius:0;background:#fff;overflow:hidden;box-shadow:none}.card:before{content:'';display:block;height:92px;background:linear-gradient(135deg,#0a2d4b,#286b8e 60%,#92aaa1)}.card>*:not(.icon){margin-left:22px;margin-right:22px}.card .icon{position:relative;margin:-21px 0 14px 22px;width:43px;height:43px;background:var(--yellow);color:var(--navy)}.card h3{font-size:1.25rem;color:var(--navy)}.card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(8,39,70,.13)}.two{gap:72px}.section.alt .visual,.section .two .visual{border-radius:0;background:linear-gradient(140deg,#113b5b,#617a76);box-shadow:none;clip-path:polygon(10% 0,100% 0,100% 91%,90% 100%,0 100%,0 9%)}.section .two .visual:before{background:linear-gradient(90deg,#dce7e6 0 35%,#f7f8f5 35% 65%,#b8c9c7 65%);clip-path:polygon(0 25%,60% 0,100% 23%,100% 100%,0 100%)}.check li{border-color:#d7e1ea;padding:15px 0}.check li:before{color:var(--blue)}.districts{gap:10px}.districts a{border-radius:0;border-color:#d7e1ea;padding:13px 14px;font-weight:700}.districts a:hover{background:var(--navy);color:#fff}.page-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:92px 0}.page-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,34,63,.96),rgba(7,58,88,.7)),linear-gradient(135deg,#0d314e,#638d89)}.page-hero .wrap{position:relative;z-index:1}.page-hero .eyebrow{color:var(--yellow)}.page-hero h1{font-size:clamp(2.7rem,5vw,5rem);letter-spacing:-.055em;line-height:1.02;max-width:15ch}.page-hero .lead{color:#e4f0f9}.crumb{margin:0;max-width:none;padding:15px max(24px,calc((100% - 1192px)/2));background:#fff}.cta{background:var(--navy);padding:72px 0;border-top:4px solid var(--yellow)}.cta h2{font-size:clamp(2rem,3.5vw,3.3rem);letter-spacing:-.05em}.cta .button.ghost{border-color:var(--yellow);color:var(--yellow)}footer{border-top:1px solid rgba(255,255,255,.12);padding-top:60px}footer strong{color:#fff}footer a{color:#ccdeea;text-decoration:none}details{padding:20px 0;border-color:#d7e1ea}summary{font-size:1.06rem;color:var(--navy)}
@media(max-width:800px){.top>div{min-height:29px}.top span:last-child{display:none}.nav{height:61px}.brand{font-size:.96rem}.brand small{font-size:.54rem}.menu{color:var(--navy);display:block}.hero-grid{min-height:670px;grid-template-columns:minmax(0,1fr);padding-top:56px;padding-bottom:54px}.hero h1{font-size:clamp(2.35rem,10vw,3.15rem);max-width:100%;overflow-wrap:anywhere;word-break:normal}.hero .visual{position:absolute;z-index:-1;opacity:.37;right:-80px;top:0;width:440px;height:100%;clip-path:none}.lead{font-size:1rem;max-width:33rem}.hero .button.ghost{border-color:#fff;color:#fff}.strip .wrap{grid-template-columns:1fr 1fr;gap:0;padding:0}.strip .wrap>div{padding:18px 12px;border-bottom:1px solid rgba(255,255,255,.14)}.section{padding:64px 0}.intro h2,.section h2{max-width:100%;font-size:clamp(2rem,9vw,2.8rem)}.cards{grid-template-columns:1fr}.card{min-height:0}.two{gap:32px}.section .two .visual{aspect-ratio:4/3}.page-hero{padding:62px 0}.page-hero h1{font-size:clamp(2.55rem,11vw,4rem);max-width:100%}.navlinks{background:var(--navy);color:#fff;top:61px}.navlinks a:after{background:var(--yellow)}.districts{grid-template-columns:1fr 1fr}.cta{padding:56px 0}.crumb{padding:13px 18px} }

/* Echte Motive für das Leistungsraster auf der Startseite. */
.hero + .strip + .section .cards .card:before{height:138px;background-color:#16456a;background-position:center;background-size:cover}.hero + .strip + .section .cards .card:nth-child(1):before{background-image:url('assets/objektbetreuung.webp')}.hero + .strip + .section .cards .card:nth-child(2):before{background-image:url('assets/aussenanlagenpflege.webp')}.hero + .strip + .section .cards .card:nth-child(3):before{background-image:url('assets/winterdienst.webp')}.hero + .strip + .section .cards .card:nth-child(4):before{background-image:url('assets/kleinreparaturen.webp');background-position:left 50%}.hero + .strip + .section .cards .card:nth-child(5):before{background-image:url('assets/muelltonnenservice.webp');background-position:center 48%}.hero + .strip + .section .cards .card:nth-child(6):before{background-image:url('assets/kontrollgaenge.webp');background-position:center 56%}
.hero + .strip + .section .cards .card{background:var(--navy);border-color:var(--navy)}.hero + .strip + .section .cards .card h3{color:#fff}.hero + .strip + .section .cards .card p{color:#d9e9f4}.hero + .strip + .section .cards .card .icon{box-shadow:0 0 0 4px var(--navy)}
.regional-cities{padding-top:34px!important}.regional-city{margin-top:52px;padding-top:36px;border-top:1px solid #cfdde7}.regional-city h2,.regional-city h3{margin:0 0 18px;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.04em;color:var(--navy)}.regional-city .districts{margin-top:0}.regional-city .districts a{background:var(--navy);border-color:var(--navy);color:#fff;border-radius:6px}.regional-city .districts a:hover{background:var(--blue);border-color:var(--blue)}

/* Bezirks- und Nachbarschaftslinks: eine klare blaue Kachel-Familie auf jeder Seite. */
.districts a{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(8,39,70,.08)}.districts a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* Bildführung wie in den Referenzen: echtes Arbeitsmotiv im Hero und im Inhaltsbild, mit klarer blauer Lesefläche. */
.page-hero{background-image:var(--hero-start,url('assets/hausmeister-objektkontrolle-hero.webp'));background-position:center;background-size:cover;min-height:410px;display:flex;align-items:center}.hero{background-image:var(--hero-start,none);background-position:center;background-size:cover}.page-hero:before{background:linear-gradient(90deg,rgba(4,27,57,.96) 0%,rgba(4,27,57,.86) 47%,rgba(4,27,57,.30) 100%)}.page-hero .wrap{width:100%}.hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.1s ease}.hero-loop.is-active{opacity:1}.page-hero>.wrap{position:relative;z-index:2}.page-hero:before{z-index:1}.page-hero+.section .two .visual{background-image:url('assets/kontrollgaenge.webp');background-position:center;background-size:cover;min-height:340px}.page-hero+.section .two .visual:before{background:linear-gradient(110deg,rgba(8,39,70,.15),rgba(8,39,70,.02));clip-path:none}.page-hero+.section .two .visual b{z-index:1;text-shadow:0 2px 8px #000}.section.alt{border-top:1px solid #d8e3eb;border-bottom:1px solid #d8e3eb}.section.alt>.wrap>h2:before{content:'';display:block;width:48px;height:3px;background:var(--yellow);margin:0 0 18px}.universal-cta{border-top:0}
.hero-loop{z-index:0}.hero:before,.page-hero:before{z-index:1}.hero:before{background:linear-gradient(90deg,rgba(4,27,57,.97) 0%,rgba(4,27,57,.86) 42%,rgba(4,27,57,.34) 72%,rgba(4,27,57,.16) 100%)}.hero-grid,.page-hero>.wrap{z-index:2!important}.hero:has(.hero-loop) .hero-grid{grid-template-columns:minmax(0,1fr)}.hero:has(.hero-loop) .visual{display:none}.hero-dots{position:absolute;z-index:3;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.hero-dot{width:38px;height:4px;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer;transition:background .2s}.hero-dot.is-active{background:var(--yellow)}.hero-dot:hover{background:#fff}@media(max-width:800px){.hero-dots{bottom:18px}.hero-dot{width:26px}}
.brand{width:350px;height:64px;background:url('assets/hausmeisterservice-am-rhein-logo.webp') left center/contain no-repeat;font-size:0!important;flex:0 0 auto}.brand span,.brand small{display:none}.brand:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}footer .wrap>div:first-child:before{content:'';display:block;width:210px;height:74px;margin:0 0 16px;background:#fff url('assets/hausmeisterservice-am-rhein-logo.webp') center/contain no-repeat;border-radius:6px}@media(max-width:800px){.brand{width:220px;height:48px}footer .wrap>div:first-child:before{width:190px;height:66px}}
.city-hero{background-image:var(--hero-start,url('assets/hausmeister-objektkontrolle-hero.webp'));background-position:center;background-size:cover}.city-hero:before{background:linear-gradient(90deg,rgba(5,34,63,.94),rgba(5,34,63,.72),rgba(5,34,63,.24))}
.hero .actions{margin-bottom:44px}
/* Die CTA-Zeile bleibt beim Wechsel der Hero-Texte immer an derselben Position. */
/* Der gesamte Text- und CTA-Block bleibt im normalen Layoutfluss.
   Die reservierte Textfläche verhindert Sprünge beim Wechsel der Slidertexte. */
.hero h1{max-width:16ch}
.hero .lead{min-height:5.1em;margin-bottom:0}
.hero .actions{position:static;left:auto;bottom:auto;margin-top:28px;margin-bottom:44px;z-index:3}
@media(max-width:800px){.hero .lead{min-height:6.6em}.hero .actions{margin-bottom:34px}}
.page-hero .lead{min-height:3.3em;margin-bottom:0}.page-hero .actions{margin-top:28px;margin-bottom:6px}.page-hero .button.ghost{border-color:#fff;color:#fff;background:transparent}
@media(max-width:800px){.page-hero .lead{min-height:4.95em}}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:92px;align-items:start}.legal-card{background:var(--sky);border-top:4px solid var(--yellow);padding:26px 24px;color:var(--muted)}.legal-card strong{color:var(--navy)}.legal-card p{margin:10px 0 0}.legal-copy{max-width:720px}.legal-copy h2{margin:0;padding:0 0 14px;font-size:clamp(1.55rem,2.5vw,2.2rem);line-height:1.14;border-bottom:1px solid var(--line)}.legal-copy h2:not(:first-child){margin-top:38px}.legal-copy p{margin:16px 0;color:var(--muted)}.legal-copy a{color:var(--blue);font-weight:700}.legal-note{padding:16px 18px;border-left:4px solid var(--yellow);background:var(--sky);color:var(--ink)!important}@media(max-width:800px){.legal-layout{grid-template-columns:1fr;gap:32px}.legal-card{max-width:420px}}
.nav{height:70px}.brand{width:400px;height:60px}
@media(max-width:800px){.nav{height:61px}.brand{width:230px;height:50px}}

/* Einheitliche, sanft gerundete Kacheln auf allen Seiten. */
.card,.districts a,.legal-card{border-radius:10px}

/* Kopfbereich bleibt beim Scrollen sichtbar. */
.top{position:sticky;top:0;z-index:100}
header{position:sticky;top:36px;z-index:99;background:#fff}
@media(max-width:800px){header{top:29px}}

/* Gemeinsamer Hero-Rahmen: kein Inhalt liegt mehr direkt unter der fixen Navigation. */
.hero-grid{min-height:610px;padding-top:38px;padding-bottom:46px}
.hero h1{font-size:clamp(2.8rem,4.5vw,4.75rem);margin-top:18px}
.page-hero{min-height:460px;padding-top:58px;padding-bottom:58px}
.page-hero h1{margin-top:14px}
@media(max-width:800px){
  .hero-grid{min-height:620px;padding-top:58px;padding-bottom:58px}
  .hero h1{font-size:clamp(2.35rem,9vw,3.45rem);margin-top:16px}
  .page-hero{min-height:500px;padding-top:70px;padding-bottom:60px}
}

/* Luftigere Inhaltskarten statt gedrückter Kacheln. */
.cards{gap:20px}
.card{min-height:330px;border-radius:12px;box-shadow:0 8px 20px rgba(8,39,70,.10)}
.card:before,.hero + .strip + .section .cards .card:before{height:150px}
.card>*:not(.icon){margin-left:24px;margin-right:24px}
.card .icon{margin-left:24px}
.card h3{margin-top:18px;margin-bottom:10px}
.card p{line-height:1.6}
.card:hover{box-shadow:0 16px 32px rgba(8,39,70,.16)}
@media(max-width:800px){.card{min-height:0}.card:before,.hero + .strip + .section .cards .card:before{height:165px}}

/* Breadcrumb im Hero: die feste Kopfzeile bleibt dadurch kompakt. */
.page-hero .crumb{background:transparent;color:#dbe9f4;max-width:none;margin:0 0 18px;padding:0;font-size:.85rem}

/* Hero-Motive etwas nach unten setzen: oben bleibt genug Raum für Köpfe und Gesichter. */
.hero-loop{object-position:center 14%}
.page-hero,.city-hero{background-position:center 14%}
.page-hero .crumb a{color:#fff}
@media(max-width:800px){.two{grid-template-columns:minmax(0,1fr)}.two>*{min-width:0}.section .two .visual{width:100%;max-width:100%}}
@media(max-width:800px){html,body{overflow-x:hidden}}

/* Phase 3: vorhandene Fachmotive werden pro Leistung statt als generisches Bild wiederverwendet. */
.image-visual{margin:0;position:relative;overflow:hidden;background:#16456a;clip-path:polygon(10% 0,100% 0,100% 91%,90% 100%,0 100%,0 9%)}
.image-visual:before{display:none!important}.image-visual img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center}
.service-card:before{display:none!important}.service-card .card-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0!important}.service-card .icon{z-index:1}.service-card h3{margin-top:18px}
@media(max-width:800px){.image-visual img{min-height:0;aspect-ratio:4/3}.service-card .card-image{height:auto;aspect-ratio:3/2}}

/* Leistungskacheln: dieselbe blaue Familie wie auf der Startseite, auf jeder Seite. */
.service-card{background:var(--navy)!important;border-color:var(--navy)!important}
.service-card h3{color:#fff!important}.service-card p{color:#d9e9f4!important}
.service-card .icon{background:var(--yellow)!important;color:var(--navy)!important;box-shadow:0 0 0 4px var(--navy)!important}
/* Servicekacheln: ruhige Bild/Text-Trennung statt runder Pfeilmarkierung. */
.service-card .icon{display:none!important}
.service-card .card-image{border-bottom:5px solid var(--yellow)}

/* Leistungs-Kacheln: klare Lesereihenfolge und ausgewogene Textflächen. */
.cards:has(.service-card){gap:24px;grid-auto-rows:1fr}
.service-card{display:flex;flex-direction:column;min-height:0;border-radius:12px;box-shadow:0 10px 26px rgba(8,39,70,.12)}
.service-card .card-image{flex:0 0 auto}
.service-card h3{margin:22px 26px 9px!important;font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.16;letter-spacing:-.025em}
.service-card p{margin:0 26px 27px!important;max-width:31ch;font-size:.98rem;line-height:1.58}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(8,39,70,.18)}
@media(max-width:800px){.cards:has(.service-card){gap:18px}.service-card h3{margin:19px 20px 8px!important;font-size:1.25rem}.service-card p{margin:0 20px 23px!important;font-size:1rem}}

/* Ruhigere Grundschrift und ein klarer Telefon-CTA im Header. */
body{font-weight:400}
.navlinks,.button,summary,.districts a{font-weight:700}
.call-button{gap:10px;min-width:225px;padding:9px 17px!important;line-height:1.1}.call-button small{display:block;margin-top:2px;font-size:.76rem;font-weight:800;letter-spacing:.015em}
.call-button-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--yellow);font-size:.9rem;line-height:1}
@media(max-width:800px){.call-button{min-width:0}.call-button-icon{width:26px;height:26px}}

/* Rückverlinkung vom Stadtteil zur jeweiligen Stadtübersicht. */
main:has(.crumb) .districts + p a{font-weight:700}

/* Lokale Umfangs- und Abgrenzungsabschnitte: klarer blauer Gegenpol zwischen Einleitung und Leistungen. */
main:has(.crumb) .local-scope{background:var(--navy)!important;border-color:rgba(255,255,255,.16)!important;color:#e5f0f7}
main:has(.crumb) .local-scope h2,main:has(.crumb) .local-scope h3,main:has(.crumb) .local-scope summary{color:#fff!important}
main:has(.crumb) .local-scope p{color:#d6e6f1}
main:has(.crumb) .local-scope details{border-color:rgba(255,255,255,.22)}
main:has(.crumb) .local-scope summary::marker{color:var(--yellow)}

/* Hauptseiten-Betreuungsabschnitt: blau wie die lokalen Umfangsabschnitte. */
.section.alt:has(> .wrap.two){background:var(--navy)!important;border-color:rgba(255,255,255,.16)!important;color:#e5f0f7}
.section.alt:has(> .wrap.two) h2,.section.alt:has(> .wrap.two) h3{color:#fff!important}
.section.alt:has(> .wrap.two) p{color:#d6e6f1}

/* Stadt-Hubs: Orientierungstext links, passendes Stadtmotiv rechts. */
.area-hub-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(32px,6vw,78px)}
.area-hub-copy h2{margin-top:8px}
.area-hub-link{margin-top:28px}
.area-hub-visual{margin:0;aspect-ratio:16/10;overflow:hidden;clip-path:polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%);background:var(--navy)}
.area-hub-visual img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:800px){.area-hub-layout{grid-template-columns:1fr;gap:30px}.area-hub-visual{aspect-ratio:16/10}.area-hub-link .button{width:100%}}

/* Lokaler Schwerpunkt: durchgehend blau wie die übrigen hervorgehobenen Inhaltsblöcke. */
main:has(.crumb) .local-focus{background:var(--navy)!important;border-color:rgba(255,255,255,.16)!important;color:#e5f0f7}
main:has(.crumb) .local-focus h2,main:has(.crumb) .local-focus h3{color:#fff!important}
main:has(.crumb) .local-focus p{color:#d6e6f1}
main:has(.crumb) .local-focus .eyebrow{color:var(--yellow)}

/* Leistungsumfang auf den sechs Leistungs-Unterseiten: derselbe blaue Abschluss wie im übrigen Seitensystem. */
.service-scope{background:var(--navy)!important;border-color:rgba(255,255,255,.16)!important;color:#e5f0f7}
.service-scope h2,.service-scope h3{color:#fff!important}
.service-scope p{color:#d6e6f1}
.service-scope .eyebrow{color:var(--yellow)}

/* Hauptseiten der fünf Einsatzstädte: der zentrale Betreuungsblock ist einheitlich blau. */
.hub-focus{background:var(--navy)!important;border-color:rgba(255,255,255,.16)!important;color:#e5f0f7}
.hub-focus h2,.hub-focus h3{color:#fff!important}
.hub-focus p{color:#d6e6f1}
.hub-focus .eyebrow{color:var(--yellow)}

/* Einsatzgebiete: der Hero bündelt alle fünf Städte, Detailseiten bleiben unverändert. */
.area-overview-hero{min-height:570px!important}.area-overview-hero .hero-subtitle{color:#fff;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.25;max-width:40ch;margin:0 0 20px;font-weight:700}.area-overview-hero .lead{color:#e4f0f7;max-width:58ch}@media(max-width:800px){.area-overview-hero{min-height:510px!important}.area-overview-hero .hero-subtitle{font-size:1.15rem}}

/* Hero-Wechsel ohne Layoutsprung: gilt für jeden Hero der gesamten Website. */
.hero,.page-hero{isolation:isolate}.hero-loop{will-change:opacity;backface-visibility:hidden;transform:translateZ(0)}


/* Einheitliche Button-Ecken: leichte Rundung, keine Pillenform. */
.button,.cta-link{border-radius:5px}

/* Footer-Kontakt: feste vierte Spalte auf jeder Seite. */
footer .wrap{grid-template-columns:1.45fr 1fr 1fr 1.15fr}.footer-contact a{overflow-wrap:anywhere}@media(max-width:800px){footer .wrap{grid-template-columns:1fr}}

/* Kontaktseite: echte Motive machen die drei Schritte sofort verständlich. */
.card:has(.contact-step-image):before{display:none}.contact-step-image{display:block;width:100%;height:150px;object-fit:cover;margin:0!important}.card:has(.contact-step-image)>h3{margin-top:22px}@media(max-width:800px){.contact-step-image{height:180px}}

/* Kontakt-Schritte übernehmen die blaue und gelbe Leistungs-Kachel-Familie. */
.cards:has(.contact-step-image){gap:24px}.card:has(.contact-step-image){display:flex;flex-direction:column;min-height:390px;background:var(--navy);border-color:var(--navy);border-radius:12px;box-shadow:0 10px 26px rgba(8,39,70,.12)}.contact-step-image{height:190px;border-bottom:5px solid var(--yellow)}.card:has(.contact-step-image)>h3{color:#fff;margin:22px 26px 9px;font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.16;letter-spacing:-.025em}.card:has(.contact-step-image)>p{color:#d9e9f4;margin:0 26px 28px;max-width:31ch;font-size:.98rem;line-height:1.58}.card:has(.contact-step-image)>p a{color:#fff;text-decoration-color:var(--yellow)}@media(max-width:800px){.card:has(.contact-step-image){min-height:0}.contact-step-image{height:210px}.card:has(.contact-step-image)>h3{margin:19px 20px 8px;font-size:1.25rem}.card:has(.contact-step-image)>p{margin:0 20px 23px;font-size:1rem}}

/* Einheitliche Typografie: offener und weniger gedrängt auf der ganzen Website. */
body{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-weight:400;line-height:1.62}h1,h2,h3{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.035em}.hero h1{letter-spacing:-.04em;line-height:1.02}.page-hero h1{letter-spacing:-.04em;line-height:1.05}.intro h2,.section h2,.cta h2{letter-spacing:-.035em;line-height:1.12}.card h3,.service-card h3,.card:has(.contact-step-image)>h3{letter-spacing:-.015em;line-height:1.22}

/* Alle Häkchen-Listen: besser lesbar und als gelber Markenakzent erkennbar. */
.check li{font-weight:500}.check li:before{color:var(--yellow)}

/* Leistungsübersicht: kompakte Vorstellung des Betriebs als eigenständige Kachel. */
.overview-about{padding-top:0}.about-us-card{max-width:980px;background:var(--navy);border-radius:18px;padding:46px 52px;color:#fff;box-shadow:0 16px 34px rgba(8,39,70,.14)}.about-us-card .eyebrow{color:var(--yellow)}.about-us-card h2{max-width:18ch;margin:10px 0 14px;color:#fff!important}.about-us-card h3{margin:0 0 16px;color:#fff;font-size:1.18rem;line-height:1.35}.about-us-card p{max-width:70ch;margin:0 0 14px;color:#d9e9f4}.about-us-card .button{margin-top:12px}@media(max-width:800px){.about-us-card{padding:32px 24px}.about-us-card h3{font-size:1.08rem}}

/* Phase 5B: die sechs Leistungsseiten folgen derselben kompakten Landingpage-Struktur. */
main:has(.service-introduction) .section{padding:76px 0}
main:has(.service-introduction) .two{gap:clamp(32px,5vw,68px)}
main:has(.service-introduction) .section h2{max-width:25ch;font-size:clamp(1.8rem,3.1vw,2.7rem)}
.service-introduction p,.service-audience p{max-width:46rem}
.service-introduction .visual,.service-audience .visual{aspect-ratio:4/3;min-height:0}
.service-introduction .image-visual img,.service-audience .image-visual img{min-height:0;aspect-ratio:4/3}
.service-introduction .image-visual img,.service-audience .image-visual img,.service-related .card-image{position:relative;z-index:1}
.service-audience .service-visual-objektbetreuung{background:#16456a url('assets/objektbetreuung-02.webp') center/cover no-repeat!important}.service-audience .service-visual-gartenpflege{background:#16456a url('assets/aussenanlagenpflege-02.webp') center/cover no-repeat!important}.service-audience .service-visual-winterdienst{background:#16456a url('assets/winterdienst-02.webp') center/cover no-repeat!important}.service-audience .service-visual-kleinreparaturen{background:#16456a url('assets/kleinreparaturen-02.webp') center/cover no-repeat!important}.service-audience .service-visual-muelltonnenservice{background:#16456a url('assets/muelltonnenservice-02.webp') center/cover no-repeat!important}.service-audience .service-visual-kontrollgaenge{background:#16456a url('assets/kontrollgaenge-02.webp') center/cover no-repeat!important}
.service-concrete .wrap>p{max-width:48rem}
.service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;max-width:1040px;margin:30px 0 0}
.service-list li{padding:13px 0;line-height:1.5}
.service-insights{background:var(--navy)!important;color:#fff}
.service-insights .wrap{max-width:1180px}
.service-insights .eyebrow{color:var(--yellow)}
.service-insights h2{margin-bottom:30px!important;color:#fff!important}
.service-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-info-card{padding:25px 24px 26px;border:1px solid #fff;border-top:4px solid var(--yellow);border-radius:14px;background:#fff}
.service-info-card h3{margin:0 0 10px;font-size:1.18rem;line-height:1.22;color:var(--navy)}
.service-info-card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.62}
.service-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:31px 0 0;padding:0;list-style:none;counter-reset:none}
.service-steps li{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0;background:#fff;border:1px solid #d8e3eb;border-radius:14px}
.service-steps img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-bottom:4px solid var(--yellow)}
.service-steps p{margin:0;padding:18px;font-weight:700;line-height:1.35;color:var(--navy)}
.service-frequency{max-width:760px;margin-top:28px;padding:20px 0 0;border-top:1px solid #cedde7}
.service-frequency h3{margin:0 0 6px;font-size:1.12rem;color:var(--navy)}
.service-frequency p{margin:0;color:var(--muted)}
.service-audience .visual{order:0}
.service-limit-box{max-width:920px;padding:31px 34px;background:var(--navy);border-left:5px solid var(--yellow);border-radius:14px;color:#fff}
.service-limit-box .eyebrow{color:var(--yellow)}.service-limit-box h2{margin-top:8px!important;color:#fff!important}.service-limit-box p{max-width:760px;margin-bottom:0;color:#d9e9f4}
.service-narrow{max-width:880px}.service-faq details{padding:17px 0}.service-faq details p{max-width:720px;color:var(--muted)}
.service-related{background:var(--navy)!important;color:#fff}.service-related .eyebrow{color:var(--yellow)}.service-related h2{color:#fff!important}.service-related .cards{margin-top:28px;gap:24px}.service-related .service-card{display:flex;flex-direction:column;min-height:410px;padding:0!important;background:#fff!important;border-color:#fff!important}.service-related .service-card .card-image{display:block!important;width:100%;height:200px;aspect-ratio:auto;object-fit:cover;margin:0!important;border-bottom:5px solid var(--yellow)}.service-related .service-card h3{color:var(--navy)!important;margin:22px 26px 9px!important;font-size:clamp(1.25rem,1.65vw,1.5rem)}
.service-related .service-card p{max-width:31ch;margin:0 26px 28px!important;color:#35536c!important;font-size:1rem;line-height:1.6}.service-overview-link{margin:24px 0 0}.service-overview-link a{font-weight:700;color:#fff;text-decoration-color:var(--yellow)}
.service-request-inner{max-width:900px}.service-request h2{margin-top:8px!important}.service-request>div>p{max-width:650px}.service-request .button{margin-top:7px}
.service-areas{margin-top:42px;padding-top:25px;border-top:1px solid #cedde7}.service-areas p{margin:7px 0 14px;color:var(--muted)}.service-areas .districts{max-width:900px;margin-top:0}
main:has(.service-introduction) .universal-cta{padding:50px 0}main:has(.service-introduction) .universal-cta .cta-heading{font-size:clamp(1.9rem,3.2vw,2.65rem);line-height:1.08;letter-spacing:-.035em}
@media(max-width:800px){main:has(.service-introduction) .section{padding:58px 0}.service-introduction .two,.service-audience .two{gap:28px}.service-introduction .visual,.service-audience .visual{order:0}.service-list,.service-info-grid,.service-steps{grid-template-columns:1fr;gap:12px}.service-list{margin-top:22px}.service-list li{padding:12px 0}.service-info-card{padding:22px 20px}.service-steps li{min-height:0;padding:0}.service-frequency{margin-top:24px}.service-limit-box{padding:26px 22px}.service-areas{margin-top:32px}.service-areas .districts{grid-template-columns:1fr}.service-related .cards{gap:18px}.service-related .service-card{min-height:0}.service-related .service-card .card-image{height:210px}.service-related .service-card h3{margin:20px 20px 8px!important;font-size:1.3rem}.service-related .service-card p{margin:0 20px 24px!important}main:has(.service-introduction) .universal-cta{padding:44px 0}}

/* Hausverwaltungen: der abgestimmte Startablauf erhält einen eigenen dunkelblauen Block. */
.management-process{background:var(--navy)!important;color:#fff}
.management-process .eyebrow{color:var(--yellow)}
.management-process h2,.management-process h3{color:#fff!important}
.management-process .service-steps li{background:#fff;border-color:#fff}
.management-process .service-steps li p{color:var(--navy);font-weight:600}
.management-process .service-frequency{border-color:rgba(255,255,255,.26)}
.management-process .service-frequency p{color:#d9e9f4}

/* Kontaktseite: die direkten Wege stehen gleich nach dem Hero im Mittelpunkt. */
.contact-direct{background:#fff}
.contact-direct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(42px,8vw,120px);align-items:center}
.contact-direct-copy h2{max-width:12ch;margin:10px 0 18px}
.contact-direct-copy p{max-width:40ch;margin:0 0 24px;color:var(--muted)}
.contact-details{display:grid;gap:10px}
.contact-detail{display:flex;flex-direction:column;gap:4px;padding:21px 24px;background:#edf4f8;border-left:4px solid var(--yellow);border-radius:12px;color:var(--navy)}
.contact-detail span{font-size:.8rem;font-weight:700;color:#527087}
.contact-detail strong,.contact-detail a{font-size:1.12rem;font-weight:750;line-height:1.4;overflow-wrap:anywhere}
.contact-detail a{text-decoration-color:var(--yellow)}
.contact-process{padding-top:18px!important}
@media(max-width:800px){.contact-direct-grid{grid-template-columns:1fr;gap:32px}.contact-detail{padding:18px 20px}.contact-direct-copy h2{max-width:16ch}.contact-process{padding-top:0!important}}