/* 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; }
}

/* ------------------------------------------------------- Abstand unter der Navigation
   Seiten, denen 03_build.py die Bühne genommen hat, beginnen sonst unmittelbar
   unter der Navigationsleiste - auf den Detailseiten sass die Überschrift
   buendig darauf. Die Kontaktseiten tragen die Klasse nicht, dort steht weiter
   die Slideshow direkt unter der Leiste. */
body.immobiliya-ohne-buehne #content.site-content { padding-top: 48px; }

@media (max-width: 820px) {
  body.immobiliya-ohne-buehne #content.site-content { padding-top: 26px; }

  /* Am Telefon steht die Kopfleiste fest über dem Inhalt (104 px hoch). Im
     Original schob die Bühne den Seitenanfang darunter weg - ohne sie muss der
     Abstand hierher, sonst verschwindet die Überschrift dahinter. Betroffen
     sind die Seiten, deren Inhalt unmittelbar oben beginnt: Archive,
     Merkliste und Objektseiten. Die Merkliste trägt die Klasse
     immobiliya-ohne-buehne nicht, deshalb zwei Stufen. */
  #content .immomakler-archive,
  #content .immomakler-single { padding-top: 110px; }
  body.immobiliya-ohne-buehne #content .immomakler-archive,
  body.immobiliya-ohne-buehne #content .immomakler-single { padding-top: 84px; }
}

/* Die Angebots- und Taxonomie-Archive bringen über .immomakler-archive schon
   rund 100 px mit - dort sass im Original die Bühne darüber. Zusammen mit der
   Polsterung oben waeren es knapp 150 px, deutlich mehr als auf den uebrigen
   Seiten. Hier zaehlt deshalb nur der eigene Abstand.
   Nur am Rechner: am Telefon steht die Kopfleiste fest über dem Inhalt, dort
   hält der Abstand oben die Überschrift frei (siehe Media-Query darüber). */
@media (min-width: 821px) {
  body.immobiliya-ohne-buehne .immomakler-archive { padding-top: 0; }
}

/* ------------------------------------------- Angebotsbilder auf der Startseite
   Die drei Bilder unter "Unsere besten Angebote" sind jetzt Links (siehe
   07_anpassungen.py). Der Anker ersetzt das <picture> im Fluss, bleibt also
   inline - Groesse und Abstaende aendern sich nicht. Die Regeln halten nur
   Theme-Zutaten fuer Links vom Bild fern und geben Tastaturnutzern einen Rahmen. */
a.immobiliya-bildlink { display: inline; border: 0; text-decoration: none; }
a.immobiliya-bildlink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ===================================================== Suchbereich der Archive
   Neuer Entwurf (Claude Design, 15.09.2026): Aufbau und Farben aus dem Entwurf,
   Schriften der Seite. Erzeugt wird das Markup in build/07b_filter.py.
   Die Farben stammen aus dem Entwurf: gedämpftes Blau statt des Bootstrap-Blaus,
   feine Linien, Großbuchstaben-Beschriftungen. */
.immo-filter,
.immo-f-kopf,
.immo-profil {
  --immo-akzent: #5980a6;
  --immo-akzent-dunkel: #47678a;
  --immo-akzent-hell: #eef6ff;
  --immo-linie: rgba(29, 31, 32, 0.16);
  --immo-gedaempft: rgba(29, 31, 32, 0.6);
}

/* --- Kopfzeile: Objektsuche, Überschrift, Merkliste, Zurücksetzen --- */
.immo-f-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.immo-f-kopf .archive-title { margin: 0; }
.immo-f-kopf .archive-subtitle { margin: 4px 0 0; font-size: 18px; color: var(--immo-gedaempft); }
.immo-f-eyebrow {
  /* Wie der Vorspann der Theme-Ueberschriften (h1 > em, z. B. "Il Suo partner"
     auf /dienstleistungen/), nachgemessen am 22.09.2026: 20 px, fett,
     Versalien, 1 px Sperrung, Textfarbe, 10 px Abstand zur Ueberschrift. */
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #333;
  line-height: 22px;
  margin-bottom: 10px;
}
.immo-f-kopfknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.immo-f-zahl {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  background: var(--immo-akzent);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* --- Kästen --- */
.immo-filter,
.immo-profil {
  border: 1px solid var(--immo-linie);
  background: #fff;
  padding: 20px;
  margin-bottom: 16px;
}
.immo-f-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

/* --- Beschriftungen und Felder --- */
.immo-f-lbl {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--immo-gedaempft);
  margin-bottom: 5px;
}
.immo-f-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.immo-f-zeile > .immo-f-lbl { margin-bottom: 0; }
.immo-f-raster {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 14px;
}
.immo-filter label.immo-f-feld,
.immo-filter .immo-f-feld { display: block; margin: 0; font-weight: normal; max-width: none; }
.immo-f-breit { grid-column: 1 / -1; }
.immo-f-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.immo-f-ortzeile { display: flex; gap: 8px; }
.immo-f-ortzeile .immo-f-input { flex: 1 1 auto; min-width: 0; }
.immo-f-umkreis { flex: 0 0 110px; }

