/* Park-App, Mockup. Formensprache uebernommen aus der Tank-App:
   ein Bildschirm, aus dem Autohalter lesbar, mit dem Daumen bedienbar.
   Leitplanken: nichts unter 26px in der Hauptflaeche, jede Trefferflaeche ueber die
   volle Breite und mindestens 58px hoch, kein Scrollen der Seite.

   Neu gegenueber Tanken: die Preisfarbe ist hier die Hauptinformation. Gruen heisst
   kostenlos, danach steigt die Farbe von hellorange bis tiefrot. Bei Sprit lagen die
   Preise dicht beieinander, beim Parken reicht die Spanne von 0 bis ueber 3 Euro,
   und genau das soll man im Vorbeischauen sehen. */

:root {
  --blau:   #0091c8;   /* PIG-Blau, nur fuer Bedienelemente */
  --gruen:  #17864a;   /* kostenlos */

  /* Preisstufen, hell nach dunkel. Bewusst nicht als Farbverlauf gerechnet,
     sondern von Hand gesetzt: der Sprung von Stufe zu Stufe muss sichtbar sein. */
  --p1: #c98a00;       /* bis 1,00 EUR je Stunde */
  --p2: #d96a00;       /* bis 2,00 */
  --p3: #cb4c12;       /* bis 2,50 */
  --p4: #c02626;       /* bis 3,20 */
  --p5: #8d1616;       /* darueber */

  --bg:     #f4f5f7;
  --karte:  #ffffff;
  --text:   #10131a;
  --leise:  #5b6472;
  --linie:  #d9dde4;
  --gedimmt:#8a93a1;

  /* Schrift auf den Preisfarben. Hell ueber dunklen Stufen, dunkel ueber den
     hellen Stufen des Dunkelmodus. Als Token, damit die Umschaltung an EINER
     Stelle passiert und nicht in drei Regeln im Dunkelmodus-Block. */
  --auf-farbe: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen:  #3ddc84;
    /* Im Dunkelmodus muessen die Stufen heller werden, sonst verschwinden die
       teuren Karten im Hintergrund und die Ampel kippt in der Aussage. */
    --p1: #e8b13a;
    --p2: #f08a2a;
    --p3: #ef6a3c;
    --p4: #ff6b6b;
    --p5: #d94040;

    --bg:     #0b0d10;
    --karte:  #171b21;
    --text:   #f2f4f7;
    --leise:  #98a2b3;
    --linie:  #2a3038;
    --gedimmt:#6b7480;

    --auf-farbe: #10131a;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

.app {
  display: grid;
  /* Kopf, Arten, Sortierung, Zusatzzeile, Ampel, Filter, Liste, Aktualisieren,
     Banner, Fuss. Die Zahl der Zeilen muss zur Zahl der Kinder passen, sonst
     entsteht eine Zusatzzeile und der Fuss rutscht aus dem Bild. */
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto auto;
  /* minmax(0, 1fr) statt 1fr: sonst wird die Spalte so breit wie ihr breitester
     Inhalt und sprengt schmale Bildschirme. */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  height: 100dvh;
  height: -webkit-fill-available;
  /* Frueher standen hier 30 px oben, um Platz fuer das MOCKUP-Band zu lassen. Das
     Band ist mit den echten Daten weggefallen, der Platz gehoert der Liste. */
  padding: calc(env(safe-area-inset-top) + 5px) 8px calc(env(safe-area-inset-bottom) + 2px);
}

/* ---------- Ladebalken ----------
   Bewusst ganz oben und dick genug, um im Augenwinkel aufzufallen, ohne dass man
   den Blick von der Strasse nehmen muss. Gleiche Bauart wie in der Tank-App. */

.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--linie);
  z-index: 50;
  opacity: 1;
  transition: opacity .25s ease;
}
.fortschritt.weg { opacity: 0; }

.balken {
  height: 100%;
  width: 0;
  background: var(--blau);
  transition: width .3s ease;
}

/* Umkreis, Trefferzahl, Herkunft des Standortes. */
.sort-zusatz {
  min-height: 17px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--leise);
  text-align: center;
}

#btnNeu { margin-top: 7px; }
.fuss { margin-top: 2px; }

/* ---------- Band fuer das Mockup ---------- */

.probe-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 5px 8px;
  background: #c02626;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-align: center;
}

