/* immobiliya.it - Gestaltung nach dem Entwurf aus Claude Design (24.09.2026).
   Farben und Masse aus dem Prototyp; Schriften selbst gehostet (fonts/fonts.css). */
:root{--sand:#f6f1e8;--tinte:#2a221a;--weich:#6f6357;--akzent:#a4462f;--akzent-dunkel:#8a3a27;
  --linie:#e2d8c8;--karte:#fffaf2;--gold:#c39a5d;--hell:#efe7d9;--streifen:#e8dcc8;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'Instrument Sans',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{-webkit-print-color-adjust:exact;print-color-adjust:exact;margin:0;background:var(--sand);color:var(--tinte);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:var(--akzent);text-decoration:none}a:hover{color:var(--akzent-dunkel)}
img{max-width:100%;height:auto;display:block}
input,select,textarea,button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(38px,4.6vw,60px)}h2{font-size:clamp(32px,3.6vw,46px)}h3{font-size:22px}
p{margin:0 0 14px}
.huelle{max-width:1200px;margin:0 auto;padding:0 24px}
.eng{max-width:760px}
.oben{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);margin:0 0 16px}
.leise{color:var(--weich)}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding:clamp(56px,7vw,96px) 0}
.hell{background:var(--karte)}.dunkel{background:var(--tinte);color:var(--sand)}
.dunkel .leise{color:rgba(246,241,232,.7)}.dunkel .oben{color:var(--gold)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(246,241,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marke{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--tinte);letter-spacing:-.01em;line-height:1}
.marke span{color:var(--akzent)}.marke:hover{color:var(--tinte)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:8px 10px;font-size:14px;font-weight:500;color:var(--tinte);border-radius:6px;position:relative}
.nav a:hover{background:var(--hell);color:var(--tinte)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:2px;margin-left:-9px;background:var(--akzent);border-radius:1px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:999px;
  font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;text-align:center;line-height:1.2}
.knopf-akzent{background:var(--akzent);color:#fff}.knopf-akzent:hover{background:var(--akzent-dunkel);color:#fff}
.knopf-dunkel{background:var(--tinte);color:var(--sand)}.knopf-dunkel:hover{background:#000;color:#fff}
.knopf-rand{border-color:var(--tinte);color:var(--tinte);background:transparent}.knopf-rand:hover{background:var(--tinte);color:var(--sand)}
.knopf-gold{background:var(--gold);color:var(--tinte)}.knopf-gold:hover{background:#d7b27a;color:var(--tinte)}
.knopf-wa{background:#157a3c;color:#fff}.knopf-wa:hover{background:#106530;color:#fff}
.kopf .knopf{min-height:40px;padding:8px 18px;font-size:14px}
.menue-knopf{display:none}
@media(max-width:860px){
  .nav{position:fixed;inset:64px 0 auto 0;background:var(--sand);flex-direction:column;align-items:stretch;padding:12px 16px 20px;
    border-bottom:1px solid var(--linie);display:none}
  .nav a{padding:14px 12px;font-size:17px}.nav a[aria-current=page]::after{display:none}
  .nav a[aria-current=page]{background:var(--hell)}
  #menue:checked~.nav{display:flex}
  .menue-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;cursor:pointer}
  .menue-knopf i,.menue-knopf i::before,.menue-knopf i::after{display:block;width:22px;height:2px;background:var(--tinte);position:relative}
  .menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0}
  .menue-knopf i::before{top:-7px}.menue-knopf i::after{top:7px}
  .kopf .knopf-akzent{display:none}
}
#menue{position:absolute;opacity:0;pointer-events:none}

/* Brotkrumen */
.krumen{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 18px;font-size:13px;color:var(--weich)}
.krumen li+li::before{content:"›";margin-right:6px;color:var(--linie)}
.krumen a{color:var(--weich)}.krumen a:hover{color:var(--akzent)}

/* Held */
.held{padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,64px)}
.held .raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.held h1 em{font-style:italic;color:var(--akzent)}
.held .fuehrung{font-size:18px;color:var(--weich);max-width:560px;margin:22px 0 28px}
.held .tasten{display:flex;flex-wrap:wrap;gap:12px}
.held figure{margin:0;position:relative}
.held figure img{border-radius:20px;width:100%;aspect-ratio:5/4;object-fit:cover}
.held figure{margin-bottom:26px}
.held .sitz{position:absolute;left:18px;bottom:-26px;background:var(--karte);border-radius:10px;padding:10px 14px;box-shadow:0 6px 20px rgba(42,34,26,.10)}
.held .sitz small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--weich)}
.held .sitz b{font-size:14px;font-weight:600}
.zahlen{display:flex;flex-wrap:wrap;gap:34px;margin-top:40px;padding-top:26px;border-top:1px solid var(--linie)}
.zahlen div b{display:block;font-family:var(--serif);font-size:30px;font-weight:500;line-height:1}
.zahlen div span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--weich)}
@media(max-width:860px){.held .raster{grid-template-columns:1fr}.held figure{order:-1}}

