/* ==========================================================================
   MUNTA — MARKTPLATZ
   Eigene Datei seit Phase 7.1 (Architekturregel 4 aus Abschnitt 98b).

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

   Was hier NICHT steht: Buttons (.btn), Formfelder (.field), Chips
   (.filterchip), Typografie, Farben, Abstaende, Radien, Fokus. Die bleiben
   zentral in `munta.css`. Hier stehen ausschliesslich marktplatzeigene
   Layouts - alle Klassen tragen `markt`, `mein` oder `bild` im Namen.

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

   Anders als bei Immobilien (grosse Zeilen) ist der Marktplatz ein
   Kachelraster: Wer eine Kleinanzeigenliste durchsieht, ueberfliegt Bilder
   und Preise, statt Zeile fuer Zeile zu lesen. Auf dem Telefon werden
   daraus zwei schmale Spalten - eine einzelne Spalte macht aus zwanzig
   Inseraten eine Rolltreppe.

   Der PREIS ist nach dem Titel das groesste Element. Er ist der Grund,
   warum jemand klickt oder weiterscrollt.
   ========================================================================== */

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

/* --- Die Filter sind zugeklappt (A-006, 16.08.2026) -------------------

   Acht Felder standen vor den Inseraten und fuellten den Bildschirm.
   Jetzt stehen sie hinter einer Zeile, die man aufklappt — sichtbar,
   aber nicht im Weg. Ein Marktplatz muss zuerst zeigen, was er hat.

   `<details>` braucht dafuer kein Skript. Der Pfeil, den der Browser von
   sich aus davorsetzt, weicht einem eigenen Zeichen: Der voreingestellte
   ist auf jeder Plattform ein anderer und passt zu keinem.              */
.marktfilter {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.marktfilter__auf {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none;
  font-weight: 650; font-size: var(--fs-md);
  border-radius: var(--radius-sm);
}
.marktfilter__auf::-webkit-details-marker { display: none; }
.marktfilter__auf:hover { background: var(--surface-soft); }
.marktfilter__auf:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: -2px; }

.marktfilter__icon {
  width: 18px; height: 18px; flex: none;
  color: var(--brand-orange);
  transition: transform .15s ease;
}
.marktfilter[open] .marktfilter__icon { transform: rotate(90deg); }

/* Steht ein Filter, sagt es die Zeile — sonst wundert man sich ueber
   eine kurze Liste, ohne den Grund zu sehen. */
.marktfilter__marke {
  margin-left: auto;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange-dark);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}

.marktsuche {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: end;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.marktsuche .field { margin: 0; }

/* Das Suchfeld darf breiter sein als ein Auswahlfeld - es traegt den
   Begriff, alles andere schraenkt nur ein. */
.marktsuche__suche { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .marktsuche__suche { grid-column: span 2; }
}

.marktsuche__aktionen {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}

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

/* ==========================================================================
   2. Das Kachelraster
   ==========================================================================
   Zwei Spalten auf dem Telefon, dann so viele, wie bei 15rem Mindestbreite
   hineinpassen. Unter 15rem wird der Preis zweizeilig, und ein umgebrochener
   Preis ist schwerer zu lesen als ein kleineres Bild.
   ========================================================================== */

.marktgitter {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

@media (min-width: 560px) {
  .marktgitter { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

.marktkarte {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.marktkarte__link {
  display: block; color: inherit; text-decoration: none;
  height: 100%;
}

.marktkarte__link:hover .marktkarte__titel { text-decoration: underline; }

/* Ein festes Seitenverhaeltnis: Sonst springt das Raster bei jedem Bild,
   und ein Hochformat schiebt seine Nachbarn auseinander. */
.marktkarte__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  display: flex; align-items: center; justify-content: center;
}

.marktkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.marktkarte__leericon { width: 2rem; height: 2rem; color: var(--text-muted); opacity: .5; }

/* „Reserviert" und „Gesucht" stehen AUF dem Bild - sie gehoeren zum
   Zustand des Inserats, nicht zu seinen Angaben. */
.marktkarte__fahne {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem;
  padding: .15rem .5rem;
  background: var(--gold-soft); color: var(--text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny); font-weight: 600;
}

.marktkarte__fahne--gesuch { background: var(--enzian-soft); }

.marktkarte__text { padding: var(--space-3); }

.marktkarte__meta {
  margin: 0 0 .25rem;
  font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}

.marktkarte__titel {
  margin: 0 0 .35rem;
  font-size: var(--fs-base); line-height: 1.3;
  /* Zwei Zeilen, dann Schluss: Ein sechszeiliger Titel schiebt den Preis
     aus der Karte, und der Preis ist der wichtigere Teil. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.marktkarte__preis {
  margin: 0 0 .35rem;
  font-size: var(--fs-lg); font-weight: 700;
  /* Ein Preis darf nie abgeschnitten werden - lieber umbrechen. */
  overflow-wrap: anywhere;
}

.marktkarte__fuss {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
  align-items: center;
  font-size: var(--fs-xs); color: var(--text-muted);
}

.marktkarte__ort { display: inline-flex; align-items: center; gap: .2rem; }
.marktkarte__pin { width: .85rem; height: .85rem; }

.marktkarte__anbieter { margin-inline-start: auto; }

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

.marktbild {
  margin: var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-soft);
}
.marktbild img { width: 100%; height: auto; display: block; }

.marktgalerie {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}
.marktgalerie img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-xs);
}

.marktpreis {
  margin: 0 0 var(--space-2);
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  overflow-wrap: anywhere;
}

.marktzustand {
  margin: 0 0 var(--space-3);
  font-weight: 600; color: var(--warning);
}

.marktdaten {
  display: grid; gap: var(--space-2) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--border);
}
.marktdaten dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.marktdaten dd { margin: .1rem 0 0; font-weight: 600; display: flex; align-items: center; gap: .25rem; }
.marktdaten__pin { width: .9rem; height: .9rem; }

