/* nah&offen — Designsystem.
 *
 * Uebernommen aus dem freigegebenen Mockup. Zwei Regeln, die nicht aufgeweicht
 * werden duerfen:
 *   1. Laternengelb erscheint NUR auf Logo und Haupt-Button. Sobald Markenfarbe
 *      und Statusfarbe konkurrieren, kann niemand mehr "offen" auf einen Blick
 *      lesen — und das ist das ganze Produkt.
 *   2. Keine Webfont-Datei. Systemschrift spart 40-120 KB vor dem ersten Rendern
 *      und ist der billigste Punkt auf dem Weg zu gruenen Core Web Vitals.
 *      Charakter kommt ueber Skala, Gewicht und Laufweite.
 */

:root {
  --night: #0e1a2b;
  --deep: #16263d;
  --panel: #1b2e48;
  --line: #28405f;
  --ink: #f2f6fb;
  --ink-2: #a9bcd3;
  --ink-3: #6e86a3;
  --lamp: #ffc53d;

  --open: #16a34a;
  --soon: #f59e0b;
  --shut: #6b7280;

  --bg: var(--night);
  --surface: var(--deep);
  --card: var(--panel);
  --text: var(--ink);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --border: var(--line);
  --cta-bg: var(--lamp);
  --cta-ink: #1a1204;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);

  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
  --f-disp: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --f-num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Tagvariante: eigener Entwurf, keine Invertierung. Die Sonntagsfrage stellt
   sich mittags — dann muss die Seite bei Sonne lesbar sein. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f1f4f8;
    --surface: #ffffff;
    --card: #ffffff;
    --text: #0e1a2b;
    --muted: #4a6180;
    --faint: #7c93af;
    --border: #dde4ec;
    --cta-ink: #231704;
    --shadow: 0 1px 2px rgba(14, 26, 43, 0.07), 0 10px 28px -16px rgba(14, 26, 43, 0.35);
  }
}
:root[data-theme='light'] {
  --bg: #f1f4f8;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #0e1a2b;
  --muted: #4a6180;
  --faint: #7c93af;
  --border: #dde4ec;
  --cta-ink: #231704;
  --shadow: 0 1px 2px rgba(14, 26, 43, 0.07), 0 10px 28px -16px rgba(14, 26, 43, 0.35);
}
:root[data-theme='dark'] {
  --bg: #0e1a2b;
  --surface: #16263d;
  --card: #1b2e48;
  --text: #f2f6fb;
  --muted: #a9bcd3;
  --faint: #6e86a3;
  --border: #28405f;
  --cta-ink: #1a1204;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-disp);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 {
  font-size: 1.5rem;
  font-weight: 800;
}
h2 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
p {
  margin: 0;
}
a {
  color: inherit;
}

.num {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Tastaturfokus muss sichtbar sein — Barrierefreiheit ist nicht optional. */
:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Rahmen ---------- */
.shell {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
}

.appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.wordmark {
  font-weight: 800;
  letter-spacing: -0.045em;
  font-size: 1.05rem;
  text-decoration: none;
}
.wordmark .amp {
  color: var(--lamp);
}

/* ---------- Suche und Filter ---------- */
.searchbar {
  margin: 12px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 11px 15px;
  font-size: 0.88rem;
  color: var(--muted);
}

.chips {
  display: flex;
  gap: 7px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  white-space: nowrap;
  font-size: 0.79rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip.on {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border-color: transparent;
}

/* ---------- Live-Zaehler: der eigentliche Nutzwert, steht vor der Liste ---------- */
.livebar {
  margin: 0 16px 12px;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 11px;
}
.livedot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--open);
  flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--open) 22%, transparent);
}
.livebar b {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  display: block;
}
.livebar span.sub {
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
  line-height: 1.4;
}