/* Kacheln */
.zweispalt>*,.held .raster>*{min-width:0}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.zweispalt{grid-template-columns:1fr}}
.gitter-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gitter-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gitter-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.gitter-3,.gitter-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gitter-2,.gitter-3,.gitter-4{grid-template-columns:1fr}}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:24px}
.kachel .nr{font-family:var(--serif);font-size:30px;color:var(--akzent);display:block;margin-bottom:10px}
.kachel h3{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:0}
.kachel p{font-size:14px;color:var(--weich);margin:0}
.dunkel .kachel{background:rgba(246,241,232,.06);border-color:rgba(246,241,232,.15)}
.dunkel .kachel p{color:rgba(246,241,232,.7)}

/* Objektkarten */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.karten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.karten{grid-template-columns:1fr}}
.objekt{background:var(--karte);border:1px solid var(--linie);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;color:var(--tinte);transition:box-shadow .2s,transform .2s}
.objekt:hover{color:var(--tinte);box-shadow:0 14px 34px rgba(42,34,26,.12);transform:translateY(-2px)}
.objekt .bild{position:relative;aspect-ratio:4/3;background:var(--hell);overflow:hidden}
.objekt .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.marke-status{position:absolute;left:14px;top:14px;background:var(--tinte);color:var(--sand);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:5px}
.objekt .inhalt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.objekt .ort{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--weich);margin-bottom:8px}
.objekt h3{font-size:22px;line-height:1.2;margin-bottom:10px}
.objekt .fakten{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--weich);margin-bottom:16px}
.objekt .kfuss{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--linie);padding-top:14px}
.objekt .preis{font-size:20px;font-weight:600}
.objekt .mehr{font-size:13px;font-weight:600;color:var(--akzent)}

/* Filter */
.filter{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end;margin:28px 0 22px}
.filter label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--weich);margin-bottom:6px}
@media(max-width:1000px){.filter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.filter{grid-template-columns:1fr}}
.zaehler{display:flex;justify-content:space-between;font-size:13px;color:var(--weich);margin-bottom:18px}

/* Formulare */
.feld{margin-bottom:14px}
.feld label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.feld input,.feld select,.feld textarea,.filter select{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--linie);border-radius:8px;background:var(--sand);font-size:15px}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus,.filter select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.felder-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.felder-2{grid-template-columns:1fr}}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--weich);margin:4px 0 18px}
.zustimmung input{width:20px;height:20px;margin-top:1px;flex:0 0 auto;accent-color:var(--akzent)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-karte{background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:clamp(22px,3vw,32px)}
.dunkel .form-karte{background:rgba(246,241,232,.06);border-color:rgba(246,241,232,.2)}
.dunkel .feld input,.dunkel .feld select{background:transparent;border-color:rgba(246,241,232,.25);color:var(--sand)}
.dunkel .feld input::placeholder{color:rgba(246,241,232,.55)}
.dunkel .zustimmung{color:rgba(246,241,232,.7)}
.form-meldung{display:none;padding:14px 16px;border-radius:10px;margin-top:14px;font-size:14px}
.form-meldung.ok{display:block;background:#e7f3ea;color:#1d5a32}
.form-meldung.fehler{display:block;background:#f8e4e0;color:#8f3f2c}
.dunkel .form-meldung.ok{background:rgba(95,207,128,.15);color:#bfe8cc}

/* Schritte, FAQ */
.schritt{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:22px}
.schritt .kreis{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--akzent);color:#fff;font-size:14px;font-weight:600;margin-bottom:12px}
.schritt h3{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:6px;letter-spacing:0}
.schritt p{font-size:14px;color:var(--weich);margin:0}
details.frage{border-bottom:1px solid var(--linie);padding:16px 0}
details.frage summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:500;font-size:16px}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"+";color:var(--akzent);font-size:20px;line-height:1}
details.frage[open] summary::after{content:"–"}
details.frage p{margin:12px 0 0;color:var(--weich);font-size:15px}

/* Leistungen */
.leistung{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:34px 0;border-top:1px solid var(--linie)}
.leistung img{border-radius:16px;width:100%;aspect-ratio:2/1;object-fit:cover}
.leistung .nr{font-family:var(--serif);font-size:30px;color:var(--akzent)}
.leistung h2{font-size:34px;margin:6px 0 14px}
.leistung ul{padding:0;margin:14px 0 0;list-style:none}
.leistung li{position:relative;padding-left:16px;margin-bottom:8px;font-size:15px}
.leistung li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--akzent)}
@media(max-width:860px){.leistung{grid-template-columns:1fr}}