.immo-filter .immo-f-input,
.immo-filter .immo-f-select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--immo-linie);
  background: #fff;
  color: inherit;
  font: inherit;
  border-radius: 0;
  box-shadow: none;
}
.immo-filter .immo-f-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 20px, calc(100% - 10px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.immo-filter .immo-f-input:focus,
.immo-filter .immo-f-select:focus {
  outline: 2px solid var(--immo-akzent);
  outline-offset: -1px;
  border-color: var(--immo-akzent);
}

/* --- Segmentierte Auswahl (Ich suche, Zimmer ab) --- */
.immo-f-seg { display: inline-flex; flex-wrap: wrap; }
.immo-filter label.immo-f-seg-opt,
.immo-f-seg-opt {
  position: relative;
  max-width: none;
  margin: 0 -1px 0 0;
  padding: 9px 16px;
  border: 1px solid var(--immo-linie);
  background: #fff;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
.immo-f-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.immo-f-seg-opt:hover { border-color: var(--immo-akzent); z-index: 1; }
.immo-f-seg-opt:has(input:checked) {
  background: var(--immo-akzent);
  border-color: var(--immo-akzent);
  color: #fff;
  z-index: 2;
}
.immo-f-seg-opt:has(input:focus-visible) { outline: 2px solid var(--immo-akzent); outline-offset: 2px; }

/* --- Ausstattung: Kästchen --- */
.immo-f-haken {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 16px;
}
.immo-filter label.immo-f-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; cursor: pointer; margin: 0; max-width: none;
}
.immo-f-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.immo-f-box {
  width: 17px; height: 17px; flex: none; margin-top: 2px;
  border: 1px solid var(--immo-linie);
  background: #fff;
  display: grid;
  place-items: center;
}
.immo-f-check:hover .immo-f-box { border-color: var(--immo-akzent); }
.immo-f-check input:checked + .immo-f-box { background: var(--immo-akzent); border-color: var(--immo-akzent); }
.immo-f-check input:checked + .immo-f-box::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.immo-f-check input:focus-visible + .immo-f-box { outline: 2px solid var(--immo-akzent); outline-offset: 2px; }

/* --- Knöpfe --- */
.immo-f-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.immo-f-primaer,
.immo-f-sekundaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--immo-linie);
  background: #fff;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
.immo-f-primaer {
  flex: 1 1 auto;
  background: var(--immo-akzent);
  border-color: var(--immo-akzent);
  color: #fff;
  font-weight: 600;
}
.immo-f-primaer:hover, .immo-f-primaer:focus { background: var(--immo-akzent-dunkel); border-color: var(--immo-akzent-dunkel); color: #fff; }
.immo-f-sekundaer:hover, .immo-f-sekundaer:focus { border-color: var(--immo-akzent); color: inherit; text-decoration: none; }

/* --- Aktive Filter --- */
.immo-f-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.immo-f-chips > .immo-f-lbl { margin-bottom: 0; }
.immo-f-chipliste { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.immo-f-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--immo-akzent);
  background: var(--immo-akzent-hell);
  color: var(--immo-akzent-dunkel);
}
.immo-f-chip button {
  all: unset;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  padding: 0 2px;
  color: var(--immo-akzent);
}
.immo-f-chip button:hover { color: #1d1f20; }
.immo-f-chip-leer { font-size: 13px; color: var(--immo-gedaempft); }

/* --- Suchprofil --- */
.immo-profil-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.immo-profil-titel { font-size: 18px; }
.immo-profil-text { font-size: 13px; color: var(--immo-gedaempft); margin-top: 2px; }
.immo-profil-koerper { margin-top: 16px; border-top: 1px solid var(--immo-linie); padding-top: 16px; }
.immo-profil-koerper .form-row { margin-bottom: 12px; }
.immo-profil-koerper .form-control { border-radius: 0; height: 44px; }

@media (max-width: 820px) {
  .immo-f-raster { grid-template-columns: 1fr; }
  .immo-f-kopf { align-items: flex-start; }
  .immo-filter, .immo-profil { padding: 16px; }
}

/* Das Theme macht jeden Knopf über die volle Breite (button {width:100%}) und
   färbt ihn beim Fokus um. Für den Suchbereich gilt das nicht. */
.immo-filter .immo-f-primaer,
.immo-filter .immo-f-sekundaer,
.immo-f-kopf .immo-f-sekundaer,
.immo-profil .immo-f-sekundaer { width: auto; max-width: none; }
.immo-filter .immo-f-primaer { flex: 1 1 240px; }
.immo-filter .immo-f-sekundaer,
.immo-profil .immo-f-sekundaer { flex: 0 0 auto; }
.immo-f-sekundaer:focus,
.immo-f-sekundaer:active,
.immo-f-sekundaer:focus:active {
  background: #fff;
  color: inherit;
  border-color: var(--immo-akzent);
  outline: 2px solid var(--immo-akzent);
  outline-offset: -3px;
}
.immo-f-primaer:focus,
.immo-f-primaer:active,
.immo-f-primaer:focus:active {
  background: var(--immo-akzent-dunkel);
  border-color: var(--immo-akzent-dunkel);
  color: #fff;
}

/* =========================================================== Objektkacheln
   Neuer Entwurf (Claude Design, 15.09.2026), erzeugt in build/07c_karten.py.
   Aufbau und Farben aus dem Entwurf, Schriften der Seite. Die Kachel behält
   aussen ihre Klassen, damit Merkliste, Sprungmarken und Tests weiter greifen. */
.immo-k {
  --immo-akzent: #5980a6;
  --immo-akzent-dunkel: #47678a;
  --immo-akzent-hell: #eef6ff;
  --immo-linie: rgba(29, 31, 32, 0.16);
  --immo-gedaempft: rgba(29, 31, 32, 0.62);
}
.immo-k .property-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--immo-linie);
  padding: 0;
}
.immo-k svg { flex: none; }

