/* ============================================================
   TVF Fahrten — Formulare
   Nutzt die Designtoken des Themes (tokens.css).

   ------------------------------------------------------------
   WARUM HIER `!important` STEHT

   Auf tv-ffm.de laufen 57 Plugins. Mehrere davon — WooCommerce,
   Ultimate Member, User Registration, die hauseigenen App-Plugins —
   legen Stile auf blanke `label`, `input`, `select`, `textarea`.
   Gemessen am 3.10.2026 auf der veröffentlichten Seite: Die
   Beschriftungen kamen in Großbuchstaben, Schriftstärke 950 und
   Schieferblau heraus, die Felder mit 16px Eckenradius. Nichts davon
   steht in dieser Datei.

   Der Grund ist Spezifität: `input[type="text"]` (0-1-1) schlägt
   `.tvff-eingabe` (0-1-0). Deshalb zwei Maßnahmen:

     1. Jede Regel steht unter `.tvff` und nennt das Element
        **und** die Klasse — `.tvff input.tvff-eingabe` (0-2-1).
     2. Die sechs Eigenschaften, die nachweislich von außen
        überschrieben werden, tragen `!important`.

   Das ist keine Bequemlichkeit. Ohne Entwickler im Haus darf das
   Aussehen eines Bestellformulars nicht davon abhängen, welches
   Plugin als Nächstes aktualisiert wird.

   Siehe _rebuild/24-KUNDENBEREICH.md
   ============================================================ */

/* ---- Rahmen ------------------------------------------------- */
/* Links am Raster, nicht mittig. Der Rest der Seite — Überschriften,
   Fließtext, Kacheln — fluchtet am linken Rand des `tvf-wrap`.
   Ein zentrierter Block mitten darin schwimmt. */
.tvff{
  max-width: 880px;
  margin: 0;
}

/* ---- Gruppen ------------------------------------------------ */
.tvff .tvff-gruppe{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 var(--s8);
  padding: var(--s7) 0 0;
  min-width: 0;
}
.tvff .tvff-gruppe:first-of-type{ border-top: 0; padding-top: 0 }

.tvff .tvff-gruppe > legend{
  float: left;              /* legend ignoriert sonst die Breite */
  width: 100%;
  padding: 0;
  margin: 0 0 var(--s6);
  font-family: var(--font) !important;
  font-size: var(--t-h3) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--fg) !important;
  line-height: 1.2;
}
.tvff .tvff-gruppe > legend + *{ clear: both }

.tvff .tvff-gruppe__text{
  margin: calc(var(--s4) * -1) 0 var(--s6);
  max-width: var(--lese);
  color: var(--fg-muted);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* ---- Raster ------------------------------------------------- */
.tvff .tvff-raster{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
}
.tvff .tvff-feld--breit{ grid-column: 1 / -1 }
@media (max-width: 680px){
  .tvff .tvff-raster{ grid-template-columns: 1fr }
}

/* ---- Feld und Beschriftung ---------------------------------- */
.tvff .tvff-feld{ position: relative; min-width: 0 }

.tvff label.tvff-label{
  display: block;
  margin: 0 0 var(--s3);
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;   /* kam von außen als Versalien */
  letter-spacing: normal !important;
  color: var(--fg) !important;
  line-height: 1.4;
}
.tvff .tvff-pflicht{ color: var(--accent); font-weight: 400 }

/* ---- Eingaben ----------------------------------------------- */
/* Element + Klasse, damit `input[type="text"]` nicht gewinnt. */
.tvff input.tvff-eingabe,
.tvff select.tvff-eingabe,
.tvff textarea.tvff-eingabe{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 13px 15px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r) !important;   /* kam von außen mit 16px */
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;           /* unter 16px zoomt iOS beim Tippen */
  font-weight: 400 !important;          /* kam von außen mit 700 */
  line-height: 1.45;
  box-shadow: none !important;
  transition: border-color var(--d-fast) var(--ease);
}
.tvff input.tvff-eingabe:hover,
.tvff select.tvff-eingabe:hover,
.tvff textarea.tvff-eingabe:hover{ border-color: var(--fg-muted) !important }

.tvff .tvff-eingabe:focus-visible,
.tvff .tvff-kaestchen input:focus-visible,
.tvff .tvff-schalter input:focus-visible,
.tvff .tvff-einwilligung input:focus-visible,
.tvff .tvff-knopf:focus-visible{
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-color: var(--fg) !important;
}
.tvff .tvff-eingabe[aria-invalid="true"]{ border-color: var(--tvf-err) !important }