/* ---------- Kopfzeile ----------
   ZWEI Zeilen: oben welche App das hier ist, darunter die anderen Apps als
   Pillen. Vorher stand alles nebeneinander, und bei zwei Pillen blieben dem
   Namen 102 von 173 noetigen Pixeln: aus "Parken by ManniMindset" wurde
   "Parken by ...". Die eigene Marke abzuschneiden ist das Gegenteil von dem,
   was sie leisten soll.
   Die zweite Zeile kostet rund 33 px. Die gehen von der Liste ab, denn sie ist
   die einzige mitwachsende Zeile (minmax(0,1fr)) und scrollt ohnehin selbst. */

.kopf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 2px;
  min-width: 0;
}
/* Zeile 1 */
.kopf-ich {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 0;
}
/* Groesser als in der ersten Fassung: bei 30 px war die Marke im Vorbeischauen
   nicht erkennbar, und genau das ist ihre Aufgabe. */
.kopf-zeichen { height: 36px; width: 36px; flex: none; display: block; }
.kopf-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--leise);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopf-name b { color: var(--blau); margin-left: 5px; font-size: 13px; }

/* Zeile 2: BEIDE anderen Apps, nicht nur eine. Mit drei Apps waere ein einzelner
   Sprung eine Kette: von Parken nach Tempo nur ueber Tanken.
   Beide Pillen gleich breit ueber die ganze Zeile: das gibt am Steuer grosse
   Trefferflaechen und nimmt die Formensprache der Umschalter darunter auf. */
.wechsel-gruppe {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.kopf-wechsel {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--blau);
  color: var(--blau);
  font-size: 13px; font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.kopf-wechsel img { height: 24px; width: auto; display: block; }
.kopf-wechsel:active { transform: scale(.94); }

/* Die frueher noetige Regel, die unter 460 px die Beschriftung ausblendete, ist
   entfallen: in der eigenen Zeile ist selbst auf 320 px Platz fuer Zeichen UND
   Wort. Genau dafuer ist die Zeile da. */

/* ---------- Druckrueckmeldung ----------
   Wichtigste einzelne Massnahme: die Hand bekommt sofort Antwort, lange bevor
   Daten da sind. */

.segment, .kippzeile, .karte, .knopf, .werbe-banner, .d-los {
  transition: transform .08s ease, filter .08s ease, background-color .15s ease;
}
.segment:active, .kippzeile:active, .karte:active, .knopf:active,
.werbe-banner:active, .d-los:active {
  transform: scale(.97);
  filter: brightness(1.18);
}

/* ---------- Umschalter ---------- */

.umschalter {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18);
}

.markierer {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 3);
  border-radius: 12px;
  background: var(--blau);
  box-shadow: 0 2px 8px rgba(0, 145, 200, .45);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.markierer.zwei { width: calc((100% - 10px) / 2); }
.markierer.drei { width: calc((100% - 10px) / 3); }
.markierer.vier { width: calc((100% - 10px) / 4); }