/* --- Bild mit Merkmalen, Merken-Herz und Fotozahl --- */
.immo-k-bildbereich {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9e9ea;
  border-bottom: 1px solid var(--immo-linie);
}
.immo-k-bild,
.immo-k-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.immo-k-marken { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.immo-k-marke {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--immo-akzent);
  color: #fff;
}
.immo-k .immo-k-merken {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--immo-linie);
  color: var(--immo-akzent);
  font-size: 17px;
  padding: 0;
}
.immo-k .immo-k-merken:hover { background: var(--immo-akzent-hell); }
/* Das Plugin schaltet am <span> zwischen glyphicon-unchecked und -check um.
   Der Zeichensatz des Themes hat aber kein Herz - deshalb steht daneben ein
   eigenes, und der Zustand kommt über den Nachbarn: gemerkt = gefüllt. */
/* Eine Klasse mehr als das Theme (.immomakler .glyphicon), sonst gewinnt es:
   sein Stylesheet steht im Kopf hinter unserem. */
.immo-k .immo-k-merken .in-cart { display: none; }
.immo-k-herz { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.immo-k-merken .glyphicon-check + .immo-k-herz { fill: currentColor; }
.immo-k-fotos {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 8px;
  background: rgba(29, 31, 32, 0.72);
  color: #fff;
}
.immo-k-fotos svg { width: 14px; height: 14px; }

/* --- Inhalt --- */
.immo-k-inhalt { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.immo-k-preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.immo-k-preis { font-size: 31px; line-height: 1; letter-spacing: -0.01em; }
.immo-k-qmpreis { font-size: 13px; color: var(--immo-gedaempft); white-space: nowrap; }
.immo-k-finanzierung {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--immo-akzent-hell);
  color: var(--immo-akzent-dunkel);
  font-size: 13px;
}
.immo-k-finanzierung svg { width: 16px; height: 16px; }
.immo-k .immo-k-titel {
  font-size: 19px;
  line-height: 1.22;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.immo-k .immo-k-titel a { color: inherit; }
.immo-k .immo-k-ort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--immo-gedaempft);
}
.immo-k-ort svg { width: 15px; height: 15px; }

/* --- Eckdaten --- */
.immo-k-fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--immo-linie);
  border-bottom: 1px solid var(--immo-linie);
}
.immo-k-fakt { padding: 10px 4px 10px 10px; border-left: 1px solid var(--immo-linie); }
.immo-k-fakt:first-child { border-left: 0; padding-left: 0; }
.immo-k-flbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29, 31, 32, 0.55);
}
.immo-k-fwert { display: block; font-size: 17px; line-height: 1.2; margin-top: 2px; }

/* --- Knöpfe --- */
.immo-k-aktionen { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.immo-k .immo-k-cta,
.immo-k .immo-k-zweit,
.immo-k .immo-k-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--immo-linie);
  background: #fff;
  color: inherit;
  text-decoration: none;
  width: auto;
}
.immo-k .immo-k-cta {
  background: var(--immo-akzent);
  border-color: var(--immo-akzent);
  color: #fff;
  font-weight: 600;
}
.immo-k .immo-k-cta:hover, .immo-k .immo-k-cta:focus {
  background: var(--immo-akzent-dunkel);
  border-color: var(--immo-akzent-dunkel);
  color: #fff;
  text-decoration: none;
}
.immo-k-cta svg { width: 17px; height: 17px; }
.immo-k-zweite { display: flex; gap: 8px; }
.immo-k .immo-k-zweit { flex: 1 1 auto; }
.immo-k .immo-k-pdf { flex: 0 0 auto; gap: 6px; padding: 0 12px; color: var(--immo-akzent); font-size: 14px; letter-spacing: 0.04em; }
.immo-k .immo-k-zweit:hover, .immo-k .immo-k-pdf:hover { border-color: var(--immo-akzent); text-decoration: none; }
.immo-k-pdf svg { width: 17px; height: 17px; }

.immo-k-fussnote {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--immo-gedaempft, rgba(29, 31, 32, 0.62));
}

@media (max-width: 820px) {
  .immo-k-inhalt { padding: 14px 14px 16px; gap: 12px; }
  .immo-k-preis { font-size: 27px; }
}

/* Gemerkt: der Knopf färbt sich mit, sonst ist am gefüllten Herz allein kaum
   zu sehen, dass der Klick angekommen ist. Die Klasse setzt cartMarks(). */
.immo-k .immo-k-merken.immo-k-gemerkt {
  background: var(--immo-akzent);
  border-color: var(--immo-akzent);
  color: #fff;
}
.immo-k .immo-k-merken.immo-k-gemerkt:hover { background: var(--immo-akzent-dunkel); }
.immo-k-merken .immo-k-herz { transition: fill 120ms ease; }
.immo-k-pdfsymbol { width: 18px; height: 18px; }

/* --- Bildstrecke auf der Kachel --------------------------------------------
   Geblättert wird mit den Pfeilen, am Telefon mit dem Finger. Das übernimmt
   der Browser selbst: ein waagerechter Streifen mit Einrastpunkten. Das
   Skript schiebt beim Pfeilklick nur weiter und färbt die Punkte. */
