/* BERGER Immobilien, Fassung 20.09.2026 nach Gabis Gestaltungsbildern und ihrem Feedback vom 19.09.:
   viel Weiß, BERGER-Grün #97c03c als einziges Grün (Textton derselben Farbe: #78a22a), warmer Taupe als zweite Farbe,
   runde weiche Karten, grüne Kreis-Icons, Handschrift-Notizen (Caveat) auf grünen Klecksen, volles Logo, wenig Knöpfe. */
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Caveat";src:url(fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --gruen:#97c03c;--gruen-t:#78a22a;--gruen-d:#6a9224;--gruen-hell:#eef4e1;--gruen-hell2:#f6f9ee;
  --navy:#343d54;--text:#3a3d42;--muted:#6f6b64;--papier:#f5f4f0;--taupe:#eae8e3;--taupe-2:#dedbd3;--taupe-3:#cfcabf;
  --weiss:#fff;--linie:rgba(58,61,66,.12);
  --schatten:0 8px 26px rgba(45,63,92,.08),0 1px 3px rgba(45,63,92,.05);
  --radius:14px;--kopf:84px;
  --eng:3.25rem;--normal:5.5rem;--weit:7.5rem;
  --h1:clamp(2.3rem,4.4vw,3.6rem);--h2:clamp(1.7rem,2.6vw,2.35rem);--h3:1.25rem;
}
*{box-sizing:border-box}
html{background:var(--papier);color:var(--text);font-family:Hanken,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
::selection{background:var(--gruen);color:#fff}
:focus-visible{outline:2px solid var(--gruen-t);outline-offset:3px;border-radius:3px}
a{color:var(--gruen-t);text-decoration:none;transition:color .18s}
a:hover{color:var(--gruen-d);text-decoration:underline;text-underline-offset:.18em}
img,video{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{margin:0;line-height:1.12;text-wrap:balance;color:var(--navy);font-weight:700;letter-spacing:-.015em}
h1{font-size:var(--h1);line-height:1.06}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.3;letter-spacing:-.005em}
em.akz{font-style:normal;color:var(--gruen-t)}
p{margin:0;max-width:62ch}
p+p{margin-top:.9rem}
.klein{font-size:.88rem;color:var(--muted)}
.gross{font-size:1.12rem}
.hervor{color:var(--gruen-t);font-weight:700}
b,strong{font-weight:700}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:1000}
.skip:focus{left:1rem;top:1rem}
.kicker{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-t);font-weight:700;margin-bottom:.8rem}
.kicker.linie::after{content:"";display:inline-block;width:2.2rem;height:2px;background:var(--gruen);vertical-align:middle;margin-left:.7rem}
.strich{display:block;width:3.4rem;height:3px;background:var(--gruen);border-radius:2px;margin:1.1rem 0 1.2rem}
.versal{text-transform:uppercase;letter-spacing:.02em}