.markttext {
  margin: 0 0 var(--space-4);
  line-height: 1.65;
  /* Benutzertext kann eine 60 Zeichen lange „Wortkette" enthalten. */
  overflow-wrap: anywhere;
}

/* Der Platz, an dem in 7.2 der Kontaktweg entsteht. Bis dahin steht hier
   ein Satz - kein Knopf, der nichts tut. */
.marktkontakt {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}
.marktkontakt__text { margin: 0; font-weight: 600; }
.marktkontakt__klein { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ================== Merken (7.3) ==================

   Der Zustand steht im Text, nicht nur in der Farbe: "Merken" / "Gemerkt".
   Das gefuellte Herz ist die zusaetzliche Bestaetigung, nicht die einzige.

   Die Trefferflaeche ist immer mindestens 44 px - auch in der kompakten
   Fassung auf der Kachel. Ein 20-px-Herz trifft am Telefon niemand. */
.merken { margin: 0; }

.merken__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem .9rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-md); font-weight: 700;
  cursor: pointer;
}
.merken__knopf:hover { background: var(--surface-soft); }

.merken__icon { width: 1.05rem; height: 1.05rem; }

/* Gemerkt: gefuelltes Herz in Munta-Orange, dazu der Text "Gemerkt". */
.merken__knopf--an { border-color: var(--brand-orange); color: var(--orange-dark); }
.merken__knopf--an .merken__icon { fill: currentColor; }

/* Auf der Kachel sitzt der Knopf oben rechts UEBER dem Bild - dort, wo
   ihn der Daumen erreicht, ohne den Link zum Inserat zu treffen. */
.merken--klein {
  position: absolute;
  inset-block-start: .5rem; inset-inline-end: .5rem;
  z-index: 2;
}

.merken--klein .merken__knopf {
  min-height: 44px; min-width: 44px; padding: .5rem;
  box-shadow: var(--shadow-float);
  border-radius: var(--radius-pill);
}

/* Auf der Kachel traegt das Symbol - der Text bleibt fuer
   Vorleseprogramme erhalten (aria-label am Knopf). */
.merken--klein .merken__text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.marktkarte { position: relative; }
.marktmerken { margin: 0 0 var(--space-4); }
.marktmerken .merken__knopf { width: 100%; min-height: 48px; }

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

/* Ein Favorit, dessen Inserat nicht mehr sichtbar ist. */
.meinzeile--weg { background: var(--surface-soft); color: var(--text-muted); }
.meinzeile__weg { margin: .2rem 0 0; font-size: var(--fs-md); }

/* ================== Kontakt (7.2) ================== */

.marktkontakt .btn--breit { width: 100%; justify-content: center; min-height: 48px; }

/* Die Inseratskarte im Gespraech und ueber dem Kontaktformular.
   Kompakt: Der Chat ist der Hauptinhalt, die Karte sagt nur, worum es
   geht. */
