/* Formular-Spieler von Tap and Fill.
   Alles Aussehen läuft über die Variablen unten: Eine Marken-Seite oder ein Kunden-Zettel überschreibt sie
   an .tf (oder weiter außen), ohne dass hier etwas umgebaut wird. Farben aus zettel.json ("aussehen")
   setzt der Spieler auf dieselben Variablen. */

.tf {
  --tf-flaeche: #efe9dc;        /* Hintergrund der Seite, der "Tisch" */
  --tf-papier: #fdfbf5;         /* das Blatt */
  --tf-tinte: #1f3a6e;          /* Überschriften, Linien, Hauptknopf */
  --tf-akzent: #b8322a;         /* Stempel, Pflicht-Stern */
  --tf-text: #1d1d1b;
  --tf-text-leise: #5a5a55;
  --tf-linie: #c9c2b2;          /* Feldränder und Trennlinien */
  --tf-linie-staerke: 1.5px;
  --tf-radius: 4px;
  --tf-fehler: #a3231c;
  --tf-fehler-flaeche: #fbeceb;
  --tf-feld: #ffffff;           /* Hintergrund der Eingabefelder */
  --tf-schatten: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
  --tf-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-schrift-kopf: Georgia, "Times New Roman", serif;
  --tf-breite: 44rem;

  display: block;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 1rem 1rem 3rem;
  background: var(--tf-flaeche);
  color: var(--tf-text);
  font-family: var(--tf-schrift);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.tf-seite { margin: 0; }
.tf *, .tf *::before, .tf *::after { box-sizing: border-box; }
.tf-schrift-ohne { --tf-schrift-kopf: var(--tf-schrift); }
.tf-schrift-maschine { --tf-schrift-kopf: "Courier New", Courier, monospace; }
.tf [hidden] { display: none !important; }

.tf-kopf, .tf-inhalt, .tf-fuss { max-width: var(--tf-breite); margin-inline: auto; }
.tf-kopf { position: relative; padding: 1rem 0 .5rem; }
.tf-kopf h1 { margin: .25rem 0; font-family: var(--tf-schrift-kopf); font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; color: var(--tf-tinte); }
.tf-absender { margin: 0 0 .5rem; font-size: .95rem; color: var(--tf-text-leise); }
.tf-absender b { color: var(--tf-text); }
.tf-absender span::before { content: " · "; }
.tf-untertitel { margin: 0 0 .5rem; font-size: 1.1rem; }
.tf-einleitung { margin: .5rem 0; }
.tf-demo-band { display: inline-block; margin-bottom: .5rem; padding: .1rem .6rem; border: 2px solid var(--tf-akzent); border-radius: var(--tf-radius); color: var(--tf-akzent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; transform: rotate(-2deg); }
.tf-demo-hinweis { margin: .5rem 0; padding: .6rem .8rem; border-left: 4px solid var(--tf-akzent); background: var(--tf-papier); }

.tf-sprachen { float: right; display: flex; gap: .25rem; margin-left: 1rem; }
.tf-sprache { min-width: 2.75rem; min-height: 2.75rem; border: var(--tf-linie-staerke) solid var(--tf-linie); border-radius: var(--tf-radius); background: transparent; color: var(--tf-text); font: inherit; font-size: .85rem; cursor: pointer; }
.tf-sprache[aria-pressed="true"] { background: var(--tf-tinte); border-color: var(--tf-tinte); color: #fff; }

.tf-blatt { position: relative; margin: 1rem 0; padding: 1.1rem 1.1rem 1.25rem; background: var(--tf-papier); border: var(--tf-linie-staerke) solid var(--tf-linie); border-radius: var(--tf-radius); box-shadow: var(--tf-schatten); }
.tf-blatt h2 { margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--tf-tinte); font-family: var(--tf-schrift-kopf); font-size: 1.25rem; color: var(--tf-tinte); }
.tf-hinweis { margin: 0 0 .75rem; color: var(--tf-text-leise); white-space: pre-line; }

.tf-felder { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem 1rem; }
.tf-felder > * { grid-column: span 6; min-width: 0; }
@media (min-width: 34rem) {
  .tf-breite-halb { grid-column: span 3; }
  .tf-breite-drittel { grid-column: span 2; }
}

.tf-frage { display: block; margin-bottom: .3rem; font-weight: 600; }
.tf-stern { color: var(--tf-akzent); }
.tf-hilfe { margin: .3rem 0 0; font-size: .9rem; color: var(--tf-text-leise); }
.tf-fehler { margin: .3rem 0 0; font-size: .95rem; font-weight: 600; color: var(--tf-fehler); }

/* 16px Schrift in Eingabefeldern, sonst zoomt iOS beim Antippen hinein. */
.tf input[type="text"], .tf input[type="email"], .tf input[type="tel"], .tf input[type="date"], .tf textarea, .tf select {
  display: block; width: 100%; min-height: 3rem; padding: .6rem .7rem;
  border: var(--tf-linie-staerke) solid var(--tf-linie); border-radius: var(--tf-radius);
  background: var(--tf-feld); color: var(--tf-text); font: inherit; font-size: 1rem;
}
.tf textarea { min-height: 6.5rem; resize: vertical; }
.tf input:focus-visible, .tf textarea:focus-visible, .tf select:focus-visible, .tf button:focus-visible, .tf a:focus-visible, .tf canvas:focus-visible, .tf-fehlerliste:focus-visible {
  outline: 3px solid var(--tf-tinte); outline-offset: 2px;
}
.tf-hat-fehler input[type="text"], .tf-hat-fehler input[type="email"], .tf-hat-fehler input[type="tel"], .tf-hat-fehler input[type="date"], .tf-hat-fehler textarea, .tf-hat-fehler select, .tf-hat-fehler .tf-unterschrift {
  border-color: var(--tf-fehler); background: var(--tf-fehler-flaeche);
}

.tf-optionen { display: flex; flex-direction: column; gap: .4rem; }
.tf-option { display: flex; align-items: flex-start; gap: .65rem; min-height: 2.75rem; padding: .55rem .7rem; border: var(--tf-linie-staerke) solid var(--tf-linie); border-radius: var(--tf-radius); background: var(--tf-feld); cursor: pointer; }
.tf-option input { flex: none; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--tf-tinte); }
.tf-option:has(input:checked) { border-color: var(--tf-tinte); box-shadow: inset 0 0 0 1px var(--tf-tinte); }
.tf-hat-fehler .tf-option { border-color: var(--tf-fehler); }
.tf-haken { font-weight: 400; }

.tf-unterschrift-rahmen { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.tf-unterschrift-tippen { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 30rem; }
.tf-unterschrift { display: block; width: 100%; max-width: 30rem; aspect-ratio: 3 / 1; border: var(--tf-linie-staerke) dashed var(--tf-linie); border-radius: var(--tf-radius); background: var(--tf-feld); color: var(--tf-tinte); touch-action: none; cursor: crosshair; }

.tf-fehlerliste { margin: 1rem 0; padding: .8rem 1rem; border: 2px solid var(--tf-fehler); border-radius: var(--tf-radius); background: var(--tf-fehler-flaeche); }
.tf-fehlerliste-kopf { margin: 0 0 .3rem; font-weight: 700; color: var(--tf-fehler); }
.tf-fehlerliste ul { margin: 0; padding-left: 1.2rem; }
.tf-fehlerliste a { color: var(--tf-fehler); }

.tf-abschluss { margin-top: 1.25rem; }
.tf-turnstile { margin: .75rem 0; }
.tf-meldung { margin: .75rem 0; padding: .7rem .9rem; border-radius: var(--tf-radius); border: 2px solid var(--tf-fehler); background: var(--tf-fehler-flaeche); color: var(--tf-fehler); font-weight: 600; }
.tf-meldung-info { border-color: var(--tf-tinte); background: var(--tf-papier); color: var(--tf-tinte); }
.tf-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.tf-knopf { min-height: 3rem; padding: .6rem 1.1rem; border: var(--tf-linie-staerke) solid var(--tf-tinte); border-radius: var(--tf-radius); background: var(--tf-papier); color: var(--tf-tinte); font: inherit; font-weight: 600; cursor: pointer; }
.tf-knopf.tf-haupt { background: var(--tf-tinte); color: #fff; flex: 1 1 12rem; }
.tf-knopf.tf-klein { min-height: 2.75rem; padding: .35rem .8rem; font-weight: 400; font-size: .9rem; }
.tf-knopf:disabled { opacity: .6; cursor: default; }
.tf-leeren { border-color: var(--tf-linie); color: var(--tf-text-leise); }

.tf-nicht-ausfuellen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tf-gesperrt { opacity: .55; filter: grayscale(1); }
.tf-gesperrt-marke { display: inline-block; margin: 0 0 .5rem; padding: .1rem .5rem; border: 1px solid currentColor; border-radius: var(--tf-radius); font-size: .8rem; }

.tf-danke { text-align: left; padding-top: 1.5rem; }
.tf-danke-kopf { border: 0 !important; outline: none; }
.tf-stempel { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0 1rem; padding: .35rem 1rem; border: 3px double var(--tf-akzent); border-radius: var(--tf-radius); color: var(--tf-akzent); transform: rotate(-4deg); font-family: var(--tf-schrift-kopf); }
.tf-stempel-wort { font-size: 1.4rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tf-stempel-datum { font-size: .95rem; letter-spacing: .08em; }
.tf-nummer { font-size: 1.05rem; }

.tf-demo-fenster { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.2rem; border: var(--tf-linie-staerke) solid var(--tf-tinte); border-radius: var(--tf-radius); background: var(--tf-papier); color: var(--tf-text); }
.tf-demo-fenster::backdrop { background: rgba(0, 0, 0, .45); }
.tf-demo-fenster h2 { margin: 0 0 .5rem; font-family: var(--tf-schrift-kopf); color: var(--tf-tinte); }
.tf-mail { margin: .75rem 0; padding: .8rem; border: 1px solid var(--tf-linie); border-radius: var(--tf-radius); background: #fff; }
.tf-mail p { margin: 0 0 .25rem; }
.tf-mail pre { margin: .6rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .95rem; }

.tf-fuss { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; font-size: .9rem; color: var(--tf-text-leise); }
.tf-fuss a { color: inherit; }
.tf-marke { margin-left: auto; }
.tf-laden { max-width: var(--tf-breite); margin: 3rem auto; }
.tf-druck { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .tf-danke .tf-stempel { animation: tf-stempeln .35s ease-out both; }
  @keyframes tf-stempeln { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
}

/* Ausdruck: nur die Druckfassung, schwarz auf weiß, A4. */
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  .tf { min-height: 0; padding: 0; background: #fff; color: #000; font-size: 11pt; }
  .tf-kopf, .tf-inhalt, .tf-fuss, .tf-demo-fenster { display: none !important; }
  .tf-druck { display: block; }
  .tf-druck h1 { margin: 0 0 4mm; padding-bottom: 2mm; border-bottom: 1.5pt solid #000; font-family: var(--tf-schrift-kopf); font-size: 18pt; }
  .tf-druck h2 { margin: 6mm 0 2mm; font-family: var(--tf-schrift-kopf); font-size: 13pt; break-after: avoid; }
  .tf-druck-absender { margin: 0 0 3mm; font-size: 10pt; }
  .tf-druck-hinweis { margin: 0 0 2mm; font-size: 9.5pt; white-space: pre-line; }
  .tf-druck-feld { margin: 0 0 3mm; break-inside: avoid; }
  .tf-druck-frage { font-size: 8.5pt; color: #333; }
  .tf-druck-wert { min-height: 7mm; padding-top: 1mm; border-bottom: .5pt solid #000; white-space: pre-wrap; overflow-wrap: anywhere; }
  .tf-druck-hoch { min-height: 24mm; }
  .tf-druck-optionen { display: flex; flex-wrap: wrap; gap: 1mm 6mm; padding-top: 1mm; }
  .tf-kasten { font-size: 13pt; line-height: 1; }
  .tf-druck-unterschrift { display: block; width: 75mm; height: 25mm; border-bottom: .5pt solid #000; }
  .tf-druck-unterschrift polyline { fill: none; stroke: #000; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
  .tf-druck-fuss { margin-top: 8mm; font-size: 8.5pt; color: #333; }
}