/* Tempo-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Umschalter, Knoepfe, Werbebanner, Begruessung, Fusszeile,
   Bewegung.

   Diese Datei war vorher eine Kopie der Tank-App mit 1.020 Zeilen, davon rund
   45 Regelfamilien fuer Elemente, die es hier nie gab (Karten, Zieh-Anzeige,
   Zielauswahl, Skelette, Ladebalken). Sie sind mit dem Umbau entfallen. */

:root {
  --orange: #d96a00;   /* Regelfall: es kostet etwas */
  --rot:    #c02626;   /* schwerer Fall, Fahrverbot */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Paarweise mitziehen, sonst bleibt der schwere Fall im Dunkeln unlesbar. */
    --rot: #ff6b6b;
  }
}

/* Kopf, Art, zweite Zeile, Eingaben, Ergebnis, Knopf, Banner, Fuss.
   Die Zahl der Zeilen muss zur Zahl der Kinder passen, sonst entsteht eine
   Zusatzzeile und der Fuss rutscht aus dem Bild. */
.app { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }

/* ---------- Eingaben ---------- */

.eingaben { display: grid; gap: 7px; align-content: start; }

.feld {
  padding: 9px 12px 11px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid var(--linie);
}
.feld-titel {
  margin-bottom: 7px;
  font-size: 14px; font-weight: 700; color: var(--leise);
}

/* Erlaubte Geschwindigkeit als Schnellwahl, EINZEILIG. Eine Tastatur waere hier
   der langsamere Weg, die Werte sind ohnehin genormt.
   Umbruch ist ausgeschlossen (nowrap): zwei Zeilen kosteten Hoehe, und die App
   soll ohne Scrollen auskommen. Passt nicht alles in die Breite, wischt man die
   Reihe seitlich. */
.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-width: 44px; min-height: 42px;
  padding: 0 4px;
  border-radius: 11px;
  border: 2px solid var(--linie);
  background: transparent;
  color: var(--text);
  font-family: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer;
}
.chip.an {
  background: var(--blau); border-color: var(--blau); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 145, 200, .4);
}

/* Messwert mit vier Schrittknoepfen. Grosse Flaechen, weil man das oft mit
   einer Hand macht, waehrend man den Bescheid in der anderen haelt.
   Der Doppeltipp-Zoom ist in der Basis abgeschaltet (touch-action), sonst zoomt
   das Handy beim schnellen Tippen auf Plus. */
.zaehler { display: flex; align-items: center; gap: 6px; }
.zbtn {
  flex: none;
  min-width: 50px; min-height: 50px;
  border-radius: 12px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit; font-size: 18px; font-weight: 800;
  cursor: pointer;
}
.zwert {
  flex: 1;
  text-align: center;
  font-size: 34px; font-weight: 800;
  line-height: 1.05;
  color: var(--text);
}
.zwert small { display: block; font-size: 12px; font-weight: 700; color: var(--leise); }

/* Bei Abstand und Handy hat die zweite Zeile nichts zu waehlen und verschwindet.
   Die Regel ist NOETIG: das hidden-Attribut allein reicht nicht, weil
   .umschalter{display:grid} aus der Basis das display:none des Browsers
   ueberstimmt. Ohne diese Zeile bliebe ein leerer Kasten stehen. */
#zweite[hidden] { display: none; }

/* Gefaehrdung und Sachbeschaedigung, sowie die Rotlicht-Dauer. Gleich breite
   Knoepfe, damit die Zeile ruhig bleibt. */
.folgen { display: flex; gap: 6px; }
.fbtn {
  flex: 1;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 11px;
  border: 2px solid var(--linie);
  background: transparent;
  color: var(--text);
  font-family: inherit; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  /* Mitwachsende Schrift statt fester 15 px (Manni, 30.07.2026): drei Knoepfe
     teilen sich die Breite, und "Sachschaden" passte auf schmalen Handys nicht
     mehr in sein Drittel. Auf breiten Geraeten bleibt es bei 15 px. */
  font-size: clamp(12px, 3.9vw, 15px);
}
.fbtn.an {
  background: var(--blau); border-color: var(--blau); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 145, 200, .4);
}

/* Erklaerung zur gewaehlten Folge. Erscheint nur bei Gefaehrdung und
   Sachschaden: "ohne Folgen" erklaert sich selbst, und jede Zeile, die immer da
   steht, fehlt dem Ergebnis an Hoehe. */
.folgen-hinweis {
  padding: 6px 10px;
  border-left: 4px solid var(--blau);
  border-radius: 10px;
  background: var(--karte);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--leise);
}
.folgen-hinweis b { color: var(--text); }

/* ---------- Ergebnis ---------- */

/* KEIN overflow-y: das Ergebnis muss ohne Scrollen passen, sonst ist es keine
   Ein-Bildschirm-App. Erreicht wird das durch die drei Werte nebeneinander und
   durch Merker statt Absaetze. Gemessen fehlten vorher bis zu 205 px. */
.ergebnis { min-height: 0; }

.erg {
  padding: 10px 13px 12px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  border-left: 6px solid var(--orange);
}
.erg.gut { border-left-color: var(--gruen); }
.erg.schwer { border-left-color: var(--rot); }

/* Der Rechenweg steht bewusst da: eine Zahl ohne Herleitung glaubt niemand,
   und bei Bussgeldern will man wissen, wie sie zustande kommt. */
.erg-weg {
  margin: 0 0 9px;
  font-size: 13px; line-height: 1.4; color: var(--leise);
}
.erg-weg b { color: var(--text); }

/* Betrag, Punkte und Fahrverbot in einer Reihe. Der Betrag traegt das Gewicht. */
.erg-werte {
  display: flex; align-items: flex-end; gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--linie);
}
.ew { flex: 1; min-width: 0; }
.ew b {
  display: block;
  font-size: 24px; font-weight: 800; line-height: 1.05;
  color: var(--text);
  white-space: nowrap;
}
.ew:first-child b { font-size: 30px; }
.erg.schwer .ew:first-child b { color: var(--rot); }
.ew span {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 700; color: var(--leise);
}

/* Kurze Merker statt Absaetze. Die Erklaerung steht auf der Empfehlungsseite. */
.erg-merker { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.erg-merker span {
  padding: 3px 9px; border-radius: 999px;
  background: var(--linie);
  font-size: 12px; font-weight: 700; color: var(--text);
}

.erg-text { font-size: 15px; line-height: 1.45; color: var(--leise); }
.erg-text b { color: var(--text); }
.erg.gut .erg-text { color: var(--text); }

/* ---------- Kleine Bildschirme ---------- */

/* Unter 700 px Hoehe wird es eng. Gekuerzt wird an den Eingaben, nie am
   Ergebnis: das ist der Grund, warum jemand die App geoeffnet hat. */
@media (max-height: 700px) {
  .zbtn { min-width: 46px; min-height: 46px; }
  .zwert { font-size: 30px; }
  .chip { min-height: 38px; font-size: 16px; }
  .fbtn { min-height: 40px; }
}