/* ============================================================================
 * tc-fehlerbericht — „Fehler melden" bei Meisterin Grubb (#780, 25.09.2026)
 * ----------------------------------------------------------------------------
 * Zwei Gestalten, eine Datei:
 *   1. Das Formular im Fenster (js/ui/fehler-melden.js, FehlerMelden.oeffnen)
 *      — gebaut aus tc-form-group, tc-choice und tc-upload-drop. Eigene
 *      Regeln hat hier nur, was es dort nicht gibt: die Fragen als fieldset
 *      ohne Rahmen, die Vorschau der Fotos und „Was automatisch mitgeht".
 *   2. Der Steckbrief am Zettel (`--zettel`, FehlerMelden.steckbriefHtml):
 *      Wo, Gerät, Browser, Fotos, Fehlerspur — für den Bauherrn und den
 *      Melder selbst, sonst für niemanden (api/untergrund.php,
 *      ugBugNachAussen).
 *
 * Struktur:
 *   form.tc-fehlerbericht
 *     .tc-fehlerbericht__vorwort
 *     .tc-form-group … / fieldset.tc-fehlerbericht__frage > legend + .tc-choice
 *     .tc-upload-drop + .tc-fehlerbericht__bilder > .tc-fehlerbericht__bild(img + __weg)
 *     details.tc-fehlerbericht__technik > summary(__zahl) + __steckbrief + __spur
 *     .tc-fehlerbericht__meldung(--fehler | --hinweis)
 *   .tc-fehlerbericht.tc-fehlerbericht--zettel
 *     dl.tc-fehlerbericht__steckbrief (dt + dd)
 *     .tc-fehlerbericht__bilder > button.tc-fehlerbericht__bild > img
 *     details.tc-fehlerbericht__technik > ol.tc-fehlerbericht__spur
 *
 * Library: library-community.html#fehlerbericht.
 * ========================================================================== */

.tc-fehlerbericht {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
  min-width: 0;
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
}
/* Die Formgruppen bringen einen eigenen Abstand nach unten mit; hier regelt
   das `gap`, sonst stünden zwei Abstände übereinander. */
.tc-fehlerbericht > .tc-form-group { margin-bottom: 0; }

.tc-fehlerbericht__vorwort {
  margin: 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal, 1.5);
}

/* Eine Frage mit Auswahl: ein fieldset ohne Browser-Rahmen. ⚠️ Das Raster
   steckt im tc-choice darin, nicht am fieldset — ein fieldset mit
   display: grid legt die legend als Zelle daneben (§7a-4). */
.tc-fehlerbericht__frage {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tc-fehlerbericht__frage > legend {
  display: block;
  padding: 0;
  margin-bottom: var(--tc-space-2);
}
/* Vier Antworten stehen immer zwei mal zwei — am Handy wie am Schreibtisch.
   Mit `auto-fill` stand am Schreibtisch eine Antwort allein in der zweiten
   Reihe, am Handy wurden es vier Zeilen. Das Gerät (drei Antworten) ist ein
   gewöhnliches tc-choice: Die drei passen bei 375 px in eine Zeile, und
   bricht eine um, füllt sie die Zeile, statt als halbe Zelle zu stehen. */
.tc-fehlerbericht .tc-choice--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tc-fehlerbericht .tc-choice__option { min-width: 0; }
.tc-fehlerbericht__frage > .tc-form-group__help {
  display: block;
  margin-top: var(--tc-space-2);
}

.tc-fehlerbericht__freiwillig {
  margin-left: var(--tc-space-1);
  color: var(--tc-highlight);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold, 600);
  text-transform: none;
  letter-spacing: 0;
}
.tc-fehlerbericht__klein {
  display: block;
  margin: var(--tc-space-1) 0 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-xs);
  line-height: var(--tc-leading-snug, 1.35);
}
.tc-fehlerbericht .tc-upload-drop { padding: var(--tc-space-4); }
.tc-fehlerbericht .tc-upload-drop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}

/* --- Fotos: Vorschau im Formular, Daumen am Zettel ----------------------- */
.tc-fehlerbericht__bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--tc-space-2);
}
.tc-fehlerbericht__bilder[hidden] { display: none; }
.tc-fehlerbericht__bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  font: inherit;
  color: inherit;
  cursor: zoom-in;
}
.tc-fehlerbericht__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Das Kreuz bleibt ein ganzer Icon-Knopf (36 px, am Finger 44) — es sitzt
   nur in der Ecke. */
.tc-fehlerbericht__weg {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--tc-bg-overlay);
  color: var(--tc-text-strong);
}
div.tc-fehlerbericht__bild { cursor: default; }

/* --- Was automatisch mitgeht / Fehlerspur -------------------------------- */
.tc-fehlerbericht__technik {
  min-width: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-1);
}
.tc-fehlerbericht__technik > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-touch-min, 36px);
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold, 600);
  cursor: pointer;
}
.tc-fehlerbericht__zahl {
  padding: 1px 8px;
  border: 1px solid var(--tc-warning-border);
  border-radius: var(--tc-radius-full);
  background: var(--tc-warning-bg);
  color: var(--tc-warning);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-bold, 700);
}

.tc-fehlerbericht__steckbrief {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--tc-space-3);
  margin: var(--tc-space-2) 0 0;
  font-size: var(--tc-text-sm);
}
.tc-fehlerbericht__steckbrief dt {
  color: var(--tc-text-muted);
  font-size: var(--tc-text-xs);
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tc-fehlerbericht__steckbrief dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--tc-text-default);
}
.tc-fehlerbericht__steckbrief a { color: var(--tc-highlight); }

.tc-fehlerbericht__spur {
  max-height: 14rem;
  overflow: auto;
  margin: var(--tc-space-2) 0 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  list-style: none;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-base);
  font-family: var(--tc-font-mono, ui-monospace, monospace);
  font-size: var(--tc-text-xs);
  line-height: 1.45;
}
.tc-fehlerbericht__spur li { overflow-wrap: anywhere; }
.tc-fehlerbericht__spur li + li {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--tc-border-subtle);
}
.tc-fehlerbericht__spur-wann {
  display: block;
  color: var(--tc-text-muted);
}
.tc-fehlerbericht__spur-ort { color: var(--tc-text-muted); }
.tc-fehlerbericht__ua { overflow-wrap: anywhere; }

.tc-fehlerbericht__meldung {
  margin: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid var(--tc-info-border);
  border-radius: var(--tc-radius-md);
  background: var(--tc-info-bg);
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
}
.tc-fehlerbericht__meldung[hidden] { display: none; }
.tc-fehlerbericht__meldung--fehler {
  border-color: var(--tc-danger-border);
  background: var(--tc-danger-bg);
}

/* --- Der Steckbrief am Zettel ------------------------------------------- */
.tc-fehlerbericht--zettel {
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-2);
}
.tc-fehlerbericht--zettel > .tc-fehlerbericht__steckbrief { margin-top: 0; }
.tc-fehlerbericht--zettel .tc-fehlerbericht__bilder {
  grid-template-columns: repeat(auto-fill, 72px);
}

@media (prefers-reduced-motion: reduce) {
  .tc-fehlerbericht * { transition-duration: 0.01ms !important; }
}