/* ═══════════════════════════════════════════════════════════════════════════
   EINGABEFELDER DER COMMUNITY

   Vorher trugen Marktplatz und Forum getrennte Klassen für dieselbe Sache:
   .f-ctrl hier, .p-inp dort. Beide beschrieben ein Textfeld, unterschieden
   sich aber in Höhe, Innenabstand und Schrift — deshalb sahen die beiden
   Seiten verschieden aus, obwohl sie dasselbe taten. Genau so driften
   Oberflächen mit der Zeit auseinander.

   Diese Datei ist die eine Stelle, an der ein Eingabefeld beschrieben wird.
   Sie gilt für Marktplatz, Forum und Angebotsseite; die alten Klassen zeigen
   auf dieselben Regeln, damit vorhandenes Markup weiterläuft.

   Gebaut für den dunklen Grund der Community-Seiten.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FELDGRUPPE ──────────────────────────────────────────────────────────── */
.bc-feld { margin-bottom: 18px; }

/* Kopfzeile über dem Feld: Beschriftung links, Zeichenzähler rechts.
   Die Beschriftungen standen in 9–11px Versal-Mono — technisch lesbar,
   aber es ließ die Spalte wie ein Konfigurationsdialog wirken. */
.bc-feld-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.bc-label {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: .1px;
  color: rgba(255,255,255,.62);
}

/* Pflichtfeld-Punkt. Er verschwindet, sobald etwas im Feld steht — man
   sieht also beim Ausfüllen, was noch fehlt, statt es erst beim Absenden
   zu erfahren. Das Verhalten steckt in felder.js. */
.bc-pflicht {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #4ade80; margin-left: 6px; vertical-align: middle;
  transition: opacity .2s, transform .2s;
}
.bc-pflicht.ist-erfuellt { opacity: 0; transform: scale(.4); }

/* Zeichenzähler. Titel und Beschreibung haben Obergrenzen, die bisher
   niemand sah — man wurde beim Tippen einfach abgeschnitten. */
.bc-zaehler {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px; color: rgba(255,255,255,.28);
  transition: color .2s; white-space: nowrap;
}
.bc-zaehler.ist-knapp { color: #fbbf24; }
.bc-zaehler.ist-voll  { color: #f87171; }

/* ── DAS FELD SELBST ─────────────────────────────────────────────────────── */
.bc-ctrl,
.f-ctrl,
.p-inp {
  width: 100%; box-sizing: border-box;
  background: #121a15;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #f2f4f2;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.bc-ctrl::placeholder,
.f-ctrl::placeholder,
.p-inp::placeholder { color: rgba(255,255,255,.3); }

/* Der Fokus war ein kaum sichtbarer Rahmen bei 35 % Grün. Jetzt färbt
   sich die Kante deutlich und der Grund hebt sich leicht — man sieht auf
   einen Blick, wo man gerade tippt. */
.bc-ctrl:focus,
.f-ctrl:focus,
.p-inp:focus {
  border-color: #4ade80;
  background: #161f19;
}

textarea.bc-ctrl,
textarea.f-ctrl,
textarea.p-inp { resize: vertical; min-height: 92px; line-height: 1.6; }

select.bc-ctrl,
select.f-ctrl { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}

/* ── SEGMENTIERTE AUSWAHL ────────────────────────────────────────────────
   Für „Art": Tausch, Verkauf, Beides. Vorher drei einzeln umrandete
   Knöpfe nebeneinander — drei Kästen, die um Aufmerksamkeit stritten.
   Jetzt ein Block, in dem das Gewählte hervorgehoben ist. Die Radio-
   Felder darunter bleiben unverändert, es ist nur die Darstellung. */
.bc-segment {
  display: flex; gap: 3px; padding: 3px;
  background: rgba(255,255,255,.05);
  border-radius: 11px;
}
.bc-segment .tt-opt { flex: 1; position: relative; }
.bc-segment .tt-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bc-segment .tt-label,
.tt-label {
  display: block; text-align: center; cursor: pointer;
  padding: 9px 4px; border-radius: 8px; border: none;
  background: transparent;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,.45);
  transition: background .15s, color .15s;
}
.bc-segment .tt-label:hover { color: rgba(255,255,255,.75); }
.bc-segment .tt-opt input:checked + .tt-label,
.tt-opt input:checked + .tt-label {
  background: rgba(74,222,128,.16);
  color: #4ade80;
  border: none;
}

/* ── ABLEGEFLÄCHE FÜR BILDER ─────────────────────────────────────────────── */
.c-drop {
  border: 1px dashed rgba(255,255,255,.12); border-radius: 10px;
  padding: 18px; text-align: center; cursor: pointer; position: relative;
  background: rgba(255,255,255,.02); transition: border-color .18s, background .18s;
}
.c-drop:hover, .c-drop.drag { border-color: #4ade80; background: rgba(74,222,128,.04); }
.c-drop-text { font-size: 13px; color: rgba(255,255,255,.42); }
.c-drop-text strong { color: #4ade80; font-weight: 500; }

/* ── KNÖPFE ──────────────────────────────────────────────────────────────── */
.bc-knopf-haupt {
  width: 100%; padding: 13px 20px; border: none; border-radius: 10px;
  background: #4ade80; color: #0b120e;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.bc-knopf-haupt:hover { background: #36c96a; }