.marktkontext {
  display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.marktkontext--klein { padding: var(--space-2); grid-template-columns: 3rem 1fr; }

.marktkontext--weg {
  grid-template-columns: 1fr;
  background: var(--surface-soft);
  color: var(--text-muted);
}
.marktkontext__weg { margin: 0; font-size: var(--fs-md); }

.marktkontext__bild {
  aspect-ratio: 1; border-radius: var(--radius-xs); overflow: hidden;
  background: var(--surface-soft);
  display: flex; align-items: center; justify-content: center;
}
.marktkontext__bild img { width: 100%; height: 100%; object-fit: cover; }
.marktkontext__leericon { width: 1.3rem; height: 1.3rem; color: var(--text-muted); opacity: .5; }

.marktkontext__titel { margin: 0; font-weight: 700; line-height: 1.3; }
.marktkontext__preis { margin: .1rem 0 0; font-weight: 700; font-size: var(--fs-base); overflow-wrap: anywhere; }
.marktkontext__zeile { margin: .15rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.marktkontext__zustand { margin: .25rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--warning); }
.marktkontext__link { margin: .4rem 0 0; }
.marktkontext__link .btn { min-height: 44px; }

.anfrageform { margin-block-start: var(--space-3); }
.anfrageform textarea { font-size: var(--fs-base); }
/* Der Senden-Knopf muss auf dem Telefon ueber der Tastatur erreichbar
   bleiben - deshalb steht er im normalen Fluss unter dem Feld und nicht
   fixiert am unteren Rand. */
.anfrageform .formaktionen .btn { min-height: 48px; }

.formhinweis--kasten {
  padding: var(--space-3);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.formhinweis--kasten p { margin: 0 0 .5rem; font-size: var(--fs-md); }
.formhinweis--kasten p:last-child { margin-bottom: 0; }

.markthinweis {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}
.markthinweis p { margin: 0; }
.markthinweis__icon { width: 1.2rem; height: 1.2rem; flex: none; color: var(--warning); }

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

.meldelink { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   4. Meine Inserate
   ==========================================================================
   Hier ist eine Liste richtig und kein Raster: Es geht ums Verwalten, und
   jede Zeile traegt vier bis sechs Aktionen.
   ========================================================================== */

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

.meinzeile {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  /* Bezugspunkt fuer die Trefferflaeche des Titels (RC-1a). */
  position: relative;
}

@media (min-width: 760px) {
  .meinzeile { grid-template-columns: 6rem 1fr auto; align-items: center; }
}

.meinzeile__bild {
  aspect-ratio: 1; background: var(--surface-soft);
  border-radius: var(--radius-xs); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.meinzeile__bild img { width: 100%; height: 100%; object-fit: cover; }
.meinzeile__icon { width: 1.4rem; height: 1.4rem; color: var(--text-muted); opacity: .5; }

.meinzeile__meta {
  margin: 0 0 .25rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-size: var(--fs-xs); color: var(--text-muted);
}

.meinzeile__titel { margin: 0 0 .2rem; font-size: var(--fs-base); }
.meinzeile__titel a { color: inherit; }

/*
   ================== Die ganze Zeile oeffnet das Inserat (RC-1a) ========

   Der Titel allein war 23 px hoch. Ihn auf 44 px aufzupolstern haette die
   Zeile auseinandergezogen, ohne dass jemand etwas davon gehabt haette -
   getroffen werden soll ohnehin die ganze Kachel. Die Flaeche legt sich
   deshalb ueber die Zeile; die Knoepfe rechts liegen darueber und bleiben
   eigenstaendig anklickbar.

   Der Fokusrahmen bleibt am Titel: Wer mit der Tastatur navigiert, soll
   sehen, WAS er oeffnet, nicht einen Rahmen um die halbe Seite.
*/
.meinzeile__titel a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.meinzeile__aktionen { position: relative; z-index: 2; }
.meinzeile__preis { margin: 0; font-weight: 700; }

.meinzeile__aktionen {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.meinzeile__aktionen form { margin: 0; }

/* 44px auch fuer die kleinen Knoepfe.
   `.btn--small` ist zentral schmaler - hier stehen aber bis zu fuenf
   Aktionen nebeneinander, und wer sein Inserat auf dem Telefon verwaltet,
   trifft sonst „Verkauft" statt „Pausieren". Gemessen am 16.08.2026: 34px. */
.meinzeile__aktionen .btn,
.bildzeile__aktionen .btn,
.bildzeile__alt .btn { min-height: 44px; }

@media (min-width: 760px) {
  .meinzeile__aktionen { grid-column: auto; justify-content: flex-end; max-width: 22rem; }
}

/* Der Zustand als Chip - eine Farbe je Bedeutung, damit „Entwurf" und
   „Online" sich nicht nur im Wort unterscheiden. */
.statuschip {
  padding: .1rem .5rem; border-radius: var(--radius-pill);
  font-size: var(--fs-tiny); font-weight: 600;
  background: var(--surface-soft); color: var(--text);
}
.statuschip--published { background: var(--forest-soft); }
.statuschip--reserved  { background: var(--gold-soft); }
.statuschip--sold      { background: var(--border); }
.statuschip--paused,
.statuschip--expired   { background: var(--warning-soft); }
.statuschip--hidden    { background: var(--danger-soft); }

/* ==========================================================================
   5. Das Formular
   ========================================================================== */

.marktform { margin-block-start: var(--space-4); counter-reset: formteil; }

/*
   ================== Die Kästen (13.09.2026) ==================

   Die Überschrift eines <fieldset> ist ein <legend>, und das zeichnet der
   Browser AUF die Rahmenlinie - die Titel standen deshalb halb aus dem
   Kasten heraus, und jeder Kasten sah ein wenig verrutscht aus. Mit
   `float` + voller Breite wird das legend zu einer gewöhnlichen
   Überschrift INNERHALB des Kastens; das Element bleibt für Screenreader
   trotzdem die Beschriftung der Gruppe.

   Dazu eine Nummer je Schritt: Wer weiß, dass es sechs sind und er bei
   vier steht, bricht seltener ab.
*/
.formteil {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;                  /* fieldset laesst sich sonst nicht schmaeler als sein Inhalt */
  counter-increment: formteil;
}
.formteil > legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 var(--space-4); padding: 0;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.3;
  color: var(--text);
}
.formteil > legend::before {
  content: counter(formteil);
  flex: none; display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--orange-soft); color: var(--orange-dark, #B35F00);
  font-size: var(--fs-sm); font-weight: 800;
}
.formteil > legend + * { clear: both; }
.formteil > legend .field__optional { font-size: var(--fs-sm); font-weight: 500; }
.formteil__titel { font-weight: 700; }
.formteil__hinweis { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

.formteil .field + .field { margin-block-start: var(--space-4); }
.formteil .field + .wahlreihe { margin-block-start: var(--space-4); }
.marktform .field__hinweis,
.marktform .field__hint { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.marktform .field label { color: var(--text); }
.marktform textarea { width: 100%; min-height: 9rem; line-height: 1.55; resize: vertical; }

@media (max-width: 560px) {
  .formteil { padding: var(--space-4); }
  .wahlreihe .wahl { flex: 1 1 auto; justify-content: center; }
}

/* ================== KI-Hilfe (13.09.2026) ================== */

/* `.btn` setzt `display` und schlaegt damit das `hidden`-Attribut - ohne
   diese Zeile stuende „Rueckgaengig" schon da, bevor es etwas rueckgaengig
   zu machen gibt. */
.ki-start[hidden], .marktform [hidden], .ki-start [hidden] { display: none !important; }

.ki-start {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #FFF4E5 0%, #FFFFFF 70%);
  border: 1px solid rgba(254,138,0,.35);
}
.ki-start__titel { margin: 0 0 .3rem; font-size: var(--fs-lg); font-weight: 800; }
.ki-start__text  { margin: 0 0 var(--space-4); color: var(--text-muted); line-height: 1.5; }
.ki-start .fotoknoepfe { margin: 0; }

.ki-status {
  display: flex; align-items: center; gap: .6rem;
  margin: var(--space-3) 0 0; padding: .6rem .8rem;
  border-radius: var(--radius-sm); background: var(--surface-soft);
  font-size: var(--fs-md); line-height: 1.45;
}
.ki-status[hidden] { display: none; }
.ki-status--ok     { background: var(--forest-soft); }
.ki-status--fehler { background: var(--danger-soft, #F8DEDE); }
.ki-status img { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-xs); flex: none; }
.ki-rad {
  flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15); border-top-color: var(--brand-orange);
  animation: kiRad .8s linear infinite;
}
@keyframes kiRad { to { transform: rotate(360deg); } }

.ki-fragen { margin: var(--space-3) 0 0; padding: .7rem .9rem; list-style: none;
  background: #FFF8EC; border-left: 3px solid var(--brand-orange); border-radius: var(--radius-xs);
  font-size: var(--fs-sm); line-height: 1.5; }
.ki-fragen[hidden] { display: none; }
.ki-fragen li + li { margin-top: .2rem; }
.ki-fragen b { display: block; margin-bottom: .2rem; }

.ki-schreiben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ki-knopf { font-weight: 700; }
.ki-gefuellt { box-shadow: 0 0 0 3px rgba(254,138,0,.28); transition: box-shadow 1.5s ease; }
.ki-titelvorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; font-size: var(--fs-sm); }
.ki-titelvorschlag[hidden] { display: none; }

.wahlreihe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); }

/* 44px Mindesthoehe: Eine Auswahl, die man auf dem Telefon dreimal treffen
   muss, ist keine Auswahl. */
.wahl {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  cursor: pointer;
}
.wahl:has(input:checked) { border-color: var(--brand-orange); background: var(--orange-soft); }
.wahl--block { display: flex; border-radius: var(--radius-sm); align-items: flex-start; }

/* Auch Auswahlfelder tragen 16px.
   Ein Radio zoomt zwar nicht wie ein Textfeld, aber die Regel „kein
   Formularelement unter 16px" soll ohne Ausnahmeliste pruefbar bleiben -
   eine Ausnahme heute ist die Ausnahme, die morgen ein Textfeld trifft. */
.wahl input,
.marktform input,
.marktform select,
.marktform textarea,
.marktsuche input,
.marktsuche select,
.bildupload input[type="file"],
.bildupload input,
.bildzeile__alt input { font-size: var(--fs-base); }

.field__fehler { margin: .3rem 0 0; color: var(--danger); font-size: var(--fs-sm); }
.field--klein { max-width: 12rem; }

.formaktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.formhinweis { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ==========================================================================
   6. Die Bilderseite
   ========================================================================== */

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


/* --- Die zwei Fotowege ------------------------------------------------

   Verschoben nach `munta.css` (A-015, 17.08.2026): Dasselbe Muster steht
   jetzt auch im Community-Formular, und das laedt `marketplace.css` nicht.
   Eine Kopie waere die schlechtere Loesung — zwei Fassungen desselben
   Knopfes laufen frueher oder spaeter auseinander.                      */

/* Die Rechtebestaetigung ist keine Fussnote, sondern die Bedingung. */
.rechtefeld {
  align-items: flex-start; gap: .75rem;
  padding: var(--space-3);
  min-height: 56px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.rechtefeld input { width: 24px; height: 24px; flex: none; margin-block-start: .1rem; }

.fotostatus { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: .35rem; }
.fotostatus__zeile { font-size: var(--fs-md); padding: .45rem .6rem; border-radius: var(--radius-xs); }
.fotostatus__zeile--laeuft  { background: var(--surface-soft); }
.fotostatus__zeile--fertig  { background: var(--forest-soft); }
.fotostatus__zeile--fehler  { background: var(--danger-soft); }
.fotostatus__zeile--hinweis { background: var(--warning-soft); }

.bildzeile--neu { border-color: var(--forest); }
.bildzeile__neu { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

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

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

.bildzeile__vorschau {
  width: 5rem; height: 5rem; object-fit: cover;
  border-radius: var(--radius-xs); background: var(--surface-soft);
}

.bildzeile__cover { margin: 0 0 .3rem; font-weight: 700; font-size: var(--fs-xs); color: var(--forest); }
.bildzeile__alt .btn { margin-block-start: .4rem; }

.bildzeile__aktionen {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.bildzeile__aktionen form { margin: 0; }

.seitenlead { margin: 0 0 var(--space-4); color: var(--text-muted); }

/* ==========================================================================
   Band „Bereits verkauft" / „Derzeit reserviert" quer über dem Bild (13.09.2026)

   Schräg über die Bildmitte, damit man es in der Liste im Vorbeiscrollen
   sieht - eine kleine Fahne in der Ecke hat man bei einem Fahrrad unter
   zwanzig anderen übersehen. Das Bild bleibt erkennbar, es wird nur leicht
   abgedunkelt.
   ========================================================================== */

.marktkarte__bild,
.marktbild { position: relative; overflow: hidden; }

.marktband {
  position: absolute; z-index: 2;
  left: -20%; right: -20%; top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  padding: .35rem 0;
  text-align: center;
  font-size: .85rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 21, 49, .35);
  pointer-events: none;
}
.marktband--verkauft   { background: rgba(163, 40, 27, .92); }
.marktband--reserviert { background: rgba(217, 157, 43, .95); color: #2B1B00; }
.marktband--gross      { font-size: clamp(1rem, 3.2vw, 1.6rem); padding: .55rem 0; }

.marktkarte__bild:has(.marktband--verkauft) img,
.marktbild:has(.marktband--verkauft) img { filter: grayscale(.45) brightness(.9); }