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

   Die Farbe ist hier die Hauptinformation, aber sie zeigt einen ZUSTAND, keinen
   Betrag: kostenlos, kostenlos nur fuer Kunden, kostenpflichtig, keine Angabe.
   Mehr geben die offenen Daten nicht her, und mehr soll die Farbe deshalb auch
   nicht behaupten. */

:root {
  /* VIER Zustaende statt fuenf Preisstufen (Manni, 30.07.2026). Eine Farbskala
     ueber Betraege behauptet eine Genauigkeit, die die Daten nicht hergeben:
     von 1.141 Parkplaetzen nennen fuenf einen Betrag. */
  --frei:      #17864a;   /* kostenlos, ohne Bedingung */
  --kunden:    #0a7d86;   /* kostenlos, aber nur fuer Kunden des Betriebs */
  --kosten:    #d96a00;   /* kostenpflichtig, Betrag meist unbekannt */
  --unbekannt: #8a93a1;   /* niemand sagt etwas dazu */

  /* Schrift auf den Zustandsfarben. Als Token, damit die Umschaltung an EINER
     Stelle passiert und nicht in drei Regeln im Dunkelmodus-Block. */
  --auf-farbe: #fff;

  /* Die Warnfarbe der Basis auf die eigene Skala legen. */
  --warn: var(--kosten);
  --auf-warn: var(--auf-farbe);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Im Dunkelmodus muessen die Farben heller werden, sonst verschwinden die
       Karten im Hintergrund. */
    --frei:      #3ddc84;
    --kunden:    #4dd0d8;
    --kosten:    #f08a2a;
    --unbekannt: #6b7480;

    --auf-farbe: #10131a;

    /* Paarweise mitziehen, sonst steht die Warnung im Dunkeln falsch herum. */
    --warn: var(--kosten);
    --auf-warn: var(--auf-farbe);
  }
}

/* Kopf, Arten, Werkzeugzeile, Zusatzzeile, Liste, Werbung, Fuss.
   SIEBEN Zeilen statt zehn (Manni, 30.07.2026). Gemessen auf einem iPhone SE:
   die alten zehn Zeilen frassen 488 von 568 px, der Liste blieben 79 px, also
   1,2 Karten. Weggefallen sind die eigene Sortierzeile (in die Werkzeugzeile
   gewandert), die Farblegende (die Schilder tragen das Wort selbst) und der
   Aktualisieren-Knopf (sitzt als ⟳ in der Kopfzeile).
   Die Zahl der Zeilen muss zur Zahl der Kinder passen, sonst entsteht eine
   Leerzeile und der Fuss rutscht aus dem Bild. */
.app { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }

/* ---------- Werkzeugzeile ----------
   Sortierung und Filter nebeneinander statt untereinander. Die Sortierung nimmt
   den Platz, den sie braucht, der Filter den Rest. Bei 320 px sind das rund
   150 px je Haelfte, und mehr braucht keiner von beiden. */
.werkzeugzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

/* Der Filter als Chip statt als ganze Zeile. Er behaelt eine Trefferflaeche von
   44 px, nur die Breite schrumpft: die Beschriftung "Nur kostenlose zeigen"
   stand ohnehin doppelt, einmal hier und einmal als gruenes Schild. */
.filterchip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 10px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.filterchip[aria-checked="true"] { border-color: var(--frei); }
.fc-kippe {
  flex: none;
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--linie);
  padding: 2px;
  transition: background-color .18s ease;
}
.filterchip[aria-checked="true"] .fc-kippe { background: var(--frei); }
.fc-knopf {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}
.filterchip[aria-checked="true"] .fc-knopf { transform: translateX(14px); }

/* Aktualisieren als Zeichen in der Kopfzeile. Ersetzt einen 59 px hohen Knopf
   und kostet keine eigene Zeile, weil die Kopfzeile so hoch ist wie das
   App-Zeichen daneben. */
/* Der ⟳-Kopfknopf ist ausgebaut (Manni, 31.07.2026): aktualisiert wird
   automatisch und per Ziehen der Liste (Zieh-CSS in /app/basis.css). */

