/* Creator-Bereich, Seite Anfragen (03.09. abends). Zwei Spalten wie ein Chat:
   links die Liste, rechts die gewaehlte Anfrage mit Fakten, Freigaben und
   Verlauf. Unter 44rem Breite erst die Liste, dann die Anfrage mit
   „Zurueck". Baut auf board.css und creator.css auf (Farben, Knoepfe,
   Verlauf, Zitat), ergaenzt nur das Geruest dieser Seite. Kein Inline-Stil,
   die Seite laeuft unter einer strengen Inhaltsrichtlinie. */

.anfragen-seite { display: grid; gap: 1rem; }
.anfragen-seite h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.anfragen-seite h3 { margin: 0 0 0.7rem; font-size: 0.9375rem; }
.anfragen-seite p { margin: 0; line-height: 1.5; }
.anfragen-seite .kicker { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--leise, #888); }
.anfragen-seite .stand-offen > .kicker { color: var(--gelb, #F4CE14); }
.anfragen-seite .stand-angenommen > .kicker, .anfragen-seite .stand-zugestimmt > .kicker { color: #7ee787; }
.anfragen-seite .zeile { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.anfragen-seite form .zeile { margin-top: 1rem; }
.anfragen-seite .haken { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.9rem; color: #aaa; font-size: 0.9rem; cursor: pointer; }
.anfragen-seite .haken input { accent-color: var(--gelb, #F4CE14); margin: 0.2rem 0 0; flex: none; }
.anfragen-seite .antwort label { display: block; }
.anfragen-seite .antwort label > span { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise, #888); margin-bottom: 0.3rem; }
.anfragen-seite textarea { width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; background: #0b0b0b; color: #fff; border: 1px solid #333; border-radius: 0.5rem; font: inherit; resize: vertical; }
.anfragen-seite textarea:focus { outline: 2px solid var(--gelb, #F4CE14); outline-offset: 1px; }
.anfragen-seite .fehler { margin-top: 0.6rem; }
.anfragen-seite .meta { color: var(--leise, #888); font-size: 0.8125rem; }

/* Vorschlaege von uns, ueber der Liste in voller Breite */
.anfragen-angebote:empty { display: none; }
.angebote { background: var(--karte, #141414); border: 1px solid var(--linie, #222); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.angebote > .leer { margin-top: 0.4rem; }
.angebot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie, #222); }
.angebot h3 { margin: 0.2rem 0 0.6rem; font-size: 1.05rem; }
.angebot .zitat { max-width: 65ch; }
.angebot .zitat p { margin: 0.4rem 0; }
.angebot > .zeile { margin-top: 0.9rem; }

/* Zwei Spalten */
.anfragen-raster { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.anfragen-liste, .anfragen-detail { background: var(--karte, #141414); border: 1px solid var(--linie, #222); border-radius: 0.75rem; min-width: 0; }

/* Liste links */
.anfragen-liste { padding: 1.1rem 0 0.5rem; position: sticky; top: 1rem; }
.anfragen-liste .liste-kopf { padding: 0 1.1rem 0.9rem; }
.anfragen-liste .leer { padding: 0 1.1rem 0.6rem; }
.anfragen-liste .eintraege { list-style: none; margin: 0; padding: 0; }
.eintrag { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linie, #222); border-left: 3px solid transparent; color: inherit; font: inherit; padding: 0.8rem 1.1rem 0.8rem calc(1.1rem - 3px); cursor: pointer; }
.eintrag:hover { background: rgba(255, 255, 255, 0.03); }
.eintrag:focus-visible { outline: 2px solid var(--gelb, #F4CE14); outline-offset: -2px; }
.eintrag.an { background: #1b1b1b; border-left-color: var(--gelb, #F4CE14); }
.eintrag .titel { display: block; font-weight: 600; line-height: 1.3; margin: 0.2rem 0 0.25rem; overflow-wrap: anywhere; }
.eintrag .meta { display: block; }
.eintrag.stand-abgelehnt .titel, .eintrag.stand-zurueckgezogen .titel, .eintrag.stand-erledigt .titel { color: #bbb; font-weight: 500; }
.anfragen-liste .hinweis { margin: 0.4rem 0 0; padding: 0.9rem 1.1rem 0.4rem; border-top: 1px solid var(--linie, #222); color: var(--leise, #888); font-size: 0.875rem; }

/* Anfrage rechts */
.anfragen-detail { padding: 1.25rem 1.5rem 1.5rem; min-height: 12rem; }
.anfragen-detail .waehlen { padding: 1rem 0; }
.anfragen-detail .zurueck { display: none; background: none; border: 0; color: var(--gelb, #F4CE14); font: inherit; font-size: 0.9375rem; padding: 0.2rem 0; margin: 0 0 0.9rem; cursor: pointer; }
.anfrage-kopf h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 0.25rem 0 0.35rem; overflow-wrap: anywhere; }
.anfrage-kopf > .meta { margin: 0 0 1rem; font-size: 0.875rem; }
.anfrage-kopf .beschreibung { margin: 0 0 1rem; max-width: 65ch; white-space: pre-line; color: #ddd; }
.fakten { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); margin: 0 0 1rem; border-top: 1px solid var(--linie, #222); }
.fakten dt, .fakten dd { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--linie, #222); }
.fakten dt { color: var(--leise, #888); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; padding-right: 1.2rem; align-self: center; }
.fakten dd { overflow-wrap: anywhere; line-height: 1.45; }
.anfrage-kopf .hinweis { margin: 0 0 0.4rem; padding: 0.7rem 0.9rem; max-width: 65ch; border: 1px dashed rgba(244, 206, 20, 0.45); border-radius: 0.5rem; color: var(--gelb, #F4CE14); font-size: 0.875rem; }
.anfrage-kopf .entscheidung { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie, #222); }

.anfrage-freigaben, .anfrage-verlauf { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie, #222); }
.freigaben-liste { list-style: none; margin: 0; padding: 0; }
.freigaben-liste li { display: flex; gap: 0.6rem 1rem; align-items: center; flex-wrap: wrap; padding: 0.55rem 0; border-top: 1px solid var(--linie, #222); }
.freigaben-liste li:last-child { border-bottom: 1px solid var(--linie, #222); }
.freigaben-liste li.weg { color: var(--leise, #888); }
.freigaben-liste .fg-was { font-weight: 500; overflow-wrap: anywhere; }
.freigaben-liste .meta { flex: 1 1 10rem; }
.anfrage-freigaben .geschlossen { margin-top: 0.8rem; }

/* Freigabe in einem Schritt */
.freigabe-form { margin-top: 1.2rem; }
.freigabe-form h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.freigabe-form > .meta { margin: 0 0 0.8rem; font-size: 0.875rem; max-width: 65ch; }
.fg-galerien { border: 1px solid var(--linie, #222); border-radius: 0.6rem; overflow: hidden; }
.fg-galerie { border-top: 1px solid var(--linie, #222); }
.fg-galerie:first-child { border-top: 0; }
.fg-galerie.ganz > .fg-zeile { background: #1d1c10; }
.fg-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; }
.fg-haken { display: flex; align-items: center; gap: 0.7rem; margin: 0; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.fg-haken input { width: 1.1rem; height: 1.1rem; accent-color: var(--gelb, #F4CE14); margin: 0; flex: none; }
.fg-name { display: flex; flex-direction: column; min-width: 0; }
.fg-name b { font-weight: 500; overflow-wrap: anywhere; }
.fg-einzeln { flex: none; }
.fg-galerie .auswahl { margin: 0; padding: 0.2rem 0.8rem 0.8rem; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.fg-galerie.ganz .auswahl { opacity: 0.45; }
.fg-galerie .auswahl .leer { grid-column: 1 / -1; padding: 0.2rem 0 0.4rem; }
.fg-bild { background: #111; }
.fg-video { display: grid; place-items: center; width: 100%; height: 100%; background: #222; color: #ccc; font-size: 1.4rem; }
.fg-frei { position: absolute; right: 0.4rem; top: 0.4rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gelb, #F4CE14); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); }
.fg-stand { margin: 0.7rem 0 0; color: var(--leise, #888); font-size: 0.875rem; }
.fg-stand.an { color: var(--gelb, #F4CE14); }
.freigabe-form .zitat { margin: 1rem 0 0.2rem; max-width: 65ch; font-size: 0.9375rem; }
.freigabe-form .zitat p { margin: 0.4rem 0; }

/* Verlauf mit Eingabe am Ende */
.anfrage-verlauf .verlauf { margin: 0; }
.anfrage-verlauf .leer { margin: 0.2rem 0; }
.anfrage-verlauf .antwort { margin-top: 1.1rem; }

/* Schmal: erst die Liste, nach dem Antippen die Anfrage mit „Zurueck" */
@media (max-width: 44rem) {
  .anfragen-raster { grid-template-columns: minmax(0, 1fr); }
  .anfragen-liste { position: static; }
  .anfragen-seite .anfragen-detail { display: none; }
  .anfragen-seite.detail-offen .anfragen-detail { display: block; }
  .anfragen-seite.detail-offen .anfragen-liste, .anfragen-seite.detail-offen .anfragen-angebote { display: none; }
  .anfragen-detail .zurueck { display: inline-block; }
  .anfragen-detail, .angebote { padding: 1rem 1.1rem 1.25rem; }
  .anfrage-kopf h2 { font-size: 1.3rem; }
  /* Beschriftung ueber dem Wert statt daneben, die Beschriftungen sind
     fuer eine schmale Spalte zu lang. */
  .fakten { grid-template-columns: minmax(0, 1fr); }
  .fakten dt { padding: 0.6rem 0 0.1rem; border-bottom: 0; }
  .fakten dd { padding: 0 0 0.6rem; }
  .fg-galerie .auswahl { grid-template-columns: repeat(3, 1fr); }
}