/* Stylesheet der Unterseiten von nedvizhimost-berlin.de.
   Die Startseite behält ihr CSS inline; alle übrigen Seiten teilen sich diese
   Datei.

   Gestaltungslinie dieser Domain: warmes Papier, Tannengrün und Terrakotta,
   eine einzige Schrift (Golos Text), runde Formen, grosse Radien und die
   asymmetrische Bildecke als Wiedererkennungszeichen. Die Kopfzeile hat zwei
   Reihen, der Katalog zwei breite Spalten mit liegendem Bild.

   Die Schwesterdomain nedvizhimost-germanii.de ist bewusst gegensätzlich
   gebaut (Marineblau, Serifen, enge Raster, kleine Radien) – von dort nichts
   übernehmen und nichts dorthin geben. */

:root{
  --tinte:#12231e; --gruen:#1a5145; --gruen-tief:#123a31; --gruen-hell:#eef4f1;
  --terra:#a8501c; --terra-dunkel:#8c4116; --terra-hell:#fbf1ea;
  --papier:#fdfbf7; --sand:#f4efe6; --linie:#e6e0d4; --linie-fein:#efeae0;
  --text:#1b2b26; --weich:#55605a; --leise:#6a736d;
  --wa:#118240; --wa-dunkel:#0d6b34;
  --schrift:'Golos Text','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--text);
  font-family:var(--schrift);font-size:17px;line-height:1.68;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Muss sein: die Regeln unten geben Elementen ein eigenes `display`, und das
   schlägt das `[hidden]{display:none}` des Browsers – ohne diese Zeile bleibt
   jedes per `hidden` ausgeblendete Element sichtbar. Betrifft die Filterleiste
   (ohne JavaScript unbedienbar und deshalb im HTML `hidden`), die
   ausgefilterten Katalogeinträge und die Blätterknöpfe der Bildschau. */
[hidden]{display:none!important}
input,select,textarea{min-width:0;max-width:100%}
a{color:var(--gruen);text-decoration:none}
a:hover{text-decoration:underline}
p a,li a,label a,details a,address a{text-decoration:underline;text-underline-offset:2px}
/* Ein Knopf bleibt ein Knopf, auch wenn er in einem Absatz steht. */
p a.knopf,li a.knopf{text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.16;letter-spacing:-.022em;color:var(--tinte)}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(23px,3vw,33px)}
h3{font-size:18.5px;letter-spacing:-.01em}
p{margin:0 0 1.3em}
:focus-visible{outline:3px solid var(--terra);outline-offset:2px;border-radius:6px}
.huelle{max-width:1160px;margin:0 auto;padding:0 22px}
.eng{max-width:790px}
/* «huelle eng» in einem Zug: der Rahmen bleibt so breit wie überall, nur der
   Text darin wird schmal – sonst rutscht die Spalte in die Mitte und steht
   nicht mehr unter der Überschrift des Seitenkopfs. */
.huelle.eng{max-width:1160px}
.huelle.eng>*{max-width:790px}
section{padding:clamp(48px,6vw,86px) 0}
.marke-zeile{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:600;color:var(--terra);background:var(--terra-hell);
  border-radius:999px;padding:6px 15px;margin:0 0 18px}
.fuehrung{font-size:clamp(16.5px,2vw,19px);color:var(--weich);max-width:62ch}
.blass{color:var(--weich)}
.nur-fuer-screenreader{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Schaltflächen: rund, wie auf der Startseite ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--schrift);font-size:16px;font-weight:600;line-height:1.25;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;min-height:52px;
  cursor:pointer;text-align:center;transition:background .15s,border-color .15s,transform .05s}