.immo-k-bilder {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.immo-k-bilder::-webkit-scrollbar { display: none; }
.immo-k-bilder > .immo-k-bild {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.immo-k .immo-k-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--immo-linie);
  color: #1d1f20;
  opacity: 0.75;
  transition: opacity 120ms ease;
}
.immo-k .immo-k-zurueck { left: 8px; }
.immo-k .immo-k-vor { right: 8px; }
.immo-k-pfeil svg { width: 18px; height: 18px; }
.immo-k-bildbereich:hover .immo-k-pfeil,
.immo-k-pfeil:focus-visible { opacity: 1; }
.immo-k-pfeil:hover { background: #fff; }
.immo-k .immo-k-pfeil[disabled] { opacity: 0 !important; pointer-events: none; }
.immo-k-punkte {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.immo-k-punkte i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(29, 31, 32, 0.6);
}
.immo-k-punkte i.immo-k-jetzt { background: #fff; }

/* Am Telefon sind die Pfeile nutzlos - dort wird gewischt. Nur nach der
   Breite gehen: "hover: none" meldet auch mancher Rechner-Browser. */
@media (max-width: 820px) {
  .immo-k .immo-k-pfeil { display: none; }
  .immo-k-punkte { bottom: 8px; }
}

/* =========================================================== Objektseite
   Neuer Entwurf (Claude Design, 21.09.2026), erzeugt in build/07d_objektseite.py.
   Aufbau und Farben aus dem Entwurf, Schriften der Seite. Gedacht ist er vor
   allem fuer den Rechner; unter 992 px faellt alles untereinander.

   Die Seite behaelt aussen die Klassen des Plugins (.property-details,
   .property-map mit .panel-body, .property-contactform, .property-actions),
   damit Merkliste, Formularversand, druck.js und die Testreihen weiter
   greifen - neu ist nur das Drumherum. */
.immo-o {
  --immo-akzent: #5980a6;
  --immo-akzent-dunkel: #416180;
  --immo-akzent-tief: #1d2d3d;
  --immo-akzent-hell: #eef6ff;
  --immo-linie: rgba(29, 31, 32, 0.16);
  --immo-gedaempft: rgba(29, 31, 32, 0.62);
}
/* Die Kaesten des Plugins sind weg, ihre Polsterung darf nicht bleiben.
   Das Element steht im Selektor, weil ".immomakler .panel-body{padding:15px}"
   gleich spezifisch ist und im Kopf hinter diesem Stylesheet steht. */
.immo-o div.panel-body { padding: 0; background: none; border: 0; }

/* --- Kopfzeile: Brotkrume und Blaettern --- */
.immo-o-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: 12px; padding-bottom: 12px;
}
/* nav steht mit im display:block-Block des Plugin-Bootstrap - deshalb das
   Element im Selektor, sonst fallen die Abstaende der Brotkrume weg. */
.immo-o nav.immo-o-krume {
  display: flex; align-items: center; gap: 9px; color: var(--immo-gedaempft);
}
.immo-o-krume a { color: var(--immo-gedaempft); text-decoration: none; }
.immo-o-krume a:hover { color: var(--immo-akzent-dunkel); text-decoration: underline; }
.immo-o-trenn { opacity: .45; }
.immo-o-blaettern { display: flex; align-items: center; gap: 8px; }
.immo-o .immo-o-blaettern .listnumber {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--immo-gedaempft); white-space: nowrap;
}
.immo-o .immo-o-blaettern a.btn {
  width: auto; float: none; margin: 0; height: 28px; padding: 0 10px;
  display: inline-flex; align-items: center; border-radius: 0;
  border: 1px solid var(--immo-linie); background: #fff;
  color: var(--immo-akzent-dunkel); box-shadow: none;
}
.immo-o .immo-o-blaettern a.btn:hover { background: var(--immo-akzent-hell); }