/* Objektseite */
.galerie-rahmen{position:relative}
.galerie{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:20px;background:#111;scrollbar-width:none;scroll-behavior:smooth}
.galerie::-webkit-scrollbar{display:none}
.galerie figure{margin:0;scroll-snap-align:start;aspect-ratio:3/2;position:relative;overflow:hidden}
.galerie figure a{position:absolute;inset:0;display:block;cursor:zoom-in}
/* ganzes Foto im richtigen Seitenverhaeltnis, schwarze Balken statt Beschnitt */
.galerie img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.galerie-zahl{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;pointer-events:none}
.galerie-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0}
.galerie-pfeil:hover{background:rgba(0,0,0,.8)}.galerie-pfeil svg{width:22px;height:22px}
.galerie-zurueck{left:12px}.galerie-vor{right:12px}
@media(max-width:620px){.galerie-pfeil{width:40px;height:40px}}
/* Bildschau: Overlay mit dem ganzen Foto, schwarzer Grund */
html.bildschau-offen{overflow:hidden}
dialog.bildschau{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
dialog.bildschau::backdrop{background:#000}
.bildschau-buehne{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 76px 76px;touch-action:pan-y}
.bildschau-bild{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.bildschau-knopf{position:absolute;display:grid;place-items:center;width:50px;height:50px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(40,40,40,.7);color:#fff;cursor:pointer}
.bildschau-knopf:hover,.bildschau-knopf:focus-visible{background:rgba(70,70,70,.95);border-color:#fff}
.bildschau-knopf svg{width:24px;height:24px}
.bildschau-zu{top:12px;right:12px}.bildschau-zurueck{left:12px;top:50%;transform:translateY(-50%)}.bildschau-vor{right:12px;top:50%;transform:translateY(-50%)}
.bildschau-fuss{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 70px 20px;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:14px;text-align:center}
.bildschau-zaehler{font-weight:600;background:rgba(255,255,255,.16);border-radius:999px;padding:4px 12px;font-variant-numeric:tabular-nums}
.bildschau-text{color:rgba(255,255,255,.85)}
@media(max-width:620px){.bildschau-buehne{padding:64px 0 112px}.bildschau-knopf{width:44px;height:44px}.bildschau-fuss{padding:12px 16px 18px;font-size:13px}}
.daumen{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:thin}
.daumen a{flex:0 0 auto;width:86px;height:64px;border-radius:8px;overflow:hidden;border:2px solid transparent}
.daumen a:hover,.daumen a:focus{border-color:var(--akzent)}
.daumen img{width:100%;height:100%;object-fit:cover}
.objektkopf>*{min-width:0}
.objektkopf{display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:960px){.objektkopf{grid-template-columns:1fr}}
.seitenleiste{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
@media(max-width:960px){.seitenleiste{position:static}}
.preisbox .preis{font-family:var(--serif);font-size:40px;font-weight:500;line-height:1}
.preisbox .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.chip{background:var(--hell);border-radius:999px;padding:5px 12px;font-size:13px}
.person{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.person img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.initialen{width:56px;height:56px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:22px;font-weight:600;flex:0 0 auto}
.person b{display:block;font-size:16px}.person div span{font-size:13px;color:var(--weich)}
.knopfreihe{display:flex;flex-direction:column;gap:10px}
.daten{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0 26px}
.daten th,.daten td{text-align:left;padding:11px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.daten th{font-weight:500;color:var(--weich);width:48%}
.punkte{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:16px 0 26px}
.punkte li{background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:6px 14px;font-size:14px}
.text h2{font-size:32px;margin:40px 0 16px}.text h2:first-child{margin-top:0}
.kosten{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:22px}
.kosten .daten{margin:6px 0 10px}
details.widerruf{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:14px 18px;margin-top:28px}
details.widerruf summary{cursor:pointer;font-weight:600}
details.widerruf p{white-space:pre-line;font-size:13px;color:var(--weich);margin:10px 0 0}

/* Abschluss, Banner, Fuss */
.banner{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.banner h2{font-size:28px;margin-bottom:6px}
.fuss{background:var(--tinte);color:rgba(246,241,232,.8);padding:56px 0 0;font-size:14px}
.fuss .raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
@media(max-width:860px){.fuss .raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss .raster{grid-template-columns:1fr}}
.fuss .marke{color:var(--sand);font-size:26px}.fuss .marke span{color:var(--gold)}
.fuss h2{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fuss p{margin:0 0 9px}.fuss a{color:var(--sand)}.fuss a:hover{color:var(--gold)}
.fuss .unten{border-top:1px solid rgba(246,241,232,.15);padding:18px 0 22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(246,241,232,.55)}
.fuss .unten a{color:rgba(246,241,232,.7)}
.rechtstext{max-width:780px}
.rechtstext h1{font-size:44px}

/* Druck: Exposé-PDF */
@media print{
  .kopf,.fuss,.nav,[data-wa],.nur-bildschirm,form,.form-karte:not(.preisbox),.daumen,.aehnliche,.krumen{display:none!important}
  body{background:#fff;font-size:11pt}
  section{padding:10mm 0}
  .galerie{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;gap:3mm;overflow:visible;border-radius:0;background:none}
  .galerie figure{display:none;aspect-ratio:3/2}.galerie figure:nth-child(-n+4){display:block}
  .galerie img{object-fit:cover;background:none}.galerie-rahmen .galerie-pfeil,.galerie-zahl{display:none!important}
  details.widerruf{border:0;padding:0}details.widerruf>*{display:block}
  h1{font-size:26pt}.text h2{font-size:17pt;margin-top:7mm}.kosten,.preisbox{break-inside:avoid}
  .objektkopf{display:flex;flex-direction:column;gap:6mm}.seitenleiste{position:static;order:-1}
  .preisbox{padding:5mm;border:1px solid var(--linie)}.preisbox .preis{font-size:24pt}
  .nur-druck{display:block!important}
  a{color:var(--tinte)}
}
.nur-druck{display:none}
/* Platzhalter: das Original-CSS bleibt unverändert, hier nur Kleinigkeiten der statischen Kopie. */

/* ---------------------------------------------------------------- WhatsApp
   Schwebender Knopf mit Sprechblase, uebernommen von
   internationale-immobilienvermittlung.de. Das Markup haengt 03_build.py vor
   </body>, die Sprechblase merkt sich ihr Schliessen in immobiliya-static.js.
   Am Rechner fuehrt wa.me nur zu WhatsApp Web, das viele nicht eingerichtet
   haben - deshalb dort ein QR-Code zum Scannen statt eines Links. */
/* WhatsApp-Sprechblase: reines CSS, der Design-Renderer verwaltet das DOM selbst.
   Ablauf: Blase fährt nach 2,8s auf, Schreibpunkte laufen, ab 4,4s steht die
   Antwort da. Schliessen ueber eine versteckte Checkbox. */
[data-wa-close] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-wa-close]:checked ~ [data-wa-bubble] { display: none; }
[data-wa-bubble] {
  position: relative; width: 268px; background: #fff; border-radius: 14px;
  padding: 14px 15px 15px; box-shadow: 0 14px 40px rgba(20, 39, 63, .22);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right;
  animation: waAuf .42s cubic-bezier(.2, .9, .3, 1.2) 2.8s forwards;
}
[data-wa-bubble]::after {
  content: ""; position: absolute; right: 26px; bottom: -7px; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 8px rgba(20, 39, 63, .08);
}
@keyframes waAuf { to { opacity: 1; transform: none; } }
[data-wa-punkt] { animation: waPuls 2s ease-in-out infinite; }
@keyframes waPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[data-wa-stapel] { display: grid; margin: 11px 0 12px; }
[data-wa-stapel] [data-wa-tippt], [data-wa-stapel] [data-wa-text] { grid-area: 1 / 1; }
[data-wa-tippt] { display: flex; gap: 4px; align-items: center;
  animation: waWeg .3s linear 4.4s forwards; }
[data-wa-tippt] span { width: 7px; height: 7px; border-radius: 50%; background: #b9c2cf;
  animation: waTipp 1.15s ease-in-out infinite; }
[data-wa-tippt] span:nth-child(2) { animation-delay: .18s; }
[data-wa-tippt] span:nth-child(3) { animation-delay: .36s; }
@keyframes waTipp { 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
                    30% { transform: translateY(-4px); opacity: 1; } }
@keyframes waWeg { to { opacity: 0; visibility: hidden; } }
[data-wa-text] { opacity: 0; animation: waAuf .34s ease-out 4.4s forwards; }
[data-wa-cta] { opacity: 0; animation: waAuf .34s ease-out 4.6s forwards; }
[data-wa-cta]:hover { background: #178a45 !important; }
[data-wa-x]:hover { color: #182231 !important; }
[data-wa-btn]:hover { background: #178a45 !important; }
@media (prefers-reduced-motion: reduce) {
  [data-wa-bubble], [data-wa-text], [data-wa-cta] { animation-delay: 0s; animation-duration: .01s; }
  [data-wa-tippt] { display: none; }
  [data-wa-punkt] { animation: none; }
}
@media (max-width: 820px) {
  /* Am Telefon nur der runde Button mit dem Logo – die Sprechblase entfällt,
     sonst stehen dort zwei WhatsApp-Elemente übereinander. */
  [data-wa] { right: 12px; bottom: 12px; gap: 8px; }
  [data-wa-bubble] { display: none !important; }
  /* box-sizing ausdruecklich: das WordPress-Theme der Kopie setzt global
     border-box, die eigene Website nicht. Mit border-box zoege die Polsterung
     aus dem style-Attribut (13px 20px) den Inhalt auf 12px zusammen und das
     WhatsApp-Logo waere ein Strich. Mit content-box sieht der Knopf aus wie
     auf internationale-immobilienvermittlung.de. */
  [data-wa-btn] { box-sizing: content-box; width: 52px; height: 52px;
    min-height: 52px; border-radius: 50%; justify-content: center; }
  [data-wa-wort] { display: none; }
  [data-wa-btn] [data-wa-punkt] { display: none; }
  [data-wa-logo] { width: 27px; height: 27px; }
}
/* Einmal geschlossen bleibt die Sprechblase auch auf den Folgeseiten zu.
   Das Attribut setzt das Skript unten aus dem localStorage. */
html[data-wa-zu] [data-wa-bubble] { display: none !important; }
[data-wa-logo] { display: none; }
@media (max-width: 820px) { [data-wa-logo] { display: block; } }
/* WhatsApp am Desktop: QR-Code zum Scannen statt Link – wa.me führt am Rechner
   nur zu WhatsApp Web, das viele nicht eingerichtet haben. */
[data-qr-schalter] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
[data-qr-feld] { display: none; }
[data-qr-schalter]:checked ~ [data-qr-feld] { display: block; }
[data-qr-feld] { position: relative; width: 268px; background: #fff; border-radius: 14px;
  padding: 16px; box-shadow: 0 14px 40px rgba(20, 39, 63, .22); text-align: center; }
[data-qr-feld] img { width: 168px; height: 168px; display: block; margin: 10px auto 0; }
[data-wa-mobil] { display: none; }
@media (max-width: 820px) {
  [data-wa-desktop] { display: none !important; }
  [data-wa-mobil] { display: inline-flex; }
  [data-qr-feld] { display: none !important; }
}
/* Barrierefreiheit: Links im Fliesstext unterstrichen (24.09.2026) */
.leise a,.text p a,.zustimmung a,.form-meldung a,.rechtstext p a,details.frage a,.banner p a{text-decoration:underline;text-underline-offset:2px}
.dunkel a:not(.knopf){color:var(--gold)}.dunkel a:not(.knopf):hover{color:#e0c08a}