/*
 * Ausgefuellt wird das auf dem Handy, oft mit Arbeitshandschuhen und bei
 * schlechtem Licht in der Halle. Daraus folgt alles Weitere: grosse
 * Bedienelemente, hoher Kontrast, Schrift nie unter 16 px, keine engen
 * Auswahlfelder. Mobil ist der Normalfall, Desktop die Ausnahme.
 */

:root {
  --schrift: 1.0625rem;

  /*
   * Erscheinungsbild von Anders Gabelstapler.
   *
   * Die Grautoene und die Schrift stammen aus dem Stylesheet der Website
   * (anders-gabelstapler.de). Das Rot liess sich dort nicht auslesen -- es
   * kommt aus dem CMS oder aus Bildern -- und ist deshalb aus dem
   * Erscheinungsbild angenaehert. **Den exakten Wert hier eintragen**, dann
   * zieht die ganze Anwendung nach.
   */
  --marke: #cc0000;
  --marke-dunkel: #a30000;
  --anthrazit: #222222;

  --grund: #ffffff;
  --text: #363636;
  /*
   * Das Grau der Website (#999) waere hier zu hell: Kleingedrucktes muss in
   * der Halle bei schlechtem Licht noch lesbar sein. Dieser Ton kommt auf
   * Weiss auf rund 5:1 statt 2,8:1.
   */
  --gedaempft: #6b6b6b;
  --linie: #cccccc;

  --akzent: var(--marke);
  --akzent-text: #ffffff;
  --warnung: #b00000;
  --warnung-grund: #fdf0f0;
  --erfolg: #14532d;
  --erfolg-grund: #eef8f1;
  /* Der Geraetekasten wird bewusst anthrazit gerahmt, nicht rot: Rot bleibt
     dem Absendeknopf und den Fehlermeldungen vorbehalten. */
  --geraet-rahmen: var(--anthrazit);
  --geraet-grund: #f4f4f4;
  --abstand: 1rem;
  --radius: 6px;
  /* Fingerkuppe mit Handschuh: darunter wird es zum Gluecksspiel. */
  --griff: 3.25rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  /* Roboto ist die Schrift der Website und auf Android die Systemschrift --
     der Fahrer sieht also genau sie, ohne dass etwas nachgeladen wird. */
  font-family: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--schrift);
  line-height: 1.5;
}

.blatt {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--abstand) var(--abstand) 3rem;
}

/* Die Marke ueber dem Titel -- kein Logo, damit nichts nachgeladen wird.
   Wer die Bilddatei einsetzen will: siehe README. */
.marke {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marke);
  margin: 0.5rem 0 0;
}

/*
 * Der Warnstreifen der Website als schmaler Trenner. Einmal je Seite, nur
 * oben -- als Erkennungszeichen, nicht als Warnung.
 */
.streifen {
  height: 6px;
  margin: 0.5rem 0 1.25rem;
  background: repeating-linear-gradient(
    -45deg,
    var(--anthrazit) 0 8px,
    #f2c200 8px 16px
  );
}

h1 {
  font-size: 1.5rem;
  margin: 0.25rem 0 0;
}

h2 {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.hinweis {
  color: var(--gedaempft);
  padding: 2rem 0;
  text-align: center;
}

.kleiner {
  font-size: 0.9375rem;
  color: var(--gedaempft);
  margin: 0.375rem 0 0;
}

.freiwillig {
  font-weight: 400;
  color: var(--gedaempft);
}

/* --------------------------------------------------------- Geraetekasten */

.kasten {
  border-radius: var(--radius);
  padding: var(--abstand);
  margin-bottom: 1.5rem;
}

.kasten-geraet {
  background: var(--geraet-grund);
  border: 2px solid var(--geraet-rahmen);
}

.geraetenummer {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0.25rem 0 0.75rem;
  word-break: break-word;
}

.geraetedaten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.geraetedaten dt {
  color: var(--gedaempft);
}

.geraetedaten dd {
  margin: 0;
  font-weight: 600;
  word-break: break-word;
}

/* ---------------------------------------------------------------- Felder */

.feld {
  margin-bottom: 1.5rem;
  border: 0;
  padding: 0;
}

label,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.375rem;
  padding: 0;
}

input[type='text'],
input[type='tel'],
input[type='date'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: var(--griff);
  padding: 0.625rem 0.75rem;
  /* Unter 16 px zoomt iOS beim Antippen in das Feld hinein. */
  font-size: 1.0625rem;
  font-family: inherit;
  color: var(--text);
  background: var(--grund);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* Einsatzfaehigkeit als drei grosse Knoepfe statt als enge Auswahlliste. */
.auswahl {
  display: grid;
  gap: 0.5rem;
}

.knopf-auswahl {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--griff);
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-weight: 500;
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
}

.knopf-auswahl input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--akzent);
  flex: none;
}

.knopf-auswahl:has(input:checked) {
  border-color: var(--marke);
  box-shadow: inset 0 0 0 1px var(--marke);
  background: #fff5f5;
  font-weight: 700;
}

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

/* ---------------------------------------------------------------- Knopf */

.knopf-senden {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-height: 3.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--akzent-text);
  background: var(--akzent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.knopf-senden[disabled] {
  background: var(--gedaempft);
  cursor: progress;
}

/* ------------------------------------------------------ Rueckmeldungen */

.fehlertext {
  color: var(--warnung);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.kasten-warnung {
  background: var(--warnung-grund);
  border: 2px solid var(--warnung);
}

.kasten-warnung h2 {
  color: var(--warnung);
}

.kasten-erfolg {
  background: var(--erfolg-grund);
  border: 2px solid var(--erfolg);
}

.kasten-erfolg h2 {
  color: var(--erfolg);
}

.vorgangsnummer {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}

.telefon a {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--akzent);
}

.datenschutz {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
  color: var(--gedaempft);
}

.datenschutz h2 {
  font-size: 1rem;
  color: var(--text);
}

@media (min-width: 30rem) {
  .auswahl {
    grid-template-columns: repeat(3, 1fr);
  }
}