/* ============================================================
   TVF Meldung — Formulargestaltung

   Alle Farben und Abstände kommen aus den Token des Themes. Das ist keine
   Bequemlichkeit, sondern der Grund, warum das Formular den Wechsel
   zwischen hell und dunkel ohne eigene Regeln mitmacht — und warum eine
   Änderung am Designsystem hier automatisch ankommt.

   Rückfallwerte hinter jedem var(): Ist das Plugin einmal ohne dieses
   Theme aktiv, sieht das Formular immer noch ordentlich aus statt kaputt.
   ============================================================ */

.tvfm{
  --tvfm-lueck:  var(--s5, 20px);
  --tvfm-radius: var(--r, 4px);
  color: var(--fg, #14161A);
  font-family: var(--font, system-ui, sans-serif);
}

/* ---- Gruppen ------------------------------------------- */
.tvfm-gruppe{
  border: 0; padding: 0;
  margin: 0 0 var(--s8, 48px);
}
.tvfm-gruppe + .tvfm-gruppe{
  padding-top: var(--s7, 32px);
  border-top: 1px solid var(--border, #E3E0DA);
}
.tvfm-legende{
  padding: 0;
  font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.2 var(--font, sans-serif);
  letter-spacing: -.01em;
  color: var(--fg, #14161A);
}
.tvfm-gruppe__text{
  margin-top: var(--s3, 12px);
  max-width: 54ch;
  font-size: var(--t-small, 15px);
  line-height: 1.55;
  color: var(--fg-muted, #6B7079);
}

/* ---- Raster -------------------------------------------- */
/* Zwei Spalten ab genügend Breite. Datum und Uhrzeit gehören
   nebeneinander — sie beschreiben denselben Zeitpunkt. */
.tvfm-raster{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--tvfm-lueck);
  margin-top: var(--s6, 24px);
}
.tvfm-breit{ grid-column: 1 / -1 }

/* ---- Einzelfeld ----------------------------------------
   Als Spalte mit dem Eingabefeld am unteren Ende: Stehen zwei Felder
   nebeneinander und hat eines einen längeren Hilfetext, rutschen die
   Eingabefelder sonst gegeneinander. Zwei Kästen auf verschiedener Höhe
   lesen sich als Fehler, nicht als Absicht. */
.tvfm-raster > *{ display: flex }
.tvfm-feld{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tvfm-feld .tvfm-eingabe{ margin-top: auto }
.tvfm-feld .tvfm-hilfe{ margin-bottom: 10px }

.tvfm-label{
  display: block;
  font: 600 var(--t-small, 15px)/1.4 var(--font, sans-serif);
  color: var(--fg, #14161A);
}
.tvfm-optional{
  margin-left: 8px;
  font: 400 11px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted, #6B7079);
}
.tvfm-hilfe{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted, #6B7079);
  max-width: 56ch;
}

.tvfm-eingabe{
  display: block;
  width: 100%;
  margin-top: 10px;   /* wird im Raster von margin-top:auto überschrieben */
  padding: 13px 14px;
  font: 400 16px/1.4 var(--font, sans-serif);   /* 16px: iOS zoomt sonst beim Fokus */
  color: var(--fg, #14161A);
  background: var(--bg, #FFFFFF);
  border: 1.5px solid var(--border-strong, #82888F);
  border-radius: var(--tvfm-radius);
  transition: border-color .18s var(--ease, ease), background-color .18s var(--ease, ease);
}
.tvfm-eingabe--gross{ resize: vertical; min-height: 150px }
.tvfm-eingabe::placeholder{ color: var(--fg-muted, #6B7079); opacity: .75 }
.tvfm-eingabe:hover{ border-color: var(--fg, #14161A) }

/* Auswahlfelder brauchen einen eigenen Pfeil, sobald die
   Systemdarstellung abgeschaltet wird.

   Der Pfeil sitzt auf einem Halter statt als Hintergrundbild auf dem
   Auswahlfeld: Ein Hintergrundbild macht die Fläche für jede
   Kontrastprüfung unbestimmbar. Als geformtes Pseudoelement bleibt das
   Feld messbar — und der Pfeil folgt der Schriftfarbe von selbst. */
.tvfm-halter{ position: relative; margin-top: auto }
.tvfm-halter .tvfm-eingabe{
  appearance: none;
  padding-right: 44px;
  margin-top: 0;
}
.tvfm-halter::after{
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
  color: var(--fg-muted, #6B7079);
}

/* ---- Fehlerzustand ------------------------------------- */
.tvfm-feld--fehler .tvfm-eingabe{
  border-color: var(--tvf-err, #B3261E);
  border-width: 2px;
}
.tvfm-fehler{
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 8px;
  font-size: 14px; line-height: 1.45;
  color: var(--tvf-err, #B3261E);
}
/* Im Dunkelmodus reicht das Rot der hellen Ansicht nicht.
   #FF8A80 erreicht auf Anthrazit 7,1:1. */
:root[data-theme="dark"] .tvfm-fehler{ color: #FF8A80 }
:root[data-theme="dark"] .tvfm-feld--fehler .tvfm-eingabe{ border-color: #FF8A80 }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tvfm-fehler{ color: #FF8A80 }
  :root:not([data-theme="light"]) .tvfm-feld--fehler .tvfm-eingabe{ border-color: #FF8A80 }
}

/* ---- Rückmeldung nach dem Absenden --------------------- */
.tvfm-quittung{
  margin-bottom: var(--s7, 32px);
  padding: var(--s5, 20px) var(--s6, 24px);
  border-radius: var(--r-lg, 8px);
  border: 1px solid var(--border, #E3E0DA);
  border-left-width: 4px;
  background: var(--bg-2, #F7F5F1);
}
.tvfm-quittung:focus{ outline: none }
.tvfm-quittung:focus-visible{
  outline: 3px solid var(--focus-ring, #2D6BE0);
  outline-offset: 3px;
}
.tvfm-quittung--ok{ border-left-color: var(--tvf-ok, #1F7A4D) }
.tvfm-quittung--fehler{ border-left-color: var(--tvf-err, #B3261E) }
:root[data-theme="dark"] .tvfm-quittung--fehler{ border-left-color: #FF8A80 }

.tvfm-quittung__titel{
  font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.3 var(--font, sans-serif);
  color: var(--fg, #14161A);
}
.tvfm-quittung__text{
  margin-top: var(--s3, 12px);
  max-width: 60ch;
  font-size: var(--t-small, 15px);
  line-height: 1.6;
  color: var(--fg-muted, #6B7079);
}
.tvfm-fehlerliste{
  margin-top: var(--s4, 16px);
  display: grid; gap: 8px;
  padding-left: 18px;
}
.tvfm-fehlerliste li{ list-style: disc }
.tvfm-fehlerliste a{
  color: var(--fg, #14161A);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--t-small, 15px);
}

/* ---- Dateiauswahl -------------------------------------- */
.tvfm-datei{
  display: block;
  margin-top: 10px;
  width: 100%;
  font: 400 15px/1.4 var(--font, sans-serif);
  color: var(--fg-muted, #6B7079);
}
.tvfm-datei::file-selector-button{
  margin-right: 14px;
  padding: 11px 18px;
  font: 600 var(--t-small, 15px)/1 var(--font, sans-serif);
  color: var(--fg, #14161A);
  background: transparent;
  border: 1.5px solid var(--border-strong, #82888F);
  border-radius: var(--tvfm-radius);
  cursor: pointer;
  transition: border-color .18s var(--ease, ease);
}
.tvfm-datei::file-selector-button:hover{ border-color: var(--fg, #14161A) }
.tvfm-dateiliste{
  margin-top: 12px;
  display: grid; gap: 4px;
  font: 400 14px/1.5 var(--mono, monospace);
  color: var(--fg-muted, #6B7079);
}

/* ---- Einwilligung -------------------------------------- */
.tvfm-feld--auswahl{
  margin-top: var(--s6, 24px);
  padding-top: var(--s6, 24px);
  border-top: 1px solid var(--border, #E3E0DA);
}
.tvfm-kasten{
  display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer;
  font-size: var(--t-small, 15px);
  line-height: 1.55;
  color: var(--fg, #14161A);
  max-width: 62ch;
}
.tvfm-kasten input[type="checkbox"]{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  accent-color: var(--accent, #7C6339);
  cursor: pointer;
}
.tvfm-kasten a{ color: inherit; text-decoration: underline; text-underline-offset: 3px }

/* ---- Absenden ------------------------------------------ */
.tvfm-absenden{
  margin-top: var(--s7, 32px);
  padding-top: var(--s6, 24px);
  border-top: 1px solid var(--border, #E3E0DA);
}
.tvfm-knopf{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px;
  font: 600 var(--t-small, 15px)/1 var(--font, sans-serif);
  color: var(--on-action, #FFFFFF);
  background: var(--action, #14161A);
  border: 1.5px solid transparent;
  border-radius: var(--tvfm-radius);
  cursor: pointer;
  transition: opacity .18s var(--ease, ease), transform .18s var(--ease, ease);
}
.tvfm-knopf:hover{ opacity: .87 }
.tvfm-knopf:active{ transform: translateY(1px) }
.tvfm-absenden .tvfm-hilfe{ margin-top: var(--s4, 16px) }

/* ---- Falle für automatische Einsendungen ---------------
   Nicht display:none — manche Programme füllen genau die Felder nicht aus,
   die offensichtlich versteckt sind. Aus dem Sichtfeld geschoben und vom
   Tastaturfokus ausgenommen wirkt zuverlässiger. */
.tvfm-falle{
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Bewegung ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .tvfm *{ transition: none !important }
}