/* --- Ueberschrift, Merkmale, Ort --- */
.immo-o-titel { margin: 0 0 20px; }
.immo-o-marken { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.immo-o-marke {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; background: var(--immo-akzent); color: #fff;
}
.immo-o h1.property-title {
  font-size: clamp(25px, 2.6vw, 34px); line-height: 1.14; margin: 0;
}
.immo-o p.immo-o-ort {
  display: flex; align-items: center; gap: 7px; margin: 9px 0 0;
  font-size: 14px; color: var(--immo-gedaempft);
}
.immo-o-ort svg { width: 15px; height: 15px; flex: none; }
.immo-o-ort .immo-o-trenn { opacity: .45; }

/* --- Kennzahlen ueber der Galerie --- */
/* Zwei Klassen, weil das Plugin-Bootstrap ".immomakler section{display:block}"
   mitbringt und im Kopf hinter diesem Stylesheet steht: bei gleicher
   Spezifitaet gewinnt sonst das Plugin und die Kacheln stehen untereinander. */
.immo-o section.immo-o-kennzahlen {
  /* Gedeckelte Spalten statt 1fr: nicht jedes Objekt hat vier Kennzahlen,
     und zwei ueber die ganze Breite gezogene Kaesten sehen nach Fehler aus. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 300px));
  justify-content: start; gap: 14px; margin: 0 0 22px;
}
.immo-o-kz {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--immo-linie); background: #fff;
}
.immo-o-kz-betont { background: var(--immo-akzent-tief); border-color: var(--immo-akzent-tief); }
.immo-o-kz-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--immo-akzent-dunkel);
}
.immo-o-kz-wert { font-size: 30px; line-height: 1.06; letter-spacing: -.01em; font-weight: 600; }
.immo-o-kz-fuss { font-size: 12px; color: var(--immo-gedaempft); }
.immo-o-kz-betont .immo-o-kz-label { color: #b5d9fd; }
.immo-o-kz-betont .immo-o-kz-wert { color: #fff; }
.immo-o-kz-betont .immo-o-kz-fuss { color: #b5d9fd; }

/* --- Galerie: die des Plugins, nur ueber die volle Breite ---
   Sie bringt ihre Masse als eigene Variablen mit; daran gedreht wird hier,
   nicht am Markup. Die Bilder selbst anzufassen geht schief: die Buehne hat
   ein festes Seitenverhaeltnis, und ein "width: auto" am <img> laesst das
   Foto darin schweben statt es zu fuellen. */
.immo-o-galerie { margin: 0 0 30px; }
.immo-o-galerie .immomakler-gallery--horizontal_thumbs {
  --immomakler-gallery-main-aspect: 3 / 2;
  --immomakler-gallery-horizontal-thumb-height: 92px;
  --immomakler-gallery-primary-color: #5980a6;
}
/* Ueber die volle Breite waere die Buehne bei 3:2 rund 760 px hoch und
   fuellte den ganzen Bildschirm. Gedeckelt schneidet object-fit oben und
   unten etwas ab - das ist der Preis dafuer, dass unter dem Foto noch etwas
   zu sehen ist. */
.immo-o-galerie .immomakler-gallery__main { max-height: 600px; }

/* --- Zwei Spalten: Inhalt und mitlaufende Seitenspalte --- */
.immo-o-spalten { display: flex; gap: 34px; align-items: flex-start; }
.immo-o-inhalt { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 34px; }
.immo-o-spalte { flex: 0 0 330px; position: sticky; top: 18px; }
.immo-o h2.immo-o-h {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--immo-akzent-dunkel); margin: 0 0 13px; font-weight: 600;
}
.immo-o h2.immo-o-h2 { font-size: 26px; margin: 0 0 8px; }

/* --- Auf einen Blick --- */
.immo-o-blick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--immo-linie); border: 1px solid var(--immo-linie);
}
.immo-o-blick-feld {
  background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.immo-o-blick-feld span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--immo-gedaempft);
}
.immo-o-blick-feld strong { font-size: 17px; font-weight: 600; }

/* --- Beschreibung und Ausstattung --- */
.immo-o-text { font-size: 16px; line-height: 1.62; max-width: 68ch; }
.immo-o-text p { margin: 0 0 14px; }
.immo-o-merkmale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 0 26px;
}
.immo-o-merkmal {
  display: flex; align-items: center; gap: 9px; font-size: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--immo-linie);
}
.immo-o-merkmal svg { width: 15px; height: 15px; flex: none; color: var(--immo-akzent); }
.immo-o-freitext {
  margin-top: 16px; font-size: 15px; line-height: 1.6;
  max-width: 68ch; color: var(--immo-gedaempft);
}
.immo-o-freitext p { margin: 0 0 10px; }

/* --- Objektdaten und Energieausweis nebeneinander --- */
.immo-o section.immo-o-zweispalt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px; align-items: start;
}
/* table-layout fixed + overflow-wrap: lange Werte ("Централизованное теплоснабжение")
   ragten sonst am Rechner ueber den Kasten hinaus (23.09.2026). */
.immo-o table.immo-o-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.immo-o table.immo-o-tabelle td { overflow-wrap: anywhere; hyphens: auto; }
.immo-o table.immo-o-tabelle td {
  padding: 8px 2px; vertical-align: top;
  border-bottom: 1px solid rgba(29, 31, 32, 0.09);
}
.immo-o table.immo-o-tabelle td.dt { color: var(--immo-gedaempft); width: 46%; }
.immo-o table.immo-o-tabelle td.dd { font-weight: 500; }
.immo-o-energie { margin-top: 15px; border: 1px solid var(--immo-linie); padding: 11px 13px; }
.immo-o-energie-kopf {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--immo-gedaempft);
}
.immo-o-energie-balken { position: relative; height: 8px; background: #e7e7ea; }
.immo-o-energie-balken i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--immo-akzent); }
.immo-o-energie-fuss {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: 10px; color: var(--immo-gedaempft);
}

/* --- Lage: Text links, Karte rechts. Die drei Kinder von .panel-body
       bleiben in der Reihenfolge Text, Karte, Adresse - pruefe_anpassungen.js
       prueft genau das. Nebeneinander stehen sie ueber das Raster. --- */
/* Karte rechts, Text links, Adresszeile direkt unter der Karte. */
.immo-o-lage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px; row-gap: 0; align-items: start;
}
/* Bootstrap haengt an jedes .panel-body ein Clearfix-Paar
   (.panel-body:before/:after { content:" "; display:table }). Im Raster sind
   das zwei vollwertige Rasterelemente: sie belegten Zeile 1 in Spalte 1 und
   schoben den Text eine Zeile nach unten, unter die Karte. Zu raeumen gibt es
   hier nichts - das Raster macht das selbst. */