/* Das Schild im Kopf des Blattes, damit dort dieselbe Farbe steht wie auf der
   Karte, von der man kommt. */
.bl-schild {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 7px;
  background: var(--unbekannt);
  color: var(--auf-farbe);
  font-size: .88em;
  font-weight: 800;
}
/* Die Zusatzzeile darf NIE umbrechen: sie ist eine Randnotiz, und zwei Zeilen
   davon kosten so viel wie eine halbe Karte. Gemessen waren es 32 statt 15 px. */
.sort-zusatz {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.bl-schild.frei   { background: var(--frei); }
.bl-schild.kunden { background: var(--kunden); }
.bl-schild.kosten { background: var(--kosten); }

/* ---------- Preis-Ampel ----------
   Die Legende zur Farbskala. Sie kostet 22 px und spart die Erklaerung: ohne sie
   weiss niemand, ob dunkelrot "teuer" oder "belegt" heisst. */

.ampel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 0 2px;
}
.ampel-feld {
  padding: 3px 0;
  border-radius: 6px;
  color: var(--auf-farbe);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .2px;
}
.ampel-feld.frei   { background: var(--frei); }
.ampel-feld.kunden { background: var(--kunden); }
.ampel-feld.kosten { background: var(--kosten); }

/* "Keine Angabe" ist keine Farbe, sondern eine Luecke, und sieht deshalb als
   einziges Feld nach Umriss statt nach Fuellung aus. Wer den Unterschied nicht
   liest, sieht ihn wenigstens. */
.ampel-feld.unbekannt {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
}

/* ---------- Filter ---------- */

/* Hier gruen statt blau: der Schalter zeigt "nur kostenlose", und Gruen ist in
   dieser App die Farbe fuer kostenlos. */
.kippzeile[aria-checked="true"] .kippe { background: var(--frei); }

/* Das gruene Schild mitten in der Beschriftung. Bewusst dieselbe Farbe und
   dieselbe weisse Schrift wie das Schild auf den Karten, nur kleiner: der
   Schalter soll aussehen wie das, was er uebrig laesst.
   vertical-align und die feste Zeilenhoehe halten die Zeile ruhig, sonst
   schoebe das Schild die ganze Kippzeile um zwei Pixel auseinander. */
.frei-schild {
  display: inline-block;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--frei);
  color: var(--auf-farbe);
  font-size: .82em;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.45;
  vertical-align: baseline;
}

/* ---------- Liste ---------- */

/* position: relative traegt die Zieh-Anzeige aus der Basis. */
.listenraum { display: grid; position: relative; min-height: 0; }

/* Der linke Balken traegt die Preisfarbe. Dadurch ist die Karte auch dann noch
   lesbar, wenn der Daumen das Preisschild verdeckt. */
.karte.frei      { border-left-color: var(--frei); }
.karte.kunden    { border-left-color: var(--kunden); }
.karte.kosten    { border-left-color: var(--kosten); }
.karte.unbekannt { border-left-color: var(--unbekannt); }

/* Gemeinsames Raster: Platzziffer, Preisschild, Name, Entfernung, Anfasser.
   Feste Spaltenbreiten, damit die Preise aller Karten exakt untereinander
   beginnen und beim Nachladen keine Spalte springt. */
.karte-kopf {
  display: grid;
  grid-template-columns: 22px 76px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 0 10px;
}

.platz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--linie);
  color: var(--leise);
  font-size: 14px; font-weight: 800;
}

/* Das Preisschild. Farbe statt Zahlenlesen: im Vorbeischauen erkennt man an der
   Farbe, ob es kostenlos ist, und liest die Zahl nur bei Bedarf. */
.schild {
  display: block;
  width: 100%;
  padding: 6px 2px;
  border-radius: 8px;
  color: var(--auf-farbe);
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
}
.schild .einheit { display: block; font-size: 11px; font-weight: 700; opacity: .92; }
.schild.frei   { background: var(--frei); font-size: 21px; letter-spacing: .5px; }
.schild.kunden { background: var(--kunden); }
.schild.kosten { background: var(--kosten); }
/* Gleiche Begruendung wie bei der Ampel: eine Luecke bekommt einen Umriss. */
.schild.unbekannt {
  background: transparent;
  border: 2px solid var(--linie);
  color: var(--leise);
  font-size: 21px;
}

