/* ============================================================
   Noch Gut by ManniMindset: Stil der Nebenseiten.

   Warum diese Datei getrennt von /app/basis.css existiert:
   Die Basis ist fuer Auto-Apps gebaut. Dort ist "die Seite scrollt nie" eine
   Kernregel (html, body { overflow: hidden }), weil man im Auto keine Seite
   schiebt. Verwalten, Bestaetigen und die Rechtstexte sind das Gegenteil: sie
   haben Fliesstext und Formulare und MUESSEN scrollen. Wer hier die Basis
   einbindet, bekommt eine Seite, deren unteres Ende unerreichbar ist.

   Gemeinsam bleiben die Farben. Sie stehen bewusst noch einmal hier statt per
   Import, damit diese Seiten auch dann vollstaendig aussehen, wenn die App
   einmal umgebaut wird.
   ============================================================ */

:root {
  --blau:   #0091c8;
  --bg:     #f4f5f7;
  --karte:  #ffffff;
  --text:   #10131a;
  --leise:  #5b6472;
  --linie:  #d9dde4;
  --warn:   #c02626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #0b0d10;
    --karte:  #171b21;
    --text:   #f2f4f7;
    --leise:  #98a2b3;
    --linie:  #2a3038;
    --warn:   #ff6b6b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 60px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Fuer die Sackgassen-Seiten: ein Kasten in der Mitte, sonst nichts. */
body.mitte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.blatt, .kasten-seite {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

.kasten-seite {
  max-width: 460px;
  background: var(--karte);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
}

.marke {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--blau);
}
.marke span { color: var(--leise); font-size: 13px; }

h1 { margin: 0 0 18px; font-size: 28px; line-height: 1.2; }
h2 { margin: 32px 0 10px; font-size: 20px; }
h3 { margin: 22px 0 8px; font-size: 17px; }
p  { margin: 0 0 14px; }

ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }

/* Speicherfristen und Ähnliches. Auf schmalen Geräten darf die Tabelle in
   sich schieben, statt die Seite waagerecht zu sprengen. */
.tabelle {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.tabelle th, .tabelle td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.tabelle th { font-size: 14px; color: var(--leise); }

a { color: var(--blau); }

.leise { color: var(--leise); font-size: 14.5px; }

/* Rueckmeldung nach einer Aktion. Gruen waere hier falsch: auch "nichts
   geaendert" landet in diesem Kasten. */
.meldung {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--karte);
  border-left: 4px solid var(--blau);
  font-weight: 600;
}

/* Der Zustandskasten oben: das Erste, was man wissen will. */
.stand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 5px solid var(--linie);
}
.stand strong { font-size: 19px; }
.stand span { font-size: 15px; color: var(--leise); }
.stand-aktiv      { border-left-color: #17864a; }
.stand-reserviert { border-left-color: #d68910; }
.stand-pruefung   { border-left-color: var(--blau); }
.stand-gesperrt,
.stand-abgelaufen { border-left-color: var(--warn); }

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

.feldblock { display: flex; flex-direction: column; gap: 14px; }

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

input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;      /* unter 16px zoomt iOS beim Antippen in das Feld */
  font-weight: 400;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--blau);
}
textarea { resize: vertical; min-height: 120px; }

.reihe { display: flex; flex-wrap: wrap; gap: 8px; }

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.knopf:active { transform: scale(.98); }
.knopf.voll   { width: 100%; background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.an     { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

/* Loeschen sieht anders aus als alles andere, und zwar erst beim Hinsehen:
   ein roter Rahmen, keine rote Flaeche. Ein knallroter Knopf zieht den Blick
   auf sich, und die haeufigste Handlung auf dieser Seite ist nicht Loeschen. */
.knopf.loeschen {
  border-color: var(--warn);
  color: var(--warn);
  font-weight: 800;
}
.knopf.loeschen:active { background: var(--warn); color: var(--auf-warn); }

.gefahr-ueberschrift { margin-top: 42px; color: var(--warn); }
.gefahr { padding-bottom: 10px; }

.fusszeile {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--leise);
  text-align: center;
}
.fusszeile a { color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .knopf:active { transform: none; }
}