/* Besucher-App LoopFest Franklin 2026.
   Eine responsive App, keine zwei. Ab 900 px lösen sich Liste, Karte und Detail
   voneinander: drei Spalten statt drei Ansichten. Unterhalb zeigt die Bühne
   genau eine Ansicht, gesteuert über data-view. */

/* ========================================================== Startbildschirm */

/* Sichtbar, bis die Inhalte geladen sind. Bewusst schlicht und ohne eigene
   Schrift-Abhängigkeit — er soll auch dann etwas zeigen, wenn die Webfonts
   noch unterwegs sind. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--lf-asphalt);
  color: var(--lf-beton);
  overflow-y: auto;
}
.boot[hidden] { display: none; }
.boot__box { max-width: 42ch; }
.boot__title {
  font-family: var(--lf-font-display);
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.boot__text { font-size: 16px; line-height: 1.55; color: #B4BAC1; margin: 0 0 14px; }
.boot__list { margin: 0 0 18px; padding-left: 20px; font-size: 16px; line-height: 1.6; color: #B4BAC1; }
.boot__list strong { color: var(--lf-beton); }
.boot__list a { color: var(--lf-signal); }

/* Der Loop als Ladeanzeige: dieselbe Linie, die überall sonst den aktiven
   Zustand trägt. */
.boot__loop {
  width: 120px;
  height: 6px;
  border-radius: var(--lf-r-full);
  background: linear-gradient(90deg, var(--lf-signal) 0 40%, #2E343A 40% 100%);
  background-size: 250% 100%;
  margin-bottom: 18px;
  animation: boot-loop 1.1s ease-in-out infinite;
}
@keyframes boot-loop {
  from { background-position: 100% 0; }
  to { background-position: -60% 0; }
}

/* =============================================================== Grundgerüst */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Kopfzeile, Navigation und Seitenleiste stehen auf Asphalt. */
.on-asphalt {
  background: var(--lf-asphalt);
  color: var(--lf-beton);
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--lf-beton);
}

.pane { display: none; }
.pane--active { display: flex; flex-direction: column; min-height: 0; }

/* =================================================================== Kopfzeile */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 14px;
}