/* Handschrift (Caveat), nur für Gabis Notizen */
.hand{font-family:Caveat,"Bradley Hand",cursive;font-weight:600;color:var(--gruen-t);font-size:1.75rem;line-height:1.1;letter-spacing:0;max-width:none}
.hand.gross{font-size:2.3rem}
.hand.klein{font-size:1.45rem}
.hand.dunkel{color:var(--navy)}
.hand.weiss{color:#fff}
.hand .herz{display:inline-block;margin-right:-1.3em;width:1.1em;height:1.1em;vertical-align:-.15em;margin-left:.2em;stroke:currentColor;fill:none;stroke-width:1.8}
.hand.unterstrichen::after{content:"";display:block;width:60%;height:2px;background:var(--gruen);margin-top:.25rem;border-radius:2px;transform:rotate(-1.5deg)}
/* Klecks: Handschrift auf grünem Aquarellfleck */
.klecks{position:relative;display:inline-block;padding:1.4rem 1.9rem;font-family:Caveat,cursive;font-weight:600;font-size:1.65rem;line-height:1.15;color:var(--gruen-d);text-align:center;max-width:22rem;isolation:isolate}
.klecks::before{content:"";position:absolute;inset:-4% -3%;z-index:-1;background:var(--gruen-hell);border-radius:48% 52% 45% 55%/55% 45% 55% 45%;transform:rotate(-3deg);opacity:.95}
.klecks.stark::before{background:var(--gruen);opacity:.92}
.klecks.stark{color:#fff}
.klecks.rund{width:12rem;height:12rem;display:flex;align-items:center;justify-content:center;padding:1rem;font-size:1.45rem}
.klecks.rund::before{border-radius:50%;transform:none;inset:0}
.klecks.rund.stark{color:#fff}

/* Notiz auf dem Foto */
.auf-foto{position:absolute;z-index:2}
.auf-foto.ol{top:1.75rem;left:1.75rem}
.auf-foto.or{top:1.75rem;right:1.75rem}
.auf-foto.ul{bottom:1.75rem;left:1.75rem}
.auf-foto.ur{bottom:1.75rem;right:1.75rem}
.hand.auf-foto{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);font-size:1.9rem;max-width:12rem;text-align:center}
.hand.auf-foto.gruen{color:var(--gruen-t);text-shadow:0 1px 10px rgba(255,255,255,.9)}
.karte-foto{background:rgba(255,255,255,.96);padding:1.1rem 1.35rem;border-radius:10px;box-shadow:var(--schatten);max-width:19rem;font-size:.92rem;line-height:1.45;color:var(--text)}
.karte-foto b{display:block;color:var(--navy)}
.karte-foto .tren{display:block;height:1px;background:var(--gruen);margin:.65rem 0}
.karte-foto.versal{font-size:.82rem;letter-spacing:.12em;color:var(--navy);line-height:1.6;font-weight:600}

/* Raster */
.wrap{max-width:1200px;margin:0 auto;padding-left:5vw;padding-right:5vw;box-sizing:content-box}
.raster{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;max-width:1200px;margin:0 auto;padding-left:5vw;padding-right:5vw;box-sizing:content-box}
.voll{grid-column:1/13}
.s-eng{padding-top:var(--eng);padding-bottom:var(--eng)}
.s-normal{padding-top:var(--normal);padding-bottom:var(--normal)}
.band{background:var(--taupe)}
.band-taupe{background:var(--taupe)}
.band-weiss{background:#fff}
.band-gruen{background:var(--gruen);color:#fff}
.band-gruen h2,.band-gruen h3,.band-gruen p{color:#fff}
.mitte{text-align:center}
.mitte p,.mitte h2{margin-left:auto;margin-right:auto}
.zwei-sp{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.drei-sp{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#9cc542,#86ae2e);color:#fff;text-decoration:none;padding:.85rem 1.5rem;border:0;border-radius:7px;font:inherit;font-weight:700;font-size:1rem;line-height:1.2;cursor:pointer;box-shadow:0 6px 16px rgba(120,162,42,.28);transition:transform .2s,box-shadow .2s,filter .2s}
.knopf::after{content:"→";font-weight:400}
.knopf:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(120,162,42,.34);filter:brightness(1.04)}
.knopf:active{transform:none}
.knopf:disabled{opacity:.6;cursor:default}
.knopf.weiss{background:#fff;color:var(--gruen-t);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.knopf.linie{background:#fff;color:var(--gruen-t);border:1.5px solid var(--gruen);box-shadow:none}
.knopf.linie:hover{background:var(--gruen-hell2)}
.knopf.ohne::after{content:none}
.knopf.wa{background:#fff;color:var(--text);border:1.5px solid var(--taupe-3);box-shadow:none}
.knopf.wa::after{content:none}
.knopf.wa svg{width:1.2em;height:1.2em;fill:#25D366}
.textlink{font-weight:700}
.textlink::after{content:" →"}

/* Kopf: volles Logo, Navigation, Telefon + WhatsApp rechts */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--taupe-2);transition:box-shadow .3s}
.kopf.tief{box-shadow:0 6px 24px rgba(45,63,92,.08)}
.nav{display:flex;align-items:center;gap:1.5rem;height:var(--kopf);padding:0 5vw;max-width:1240px;margin:0 auto;box-sizing:content-box}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:78px;width:auto}
.nav>ul{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;gap:1.45rem;font-size:.92rem}
.nav li{position:relative}
.nav>ul a{color:var(--text);text-decoration:none;padding:.35rem 0;display:inline-block;border-bottom:2px solid transparent;white-space:nowrap;font-weight:500;transition:border-color .18s,color .18s}
.nav>ul a:hover,.nav>ul a[aria-current]{color:var(--gruen-t);border-bottom-color:var(--gruen)}
.nav li.hat-unter>a::after{content:"";display:inline-block;width:.38em;height:.38em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:.45em;vertical-align:.2em}
.nav .unter{position:absolute;top:100%;left:-1rem;min-width:240px;background:#fff;border:1px solid var(--taupe-2);border-radius:10px;padding:.5rem 0;margin:0;list-style:none;flex-direction:column;align-items:stretch;gap:0;opacity:0;visibility:hidden;transform:translateY(6px);box-shadow:var(--schatten);transition:opacity .18s,transform .18s,visibility 0s .18s}
.nav li.hat-unter:hover .unter,.nav li.hat-unter:focus-within .unter{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .unter a{display:block;padding:.5rem 1.1rem;border:0}
.nav .unter a:hover{background:var(--gruen-hell2);border:0}
.nav .unter li.trenner{border-top:1px solid var(--taupe-2);margin:.4rem 0}
.nav .rechts{display:flex;align-items:center;gap:1.4rem;flex:0 0 auto}
.nav .kontaktweg{display:inline-flex;align-items:center;gap:.55rem;color:var(--navy);text-decoration:none;font-weight:700;font-size:.9rem;line-height:1.15}
.nav .kontaktweg small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.nav .kontaktweg svg{width:1.6rem;height:1.6rem;flex:0 0 auto}
.nav .kontaktweg.tel svg{stroke:var(--gruen-t);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav .kontaktweg.wa svg{fill:var(--gruen-t)}
.nav .kontaktweg:hover{color:var(--gruen-t);text-decoration:none}
.nav .menue{display:none;background:none;border:1px solid var(--taupe-3);border-radius:8px;padding:.5rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;color:inherit;margin-left:auto}

/* Icons */
.ico{width:2.4rem;height:2.4rem;stroke:var(--gruen-t);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico.gross{width:3.2rem;height:3.2rem}
.kreis{width:5rem;height:5rem;border-radius:50%;background:var(--gruen);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 16px rgba(120,162,42,.25)}
.kreis .ico{stroke:#fff;width:2.4rem;height:2.4rem}
.kreis.hell{background:var(--gruen-hell);box-shadow:none}
.kreis.hell .ico{stroke:var(--gruen-t)}
.kreis.klein{width:3.4rem;height:3.4rem}
.kreis.klein .ico{width:1.7rem;height:1.7rem}

/* Halbblock: Text links, Foto rechts bis zum Rand (oder getauscht) */
.halb{display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:stretch}
.halb>.text{display:flex;flex-direction:column;justify-content:center;padding:4rem 4vw 4rem 5vw;max-width:calc(600px + 9vw);box-sizing:border-box;margin-left:auto;width:100%}
.halb>.text>*{max-width:540px}
.halb>.text h1,.halb>.text h2{margin-bottom:1.1rem}
.halb>.text .knopf{margin-top:1.75rem;align-self:flex-start}
.halb>.text .hand.frei{margin-top:1.75rem}
.halb>.foto{position:relative;overflow:hidden;margin:0;background:var(--papier);min-height:420px}
.halb>.foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 30%),linear-gradient(0deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 14%),linear-gradient(180deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 12%)}
.halb.getauscht>.foto::after{background:linear-gradient(270deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 30%),linear-gradient(0deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 14%),linear-gradient(180deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 12%)}
.halb.hell>.foto::after{--fade:var(--taupe)}.halb.taupe>.foto::after{--fade:var(--taupe)}.halb.weiss>.foto::after{--fade:#fff}
.halb.gruen>.foto::after,.halb.dunkel>.foto::after,.halb>.foto.passend::after,.halb>.foto.hart::after{content:none}
.halb.hero-halb>.foto::after{background:linear-gradient(90deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 9%),linear-gradient(0deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 10%)}
.halb>.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.halb>.foto.passend img{object-fit:contain;background:#fff}
.halb>.foto figcaption.ki{position:absolute;right:.6rem;bottom:.4rem;margin:0;background:rgba(255,255,255,.75);border-radius:6px;padding:.1rem .45rem;z-index:3;color:rgba(58,61,66,.7);font-size:.7rem}
.halb.getauscht>.foto{grid-column:1;grid-row:1}
.halb.getauscht>.text{grid-column:2;grid-row:1;padding:4rem 5vw 4rem 4vw;margin-left:0;margin-right:auto}
.halb.hell>.text{background:var(--taupe)}
.halb.hell{background:var(--taupe)}
.halb.weiss{background:#fff}
.halb.weiss>.text{background:#fff}
.halb.gruenweiss{background:#f4f6f0}
.halb.gruenweiss>.text{background:#f4f6f0}
.halb.gruenweiss>.foto{background:#f4f6f0}
.halb.gruenweiss>.foto.passend img{background:#f4f6f0}
.halb.gruenweiss>.foto::after{--fade:#f4f6f0}
.halb.taupe>.text{background:var(--taupe)}
.halb.taupe{background:var(--taupe)}
.halb.gruen{background:var(--gruen)}
.halb.gruen>.text{background:var(--gruen)}
.halb.gruen>.text h1,.halb.gruen>.text h2,.halb.gruen>.text p,.halb.gruen>.text .kicker{color:#fff}
.halb.gruen em.akz{color:#fff;font-weight:400}
.halb.gruen .knopf{background:#fff;color:var(--gruen-t)}
.halb.gruen>.foto{background:var(--gruen)}
.halb.hoch{min-height:clamp(560px,42vw,760px)}
.halb.sehr-hoch{min-height:720px}
.halb.flach{min-height:440px}
.halb.flach>.foto{min-height:380px}
.halb.dunkel{background:#3d3630;color:#fff}
.halb.dunkel>.text h2,.halb.dunkel>.text p{color:#fff}
.halb.dunkel>.text .karte-foto{max-width:none;margin-top:1.5rem;padding:1.4rem 1.6rem;background:#fff}
.halb.dunkel>.text .karte-foto p{color:var(--text)}
.halb.dunkel>.text .karte-foto .knopf{margin-top:1rem}
.halb.dunkel .neben-klein{margin-top:1.25rem;font-size:.9rem;color:rgba(255,255,255,.8)}
.halb.dunkel .neben-klein a{color:#fff}
.hero-halb .text>*{max-width:540px}
.hero-halb .text .claim{margin-top:1.5rem;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-weight:700}
.hero-halb .text .kicker{margin-bottom:.6rem}
.hero-halb h1{font-size:clamp(2.2rem,3.6vw,3.1rem)}

/* Icon-Karten */
.ikarten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0}
.ikarten.vier{grid-template-columns:repeat(4,1fr)}
.ikarten.fuenf{grid-template-columns:repeat(5,1fr);gap:16px}
.ikarten.zwei{grid-template-columns:repeat(2,1fr)}
.ikarten>li,.ikarten>div,.ikarten>a{background:#fff;border:1px solid var(--taupe-2);padding:1.6rem 1.5rem;border-radius:var(--radius);display:flex;flex-direction:column;gap:.8rem;color:inherit;min-width:0}
.ikarten h3{font-size:1.1rem;margin:0}
.ikarten p{font-size:.95rem;color:var(--muted);margin:0}
.ikarten.weiss>li,.ikarten.weiss>div{background:#fff;border:0;box-shadow:var(--schatten)}
.ikarten.reihe-icons>li{background:none;border:0;padding:.5rem 1rem;text-align:center;align-items:center;border-left:1px solid var(--taupe-2);border-radius:0}
.ikarten.reihe-icons>li:first-child{border-left:0}
.ikarten.reihe-icons h3{font-size:1.02rem}
.ikarten.reihe-icons p{font-size:.92rem}
.ikarten.kreise>li{background:none;border:0;padding:0 .75rem;text-align:center;align-items:center;border-radius:0;gap:1rem}
.ikarten.kreise h3{font-size:1.15rem}
.ikarten.quer>li,.ikarten.quer>div{flex-direction:row;align-items:flex-start;gap:1.1rem}
.ikarten.quer .kreis.klein{margin-top:.1rem}
.ikarten.links>li{text-align:left;align-items:flex-start}
.ikarten.grau>li{background:var(--taupe);border:0}
.ikarten .ico{width:2.6rem;height:2.6rem}
.ikarten.skizze .ico{width:3.6rem;height:3.6rem;stroke:var(--navy);stroke-width:1.2}

/* Kasten mit Icon */
.ikasten{display:flex;gap:1.25rem;align-items:flex-start;background:var(--gruen-hell2);border:1px solid #e4ecd0;padding:1.5rem 1.6rem;border-radius:var(--radius);margin-top:1.5rem}
.ikasten.grau{background:#eef3e3;border-color:#e0ead0}
.ikasten.weiss{background:#fff;border:0;box-shadow:var(--schatten)}
.ikasten.rand{background:#fff;border:1.5px solid var(--gruen)}
.ikasten b{display:block;font-weight:700;color:var(--gruen-t);font-size:1.05rem;margin-bottom:.3rem}
.ikasten b.dunkel{color:var(--navy)}
.ikasten p{font-size:.97rem}
.ikasten .ico{width:2.8rem;height:2.8rem}
.ikasten .knopfreihe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}
.ikasten .textlink{display:inline-block;margin-top:.8rem}

/* Häkchen im grünen Kreis */
.haken-gruen{list-style:none;margin:0;padding:0;max-width:540px}
.haken-gruen li{display:flex;gap:.8rem;align-items:flex-start;padding:.4rem 0;font-size:1.02rem}
.haken-gruen li::before{content:"";flex:0 0 1.35rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/68% no-repeat;margin-top:.2rem}
.haken-gruen.eng li{padding:.28rem 0;font-size:.98rem}
.haken-gruen b{font-weight:700;color:var(--navy)}
.haken-gruen span{display:block;color:var(--muted);font-size:.95rem}

/* Kundenstimmen (Startseite): zwei Karten + Google-Spalte */
.stimmen{display:grid;grid-template-columns:1fr 1fr .8fr;gap:24px;align-items:start}
.stimmen blockquote{margin:0;background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column;position:relative}
.stimmen .g{position:absolute;right:1.3rem;top:1.3rem;width:2rem;height:2rem}
.stimmen .wofuer{font-weight:700;color:var(--navy);font-size:.95rem;margin-bottom:.7rem;padding-right:2.5rem}
.stimmen blockquote p{font-size:.95rem;color:var(--text)}
.stimmen cite{display:block;font-style:normal;margin-top:1rem;padding-top:0;color:var(--muted);font-size:.88rem}
.stimmen .google{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1rem 0 1rem 1rem}
.stimmen .google b{font-size:1.5rem;color:var(--navy);line-height:1.15}
.stimmen .google .g{position:static;width:2.6rem;height:2.6rem;margin-bottom:.6rem}
.stimmen .google .textlink{margin-top:.8rem;font-size:1.02rem}
.stimmen .google .klein{max-width:24ch}

/* Polaroids (Über uns) */
.polaroids{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.polaroids figure{background:#fff;padding:10px 10px 0;box-shadow:0 10px 30px rgba(45,63,92,.14);border-radius:3px;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.polaroids figure:nth-child(2n){transform:rotate(1.6deg)}
.polaroids figure:nth-child(3){transform:rotate(-.8deg)}
.polaroids figure:hover{transform:rotate(0) translateY(-6px);box-shadow:0 18px 40px rgba(45,63,92,.18)}
.polaroids img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.polaroids figcaption{margin:0;padding:.75rem .4rem .9rem;text-align:center}
.polaroids figcaption .hand{font-size:1.5rem;color:var(--navy);display:block}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.kopfzeile>div{max-width:640px}
.kopfzeile .sub{margin-top:.5rem;font-size:1.15rem}

/* Grünes Band mit Icon, Text, Knopf */
.cta-band{background:var(--gruen);color:#fff}
.cta-band .wrap{display:flex;align-items:center;gap:2.25rem;padding-top:2.75rem;padding-bottom:2.75rem;flex-wrap:wrap}
.cta-band .ico{width:4rem;height:4rem;stroke:#fff;stroke-width:1.3}
.cta-band .text{flex:1 1 380px;border-left:2px solid rgba(255,255,255,.55);padding-left:2rem}
.cta-band h2{color:#fff;font-size:clamp(1.35rem,2.1vw,1.75rem);margin-bottom:.35rem}
.cta-band p{color:#fff;max-width:56ch}
.cta-band .knopf{background:#fff;color:var(--gruen-t);flex:0 0 auto;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.cta-band .klecks{flex:0 0 auto;color:#fff}
.cta-band .klecks::before{background:rgba(255,255,255,.18)}

/* CTA mit Foto als Hintergrund (Leistungen "Wir nehmen uns Zeit.") */
.cta-foto{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center}
.cta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.cta-foto::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,.35) 75%,rgba(255,255,255,.1) 100%)}
.cta-foto .wrap{position:relative;z-index:2;width:100%;box-sizing:border-box;padding-top:3rem;padding-bottom:3rem}
.cta-foto h2{margin-bottom:.5rem}
.cta-foto .knopf{margin-top:1.4rem}

/* Kundenstimmen, Stapel u. a. brauchen eine Zeile mit Icon (Kontaktzeile) */
.iconzeile{display:flex;gap:2.5rem;flex-wrap:wrap;align-items:center}
.iconzeile a,.iconzeile span{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-size:.95rem}
.iconzeile .ico{width:1.5rem;height:1.5rem}
.iconzeile a:hover{color:var(--gruen-t)}

/* Blickwinkel (Bewertung): breites Bild + Karte */
.blick-reihe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch}
.blick-reihe+.blick-reihe{margin-top:14px}
.blick-reihe figure{position:relative;margin:0;border-radius:6px;overflow:hidden}
.blick-reihe img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/6;object-position:50% 55%}
.blick-reihe figcaption.ki{position:absolute;right:0;bottom:0;margin:0;background:rgba(255,255,255,.85);padding:.3rem .6rem}
.blick-reihe .karte-b{background:#eef3e3;border-radius:6px;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.4rem}
.blick-reihe .karte-b .ico{width:4rem;height:4rem;stroke-width:1.3}
.blick-reihe .karte-b h3{font-size:1.45rem;line-height:1.12;margin:0}
.blick-reihe .karte-b h3 em{font-style:normal;color:var(--gruen-t);font-weight:700;display:block;font-size:2rem}
.blick-reihe .karte-b h3::after{content:"";display:block;width:2.6rem;height:2px;background:var(--gruen);margin-top:.7rem}
.blick-reihe .karte-b p{margin-top:.6rem;font-size:.92rem;color:var(--muted)}

/* Bewertung: Kopfblock mit Innenraum-Foto und weißer Karte */
.bew-kopf{position:relative;overflow:hidden;background:linear-gradient(100deg,#fff 0%,#faf9f6 45%,var(--taupe) 100%)}
.bew-kopf::before{content:"";position:absolute;right:-12vw;top:-30%;width:52vw;height:160%;z-index:1;background:radial-gradient(closest-side,rgba(151,192,60,.10),rgba(151,192,60,0));pointer-events:none}
.bew-kopf .wrap{position:relative;z-index:2;display:grid;grid-template-columns:5fr 7fr;gap:2.5rem;align-items:center;padding-top:3.5rem;padding-bottom:3.5rem}
.bew-kopf h1{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.bew-karte{background:rgba(255,255,255,.95);border-radius:var(--radius);box-shadow:var(--schatten);padding:1.75rem 1.9rem}
.bew-karte h3{font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.9rem}
.bew-karte .fazit{margin-top:1.2rem;padding:1rem 1.2rem;background:var(--gruen-hell2);border-radius:10px;border-left:3px solid var(--gruen)}
.bew-karte .fazit b{color:var(--gruen-t)}
/* Studienkarte (Bewertung, Anhang 3 vom 20.09.): Säulen mit Angebotspreis, erzieltem Preis, Uhr + Dauer; Ergebnis-Kasten rechts */
.bew-kopf .wrap{grid-template-columns:5fr 7fr;align-items:center}
.bew-kopf h1{font-size:clamp(1.9rem,2.9vw,2.45rem)}
.bew-kopf .text{position:relative;padding-bottom:1rem}
.bew-kopf .text .kicker{margin-bottom:.4rem}
.bew-karte.studie{padding:1.5rem 1.6rem 1.3rem}
.bew-karte.studie h3{margin-bottom:.2rem}
.bew-karte.studie>.klein{color:var(--muted);font-size:.86rem;margin:0 0 1.1rem}
.studie-raster{display:grid;grid-template-columns:1fr 170px;gap:1rem;align-items:stretch}
.balken-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.balken{min-width:0;text-align:center;padding:0 .15rem;border-right:1px solid var(--linie)}
.balken:last-child{border-right:0}
.balken .preis{margin:0 0 .4rem;font-size:.78rem;color:var(--muted);line-height:1.3;min-height:5.3rem}
.balken .preis b{display:block;font-size:1.55rem;color:var(--gruen-t);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:.1rem 0}
.balken .preis span{display:block}
.balken .saeule{height:215px;padding-top:3.3rem;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--linie)}
.balken .saeule>div{position:relative;width:min(100%,86px);height:var(--h);background:var(--gruen);border-radius:8px 8px 0 0}
.balken:nth-child(2) .saeule>div{background:#a9c96a}
.balken:nth-child(3) .saeule>div{background:#c2d99a}
.balken .saeule .wert{position:absolute;left:-.4rem;right:-.4rem;top:-3.2rem;font-weight:700;color:var(--navy);font-size:1.05rem;line-height:1.2;font-variant-numeric:tabular-nums}
.balken .saeule .wert small{display:block;font-size:.68rem;font-weight:500;color:var(--muted);line-height:1.2;margin-top:.05rem}
.balken .dauer{margin:.7rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.3}
.balken .dauer .ico{display:block;width:1.9rem;height:1.9rem;margin:0 auto .3rem;stroke:var(--gruen)}
.balken .dauer small{display:block;font-size:.7rem;white-space:nowrap}
.balken .dauer b{display:block;color:var(--navy);font-size:1rem;margin-top:.1rem}
.balken .dauer b small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.bew-karte.studie .fazit{margin:0;padding:1.1rem 1rem;border:1.5px solid var(--gruen);border-left-width:1.5px;background:#fff;border-radius:12px;display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;line-height:1.45}
.bew-karte.studie .fazit .ico{width:2.4rem;height:2.4rem;stroke:var(--gruen);margin-bottom:.3rem}
.bew-karte.studie .fazit b{color:var(--gruen-t);font-size:1rem}
.bew-karte.studie .quelle{margin:1rem 0 0;font-size:.78rem;color:var(--muted)}
/* Post-it in Handschrift (Anhang 3) */
.klecks.zettel{margin-top:1.6rem;padding:1.1rem 1.3rem;max-width:15rem;text-align:left;font-size:1.5rem;color:var(--gruen-d);transform:rotate(-4deg)}
.klecks.zettel::before{border-radius:3px;inset:0;transform:none;background:#dcebb4;box-shadow:0 8px 18px rgba(45,63,92,.14)}
/* Hellgrünes Band unter dem Kopf: Herz + Satz, rechts Claim in Handschrift */
.band-hell{background:var(--gruen-hell2)}
.bew-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding-top:1.4rem;padding-bottom:1.4rem}
.bew-band .satz{flex:1 1 auto}
.bew-band .claim{flex:0 0 auto}
.bew-band .satz{margin:0;display:flex;align-items:center;gap:1rem;font-size:1.08rem;color:var(--navy);font-weight:500;max-width:none}
.bew-band .satz .ico{width:2.6rem;height:2.6rem;flex:0 0 auto;stroke:var(--gruen)}
.bew-band .claim{margin:0;display:flex;flex-direction:column;align-items:center;padding-left:2.5rem;border-left:1px solid var(--taupe-3);max-width:none}
.bew-band .claim .hand{margin:0}
.bew-band .firma{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.1rem}
.fuenf-zeile{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.fuenf-zeile li{background:#fff;border:1px solid var(--gruen);border-radius:999px;padding:.3rem .8rem;font-size:.88rem;color:var(--gruen-d);font-weight:600}

/* Home Staging */
.paare{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.paar-vn{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none;padding:0;border-radius:0;box-shadow:none}
.paar-vn figure{position:relative;border-radius:3px;overflow:hidden}
.paar-vn img{width:100%;aspect-ratio:4/3;object-fit:cover}
.paar-vn figcaption{margin:0;text-align:center;padding:.5rem 0 .25rem;font-size:.85rem;color:var(--muted);font-weight:600}
.paar-vn figcaption.nachher{color:var(--gruen-t)}
.paar-vn .raum{grid-column:1/3;text-align:center;font-size:.85rem;color:var(--muted);padding:0 0 .35rem}
.zahl{display:flex;gap:1.2rem;align-items:flex-start;margin-top:1.4rem;flex:1}
.zahl b{font-size:2.6rem;font-weight:700;color:var(--gruen-t);letter-spacing:-.02em;line-height:1;flex:0 0 5.2rem}
.zahl p{font-size:.98rem}
.zahl p b{font-size:inherit;color:var(--navy);flex:none}

/* Sprüche mit Pfeil (Nicht immer einer Meinung) */
.spruch{margin:1.5rem 0 0;display:flex;gap:.9rem;align-items:flex-start}
.spruch .ico{width:2.4rem;height:2.4rem;margin-top:.3rem;stroke:var(--gruen);stroke-width:2}
.spruch .zitat{font-size:clamp(1.3rem,1.9vw,1.6rem);color:var(--text);font-weight:400;line-height:1.3;max-width:20ch}
.spruch cite{display:block;margin-top:.5rem;font-style:normal;font-size:.9rem;color:var(--muted)}
.zitat{font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.25;letter-spacing:-.01em;font-weight:700;color:var(--navy);max-width:28ch;text-wrap:balance}
.zitat.gruen{color:var(--gruen-t)}
.ico.solo{width:3.5rem;height:3.5rem;stroke:var(--gruen);margin-top:1.5rem;stroke-width:1.8}

/* Drei Textspalten (Erbengemeinschaft) */
.spalten3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.spalten3 h3{font-size:1.15rem;margin-bottom:.8rem}
.spalten3 p{font-size:.97rem}
.spalten3 .zitat{margin:1rem 0 .75rem}
.spalten3 .versal-gross{font-size:clamp(1.6rem,2.6vw,2.2rem);text-transform:uppercase;letter-spacing:.02em;color:var(--gruen-t);line-height:1.15;font-weight:700;margin-bottom:1rem;border-left:3px solid var(--gruen);padding-left:1rem}
.satz-band{background:var(--gruen-hell);color:var(--navy);padding:1rem 1.5rem;text-align:center;font-weight:600;font-size:1.05rem;border-radius:10px;max-width:none}
.satz-band em{font-style:normal;color:var(--gruen-t)}

/* Umfrage */
.um-hero{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:2rem;align-items:center;padding-top:2rem;padding-bottom:2rem}
.um-hero .rechts{display:flex;flex-direction:column;gap:2rem;align-items:center;text-align:center}
.um-hero h1{font-size:clamp(1.5rem,2.4vw,2rem);text-transform:uppercase;letter-spacing:.01em;margin:1rem 0 .8rem}
.zahl-band{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:2.5rem;align-items:center}
.zahl-band>div{display:flex;gap:1.1rem;align-items:flex-start}
.zahl-band>div+div{border-left:1px solid var(--taupe-3);padding-left:2.5rem}
.zahl-band .riesig{font-size:3.2rem;font-weight:700;color:var(--gruen-t);line-height:1;letter-spacing:-.02em}
.zahl-band .ico{width:2.8rem;height:2.8rem;margin-top:.3rem}
.zahl-band p{font-size:.95rem}
.zahl-band .hand{font-size:2.2rem}

/* EHRLICH gesagt */
.seitenkopf{padding-top:4rem;padding-bottom:2.5rem}
.seitenkopf h1{grid-column:1/10;overflow-wrap:anywhere;hyphens:auto}
.seitenkopf .einleitung{grid-column:1/8;margin-top:1.25rem;font-size:1.1rem}
.seitenkopf .kicker{grid-column:1/13;margin-bottom:.4rem}
.seitenkopf .themen{grid-column:1/9;margin:2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.seitenkopf .themen li a{display:inline-block;background:var(--gruen-hell2);border:1px solid var(--gruen-hell);border-radius:999px;padding:.4rem .95rem;font-size:.9rem;color:var(--navy)}
.seitenkopf .themen li a:hover{background:var(--gruen-hell);text-decoration:none}
.beitrag{padding-top:var(--eng);padding-bottom:var(--eng);border-top:1px solid var(--taupe-2);scroll-margin-top:calc(var(--kopf) + 1rem)}
.beitrag h2{grid-column:1/11;margin-bottom:2rem}
.beitrag .kachel{grid-column:1/5;margin:0;max-width:340px;grid-row:2;border-radius:12px;overflow:hidden;box-shadow:var(--schatten)}
.beitrag .kachel img{width:100%;aspect-ratio:1/1;object-fit:cover}
.beitrag .medium{grid-column:1/5;margin:1.25rem 0 0;max-width:340px;grid-row:3}
.beitrag .medium video{width:100%;background:var(--taupe);border-radius:12px}
.beitrag .medium video.hoch{aspect-ratio:9/16}
.beitrag .medium figcaption{margin-top:.5rem}
.beitrag .text{grid-column:6/13;grid-row:2/5;align-self:start}
.beitrag .text h3{margin-bottom:.8rem}
.beitrag .text .knopf{margin-top:1.5rem}
.beitrag.quer .medium{grid-column:1/7;max-width:560px}
.beitrag.quer .medium video{aspect-ratio:16/9}
.beitrag.quer .text{grid-column:8/13}
figcaption.ki{font-size:.76rem;color:var(--muted);margin-top:.4rem;letter-spacing:.02em}
.ki-frei{font-size:.76rem;color:var(--muted);margin-top:.4rem}

/* Rechner, Formulare, Objekte, Kontakt, Recht */
.rechner .kasten{grid-column:1/13;background:var(--gruen-hell2);border-radius:var(--radius);padding:2.5rem;min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem}
.rechner iframe{grid-column:1/13;width:100%;height:900px;border:0;display:block;background:#fff}
.seitenkopf .formlogo{grid-column:1/13;width:200px;height:auto;margin-bottom:1.5rem}
.formular .label{font-size:.9rem;color:var(--muted);margin:.9rem 0 .5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:.5rem .9rem;border:1px solid var(--taupe-3);border-radius:999px;font-size:.92rem;background:#fff;transition:background .15s,border-color .15s,color .15s}
.chip input:checked+span{background:var(--gruen-t);border-color:var(--gruen-t);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--gruen-t);outline-offset:2px}
.chip:hover span{border-color:var(--gruen)}
.objekte{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:3rem 24px}
.objekt{margin:0;background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);overflow:hidden}
.objekt a{color:inherit;text-decoration:none;display:block;padding-bottom:1.5rem}
.objekt img{width:100%;aspect-ratio:3/2;object-fit:cover}
.objekt .status{margin:1rem 1.5rem 0;font-size:.9rem;color:var(--gruen-t);font-weight:700}
.objekt h2{font-size:1.25rem;line-height:1.3;margin:.4rem 1.5rem 0;text-wrap:pretty}
.objekt .ort,.objekt .werte,.objekt .energie,.objekt .teaser,.objekt .mehr{margin-left:1.5rem;margin-right:1.5rem}
.objekt .ort{color:var(--muted);margin-top:.3rem}
.objekt .werte{display:flex;gap:1.5rem;margin-top:.9rem;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.objekt .werte span{color:var(--muted)}
.objekt .werte b{font-weight:700;color:var(--navy)}
.objekt .energie{margin-top:.75rem;font-size:.86rem;color:var(--muted)}
.objekt .teaser{margin-top:.9rem;color:var(--muted);font-size:.97rem}
.objekt .mehr{margin-top:.6rem;color:var(--gruen-t);font-weight:700}
.liste{list-style:none;margin:0;padding:0}
.liste li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 2rem;padding:1.1rem 0;border-top:1px solid var(--taupe-2);align-items:baseline}
.liste li:last-child{border-bottom:1px solid var(--taupe-2)}
.liste strong{font-weight:700;font-size:1.05rem;color:var(--navy)}
.liste span{color:var(--muted)}
.liste.zwei-sp{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;margin-top:1.5rem;gap:0 2.5rem}
.liste.zwei-sp li{grid-template-columns:1fr;gap:.1rem;padding:.8rem 0}
.zwei h2{grid-column:1/6}
.zwei .text{grid-column:7/13}
.kontaktseite .formular{grid-column:1/8}
.kontaktseite .neben{grid-column:9/13}
.kontaktseite .neben h2{font-size:1.05rem;margin-bottom:.6rem}
.kontaktseite .neben p+h2{margin-top:1.75rem}
.formular .feld{margin-bottom:1.2rem}
.formular .paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formular .feld+.paar{margin-top:0}
.formular label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.95rem;color:var(--navy)}
.formular input,.formular select,.formular textarea{width:100%;font:inherit;padding:.75rem .9rem;min-height:46px;background:#fff;border:1px solid var(--taupe-3);border-radius:9px;color:var(--text)}
.formular textarea{min-height:150px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:2px solid var(--gruen);outline-offset:0;border-color:var(--gruen)}
.formular .fehler{display:none;color:#a33a22;font-size:.9rem;margin-top:.4rem}
.formular .feld.ungueltig .fehler{display:block}
.formular .feld.ungueltig input,.formular .feld.ungueltig textarea,.formular .feld.ungueltig select{border-color:#a33a22}
.formular .zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.93rem;color:var(--text)}
.formular .zustimmung input{width:auto;min-height:0;margin-top:.3rem}
.formular .honig{position:absolute;left:-9999px}
.formular fieldset{border:0;padding:0;margin:0 0 1.2rem}
.formular legend{font-weight:700;font-size:.95rem;margin-bottom:.4rem;padding:0;color:var(--navy)}
.formular .hinweis{font-size:.88rem;color:var(--muted);margin-top:.4rem}
.recht{grid-column:1/9}
.recht h2{font-size:1.15rem;margin:2rem 0 .5rem}
.recht h2:first-child{margin-top:0}
.recht p+p{margin-top:.7rem}

/* Fuß: schmale Leiste wie in den Vorlagen, darunter Rechtliches und Orte */
.fuss{border-top:1px solid var(--taupe-2);margin-top:auto;background:#fff}
.fuss .leiste .trenn{margin:0 .2rem}
.fuss .leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;padding-top:1.6rem;padding-bottom:1.6rem}
.fuss .leiste>a,.fuss .leiste>span{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-size:.92rem;text-decoration:none;white-space:nowrap}
.fuss .leiste a:hover{color:var(--gruen-t)}
.fuss .leiste .ico{width:1.6rem;height:1.6rem}
.fuss .leiste .hand{font-size:1.6rem;margin-left:auto;white-space:nowrap}
/* Prüfer 23.09.: der negative Rand am Herz schnitt es um 1300 px an der rechten Kante an */
.fuss .leiste .hand .herz{margin-right:0}
.fuss .leiste{flex-wrap:nowrap}
@media(max-width:1000px){.fuss .leiste{flex-wrap:wrap}}
.fuss .leiste .trenn{width:1px;height:1.6rem;background:var(--taupe-3)}
.fuss .unten{background:var(--taupe);font-size:.86rem;color:var(--muted)}
.fuss .unten .wrap{display:grid;grid-template-columns:auto auto 1fr;gap:.6rem 2.5rem;padding-top:1rem;padding-bottom:1rem;align-items:start}
.fuss .unten .wrap>span{grid-row:1/3;align-self:center}
.fuss .unten .ivd{grid-row:1/3;align-self:center;width:auto;height:64px}  /* IVD-Mitgliedslogo, Gabis Wunsch 21.09. */
.fuss .unten ul li:first-child{color:var(--text);font-weight:600}
.fuss .unten a{color:var(--muted)}
.fuss .unten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.fuss .unten ul li{margin:0}
.fuss .logo img{height:44px}

/* Intro (nur Startseite) */
.intro{position:fixed;inset:0;z-index:900;background:#fff;display:flex;align-items:center;justify-content:center;transform-origin:top;will-change:transform}
.intro[hidden]{display:none}
.intro img{width:clamp(200px,24vw,340px);height:auto;opacity:0;transform:translateY(12px) scale(.97)}
.intro .skiphinweis{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:0;animation:einblenden .6s ease 1.2s forwards}
.intro.laeuft img{animation:introLogo 1s cubic-bezier(.22,1,.36,1) .1s forwards}
.intro.geht{pointer-events:none;animation:introHebt .95s cubic-bezier(.76,0,.24,1) forwards}
.intro.geht img{animation:introLogoWeg .5s ease forwards}
.intro.geht .skiphinweis{animation:none;opacity:0}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introLogoWeg{to{opacity:0;transform:translateY(-10px)}}
@keyframes introHebt{to{transform:translateY(-101%)}}
@keyframes einblenden{to{opacity:1}}
body.intro-an{overflow:hidden}

/* Bewegung: ruhig, einmalig, nur mit JS */
.js .reveal>img,.js .reveal>video,.js .reveal>figure{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.77,0,.175,1)}
.js .reveal.an>img,.js .reveal.an>video,.js .reveal.an>figure{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:no-preference){
  .js .hero-halb .text>*{opacity:0;transform:translateY(16px);animation:heroAuf .9s cubic-bezier(.16,1,.3,1) forwards}
  .js .hero-halb .text>:nth-child(1){animation-delay:.05s}.js .hero-halb .text>:nth-child(2){animation-delay:.14s}.js .hero-halb .text>:nth-child(3){animation-delay:.23s}.js .hero-halb .text>:nth-child(4){animation-delay:.31s}.js .hero-halb .text>:nth-child(5){animation-delay:.39s}.js .hero-halb .text>:nth-child(n+6){animation-delay:.47s}
  .js .hero-halb .foto>img{clip-path:inset(0 0 100% 0);transform:scale(1.05);transform-origin:50% 30%;animation:fotoAuf 1.1s cubic-bezier(.77,0,.175,1) .1s forwards}
  .js .hero-halb .foto .auf-foto{opacity:0;transform:translateY(12px);animation:heroAuf .8s cubic-bezier(.16,1,.3,1) 1s forwards}
  body.intro-an .hero-halb .text>*,body.intro-an .hero-halb .foto>img,body.intro-an .hero-halb .foto .auf-foto{animation-play-state:paused}
  .js .reveal>img,.js .reveal>video,.js .reveal>figure{transform:scale(1.04);transform-origin:50% 40%;transition:clip-path .8s cubic-bezier(.77,0,.175,1),transform 1.3s cubic-bezier(.16,1,.3,1)}
  .js .reveal.an>img,.js .reveal.an>video,.js .reveal.an>figure{transform:none}
  .js .reveal .auf-foto{opacity:0;transform:translateY(12px);transition:opacity .7s .55s,transform .7s cubic-bezier(.16,1,.3,1) .55s}
  .js .reveal.an .auf-foto{opacity:1;transform:none}
  .js .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js .stagger.an>*{opacity:1;transform:none}
  .js .stagger.an>:nth-child(2){transition-delay:.08s}.js .stagger.an>:nth-child(3){transition-delay:.16s}.js .stagger.an>:nth-child(4){transition-delay:.24s}.js .stagger.an>:nth-child(5){transition-delay:.32s}.js .stagger.an>:nth-child(n+6){transition-delay:.4s}
  .js .polaroids.stagger.an figure{transform:rotate(-2deg)}.js .polaroids.stagger.an figure:nth-child(2n){transform:rotate(1.6deg)}.js .polaroids.stagger.an figure:nth-child(3){transform:rotate(-.8deg)}
  .js .polaroids.stagger.an figure:hover{transform:rotate(0) translateY(-6px)}
  .ikarten>li,.ikarten>div,.stimmen blockquote{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,opacity .7s,transform .7s cubic-bezier(.16,1,.3,1)}
  .stimmen blockquote:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(45,63,92,.12)}
  .kreis{transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .ikarten>li:hover .kreis{transform:translateY(-3px) scale(1.05)}
  .halb>.foto img{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
  .halb>.foto:hover img{transform:scale(1.03)}
}
@keyframes heroAuf{to{opacity:1;transform:none}}
@keyframes fotoAuf{to{clip-path:inset(0 0 0 0);transform:none}}
@media(prefers-reduced-motion:reduce){.js .reveal>img,.js .reveal>video,.js .reveal>figure{clip-path:none;transition:none}}

/* Tablet und Handy */
@media(max-width:1180px){
  .nav>ul{gap:1.05rem;font-size:.88rem}
  .nav .kontaktweg small,.nav .kontaktweg span{display:none}
  .nav .kontaktweg{font-size:.85rem}
  .nav .rechts{gap:1rem}
}
/* 21.09.: Herz mit negativem Rand und Kopfzeile erzeugten zwischen 1000 und 1300 px einen waagerechten Scrollbalken (Prüfer) */
html,body{overflow-x:clip}
@media(max-width:1000px){
  .halb>.foto::after,.halb.getauscht>.foto::after{background:linear-gradient(0deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 16%)}
  :root{--eng:2.5rem;--normal:3.75rem;--weit:5rem;--kopf:70px}
  .nav .menue{display:inline-block}
  .nav>ul{position:absolute;top:var(--kopf);left:0;right:0;background:#fff;border-bottom:1px solid var(--taupe-2);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 5vw 1rem;display:none;box-shadow:var(--schatten)}
  .nav>ul.offen{display:flex}
  .nav>ul>li>a{display:block;padding:.75rem 0;border-bottom:1px solid var(--taupe-2)}
  .nav .unter{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 .5rem 1rem;min-width:0;display:flex;box-shadow:none}
  .nav .unter a{padding:.45rem 0;border-bottom:0!important;font-size:.9rem;color:var(--muted)}
  .nav li.hat-unter>a::after{display:none}
  .nav .unter li.trenner{display:none}
  .nav .rechts{gap:.9rem}
  .nav .kontaktweg span{display:none}
  .nav .kontaktweg svg{width:1.5rem;height:1.5rem}
  .logo img{height:52px}
  .halb,.hero-halb{grid-template-columns:1fr;min-height:0}
  .halb>.foto,.halb.getauscht>.foto{grid-column:1;grid-row:1;min-height:0;aspect-ratio:4/3}
  .halb>.foto img{position:absolute}
  .halb>.foto.passend{aspect-ratio:1/1}
  .halb>.text,.halb.getauscht>.text{grid-column:1;grid-row:2;padding:2.5rem 5vw;max-width:none;margin:0}
  .halb>.text>*{max-width:none}
  .zwei-sp,.drei-sp,.spalten3{grid-template-columns:1fr;gap:2rem}
  .ikarten,.ikarten.vier,.ikarten.fuenf{grid-template-columns:1fr 1fr}
  .ikarten.reihe-icons>li{border-left:0}
  .stimmen{grid-template-columns:1fr}
  .stimmen .google{padding:1rem 0 0}
  .polaroids{grid-template-columns:1fr 1fr}
  .blick-reihe{grid-template-columns:1fr}
  .bew-kopf .wrap{grid-template-columns:1fr}
  .studie-raster{grid-template-columns:1fr}
  .balken-reihe{gap:.5rem}
  .balken .saeule{height:170px}
  .balken .saeule>div{width:min(100%,64px)}
  .balken .dauer b{font-size:.9rem}
  .bew-band .wrap{flex-wrap:wrap}
  .bew-band .claim{border-left:0;padding-left:0;align-items:flex-start}
  .fuss .unten .wrap{grid-template-columns:1fr}
  .fuss .unten .wrap>span{grid-row:auto}
  .fuss .unten .ivd{grid-row:auto;height:56px}
  .paare{grid-template-columns:1fr 1fr}
  .um-hero{grid-template-columns:1fr}
  .um-hero .rechts{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .zahl-band{grid-template-columns:1fr}
  .zahl-band>div+div{border-left:0;padding-left:0}
  .zwei h2,.zwei .text,.seitenkopf h1,.seitenkopf .einleitung,.recht,.kontaktseite .formular,.kontaktseite .neben,.seitenkopf .themen{grid-column:1/13}
  .zwei .text{margin-top:1.25rem}
  .kontaktseite .neben{margin-top:2.5rem}
  .beitrag h2,.beitrag .kachel,.beitrag .medium,.beitrag .text,.beitrag.quer .text,.beitrag.quer .medium{grid-column:1/13;grid-row:auto}
  .beitrag .text{margin-top:1.75rem}
  .objekte{grid-template-columns:1fr}
  .cta-band .text{border:0;padding:0}
  .auf-foto.ol,.auf-foto.or{top:1rem}.auf-foto.ol,.auf-foto.ul{left:1rem}.auf-foto.or,.auf-foto.ur{right:1rem}.auf-foto.ul,.auf-foto.ur{bottom:1rem}
  .hand.auf-foto{font-size:1.5rem;max-width:10rem}
  .klecks.rund{width:8.5rem;height:8.5rem;font-size:1.05rem}
  .karte-foto{max-width:15rem;font-size:.85rem;padding:.8rem 1rem}
  .rechner iframe{height:1000px}
  .fuss .leiste .hand{margin-left:0}
  .cta-foto::before{background:rgba(255,255,255,.88)}
}
@media(max-width:600px){
  html{font-size:16px}
  .formular .paar{grid-template-columns:1fr}
  .ikarten,.ikarten.vier,.ikarten.fuenf,.ikarten.zwei,.paare,.polaroids{grid-template-columns:1fr}
  .ikarten.reihe-icons,.ikarten.kreise{grid-template-columns:1fr 1fr;gap:12px}
  .ikarten.reihe-icons>li,.ikarten.kreise>li{padding:0 .25rem}
  .kreis{width:4.2rem;height:4.2rem}
  h1{overflow-wrap:anywhere;hyphens:auto}
  .halb>.text,.halb.getauscht>.text{padding:2rem 5vw}
  .liste li{grid-template-columns:1fr;gap:.3rem}
  .liste.zwei-sp{grid-template-columns:1fr}
  .hero-halb .foto .karte-foto{display:none}
  .hand.auf-foto{top:1rem;bottom:auto;left:1rem;right:auto;text-shadow:0 1px 8px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.6)}
  .klecks.rund.auf-foto{display:none}
  .beitrag .kachel,.beitrag .medium,.beitrag.quer .medium{max-width:300px}
  .fuss .leiste{gap:.8rem 1.5rem}
  .fuss .leiste .trenn{display:none}
  .um-hero h1{font-size:1.35rem}
}

/* CTA mit kleinem Bild links, Text, Klecks rechts (Home Staging) */
.cta-bild{display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.cta-bild figure{flex:0 0 220px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.cta-bild figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cta-bild .text{flex:1 1 380px}
.cta-bild h2{margin-bottom:.4rem}
.cta-bild .knopf{margin-top:1.25rem}
.cta-bild .klecks{flex:0 0 auto}
.zahl b{flex:0 0 6.4rem;white-space:nowrap}
.ikasten .ico.gross-k{width:3.4rem;height:3.4rem}
.ikarten.reihe-icons .ico,.ikarten.kreise .kreis .ico{width:2.8rem;height:2.8rem}
.ikarten.quer.gross-icons .ico{width:3.6rem;height:3.6rem;stroke-width:1.3}

.band-gruen .ico{stroke:#fff}
.themen{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;max-width:none}
.themen li a{display:inline-block;background:var(--gruen-hell2);border:1px solid var(--gruen-hell);border-radius:999px;padding:.4rem .95rem;font-size:.9rem;color:var(--navy)}
.themen li a:hover{background:var(--gruen-hell);text-decoration:none}
.um-hero{grid-template-columns:1fr 1.35fr .75fr}
@media(max-width:1000px){.um-hero{grid-template-columns:1fr}}
.um-hero figure img{width:100%}
h1.riesig{font-size:clamp(3rem,6vw,4.6rem)}

@media(max-width:1000px){
  .halb.flach>.foto,.halb.hoch>.foto,.halb.sehr-hoch>.foto{min-height:0}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .um-hero .rechts{flex-direction:column}
  .um-hero .rechts .hand{max-width:100%}
  .hand,.hand.gross{overflow-wrap:anywhere}
  .stimmen{grid-template-columns:1fr!important}
}

/* Prüfer 20.09.: Handy-Bildausschnitt, Notizen weg vom Gesicht, KI-Hinweis links */
@media(max-width:1000px){
  .hero-halb>.foto{aspect-ratio:4/5}
  .halb>.foto img{object-position:var(--pos-m,var(--pos,50% 30%))}
  .hand.auf-foto.handy-ol{top:1rem;left:1rem;right:auto;bottom:auto}
  .halb.dunkel>.foto .hand.auf-foto{top:1rem;bottom:auto;left:1rem}
  .blick-reihe figcaption.ki{right:auto;left:0}
}
.blick-reihe figcaption.ki{right:auto;left:0}
.klecks.rund.auf-foto{width:11rem;height:11rem;font-size:1.3rem}
@media(max-width:600px){.hand.auf-foto.handy-ol{top:1rem;left:1rem;right:auto;bottom:auto}}
.sterne{display:inline-flex;gap:.15rem;margin-bottom:.3rem}
.sterne svg{width:1.35rem;height:1.35rem;fill:#F4B400}

/* ---- Vorlagen-Schicht 20.09. nachmittags: Bausteine, die den Gestaltungsbildern fehlten ---- */
/* Hero als Vollfoto mit weißem Text links (Vorlage Leistungen) */
.hero-voll{position:relative;overflow:hidden;min-height:clamp(420px,36vw,560px);display:flex;align-items:center;background:#6b8a3a}
.hero-voll>img{position:absolute;top:0;bottom:0;left:16%;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.hero-voll>img.fond{left:0;width:100%;filter:blur(14px);transform:scale(1.08)}
.hero-voll::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(35,55,15,.62) 0%,rgba(35,55,15,.5) 34%,rgba(35,55,15,.1) 56%,rgba(35,55,15,0) 72%)}
.hero-voll .text{position:relative;z-index:2;width:100%;box-sizing:border-box;padding-top:3.5rem;padding-bottom:3.5rem}
.hero-voll .text>*{max-width:520px}
.hero-voll .kicker{color:#d7ec9a}
.hero-voll h1{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:1.1rem}
.hero-voll h1 em.akz{color:#fff;font-weight:400;display:block}
.hero-voll p{color:#fff}
.hero-voll p+p{margin-top:.6rem}
/* Leistungs-Reihen: Foto im Kasten, Text daneben, im Wechsel (Vorlage 03) */
.leist-reihen{padding-top:2rem;padding-bottom:2rem}
.leist-reihe{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3rem;align-items:center;padding:1.75rem 0}
.leist-reihe+.leist-reihe{border-top:1px solid var(--taupe-2)}
.leist-reihe figure{position:relative;margin:0;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(45,63,92,.08)}
.leist-reihe figure img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:var(--pos,50% 50%)}
.leist-reihe.skizze figure img{object-fit:contain;background:#fff}
.leist-reihe figcaption.ki{position:absolute;left:0;bottom:0;margin:0;background:rgba(255,255,255,.85);padding:.2rem .5rem;color:var(--muted);font-size:.68rem}
.leist-reihe.getauscht figure{order:2}
.leist-reihe .text .kicker{margin-bottom:.5rem}
.leist-reihe .haken-gruen li{font-size:.98rem}
/* Polaroids mit Post-it (Vorlage Über uns) */
.polaroids.zettel figure{padding:10px 10px 10px;position:relative;overflow:visible;margin-bottom:2.5rem}
.polaroids.zettel figcaption{position:absolute;left:8%;right:8%;bottom:-1.9rem;background:#fbf6dc;box-shadow:0 8px 18px rgba(45,63,92,.16);padding:.6rem .5rem;transform:rotate(-2deg);border-radius:2px}
.polaroids.zettel figure:nth-child(2n) figcaption{transform:rotate(1.5deg)}
.polaroids.zettel figcaption .hand{font-size:1.35rem;line-height:1.05}
/* Bär-Block: Bär links, zwei Textspalten (Vorlage Über uns) */
.baer-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:3rem;align-items:center}
.baer-block figure{margin:0;position:relative}
.baer-block figure img{width:100%;max-width:420px}
.baer-block figcaption.ki{position:absolute;left:0;bottom:-1.2rem;margin:0}
.baer-block h2{font-size:clamp(1.35rem,2vw,1.7rem)}
.baer-block p{font-size:.98rem}
/* Foto-Abschluss dunkel (Vorlage Mediation): Foto ganz, rechts brauner Verlauf, Handschrift links */
.cta-foto.dunkel{min-height:520px;color:#fff;background:#3d3630}
.cta-foto.dunkel::before{background:linear-gradient(90deg,rgba(61,54,48,.55) 0%,rgba(61,54,48,.2) 30%,rgba(61,54,48,.12) 42%,rgba(61,54,48,.78) 62%,rgba(61,54,48,.9) 100%)}
.cta-foto.dunkel .hand.links-oben{position:absolute;z-index:2;left:5vw;top:3rem;max-width:22rem;text-align:left;font-size:2.4rem;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.cta-foto.dunkel .wrap{display:flex;justify-content:flex-end}
.cta-foto.dunkel .rechts{max-width:440px}
.cta-foto.dunkel .rechts>p{color:#fff}
.cta-foto.dunkel .karte-foto{max-width:none;margin-top:1.5rem;padding:1.4rem 1.6rem;background:#fff}
.cta-foto.dunkel .karte-foto p{color:var(--text)}
.cta-foto.dunkel .karte-foto .knopf{margin-top:1rem}
/* Umfrage: Formular + Anonym-Kasten, dunkler Knopf (Vorlage 11) */
.um-form{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:start;margin-top:1rem}
.um-form .formular{margin-top:0!important}
.anonym{background:#fff;border-radius:10px;box-shadow:var(--schatten);padding:1.1rem 1.2rem;margin-top:1.25rem}
.anonym b{display:flex;align-items:center;gap:.5rem;color:var(--navy);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:.4rem}
.anonym b .ico{width:1.5rem;height:1.5rem}
.anonym .haken-gruen li{font-size:.88rem;padding:.2rem 0}
.anonym .haken-gruen li::before{width:1.1rem;height:1.1rem;flex-basis:1.1rem}
.knopf.dunkel{background:#3a3d42;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.knopf.dunkel:hover{background:#2b2e33}
.um-hero{grid-template-columns:1fr 1.6fr .9fr;align-items:center}
.um-hero figure{min-width:0}
.um-hero figure img{width:100%}
/* Stimmen auf Weiß (Vorlage 01) */
.stimmen-block{background:#fff}
@media(max-width:1000px){
  .hero-voll{min-height:0;display:block;background:#4d6a22}
  .hero-voll::before{content:none}
  .hero-voll>img{position:static;left:0;width:100%;height:auto;aspect-ratio:4/3;object-position:50% 20%}
  .hero-voll>img.fond{display:none}
  .hero-voll .text{padding-top:2rem;padding-bottom:2.25rem}
  .leist-reihe{grid-template-columns:1fr}
  .leist-reihe.getauscht figure{order:0}
  .baer-block{grid-template-columns:1fr}
  .baer-block figure img{max-width:280px}
  .cta-foto.dunkel .hand.links-oben{position:static;margin:0 5vw 1rem;font-size:1.9rem}
  .cta-foto.dunkel{flex-direction:column;align-items:stretch;padding-top:2rem}
  .cta-foto.dunkel::before{background:rgba(61,54,48,.72)}
  .um-form{grid-template-columns:1fr}
  .polaroids.zettel figure{margin-bottom:2.75rem}
}

/* Umfrage-Bühne: Bär mit Wegweiser als Vollbild hinter Text und Handschrift (Vorlage 11) */
.um-buehne{position:relative;overflow:hidden;min-height:clamp(440px,35vw,500px);display:flex;align-items:center;background:#f2f4ea}
.um-buehne>img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(30px) saturate(.9);transform:scale(1.15);z-index:0;opacity:.8}
.um-buehne::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(245,244,240,.75) 0%,rgba(245,244,240,.55) 22%,rgba(245,244,240,0) 34%,rgba(245,244,240,0) 70%,rgba(245,244,240,.55) 80%,rgba(245,244,240,.75) 100%)}
.um-buehne .baer{margin:0;position:relative;min-width:0}
.um-buehne .baer img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 52%,transparent 96%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 52%,transparent 96%)}
.um-buehne .baer figcaption.ki{position:absolute;left:0;bottom:-.2rem;margin:0;font-size:.68rem}
.um-buehne .um-hero{position:relative;z-index:3;width:100%;box-sizing:border-box;grid-template-columns:.75fr 1.9fr .75fr;padding-top:1.5rem;padding-bottom:1.5rem;gap:1rem}
.um-buehne .um-hero .rechts{gap:1.5rem}
@media(max-width:1000px){
  .um-buehne{min-height:0;display:block}
  .um-buehne>img.fond{display:none}
  .um-buehne::before{content:none}
  .um-buehne .um-hero{grid-template-columns:1fr}
}

/* Foto im Kasten mit Rand (Vorlage Nicht immer einer Meinung) */
.halb.kasten>.foto{margin:.6rem 0;border-radius:0;box-shadow:none}
.halb.kasten.getauscht>.foto{margin:.6rem 0}
.halb.kasten>.foto::after{content:none}
.halb.kasten{min-height:0}
.halb.kasten>.foto{min-height:480px}
.spruch .ico{width:3.2rem;height:3.2rem;margin-top:0}
.ico.solo{width:4.5rem;height:4.5rem}
.ikarten.kreise.hell .kreis{background:var(--gruen-hell);box-shadow:none}
.ikarten.kreise.hell .kreis .ico{stroke:var(--gruen-t)}
.ikarten.reihe-icons .ico{width:3.4rem;height:3.4rem;stroke-width:1.3}
@media(max-width:1000px){.halb.kasten>.foto,.halb.kasten.getauscht>.foto{margin:0;border-radius:0;min-height:0}}

/* Grünes Schlussband mit gewölbter Oberkante (Vorlage Trennung) */
.band-gruen.welle{position:relative;margin-top:2.5rem}
.band-gruen.welle::before{content:"";position:absolute;left:0;right:0;top:-2.4rem;height:2.5rem;background:var(--gruen);clip-path:ellipse(62% 100% at 50% 100%)}

@media(max-width:1000px){
  .um-buehne .baer img{-webkit-mask-image:none;mask-image:none}
  .um-hero>div{min-width:0;max-width:100%}
  .um-hero .klecks{font-size:2.1rem!important;padding:.9rem 1.2rem!important;max-width:100%}
  .um-hero .rechts .hand{max-width:100%;overflow-wrap:anywhere}
  .klecks.auf-foto{font-size:1.15rem;max-width:12rem;padding:.9rem 1.1rem;right:.6rem;bottom:.6rem}
}

@media(max-width:600px){
  .polaroids.zettel{grid-template-columns:1fr 1fr;gap:16px}
  .polaroids.zettel figure{margin-bottom:3rem}
  .polaroids.zettel figcaption{left:4%;right:4%;padding:.45rem .3rem}
  .polaroids.zettel figcaption .hand{font-size:1.05rem}
}

/* Startseite wie Vorlage 01: Blöcke im Rahmen (1200 px), Foto rechts als Kasten mit festem Seitenverhältnis, kompakt */
.halb.innen{max-width:1200px;margin:0 auto;padding-left:5vw;padding-right:5vw;box-sizing:content-box;min-height:0;grid-template-columns:5fr 7fr;column-gap:0;align-items:stretch}
.halb.innen>.text,.halb.innen.getauscht>.text{padding:2.25rem 2.75rem 2.25rem 2.25rem;margin:0;max-width:none;width:auto}
.halb.innen.getauscht>.text{padding:2.25rem 2.25rem 2.25rem 2.75rem}
.halb.innen>.text>*{max-width:460px}
.halb.innen>.foto{min-height:0;width:100%;align-self:start;aspect-ratio:var(--ratio,4/3);background:var(--taupe)}
.halb.innen>.foto::after{content:none}
.halb.innen>.foto img{position:absolute}
.halb.innen.hero-halb{min-height:0;margin-top:1.25rem}
.halb.innen.hero-halb h1{font-size:clamp(2rem,3vw,2.55rem)}
.halb.innen.hero-halb .text>*{max-width:460px}
.halb.innen.hero-halb .text .claim{margin-top:1.25rem}
.halb.innen.hero-halb>.foto::after{content:none}
.halb.innen+.halb.innen{margin-top:1.25rem}
.halb.innen.hell{background:var(--taupe)}
.halb.innen.weiss{background:#fff}
@media(max-width:1000px){
  .halb.innen{padding-left:0;padding-right:0;margin-top:0!important}
  .halb.innen>.text,.halb.innen.getauscht>.text{padding:2rem 5vw}
  .halb.innen>.foto{aspect-ratio:4/3}
  .halb.innen.hero-halb>.foto{aspect-ratio:4/5}
}

/* Flächen nach Vorlagen: hellgrünes Band, Foto-Fond (unscharfes Grün über volle Breite) */
.band-gruenhell{background:#eef3e3}
.fond-foto{position:relative;overflow:hidden;isolation:isolate}
.fond-foto>img.fond{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(26px) saturate(.9);z-index:-2;opacity:1}
.fond-foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 35%,rgba(255,255,255,.55) 100%)}

/* Leistungen: Fotos hart am Rand wie Vorlage, Skizze auf Weiß */
.halb.leist-skizze>.foto.passend img{object-fit:contain;background:#fff}
.halb.flach.weiss>.foto::after,.halb.flach.hell>.foto::after{background:linear-gradient(90deg,var(--fade,var(--papier)) 0%,rgba(255,255,255,0) 8%)}
.halb.flach.getauscht.weiss>.foto::after{background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 8%)}

/* Hero: Foto über volle Breite, Text links auf weißem Verlauf (Vorlage Trennung) */
.hero-breit{position:relative;overflow:hidden;min-height:clamp(480px,40vw,620px);display:flex;align-items:center}
.hero-breit>img{position:absolute;top:0;bottom:0;left:38%;width:62%;height:100%;object-fit:cover;object-position:var(--pos,60% 30%)}
.hero-breit{background:var(--papier)}
.hero-breit::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--papier) 36%,rgba(245,244,240,0) 52%)}
.hero-breit .text{position:relative;z-index:2;width:100%;box-sizing:border-box;padding-top:3rem;padding-bottom:3rem}
.hero-breit .text>*{max-width:480px}
.hero-breit .hand.auf-foto{z-index:2}
@media(max-width:1000px){
  .hero-breit{display:block;min-height:0}
  .hero-breit>img{position:static;left:0;width:100%;height:auto;aspect-ratio:4/3;object-position:var(--pos-m,50% 25%)}
  .hero-breit::before{content:none}
  .hero-breit .text{padding:2rem 5vw}
  .hero-breit .text>*{max-width:none}
}

.ikarten.nackt>li,.ikarten.nackt>div{background:none;border:0;padding:0;box-shadow:none}
.halb.gruenhell,.halb.gruenhell>.text,.halb.gruenhell>.foto{background:#eef3e3}
.halb.gruenhell>.foto::after{--fade:#eef3e3}

@media(max-width:1000px){.zahl-klecks{flex-direction:column;align-items:flex-start!important}.zahl-klecks .klecks{margin-top:1rem}}

/* ---------- 20.09. abends: Verkaufsseite (Gabis Word + Gestaltungsbild), grüne Notizkarte auf Fotos ---------- */
.karte-gruen{background:var(--gruen-d);color:#fff;padding:1rem 1.3rem;border-radius:10px;box-shadow:var(--schatten);max-width:15rem;text-align:center;transform:rotate(3deg)}
.karte-gruen .hand{display:block;font-size:1.6rem;line-height:1.1}
.karte-gruen .wer{display:block;margin-top:.55rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.skizzen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:0}
.skizze{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.skizze img{width:100%;height:auto;display:block}
.vk-text{max-width:76ch}
.vk-text p+p{margin-top:.8rem}
.momente{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.momente li{display:flex;gap:1rem;padding:0 1.5rem 0 0;margin-right:1.5rem;border-right:1px solid var(--taupe-3)}
.momente li:last-child{border-right:0;margin-right:0;padding-right:0}
.momente .nr{font-size:2.6rem;font-weight:800;line-height:1;color:var(--gruen);letter-spacing:-.03em;flex:0 0 auto}
.momente .ico{width:2.2rem;height:2.2rem;margin-bottom:.5rem}
.momente h3{font-size:1.15rem;margin-bottom:.35rem}
.momente p{font-size:.95rem}
.loslassen{background:linear-gradient(180deg,#fff 0%,var(--gruen-hell2) 100%)}
.loslassen .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;padding-top:var(--normal);padding-bottom:var(--normal)}
.loslassen .text>*{max-width:52ch}
.loslassen .text .kicker{max-width:none}
.loslassen .text h2{margin-bottom:1rem}
.loslassen .text .textlink{display:inline-block;margin-top:1.5rem}
.loslassen figure{margin:0 auto;position:relative;max-width:440px;width:100%}
.loslassen figure img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.loslassen figure .ki{position:absolute;right:.5rem;bottom:.4rem;margin:0;background:rgba(255,255,255,.75);border-radius:6px;padding:.1rem .4rem;font-size:.68rem;color:rgba(58,61,66,.7)}
.vk-schluss{max-width:640px;margin:0 auto;text-align:center}
.vk-schluss h2{margin-bottom:.9rem}
.vk-schluss p+p{margin-top:.5rem}
.vk-schluss .wer{margin-top:1.25rem}
.vk-schluss .wer .hand{font-size:1.9rem}
.vk-schluss .knopf{margin-top:1.5rem}
@media(max-width:1000px){
  .skizzen{grid-template-columns:1fr;gap:1.25rem;max-width:460px;margin:0 auto}
  .momente{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .momente li{border-right:0;margin-right:0;padding-right:0}
  .loslassen .wrap{grid-template-columns:1fr;gap:2rem}
  .loslassen figure{max-width:400px}
  .karte-gruen{max-width:12rem;padding:.75rem 1rem}
  .karte-gruen .hand{font-size:1.3rem}
  .karte-gruen .wer{font-size:.62rem}
}
@media(max-width:600px){
  .momente{grid-template-columns:1fr}
  .karte-gruen.auf-foto{top:auto;bottom:1rem;right:1rem;transform:rotate(2deg)}
}

/* Handy: Sektionsfotos gleich groß und deutlich größer (Gabi 20.09.: "größer und immer die gleiche Größe"; Startfoto bei ihr winzig, Über uns/EHRLICH ohne Bild).
   Feste Höhe statt aspect-ratio, damit die Fläche auch ohne aspect-ratio-Unterstützung steht. */
@media(max-width:1000px){
  .halb>.foto,.halb.getauscht>.foto,.halb.flach>.foto,.halb.hoch>.foto,.halb.sehr-hoch>.foto,.halb>.foto.passend{aspect-ratio:auto;height:min(64vw,620px);min-height:0}
}
@media(max-width:600px){
  .halb>.foto,.halb.getauscht>.foto,.halb.flach>.foto,.halb.hoch>.foto,.halb.sehr-hoch>.foto,.halb>.foto.passend{height:100vw;max-height:560px}
}

/* ---------- 20.09. spät: Unterseite Loslassen, Aufbau 1:1 nach Gabis Entwurf ---------- */
.los-kopf{background:#fff}
.los-kopf .wrap{position:relative;padding-top:3rem;padding-bottom:var(--eng);text-align:center}
.los-kopf h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;color:var(--navy);margin:0 auto;max-width:22ch}
.los-kopf h1 .us{display:inline-block;border-bottom:3px solid var(--gruen);line-height:.95;padding-bottom:.02em}
.los-kopf .sub{margin:1rem auto 0;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.12em;color:var(--navy);max-width:none}
.los-kopf .hand.oben-rechts{position:absolute;top:2.4rem;right:5vw;font-size:1.55rem;color:var(--navy);line-height:1.05;text-align:left;transform:rotate(-4deg);max-width:11rem}
.los-kopf .hand.oben-rechts::after{width:80%;transform:rotate(-2deg)}
.los-paar{display:grid;grid-template-columns:3fr 4fr;gap:1.25rem;margin-top:2.25rem}
.los-paar figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:3/2;min-height:0}
.los-paar figure:last-child{aspect-ratio:2/1}
.los-haus p{margin-left:auto;margin-right:auto}
.los-kopf sup,.los-gesch sup{font-size:.6em;line-height:0;vertical-align:.5em}
.los-paar figure img{width:100%;height:100%;object-fit:cover;display:block}
.los-paar figure:last-child img{object-position:50% 50%}
.hand.auf-foto.navy{color:var(--navy);text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 24px rgba(255,255,255,.8);font-size:1.6rem;max-width:11rem;transform:rotate(-3deg)}
.los-paar .hand.auf-foto.navy{top:1rem;right:5%;background:rgba(255,255,255,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:.35rem .7rem;border-radius:8px;text-shadow:none}
.los-paar figure .ki,.los-tempo figure .ki{position:absolute;right:.5rem;bottom:.4rem;margin:0;background:rgba(255,255,255,.75);border-radius:6px;padding:.1rem .4rem;font-size:.68rem;color:rgba(58,61,66,.7)}
.los-haus{margin:2.5rem auto 0;max-width:72ch}
.los-haus h2.gruen{color:var(--gruen-t);font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.9rem}
.los-haus h2.gruen .akz{display:block}
.los-tempo{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:var(--eng);padding-bottom:var(--eng)}
.los-tempo .links{padding-right:3.5rem}
.los-tempo .rechts{border-left:1px solid var(--taupe-3);padding-left:3.5rem;display:flex;flex-direction:column;justify-content:center}
.los-tempo figure{margin:0 auto 1.5rem;position:relative;max-width:420px;border-radius:var(--radius);overflow:hidden}
.los-tempo figure img{width:100%;height:auto;display:block}
.los-tempo h2{font-size:clamp(1.45rem,2.1vw,1.8rem);color:var(--navy);margin-bottom:.9rem}
.los-tempo p+p,.los-tempo p+.fett,.los-tempo .fett+p{margin-top:.8rem}
.los-tempo .fett{font-weight:700;color:var(--navy)}
.los-gesch{background:var(--gruen-hell2)}
.los-gesch .wrap{padding-top:var(--eng);padding-bottom:var(--eng)}
.los-gesch .kicker{color:var(--text);font-weight:600;letter-spacing:.2em;margin-bottom:.4rem}
.los-h2{color:var(--navy);margin-bottom:1.75rem}
.los-h2::after{content:"";display:block;width:3.2rem;height:3px;background:var(--gruen);margin-top:.5rem;border-radius:2px}
.los-raster{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:1.75rem 3.5rem;align-items:start}
.los-raster .lauf{grid-column:1;grid-row:1}
.los-raster .bilder{grid-column:1;grid-row:2}
.los-raster .rechts{grid-column:2;grid-row:1/3}
.los-raster .lauf{columns:2;column-gap:2.5rem}
.los-raster .lauf p{break-inside:avoid;margin-bottom:.8rem;font-size:.98rem}
.los-polaroids{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.6rem;align-items:center;margin-top:1.75rem}
.los-polaroids figure{margin:0;background:#fff;padding:8px 8px 8px;box-shadow:0 10px 30px rgba(45,63,92,.14);border-radius:3px;transform:rotate(-1.5deg)}
.los-polaroids figure:nth-child(3){transform:rotate(1.2deg)}
.los-polaroids figure:nth-child(5){transform:rotate(-.8deg)}
.los-polaroids figure img{width:100%;height:auto;display:block}
.los-polaroids .pfeil .ico{width:2.6rem;height:2.6rem;stroke:var(--gruen);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.los-raster .bilder .klein{margin-top:.8rem}
.los-raster .rechts p+p{margin-top:.8rem}
.los-raster .rechts .r1 p+p{margin-top:.8rem}
.los-raster .rechts .klecks.zettel{margin:.9rem 0 1.4rem;max-width:none;display:block;font-size:1.5rem}
.los-raster .rechts .klecks.zettel+p{margin-top:0}
.klecks.zettel.gelb::before{background:#fbf6d6}
.los-raster .rechts h3{margin-top:2rem;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.25;color:var(--navy)}
.los-raster .stopp{display:grid;grid-template-columns:96px 1fr;gap:1.1rem;align-items:center;margin-top:1.25rem}
.los-raster .stopp figure{margin:0}
.los-raster .stopp figure img{width:100%;height:auto;display:block;filter:drop-shadow(0 5px 12px rgba(45,63,92,.2))}
.los-raster .stopp figure .ki{display:block;margin-top:.2rem;text-align:center;font-size:.62rem;background:none;padding:0}
.los-raster .stopp p{font-size:.98rem}
.klecks.zettel.notiz{display:block;max-width:none;margin-top:1.75rem;padding:1rem 1.2rem;transform:rotate(-2deg)}
.klecks.zettel.notiz::before{background:#dcebb4}
.klecks.zettel.notiz .hand{display:block;font-size:1.35rem;line-height:1.1}
.klecks.zettel.notiz .hand+.hand{margin-top:.5rem}
/* Schlusszeile wie Gabis Entwurfs-Fußleiste: grüne Linie, Claim in Versalien */
.los-claim{margin-top:3rem;max-width:none;display:flex;align-items:center;justify-content:flex-end;gap:1rem;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.los-claim .linie{display:inline-block;width:3.5rem;height:2px;background:var(--gruen)}
@media(max-width:1000px){
  .los-kopf .hand.oben-rechts{position:static;transform:none;margin:0 auto .8rem;text-align:center;max-width:none}
  .los-kopf .hand.oben-rechts::after{margin-left:auto;margin-right:auto}
  .los-paar{grid-template-columns:1fr}
  .los-paar figure{aspect-ratio:3/2}
  .los-tempo{grid-template-columns:1fr;gap:2.5rem}
  .los-tempo .links{padding-right:0}
  .los-tempo .rechts{border-left:0;padding-left:0;border-top:1px solid var(--taupe-3);padding-top:2.5rem}
  .los-raster{grid-template-columns:1fr;grid-template-rows:auto;gap:2rem}
  .los-raster .lauf,.los-raster .bilder,.los-raster .rechts{grid-column:1;grid-row:auto}
  .los-raster .rechts{display:contents}
  .los-raster .lauf{order:1}.los-raster .r1{order:2}.los-raster .bilder{order:3;margin-top:.5rem}.los-raster .r2{order:4}
  .los-raster .lauf{columns:1}
  .los-raster .rechts h3{margin-top:1.5rem}
}
@media(max-width:600px){
  .los-polaroids{grid-template-columns:1fr;justify-items:center}
  .los-polaroids figure{max-width:320px}
  .los-polaroids .pfeil{transform:rotate(90deg)}
  .los-paar figure .ki{left:.5rem;right:auto}
  .hand.auf-foto.navy{font-size:1.35rem;max-width:9rem;left:auto;right:6%;top:.8rem;text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 24px rgba(255,255,255,.8)}
}

/* ---------- 21.09.: Vermietungsseite (Gabis Word + Gestaltungsbild 20.09. 23:03) ---------- */
.vm-hero>.text{position:relative}
.vm-hero h1{color:var(--navy);font-size:clamp(2.1rem,3.4vw,3rem)}
.vm-hero .text .gross{margin-top:.9rem;color:var(--muted)}
.vm-blase{position:relative;width:11.5rem;height:11.5rem;margin:2rem 0 0 auto;display:flex;align-items:center;justify-content:center;padding:1.2rem;box-sizing:border-box;background:var(--gruen);border-radius:50% 50% 50% 8%;box-shadow:0 10px 26px rgba(120,162,42,.28);text-align:center;transform:rotate(-8deg)}
.vm-blase .hand{color:#fff;font-size:1.45rem;line-height:1.08;max-width:none;transform:rotate(8deg)}
.vm-blase .hand .herz{width:1.2em;height:1.2em;stroke:#fff;fill:none;stroke-width:1.8;vertical-align:-.2em;margin-left:.15em}
.vm-beginn .wrap{padding-top:var(--normal);padding-bottom:var(--normal)}
.vm-mitte{max-width:760px;margin:0 auto 3rem;text-align:center}
.vm-mitte h2{margin-bottom:1rem}
.vm-mitte p{max-width:none;font-size:1.05rem}
.vm-fuenf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.vm-fuenf>li{display:flex;flex-direction:column;min-width:0}
.vm-icon{background:var(--taupe);border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;justify-content:center;height:5.2rem}
.vm-icon .ico{width:2.6rem;height:2.6rem;stroke:var(--gruen-t);stroke-width:1.4}
.vm-fuenf figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:0 0 var(--radius) var(--radius);background:var(--taupe);box-shadow:var(--schatten)}
.vm-fuenf figure img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.vm-fuenf figure .ki{position:absolute;right:.4rem;bottom:.3rem;margin:0;background:rgba(255,255,255,.75);border-radius:6px;padding:.1rem .4rem;font-size:.64rem;color:rgba(58,61,66,.7)}
.vm-fuenf h3{font-size:1.05rem;margin:1.25rem 0 0;color:var(--navy)}
.vm-fuenf h3::after{content:"";display:block;width:2.2rem;height:2px;background:var(--gruen);margin:.6rem 0 .7rem}
.vm-fuenf p{font-size:.92rem;color:var(--muted);margin:0}
.vm-plakat{background:#fff;padding-bottom:var(--normal)}
.vm-plakat>figure{position:relative;margin:0;aspect-ratio:2/1;max-height:720px;overflow:hidden;background:var(--taupe)}
.vm-plakat>figure img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.vm-plakat>figure .ki{position:absolute;right:1rem;bottom:.6rem;margin:0;background:rgba(255,255,255,.8);border-radius:6px;padding:.1rem .45rem;font-size:.68rem;color:rgba(58,61,66,.7)}
.vm-plakat .los-claim{margin-top:2rem}
@media(max-width:1000px){
  .vm-fuenf{grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem}
  .vm-blase{margin:1.75rem auto 0;width:10.5rem;height:10.5rem}
  .vm-plakat>figure{aspect-ratio:5/3}
  .vm-plakat>figure img{object-position:50% 15%}
}
@media(max-width:600px){
  .vm-fuenf{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .vm-blase{margin:1.5rem 0 0;width:10rem;height:10rem}
  .vm-plakat .los-claim{justify-content:center}
}

/* ---------- 23.09.: Unterseite Verkaufsvorbereitung (Gabis Word + Gestaltungsbild 22.09. 19:47) ---------- */
.vb-kopf{background:#fff}
.vb-kopf .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding-top:var(--normal);padding-bottom:var(--eng)}
.vb-kopf h1{font-size:clamp(2.1rem,3.4vw,3.05rem);max-width:none}
.vb-antwort{margin-top:.9rem;font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.15;font-weight:700;color:var(--navy);letter-spacing:-.015em;max-width:24ch}
.vb-antwort .akz{font-size:1.15em}
.vb-kopf .text>p:not(.kicker):not(.vb-antwort):not(.vb-zitat){margin-top:1.1rem;color:var(--muted)}
.vb-zitat{margin-top:1.5rem;background:var(--taupe);border-left:4px solid var(--gruen);border-radius:0 8px 8px 0;padding:1.05rem 1.35rem;font-size:1.12rem;font-weight:700;color:var(--navy);max-width:34ch}
.vb-plan{position:relative;margin:0}
.vb-plan img{width:100%;border-radius:var(--radius)}
.vb-plan .ki{position:absolute;right:.5rem;bottom:.35rem;margin:0;background:#fff;border-radius:6px;padding:.15rem .5rem;font-size:.75rem;color:var(--muted)}
.vb-mitte{text-align:center;padding-top:var(--eng);padding-bottom:1rem;max-width:820px}
.vb-mitte h2{margin-bottom:.9rem}
.vb-mitte p{max-width:none;color:var(--muted);font-size:1.05rem}
.vb-schritte .wrap{padding-top:var(--eng);padding-bottom:var(--normal);display:flex;flex-direction:column;gap:var(--normal)}
.vb-schritt{display:grid;grid-template-columns:7fr 5fr;gap:3.5rem;align-items:center}
.vb-schritt.getauscht{grid-template-columns:5fr 7fr}
.vb-schritt.getauscht>figure{order:2}
.vb-schritt>figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);background:var(--taupe)}
.vb-schritt>figure img{width:100%;display:block}
.vb-schritt>figure .ki{background:#fff;padding:.45rem .9rem;margin:0;font-size:.78rem;color:var(--muted)}
.vb-nr{display:flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.7rem}
.vb-nr>span{display:inline-flex;align-items:center;justify-content:center;min-width:1.7rem;height:1.7rem;background:var(--gruen-hell);color:var(--navy);border-radius:6px;font-size:.9rem;letter-spacing:0}
.vb-schritt h2{font-size:clamp(1.55rem,2.3vw,2.1rem);margin-bottom:.8rem}
.vb-schritt .text p{color:var(--muted)}
.vb-schritt .vb-zitat{margin-top:1.25rem;color:var(--navy)}
.vb-gruen{margin-top:1rem;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;font-weight:700;color:var(--gruen-t);letter-spacing:-.015em}
.vb-nein{background:var(--taupe)}
.vb-nein .wrap{padding-top:var(--normal);padding-bottom:var(--normal)}
.vb-nein>.wrap>h2{font-size:clamp(1.35rem,1.9vw,1.6rem);font-weight:500;color:var(--navy);margin-bottom:1.5rem}
.vb-nein-raster{display:grid;grid-template-columns:auto 1fr 17rem;gap:3rem;align-items:start}
.vb-gross{font-size:clamp(4rem,9vw,7.5rem);line-height:.85;font-weight:700;color:var(--gruen-t);letter-spacing:-.04em}
.vb-nein .text p{color:var(--text)}
.vb-nein .text .fett{font-weight:700;color:var(--navy);margin-top:.9rem}
.vb-hs{background:var(--gruen-hell2);border:1px solid rgba(151,192,60,.35);border-radius:var(--radius);padding:1.6rem 1.4rem;text-align:center}
.vb-hs .ico{width:2.2rem;height:2.2rem;stroke:var(--gruen-t);stroke-width:1.4;margin:0 auto .7rem}
.vb-hs p{color:var(--navy);font-size:1.02rem;max-width:none}
.vb-hs .textlink{display:inline-block;margin-top:.9rem;color:var(--navy)}
.vb-hs .textlink:hover{color:var(--gruen-d)}
@media(max-width:1000px){
  .vb-kopf .wrap{grid-template-columns:1fr;gap:2.25rem;padding-top:var(--eng)}
  .vb-schritt,.vb-schritt.getauscht{grid-template-columns:1fr;gap:1.75rem}
  .vb-schritt.getauscht>figure{order:0}
  .vb-schritte .wrap{gap:var(--eng)}
  .vb-nein-raster{grid-template-columns:auto 1fr;gap:1.75rem 2.25rem}
  .vb-hs{grid-column:1/3;max-width:26rem}
}
@media(max-width:600px){
  .vb-nein-raster{grid-template-columns:1fr}
  .vb-hs{grid-column:auto;max-width:none}
  .vb-zitat{max-width:none}
}

/* ---------- Objekte aus dem OpenImmo-Export (25.09.): Stempel, Referenzen, Exposé-Seiten ---------- */
.objekt .bildrahmen{position:relative}
.stempel{position:absolute;top:1rem;left:1rem;background:var(--navy);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem;border-radius:6px}
.objekt.referenz .status{color:var(--muted)}
.objekt.referenz h2{font-size:1.1rem}
.og-vermittelt-kopf{grid-column:1/13;display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:end;margin-bottom:2.5rem}
.og-vermittelt-kopf p{color:var(--muted);margin:0}
.og-kopf{padding-bottom:1.5rem}
.og-kopf>*{grid-column:1/11}
.og-zurueck{margin-bottom:1.5rem}
.og-zurueck a{color:var(--gruen-t);font-weight:700;text-decoration:none}
.og-h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2;color:var(--navy);text-wrap:balance}
.og-galerie{row-gap:12px}
.og-gross{grid-column:1/13;position:relative;display:block;border-radius:var(--radius);overflow:hidden}
.og-gross img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.og-klein{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.og-klein a{color:inherit;text-decoration:none}
.og-klein figure{margin:0}
.og-klein img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;transition:filter .2s}
.og-klein a:hover img{filter:brightness(.92)}
.og-klein figcaption{font-size:.82rem;color:var(--muted);margin-top:.35rem;line-height:1.35}
.og-inhalt{padding-top:var(--eng);padding-bottom:var(--normal);align-items:start}
.og-text{grid-column:1/8}
.og-text h2{font-size:1.35rem;color:var(--navy);margin:2rem 0 .75rem}
.og-text h2:first-child{margin-top:0}
.og-text p{margin:0 0 1rem;max-width:68ch}
.og-seite{grid-column:9/13;position:sticky;top:calc(var(--kopf) + 1.5rem);display:grid;gap:1.5rem}
.og-fakten{margin:0;background:var(--papier);border-radius:var(--radius);padding:1.25rem 1.5rem}
.og-fakten div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--linie)}
.og-fakten div:last-child{border-bottom:0}
.og-fakten dt{color:var(--muted)}
.og-fakten dd{margin:0;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.og-cta{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:1.5rem}
.og-cta p{margin:0 0 .75rem}
.og-cta .knopf{margin:.25rem 0 .75rem}
.og-cta .og-tel{font-size:.95rem;color:var(--muted)}
.og-cta .og-tel a{color:var(--navy);font-weight:700}
.og-cta .energie{font-size:.84rem;color:var(--muted);margin-top:.75rem}
@media (max-width:900px){
  .og-kopf>*,.og-text,.og-seite{grid-column:1/13}
  .og-seite{position:static;margin-top:2rem}
  .og-klein{grid-template-columns:repeat(2,1fr)}
  .og-vermittelt-kopf{grid-template-columns:1fr}
  .og-gross img{aspect-ratio:4/3}
}