.tvff textarea.tvff-eingabe{ resize: vertical; min-height: 6.5em }
.tvff input.tvff-eingabe--kurz{ max-width: 8ch }

/* Auswahlfelder: eigener Pfeil, damit sie wie die Textfelder wirken
   und nicht wie ein Fremdkörper des Betriebssystems. */
.tvff select.tvff-eingabe{
  appearance: none; -webkit-appearance: none;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B7079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  cursor: pointer;
}

/* Datums- und Zeitfelder sind in Safari sonst niedriger als der Rest. */
.tvff input[type="date"].tvff-eingabe,
.tvff input[type="time"].tvff-eingabe{ min-height: 50px }

.tvff .tvff-hilfe{
  margin: var(--s2) 0 0;
  color: var(--fg-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5;
  max-width: 46ch;
}
.tvff .tvff-fehler{
  margin: var(--s2) 0 0;
  color: var(--tvf-err) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---- Kästchen und Schalter ---------------------------------- */
.tvff .tvff-kaestchen,
.tvff .tvff-schalter{
  display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  padding-top: var(--s1);
}
.tvff .tvff-kaestchen label,
.tvff .tvff-schalter label{
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--fg) !important;
  cursor: pointer;
  min-height: 30px;
}
.tvff .tvff-kaestchen input,
.tvff .tvff-schalter input{
  width: 19px !important; height: 19px !important;
  margin: 0 !important;
  accent-color: var(--action);
  flex: none;
}

/* ---- Adressvorschläge --------------------------------------- */
.tvff .tvff-vorschlaege{
  position: absolute; z-index: 20;
  left: 0; right: 0;
  margin: var(--s1) 0 0; padding: var(--s1) 0;
  list-style: none;
  max-height: 17em; overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgb(0 0 0 / .13);
}
.tvff .tvff-vorschlag{
  padding: var(--s3) var(--s4);
  font-size: 15px; line-height: 1.35;
  cursor: pointer;
}
.tvff .tvff-vorschlag[aria-selected="true"],
.tvff .tvff-vorschlag:hover{ background: var(--bg-2) }
.tvff .tvff-vorschlag__zeile{ display: block; color: var(--fg) }
.tvff .tvff-vorschlag__ort{ display: block; color: var(--fg-muted); font-size: 13px; margin-top: 2px }
.tvff .tvff-vorschlaege__leer{ padding: var(--s3) var(--s4); color: var(--fg-muted); font-size: 14px }
.tvff .tvff-adresse__lage{ margin: var(--s2) 0 0; color: var(--tvf-warn); font-size: 13px; line-height: 1.5 }

/* ---- Köder -------------------------------------------------- */
.tvff .tvff-koeder{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Festpreis vor der Bestellung --------------------------- */
/* Die Zahl ist das Versprechen der Seite — sie bekommt die Größe, die
   ein Versprechen verdient, und steht unmittelbar über dem Knopf, der
   sie verbindlich macht. */
.tvff .tvff-preis{
  margin: 0 0 var(--s6);
  padding: var(--s6) var(--s7);
  border: 1px solid var(--fg);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.tvff .tvff-preis__wert{
  margin: 0;
  font-family: var(--font) !important;
  font-size: clamp(2rem, 4.2vw, 2.8rem) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
  color: var(--fg) !important;
  line-height: 1;
}
.tvff .tvff-preis__wert:empty{ display: none }
.tvff .tvff-preis__text{
  margin: var(--s4) 0 0;
  max-width: 52ch;
  color: var(--fg-muted) !important;
  font-size: var(--t-small) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.6;
}
.tvff .tvff-preis__wert:empty + .tvff-preis__text{ margin-top: 0 }

/* Kein Preis zustande gekommen: zurückhaltender Rahmen, damit es nicht
   wie eine Zusage aussieht. */
.tvff .tvff-preis--ohne{
  border-color: var(--border);
  background: var(--bg-2);
}

.tvff .tvff-preis__ohne{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s6);
}
.tvff .tvff-preis__ohne span{
  color: var(--fg-muted);
  font-size: var(--t-small);
}

/* ---- Einwilligung ------------------------------------------- */
.tvff .tvff-einwilligung{
  margin: 0 0 var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--bg-2);
  border-radius: var(--r-lg);
}
.tvff .tvff-einwilligung label{
  display: flex; gap: var(--s4); align-items: flex-start;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: none !important;   /* kam von außen als Versalien */
  letter-spacing: normal !important;
  color: var(--fg) !important;
  line-height: 1.6;
  cursor: pointer;
}
.tvff .tvff-einwilligung input{
  width: 19px !important; height: 19px !important;
  margin: .15em 0 0 !important;
  accent-color: var(--action);
  flex: none;
}
.tvff .tvff-einwilligung a{ color: var(--accent); text-decoration: underline }

.tvff .tvff-hinweis{
  margin: 0 0 var(--s7);
  max-width: var(--lese);
  color: var(--fg-muted);
  font-size: var(--t-small);
  line-height: 1.65;
}

/* ---- Knopf -------------------------------------------------- */
.tvff .tvff-knopf{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: var(--s3) var(--s8) !important;
  border: 0 !important;
  border-radius: var(--r-full) !important;
  background: var(--action) !important;
  color: var(--on-action) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--d-fast) var(--ease);
}
.tvff .tvff-knopf:hover{ opacity: .86 }
.tvff .tvff-knopf[disabled]{ opacity: .5; cursor: progress }