.brand {
  font-family: var(--lf-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__accent { color: var(--lf-signal); }
.brand-sub {
  font-size: 12px;
  color: #8C949C;
  margin-top: 3px;
}

.topbar__actions { display: flex; gap: 8px; flex: 0 0 auto; }

.iconbtn {
  width: var(--lf-tap);
  height: var(--lf-tap);
  border-radius: var(--lf-r-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
}
.iconbtn--lang { background: #2E343A; color: var(--lf-beton); }
.iconbtn--sos { background: var(--lf-rot); color: #fff; }
.iconbtn__code {
  font-family: var(--lf-font-display);
  font-size: 10px;
  letter-spacing: .08em;
}

/* Waagerechte Navigation — erst ab Tablet sichtbar. */
.topnav { display: none; gap: 4px; }
.topnav__link {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--lf-r-full);
  font-size: 15px;
  font-weight: 600;
  color: #98A0A8;
}
.topnav__link[aria-current='page'] { color: var(--lf-signal); }
.topnav__link:hover { color: var(--lf-beton); }
.topnav__link[aria-current='page']:hover { color: var(--lf-signal); }

.pillbtn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--lf-r-full);
  font-size: 15px;
  font-weight: 600;
}
.pillbtn--lang { background: #2E343A; color: var(--lf-beton); }
.pillbtn--sos { background: var(--lf-rot); color: #fff; font-weight: 700; }

/* Netz- und Vorschauhinweise. Nur sichtbar, wenn sie etwas zu sagen haben. */
.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 16px;
  font-size: 12px;
  letter-spacing: .03em;
}
.statusbar--offline { background: var(--lf-asphalt-3); color: var(--lf-beton); }
.statusbar--preview { background: var(--lf-signal-soft); color: #7A2C00; }
.statusbar .ic { width: 14px; height: 14px; }

/* ==================================================== Jetzt-Leiste (Desktop) */

.nowbar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  height: 60px;
  background: #2A2F35;
  color: var(--lf-beton);
  overflow-x: auto;
}
.nowbar__label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-family: var(--lf-font-display);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nowbar__label--muted { color: #9AA1A9; }
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--lf-r-full);
  background: var(--lf-signal);
  box-shadow: 0 0 0 4px rgba(255, 92, 26, .25);
  flex: 0 0 auto;
}
.nowbar__sep { width: 1px; height: 26px; background: #4A5057; flex: 0 0 auto; }
/* 44 statt der 40 px aus dem Entwurf: diese Leiste erscheint ab 900 px, und das
   sind auch Tablets. In die 60 px hohe Leiste passt es unverändert. */
.nowchip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--lf-r-full);
  background: #383E45;
  color: var(--lf-beton);
}
.nowchip:hover { background: #444B53; }
.nowchip__dot { width: 8px; height: 8px; border-radius: var(--lf-r-full); flex: 0 0 auto; }
.nowchip__title { font-size: 15px; font-weight: 600; }
.nowchip__meta { font-size: 14px; color: #9AA1A9; }
.nowbar__next {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #C5CBD1;
}
.nowbar__next-time { font-family: var(--lf-font-display); color: var(--lf-signal); }
.nowbar__empty { font-size: 15px; color: #9AA1A9; flex: 0 0 auto; }

/* ======================================================= Karte und Marker */

.pane--map { position: absolute; inset: 0; }
.map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--lf-map-ground);
}

/* Der Kartencanvas. Er füllt den Bereich und liegt unter allen
   Bedienelementen; MapLibre besitzt diesen Knoten (siehe js/map.js). */
.map__slot,
.map__canvas {
  position: absolute;
  inset: 0;
}
/* Ohne feste Größe legt MapLibre eine 0×0-Karte an und zeichnet nie. */
.map__canvas { width: 100%; height: 100%; }

/* Die Bedienelemente liegen über der Karte. MapLibre setzt auf seinen eigenen
   Kindern z-index bis 3, deshalb hier darüber bleiben. */
.map__search, .locatebtn, .map__bottom, .geo-toast { z-index: 10; }
.map__bottom { z-index: 9; }
.map__search, .locatebtn { z-index: 10; }

/* Der Knopf ist die Trefferfläche (48 px, Abschnitt 03), die farbige Scheibe
   darin ist die Grafik (38 px). Beides zu trennen ist nötig, weil ein größerer
   Marker den Plan zudecken würde — und ein 38-px-Marker mit der Fingerspitze
   nicht zuverlässig zu treffen ist. */
/* Position und Verschiebung kommen von MapLibre: es setzt transform auf genau
   diesem Knoten. Eigene Werte hier würden überschrieben und wären toter Code. */
.marker {
  width: 48px;
  height: 48px;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marker::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: var(--lf-r-full);
  background: var(--lf-marker, #888);
  border: 3px solid var(--lf-beton);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  transition: transform .12s;
}
.marker .ic { position: relative; width: 20px; height: 20px; }
.marker:hover::before { transform: scale(1.1); }

/* --- Ausgewählter Marker -------------------------------------------------
   Ein Ring in Signal-Orange allein reichte nicht: auf einem orangefarbenen
   Essen-Marker verschwand er fast. Deshalb drei Mittel zusammen —
   1. die Scheibe wird größer,
   2. ein weißer Spalt trennt sie von einem kräftigen Signal-Ring,
   3. ein Ring pulsiert nach außen und holt das Auge hin.
   Der Marker liegt außerdem über seinen Nachbarn, damit der Ring nicht
   halb verdeckt wird. */
.marker--sel {
  /* Über den anderen Markern, aber unter Suchfeld (6) und Blatt (5). */
  z-index: 4;
}
.marker--sel::before {
  transform: scale(1.12);
  border-color: #fff;
  box-shadow:
    0 0 0 3px var(--lf-signal),
    0 3px 10px rgba(0, 0, 0, .4);
}
.marker--sel:hover::before { transform: scale(1.18); }

/* Der pulsierende Ring. Zweite Aufgabe dieser Regel: sie ist gleichzeitig der
   ruhende Zustand. Bei „prefers-reduced-motion" bricht die Animation sofort ab
   (siehe tokens.css), und was übrig bleibt, ist genau dieser ruhende Ring —
   sichtbar, nur ohne Bewegung. Deshalb steht hier opacity 1 und kein scale. */
.marker--sel::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: var(--lf-r-full);
  border: 2.5px solid var(--lf-signal);
  opacity: 1;
  pointer-events: none;
  animation: marker-pulse 1.8s ease-out infinite;
}
.marker--infra.marker--sel::after { inset: 7px; border-radius: 10px; }

@keyframes marker-pulse {
  0% { transform: scale(1); opacity: .85; }
  /* Früh ausgeblendet, damit die letzte Drittel-Sekunde ruhig bleibt und der
     Puls nicht als Flackern gelesen wird. */
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Infrastruktur ist ein anderer Objekttyp, nicht eine andere Farbe:
   eckig statt rund, damit die Form die Typen trennt. */
.marker--infra { color: var(--lf-blau); transition: opacity .15s; }
.marker--infra::before {
  inset: 7px;
  border-radius: 10px;
  background: #fff;
  border: 2.5px solid var(--lf-blau);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.marker--infra .ic { width: 19px; height: 19px; }
.marker--dimmed { opacity: .25; }

/* Auch der Standortpunkt ist ein MapLibre-Marker — kein eigenes transform. */
.geo-dot {
  width: 22px;
  height: 22px;
  border-radius: var(--lf-r-full);
  background: var(--lf-blau);
  border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(44, 95, 209, .18), 0 2px 6px rgba(0, 0, 0, .3);
  pointer-events: none;
}

.map__search {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 6;
}

/* Eigener Knopf statt eines fünften Schnellzugriffs: der Standort ist kein
   Infrastruktur-Filter, und die vier blauen Chips bleiben so vollständig sichtbar. */
.locatebtn {
  position: absolute;
  right: 12px;
  top: 76px;
  z-index: 6;
  width: var(--lf-tap);
  height: var(--lf-tap);
  border-radius: var(--lf-r-full);
  background: #fff;
  color: var(--lf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.locatebtn:hover { color: var(--lf-blau); }
.locatebtn--on { background: var(--lf-blau); color: #fff; }
.locatebtn--on:hover { color: #fff; }

/* „Ganzes Gelände zeigen" — sitzt unter dem Standortknopf, gleiche Form.
   Zwei runde Knöpfe übereinander in derselben Spalte lesen sich als eine
   Gruppe „Kartensteuerung"; nebeneinander würden sie mit den Schnellzugriffen
   unten konkurrieren. Der Abstand ist die Trefferfläche plus 8 px Luft. */
.fitbtn {
  position: absolute;
  right: 12px;
  top: calc(76px + var(--lf-tap) + 8px);
  z-index: 10;
  width: var(--lf-tap);
  height: var(--lf-tap);
  border-radius: var(--lf-r-full);
  background: #fff;
  color: var(--lf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.fitbtn:hover { color: var(--lf-signal); }

.map__attrib {
  position: absolute;
  right: 12px;
  font-size: 11px;
  color: #6B6659;
  background: rgba(243, 240, 232, .85);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}

/* Suchfeld — auf der Karte schwebend, in der Liste eingefasst. */
.searchfield {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  background: #fff;
  border-radius: var(--lf-r-full);
  padding: 0 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.searchfield--flat { box-shadow: none; border: 1px solid var(--lf-beton-2); }
.searchfield .ic { flex: 0 0 auto; color: var(--lf-ink-60); }
/* Das Feld füllt die ganze Höhe seiner Fassung: ein Tipp irgendwo in die
   52-px-Zeile setzt den Cursor, nicht nur ein Tipp auf die Textzeile. */
.searchfield__input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  border: 0;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: var(--lf-ink);
}
.searchfield__clear {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--lf-r-full);
  background: var(--lf-beton-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchfield__clear .ic { width: 15px; height: 15px; stroke-width: 2.4; }

.filterbtn {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: var(--lf-r-full);
  background: #fff;
  color: var(--lf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.filterbtn--flat { box-shadow: none; border: 1px solid var(--lf-beton-2); }
.filterbtn__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--lf-r-full);
  background: var(--lf-signal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* --- Unterer Kartenbereich: Schnellzugriffe und „In deiner Nähe" ---------- */

.map__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.quickrow {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  overflow-x: auto;
}
.quickchip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 15px;
  border-radius: var(--lf-r-full);
  background: var(--lf-blau);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .24);
}
.quickchip:hover { background: #2551B5; }
.quickchip .ic { width: 18px; height: 18px; }

.nearsheet {
  background: #fff;
  border-radius: var(--lf-r-l) var(--lf-r-l) 0 0;
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .14);
  padding: 0 0 12px;
}
/* Der Griff ist ein echter Knopf: 44 px hoch, auch wenn die Linie darin 5 px
   ist. Er trägt keine Beschriftung, also muss die Fläche stimmen. */
.nearsheet__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
}
.nearsheet__grip-bar {
  width: 44px;
  height: 5px;
  border-radius: var(--lf-r-full);
  background: var(--lf-beton-3);
}
.nearsheet__grip:hover .nearsheet__grip-bar { background: var(--lf-ink-60); }
.nearsheet--collapsed { padding-bottom: 6px; }
.nearsheet--collapsed .nearsheet__head { padding-bottom: 4px; }
.nearsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 10px;
}
.nearsheet__title {
  font-family: var(--lf-font-display);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nearsheet__all {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lf-signal-dark);
}
.nearsheet__row { display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; }
.nearsheet__empty { padding: 0 16px 6px; font-size: 15px; color: var(--lf-ink-60); }

.standcard {
  flex: 0 0 auto;
  width: 186px;
  text-align: left;
  border-radius: var(--lf-r-m);
  border: 1px solid var(--lf-beton-2);
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.standcard:hover { border-color: var(--lf-beton-3); }
.standcard__top { display: flex; align-items: center; gap: 8px; }
.standcard__dot {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--lf-r-full);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.standcard__dot .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.standcard__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.standcard__name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.standcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ================================================================== Badges */

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--lf-r-full);
  white-space: nowrap;
}
.badge--open { background: var(--lf-ok-bg); color: var(--lf-ok-fg); }
.badge--closed { background: var(--lf-off-bg); color: var(--lf-off-fg); }
.hours { font-size: 13px; color: var(--lf-ink-60); }

/* ============================================================ Liste (Pane) */

.pane--list { position: absolute; inset: 0; }
.listhead {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  background: var(--lf-beton);
  padding: 12px;
  display: flex;
  gap: 8px;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .3);
}
.listbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.grouphead {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #fff;
}
.grouphead .ic { stroke-width: 2.2; }
.grouphead__name {
  font-family: var(--lf-font-display);
  font-size: 16px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.grouphead__count { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .85; }

.standrow {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border-bottom: 1px solid var(--lf-beton-2);
  min-height: var(--lf-tap);
}
.standrow:hover { background: #fff; }
.standrow[aria-current='true'] { background: #fff; box-shadow: inset 4px 0 0 var(--lf-signal); }
.standrow__bar { width: 12px; height: 44px; flex: 0 0 auto; border-radius: 6px; }
.standrow__body { flex: 1 1 auto; min-width: 0; }
.standrow__name { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; margin-bottom: 3px; }
.standrow__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.standrow__saved { flex: 0 0 auto; color: var(--lf-signal); }
.standrow__saved .ic { fill: currentColor; }
.chev { flex: 0 0 auto; color: #8C8778; stroke-width: 2.2; }

/* ============================================================== Leerzustand */

.empty { padding: 56px 32px; text-align: center; }
.empty__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--lf-r-full);
  border: 3px dashed var(--lf-beton-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #8C8778;
}
.empty__icon .ic { width: 34px; height: 34px; }
.empty__title {
  font-family: var(--lf-font-display);
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.empty__text {
  font-size: 16px;
  color: var(--lf-ink-60);
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 34ch;
  text-wrap: pretty;
}
.empty__actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.loop-sketch { width: 180px; height: auto; margin: 0 auto 20px; display: block; }

/* ================================================================= Knöpfe */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--lf-r-full);
  font-size: 17px;
  font-weight: 700;
}
.btn--primary { background: var(--lf-signal); color: #fff; }
.btn--primary:hover { background: var(--lf-signal-dark); }
.btn--outline { border: 2px solid var(--lf-ink); color: var(--lf-ink); background: transparent; }
.btn--outline:hover { background: var(--lf-beton-2); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; font-size: 15px; padding: 0 16px; }

/* ================================================================ Programm */

.pane--plan, .pane--merk, .pane--infra, .pane--sos, .pane--detail { position: absolute; inset: 0; }
.scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.plan-now {
  background: var(--lf-asphalt);
  color: var(--lf-beton);
  padding: 18px 16px 22px;
}
.plan-now__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.plan-now__title {
  font-family: var(--lf-font-display);
  font-size: 19px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plan-now__clock { font-size: 14px; color: #8C949C; margin-left: auto; }
.plan-now__list { display: flex; flex-direction: column; gap: 10px; }
.plan-now__none { font-size: 15px; color: #9AA1A9; line-height: 1.5; }

.nowcard {
  width: 100%;
  text-align: left;
  background: #fff;
  border-radius: var(--lf-r-m);
  padding: 14px;
  border-left: 6px solid var(--lf-signal);
  color: var(--lf-ink);
  display: block;
}
.nowcard__title { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 5px; }
.nowcard__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--lf-ink-60); }
.nowcard__time { font-weight: 700; color: var(--lf-ink); }

.plan-next__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
}
.plan-next__ring {
  width: 11px;
  height: 11px;
  border-radius: var(--lf-r-full);
  border: 2px solid #8C949C;
  flex: 0 0 auto;
}
.plan-next__title {
  font-family: var(--lf-font-display);
  font-size: 17px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C5CBD1;
}
.plan-next__list { display: flex; flex-direction: column; gap: 8px; }
.nextrow {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #2A2F35;
  border-radius: var(--lf-r-m);
  padding: 12px 14px;
  min-height: var(--lf-tap);
}
.nextrow:hover { background: #343A41; }
.nextrow__time {
  font-family: var(--lf-font-display);
  font-size: 17px;
  color: var(--lf-signal);
  flex: 0 0 auto;
}
.nextrow__body { flex: 1 1 auto; min-width: 0; }
.nextrow__title { display: block; font-size: 16px; font-weight: 600; color: var(--lf-beton); line-height: 1.3; }
.nextrow__place { display: block; font-size: 13px; color: #8C949C; }

/* Zeitschiene — dieselbe Linie wie der Loop auf der Karte. */
.timeline { padding: 20px 16px 28px; position: relative; }
.timeline__label {
  font-family: var(--lf-font-display);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
  margin-bottom: 16px;
}
/* Sitzt genau unter den Punkten: 16 Rand + 46 Zeitspalte + 16 Abstand,
   Mitte der 17 px breiten Markierungsspalte, minus halbe Linienbreite. */
.timeline__line {
  position: absolute;
  left: 84px;
  top: 52px;
  bottom: 28px;
  width: 5px;
  border-radius: var(--lf-r-full);
  background: var(--lf-beton-3);
}
.timeline__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 18px;
  position: relative;
}
.timeline__time {
  width: 46px;
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--lf-font-display);
  font-size: 17px;
  padding-top: 2px;
}
.timeline__mark { width: 17px; flex: 0 0 auto; display: flex; justify-content: center; padding-top: 6px; }
.timeline__dot {
  width: 15px;
  height: 15px;
  border-radius: var(--lf-r-full);
  border: 3px solid var(--lf-beton);
}
.timeline__body {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  padding: 0;
}
.timeline__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.timeline__meta { display: block; font-size: 14px; color: var(--lf-ink-60); margin-top: 2px; }
.timeline__row--past { opacity: .5; }
.timeline__row--now .timeline__title { color: var(--lf-signal-dark); }
.timeline__save { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--lf-signal); }
.timeline__save--on .ic { fill: currentColor; }

/* ============================================================== Merkliste */

.pagehead {
  flex: 0 0 auto;
  padding: 18px 16px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagehead .ic { color: var(--lf-signal); stroke-width: 2.2; }
.pagehead__title {
  font-family: var(--lf-font-display);
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagehead__count { margin-left: auto; font-size: 14px; color: var(--lf-ink-60); }

.merkrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lf-beton-2);
  min-height: var(--lf-tap);
}
.merkrow__link { flex: 1 1 auto; min-width: 0; text-align: left; display: flex; align-items: center; gap: 12px; }
.merkrow__bar { width: 12px; height: 44px; border-radius: 6px; flex: 0 0 auto; }
.merkrow__time {
  font-family: var(--lf-font-display);
  font-size: 18px;
  color: var(--lf-signal);
  flex: 0 0 auto;
  width: 46px;
}
.merkrow__name { display: block; font-size: 17px; font-weight: 700; }
.merkrow__meta { display: block; font-size: 14px; color: var(--lf-ink-60); }
.merkrow__drop {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lf-signal);
}
.merkrow__drop .ic { fill: currentColor; }

/* ================================================================== Detail */

.detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.detail__head { flex: 0 0 auto; color: #fff; padding: 14px 16px 18px; }
.detail__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.backbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.backbtn .ic { transform: rotate(180deg); stroke-width: 2.4; }
.detail__actions { display: flex; gap: 6px; }
.roundbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--lf-r-full);
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
}
.roundbtn:hover { background: rgba(255, 255, 255, .32); }
.roundbtn--on .ic { fill: currentColor; }
.detail__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.detail__title {
  font-family: var(--lf-font-display);
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}
.detail__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 28px; }

.metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.metarow__hours { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--lf-ink-60); }
.metarow__hours .ic { width: 17px; height: 17px; }
.prose { font-size: 17px; line-height: 1.55; margin: 0 0 22px; text-wrap: pretty; }

.section-label {
  font-family: var(--lf-font-display);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
  margin-bottom: 10px;
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
  margin-bottom: 8px;
}

.progrow {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--lf-r-m);
  background: var(--lf-beton);
  margin-bottom: 8px;
}
.progrow__time { font-family: var(--lf-font-display); font-size: 17px; flex: 0 0 auto; }
.progrow__title { flex: 1 1 auto; font-size: 16px; font-weight: 600; }
.progrow__save {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lf-signal);
}
.progrow__save--on .ic { fill: currentColor; }

.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.infocard { border: 1px solid var(--lf-beton-2); border-radius: var(--lf-r-m); padding: 12px; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--lf-r-s);
  background: var(--lf-beton);
}
.tag--diet { background: var(--lf-ok-bg); color: var(--lf-ok-fg); }
.tag--none { background: transparent; color: var(--lf-ink-60); padding-left: 0; }

.acclist { display: flex; flex-direction: column; gap: 10px; }
.accrow { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.accrow .ic { color: var(--lf-ok-fg); stroke-width: 2.2; flex: 0 0 auto; }
.accrow--absent { color: var(--lf-ink-60); }
.accrow--absent .ic { color: var(--lf-ink-60); }

.detail__foot { display: flex; gap: 10px; margin-top: 22px; }

/* Rechte Spalte ohne Auswahl (nur Desktop sichtbar). */
.detail-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  background: #fff;
}

/* ============================================== Unterseiten: Infra und SOS */

.subpage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--lf-beton); }
.subpage__head { flex: 0 0 auto; color: #fff; padding: 14px 16px 18px; }
.subpage__head--blue { background: var(--lf-blau); }
.subpage__head--red { background: var(--lf-rot); }
.subpage__title {
  font-family: var(--lf-font-display);
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 6px 0 0;
}

.infrarow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lf-beton-2);
  text-align: left;
  background: transparent;
}
.infrarow:hover { background: #fff; }
.infrarow__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #fff;
  border: 2.5px solid var(--lf-blau);
  color: var(--lf-blau);
  display: flex;
  align-items: center;
  justify-content: center;
}
.infrarow__icon .ic { width: 24px; height: 24px; }
.infrarow__body { flex: 1 1 auto; min-width: 0; }
.infrarow__name { display: block; font-size: 17px; font-weight: 700; }
.infrarow__note { display: block; font-size: 14px; color: var(--lf-ink-60); }
.infragroup {
  padding: 14px 16px 6px;
  font-family: var(--lf-font-display);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lf-ink-60);
}