.knopf:hover{text-decoration:none}
.knopf:active{transform:translateY(1px)}
.knopf-haupt{background:var(--terra);color:#fff}
.knopf-haupt:hover{background:var(--terra-dunkel);color:#fff}
.knopf-gruen{background:var(--gruen);color:#fff}
.knopf-gruen:hover{background:var(--gruen-tief);color:#fff}
.knopf-rand{background:transparent;color:var(--gruen);border-color:#cfd9d4}
.knopf-rand:hover{border-color:var(--gruen);color:var(--gruen)}
.knopf-hell{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.knopf-hell:hover{background:rgba(255,255,255,.22);color:#fff}
.knopf-breit{width:100%}

/* ---------- Kopfzeile: zwei Reihen ----------
   Oben Marke, Telefon und Handlungsknopf, darunter das mittig gesetzte Menü.
   Auf dem Telefon wird die Menüreihe zu einer waagerecht scrollbaren Leiste –
   kein Klappmenü, damit alle Abschnitte sichtbar bleiben. */
header{position:sticky;top:0;z-index:60;background:rgba(253,251,247,.97);
  border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;gap:18px;min-height:70px}
.marke{display:flex;align-items:center;gap:11px;color:var(--tinte);flex:0 0 auto}
.marke:hover{text-decoration:none}
.marke img{width:38px;height:38px;object-fit:contain}
.marke b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.marke i{display:block;font-style:normal;font-size:11.5px;color:var(--leise);font-weight:500}
.kopf-tel{display:flex;align-items:center;gap:8px;color:var(--tinte);
  font-weight:600;font-size:15.5px;white-space:nowrap;margin-left:auto}
.kopf-tel svg{color:var(--terra);flex:0 0 auto}
.kopf-cta{padding:11px 20px;font-size:15px;min-height:44px;white-space:nowrap}
.kopf-zweite{border-top:1px solid var(--linie-fein);background:var(--sand)}
.kopf-nav{display:flex;justify-content:center;gap:6px;overflow-x:auto;
  scrollbar-width:none;padding:7px 0}
.kopf-nav::-webkit-scrollbar{display:none}
.kopf-nav a{flex:0 0 auto;color:var(--weich);font-weight:600;font-size:15px;
  padding:8px 17px;border-radius:999px;white-space:nowrap;min-height:40px;
  display:inline-flex;align-items:center}
.kopf-nav a:hover{color:var(--gruen);background:rgba(26,81,69,.07);text-decoration:none}
.kopf-nav a[aria-current=page]{background:var(--gruen);color:#fff}
@media(max-width:720px){.kopf-tel span{display:none}.marke i{display:none}
  .kopf-cta{padding:11px 15px;font-size:14px}.huelle{padding:0 16px}
  .kopf-nav{justify-content:flex-start}}
@media(max-width:420px){.marke b{font-size:16.5px}.kopf{gap:10px}
  .kopf-tel{display:none}}

/* ---------- Seitenkopf: heller Papierkopf statt dunkler Fläche ---------- */
.seitenkopf{padding:clamp(28px,3.6vw,44px) 0 clamp(30px,4vw,46px);position:relative;
  overflow:hidden}
.seitenkopf::before{content:"";position:absolute;top:-220px;right:-180px;
  width:640px;height:640px;pointer-events:none;
  background:radial-gradient(circle,var(--gruen-hell) 0%,rgba(238,244,241,0) 68%)}
.seitenkopf>*{position:relative}
.seitenkopf h1{max-width:20ch}
.seitenkopf .fuehrung{margin-top:16px}
.krumen{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--leise);
  margin:0 0 16px;padding:0;list-style:none}
.krumen li::after{content:"/";margin-left:8px;color:#bcc4bf}
.krumen li:last-child::after{content:""}

/* ---------- Filterleiste: runde Marken je Bezirk ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.filter button{font:inherit;font-size:15px;font-weight:600;color:var(--weich);
  background:#fff;border:1.5px solid var(--linie);border-radius:999px;
  padding:9px 18px;min-height:42px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.filter button:hover{border-color:var(--gruen);color:var(--gruen)}
.filter button[aria-pressed=true]{background:var(--gruen);border-color:var(--gruen);
  color:#fff}
.filter-zahl{align-self:center;margin-left:6px;font-size:14.5px;color:var(--leise)}

/* ---------- Katalog: zwei Spalten, Bild links, Text rechts ---------- */
.katalog{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.eintrag{display:grid;grid-template-columns:246px 1fr;background:#fff;
  border:1px solid var(--linie);border-radius:16px;overflow:hidden;
  transition:box-shadow .18s,transform .18s}
.eintrag:hover{box-shadow:0 18px 44px rgba(18,35,30,.11);transform:translateY(-2px)}
.eintrag-bild{position:relative;display:block;background:var(--sand);overflow:hidden}
/* Prozenthöhen lösen sich in einer Rasterzelle ohne feste Höhe nicht auf –
   deshalb steht das Bild absolut im Rahmen. */
.eintrag-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eintrag-schild{position:absolute;left:12px;top:12px;background:#fff;
  border-radius:999px;font-size:12px;font-weight:600;color:var(--gruen);
  padding:5px 12px;box-shadow:0 3px 10px rgba(18,35,30,.14)}
.eintrag-schild.ist-vermietet{color:var(--terra)}
.eintrag-inhalt{padding:20px 22px 22px;display:flex;flex-direction:column}
.eintrag-rayon{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--terra);margin:0 0 8px}
.eintrag h2,.eintrag h3{font-size:19px;line-height:1.28;margin:0 0 8px;
  letter-spacing:-.015em}
.eintrag h2 a,.eintrag h3 a{color:var(--tinte)}
.eintrag-kurz{font-size:14.5px;color:var(--weich);margin:0 0 14px;line-height:1.55}
.eintrag-marken{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 16px;
  padding:0;font-size:13px;color:var(--weich)}
.eintrag-marken li{background:var(--gruen-hell);border-radius:999px;padding:4px 11px}
.eintrag-fuss{margin-top:auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding-top:14px;
  border-top:1px solid var(--linie-fein)}
.eintrag-preis{font-size:20px;font-weight:700;color:var(--gruen);letter-spacing:-.02em}
.eintrag-mehr{font-size:14.5px;font-weight:600;color:var(--terra);white-space:nowrap}
@media(max-width:1080px){.katalog{grid-template-columns:1fr}}
@media(max-width:560px){.eintrag{grid-template-columns:1fr}
  .eintrag-bild{aspect-ratio:16/10}}

/* ---------- Objektseite ---------- */
.objekt-kopf{padding:clamp(22px,3vw,36px) 0 0}
.objekt-kopf h1{max-width:23ch;margin-bottom:14px}
.objekt-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-bottom:24px}
.objekt-preis{font-size:clamp(24px,3.2vw,32px);font-weight:700;color:var(--gruen);
  letter-spacing:-.03em}
.objekt-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;
  font-size:14px;color:var(--weich)}
.objekt-chips li{background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:5px 13px}

/* Galerie: ein grosses Bild mit der schrägen Ecke, darunter die Reihe.
   Bewusst anders als auf der Schwesterseite (dort eine Schnappspur). */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.galerie a{display:block;border-radius:14px;overflow:hidden;background:var(--sand);
  aspect-ratio:4/3;position:relative}
.galerie a:first-child{grid-column:1/-1;aspect-ratio:16/9;
  border-radius:120px 18px 18px 18px}
.galerie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galerie-mehr{position:absolute;inset:0;background:rgba(18,35,30,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px}
.galerie-hinweis{font-size:13.5px;color:var(--leise);margin:10px 0 0}
@media(max-width:640px){.galerie{grid-template-columns:repeat(3,1fr)}
  .galerie a:first-child{border-radius:70px 16px 16px 16px}}

/* Alle Fotos ohne JavaScript: die Ankerziele klappen die volle Reihe auf. */
.galerie-alle{display:grid;gap:12px;margin-top:14px}
.galerie-alle figure{margin:0}
.galerie-alle img{width:100%;border-radius:16px;aspect-ratio:16/10;object-fit:cover}
.galerie-alle figcaption{font-size:13.5px;color:var(--leise);padding:6px 4px 0}

/* ---------- Bildschau: das Overlay über der Galerie ----------
   Die Vorschaubilder bleiben gewöhnliche Verweise auf die Volldatei. Erst das
   Skript setzt <html class="bildschau-da"> und fängt den Klick ab – ohne
   JavaScript (und in Browsern ohne dialog.showModal) öffnet ein Klick weiterhin
   einfach das Bild selbst. Deshalb hängt auch die Lupenhand an dieser Klasse:
   ein Zeiger, der Vergrösserung verspricht, muss sie auch halten können. */
.bildschau-da .galerie a{cursor:zoom-in}
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:transparent;color:#fff;
  overflow:hidden;font-family:var(--schrift)}
dialog.bildschau::backdrop{background:rgba(9,20,17,.94)}
.bildschau-buehne{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:70px 78px 88px}
.bildschau-bild{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:14px;object-fit:contain;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.bildschau-knopf{position:absolute;display:flex;align-items:center;
  justify-content:center;width:52px;height:52px;padding:0;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.34);background:rgba(18,35,30,.62);
  color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.bildschau-knopf:hover{background:rgba(18,35,30,.92);border-color:rgba(255,255,255,.72)}
.bildschau-knopf svg{width:24px;height:24px;display:block}
.bildschau-zu{top:16px;right:16px}
.bildschau-zurueck{left:16px;top:50%;transform:translateY(-50%)}
.bildschau-vor{right:16px;top:50%;transform:translateY(-50%)}
.bildschau-fuss{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 78px 22px;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  text-align:center;font-size:15px;line-height:1.45}
.bildschau-zaehler{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.16);border-radius:999px;padding:4px 13px;white-space:nowrap}
.bildschau-text{color:rgba(255,255,255,.88)}
@media(max-width:640px){
  .bildschau-buehne{padding:64px 10px 92px}
  .bildschau-knopf{width:46px;height:46px}
  .bildschau-knopf svg{width:22px;height:22px}
  .bildschau-zu{top:10px;right:10px}
  .bildschau-zurueck{left:10px}
  .bildschau-vor{right:10px}
  .bildschau-fuss{padding:14px 18px 18px;font-size:14px}
}
/* Am Telefon liegen die Pfeile über dem Bild – dort blättert ohnehin die
   Wischgeste, der Knopf ist nur die sichtbare Zweitbedienung. */
@media(prefers-reduced-motion:no-preference){
  dialog.bildschau[open]{animation:bildschau-auf .18s ease-out}
  @keyframes bildschau-auf{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
}

.objekt-gitter{display:grid;grid-template-columns:1fr 350px;
  gap:clamp(26px,3.4vw,50px);align-items:start;
  padding:clamp(32px,4.2vw,54px) 0 clamp(44px,6vw,76px)}
.objekt-text h2{margin:34px 0 14px}
.objekt-text h2:first-child{margin-top:0}
.objekt-text p{color:var(--weich);font-size:16.5px}
.objekt-komu{background:var(--gruen-hell);border-radius:16px;padding:18px 22px;
  font-size:16px;color:var(--text);margin:0 0 28px}

/* «Паспорт объекта»: zwei Spalten aus Kärtchen statt einer Tabelle */
.pass{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 26px}
.pass div{background:#fff;border:1px solid var(--linie);border-radius:14px;
  padding:13px 15px}
.pass dt{font-size:12.5px;color:var(--leise);margin-bottom:3px}
.pass dd{margin:0;font-size:16px;font-weight:600;color:var(--tinte)}
@media(max-width:900px){.pass{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.pass{grid-template-columns:1fr}}

.merkmale{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:8px;font-size:16px}
.merkmale li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.merkmale svg{color:var(--gruen);margin-top:4px}

.tabelle{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 26px}
.tabelle th,.tabelle td{text-align:left;padding:12px 0;
  border-bottom:1px solid var(--linie-fein);vertical-align:top}
.tabelle th{color:var(--leise);font-weight:500;width:46%}

.objekt-seite{position:sticky;top:150px;display:grid;gap:16px}
.seitenkarte{background:#fff;border:1px solid var(--linie);border-radius:20px;
  padding:22px 22px 24px;box-shadow:0 14px 40px rgba(18,35,30,.07)}
.seitenkarte h2{font-size:20px;margin-bottom:8px}
.seitenkarte p{font-size:15px;color:var(--weich);margin:0 0 16px}
.seitenkarte .knopf{width:100%;margin-bottom:9px}
.seitenkarte-fuss{font-size:13px;color:var(--leise);margin:6px 0 0;text-align:center}
.makler{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.makler img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.makler b{display:block;font-size:15.5px;color:var(--tinte)}
.makler span{display:block;font-size:13.5px;color:var(--leise)}
@media(max-width:980px){.objekt-gitter{grid-template-columns:1fr}
  .objekt-seite{position:static}}

/* ---------- Inhaltsseiten ---------- */
.inhalt{padding:clamp(44px,5.4vw,78px) 0}
.inhalt h2{margin:0 0 16px}
.inhalt p{color:var(--weich)}
.wechsel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);
  align-items:center}
.wechsel img{width:100%;max-height:430px;object-fit:cover;
  border-radius:18px 18px 18px 140px}
.wechsel-gedreht img{border-radius:140px 18px 18px 18px}
@media(max-width:880px){.wechsel{grid-template-columns:1fr}
  .wechsel img{border-radius:16px 16px 16px 90px}}

/* Zeitleiste wie auf der Startseite – die Form ist hier das Wiedererkennbare */
.zeit{margin:40px 0 0;border-left:2px solid var(--linie);padding-left:0;
  list-style:none;counter-reset:zeit}
.zeit li{position:relative;padding:0 0 32px 34px;counter-increment:zeit}
.zeit li:last-child{padding-bottom:0}
.zeit li::before{content:counter(zeit);position:absolute;left:-19px;top:-2px;
  width:36px;height:36px;border-radius:50%;background:var(--gruen);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
.zeit h3{margin-bottom:7px}
.zeit p{color:var(--weich);font-size:16px;margin:0;max-width:62ch}
.zeit-dauer{display:inline-block;font-size:12.5px;font-weight:600;color:var(--terra);
  background:var(--terra-hell);border-radius:999px;padding:3px 11px;margin-bottom:8px}

.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:24px 22px}
.karte h3{margin-bottom:9px}
.karte p{margin:0;font-size:15.5px;color:var(--weich)}
@media(max-width:900px){.karten{grid-template-columns:1fr}}

.nutzen-gitter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);
  margin-top:40px}
.nutzen-punkt{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.nutzen-zahl{font-size:36px;font-weight:700;color:var(--gruen);line-height:1;
  letter-spacing:-.03em;min-width:74px}
.nutzen-punkt h3{margin-bottom:7px}
.nutzen-punkt p{font-size:15.5px;color:var(--weich);margin:0}
@media(max-width:820px){.nutzen-gitter{grid-template-columns:1fr;gap:26px}}

.rayony{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;list-style:none;padding:0}
.rayony li a,.rayony li span{display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:9px 17px;font-size:15px;color:var(--tinte);font-weight:500}
.rayony li a:hover{border-color:var(--gruen);text-decoration:none;color:var(--gruen)}
.rayony b{color:var(--leise);font-weight:600;font-size:13.5px}

.kontakt-gitter{display:grid;grid-template-columns:1fr 430px;
  gap:clamp(26px,4vw,56px);align-items:start}
.kontakt-block{background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:22px 24px;margin-bottom:16px}
.kontakt-block h3{margin:0 0 8px}
.kontakt-block p{margin:0 0 6px;font-size:16px;color:var(--weich)}
.kontakt-block p:last-child{margin-bottom:0}
@media(max-width:960px){.kontakt-gitter{grid-template-columns:1fr}}

details{background:#fff;border:1px solid var(--linie);border-radius:14px;
  margin-bottom:11px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:19px 52px 19px 22px;position:relative;
  font-size:17px;font-weight:600;color:var(--tinte);min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--terra);border-bottom:2px solid var(--terra);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
details p{font-size:16px;color:var(--weich);margin:0;padding:0 22px 20px}

/* ---------- Formular ---------- */
.form-karte{background:#fff;border:1px solid var(--linie);border-radius:22px;
  padding:clamp(22px,3vw,32px);box-shadow:0 20px 60px rgba(18,35,30,.09);
  position:relative}
.form-karte h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:6px}
.form-unter{font-size:15px;color:var(--weich);margin:0 0 22px}
.feld{margin-bottom:15px}
.gitter-2{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--weich);margin-bottom:6px}
input[type=text],select,textarea{
  width:100%;font-family:var(--schrift);font-size:16px;color:var(--text);
  padding:13px 14px;border:1.5px solid var(--linie);border-radius:11px;
  background:var(--papier);transition:border-color .15s,box-shadow .15s,background .15s}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gruen);
  background:#fff;box-shadow:0 0 0 3px rgba(26,81,69,.12)}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--weich);line-height:1.5;font-weight:400;margin:16px 0 14px}
.zustimmung input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--gruen)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-fuss{font-size:12.5px;color:var(--leise);text-align:center;margin:11px 0 0}
.form-fehler{display:none;background:#fdf1ee;border:1px solid #f0cdc0;color:#9d4c22;
  border-radius:11px;padding:12px 14px;font-size:14.5px;margin-bottom:16px}
.form-dank{display:none;text-align:center;padding:26px 6px}
.form-dank svg{color:var(--wa);margin:0 auto 16px}
.form-dank h2{margin-bottom:10px}
.form-dank p{color:var(--weich);margin:0}
.ist-gesendet .form-koerper{display:none}
.ist-gesendet .form-dank{display:block}
@media(max-width:620px){.gitter-2{grid-template-columns:1fr}}

/* ---------- Abschluss ---------- */
.abschluss{background:var(--gruen);color:#fff;text-align:center}
.abschluss h2{color:#fff;margin-bottom:14px}
.abschluss p{color:#cfe0da;margin:0 auto 28px;max-width:60ch;
  font-size:clamp(16.5px,2vw,19px)}
.abschluss-tasten{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Fußzeile ---------- */
footer{background:var(--sand);color:var(--weich);padding:46px 0 32px;font-size:14.5px;
  border-top:1px solid var(--linie)}
.fuss-gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:28px;border-bottom:1px solid var(--linie)}
.fuss-gitter h3{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte);margin:0 0 13px;font-weight:600}
.fuss-gitter p{margin:0 0 7px}
footer a{color:var(--gruen)}
.fuss-marke{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.fuss-marke img{width:34px;height:34px;object-fit:contain}
.fuss-marke b{font-size:16.5px;font-weight:700;color:var(--tinte)}
.fuss-unten{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;font-size:13.5px}
.fuss-unten nav{margin-left:auto;display:flex;gap:20px}
@media(max-width:860px){.fuss-gitter{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fuss-gitter{grid-template-columns:1fr}
  .fuss-unten nav{margin-left:0}}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-knopf{display:inline-flex;align-items:center;gap:10px;background:var(--wa);
  color:#fff;padding:13px 19px 13px 15px;border-radius:999px;font-weight:700;
  font-size:15px;min-height:52px;border:0;cursor:pointer;font-family:var(--schrift);
  box-shadow:0 10px 30px rgba(31,168,85,.38);transition:background .15s,transform .12s}
.wa-knopf:hover{background:var(--wa-dunkel);color:#fff;text-decoration:none;
  transform:translateY(-2px)}
.wa-mobil{display:none}
.wa-schalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.wa-overlay{display:none;position:fixed;inset:0;z-index:100;
  align-items:center;justify-content:center;padding:20px}
.wa-schalter:checked~.wa-overlay{display:flex}
.wa-hintergrund{position:absolute;inset:0;background:rgba(18,35,30,.55);cursor:pointer}
.wa-karte{position:relative;background:#fff;border-radius:18px;padding:28px 30px;
  max-width:340px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.wa-karte img{width:200px;height:200px;margin:0 auto 14px}
.wa-titel{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra);margin:0 0 6px}
@media(max-width:820px){
  .wa{right:14px;bottom:14px;gap:8px}
  .wa-overlay{display:none!important}
  .wa-desktop{display:none!important}
  .wa-mobil{display:inline-flex}
  .wa-knopf{width:56px;height:56px;padding:0;border-radius:50%;justify-content:center}
  .wa-knopf span{display:none}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;
  transition:none!important;animation:none!important}}