.immo-o .panel-body.immo-o-lage::before,
.immo-o .panel-body.immo-o-lage::after { display: none; content: none; }
.immo-o-lage > * { grid-column: 1; margin: 0 0 12px; }
.immo-o-lage > p { font-size: 15px; line-height: 1.6; }
/* Die drei Kinder von .panel-body bleiben in der Reihenfolge Text, Karte,
   Adresse (pruefe_anpassungen.js prueft genau das) - verschoben wird nur im
   Aussehen. */
/* Die drei Kinder von .panel-body bleiben in der Reihenfolge Text, Karte,
   Adresse (pruefe_anpassungen.js prueft genau das) - verschoben wird nur im
   Raster. Karte in Zeile 1, Adresszeile in Zeile 2, beide rechts; die
   Textabsaetze fuellen Spalte 1 von Zeile 1 an. */
.immo-o-lage > .immomakler-map-iframe {
  grid-column: 2; grid-row: 1; align-self: start; margin: 0;
  aspect-ratio: 4 / 3; border: 1px solid var(--immo-linie);
}
/* Die Adresszeile mit dem Google-Maps-Link steht direkt unter dem
   Kartenausschnitt, nicht unter dem Text (22.09.2026 so bestellt).
   Sie steht in derselben Rasterzelle wie die Karte und wird um deren Hoehe
   nach unten geschoben: ein Randabstand in Prozent rechnet gegen die *Breite*
   der Zelle, und die Karte ist 4:3 - 75 % der Breite sind also genau ihre
   Hoehe (border-box, das Theme setzt es global). In Zeile 2 haette die Zeile
   nicht gestanden: die beginnt erst unter dem Text, und der ist bei manchen
   Objekten laenger als die Karte hoch. */
.immo-o-lage > p.googlemaps-link {
  grid-column: 2; grid-row: 1; align-self: start;
  margin: calc(75% + 8px) 0 12px; font-size: 13px; color: var(--immo-gedaempft);
}

/* --- Provision und Widerrufsbelehrung, zugeklappt --- */
.immo-o details.immo-o-hinweise { border: 1px solid var(--immo-linie); padding: 12px 15px; }
.immo-o details.immo-o-hinweise summary {
  display: list-item; list-style: disclosure-closed inside;
  cursor: pointer; font-size: 15px; font-weight: 600;
}
.immo-o details.immo-o-hinweise[open] summary { list-style: disclosure-open inside; }
/* Zugeklappt heisst zugeklappt: das Plugin-Bootstrap setzt "display:block" auf
   Bloecke und hebelte damit das Verstecken des Browsers aus - der Text stand
   trotz geschlossenem <details> offen da (22.09.2026). */
.immo-o details.immo-o-hinweise:not([open]) > .immo-o-hinweise-text { display: none !important; }
.immo-o-hinweise-text {
  margin-top: 13px; font-size: 13px; line-height: 1.6;
  max-width: 78ch; color: var(--immo-gedaempft);
}

/* --- Seitenspalte --- */
.immo-o-sp-karte { border: 1px solid var(--immo-linie); background: #fff; padding: 18px; }
.immo-o-sp-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--immo-akzent-dunkel);
}
.immo-o-sp-preiszeile { display: flex; align-items: baseline; gap: 9px; margin-top: 3px; flex-wrap: wrap; }
.immo-o-sp-preis { font-size: 29px; line-height: 1; font-weight: 600; }
.immo-o-sp-qm { font-size: 12px; color: var(--immo-gedaempft); }
.immo-o-sp-zahlen {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--immo-linie);
  display: grid; gap: 7px; font-size: 13px;
}
.immo-o-sp-zeile { display: flex; justify-content: space-between; gap: 12px; }
.immo-o-sp-zeile > span { color: var(--immo-gedaempft); }
.immo-o-sp-zeile > strong { font-weight: 500; text-align: right; }
.immo-o-sp-person {
  margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--immo-linie); font-size: 13px;
}
.immo-o-sp-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.immo-o-sp-tel a { color: var(--immo-akzent-dunkel); }

/* Knoepfe. Das Theme macht jeden Knopf ueber die volle Breite und steht im
   Kopf hinter diesem Stylesheet - deshalb steht der Elementname mit dabei. */
