/* Lechner Immobilien GmbH – Stylesheet (handgeschrieben, ohne Bibliothek) */
@font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-latin-300-normal.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:Roboto;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-latin-400-normal.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:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-latin-500-normal.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:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-normal.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:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.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:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

:root{--salbei:#C6D8D7;--salbei-hell:#E7F0EF;--salbei-tief:#9DBEBC;--meer:#4A9C9E;--meer-hell:#DCEFEF;--petrol:#2E6F73;--petrol-d:#235A5E;--sand:#F5EEE3;--sand-hell:#FBF8F3;--sand-tief:#E8D9C2;--sonne-hell:#F9E6D9;--tinte:#26302F;--stein:#56605F;--gold:#A8863B;--gold-t:#7E6326;--beige:#F2E3D1;--navy:#001B3B;--serif:"Playfair Display",Georgia,serif;--sans:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sand-hell);color:var(--tinte);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:#fff;padding:10px 16px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
@media(min-width:1024px){.wrap{padding:0 40px}}

/* Typo-Bausteine */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol);margin:0}
.display{font-family:var(--serif);font-weight:400;line-height:1.08}
.lead{font-size:18px;line-height:1.65;color:var(--stein)}
.muted{color:var(--stein)}
.small{font-size:14px}
.goldlinie{width:160px;height:1px;background:var(--gold);margin:28px 0}
.sechead{max-width:780px;margin-bottom:44px}
.sechead .skopf{display:flex;align-items:flex-end;gap:16px}
.sechead .nr{font-size:72px;font-weight:300;line-height:.8;color:var(--salbei-tief)}
.sechead h2{font-size:26px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;hyphens:auto;overflow-wrap:anywhere}
.sechead .eyebrow{margin-bottom:8px}
.sechead .intro{margin-top:20px;font-size:17px;line-height:1.65;color:var(--stein)}
.hell .sechead .nr{color:#fff}
@media(min-width:768px){.sechead{margin-bottom:56px}.sechead .nr{font-size:104px}.sechead h2{font-size:34px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:1px solid var(--petrol);font:500 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s;cursor:pointer}
.btn svg{width:17px;height:17px;flex:none}
.btn-p{background:var(--petrol);color:#fff}
.btn-p:hover{background:var(--petrol-d)}
.btn-o{background:rgba(255,255,255,.7);color:var(--petrol)}
.btn-o:hover{background:var(--petrol);color:#fff}
.btn-w{background:#fff;color:var(--petrol);border-color:#fff}
.btn-gl{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-gl:hover{background:#fff;color:var(--petrol)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Kopfzeile: Hintergrund = Original-Hintergrund des Logos */
.kopf-leiste{position:sticky;top:0;z-index:40;background:#F2E3D1 url(../img/logo-leiste.webp) left top/cover no-repeat;border-bottom:1px solid #E0CCB2}
.kontaktzeile{display:none;border-bottom:1px solid rgba(224,204,178,.8);font-size:13px;color:var(--stein)}
.kontaktzeile .wrap{display:flex;justify-content:flex-end;gap:28px;height:36px;align-items:center}
.kontaktzeile a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.kontaktzeile a:hover{color:var(--petrol)}
.kontaktzeile .ico{width:15px;height:15px;color:var(--gold-t)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{display:block;flex:none}
.logo img{height:58px;width:auto}
.hauptnav{display:none}
.hauptnav ul{display:flex;gap:28px;list-style:none}
.hauptnav a{display:block;padding:10px 0;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.hauptnav a:hover,.hauptnav a[aria-current=page]{color:var(--petrol)}
.hauptnav a[aria-current=page]{box-shadow:inset 0 -1px var(--petrol)}
.kopf .cta{display:none}
.mobilnav{position:relative}
.mobilnav summary{list-style:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer}
.mobilnav summary::-webkit-details-marker{display:none}
.mobilnav summary .ico{width:26px;height:26px}
.mobilnav .zu{display:none}
.mobilnav[open] .zu{display:block}
.mobilnav[open] .auf{display:none}
.mobilnav .panel{position:fixed;left:0;right:0;top:73px;bottom:0;overflow-y:auto;background:#fff;padding:12px 16px 32px}
.mobilnav .panel a{display:block;padding:16px 0;border-bottom:1px solid var(--salbei);font-size:17px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.mobilnav .panel a[aria-current=page]{color:var(--petrol)}
.mobilnav .panel .btn{display:flex;margin-top:20px;border-bottom:1px solid var(--petrol)}
@media(min-width:640px){.logo img{height:62px}}
@media(min-width:1024px){.kopf{height:96px}.logo img{height:80px}}
@media(min-width:1280px){.kontaktzeile{display:block}.hauptnav{display:block}.mobilnav{display:none}}
@media(min-width:1536px){.kopf .cta{display:inline-flex}}

/* Hero Startseite */
.hero{position:relative}
.hero .bild{position:relative;height:72vh;min-height:520px;max-height:860px;overflow:hidden}
.hero .bild img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,243,.92),rgba(251,248,243,.5) 55%,rgba(251,248,243,0))}
.hero .text{position:absolute;inset:0;z-index:1;padding-top:56px}
.hero .text .wrap>div{max-width:640px}
.hero h1{margin-top:16px;font-size:42px}
.hero .lead{margin-top:24px;max-width:520px;color:#3a4544}
.hero-band{position:relative;background:var(--salbei)}
.hero-band .wrap{position:relative;display:flex;align-items:center;min-height:150px;padding-top:28px;padding-bottom:28px}
.hero-band .name{position:relative;z-index:1;max-width:48%}
.hero-band .name p:first-child{font-size:26px;font-weight:500;line-height:1;color:var(--tinte)}
.hero-band .name p+p{margin-top:8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#3c4746}
.hero-band .partner{display:none;margin-left:auto;max-width:300px;text-align:right;color:var(--tinte)}
.hero-band img{position:absolute;bottom:0;right:8px;height:220px;width:auto;pointer-events:none}
@media(min-width:640px){.hero h1{font-size:56px}.hero-band img{right:8%;height:290px}}
@media(min-width:768px){.hero .text{padding-top:96px}.hero-band .wrap{min-height:170px}.hero-band .name{max-width:none}.hero-band .name p:first-child{font-size:38px}.hero-band img{left:44%;right:auto;height:380px}}
@media(min-width:1024px){.hero h1{font-size:72px}.hero-band img{left:46%;height:430px}}
@media(min-width:1280px){.hero-band .partner{display:block}}

/* Sektionen */
.sek{padding:72px 0}
@media(min-width:768px){.sek{padding:104px 0}}
.bg-meer{background:#E9F4F4}
.bg-salbei{background:var(--salbei)}
.bg-sand{background:var(--sand)}
.bg-weiss{background:#fff}
.bg-verlauf{background:linear-gradient(180deg,var(--sand),var(--sonne-hell))}
.raster{display:grid;gap:24px}
@media(min-width:640px){.r2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.r3{grid-template-columns:repeat(3,minmax(0,1fr))}.r4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kacheln{display:grid;gap:1px;background:var(--salbei)}
.kacheln>*{background:#fff;padding:28px}
.kacheln h3{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol)}
.kacheln p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--stein)}
.kacheln.sandig{background:var(--sand-tief)}

/* Kennzahlen */
.zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;list-style:none}
.zahlen li{border-left:1px solid var(--salbei-tief);padding-left:20px}
.zahlen b{display:block;font-size:44px;font-weight:300;line-height:1;color:var(--petrol)}
.zahlen span{display:block;margin-top:8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
@media(min-width:768px){.zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}.zahlen b{font-size:56px}}

/* Objektkarten */
.karte{display:flex;flex-direction:column;height:100%;background:#fff}
.karte .foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--salbei-hell)}
.karte .foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.karte:hover .foto img{transform:scale(1.04)}
.marke{position:absolute;left:12px;top:12px;background:rgba(35,90,94,.94);color:#fff;padding:4px 10px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.karte .inhalt{display:flex;flex:1;flex-direction:column;padding:20px;border:1px solid var(--salbei);border-top:0}
.ort{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.ort .ico{width:16px;height:16px}
.karte h3{margin-top:8px;font-size:20px;font-weight:500;line-height:1.3}
.karte h3 a{text-decoration:none}
.karte h3 a:hover{color:var(--petrol)}
.karte .typ{margin-top:2px;font-size:14px;color:var(--stein)}
.karte .fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding:12px 0;border-top:1px solid var(--salbei);border-bottom:1px solid var(--salbei);font-size:14px;list-style:none}
.karte .fakten li{display:flex;align-items:center;gap:6px}
.karte .fakten .ico{width:18px;height:18px;color:var(--petrol)}
.karte .kfuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.karte .preis{font-size:16px;font-weight:500;color:var(--petrol)}
.linkpfeil{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}

/* Regionen-Mosaik */
.mosaik{display:grid;gap:16px}
.mosaik a{position:relative;display:block;height:280px;overflow:hidden;color:#fff;text-decoration:none}
.mosaik img,.reg-bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.mosaik a:hover img{transform:scale(1.04)}
.mosaik a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 55%,transparent)}
.mosaik .txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px}
.mosaik .txt small{font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.mosaik h3{margin-top:4px;font-size:24px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.mosaik .txt p{margin-top:8px;max-width:440px;font-size:14px;line-height:1.6}
.symbol{position:absolute;right:12px;top:12px;z-index:1;background:rgba(0,0,0,.55);color:#fff;padding:2px 8px;font-size:11px}
@media(min-width:768px){.mosaik{grid-template-columns:repeat(4,1fr);grid-template-rows:300px 300px}.mosaik a{height:100%}.mosaik a:nth-child(1){grid-column:span 2;grid-row:span 2}.mosaik a:nth-child(4){grid-column:span 2}.mosaik h3{font-size:28px}}
.calida{display:grid;margin-top:16px;background:var(--salbei);text-decoration:none}
.calida .b{height:260px;overflow:hidden}
.calida .b img{width:100%;height:100%;object-fit:cover}
.calida .t{padding:32px}
.calida h3{margin-top:8px;font-size:26px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
@media(min-width:768px){.calida{grid-template-columns:1fr 1fr}.calida .b{height:320px}.calida .t{padding:48px;align-self:center}}

/* Vorteile */
.vorteile{display:grid;gap:1px;background:rgba(255,255,255,.45)}
.vorteile>div{background:var(--salbei);padding:28px}
.vorteile .ico{width:34px;height:34px;color:var(--petrol)}
.vorteile b{display:block;margin-top:20px;font-size:52px;font-weight:300;line-height:1;color:#fff}
.vorteile h3{margin-top:12px;font-size:17px;font-weight:500;line-height:1.35}
.vorteile p{margin-top:12px;font-size:15px;line-height:1.65;color:#36413f}
@media(min-width:640px){.vorteile{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.vorteile{grid-template-columns:repeat(4,1fr)}}

/* Bauträger */
.zweispalt{display:grid;gap:48px}
@media(min-width:1024px){.zweispalt{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.zweispalt.gleich{grid-template-columns:1fr 1fr}.zweispalt.sieben{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.zweispalt .oben{padding-top:144px}}
.kennkarte{border:1px solid var(--sand-tief);background:rgba(255,255,255,.7);padding:28px}
.kennkarte+.kennkarte{margin-top:16px}
.kennkarte b{display:block;font-size:40px;font-weight:300;line-height:1;color:var(--petrol);overflow-wrap:anywhere}
.kennkarte span{display:block;margin-top:8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}

/* Nelli */
.person{display:grid;gap:48px;align-items:center}
.person .foto{position:relative}
.person .foto::before{content:"";position:absolute;left:-16px;top:-16px;width:100%;height:100%;background:var(--salbei)}
.person .foto img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.haken{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px;list-style:none;font-size:14px}
.haken li,.hakenliste li{display:flex;align-items:flex-start;gap:10px}
.haken .ico,.hakenliste .ico{color:var(--gold-t);width:18px;height:18px;margin-top:3px}
.hakenliste{list-style:none;display:grid;gap:10px}
.text p+p{margin-top:16px}
@media(min-width:1024px){.person{grid-template-columns:5fr 7fr;gap:80px}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;gap:12px}
.galerie figure{position:relative;margin:0;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie figcaption{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.88);padding:6px 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.galerie .breit{grid-column:span 2}
@media(min-width:768px){.galerie{grid-template-columns:repeat(4,1fr);grid-auto-rows:240px}.galerie .gross{grid-column:span 2;grid-row:span 2}.galerie .hoch{grid-row:span 2}}

/* Leistungen */
.schritte{display:grid;gap:1px;background:var(--salbei);list-style:none}
.schritte li{background:#fff;padding:28px}
.schritte b{display:block;font-size:42px;font-weight:300;line-height:1;color:var(--salbei-tief)}
.schritte h3{margin-top:16px;font-size:17px;font-weight:500}
.schritte p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--stein)}
@media(min-width:640px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.schritte{grid-template-columns:repeat(3,1fr)}}
.hinweis{display:flex;gap:12px;align-items:flex-start;margin-top:24px;background:var(--sand);padding:20px;font-size:15.5px}
.hinweis .ico{color:var(--gold-t);margin-top:2px}

/* Kontaktbereich (ohne Formular) */
.kontaktwege{display:grid;gap:48px;margin-top:48px;align-items:stretch}
@media(min-width:1024px){.kontaktwege{grid-template-columns:1fr 1fr;gap:64px}.kontaktwege.k7{grid-template-columns:7fr 5fr;gap:56px}}
.box{background:#fff;padding:24px;height:100%}
@media(min-width:640px){.box{padding:36px}}
.box h2,.box h3{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.weg{display:flex;align-items:center;gap:16px;margin-top:16px;padding:18px 20px;border:1px solid var(--salbei);text-decoration:none;transition:border-color .2s,background .2s}
.weg:hover{border-color:var(--petrol);background:var(--salbei-hell)}
.weg .ico{width:28px;height:28px;color:var(--petrol)}
.weg .wa-ico{flex:none;color:#1DA851}.weg .wa-ico svg{display:block;width:28px;height:28px}
.wa-i{fill:currentColor}
.weg b{display:block;font-size:17px;font-weight:500}
.weg span{display:block;font-size:14px;color:var(--stein)}
.anliegen{margin-top:28px}
.anliegen p{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.anliegen ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;list-style:none}
.anliegen a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #c9cfce;font-size:14px;text-decoration:none}
.anliegen a:hover{border-color:var(--petrol);color:var(--petrol)}
.kreis{display:flex;align-items:center;gap:16px;font-weight:500}
.kreis i{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-t)}
.kreis .ico{width:18px;height:18px}
.drei{display:grid;gap:16px;list-style:none}
.kopfzeile2{display:grid;gap:32px;margin-top:28px}
@media(min-width:1024px){.kopfzeile2{grid-template-columns:1fr 1fr;gap:64px}}
.waiv{margin-top:20px;font-size:13px;line-height:1.6;color:var(--stein)}

/* Kontaktkarte Nelli */
.vkarte{display:flex;flex-direction:column;height:100%;border:1px solid rgba(157,190,188,.6);background:#fff;padding:24px;box-shadow:0 24px 60px -30px rgba(31,58,60,.35)}
@media(min-width:640px){.vkarte{padding:36px}}
.vkarte .oben{display:grid;gap:24px;margin:24px 0 28px}
.vkarte .bild img{width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;object-position:top}
.vkarte h3{font:400 32px/1.2 var(--serif)}
.vkarte .rolle{margin-top:4px;font-size:15px;font-weight:500;color:var(--gold-t)}
.vkarte .firma{margin-top:8px;font-size:14px;line-height:1.6;color:var(--stein)}
.vkarte hr{border:0;border-top:1px solid var(--salbei);margin:20px 0}
.vkarte .daten{display:grid;gap:12px;list-style:none;font-size:15px}
.vkarte .daten a,.vkarte .daten span{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.vkarte .daten .ico{color:var(--gold-t)}
.vkarte .qr{display:flex;align-items:center;gap:20px;margin-top:20px}
.vkarte .qr>svg{width:88px;height:88px;padding:8px;border:1px solid var(--gold);flex:none}
.vkarte .qr p{font-size:13px;line-height:1.5;color:var(--stein)}
.vkarte .qr p b{color:var(--tinte);font-weight:500}
.vkarte .qr a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--petrol)}
.vkarte .impr{margin-top:auto;padding-top:16px;border-top:1px solid var(--salbei);font-size:11.5px;line-height:1.7;color:var(--stein)}
.vkarte .impr span{white-space:nowrap}
@media(min-width:640px) and (max-width:1023px){.vkarte .oben{grid-template-columns:200px 1fr;gap:32px}}

/* Seiten-Hero */
.seitenhero .bild{position:relative;height:46vh;min-height:340px;overflow:hidden}
.seitenhero .bild img{width:100%;height:100%;object-fit:cover}
.seitenhero .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 50%,transparent)}
.seitenhero .bild small{position:absolute;right:16px;bottom:12px;z-index:1;font-size:12px;color:#fff}
.seitenhero .feld{position:relative;max-width:780px;margin-top:-96px;background:var(--salbei);padding:32px 24px}
.seitenhero .feld p:first-child{font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#36413f}
.seitenhero h1{margin-top:12px;font-size:30px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;hyphens:auto;overflow-wrap:anywhere}
.seitenhero .feld p+p{margin-top:16px;font-size:17px;line-height:1.65;color:#36413f}
@media(min-width:640px){.seitenhero .feld{padding:40px}}
@media(min-width:768px){.seitenhero .bild{height:54vh}.seitenhero .feld{margin-top:-112px}.seitenhero h1{font-size:42px}}

/* Textseiten */
.textkopf{padding:56px 0 24px;background:var(--sand)}
.textkopf h1{margin-top:16px;font-size:40px}
.textkopf .gold{margin-top:16px;font:italic 400 22px/1.4 var(--serif);color:var(--gold-t)}
@media(min-width:768px){.textkopf{padding-top:80px}.textkopf h1{font-size:60px}}
.prosa{max-width:780px;padding:56px 0 80px;hyphens:auto;overflow-wrap:break-word}
.prosa h1{font-size:30px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.prosa h2{margin:40px 0 12px;font-size:19px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.prosa p,.prosa li{color:var(--stein);line-height:1.7}
.prosa p{margin-bottom:16px}
.prosa ul{margin:0 0 16px 20px}
.prosa li+li{margin-top:4px}
.prosa a{color:var(--petrol)}

/* Ablauf */
.ablauf{position:relative;max-width:900px;margin:0 auto;list-style:none}
.ablauf::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:1px;background:var(--salbei-tief)}
.ablauf li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;margin-bottom:36px}
.ablauf .n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--salbei-tief);border-radius:50%;background:#fff;font-size:22px;font-weight:300;color:var(--petrol)}
.ablauf small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-t)}
.ablauf h3{margin-top:4px;font-size:19px;font-weight:500}
.ablauf p{margin-top:8px;font-size:15.5px;line-height:1.65;color:var(--stein)}
.zahlung{list-style:none;display:grid;gap:1px;background:var(--salbei)}
.zahlung li{display:flex;gap:20px;background:#fff;padding:24px}
.zahlung b{font-size:34px;font-weight:300;line-height:1;color:var(--salbei-tief)}
.zahlung h3{font-size:17px;font-weight:500}
.zahlung p{margin-top:4px;font-size:15px;color:var(--stein)}
.gruende{list-style:none;display:grid;gap:12px}
.gruende li{display:flex;gap:12px;background:#fff;padding:20px;font-size:15.5px;line-height:1.6}
.gruende .ico{color:var(--gold-t);margin-top:2px}

/* CTA-Band */
.ctaband{background:linear-gradient(90deg,#2E6F73,#3d8a8d);color:#fff;padding:56px 0}
.ctaband .wrap{display:flex;flex-direction:column;gap:24px}
.ctaband h2{font-size:24px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.ctaband p{margin-top:8px;max-width:680px;color:#f1f7f7}
.ctaband .btns{margin-top:0}
@media(min-width:768px){.ctaband .wrap{flex-direction:row;align-items:center;justify-content:space-between}.ctaband h2{font-size:28px}}

/* Objektdetail */
.zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:16px;font-size:14px;color:var(--stein);text-decoration:none}
.bilderwand{display:grid;gap:8px;margin-top:12px}
.bilderwand a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--salbei-hell)}
.bilderwand img{width:100%;height:100%;object-fit:cover}
.bilderwand figure{position:relative;margin:0}
@media(min-width:768px){.bilderwand.mehr{grid-template-columns:2fr 1fr;grid-template-rows:276px 276px}.bilderwand.mehr figure:first-child{grid-row:span 2}.bilderwand.mehr a{aspect-ratio:auto;height:100%}.bilderwand.mehr figure{height:100%}}
.weitere{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@media(min-width:768px){.weitere{grid-template-columns:repeat(4,1fr)}}
.objekt{display:grid;gap:48px;padding:48px 0 64px}
@media(min-width:1024px){.objekt{grid-template-columns:minmax(0,1fr) 380px}.objekt aside{position:sticky;top:150px;align-self:start}}
.objekt h1{margin-top:12px;font-size:34px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.objekt .kurz{margin-top:12px;font-size:18px;color:var(--stein)}
.objekt h2{margin-top:48px;font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol)}
.objekt h2+*{margin-top:16px}
.objekt .text p{font-size:17px;line-height:1.7;color:var(--stein)}
.datenraster{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:40px;background:var(--salbei)}
.datenraster div{background:#fff;padding:16px}
.datenraster dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.datenraster dd{margin:4px 0 0;font-size:16px;font-weight:500}
@media(min-width:640px){.datenraster{grid-template-columns:repeat(4,1fr)}}
.ausst{display:grid;gap:10px 32px;list-style:none}
@media(min-width:640px){.ausst{grid-template-columns:1fr 1fr}}
.preiskasten{border:1px solid var(--salbei);background:#fff;padding:24px}
.preiskasten small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.preiskasten .p{margin-top:4px;font-size:26px;font-weight:500;color:var(--petrol)}
.preiskasten .btn{display:flex;margin-top:10px}
.preiskasten .btns{display:block;margin-top:20px}
.beraterin{display:flex;align-items:center;gap:16px;margin-top:16px;background:var(--salbei);padding:20px;font-size:14px}
.beraterin img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top}
.beraterin b{display:block;font-weight:500}
.pills{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:40px 0}
.pills a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--salbei-tief);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.pills a:hover{border-color:var(--petrol);color:var(--petrol)}

/* Objektliste mit Filter */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;list-style:none}
.filter button{min-height:44px;padding:8px 16px;border:1px solid #c9cfce;background:#fff;font:400 14px var(--sans);color:var(--tinte);cursor:pointer}
.filter button[aria-pressed=true]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.liste-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--salbei)}
[hidden]{display:none!important}
[data-nr]::before{content:attr(data-nr)}
.bg-salbei .eyebrow,.calida .eyebrow,.calida .linkpfeil{color:var(--petrol-d)}
.calida .muted,.bg-salbei .muted{color:#36413f}
br.nur-gross{display:none}
@media(min-width:1024px){br.nur-gross{display:inline}}

/* Regionen */
.regliste{display:grid;gap:80px}
.regliste article{display:grid;gap:32px;align-items:center}
.reg-bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.regliste .kopfnr{display:flex;align-items:flex-end;gap:16px}
.regliste .kopfnr span{font-size:80px;font-weight:300;line-height:.8;color:var(--salbei-tief)}
.regliste h2{margin-top:4px;font-size:28px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
@media(min-width:768px){.regliste article{grid-template-columns:1fr 1fr;gap:64px}.regliste article:nth-child(even) .reg-bild{order:2}.regliste h2{font-size:34px}}
.abschnitte{display:grid;gap:1px;margin-top:48px;background:var(--salbei)}
.abschnitte>div{background:#fff;padding:24px}
.abschnitte h2{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol)}
.abschnitte ul{margin-top:16px}
@media(min-width:640px){.abschnitte{grid-template-columns:1fr 1fr}}
.seitenbox{background:var(--sand);padding:28px}
.seitenbox h2{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol)}
.seitenbox .btn{display:flex;margin-top:12px}
figure.bild{margin:16px 0 0}
figure.bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
figure.bild figcaption{margin-top:8px;font-size:13px;color:var(--stein)}

/* Über uns */
.ueberhero{background:var(--salbei);overflow:hidden}
.ueberhero .wrap{display:grid;gap:40px;align-items:end;padding-top:56px}
.ueberhero .t{padding-bottom:56px}
.ueberhero h1{margin-top:16px;font-size:42px;color:var(--tinte)}
.ueberhero .lead{margin-top:24px;max-width:520px;color:#36413f}
.claim{margin-top:32px;max-width:520px;border-left:2px solid var(--gold);padding-left:20px;font:italic 400 21px/1.35 var(--serif);color:var(--petrol-d)}
.ueberhero img{width:100%;max-width:460px;margin:0 auto}
@media(min-width:768px){.ueberhero .wrap{grid-template-columns:1fr 1fr;padding-top:80px}.ueberhero .t{padding-bottom:96px}.ueberhero h1{font-size:64px}.claim{font-size:24px}}
.blick{background:var(--sand);padding:32px}
.blick h2{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--petrol)}
.blick dl{margin:20px 0 0;display:grid;gap:16px;font-size:15.5px}
.blick div{border-bottom:1px solid var(--sand-tief);padding-bottom:12px}
.blick dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stein)}
.blick dd{margin:4px 0 0}
.zitat{border-left:2px solid var(--gold);padding-left:20px;font-style:italic}

/* Fußzeile */
.fuss{background:var(--salbei);color:var(--tinte)}
.fuss .spalten{display:grid;gap:40px;padding:56px 0}
.fuss .logo-bild{width:100%;max-width:320px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.fuss h2{margin-bottom:16px;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.fuss ul{list-style:none;display:grid;gap:2px}
.fuss a{display:inline-block;padding:6px 0;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss address{font-style:normal;line-height:1.7}
.fuss .claim2{margin-top:24px;max-width:320px;font-size:15px;line-height:1.65}
.fuss .unten{border-top:1px solid rgba(38,48,47,.12)}
.fuss .unten .wrap{display:flex;flex-direction:column;gap:8px;padding-top:20px;padding-bottom:96px;font-size:13px;color:#36413f}
@media(min-width:768px){.fuss .spalten{grid-template-columns:4fr 3fr 2fr 3fr;padding:80px 0}.fuss .unten .wrap{flex-direction:row;justify-content:space-between;padding-bottom:20px}}

/* Schwebende Kontaktknöpfe */
.schwebe{position:fixed;left:0;right:0;bottom:16px;z-index:30;display:flex;justify-content:center;gap:12px;padding:0 16px;pointer-events:none}
.schwebe a{pointer-events:auto;display:flex;align-items:center;justify-content:center;height:52px;border-radius:26px;box-shadow:0 10px 25px -8px rgba(0,0,0,.45);text-decoration:none}
.schwebe .wa{width:52px;background:#1DA851;color:#fff}
.schwebe .wa svg{width:28px;height:28px}
.schwebe .an{padding:0 28px;background:var(--tinte);color:#fff;font-size:15px;font-weight:500}
.schwebe .an:hover{background:var(--petrol-d)}

/* 404 */
.nf{padding:112px 0;text-align:center}
.nf b{display:block;font-size:96px;font-weight:300;line-height:1;color:var(--salbei-tief)}
.nf h1{margin-top:16px;font-size:26px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.nf .btns{justify-content:center}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.kopf-leiste,.schwebe,.mobilnav{display:none}}
