/* ============================================================
   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(--blau); border-color: var(--blau); color: #fff; }
.knopf.an     { background: var(--blau); border-color: var(--blau); color: #fff; }

/* 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: #fff; }

.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; }
}

/* ============================================================
   Verwaltungsseite (31.07.2026)

   Alles ab hier gehoert zu verwalten.php. Bewusst eigene Namen mit den
   Vorsilben verw-, mini- und foto-: seite.css wird auch von einstellen.html
   geladen, und dort liegt formular.css darueber. Zwei Dateien, die dieselbe
   Klasse belegen, ergeben Regeln, die je nach Seite anders wirken, und die
   sucht man spaeter lange.
   ============================================================ */

/* ---------- Kopfzeile mit Rueckweg ----------

   Manni kam aus der Seite nicht mehr heraus. Der Rueckweg stand nur als
   Textlink in der Fusszeile, und die sieht niemand, der oben steht. Installiert
   laeuft die App im Vollbild, also gibt es auch keine Zurueck-Taste des
   Browsers. Der Knopf ist deshalb gefuellt und nicht nur umrandet: er ist der
   eine Ausgang, nicht eine Moeglichkeit unter vielen. */

.verw-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.verw-kopf .marke { flex: 1; min-width: 0; margin: 0; }

.verw-zeichen {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.knopf.zurueck {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}

/* ---------- Miniatur der Anzeige ----------

   Beantwortet die zwei Fragen, mit denen man aus der Mail hier ankommt: ist das
   die richtige Anzeige, und wie lange laeuft sie noch. Die Laufzeit steht in
   einem eigenen Block rechts, damit sie nicht im Fliesstext untergeht. */

.miniatur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--karte);
}

.mini-bild {
  flex: none;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--linie);
}
/* Ohne Foto steht das Zeichen der Kategorie da. Ein leeres graues Feld saehe
   aus wie ein Bild, das nicht geladen hat. */
.mini-kein {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
}

.mini-text {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-titel { font-size: 18px; line-height: 1.25; }
.mini-zeile { font-size: 14.5px; color: var(--leise); }

/* Die Restlaufzeit. Auf schmalen Geraeten rutscht sie unter die Zeile und wird
   dort volle Breite, statt sich auf 60 px zusammenzuquetschen. */
.mini-laufzeit {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 3px solid var(--blau);
}
.mini-laufzeit strong { font-size: 16px; line-height: 1.25; }
.mini-laufzeit span { font-size: 14px; color: var(--leise); }
/* Noch keine Laufzeit: die Mail ist nicht bestaetigt. Das ist kein Fehler,
   sondern ein fehlender Schritt, deshalb orange und nicht rot. */
.mini-laufzeit.leer { border-left-color: #ff7d0f; }

/* ---------- Fotopflege ---------- */

.fotopflege { display: flex; flex-direction: column; gap: 10px; }
.fotopflege-titel { font-size: 15px; font-weight: 700; color: var(--leise); }
.fotopflege-titel .leise { font-weight: 400; }

.fotoraster {
  display: grid;
  /* Automatisch so viele Spalten, wie nebeneinander passen. Bei zehn Fotos auf
     einem Handy sind das zwei, auf dem Rechner vier. Eine feste Spaltenzahl
     waere auf einem der beiden Geraete falsch. */
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.fotokachel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
}
.fotokachel.haupt {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0, 145, 200, .16);
}
/* Angehakt heisst noch nicht geloescht: das passiert erst beim Speichern.
   Deshalb blass und durchgestrichen statt verschwunden, damit ein Fehlgriff
   sichtbar und rueckgaengig zu machen ist. */
.fotokachel.weg {
  border-color: var(--warn);
  opacity: .55;
}
.fotokachel.weg .fotokachel-bild { filter: grayscale(1); }
.fotokachel.weg .weg-wahl span { color: var(--warn); text-decoration: line-through; }

.fotokachel-bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--linie);
}

/* Die allgemeine label-Regel weiter oben stellt Beschriftungen untereinander.
   Hier gehoert das Kaestchen NEBEN den Text, sonst steht die Beschriftung des
   Hakens eine Zeile tiefer und man weiss nicht, wozu er gehoert. */
.fotokachel-wahl {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  /* 34 px sind weniger als die ueblichen 44, aber es sind zwei Zeilen
     unmittelbar untereinander in einer Kachel, die selbst gross genug ist. */
  min-height: 34px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.fotokachel-wahl input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blau);
}
.weg-wahl input { accent-color: var(--warn); }

.fotopflege-neu {
  padding: 12px 14px;
  border: 2px dashed var(--linie);
  border-radius: 12px;
  background: var(--karte);
}
.fotopflege-neu .leise { font-weight: 400; }
/* Das Dateifeld bleibt das des Systems. Ein nachgebauter Knopf braeuchte
   JavaScript, und wenn das ausfaellt, gaebe es hier gar keine Fotoauswahl
   mehr. */
.fotopflege-neu input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
}

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