/* Die Grundlage aller PWAs von Jörns persönlicher Suite.
 *
 * QUELLE: fitness/tools/_suite/basis.css
 * Wird in die Apps KOPIERT, nicht verlinkt. Siehe README daneben.
 *
 * Hier steht nur, was in JEDER App gleich aussieht: Hülle, Kopfzeile, Knöpfe,
 * Eingabefelder, Meldungen. Die Farben nicht: die bringt jede App als Token in
 * ihrem eigenen :root mit, denn jede hat ihre eigene Hausfarbe.
 *
 * Erwartete Token: --akzent, --akzent-hell, --grund, --karte, --text, --grau, --linie.
 */

/* Roboto Slab steht seit 17.09.2026 in schrift.css daneben, zusammen mit --schrift.
 * Diese Datei setzt die Schrift nur noch ein. Wer basis.css laedt, laedt schrift.css
 * davor, sonst faellt die App auf die Systemschrift zurueck. */

:root {
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Die Huelle ist genau so hoch wie der sichtbare Ausschnitt und scrollt selbst nicht.
   Hoehe und Safe-Area gehoeren zusammen auf dieses eine Element: mit border-box liegt
   das obere Padding INNEN, sonst waere die Seite genau um die Safe-Area zu hoch und
   der Ausloeser rutschte unter den Rand. Unten kein Padding, das traegt die Leiste
   selbst. --hoehe misst lib/hoehe.js, 100dvh gilt nur bis zur ersten Messung. */
/* Kein Zoom in den Apps.
   Ein Doppeltipp auf einen Knopf oder ein Pinch beim Wischen vergroessert sonst die
   Oberflaeche, und in einer PWA ohne Adressleiste kommt man davon nur schwer zurueck.
   `user-scalable=no` im Meta allein reicht auf iOS nicht, touch-action schon: was hier
   nicht steht, ist nicht erlaubt, und pinch-zoom steht nicht da. Pannen bleibt. */
html {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.45 var(--schrift);
  padding: var(--sicher-oben) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  height: var(--hoehe, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Regel fuer alles hier: nach oben verankern und die Hoehe angeben, niemals nach
   unten (siehe Kommentar bei body). */
#app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Kopfzeile: links Zurueck oder Platzhalter, mittig der Titel, rechts eine Taste. */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--karte);
}

header h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow: auto; }

.hinweis { color: var(--grau); font-size: 15px; margin: 0; }

/* --- Knoepfe ---------------------------------------------------------------- */

button {
  font: inherit;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active { transform: scale(0.99); }

/* Ein großer Knopf ist breit und gut zu treffen, aber er schreit nicht: normale
   Schriftgröße, nur fett. Vorher stand hier 19px, das wirkte in einer Liste von
   Knöpfen wie eine Reihe von Überschriften. */
button.gross { width: 100%; padding: 16px 18px; font-weight: 600; }

button.primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
}

button.rund {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

button[disabled] { opacity: 0.5; }

/* Steht eine Stelle in einer Zeile frei, haelt ein Platzhalter sie offen: sonst
   rutscht das mittlere Element aus der Mitte. */
.platzhalter { width: 44px; height: 44px; }

/* --- Formulare -------------------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 18px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--grau); }

input, textarea {
  font: inherit;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 12px 14px;
}

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

/* --- Meldungen -------------------------------------------------------------- */

/* Der Balken fuer den Stand der Warteschlange. */
.wartet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--akzent) 8%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--akzent) 22%, var(--linie));
  font-size: 15px;
}

.wartet button { padding: 8px 12px; border-radius: 10px; font-size: 15px; }

.meldung {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 10%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, var(--linie));
  font-size: 15px;
}

.versteckt { display: none !important; }