.immo-o a.immo-o-knopf, .immo-o button.immo-o-knopf-erst {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 9px; height: 42px; padding: 0 14px;
  border: 1px solid var(--immo-akzent); border-radius: 0; box-shadow: none;
  background: #fff; color: var(--immo-akzent-dunkel);
  font-size: 15px; text-decoration: none; cursor: pointer;
}
.immo-o a.immo-o-knopf-erst, .immo-o button.immo-o-knopf-erst {
  background: var(--immo-akzent); border-color: var(--immo-akzent); color: #fff; margin-top: 16px;
}
.immo-o a.immo-o-knopf-erst:hover, .immo-o button.immo-o-knopf-erst:hover {
  background: var(--immo-akzent-dunkel); border-color: var(--immo-akzent-dunkel); color: #fff;
}
.immo-o a.immo-o-knopf-zweit:hover { background: var(--immo-akzent-hell); }
.immo-o a.immo-o-knopf-wa { border-color: #25d366; color: #128c4a; }
.immo-o a.immo-o-knopf-wa:hover { background: #e9f9ef; color: #0f7a40; }
.immo-o .immo-o-knopf svg { width: 17px; height: 17px; flex: none; }

/* PDF und Merken nebeneinander, halbe Breite - und innerhalb des Kastens.
   Das Theme laesst .property-actions auf der Objektseite nach links schwimmen
   (.immomakler-single .property-actions { float: left }) und steht im Kopf
   hinter diesem Stylesheet. Ein schwimmendes Kind zaehlt nicht zur Hoehe
   seines Elternteils: der Rahmen des Kastens endete deshalb ueber den beiden
   Knoepfen, die darunter im Freien standen. Der Elternname muss mit in den
   Selektor, sonst gewinnt das Theme. */
.immo-o .immo-o-sp-karte .immo-o-sp-klein {
  float: none; margin-bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px;
}
.immo-o .immo-o-sp-klein a.btn {
  width: 100%; float: none; margin: 0; height: 38px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--immo-linie); border-radius: 0; box-shadow: none;
  background: #fff; color: var(--immo-akzent-dunkel); font-size: 12.5px;
  /* Umbrechen statt abschneiden: "Druckansicht (PDF)" passt auf Russisch
     sonst nicht in die halbe Spaltenbreite. */
  white-space: normal; line-height: 1.15; text-align: center; height: auto; min-height: 38px;
}
.immo-o .immo-o-sp-klein a.btn:hover { background: var(--immo-akzent-hell); }
.immo-o .immo-o-sp-klein a.btn svg { width: 16px; height: 16px; flex: none; }
/* Der Zeichensatz des Themes hat kein Herz - daneben steht deshalb ein
   eigenes SVG, und der Zustand kommt ueber den Nachbarn wie auf der Kachel. */
.immo-o .immo-o-sp-klein .in-cart { display: none; }
.immo-o-herz { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.immo-o .immo-o-sp-klein .glyphicon-check + .immo-o-herz { fill: currentColor; }
.immo-o .immo-o-sp-klein a.immo-k-gemerkt {
  border-color: var(--immo-akzent); background: var(--immo-akzent-hell);
}

/* --- Direktanfrage --- */
.immo-o-anfrage { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--immo-linie); }
.immo-o-anfrage-raster {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 34px; align-items: start;
}
.immo-o-anfrage-text p { font-size: 14px; line-height: 1.6; max-width: 40ch; margin: 0 0 14px; }
.immo-o-anfrage-firma { display: grid; gap: 3px; font-size: 13px; color: var(--immo-gedaempft); }
.immo-o-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.immo-o label.immo-o-feld { display: grid; gap: 4px; margin: 0; font-weight: 400; width: auto; }
.immo-o label.immo-o-feld-breit { grid-column: 1 / -1; }
.immo-o .immo-o-feld-lbl { font-size: 12px; color: var(--immo-gedaempft); font-weight: 400; }
.immo-o .immo-o-felder input.form-control,
.immo-o .immo-o-felder textarea.form-control {
  width: 100%; height: 38px; padding: 6px 10px; font-size: 14px;
  border: 1px solid var(--immo-linie); border-radius: 0; box-shadow: none; background: #fff;
}
.immo-o .immo-o-felder textarea.form-control { height: auto; min-height: 84px; resize: vertical; }
.immo-o .immo-o-felder input.form-control:focus,
.immo-o .immo-o-felder textarea.form-control:focus {
  border-color: var(--immo-akzent); box-shadow: none; outline: none;
}
.immo-o label.immo-o-einwilligung {
  grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; line-height: 1.5; font-weight: 400; margin: 0; width: auto;
}
.immo-o label.immo-o-einwilligung input {
  width: auto; margin: 3px 0 0; flex: none; accent-color: var(--immo-akzent);
}
.immo-o-stern { color: var(--immo-akzent-dunkel); }
.immo-o-senden { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.immo-o .immo-o-senden button.immo-o-knopf-erst { width: auto; min-width: 190px; margin: 0; }
.immo-o-senden-fuss {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--immo-gedaempft);
}
.immo-o-senden-fuss svg { width: 13px; height: 13px; flex: none; }

/* --- Am Telefon faellt alles untereinander --- */
@media (max-width: 991px) {
  .immo-o-spalten { display: block; }
  .immo-o-spalte { position: static; margin-top: 30px; }
  .immo-o-anfrage-raster { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 767px) {
  .immo-o-felder { grid-template-columns: 1fr; }
  .immo-o-lage { grid-template-columns: 1fr; }
  .immo-o-lage > .immomakler-map-iframe,
  .immo-o-lage > p.googlemaps-link { grid-column: 1; grid-row: auto; margin: 0 0 12px; }
  /* einspaltig stehen sie ohnehin untereinander - der Schub entfiele sonst
     als riesige Luecke */
  /* Am Telefon (22.09.2026): Luft zum Bildschirmrand, und die Kennzahlen als
     Zeilen "Beschriftung ... Wert" statt als Kacheln - vier Kacheln nebeneinander
     oder als 2x2-Raster wurden zu klein und schnitten die Werte ab. */
  .immo-o { padding-left: 16px; padding-right: 16px; }
  .immo-o section.immo-o-kennzahlen { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--immo-linie); background: #fff; }
  .immo-o-kz { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px;
               padding: 10px 14px; border: 0; border-bottom: 1px solid var(--immo-linie); flex-wrap: wrap; }
  .immo-o-kz:last-child { border-bottom: 0; }
  .immo-o-kz-betont { background: var(--immo-akzent-tief); }
  .immo-o-kz-label { flex: 1 1 auto; font-size: 11px; }
  .immo-o-kz-wert { font-size: 20px; }
  .immo-o-kz-fuss { flex: 0 0 100%; font-size: 11px; }
}

/* --- Logo am Telefon (22.09.2026) ---
   Das Theme liefert das Logo mit sizes="100vw": am Telefon fuellte es die ganze
   Breite (793 px Bilddatei, gut 200 px hoch). Gedeckelt auf 170 px Breite. */
@media (max-width: 820px) {
  .site-branding .custom-logo-link { display: inline-block; }
  /* Halbe Hoehe gegenueber vorher (73 px): 36 px hoch, Breite folgt (Seitenverhaeltnis 793:206). */
  .site-branding .custom-logo-link picture,
  .site-branding .custom-logo-link img { height: 36px !important; width: auto !important; max-width: 140px !important; }
  .site-branding .custom-logo { margin: 6px 0 4px; }
}

/* Startseite: die drei Objekte aus dem Stamm (07_anpassungen.py, beste_angebote) */
.immobiliya-beste-titel { margin: 10px 0 4px; font-weight: 600; line-height: 1.3; }
.immobiliya-beste-info { margin: 0 0 10px; font-size: 14px; color: #555; }
.immobiliya-beste-info b { color: #222; }

/* Russische Ueberschrift der Angebotsseite ("Предложение недвижимости") ist
   laenger als die deutsche - eine Stufe kleiner (23.09.2026). */
html[lang^="ru"] h1.archive-title { font-size: clamp(24px, 3.2vw, 36px); }

/* Lightbox auf den Objektseiten (22.09.2026): Klick aufs Bild zeigt es gross,
   in seinen eigenen Abmessungen (hoechstens Bildschirm), mit Pfeilen und
   Schliessen. Das Plugin wollte dafuer lightGallery nachladen, das es in der
   Kopie nicht gibt. */
.immo-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(10, 10, 10, .94); display: flex; align-items: center; justify-content: center; }
.immo-lb img { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); width: auto; height: auto; display: block; box-shadow: 0 8px 40px rgba(0, 0, 0, .6); user-select: none; }
.immo-lb button { position: absolute; border: 0; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; font: 28px/1 Arial, sans-serif; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s; }
.immo-lb button:hover { background: rgba(255, 255, 255, .25); }
.immo-lb-zu { top: 14px; right: 14px; }
.immo-lb-zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
.immo-lb-vor { right: 14px; top: 50%; transform: translateY(-50%); }
.immo-lb-zaehler { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #ddd; font: 14px/1 Arial, sans-serif; pointer-events: none; }
.immo-lb[data-eins="1"] .immo-lb-zurueck, .immo-lb[data-eins="1"] .immo-lb-vor { display: none; }
body.immo-lb-offen { overflow: hidden; }
.immomakler-gallery__main .swiper-slide img { cursor: zoom-in; }
@media (max-width: 640px) {
  .immo-lb button { width: 44px; height: 44px; font-size: 22px; }
  .immo-lb-zurueck { left: 6px; } .immo-lb-vor { right: 6px; }
  .immo-lb img { max-width: 100vw; max-height: calc(100vh - 80px); }
}

/* Hauptbild der Objektgalerie unverzerrt (22.09.2026): das Plugin fuellte den
   3:2-Rahmen mit object-fit: cover und schnitt Hoch- und Querformate an.
   Jetzt passt das ganze Bild in den Rahmen, der Rest bleibt schwarz. */
.immo-o-galerie .immomakler-gallery__main { background: #000; }
.immo-o-galerie .immomakler-gallery__main .swiper-slide img.immomakler-gallery__image,
.immo-o-galerie .immomakler-gallery__main .swiper-slide picture > img.immomakler-gallery__image {
  width: 100%; height: 100%; object-fit: contain !important; background: #000;
}

/* Zusammenfassung der Filter im Kasten "Suchprofil anlegen" */
.immo-profil-filter { margin: 0 0 14px; padding: 12px 14px; background: #f4f6f9; border-left: 3px solid #5980a6; font-size: 14px; line-height: 1.7; }
.immo-profil-filter-vor { display: block; margin-bottom: 4px; color: #333; }
.immo-profil-filter .immo-f-chip { margin: 0 6px 4px 0; }

/* Kontrast und Zielgrößen (Lighthouse, 22.09.2026): Akzentblau etwas dunkler
   (weiß darauf 5:1 statt 4,1:1), gedämpfter Text dunkler (Beschriftungen der
   Filter), Links im Fließtext unterstrichen, Telefonlinks mindestens 24 px hoch,
   die Flaggen des Sprachumschalters unverzerrt. */
.immo-f-kopf, .immo-profil, .immo-k, .immo-o, .immo-filter {
  --immo-akzent: #4a6f95;
  --immo-gedaempft: #5b6572;
}
.immo-o-lage > p.googlemaps-link a, .immo-o-einwilligung a { text-decoration: underline; }
.immo-o-sp-tel a { display: inline-block; padding: 4px 0; }
img[src^="data:image/png;base64"] { object-fit: contain; }
.immo-profil-filter { border-left-color: #4a6f95; }
.immo-filter .immo-f-primaer, .immo-f-primaer, .immo-f-primaer:hover, .immo-f-primaer:focus { color: #fff !important; }
.immo-k-flbl { color: #686868; }
.immo-o a.immo-o-knopf-wa { color: #0f7a40; }
.immo-o .immo-o-einwilligung a { text-decoration: underline !important; }