/* ==========================================================================
   MUNTA — IMMOBILIEN
   Eigene Datei seit Phase 7b.1 (Architekturregel 4 aus Abschnitt 98b).

   Geladen ueber `$extraStyles` im Basislayout - keine @import-Kaskade.

   Was hier NICHT steht: Buttons, Formfelder, Chips, Typografie, Farben,
   Abstaende, Radien, Fokus. Die bleiben zentral in `munta.css`. Hier stehen
   ausschliesslich immobilienspezifische Layouts - alle Klassen tragen
   `immo` oder `meineliste` im Namen.

   ================== Die Gestaltungsentscheidung ==================

   Immobilien duerfen visueller sein als andere Karten (SPEC 18): grosses
   Bild, sehr gut sichtbarer Preis, danach drei Zahlen. Wer eine Wohnung
   sucht, entscheidet nach Bild und Preis - nicht nach einer Textzeile.

   Ausdruecklich KEINE Kachelwand im Stil der grossen Portale: eine Liste
   mit grossen Zeilen, die auf dem Telefon zu Karten werden.
   ========================================================================== */

/* ==========================================================================
   1. Die Suche
   ========================================================================== */

.immosuche {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  margin: var(--space-4) 0 var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.immosuche .field { margin: 0; }
.immosuche .btn { align-self: end; }

.immosuche__stand {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* ==========================================================================
   2. Die Liste
   ==========================================================================
   Grosse Zeilen mit Bild links, Text rechts. Unter 700px wird daraus eine
   Karte mit Bild oben - nebeneinander blieben fuer den Text sonst 150px.
   ========================================================================== */

.immoliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
}

.immokarte {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.immokarte__bild {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
}
.immokarte__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Kein Bild: ein ruhiges Symbol statt eines Platzhalterbildes mit Text. */
.immokarte__leer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.immokarte__leericon { width: 42px; height: 42px; opacity: .5; }

/*
   Die Bildzahl als kleine Marke im Bild.

   Sie sitzt IM Bild und nicht daneben, damit die Textspalte ihre Ordnung
   behaelt - dort stehen Art, Titel, Preis und Zahlen, und eine sechste Zeile
   waere eine zu viel. Fuer Vorleseprogramme steht die Zahl zusaetzlich als
   `visually-hidden` im Text; das Bild selbst ist `aria-hidden`.

   Dunkler Grund mit heller Schrift, damit sie auf jedem Foto lesbar bleibt -
   ein halbtransparentes Grau verschwindet auf einer weissen Hausfassade.
*/
.immokarte__bildzahl {
  position: absolute; right: .5rem; bottom: .5rem;
  min-width: 1.6rem; padding: .15rem .4rem;
  border-radius: var(--radius-xs, 4px);
  background: rgba(0, 0, 0, .72); color: #fff;
  font-size: var(--fs-tiny); font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}

.immokarte__text {
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  display: grid; gap: var(--space-2); align-content: start;
}

.immokarte__art {
  margin: 0; font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}

/*
   Privat oder Makler - der Unterschied traegt Farbe UND Wort. Farbe allein
   waere fuer farbfehlsichtige Menschen keine Auskunft.
*/
.immokarte__anbieter--private    { color: var(--forest); }
.immokarte__anbieter--commercial { color: var(--enzian); }

.immokarte__titel { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.immokarte__titel a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.immokarte__titel a:hover { text-decoration: underline; }

/* Der Preis ist die zweite Information nach dem Bild - entsprechend gross. */
.immokarte__preis {
  margin: 0;
  font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em;
  color: var(--text);
}

.immokarte__fakten {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.immokarte__fakten li { display: inline-flex; align-items: center; gap: .35rem; }
.immokarte__icon { width: 16px; height: 16px; flex: none; }

@media (max-width: 700px) {
  .immokarte { grid-template-columns: 1fr; gap: 0; }
  .immokarte__bild { aspect-ratio: 16 / 10; }
  .immokarte__text { padding: var(--space-4); }
}

/* ==========================================================================
   3. Die Detailseite
   ========================================================================== */

.immokopf { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }

.immokopf__art {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}

/* ==========================================================================
   3a. Die Galerie (Phase 7b.2)
   ==========================================================================
   Ein grosses Bild, darunter die uebrigen als Vorschau. Kein Karussell, kein
   Lichtkasten, kein JavaScript: jede Vorschau ist ein Link auf das ganze
   Bild. Das funktioniert mit der Tastatur, mit einem Vorleseprogramm und im
   Funkloch - und es kann nicht kaputtgehen.

   `aspect-ratio` steht auf beiden Ebenen, damit die Seite beim Laden nicht
   springt. Die Bilder tragen zusaetzlich width/height aus der Datenbank.
   ========================================================================== */

.immogalerie { margin: 0; display: grid; gap: var(--space-2); }

.immogalerie__gross {
  display: block; position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-soft);
  border-radius: var(--radius-sm); overflow: hidden;
}
.immogalerie__gross img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/*
   Die uebrigen Bilder in einer Reihe, die auf dem Telefon seitlich
   weiterlaeuft. Bewusst kein Umbruch in viele Zeilen: Bei dreissig Bildern
   waere die halbe Seite Vorschau, bevor der Preis kommt.
*/
.immogalerie__weitere {
  list-style: none; margin: 0; padding: 0 0 .25rem;
  display: flex; gap: var(--space-2);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.immogalerie__weitere li { flex: none; scroll-snap-align: start; }
.immogalerie__weitere a {
  display: block; width: 7.5rem; aspect-ratio: 4 / 3;
  border-radius: var(--radius-xs, 4px); overflow: hidden;
  background: var(--surface-soft);
}
.immogalerie__weitere img { width: 100%; height: 100%; object-fit: cover; display: block; }

.immogalerie__zahl { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 520px) {
  .immogalerie__gross { aspect-ratio: 4 / 3; }
  .immogalerie__weitere a { width: 6rem; }
}

.immokopf__preis {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 750; letter-spacing: -.03em; line-height: 1.1;
}
.immokopf__preisart { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/*
   Die drei Zahlen, die zaehlen. Auf dem Telefon nebeneinander in einer
   Reihe - dafuer sind sie kurz genug.
*/
.immofakten {
  list-style: none; margin: var(--space-3) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
}
.immofakten li { display: grid; gap: .1rem; justify-items: start; }
.immofakten__icon { width: 20px; height: 20px; color: var(--text-muted); }
.immofakten__wert { font-size: var(--fs-base); font-weight: 700; }
.immofakten__name {
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}

.immoaktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0;
}
.immoaktionen form { margin: 0; }

/* Die Eckdatentabelle - zwei Spalten am Schreibtisch, gestapelt am Telefon */
.immodaten {
  margin: var(--space-3) 0 var(--space-5); padding: 0;
  display: grid; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.immodaten__zeile {
  display: grid; gap: .1rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
.immodaten dt {
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.immodaten dd { margin: 0; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .immodaten__zeile {
    grid-template-columns: 12rem 1fr; gap: var(--space-3); align-items: baseline;
  }
}

.immoanbieter { margin: 0 0 var(--space-4); font-weight: 650; }

/*
   Der Betrugshinweis (SPEC 13.4).

   Deutlich sichtbar, aber nicht schreiend: Ein roter Kasten mit
   Ausrufezeichen wird nach dem dritten Inserat ueberlesen. Warme Warnfarbe,
   ruhiger Satz.
*/
.immowarnung {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
}
.immowarnung p { margin: 0; font-size: var(--fs-md); color: #6B4A00; }

/* ==========================================================================
   4. Das Formular in Schritten
   ==========================================================================
   Sechs benannte Abschnitte statt einer Wand aus dreissig Feldern. Die
   Nummer steht als Kreis vor der Frage - sie sagt, wie weit man ist, ohne
   dass es einen mehrseitigen Assistenten braucht.
   ========================================================================== */

.immoschritt {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-4);
  margin: 0 0 var(--space-5);
  display: grid; gap: var(--space-4);
}

.immoschritt > legend {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--fs-base); font-weight: 700;
}

.immoschritt__nr {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  background: var(--dark); color: var(--text-invert);
  font-size: var(--fs-xs); font-weight: 800;
  border-radius: var(--radius-pill);
}

.immoschritt__unter {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}

/* Zwei Felder nebeneinander, sobald Platz ist. */
.immoschritt__paar { display: grid; gap: var(--space-3); }

@media (min-width: 560px) {
  .immoschritt__paar { grid-template-columns: 1fr 1fr; }
}

/* Verschachtelte Auswahlgruppen brauchen innen keinen zweiten Rahmen. */
.immoschritt .field--choices { border: 0; padding: 0; margin: 0; }

/* ==========================================================================
   5. Meine Inserate
   ========================================================================== */

.meineliste {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.meineliste__zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  min-height: 64px;
}

.meineliste__text { min-width: 0; flex: 1 1 14rem; display: grid; gap: .15rem; }
.meineliste__titel { margin: 0; font-size: var(--fs-base); font-weight: 700; }
.meineliste__titel a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.meineliste__titel a:hover { text-decoration: underline; }
.meineliste__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/*
   Der Zustand als Wort, nicht nur als Farbe - dieselbe Regel wie bei den
   Benachrichtigungen in 8d.
*/
.immostatus {
  flex: 0 0 auto;
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--text-muted);
}
.immostatus--published { background: var(--forest-soft); color: var(--forest); }
.immostatus--draft     { background: var(--gold-soft);   color: #6B4A00; }
.immostatus--paused    { background: var(--surface-soft); color: var(--text-muted); }
.immostatus--reserved,
.immostatus--negotiation { background: var(--enzian-soft); color: var(--enzian); }
.immostatus--sold,
.immostatus--rented    { background: var(--dark); color: var(--text-invert); }
.immostatus--hidden    { background: var(--danger-soft); color: var(--danger); }

/*
   44px in der eigenen Liste.

   `.btn--small` ist zentral 40px hoch - fuer einen gelegentlichen Knopf am
   Schreibtisch reicht das. Hier steht er in einer Liste, durch die man
   tippt, oft auf dem Telefon. Dieselbe Entscheidung wie bei der
   Mitgliederverwaltung in 8c; die zentrale Klasse bleibt unberuehrt.
*/
.meineliste__zeile .btn { min-height: 44px; }

@media (max-width: 560px) {
  .meineliste__zeile .btn { width: 100%; }
  .immosuche { padding: var(--space-3); }
}

/* ==========================================================================
   6. Die Bilderverwaltung (Phase 7b.2)
   ==========================================================================
   Eine eigene Seite, weil dreissig Bilder mit Sortier-, Titel- und
   Loeschknoepfen im Inseratsformular eine Wand waeren.

   Jedes Bild ist eine Zeile: Vorschau links, Beschreibung und Knoepfe
   rechts. Die Reihenfolge aendert man mit zwei Knoepfen statt mit Ziehen -
   das funktioniert mit der Tastatur, auf dem Telefon und ohne JavaScript.
   ========================================================================== */

.immobilder__upload {
  display: grid; gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.immobilder {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
  counter-reset: none;
}

.immobilder__item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Das Titelbild traegt einen Rahmen UND eine Beschriftung - Farbe allein
   waere fuer farbfehlsichtige Menschen keine Auskunft. */
.immobilder__item--cover { border-color: var(--enzian); }

.immobilder__vorschau {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border-radius: var(--radius-xs, 4px); overflow: hidden;
}
.immobilder__vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }

.immobilder__marke {
  position: absolute; left: .35rem; bottom: .35rem;
  padding: .12rem .4rem; border-radius: var(--radius-pill);
  background: var(--enzian); color: var(--text-invert);
  font-size: var(--fs-micro); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}

.immobilder__text { min-width: 0; display: grid; gap: var(--space-2); align-content: start; }

.immobilder__name { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.immobilder__datei {
  display: block; font-weight: 400; font-size: var(--fs-xs);
  color: var(--text-muted); overflow-wrap: anywhere;
}

/*
   Beschreibungsfeld und Knopf nebeneinander, solange Platz ist.

   Das Formular traegt zusaetzlich `field`, damit das Eingabefeld die
   zentrale Gestaltung erbt (`munta.css` haengt sie an
   `.field input[type="text"]`). `width: auto` nimmt die dortige
   100-Prozent-Breite zurueck - im Flexlayout entscheidet die Basis.
*/
.immobilder__alt {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch;
  margin: 0;
}
.immobilder__alt .field__input { flex: 1 1 12rem; width: auto; min-width: 0; }

.immobilder__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/*
   Auch hier 44px statt der zentralen 40px: Diese Seite bedient man auf dem
   Telefon, mit dreissig Knoepfen untereinander. Die zentrale Klasse bleibt
   unberuehrt - dieselbe Entscheidung wie in der eigenen Inseratsliste.
*/
.immobilder .btn, .immobilder__upload .btn { min-height: 44px; }

/* Entfernen ist der einzige Handgriff, der etwas zerstoert - er traegt die
   Warnfarbe, aber keinen eigenen Knopfstil. */
.immobilder__weg { color: var(--danger); }

.immobilder__zurueck { margin: var(--space-5) 0 0; }

@media (max-width: 620px) {
  .immobilder__item { grid-template-columns: 1fr; gap: var(--space-3); }
  .immobilder__vorschau { aspect-ratio: 16 / 10; }
  .immobilder__alt .field__input { flex: 1 1 100%; }
  .immobilder__knoepfe .btn { flex: 1 1 8rem; }
}

/* ==========================================================================
   7. Kontakt und Objektkarte (Phase 7b.3)
   ==========================================================================
   Die Karte steht ueber dem Anfrageformular und ueber der Unterhaltung. Sie
   ist bewusst KLEIN: Im Messenger ist sie Zusatz, nicht Hauptsache - das
   Gespraech soll nicht erst nach zwei Bildschirmhoehen beginnen.
   ========================================================================== */

.immokontakt { margin: var(--space-4) 0 var(--space-2); }
.immokontakt .btn { min-height: 48px; }

.objektkarte {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.objektkarte__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border-radius: var(--radius-xs, 4px); overflow: hidden;
}
.objektkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.objektkarte__leer { position: absolute; inset: 0; display: grid; place-items: center; }
.objektkarte__leericon { width: 24px; height: 24px; color: var(--text-muted); opacity: .5; }

.objektkarte__text { min-width: 0; display: grid; gap: .2rem; }

.objektkarte__titel {
  margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.objektkarte__preis { margin: 0; font-size: var(--fs-base); font-weight: 750; letter-spacing: -.02em; }
.objektkarte__zeile { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }

/*
   „Nicht mehr verfuegbar" traegt Farbe UND Wort - Farbe allein waere fuer
   farbfehlsichtige Menschen keine Auskunft.
*/
.objektkarte__zustand {
  margin: .2rem 0 0; font-size: var(--fs-xs); font-weight: 650; color: #6B4A00;
}

.objektkarte__link { margin: .4rem 0 0; }
.objektkarte__link .btn { min-height: 44px; }

/* Ein zurueckgezogenes Objekt: eine Zeile, kein halbes Kaertchen. */
.objektkarte--weg { grid-template-columns: 1fr; }
.objektkarte__weg { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Die kompakte Fassung im Posteingang. */
.objektkarte--klein { padding: var(--space-2); grid-template-columns: 3.5rem 1fr; }
.objektkarte--klein .objektkarte__titel { font-size: var(--fs-sm); }
.objektkarte--klein .objektkarte__preis { font-size: var(--fs-md); }

@media (max-width: 420px) {
  .objektkarte { grid-template-columns: 4.5rem 1fr; }
  .immokontakt .btn { width: 100%; }
}

/* ==========================================================================
   8. Preisangebote (Phase 7b.4)
   ==========================================================================
   Ausdruecklich KEINE Auktionsoptik: kein Countdown, kein rotes Blinken,
   keine „nur noch 2 Chancen"-Leiste. Ein Preisangebot ist der Beginn einer
   Verhandlung zwischen zwei Menschen, nicht ein Spiel gegen die Uhr.

   Der Zustand traegt deshalb ueberall ein WORT (siehe `.immostatus`); Farbe
   kommt dazu, steht aber nie allein.
   ========================================================================== */

.immoangebot {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/*
   Der Rechtshinweis steht UEBER dem Knopf und in normaler Textgroesse -
   nicht als Fussnote. Wer hier bietet, schliesst keinen Kaufvertrag, und
   das ist keine Kleingedrucktes-Information.
*/
.immoangebot__recht {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-left: 3px solid var(--gold, #C8961E);
  background: var(--gold-soft, #FDF6E3);
  font-size: var(--fs-sm); color: #6B4A00;
}

.immoangebot__hoechst { margin: 0 0 var(--space-3); font-size: var(--fs-md); }

.immoangebot__meins {
  display: grid; gap: .25rem; justify-items: start;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.immoangebot__label {
  margin: 0; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.immoangebot__betrag {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 750; letter-spacing: -.02em; line-height: 1.1;
  /* Ein Betrag darf nie abgeschnitten werden - lieber umbrechen. */
  overflow-wrap: anywhere;
}

/*
   Die Rangaussage neben dem Zustand (7b.4a).

   Bewusst leiser als die Zustandsmarke: Der Zustand ist die Entscheidung,
   der Rang die Auskunft. Beide stehen als Text da, nicht als Farbe.
*/
.immoangebot__rang,
.meinangebot__rang {
  margin: .15rem 0 0; font-size: var(--fs-xs); color: var(--text-muted);
}
.angebot__rang { font-size: var(--fs-xs); color: var(--text-muted); }

.immoangebot__form { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); }
.immoangebot__form .btn,
.immoangebot__weg .btn { min-height: 48px; }
.immoangebot__weg { margin: 0; }

/* ==========================================================================
   8a. Die Liste des Anbieters
   ========================================================================== */

.angebotsliste {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
}

.angebot {
  display: grid; gap: .3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Das fuehrende Angebot traegt einen Rahmen UND das Wort daneben. */
.angebot--fuehrend { border-color: var(--forest); border-left-width: 4px; }

.angebot__kopf {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: baseline; justify-content: space-between;
}
.angebot__betrag {
  margin: 0; font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.angebot__wer  { margin: 0; font-size: var(--fs-md); font-weight: 650; overflow-wrap: anywhere; }
.angebot__zeit { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

.angebot__aktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
}
.angebot__aktionen .btn { min-height: 44px; }
.angebot__nein { color: var(--danger); }

/* ==========================================================================
   8b. Meine Preisangebote
   ========================================================================== */

.meinangebotsliste {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-4);
}

.meinangebot {
  display: grid; gap: .3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.meinangebot .objektkarte { margin: 0 0 var(--space-2); border: 0; padding: 0; background: none; }

.meinangebot__betrag {
  margin: 0; font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.meinangebot__zeit { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

.meinangebot__aktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
}
.meinangebot__aktionen .btn { min-height: 44px; }
.meinangebot__weg { color: var(--danger); }

/* ==========================================================================
   8c. Die Zustaende
   ==========================================================================
   `.immostatus` gibt es seit 7b.1 fuer Inseratszustaende; die
   Angebotszustaende reihen sich mit eigenen Modifikatoren ein, statt eine
   zweite Marke zu erfinden.
   ========================================================================== */

.immostatus--leading     { background: var(--forest-soft); color: var(--forest); }
.immostatus--outbid      { background: var(--surface-soft); color: var(--text-muted); }
.immostatus--withdrawn   { background: var(--surface-soft); color: var(--text-muted); }
.immostatus--declined    { background: var(--danger-soft); color: var(--danger); }
.immostatus--negotiation { background: var(--enzian-soft); color: var(--enzian); }
.immostatus--active      { background: var(--surface-soft); color: var(--text-muted); }

/* Die Zahl der ungesehenen Angebote in der eigenen Inseratsliste. */
.meineliste__neu {
  display: inline-block; margin-left: .3rem;
  padding: .05rem .35rem; border-radius: var(--radius-pill);
  background: var(--brand-orange); color: var(--brand-navy);
  font-size: var(--fs-micro); font-weight: 800;
}

@media (max-width: 560px) {
  .immoangebot { padding: var(--space-3); }
  .angebot__aktionen .btn,
  .meinangebot__aktionen .btn { flex: 1 1 9rem; }
}