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

   DIE FARBE ZEIGT HIER ERREICHBARKEIT, KEINE SORTE.

   Ob etwas Freifunk, Bibliothek oder Cafe ist, sagt das Zeichen davor. Die
   Farbe beantwortet die eine Frage, um die es geht: KOMME ICH DA JETZT REIN.
   Deshalb genau vier Stufen und keine Sortenfarben, die mit ihnen um
   Aufmerksamkeit ringen wuerden. */

:root {
  --gut:       #3FC98A;   /* reicht zeitlich, hingehen lohnt */
  --knapp:     #FF6B1A;   /* geht, aber ohne Troedeln */
  --spaet:     #9B8E76;   /* heute nicht mehr, oder geschlossen */
  --unbekannt: #6A604F;   /* keine Zeit hinterlegt, wir wissen es schlicht nicht */

  /* Die Warnfarbe der Basis auf die eigene Skala legen. */
  --warn: var(--knapp);
  --auf-warn: #0B0A07;
}

/* Kopf, Gruppen, Werkzeugzeile, Standort, Zusatzzeile, Liste, Werbung.
   SIEBEN Zeilen, und die Zahl muss zur Zahl der sichtbaren Kinder
   passen, sonst entsteht eine Leerzeile und die Werbung rutscht aus dem Bild.
   Am 05.08.2026 kam die Standortzeile dazu und die Zielkarte fiel weg. */
.app { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; }

/* ---------- Von wo aus gesucht wird ----------

   Beantwortet die Frage, die sich sonst jeder stellt, sobald eine Entfernung
   dasteht: 240 Meter von WO? Deshalb ueber der Zielkarte und nicht klein unten
   in der Zusatzzeile (Manni, 05.08.2026: "ganz deutlich").

   Zwei Zustaende, farblich unterschieden:
     (ohne)   die Adresse kommt vom Ortungsdienst des Geraets
     .ersatz  keine Freigabe oder kein Empfang, gerechnet wird ab dem festen
              Rueckfallpunkt. Amber statt gruen, weil das eine Einschraenkung
              ist und keine Fehlermeldung. */
.standort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--gut) 12%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--gut) 30%, transparent);
  font-size: 13px;
  line-height: 1.32;
  color: var(--text);
  min-height: 38px;
}
.standort.ersatz {
  background: color-mix(in srgb, var(--knapp) 12%, var(--karte));
  border-color: color-mix(in srgb, var(--knapp) 32%, transparent);
}
.st-nadel { flex: none; display: flex; color: var(--gut); }
.standort.ersatz .st-nadel { color: var(--knapp); }
.st-text { flex: 1 1 auto; min-width: 0; }
/* Die Adresse traegt das Gewicht, das Wort davor bleibt leise. */
.st-vor { color: var(--leise); font-weight: 600; }
/* Einzeilig halten: eine lange Adresse darf abgeschnitten werden, aber die
   Zeile darf nicht umbrechen. Mit zwei Zeilen mass die Standortzeile 51 statt
   34 px, und die 17 px fehlten unten in der Liste. Genauigkeit und Hinweis
   stehen ohnehin in der leisen Zeile darunter. */
.st-adr {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Die vier Arten ----------
   MEHRFACHAUSWAHL, deshalb kein Umschalter mit gleitendem Markierer: der kann
   immer nur eines. Vier eigene Schalter, jeder fuer sich an oder aus.

   Sie duerfen umbrechen. Gemessen bei 375 px: die vier Woerter brauchen
   ausgeschrieben mehr als eine Zeile, und "Briefkasten" abzukuerzen ginge nur
   auf Kosten der Verstaendlichkeit. Zwei Zeilen Chips sind besser als vier
   Raetsel. */
/* ZWEI MAL ZWEI, ALLE GLEICH GROSS (Manni, 05.08.2026: "alle Buttons gleich
   groß machen"). Vorher wuchsen sie mit ihrer Beschriftung, "Shop" war halb so
   breit wie "Briefkasten", und die Reihe sah aus wie zufaellig gesetzt. Ein
   Raster mit zwei gleichen Spalten macht daraus vier gleiche Flaechen. */
.artchips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.artchip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  border: 2px solid var(--linie);
  border-radius: 13px;
  background: var(--karte);
  color: var(--gedimmt);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.artchip[aria-checked="true"] {
  border-color: var(--akzent);
  color: var(--text);
}
.ac-zeichen { flex: none; display: flex; opacity: .55; }
.artchip[aria-checked="true"] .ac-zeichen { opacity: 1; color: var(--akzent-text); }
.ac-wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wie viel davon im geladenen Paket steckt. Leise: es ist eine Auskunft,
   keine Ansage. */
.ac-zahl {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--gedimmt);
  font-variant-numeric: tabular-nums;
}
.artchip[aria-checked="true"] .ac-zahl { color: var(--akzent-text); }
/* Steht dort eine Null, ist das keine Panne: Paketshops sind im Saarland
   ueberhaupt nicht erfasst. Der Chip bleibt bedienbar, wird aber blass, damit
   niemand dahinter einen Fehler sucht. */