.callrow {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: var(--lf-r-m);
  background: #fff;
  border: 1px solid var(--lf-beton-2);
  color: var(--lf-ink);
  margin-bottom: 10px;
  text-decoration: none;
}
.callrow--alert { background: var(--lf-rot); color: #fff; border-color: var(--lf-rot); }
.callrow .ic { width: 28px; height: 28px; flex: 0 0 auto; stroke-width: 2.2; }
.callrow__title { display: block; font-size: 19px; font-weight: 800; }
.callrow__note { display: block; font-size: 14px; color: var(--lf-ink-60); }
.callrow--alert .callrow__note { color: rgba(255, 255, 255, .9); }

.note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--lf-r-m);
  background: var(--lf-note-bg);
  border: 1px solid var(--lf-note-border);
  font-size: 15px;
  line-height: 1.55;
}

/* ================================================= Offline- und Geo-Zustand */

.offline-screen {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, #E7E2D5 0 14px, #E2DCCD 14px 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.offline-screen__icon {
  width: 88px;
  height: 88px;
  border-radius: var(--lf-r-full);
  background: var(--lf-asphalt);
  color: var(--lf-beton);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.offline-screen__icon .ic { width: 42px; height: 42px; }
.offline-screen__title {
  font-family: var(--lf-font-display);
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.geo-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: var(--lf-asphalt);
  color: var(--lf-beton);
  border-radius: var(--lf-r-m);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  z-index: 20;
}
.geo-toast .ic { flex: 0 0 auto; color: var(--lf-signal); stroke-width: 2.2; }
.geo-toast__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.geo-toast__text { font-size: 14px; line-height: 1.5; color: #B4BAC1; margin: 0 0 12px; }
.geo-toast__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.geo-toast .btn--outline { border-color: #4A5057; color: var(--lf-beton); }
.geo-toast .btn--outline:hover { background: #2E343A; }

/* ===================================================== Bottom-Sheets */

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, .5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 30;
}
.sheet {
  background: var(--lf-beton);
  border-radius: var(--lf-r-l) var(--lf-r-l) 0 0;
  max-height: 92%;
  display: flex;
  flex-direction: column;
}
.sheet__head {
  flex: 0 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--lf-beton-2);
}
.sheet__title {
  font-family: var(--lf-font-display);
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sheet__close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--lf-r-full);
  background: var(--lf-beton-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet__close .ic { stroke-width: 2.4; }
.sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.sheet__body--flush { padding: 6px 0 20px; }
.sheet__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--lf-beton-2);
  background: var(--lf-beton);
}

/* Filter-Sheet */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lf-tap);
  padding: 0 18px;
  border-radius: var(--lf-r-full);
  border: 2px solid var(--lf-ink);
  background: transparent;
  color: var(--lf-ink);
  font-size: 15px;
  font-weight: 700;
}
.chip[aria-pressed='true'] { background: var(--lf-ink); color: var(--lf-beton); }
.chip .ic { width: 18px; height: 18px; stroke-width: 2.2; }
/* Kategorie-Chips tragen die Kategoriefarbe, gefüllt wenn aktiv. */
.chip--cat { padding: 0 16px; }