/* ---------- Ladenliste ---------- */
.list {
  display: grid;
}
.shop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.shop:hover {
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.shop-name {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.shop-meta {
  font-size: 0.79rem;
  color: var(--muted);
  line-height: 1.45;
}
.shop-dist {
  font-family: var(--f-num);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.pill i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  flex: none;
  font-style: normal;
}
.pill.open {
  background: color-mix(in srgb, var(--open) 17%, transparent);
  color: var(--open);
}
.pill.soon {
  background: color-mix(in srgb, var(--soon) 19%, transparent);
  color: var(--soon);
}
.pill.shut {
  background: color-mix(in srgb, var(--shut) 20%, transparent);
  color: var(--muted);
}

/* ---------- Vertrauens-Ampel: der Baustein, den kein Wettbewerber hat ---------- */
.trust {
  font-size: 0.69rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.trust::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--faint);
  flex: none;
}
.trust.fresh::before {
  background: var(--open);
}
.trust.stale::before {
  background: var(--soon);
}

/* ---------- Werbeplätze ----------
   Erkennbar anders als der Inhalt, aber nie schreiend. Nie über der Falz,
   nie als Overlay — aufdringliche Interstitials kosten auf Mobilgeräten
   Ranking. Genau eine Einheit je Seite.                                    */
.ad {
  display: block;
  margin: 14px 16px;
  border-radius: var(--r);
  border: 1px solid;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
}
.ad .lab {
  position: absolute;
  top: 9px;
  left: 14px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.ad-in {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 28px 14px 15px;
  min-height: 118px;
}
.ad-tx {
  flex: 1;
  display: grid;
  gap: 4px;
}
.ad-h {
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ad-p {
  font-size: 0.81rem;
  line-height: 1.48;
}
.ad .mehr {
  font-size: 0.77rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Acqua Reaper: hell und clean. Wasser, nicht Energy. */
.ad-acqua {
  background: linear-gradient(168deg, #fcfdfe 0%, #eef3f7 100%);
  border-color: #dce5ec;
  color: #12202e;
}
.ad-acqua .lab {
  color: #8fa3b4;
}
.ad-acqua .ad-p {
  color: #4a6076;
}
.ad-acqua .mehr {
  color: #2c7a9e;
}
.ad-acqua .dosen {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.ad-acqua .reaper {
  height: 74px;
  width: auto;
  flex: none;
  mix-blend-mode: multiply;
}
.ad-acqua .dose {
  height: 108px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 8px 18px rgba(20, 40, 60, 0.16));
}

/* marktcockpit: Zielgruppe in Zeile eins. */
.ad-mc {
  background: color-mix(in srgb, #e07840 8%, var(--card));
  border-color: color-mix(in srgb, #e07840 30%, var(--border));
}
.ad-mc .lab {
  color: var(--faint);
}
.ad-mc .ad-p {
  color: var(--muted);
}
.ad-mc .mehr {
  color: #c0562f;
}
@media (prefers-color-scheme: dark) {
  .ad-mc .mehr {
    color: #ea9a66;
  }
}
:root[data-theme='dark'] .ad-mc .mehr {
  color: #ea9a66;
}
:root[data-theme='light'] .ad-mc .mehr {
  color: #c0562f;
}
.ad-mc .fuer {
  justify-self: start;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #c0562f;
  color: #fff;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 2px;
}
.mc-mark {
  flex: none;
  width: 58px;
  height: 58px;
  opacity: 0.9;
}

/* ---------- Detailseite ---------- */
.crumbs {
  padding: 12px 16px 0;
  font-size: 0.72rem;
  color: var(--faint);
}
.crumbs a {
  text-decoration: none;
}
.detail-head {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-head h1 {
  font-size: 1.24rem;
  margin-bottom: 3px;
}

.hours {
  display: grid;
  padding: 6px 16px 14px;
}
.hrow {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 0.83rem;
  border-bottom: 1px solid var(--border);
}
.hrow:last-child {
  border-bottom: 0;
}
.hrow.today {
  font-weight: 700;
}
.hrow .t {
  font-family: var(--f-num);
  color: var(--muted);
}
.hrow.today .t {
  color: var(--text);
}

.cta,
.ghost {
  display: block;
  text-align: center;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.89rem;
  padding: 13px;
  margin: 12px 16px;
  /* 48 px Mindesthoehe fuer Daumen — Mobile-Richtlinie, nicht Geschmack. */
  min-height: 48px;
}
.cta {
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-weight: 750;
  letter-spacing: -0.01em;
}
.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

/* ---------- Ortstext und Nachbarn ---------- */
.ortstext {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--border);
}
.ortstext p {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.62;
}
.ortstext p + p {
  margin-top: 9px;
}
.ortstext b {
  color: var(--text);
}

.neigh {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 12px 16px 16px;
}
.neigh a {
  font-size: 0.77rem;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  text-decoration: none;
  background: var(--card);
}

/* ---------- Karte ---------- */
.mapbox {
  position: relative;
  /* Feste Hoehe reserviert den Platz -> kein Layout-Shift beim Nachladen. */
  height: 190px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.map-attr {
  position: absolute;
  right: 6px;
  bottom: 5px;
  font-size: 0.6rem;
  color: var(--faint);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  padding: 2px 6px;
  border-radius: 5px;
}

/* ---------- Fuss ---------- */
.fuss {
  border-top: 1px solid var(--border);
  padding: 20px 16px 34px;
  color: var(--faint);
  font-size: 0.76rem;
  display: grid;
  gap: 8px;
}
.fuss nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Die datengetriebene Pointe am Seitenende. Kein Fuelltext: Die Zahlen kommen
   aus der Datenbank, dadurch ist jede Zeile pro Seite einzigartig. */
.pointe {
  padding: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
  .livedot {
    animation: puls 2.6s ease-in-out infinite;
  }
  @keyframes puls {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }
}

/* ---------- Rechtstexte ---------- */
.legal {
  padding: 20px 16px 32px;
}
.legal h1 {
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.legal section {
  margin-top: 22px;
}
.legal h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 7px;
}
.legal p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.66;
  /* Fliesstext bei rund 65 Zeichen halten — darueber wird es unlesbar. */
  max-width: 65ch;
}
.legal p + p {
  margin-top: 9px;
}
.legal strong,
.legal a {
  color: var(--text);
}

/* Betriebshinweis — klar von der Pointe getrennt, damit beides nicht verwechselt wird. */
.hinweis {
  margin: 12px 16px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border);
  font-size: 0.76rem;
  color: var(--faint);
}

/* ---------- Der rote Kuller ----------
   Rot ist frei: Statusfarben sind Grün, Orange, Grau — ein rotes Zeichen kann
   nie mit "offen" oder "zu" verwechselt werden.                             */
.kuller-box {
  margin-left: auto;
  position: relative;
}
.kuller-knopf {
  list-style: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  position: relative;
  color: var(--muted);
}
.kuller-knopf::-webkit-details-marker {
  display: none;
}
.kuller {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: #e23a2e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
.kuller-panel {
  position: absolute;
  right: 0;
  top: 44px;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 11px;
  display: grid;
  gap: 9px;
  z-index: 30;
}
.kuller-panel .ad {
  margin: 0;
}
.fakt {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  display: grid;
  gap: 4px;
}
.fakt .k {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}
.fakt p {
  font-size: 0.83rem;
  line-height: 1.48;
}
.fakt .q {
  font-size: 0.66rem;
  color: var(--faint);
}

/* ---------- Hinweisleisten ----------
   Dringlichkeit steckt in der Farbe, nicht in Ausrufezeichen.               */
.hinweis {
  margin: 11px 16px;
  padding: 11px 13px;
  border-radius: var(--r);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.83rem;
  line-height: 1.45;
  border: 1px solid;
}
.hinweis .ic {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
}
.hinweis b {
  display: block;
  letter-spacing: -0.01em;
}
.hinweis .s {
  color: var(--muted);
  font-size: 0.79rem;
}
.h-feiertag {
  border-color: color-mix(in srgb, var(--soon) 45%, transparent);
  background: color-mix(in srgb, var(--soon) 13%, transparent);
}
.h-feiertag .ic {
  background: var(--soon);
  color: #231704;
}
.h-schluss {
  border-color: color-mix(in srgb, #e23a2e 42%, transparent);
  background: color-mix(in srgb, #e23a2e 11%, transparent);
}
.h-schluss .ic {
  background: #e23a2e;
  color: #fff;
}
.h-sonntag {
  border-color: var(--border);
  background: var(--card);
}
.h-sonntag .ic {
  background: var(--shut);
  color: #fff;
}

/* ---------- Einblendung von unten ----------
   22 % Höhe, drei Sekunden, ab dem zweiten Seitenaufruf. Überlagert nur den
   unteren Rand — Google straft Overlays ab, die Inhalt verdecken.           */
.einblendung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 13px 15px;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 11px;
  align-items: center;
  transform: translateY(110%);
  transition: transform 0.35s ease;
  z-index: 40;
}
.einblendung.an {
  transform: translateY(0);
}
.einblendung .ic {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--lamp);
  color: #1a1204;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.72rem;
}
.einblendung .txt {
  font-size: 0.79rem;
  line-height: 1.42;
  color: var(--muted);
}
.einblendung .txt b {
  display: block;
  font-size: 0.84rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.einblendung .zu {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--faint);
  font-size: 0.9rem;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .einblendung {
    transition: none;
  }
}

/* ============================================================ Karte
   Die Karte steht hinter einem Knopf: MapLibre wiegt ein Megabyte, und die
   meisten Besucher wollen nur wissen, ob der Laden um die Ecke auf hat.
   Erst der Klick laedt die Bibliothek nach. */

.karte {
  margin: 16px;
}

.karte-start {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.karte-start:hover:not(:disabled) {
  border-color: var(--cta-bg);
}
.karte-start:disabled {
  color: var(--muted);
  cursor: progress;
}

.karte-buehne {
  height: 62vh;
  /* Auf einem Telefon im Querformat waere 62vh ein Streifen, auf einem grossen
     Bildschirm eine Wand. Beides deckelt der zweite Wert. */
  max-height: 560px;
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

/* --- Stecknadeln.
   Die Farbe kommt vom Zustand und wird serverseitig gesetzt: dieselbe
   Auswertung wie die Statuspille in der Liste. Zwei Quellen fuer denselben
   Zustand waeren zwei Gelegenheiten, sich zu widersprechen. */
.nadel {
  display: block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.nadel-punkt {
  display: block;
  width: 14px;
  height: 14px;
  margin: 4px;
  border-radius: 50%;
  background: var(--nadel, var(--shut));
  /* Der weisse Ring haelt den Punkt auf jedem Kartenuntergrund lesbar —
     ohne ihn verschwindet Gruen im Gruen einer Parkflaeche. */
  box-shadow:
    0 0 0 2.5px #fff,
    0 1px 4px rgba(0, 0, 0, 0.45);
}

.nadel:focus-visible {
  outline: 3px solid var(--cta-bg);
  outline-offset: 2px;
  border-radius: 50%;
}

.karte-popup {
  display: block;
  text-decoration: none;
  color: #16263d;
  line-height: 1.35;
}
.karte-popup b {
  display: block;
}
.karte-popup-zeit {
  color: #5a6b80;
  font-size: 13px;
}

/* Die Namensnennung von OpenStreetMap und OpenMapTiles ist Lizenzbedingung.
   Sie darf lesbar sein — nicht 8-Pixel-Grau auf Grau. Deshalb hier nur die
   Groesse angefasst, nicht der Kontrast, und nie display:none. */
.maplibregl-ctrl-attrib {
  font-size: 11px;
}
.maplibregl-ctrl-attrib a {
  color: #16263d;
}

@media (prefers-reduced-motion: reduce) {
  .karte-buehne * {
    transition: none !important;
  }
}

/* ================================================= Interne Übersicht
   Eine Seite für eine Person. Bewusst ohne Diagramm-Bibliothek: Balken aus
   CSS reichen, und jede Abhängigkeit hier wäre eine für die ganze Seite. */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
}
.kz {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
}
.kz b {
  display: block;
  font-size: 26px;
}
.kz span {
  color: var(--muted);
  font-size: 12px;
}

.i-h2 {
  padding: 22px 16px 8px;
  font-size: 15px;
}

.tagkurve {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 90px;
  padding: 0 16px;
}
.tagbalken {
  flex: 1;
  background: var(--cta-bg);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.i-tab {
  width: 100%;
  border-collapse: collapse;
  padding: 0 16px;
}
.i-tab td {
  padding: 5px 0;
  font-size: 13px;
}
.i-tab .b-name {
  padding-left: 16px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.i-tab .b-bar {
  width: 45%;
}
.i-tab .b-bar span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--cta-bg);
  opacity: 0.65;
}
.i-tab .b-num {
  padding-right: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.i-fuss {
  padding: 24px 16px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.6;
}

/* ==================================================== Startseite (Held)
   Die Startseite behauptet keinen Ort mehr. Sie erklärt, was es gibt, und
   bietet genau eine Handlung an: Standort freigeben. Alles andere ist
   Zweitweg für alle, die das nicht wollen. */

.held {
  padding: 30px 16px 22px;
  text-align: center;
}
.held h1 {
  font-size: 30px;
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 10px;
}
.held-p {
  color: var(--muted);
  max-width: 34ch;
  margin: 0 auto 20px;
  line-height: 1.55;
  text-wrap: pretty;
}

.ort-knopf {
  width: 100%;
  max-width: 340px;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--cta-bg);
  color: var(--cta-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.ort-knopf:hover:not(:disabled) {
  filter: brightness(1.06);
}
.ort-knopf:disabled {
  opacity: 0.7;
  cursor: progress;
}

.ort-hinweis {
  margin-top: 11px;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}
.ort-hinweis a {
  color: var(--muted);
}

/* Der echte Bestand statt eines erfundenen Aufmachers. */
.bestand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 16px;
}
.bestand .kz b {
  font-size: 21px;
}
.bestand .kz span {
  font-size: 11px;
  line-height: 1.3;
  display: block;
}

/* Bahnhof / Flughafen — steht NEBEN dem Status, nicht darin.
   Der Status sagt, ob offen ist. Das Abzeichen sagt, warum das an einem
   Sonntag überhaupt sein kann. Beides zu vermischen ließe eine Erlaubnis
   wie eine Zusage aussehen. */
.vz {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}
.vz-bahnhof {
  border-color: #3b6ea5;
  color: #7aa7d9;
}
.vz-flughafen {
  border-color: #6b5aa5;
  color: #a394d9;
}

/* Hinweis, dass eine Liste gekürzt ist. Ohne ihn wirkt sie vollständig —
   und der Nutzer glaubt, mehr gäbe es nicht. */
.mehr-hinweis {
  padding: 12px 16px;
  color: var(--faint);
  font-size: 12.5px;
}

/* U-Bahnhof: dieselbe Form wie Bahnhof, aber gedeckt. Der Unterschied ist
   inhaltlich — dort steht eine Erlaubnis dahinter, hier nur eine Ortsangabe. */
.vz-nahverkehr {
  border-color: var(--border);
  color: var(--faint);
}

/* Der Ortstext am Seitenfuß. Bewusst zurückhaltend gesetzt: Er ist Beiwerk
   für den, der mehr wissen will — nicht der Grund, warum jemand da ist. */
.ortstext {
  padding: 18px 16px 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 68ch;
  text-wrap: pretty;
}

/* Rückmeldung des Filters. Ohne sie sieht eine gefilterte Liste aus wie eine
   unvollständige — der Nutzer weiß nicht, ob er filtert oder ob nichts da ist. */
.filter-hinweis {
  padding: 4px 16px 10px;
  color: var(--muted);
  font-size: 13px;
}

/* „Schafft du nicht mehr" — die eigentliche Auskunft dieser Seite.
   Sie steht neben der Statuspille, nicht darin: Die Pille sagt, ob JETZT
   offen ist, das hier sagt, ob es noch reicht. Zwei verschiedene Fragen. */
.ankunft {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: right;
}
.ankunft-nein {
  color: #e06c5a;
}
.ankunft-ja {
  color: var(--open);
}

/* Pfandrückgabe — nur bei Supermärkten, weil nur sie über 200 m² alle
   Materialarten zurücknehmen müssen. Am Späti wäre der Hinweis eine Zusage,
   die der Laden nicht halten muss. */
.pfand {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}

/* Ein Laden ohne gültige Detail-URL (kein Bezirk in OSM). Sieht aus wie eine
   Shop-Zeile, ist aber kein Link — besser als ein Link, der auf 404 läuft. */
.shop-tot {
  cursor: default;
}
.shop-tot:hover {
  background: transparent;
}

/* Analytics-Ergänzungen für /intern/ */
.i-erkl {
  padding: 0 16px 6px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.b-extra {
  color: var(--faint);
  font-weight: 400;
}
.b-pfeil {
  color: var(--faint);
}
.tagkurve-24 {
  height: 60px;
}
.kennzahlen {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 460px) {
  .kennzahlen {
    grid-template-columns: repeat(2, 1fr);
  }
}