.artchip.nix { opacity: .45; }

/* ---------- Werkzeugzeile ----------
   Ein Umschalter mit zwei Segmenten statt eines Kippschalters (Manni,
   05.08.2026). Das Aussehen kommt vollstaendig aus /app/basis.css, wie in
   Tanken und Parken; hier bleibt nur die Breite. */
.werkzeugzeile { display: flex; }
.werkzeugzeile .umschalter { flex: 1 1 auto; }

.sort-zusatz {
  font-size: 12px;
  color: var(--gedimmt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Die drei Verkehrsmittel ----------
   Drei Knoepfe statt einem (Manni, 04.08.2026). Vorgewaehlt ist der, mit dem
   man es laut Rechnung schafft. Alle drei bleiben antippbar: die Rechnung
   schaetzt, entscheiden soll der Mensch. */
/* EINE Zeile statt zweizeiliger Knoepfe (Manni, 05.08.2026: "darunter ist so
   viel Platz, bis die Buttons kommen"). Die Verkehrsmittel stehen als Zeichen
   da, die Minutenzahl daneben; ausgeschrieben brauchte jeder Knopf zwei Zeilen
   und die Reihe 44 px, jetzt sind es 30.

   Ganz links steht EINMAL das Maps-Zeichen mit dem Wort, damit klar ist, wohin
   der Tipp fuehrt. Vor jedem der drei Knoepfe stuende dreimal dasselbe. */
.nav-zeile { display: flex; align-items: stretch; gap: 5px; margin-top: 6px; }
.nav-quelle {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 3px;
  color: var(--gedimmt);
}
.nav-quelle-wort {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}
/* SICHTBAR EIN KNOPF (Manni, 05.08.2026: "die drei Buttons bitte mehr als
   Button dastehen lassen"). Vorher waren es Umrisse auf durchsichtigem Grund
   und damit kaum von Text zu unterscheiden. Jetzt mit eigener Flaeche, klarer
   Kante und einem Schatten, der beim Druecken verschwindet.

   KEINE VORAUSWAHL mehr: die frueher hervorgehobene Empfehlung wechselte von
   Karte zu Karte und sah willkuerlich aus. Alle drei sind gleichwertig. */
.nav-knopf {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 8%, var(--karte));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.nav-knopf:active {
  background: color-mix(in srgb, var(--akzent) 25%, var(--karte));
  border-color: var(--akzent);
  box-shadow: none;
  transform: translateY(1px);
}
/* Wort und Zahl nebeneinander, beide klein genug fuer eine Zeile. Gemessen
   bei 375 px: je Knopf bleiben 89 px, "zu Fuß 38 Min" braucht davon 72. */
.nk-wort {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.nk-zeit {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Die Einheit an JEDEN Knopf. Nur am letzten stand sie zuerst, und dann las
   sich die Reihe als "Maps 5 1 1", also wie drei Nummern ohne Bedeutung. */
.nk-zeit::after { content: ' Min'; font-size: 9px; font-weight: 700; opacity: .7; }

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

   ALLE KARTEN GLEICH (Manni, 05.08.2026). Jede traegt, was zum Losgehen noetig
   ist: was es ist, wie weit, wo genau, wann geleert wird, und die drei Wege.
   Damit gibt es keine Sonderkarte mehr, keine zwei Formate und keine Frage,
   warum der erste Eintrag anders aussieht. */
.listenraum { display: grid; position: relative; min-height: 0; }

.karte {
  position: relative;
  box-sizing: border-box;
  padding: 9px 11px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--unbekannt);
  border-radius: 13px;
  background: var(--karte);
  cursor: pointer;
}
.karte.gut       { border-left-color: var(--gut); }
.karte.knapp     { border-left-color: var(--knapp); }
.karte.spaet     { border-left-color: var(--spaet); }
.karte.unbekannt { border-left-color: var(--unbekannt); }

/* Die erste Karte ist die Empfehlung.

   Die Pille sass bis zum 05.08.2026 mit "top: -8px" ueber dem oberen Rand und
   war deshalb bei der ersten Karte GAR NICHT ZU SEHEN: die Liste hat
   "overflow-y: auto" und schneidet alles ab, was darueber hinausragt (Manni:
   "da ist irgendwas Gelbes, die kann man so nicht sehen"). Jetzt steht sie
   INNERHALB der Karte, direkt neben der Entfernung, wo ohnehin Platz ist. */
.karte.empfehlung { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.k-band {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kopfzeile der Karte: LINKS was und wie weit, RECHTS wo (Manni, 05.08.2026:
   "die Adresse nicht unten drunter, sondern rechts daneben vielleicht
   zweizeilig"). Beide Spalten sind zweizeilig und damit gleich hoch; das spart
   gegenueber einer eigenen Adresszeile rund 28 px je Karte. */
.k-kopf { display: flex; align-items: stretch; gap: 8px; }
.k-zeichen { flex: none; display: flex; align-items: center; color: var(--gedimmt); }
.karte.gut .k-zeichen, .karte.knapp .k-zeichen { color: var(--akzent-text); }

.k-links {
  flex: 1 1 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ZWEI ZEILEN FUER DEN NAMEN (Manni, 05.08.2026: "Stadtbibliothek
   Neunkirchen" war abgeschnitten). Moeglich wurde das, weil Entfernung und
   Empfehlung in die Zeile darunter gewandert sind; die linke Spalte ist so hoch
   wie die Adresse daneben, und die zweite Zeile kostet deshalb NICHTS. Ist der
   Name noch laenger, wird er nach der zweiten Zeile abgeschnitten und steht
   vollstaendig im Titel und im Detail-Blatt. */
.k-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-km {
  font-size: 13px; font-weight: 700; color: var(--leise);
  font-variant-numeric: tabular-nums;
}

/* DIE ADRESSE IST EIN KNOPF. Damit das auch so aussieht, traegt sie einen
   eigenen Rahmen, das Kopier-Zeichen in der Akzentfarbe UND das Wort
   "kopieren" (Manni, 05.08.2026: "muss irgendwie deutlicher sein... oder
   einfach der Hinweis, klicken zum Kopieren"). Ein blasses Zeichen allein
   hatte niemand als Knopf gelesen. */
.k-adr {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  /* Zwei Textzeilen hoch, auch wenn nur eine dasteht. Sonst sind Karten mit
     einzeiliger Adresse fuenf Pixel niedriger, und "alle Karten genauso gross"
     (Manni, 05.08.2026) stimmt wieder nicht ganz. */
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, var(--linie));
  border-radius: 9px;
  background: color-mix(in srgb, var(--akzent) 7%, transparent);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.k-adr:active {
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  border-color: var(--akzent);
}
.k-adr-zeilen { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.k-adr-oben, .k-adr-unten {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.25;
}
.k-adr-oben { font-size: 12.5px; font-weight: 700; }
.k-adr-unten { font-size: 11.5px; color: var(--leise); }
/* Zeichen und Wort untereinander, damit die Spalte schmal bleibt. */
.k-adr-kopie {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--akzent-text);
}
.k-adr-wort {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
/* Solange nur die Koordinate dasteht, weil die Adresse noch nicht da ist. */
.k-adr.roh .k-adr-oben {
  font-family: var(--schrift-zahl);
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
}

/* EINE Zeile fuer Entfernung, Empfehlung und Zustand. Sie steht auch dann da,
   wenn es keine Zeitangabe gibt, und haelt ihre Hoehe: sonst waeren Karten mit
   Zeit hoeher als die ohne, und in einer Liste, in der die Haelfte keine traegt,
   saehe das nach Zufall aus. */
.k-info {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  min-height: 18px;
  font-size: 13px;
}
.k-km { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.k-zeit {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.karte.gut .k-zeit   { color: var(--gut); }
.karte.knapp .k-zeit { color: var(--knapp); }
.karte.spaet .k-zeit { color: var(--leise); font-weight: 600; }
.karte.unbekannt .k-zeit { color: var(--leise); font-weight: 600; }

.leer {
  padding: 24px 16px;
  text-align: center;
  color: var(--gedimmt);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Blatt ---------- */
.bl-stufe { font-weight: 700; }
.bl-stufe.gut   { color: var(--gut); }
.bl-stufe.knapp { color: var(--knapp); }

.d-satz {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 11px;
  border-left: 4px solid var(--unbekannt);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  font-size: 13.5px;
  line-height: 1.4;
}
.d-satz.gut   { border-left-color: var(--gut); }
.d-satz.knapp { border-left-color: var(--knapp); }
.d-satz.spaet { border-left-color: var(--spaet); }

.d-zeile {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--linie);
  font-size: 13.5px;
}
.d-zeile span:first-child { color: var(--leise); flex: none; }
.d-zeile span:last-child { text-align: right; }

.d-hinweis {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--knapp) 12%, transparent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.d-quelle {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--gedimmt);
}