.segment {
  position: relative;
  z-index: 1;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: var(--leise);
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
}
.segment[aria-pressed="true"] { color: #fff; font-weight: 800; }
.umschalter.gross .segment { min-height: 52px; font-size: 21px; }
.umschalter:not(.gross) .segment { min-height: 42px; font-size: 18px; }

/* ---------- 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(--gruen); }
.ampel-feld.p1 { background: var(--p1); }
.ampel-feld.p2 { background: var(--p2); }
.ampel-feld.p3 { background: var(--p3); }
.ampel-feld.p4 { background: var(--p4); }
.ampel-feld.p5 { background: var(--p5); }
/* Die zwei hellen Stufen tragen dunkle Schrift. Mit Weiss kamen sie im Hellmodus
   nur auf 2,95:1 und 3,49:1, das ist fuer 11px zu wenig. Dunkel liegt bei 6,3:1. */
.ampel-feld.p1, .ampel-feld.p2 { color: #10131a; }

/* Zwei ehrliche Sonderfaelle, ohne die die Skala luegen wuerde.
   "Gebühr": kostenpflichtig, aber keine Quelle nennt den Betrag. Orange, damit
   klar ist "kostet was", ohne eine Zahl zu behaupten.
   "?": gar keine Angabe. Bewusst nur Umriss, damit es sich sichtbar aus der
   Farbskala heraushaelt und nicht wie eine Preisstufe wirkt. */
.ampel-feld.gebuehr { background: var(--p2); color: #10131a; }
.ampel-feld.unbekannt {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--leise);
}

/* ---------- Kippschalter fuer den Filter ---------- */

.kippzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.kz-text { display: flex; flex-direction: column; min-width: 0; }
.kz-titel { font-size: 17px; font-weight: 700; white-space: nowrap; }
.kz-unter { font-size: 13px; color: var(--leise); white-space: nowrap; }

.kippe {
  position: relative;
  flex: none;
  width: 60px;
  height: 34px;
  border-radius: 999px;
  background: var(--gedimmt);
  transition: background-color .2s ease;
}
.kippe-knopf {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.kippzeile[aria-checked="true"] .kippe { background: var(--gruen); }
.kippzeile[aria-checked="true"] .kippe-knopf { transform: translateX(26px); }

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

.listenraum { position: relative; min-height: 0; display: grid; }

.liste {
  display: grid;
  grid-auto-rows: max-content;
  gap: 5px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.karte {
  border-radius: 14px;
  background: var(--karte);
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  overflow: hidden;
  cursor: pointer;
}
.karte.auf { border-color: var(--blau); }
/* Der linke Balken tragt die Preisfarbe. Dadurch ist die Karte auch dann noch
   lesbar, wenn der Daumen das Preisschild verdeckt. */
.karte.frei { border-left-color: var(--gruen); }
.karte.s1 { border-left-color: var(--p1); }
.karte.s2 { border-left-color: var(--p2); }
.karte.s3 { border-left-color: var(--p3); }
.karte.s4 { border-left-color: var(--p4); }
.karte.s5 { border-left-color: var(--p5); }

/* 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(--gruen); font-size: 21px; letter-spacing: .5px; }
.schild.s1 { background: var(--p1); }
.schild.s2 { background: var(--p2); }
.schild.s3 { background: var(--p3); }
.schild.s4 { background: var(--p4); }
.schild.s5 { background: var(--p5); }
/* Gleiche Begruendung wie bei der Ampel: helle Stufe, dunkle Schrift. */
.schild.s1, .schild.s2 { color: #10131a; }

/* Kostenpflichtig ohne bekannten Betrag, und voellig ohne Angabe. */
.schild.gebuehr { background: var(--p2); color: #10131a; font-size: 21px; }
.schild.unbekannt {
  background: transparent;
  border: 2px solid var(--linie);
  color: var(--leise);
  font-size: 21px;
}

/* Der linke Kartenbalken traegt dieselbe Aussage wie das Schild, damit sie auch
   lesbar bleibt, wenn der Daumen das Schild verdeckt. */
.karte.gebuehr { border-left-color: var(--p2); }
.karte.unbekannt { border-left-color: var(--gedimmt); }

/* ---------- Datenstand am Aktualisieren-Knopf ----------
   Gleiche Loesung wie in der Tank-App: die Frische gehoert an den Knopf, der die
   Daten holt. Weisse Schrift direkt auf PIG-Blau kaeme bei 13 px nur auf 3,57:1,
   deshalb die dunkle Auflage. */
.knopf-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  min-width: 0;
}
.btn-stand {
  margin-top: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.btn-stand.warn { background: var(--p4); color: var(--auf-farbe); }
.btn-stand:empty { display: none; }

.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(--gruen);
  color: var(--auf-farbe);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pille.knapp { background: var(--p4); }
/* "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; }
.d-los {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--blau);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
/* 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); }

@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.karte.auf .detail { animation: aufklappen .22s ease-out both; }

@keyframes reinrutschen {
  from { opacity: .25; transform: translateY(9px); }
  to   { opacity: 1;   transform: none; }
}
.schwung .karte { animation: reinrutschen .3s ease-out both; }
.schwung .karte:nth-child(2) { animation-delay: .04s; }
.schwung .karte:nth-child(3) { animation-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  .schwung .karte, .karte.auf .detail { animation: none; }
  .markierer, .kippe-knopf, .segment, .kippzeile, .karte, .knopf { transition: none; }
}

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

/* ---------- Aktion, Banner, Fuss ---------- */

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.knopf.knopf-breit { width: 100%; }
.knopf-icon { font-size: 26px; }

.werbe-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--blau);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.wb-text {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-funke { font-size: 16px; }
.wb-pfeil { font-size: 22px; font-weight: 800; }

.fuss {
  display: flex;
  justify-content: center;
  font-size: 11px;
  color: var(--leise);
}
.fuss .quelle { text-align: center; }
.fuss .quelle a { color: var(--leise); text-decoration: underline; }