/* ---- Quittung und Fehlerliste ------------------------------- */
.tvff .tvff-quittung{
  margin: 0 0 var(--s7);
  padding: var(--s6) var(--s7);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--tvf-ok);
  background: var(--bg-2);
}
.tvff .tvff-quittung--fehler{ border-left-color: var(--tvf-err) }
.tvff .tvff-quittung p{ margin: 0 0 var(--s3); max-width: var(--lese); line-height: 1.6 }
.tvff .tvff-quittung p:last-child{ margin-bottom: 0 }

.tvff .tvff-quittung__titel{
  font-size: var(--t-h2) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  line-height: 1.15;
}

.tvff .tvff-referenz{
  margin-top: var(--s5) !important;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--fg-muted);
}
.tvff .tvff-referenz strong{
  display: inline-block; margin-left: var(--s2);
  font-family: var(--mono) !important;
  font-size: var(--t-h3) !important;
  letter-spacing: .08em !important;
  color: var(--fg) !important;
}

.tvff .tvff-fehlerliste{
  margin: 0 0 var(--s7);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--tvf-err);
  background: var(--bg-2);
  border-radius: var(--r-lg);
  font-size: var(--t-small);
}
.tvff .tvff-fehlerliste p{ margin: 0 0 var(--s2) }
.tvff .tvff-fehlerliste ul{ margin: 0; padding-left: 1.2em }
.tvff .tvff-fehlerliste li{ margin: var(--s1) 0 }
.tvff .tvff-fehlerliste a{ color: var(--tvf-err) }

@media (prefers-reduced-motion: reduce){
  .tvff .tvff-eingabe, .tvff .tvff-knopf{ transition: none }
}
/* ============================================================
   Taxibestellung — Stand der eigenen Fahrt
   ============================================================ */
.tvff .tvff-stand{
  padding: var(--s6);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.tvff .tvff-stand__zustand{
  margin: 0;
  font-family: var(--font) !important;
  font-size: var(--t-h2) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--fg) !important;
  line-height: 1.15;
}
.tvff .tvff-stand__zeile{
  margin: var(--s3) 0 0;
  color: var(--fg-muted);
  font-size: var(--t-small);
}
.tvff .tvff-stand__daten{
  margin: var(--s6) 0 0;
  display: grid;
  grid-template-columns: minmax(7em, auto) 1fr;
  gap: var(--s3) var(--s5);
  align-items: baseline;
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.tvff .tvff-stand__daten dt{
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tvff .tvff-stand__daten dd{
  margin: 0;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--fg) !important;
  line-height: 1.45;
}
.tvff .tvff-stand__kennung{ font-family: var(--mono); letter-spacing: .06em }
.tvff .tvff-stand__hinweis{
  margin: var(--s5) 0 0;
  color: var(--fg-muted);
  font-size: var(--t-cap);
}
.tvff .tvff-stand__tat{
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
}
.tvff .tvff-storno{ margin: 0 }
.tvff .tvff-knopf--still{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  text-decoration: none;
}
.tvff .tvff-knopf--still:hover{ border-color: var(--fg); opacity: 1 }

/* Abbestellen ist folgenreich und sieht deshalb nicht aus wie
   „Weiter". Rot wäre eine Warnung vor einem Fehler — hier ist es
   eine gewollte Handlung, also zurückhaltend mit rotem Rand. */
.tvff .tvff-knopf--warnung{
  background: transparent;
  color: var(--tvf-err);
  border: 1px solid var(--tvf-err);
}
.tvff .tvff-knopf--warnung:hover{ background: var(--tvf-err); color: #fff; opacity: 1 }

/* ============================================================
   Ergänzungen nach der Rückmeldung aus dem Fahrbetrieb
   3. Oktober 2026
   ============================================================ */

/* ---- Einzelnes Kästchen (Kindersitz) ------------------------ */
.tvff .tvff-kasten{
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--fg) !important;
  line-height: 1.45;
  cursor: pointer;
}
.tvff .tvff-kasten:hover{ border-color: var(--border-strong) }
.tvff .tvff-kasten input{
  width: 19px !important; height: 19px !important;
  margin: 1px 0 0 !important;
  accent-color: var(--action);
  flex: none;
}
.tvff .tvff-kasten:has(input:checked){
  border-color: var(--fg);
  background: var(--bg-2);
}

/* Hinweis, wenn etwas gewünscht, aber nicht zusicherbar ist. */
.tvff .tvff-warnung{
  margin: var(--s2) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--tvf-warn);
  background: var(--bg-2);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--fg) !important;
  font-size: 13px !important;
  line-height: 1.55;
}

