/*
  Gestaltung des Parkschein-Wächters.

  Zwei Randbedingungen bestimmen fast alles:

  1. Die App wird beim Aussteigen aus dem Auto benutzt -- oft im prallen
     Sonnenlicht, oft mit einer Hand, oft in Eile. Daher hoher Kontrast, grosse
     Schrift und Schaltflaechen von mindestens 56 px Hoehe.

  2. Die Kernaussage muss aus zwei Metern Entfernung lesbar sein. Deshalb steht
     der Status gross und farbig oben, die Begruendung klein darunter.

  Farben tragen Bedeutung, nicht Dekoration:
     gruen  = gerade gebuehrenfrei
     bernst = gerade gebuehrenpflichtig
     grau   = unbekannt (wird NIE als "frei" eingefaerbt)
*/

:root {
  color-scheme: light dark;

  --grund: #f4f2ee;
  --flaeche: #ffffff;
  --flaeche-2: #ebe8e2;
  --linie: #d8d4cc;
  --text: #1a1a18;
  --text-leise: #5f5d57;

  --frei: #2f6b2a;
  --frei-grund: #e4f0dc;
  --pflicht: #8a4a06;
  --pflicht-grund: #fbeed6;
  --unklar: #4a4a46;
  --unklar-grund: #e6e4df;
  --warn: #8f2f2f;
  --warn-grund: #f8e4e2;

  --rundung: 14px;
  --spalte: 30rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14161a;
    --flaeche: #1d2026;
    --flaeche-2: #262a31;
    --linie: #343943;
    --text: #f2f3f5;
    --text-leise: #a2a7b0;

    --frei: #9fd68f;
    --frei-grund: #1f3320;
    --pflicht: #f2be6b;
    --pflicht-grund: #3a2c14;
    --unklar: #b6bac2;
    --unklar-grund: #2a2e35;
    --warn: #f0a9a4;
    --warn-grund: #3a1f1e;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.huelle {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 1.25rem 1rem calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.kopf h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.kopf-zusatz {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-leise);
}

.karte-flaeche {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 1rem 1.1rem;
}

.karte-flaeche h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.karte-flaeche p {
  margin: 0.4rem 0 0;
}

/* Die Zonenkarte: das Herzstueck der Anzeige. */
.zonen-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.etikett {
  font-size: 0.9rem;
  color: var(--text-leise);
  text-transform: none;
}

.zone-nummer {
  font-size: 2.6rem;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.status {
  margin: 0.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
}

.rest {
  margin: 0.45rem 0 0;
  color: var(--text-leise);
  font-size: 0.95rem;
}

.zone-karte[data-status="frei"] .status {
  background: var(--frei-grund);
  color: var(--frei);
}

.zone-karte[data-status="pflichtig"] .status {
  background: var(--pflicht-grund);
  color: var(--pflicht);
}

.zone-karte[data-status="unbekannt"] .status {
  background: var(--unklar-grund);
  color: var(--unklar);
}

.angaben {
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.5rem;
}

.angabe {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.angabe dt {
  color: var(--text-leise);
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.angabe dd {
  margin: 0;
  text-align: right;
  font-size: 0.95rem;
}

/* "unbekannt" wird bewusst nicht wie ein Wert gesetzt, damit es niemand
   fuer eine Angabe haelt. Geraten wird hier nichts. */
.unbekannt {
  color: var(--text-leise);
  font-style: italic;
}

.fussnote {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  color: var(--text-leise);
}

.warnung {
  background: var(--warn-grund);
  border-color: var(--warn);
  color: var(--warn);
}

.warnung p {
  margin: 0;
}

.hinweis {
  margin: 0;
  color: var(--text-leise);
}

.knopfreihe {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.knopfreihe-haupt {
  margin-top: 0.2rem;
}

.knopf {
  flex: 1;
  min-height: 56px; /* Daumengerecht, auch mit Einkaufstueten in der Hand */
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  cursor: pointer;
}

.knopf:active {
  transform: scale(0.985);
}

.knopf:focus-visible {
  outline: 3px solid var(--frei);
  outline-offset: 2px;
}

.knopf-haupt {
  background: var(--text);
  color: var(--grund);
  border-color: var(--text);
}

.fuss {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-leise);
}

.fuss p {
  margin: 0;
}

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

/* ---------------------------------------------------------------------------
   Karte

   Die Karte steht ueber der Textanzeige, nicht an ihrer Stelle. Faellt sie aus,
   verschwindet nur dieser Block -- die Auskunft darunter bleibt vollstaendig.
   --------------------------------------------------------------------------- */

#kartenbereich {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  overflow: hidden;
  background: var(--flaeche-2);
}

#karte {
  height: 280px;
  width: 100%;
  background: var(--flaeche-2);
}

.karten-hinweis {
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-leise);
  border-top: 1px solid var(--linie);
}

/* Leaflets Bedienelemente an die App angleichen -- sonst wirken sie aufgeklebt. */
.leaflet-container {
  font: inherit;
  background: var(--flaeche-2);
}

.leaflet-control-attribution {
  background: var(--flaeche);
  color: var(--text-leise);
  font-size: 10px;
}

.leaflet-control-attribution a {
  color: var(--text-leise);
}

.leaflet-bar a {
  background: var(--flaeche);
  color: var(--text);
  border-bottom-color: var(--linie);
}

.leaflet-bar a:hover {
  background: var(--flaeche-2);
  color: var(--text);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--flaeche);
  color: var(--text);
}

.leaflet-popup-content {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Quellenangabe: klein, aber vorhanden. Der Nutzer soll sehen koennen, worauf
   die Auskunft beruht -- amtliche Angabe oder Freiwilligendaten. */
.quelle {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Sichtbarer Hinweis, wenn eine Datendatei fehlt. Eine App, die stillschweigend
   "unbekannt" anzeigt, obwohl in Wahrheit Daten fehlen, laesst den Nutzer im
   Unklaren -- genau das ist am 26.08.2026 passiert. */
.datenfehler {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--warn-grund);
  border: 1px solid var(--warn);
  border-radius: var(--rundung);
  color: var(--warn);
  font-size: 0.88rem;
}