.name { font-size: 18px; font-weight: 700; line-height: 1.15; }
.name .ort {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rechts { text-align: right; min-width: 58px; }
.km { font-size: 17px; font-weight: 700; color: var(--leise); line-height: 1.15; }
/* Freie Plaetze als Pille: die Zahl ist beim Parken so wichtig wie der Preis,
   als blasse Zeile wuerde sie untergehen. */
.pille {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--frei);
  color: var(--auf-farbe);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pille.knapp { background: var(--kosten); }
/* "Zaehlung fehlt" ist die unwichtigste Aussage der Karte und bekommt deshalb
   einen Umriss statt einer Fuellung. Gefuellt grau kam im Dunkelmodus ausserdem
   nur auf 3,9:1 Kontrast, zu wenig fuer 12px. */
.pille.ohne {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
  font-weight: 700;
}

.pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--linie);
  color: var(--blau);
  font-size: 18px;
  line-height: 1;
}
.karte.auf .pfeil { background: var(--blau); border-color: var(--blau); color: #fff; }

/* ---------- Aufgeklappter Teil ---------- */

.detail {
  padding: 0 10px 10px 10px;
  display: grid;
  gap: 7px;
}
.d-zeile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.d-zeile span:first-child { color: var(--leise); font-weight: 600; }
.d-zeile span:last-child { font-weight: 700; text-align: right; }
/* Der Knopf zum Losfahren steht in /app/basis.css. Er sah hier vorher anders aus
   als in der Tank-App (46 statt 54 px, Pfeil statt Maps-Zeichen), und genau das
   soll bei gleicher Aufgabe nicht sein.
   Nur der Rand ist hier eigen: die Detailzeilen tragen ihren Abstand schon
   selbst, sonst steht der Knopf doppelt eingerueckt. */
.d-los { margin: 4px 0 2px; }
/* Herkunft der Zahl steht in der Karte, nicht im Impressum: bei Parkdaten ist die
   Quelle die halbe Auskunft, weil die Abdeckung so unterschiedlich ist. */
.d-quelle { font-size: 12px; color: var(--leise); }

/* Die Bewegungsregeln selbst stehen in der Basis. */
.karte.auf .detail { animation: aufklappen .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .karte.auf .detail { animation: none; }
}

.leer {
  align-self: center;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
  color: var(--leise);
  padding: 16px 10px;
}

/* ---------- Enge Karten auf kleinen Bildschirmen ----------
   Manni, 31.07.2026: "die einzelnen Zeilen müssen viel enger sein, damit mehr
   Platz geschaffen wird."

   Gerechnet: die Karte war 64 px hoch, bei 327 px Liste sind das 5,1 Karten.
   Mit 46 px sind es 6,7. Die Karte BLEIBT damit weit ueber den 36 px, die eine
   Trefferflaeche mindestens braucht; sie ist ja die groesste Flaeche der App.
   Gekuerzt wird an Luft und Schriftgroesse, nicht am Inhalt: Platzziffer,
   Schild, Name, Ort, Entfernung und Pille stehen weiter alle da. */
@media (max-height: 640px) {
  .karte-kopf {
    grid-template-columns: 18px 62px minmax(0, 1fr) auto 24px;
    min-height: 46px;
    gap: 6px;
    padding: 0 8px;
  }
  .platz { width: 18px; height: 18px; font-size: 12px; }
  .schild { padding: 3px 2px; font-size: 16px; border-radius: 7px; }
  .schild.frei { font-size: 17px; }
  .schild.unbekannt { font-size: 17px; border-width: 2px; }
  .schild .einheit { font-size: 9px; }
  .name { font-size: 15px; line-height: 1.1; }
  .name .ort { margin-top: 0; font-size: 11px; }
  .rechts { min-width: 48px; }
  .km { font-size: 14px; line-height: 1.1; }
  .pille { margin-top: 1px; padding: 0 6px; font-size: 10.5px; }
  .pfeil { width: 24px; height: 24px; border-width: 2px; font-size: 15px; }
}