.switchrow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--lf-tap);
  padding: 0 16px;
  border-radius: var(--lf-r-m);
  background: #fff;
  border: 1px solid var(--lf-beton-2);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
}
.switch {
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--lf-r-full);
  background: var(--lf-beton-3);
  position: relative;
  display: inline-block;
  transition: background .15s;
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--lf-r-full);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .15s;
}
.switchrow[aria-pressed='true'] .switch { background: var(--lf-signal); }
.switchrow[aria-pressed='true'] .switch__knob { left: 25px; }

/* Sprach-Sheet */
.langrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid var(--lf-beton-2);
  text-align: left;
}
.langrow:hover { background: #fff; }
.langrow__code {
  font-family: var(--lf-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  width: 34px;
  flex: 0 0 auto;
  color: var(--lf-ink-60);
  text-transform: uppercase;
}
.langrow__body { flex: 1 1 auto; min-width: 0; }
.langrow__native { display: block; font-size: 18px; font-weight: 700; }
.langrow__german { display: block; font-size: 13px; color: var(--lf-ink-60); }
.langrow__check { flex: 0 0 auto; color: var(--lf-signal); stroke-width: 3; }

/* ============================================================ Tab-Leiste */

.tabbar {
  flex: 0 0 auto;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 6px;
  min-height: var(--lf-tap);
  color: #98A0A8;
}
.tab__label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
/* Der Loop als aktiver Zustand — dieselbe Linie wie auf der Karte. */
.tab__bar { width: 26px; height: 4px; border-radius: var(--lf-r-full); background: transparent; }
.tab[aria-current='page'] { color: var(--lf-signal); }
.tab[aria-current='page'] .tab__bar { background: var(--lf-signal); }
.tab__badge {
  position: absolute;
  transform: translate(14px, -6px);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--lf-r-full);
  background: var(--lf-signal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab__icon { position: relative; }

/* ========================================================= Zustandspanel */

.devpanel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  width: 260px;
  background: var(--lf-asphalt-2);
  border: 1px solid #34393F;
  border-radius: var(--lf-r-m);
  padding: 14px;
  color: var(--lf-beton);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  font-size: 14px;
}
.devpanel__title {
  font-family: var(--lf-font-display);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--lf-signal);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.devpanel__list { display: flex; flex-direction: column; gap: 6px; }
.devpanel button {
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--lf-r-s);
  background: #181B1E;
  border: 1px solid #34393F;
  color: var(--lf-beton);
  font-size: 14px;
  font-weight: 600;
}
.devpanel button:hover { border-color: var(--lf-signal); }
.devpanel__note { margin-top: 10px; font-size: 12px; color: #8C949C; line-height: 1.45; }

/* ================================================== Tablet und Desktop */

@media (min-width: 900px) {
  .topbar {
    gap: 28px;
    padding: 0 24px;
    height: 68px;
  }
  .brand { font-size: 22px; }
  .brand-sub { display: none; }
  .topnav { display: flex; }
  .topbar__actions { margin-left: auto; align-items: center; gap: 10px; }
  .iconbtn { display: none; }
  .pillbtn { display: inline-flex; }

  .nowbar { display: flex; }

  /* Drei Spalten statt drei Ansichten. */
  .stage[data-layout='columns'] {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr) 420px;
  }
  .stage[data-layout='columns'] .pane--list,
  .stage[data-layout='columns'] .pane--map,
  .stage[data-layout='columns'] .pane--detail {
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
    min-height: 0;
  }
  .stage[data-layout='columns'] .pane--list { border-right: 1px solid var(--lf-beton-2); }
  .stage[data-layout='columns'] .pane--detail { border-left: 1px solid var(--lf-beton-2); background: #fff; }

  /* In der Spaltenansicht liegt die Suche in der Liste, nicht auf der Karte. */
  .stage[data-layout='columns'] .map__search { display: none; }
  .stage[data-layout='columns'] .nearsheet { display: none; }
  .stage[data-layout='columns'] .quickrow { padding: 0; }
  .stage[data-layout='columns'] .map__bottom { left: 16px; right: 16px; bottom: 16px; }
  .listhead { display: flex; }

  /* Programm und Merkliste nehmen die ganze Breite und werden zentriert. */
  .stage[data-layout='page'] .pane--plan,
  .stage[data-layout='page'] .pane--merk,
  .stage[data-layout='page'] .pane--infra,
  .stage[data-layout='page'] .pane--sos {
    position: absolute;
    inset: 0;
  }
  .page-center { max-width: 900px; margin: 0 auto; width: 100%; }

  .tabbar { display: none; }

  /* Ohne Zurück-Knopf sitzen Merken und Teilen rechts, nicht links. */
  .detail__nav { justify-content: flex-end; }
  .detail__nav .backbtn { display: none; }

  /* Die Suche liegt in der Liste, der Standortknopf darf nach oben rutschen. */
  .stage[data-layout='columns'] .locatebtn { top: 16px; right: 16px; }
  .stage[data-layout='columns'] .detail__head { padding: 20px 22px; }
  .stage[data-layout='columns'] .detail__title { font-size: 34px; }
  .stage[data-layout='columns'] .detail__body { padding: 20px 22px 28px; }
  .stage[data-layout='columns'] .standrow { padding: 12px 16px; }
  .stage[data-layout='columns'] .standrow__bar { width: 10px; height: 38px; }
  .stage[data-layout='columns'] .standrow__name { font-size: 16px; }

  .marker { width: 52px; height: 52px; }
  .marker .ic { width: 22px; height: 22px; }

  /* Sheets sitzen mittig statt am unteren Rand. */
  .sheet-backdrop { justify-content: center; align-items: center; padding: 32px; }
  .sheet { border-radius: var(--lf-r-l); width: 100%; max-width: 520px; max-height: 80%; }
  .sheet__foot { padding: 12px 16px; }
}

/* Auf sehr breiten Fenstern darf die Karte nicht endlos gedehnt werden. */
@media (min-width: 1600px) {
  .stage[data-layout='columns'] { grid-template-columns: 440px minmax(0, 1fr) 460px; }
}

/* Zwischen 900 und 1180 px ist für drei Spalten kein Platz — Detail wird
   wieder eine eigene Ansicht, Liste und Karte bleiben nebeneinander. */
@media (min-width: 900px) and (max-width: 1180px) {
  .stage[data-layout='columns'] { grid-template-columns: 340px minmax(0, 1fr); }
  .stage[data-layout='columns'] .pane--detail { display: none; }
  .stage[data-layout='columns'][data-view='detail'] { grid-template-columns: 340px minmax(0, 1fr); }
  .stage[data-layout='columns'][data-view='detail'] .pane--map { display: none; }
  .stage[data-layout='columns'][data-view='detail'] .pane--detail { display: flex; }
  /* Hier ist Detail wieder eine eigene Ansicht — mit Zurück, also space-between. */
  .stage[data-layout='columns'][data-view='detail'] .detail__nav { justify-content: space-between; }
  .stage[data-layout='columns'][data-view='detail'] .detail__nav .backbtn { display: flex; }
}