/* ---- Zweiter Schritt --------------------------------------- */
.tvff .tvff-weiter{ margin-bottom: var(--s7) }
.tvff .tvff-schritt2[hidden]{ display: none !important }

/* ---- Dialogfenster ----------------------------------------- */
.tvff-dialog{
  width: min(680px, calc(100vw - 2 * var(--s5)));
  max-height: min(80vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 24px 70px rgb(0 0 0 / .32);
  overflow: hidden;
}
.tvff-dialog--schmal{ width: min(520px, calc(100vw - 2 * var(--s5))) }
.tvff-dialog::backdrop{ background: rgb(0 0 0 / .45) }

.tvff-dialog__kopf{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6) var(--s7) var(--s4);
  border-bottom: 1px solid var(--border);
}
.tvff-dialog__titel{
  margin: 0;
  font-family: var(--font) !important;
  font-size: var(--t-h3) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--fg) !important;
}
.tvff-dialog__zu{
  flex: none;
  width: 36px !important; height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-full) !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.tvff-dialog__zu:hover{ border-color: var(--fg) !important; color: var(--fg) !important }

.tvff-dialog__text{
  padding: var(--s6) var(--s7);
  max-height: 58vh;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.65;
}
.tvff-dialog__text h1,
.tvff-dialog__text h2{ font-size: var(--t-h3); margin: var(--s6) 0 var(--s3) }
.tvff-dialog__text h1:first-child,
.tvff-dialog__text h2:first-child{ margin-top: 0 }
.tvff-dialog__text h3{ font-size: 16px; margin: var(--s5) 0 var(--s2) }
.tvff-dialog__text p{ margin: 0 0 var(--s4); max-width: none }
.tvff-dialog__text ul,
.tvff-dialog__text ol{ margin: 0 0 var(--s4); padding-left: 1.3em }
.tvff-dialog__text img{ display: none }   /* Bilder tragen hier nichts bei */

.tvff-dialog__fuss{
  display: flex; justify-content: flex-end; align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s7) var(--s6);
  border-top: 1px solid var(--border);
}
.tvff-ds{ color: var(--accent); text-decoration: underline }

/* ---- Kompakter auf dem Handy ------------------------------- */
/* Rückmeldung: „Am besten ein kompaktes Buchungsformular, bei dem man
   auf dem Handy alles sehen und eingeben kann." Auf einem 375px breiten
   Gerät zählt jede Zeile — die Abstände zwischen den Feldern waren für
   den Bildschirm am Schreibtisch gemacht. */
@media (max-width: 680px){
  .tvff .tvff-gruppe{ margin-bottom: var(--s6); padding-top: var(--s5) }
  .tvff .tvff-gruppe > legend{ margin-bottom: var(--s4) }
  .tvff .tvff-raster{ gap: var(--s4) }
  .tvff .tvff-hilfe{ font-size: 12.5px !important; line-height: 1.45 }
  .tvff .tvff-label{ margin-bottom: var(--s2) }
  .tvff .tvff-preis{ padding: var(--s5) var(--s5) }
  .tvff .tvff-preis__wert{ font-size: 2rem !important }
  .tvff .tvff-einwilligung{ padding: var(--s4) var(--s5) }
  .tvff .tvff-hinweis{ margin-bottom: var(--s5); font-size: 13px }
  .tvff .tvff-knopf{ width: 100%; }
  .tvff-dialog__kopf,
  .tvff-dialog__fuss{ padding-inline: var(--s5) }
  .tvff-dialog__text{ padding: var(--s5); max-height: 62vh }
}