/* ==========================================================================
   TAKT — app.css · Das Stellwerk
   Zwei vollwertige Layout-Äste: Mobil (Basis, bis 360px, Bottom-Tab-Bar,
   Agenda, Bottom-Sheets) und Desktop ab 900px (Split-Layouts, Seitenpanels,
   Drawer von rechts). Lädt tokens.css (Design-DNA) — hier nur App-Stile.
   Bewegung: nur transform/opacity, Reveal = „Einfahrt von links".
   ========================================================================== */

:root {
  --kopf-h: 60px;
  --tab-h: 62px;
  --pad: clamp(14px, 3vw, 34px);
  --max: 1460px;
  --schweb: 0 18px 48px rgba(20, 24, 31, .18);
  --schweb-s: 0 8px 22px rgba(20, 24, 31, .14);
}

html,
body {
  overflow-x: hidden;
}

/* hidden-Attribut gewinnt IMMER — auch gegen display:flex/grid */
[hidden] {
  display: none !important;
}

body.app {
  min-height: 100svh;
}

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

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: var(--tinte);
  color: var(--papier);
  padding: 10px 18px;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   Leitsystem-Bar (App-Kopf — immer sichtbar, das Stellwerk hat keine Pause)
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  padding-inline: var(--pad);
  background: rgba(242, 243, 238, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: inline-flex;
  align-items: baseline;
  color: var(--tinte);
  text-decoration: none;
  line-height: 1;
  flex: none;
}

.marke-wort {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: .02em;
}

.marke-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  margin-left: 5px;
  align-self: center;
}

.marke-zusatz {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--tinte-45);
  margin-left: 10px;
}

/* Bahnsteig-Reiter (Desktop) */
.reiter {
  display: none;
}

.topbar-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.probe-chip {
  display: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tinte-70);
  border: 1px dashed var(--linie-stark);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: .96rem;
  text-decoration: none;
  border: 1px solid var(--linie-stark);
  background: #fff;
  color: var(--tinte);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--schweb-s);
}

.btn:active {
  transform: scale(.97);
  box-shadow: none;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-signal {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--tinte);
}

.btn-still {
  background: transparent;
  border-color: transparent;
  color: var(--tinte-70);
}

.btn-still:hover {
  box-shadow: none;
  border-color: var(--linie);
  color: var(--tinte);
}

.btn-achtung {
  background: var(--achtung);
  border-color: var(--achtung);
  color: #fff;
}

.btn-klein {
  min-height: 40px;
  padding: 0 14px;
  font-size: .88rem;
}

.btn-breit {
  width: 100%;
}

.btn[disabled] {
  opacity: .5;
  pointer-events: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinte-70);
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.btn-icon:hover {
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.btn-icon:active {
  transform: scale(.94);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

#top-plus {
  display: none;
}

/* ==========================================================================
   Grundraster & Karten
   ========================================================================== */

main {
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--kopf-h) + 16px) var(--pad) calc(var(--tab-h) + 34px + env(safe-area-inset-bottom, 0px));
}

main:focus {
  outline: none;
}

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.karte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 0;
}

.karte-titel {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin-top: 4px;
}

.kicker {
  color: var(--tinte-45);
}

/* Reveal: Einfahrt von links (Bewegungs-Fingerprint) — nur mit JS aktiv */
html.js .einfahrt {
  opacity: 0;
  transform: translateX(-26px);
}

html.js .einfahrt.drin {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--verz, 0ms);
}

/* Linien-Badge — Signatur-Baustein */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bf, var(--tinte));
  color: #fff;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  line-height: 1;
  flex: none;
}

/* Status-Punkte (reservierte Farben) */
.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.sdot-depot {
  background: transparent;
  border: 2px solid var(--tinte-45);
}

.sdot-geplant {
  background: var(--tinte);
}

.sdot-abgefahren {
  background: var(--ok);
}

.sdot-fehler {
  background: var(--achtung);
}

/* Chips (Filter, Gleise, Zeiten) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--tinte-70);
  font-weight: 500;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.chip:hover {
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.chip:active {
  transform: scale(.96);
}

.chip[aria-pressed="true"],
.chip.aktiv {
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}

.chip svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.chip[aria-disabled="true"] {
  opacity: .45;
  border-style: dashed;
}

.chips-reihe {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.chips-reihe::-webkit-scrollbar {
  display: none;
}

/* Desktop: Chips umbrechen statt abschneiden — horizontales Scrollen
   ist die Mobil-Geste, auf dem Desktop wirkt ein abgeschnittener Chip kaputt */
@media (min-width: 900px) {
  .chips-reihe {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Mobil: rechte Fade-Kante als Wisch-Affordance; das padding-right schiebt
   den letzten Chip am Scroll-Ende aus der Fade-Zone (bleibt voll lesbar) */
@media (max-width: 899px) {
  .chips-reihe {
    padding-right: 40px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}

@media (pointer: coarse) {
  .chip {
    min-height: 44px;
  }
}

/* Tabs (Bereiche) */
.tab[hidden] {
  display: none;
}

/* ==========================================================================
   Reiter 1 · Netzplan
   ========================================================================== */

.np-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.np-karte {
  padding-bottom: 16px;
}

.np-jahr {
  color: var(--tinte-45);
  font-size: 1.1rem;
}

/* Mobil: Karten-Kopf des Netzplans stapeln statt quetschen */
@media (max-width: 899px) {

  .np-karte .karte-kopf {
    flex-direction: column;
    gap: 4px;
  }

  .np-hinweis {
    text-align: left;
    padding-top: 0;
  }
}

.np-hinweis {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--tinte-45);
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}

.netz-wrap {
  position: relative;
  padding: 10px 12px 0;
}

/* aspect-ratio als Platzhalter NUR bis der Renderer die viewBox setzt
   („auto <ratio>": danach gewinnt das echte Seitenverhältnis der viewBox) —
   verhindert den Layout-Sprung beim ersten Zeichnen. Schwellen wie im
   Renderer: schmale Bühne (SVG < 433px) zeichnet 3:2, sonst 2:1. */
.netzplan {
  width: 100%;
  height: auto;
  aspect-ratio: auto 2 / 1;
}

@media (max-width: 500px) {
  .netzplan {
    aspect-ratio: auto 3 / 2;
  }
}

.netz-leer {
  position: absolute;
  inset: 12% 8% auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.netz-leer p {
  background: rgba(255, 255, 255, .92);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  padding: 14px 20px;
  max-width: 420px;
  font-size: .92rem;
  color: var(--tinte-70);
  text-align: center;
}

.netz-leer strong {
  color: var(--tinte);
}

/* Legende: abwählbare Badges */
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 0;
}

.legende:empty {
  display: none;
}

.legende-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: #fff;
  font-size: .85rem;
  font-weight: 500;
  color: var(--tinte-70);
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.legende-item:hover {
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.legende-item:active {
  transform: scale(.96);
}

.legende-item svg {
  width: 13px;
  height: 13px;
  color: var(--tinte-45);
}

/* Linien-Verzeichnis */
.verzeichnis {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.v-kopf {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--linie);
  display: grid;
  gap: 10px;
}

.suche {
  position: relative;
}

.suche svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--tinte-45);
  pointer-events: none;
}

.suche input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  transition: border-color .2s var(--ease);
}

.suche input:focus {
  outline: none;
  border-color: var(--tinte);
}

.suche input::placeholder {
  color: var(--tinte-45);
}

.linien-liste {
  list-style: none;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

/* Platzhalterhöhe, solange die 60 Zeilen gestückelt einfahren — hält den
   Footer aus dem Viewport und verhindert Layout-Shifts beim Aufbau */
.linien-liste:not(.geladen) {
  min-height: 2600px;
}

.linie-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.linie-row[hidden] {
  display: none;
}

.linie-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}

.linie-info:hover {
  background: var(--papier);
}

.linie-info:active {
  background: var(--papier-2);
}

.linie-titel-wrap {
  flex: 1;
  min-width: 0;
  display: grid;
}

.linie-titel {
  font-weight: 600;
  font-size: .94rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linie-peak {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: var(--tinte-45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spark {
  width: 52px;
  height: 22px;
  flex: none;
}

.linie-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--tinte-45);
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.linie-toggle svg {
  width: 17px;
  height: 17px;
}

.linie-toggle:hover {
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.linie-toggle:active {
  transform: scale(.92);
}

.linie-toggle[aria-pressed="true"] {
  background: var(--bf, var(--tinte));
  border-color: var(--bf, var(--tinte));
  color: #fff;
}

.v-leer {
  padding: 22px 16px;
  color: var(--tinte-45);
  font-size: .9rem;
  text-align: center;
}

/* ==========================================================================
   Reiter 2 · Fahrplan
   ========================================================================== */

.fp-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.depot-leiste {
  display: none;
}

.fp-haupt {
  min-width: 0;
}

.fp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fp-monat {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  min-width: 168px;
  text-align: center;
  line-height: 1;
}

.fp-aktionen {
  display: flex;
  gap: 8px;
}

/* Monats-Sprungstreifen (Mobil) */
.monat-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: none;
}

.monat-strip::-webkit-scrollbar {
  display: none;
}

.ms-chip {
  flex: none;
  min-width: 46px;
  min-height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: #fff;
  color: var(--tinte-70);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}

.ms-chip:active {
  transform: scale(.95);
}

.ms-chip .ms-n {
  font-size: .6rem;
  color: var(--tinte-45);
}

.ms-chip[aria-current="date"] {
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}

.ms-chip[aria-current="date"] .ms-n {
  color: rgba(255, 255, 255, .6);
}

/* ---------- Agenda (Mobil-Variante) ---------- */

.agenda {
  display: grid;
  gap: 10px;
}

.agenda-tag {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}

.agenda-tag.heute {
  border-color: var(--tinte);
  box-shadow: inset 3px 0 0 var(--signal);
  scroll-margin-top: calc(var(--kopf-h) + 12px);
}

.agenda-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 14px;
}

.agenda-datum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.agenda-wtag {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.agenda-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .7rem;
  color: var(--tinte-45);
  white-space: nowrap;
}

.heute-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  background: var(--signal);
  color: var(--tinte);
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
}

.agenda-plus {
  flex: none;
}

.agenda-liste {
  display: grid;
  border-top: 1px solid var(--linie);
}

.agenda-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 11px;
  border: 0;
  border-left: 3px solid var(--af, var(--tinte-45));
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}

.agenda-card + .agenda-card {
  border-top: 1px solid var(--linie);
}

.agenda-card:hover {
  background: var(--papier);
}

.agenda-card:active {
  background: var(--papier-2);
}

.agenda-zeit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .95rem;
  flex: none;
  padding-top: 1px;
}

.agenda-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agenda-titel {
  font-weight: 600;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-text {
  font-size: .82rem;
  color: var(--tinte-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.gleis-mini {
  display: inline-flex;
  gap: 5px;
  color: var(--tinte-45);
  flex: none;
}

.gleis-mini svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.agenda-status {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agenda-leer {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  padding: 30px 20px;
  text-align: center;
  color: var(--tinte-70);
  display: grid;
  gap: 14px;
  justify-items: center;
}

/* ---------- Monatsraster (Desktop-Variante) ---------- */

.raster {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}

.raster-kopfzeile,
.raster-woche {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
}

.raster-kopfzeile {
  border-bottom: 1px solid var(--linie-stark);
}

.raster-kopfzeile span {
  padding: 9px 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-45);
}

.raster-woche {
  border-top: 1px solid var(--linie);
}

.raster-woche:first-of-type {
  border-top: 0;
}

.kw {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  color: var(--tinte-45);
  background: var(--papier);
  border-right: 1px solid var(--linie);
}

.tag {
  position: relative;
  min-height: 104px;
  padding: 8px 8px 30px;
  border-left: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
}

.tag:first-of-type,
.raster-woche .kw + .tag {
  border-left: 0;
}

.tag.wochenende {
  background: var(--papier-2);
}

.tag.fremd {
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(20, 24, 31, .025) 7px 14px);
}

.tag.fremd .tag-nr {
  color: var(--tinte-45);
}

.tag-nr {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--tinte-70);
  line-height: 1;
  align-self: flex-start;
}

.tag.heute .tag-nr {
  background: var(--signal);
  color: var(--tinte);
  border-radius: 999px;
  padding: 4px 8px;
  margin: -3px 0 0 -4px;
  font-weight: 600;
}

.tag-plus {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--tinte-45);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.tag:hover .tag-plus,
.tag-plus:focus-visible {
  opacity: 1;
}

.tag-plus:hover {
  color: var(--tinte);
  border-color: var(--linie-stark);
}

.tag-plus:active {
  transform: scale(.9);
}

.tag-plus svg {
  width: 13px;
  height: 13px;
}

/* Dropzone: gestrichelte Gleis-Markierung */
.tag.drop {
  outline: 2px dashed var(--tinte);
  outline-offset: -5px;
}

.tag.drop::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 0;
  border-top: 3px dashed var(--tinte-45);
  pointer-events: none;
}

/* Abfahrts-Karte im Raster */
.abfahrt-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 4px 6px 4px 5px;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--af, var(--tinte-45));
  border-radius: 7px;
  background: #fff;
  font-size: .74rem;
  cursor: pointer;
  text-align: left;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}

.abfahrt-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--schweb-s);
}

.abfahrt-chip:active {
  transform: scale(.97);
}

.ac-zeit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: none;
}

.ac-titel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinte-70);
}

.abfahrt-chip .gleis-mini svg {
  width: 11px;
  height: 11px;
}

.abfahrt-chip .sdot {
  width: 7px;
  height: 7px;
}

/* Andocken-Quittung (nach dem Speichern) */
@keyframes andocken {
  from {
    transform: translateX(-14px) scale(.92);
    opacity: 0;
  }

  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.andocken {
  animation: andocken .55s var(--ease-dock) both;
}

/* ---------- Depot-Leiste (Desktop) ---------- */

.depot-leiste {
  padding: 16px 14px;
  align-self: start;
}

.dl-hinweis {
  font-size: .8rem;
  color: var(--tinte-70);
  margin: 8px 0 12px;
}

.dl-gruppe {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-45);
  margin: 14px 0 6px;
}

.dl-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  margin-bottom: 4px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: #fff;
  cursor: grab;
  text-align: left;
  font-size: .86rem;
  font-weight: 500;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}

.dl-item:hover {
  border-color: var(--linie-stark);
  transform: translateY(-1px);
  box-shadow: var(--schweb-s);
}

.dl-item:active {
  cursor: grabbing;
  transform: scale(.97);
}

.dl-item.zieht {
  opacity: .4;
}

.dl-item .dl-griff {
  color: var(--tinte-45);
  flex: none;
  width: 13px;
  height: 13px;
}

.dl-item span:not(.badge) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-leer {
  font-size: .8rem;
  color: var(--tinte-45);
  border: 1px dashed var(--linie);
  border-radius: var(--r);
  padding: 12px;
}

/* ---------- Abfahrtstafel ---------- */

.tafel {
  align-self: start;
  padding-bottom: 10px;
}

.tafel-kopf {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}

.tafel-gruppe {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-45);
  padding: 12px 18px 4px;
}

.tafel-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}

.tafel-row:hover {
  background: var(--papier);
}

.tafel-row:active {
  background: var(--papier-2);
}

.tafel-row + .tafel-row {
  border-top: 1px solid var(--linie);
}

.tr-zeit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  color: var(--tinte-70);
  flex: none;
  display: grid;
  gap: 2px;
  min-width: 62px;
}

.tr-zeit strong {
  font-size: .95rem;
  color: var(--tinte);
}

.tr-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
}

.tr-titel {
  font-weight: 600;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tr-count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--tinte-45);
}

.tr-jetzt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .1em;
  background: var(--signal);
  color: var(--tinte);
  border-radius: 999px;
  padding: 3px 9px;
}

.tr-ok {
  color: var(--ok);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
}

.tr-fehler {
  color: var(--achtung);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
}

.tafel-leer {
  padding: 18px;
  font-size: .84rem;
  color: var(--tinte-45);
}

/* ==========================================================================
   Reiter 3 · Gleise & Depot
   ========================================================================== */

.probeband {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  background: #fff;
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: .9rem;
  color: var(--tinte-70);
}

.probeband svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  color: var(--tinte);
}

.probeband strong {
  color: var(--tinte);
}

.gleise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.gleis-karte {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.gk-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gk-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  color: var(--tinte);
  position: relative;
}

.gk-icon svg {
  width: 21px;
  height: 21px;
}

.gk-akzent {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.gk-name-wrap {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.gk-nr {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-45);
}

.gk-name {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  color: var(--tinte-70);
  min-height: 20px;
}

/* Stellwerk-Sequenz: drei laufende Punkte (nur opacity) */
.stellwerk {
  display: inline-flex;
  gap: 5px;
}

.stellwerk i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinte);
  opacity: .2;
  animation: stellwerk 1.2s infinite;
}

.stellwerk i:nth-child(2) {
  animation-delay: .2s;
}

.stellwerk i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes stellwerk {

  0%,
  60%,
  100% {
    opacity: .2;
  }

  20% {
    opacity: 1;
  }
}

.gk-steckbrief {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--linie);
  padding-top: 12px;
  font-size: .84rem;
}

.gk-steckbrief dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-45);
}

.gk-steckbrief dd {
  margin: 0 0 4px;
  color: var(--tinte-70);
}

.gk-steckbrief dd.mono {
  color: var(--tinte);
  font-size: .8rem;
}

.gk-aktionen {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.gk-aktionen .btn {
  flex: 1;
}

.gk-aktionen .btn-still {
  flex: none;
}

/* Depot */
.depot-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.depot-karte {
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.gauge {
  height: 8px;
  border-radius: 999px;
  background: var(--papier-2);
  border: 1px solid var(--linie);
  overflow: hidden;
}

.gauge-fuellung {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--tinte);
  transform-origin: left;
  transition: width .5s var(--ease);
}

.gauge-fuellung.voll {
  background: var(--achtung);
}

.gauge-text {
  font-size: .78rem;
  color: var(--tinte-70);
}

.depot-hinweis {
  font-size: .82rem;
  color: var(--tinte-45);
}

.depot-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--linie);
  padding-top: 12px;
}

.depot-aktion:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.depot-aktion h3 {
  font-size: .96rem;
  font-weight: 600;
}

.depot-aktion p {
  font-size: .8rem;
  color: var(--tinte-70);
  max-width: 34ch;
}

.depot-aktion .btn {
  flex: none;
}

/* Depot sichern / wiederherstellen — zwei Knöpfe rechts, Datei-Input versteckt */
.depot-sicherung-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
}

.depot-sicherung-btns .btn {
  flex: none;
}

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

/* Import-Dialog: drei Wege dürfen umbrechen statt sich zu quetschen */
.import-aktionen {
  flex-wrap: wrap;
}

.import-aktionen .btn {
  flex: 1 1 auto;
  min-width: 8.5rem;
}

.konto-zeile {
  font-size: .94rem;
}

.konto-zeile strong {
  font-size: .86rem;
}

/* ==========================================================================
   Echtbetrieb — Konto-Karte, ECHT/SIMULIERT-Badges, Anschluss-Formulare
   ========================================================================== */

/* Leitsystem-Chip oben: Echtbetrieb = durchgezogene Linie + ok-Status */
.probe-chip.echt {
  border-style: solid;
  border-color: var(--ok);
  color: var(--ok);
}

.echt-karte {
  padding: 16px 18px 18px;
  margin-bottom: 16px;
  display: grid;
  gap: 12px;
}

.ek-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ek-chip {
  flex: none;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tinte-70);
  border: 1px dashed var(--linie-stark);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.ek-chip.echt {
  border-style: solid;
  border-color: var(--ok);
  color: var(--ok);
}

.ek-body {
  display: grid;
  gap: 12px;
}

.ek-text {
  font-size: .94rem;
  color: var(--tinte-70);
  max-width: 78ch;
}

.ek-text strong {
  color: var(--tinte);
}

.ek-klein {
  font-size: .82rem;
  color: var(--tinte-45);
  max-width: 78ch;
}

.ek-klein strong {
  color: var(--tinte-70);
}

.ek-form {
  display: grid;
  gap: 0;
  max-width: 560px;
}

.ek-form .feld {
  margin-bottom: 12px;
}

.ek-pass-hinweis {
  letter-spacing: .08em;
  text-transform: none;
}

.ek-meldung {
  margin-bottom: 10px;
}

.ek-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Gleis-Karten: Status-Badges ECHT (--ok) vs SIMULIERT --- */
.gk-badges {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gk-badge {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .14em;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid var(--linie-stark);
  color: var(--tinte-70);
  white-space: nowrap;
}

.gk-badge-echt {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.gk-badge-sim {
  border-style: dashed;
}

.gk-badge-vor {
  border-color: var(--linie);
  color: var(--tinte-45);
}

/* --- Echt-Anschluss-Block je Gleis-Karte --- */
.gk-echt {
  display: grid;
  gap: 10px;
  border-top: 1px dashed var(--linie-stark);
  padding-top: 12px;
  margin-top: auto;
}

.gk-echt .gk-aktionen {
  margin-top: 0;
}

.gk-echt-kicker {
  font-size: .6rem;
}

.gk-echt-notiz {
  font-size: .8rem;
  color: var(--tinte-70);
}

.gk-cred {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gk-cred .sdot {
  margin-top: 5px;
}

.gk-cred-text {
  display: grid;
  gap: 2px;
  font-size: .86rem;
  min-width: 0;
}

.gk-cred-text strong {
  overflow-wrap: anywhere;
}

.gk-cred-label {
  font-size: .74rem;
  color: var(--tinte-45);
}

.gk-echt-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  padding: 12px;
}

.gk-echt-form .feld {
  margin-bottom: 0;
}

.gk-echt-form .feld-hinweis {
  font-size: .76rem;
  color: var(--tinte-45);
}

.gk-echt-form.prueft {
  opacity: .65;
}

.gk-echt-schritte {
  font-size: .6rem;
}

.gk-anleitung {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: 8px;
}

.gk-anleitung li {
  counter-increment: schritt;
  position: relative;
  padding-left: 30px;
  font-size: .8rem;
  color: var(--tinte-70);
  overflow-wrap: anywhere;
}

.gk-anleitung li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  color: var(--tinte);
  border-bottom: 2px solid var(--linie-stark);
  padding-bottom: 1px;
}

.gk-echt-meldung {
  font-size: .8rem;
  overflow-wrap: anywhere;
}

/* --- Anfänger-Anleitung „So bekommst du deinen Schlüssel" (aufklappbar) --- */
.gk-hilfe {
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--papier-2);
  overflow: hidden;
}

.gk-hilfe-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--tinte);
  transition: background-color .16s var(--ease);
}

.gk-hilfe-toggle:hover {
  background: rgba(20, 24, 31, .05);
}

.gk-hilfe-toggle:active {
  transform: scale(.99);
}

.gkh-titel-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.gkh-titel {
  font-weight: 600;
  font-size: .88rem;
}

.gkh-ampel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--tinte-70);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.gkh-ampel-gruen { border-color: rgba(26, 127, 55, .55); }
.gkh-ampel-gelb  { border-color: rgba(210, 100, 0, .55); }
.gkh-ampel-rot   { border-color: rgba(200, 50, 30, .5); }

/* „Fang hier an" — rationierter Signal-Einsatz (Telegram) */
.gkh-start {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tinte);
  background: var(--signal);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.gk-hilfe-toggle svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--tinte-70);
  transition: transform .2s var(--ease);
}

.gk-hilfe.offen .gk-hilfe-toggle svg {
  transform: rotate(180deg);
}

.gk-hilfe-panel {
  display: grid;
  gap: 10px;
  padding: 2px 12px 13px;
  border-top: 1px dashed var(--linie);
}

.gk-hilfe-panel[hidden] {
  display: none;
}

.gkh-brauchst {
  font-size: .82rem;
  color: var(--tinte-70);
  padding-top: 9px;
}

.gkh-brauchst strong {
  color: var(--tinte);
  font-weight: 600;
}

.gkh-schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gkhschritt;
  display: grid;
  gap: 8px;
}

.gkh-schritte li {
  counter-increment: gkhschritt;
  position: relative;
  padding-left: 32px;
  font-size: .84rem;
  color: var(--tinte);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.gkh-schritte li::before {
  content: counter(gkhschritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 600;
  color: var(--papier);
  background: var(--tinte);
  border-radius: 50%;
}

.gkh-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 2px;
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid var(--tinte);
  border-radius: var(--r);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}

.gkh-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 24, 31, .18);
}

.gkh-link:active {
  transform: scale(.98);
}

.gkh-link svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--papier);
}

.gkh-link-text {
  text-align: center;
}

.gkh-hinweis {
  font-size: .77rem;
  color: var(--tinte-45);
  line-height: 1.4;
}

/* --- Editor: Echt/Simuliert-Hinweis, Post-Links --- */

.echt-fahrt {
  color: var(--tinte);
}

.echt-links {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.echt-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: 1px;
  transition: border-color .18s var(--ease);
}

.echt-link:hover {
  border-color: var(--tinte);
}

.echt-link svg {
  width: 13px;
  height: 13px;
}

.echt-zeile {
  font-size: .8rem;
  color: var(--tinte-70);
}

.echt-zeile.achtung {
  color: var(--achtung);
}

/* Gleis-Chips im Editor: echter Anschluss bekommt einen ok-Punkt */
.gleis-chips .chip.echt::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

/* --- Feed: echte Beiträge --- */
.feed-echt-link span {
  white-space: normal;
}

.feed-echt-ohne {
  font-size: .74rem;
  color: var(--ok);
}

/* --- Post-Mockup: Beitragsbild --- */
.pm-bild {
  margin: 10px 0 4px;
  border: 1px solid var(--linie);
  border-radius: calc(var(--r) - 4px);
  overflow: hidden;
  background: var(--papier-2);
}

.pm-bild img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.pm-bild-fehlt {
  padding: 14px 12px;
  font-size: .7rem;
  color: var(--tinte-45);
}

/* Mockup-Medien (hochgeladene Bilder/Video) */
.pm-medien {
  margin: 10px 0 4px;
  display: grid;
  gap: 4px;
}

.pm-medien-1 { grid-template-columns: 1fr; }
.pm-medien-2,
.pm-medien-3,
.pm-medien-4 { grid-template-columns: 1fr 1fr; }

.pm-medien img,
.pm-medien video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--papier-2);
  border: 1px solid var(--linie);
  border-radius: calc(var(--r) - 5px);
}

.pm-medien-1 img,
.pm-medien-1 video {
  aspect-ratio: auto;
  max-height: 240px;
}

/* Bei 3 Bildern das erste über beide Spalten */
.pm-medien-3 img:first-child,
.pm-medien-3 video:first-child { grid-column: 1 / -1; }

/* ==========================================================================
   App-Fußzeile
   ========================================================================== */

.app-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  padding: 26px 4px 4px;
  font-size: .8rem;
  color: var(--tinte-45);
}

.app-fuss a {
  color: var(--tinte-70);
  text-decoration: none;
  border-bottom: 1px solid var(--linie-stark);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.app-fuss a:hover {
  color: var(--tinte);
  border-color: var(--tinte);
}

/* ==========================================================================
   Bottom-Tab-Bar (Mobil) — Daumen-Zone
   ========================================================================== */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr;
  align-items: stretch;
  background: rgba(242, 243, 238, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie);
}

.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tinte-45);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .18s var(--ease);
  position: relative;
}

.tabbar a svg {
  width: 22px;
  height: 22px;
}

.tabbar a[aria-current="page"] {
  color: var(--tinte);
}

.tabbar a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tinte);
}

.tb-plus {
  align-self: center;
  width: 52px;
  height: 52px;
  margin-inline: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--signal);
  color: var(--tinte);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--schweb-s);
  transition: transform .2s var(--ease-dock);
}

.tb-plus svg {
  width: 24px;
  height: 24px;
}

.tb-plus:active {
  transform: scale(.92);
}

/* ==========================================================================
   Overlays: Scrim, Drawer (Desktop: rechts) / Bottom-Sheet (Mobil), Modal
   ========================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 24, 31, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}

.scrim.offen {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease);
}

/* Noch nie geöffnete Overlays (Klasse „kalt", app.js entfernt sie beim ersten
   Öffnen) komplett aus Style/Layout heraushalten — spart die teure
   Erst-Layout-Arbeit beim Start (TBT/PageSpeed). Betrifft die Schließ-
   Animation nicht, da „kalt" nach dem ersten Öffnen dauerhaft weg ist. */
.drawer.kalt,
.modal.kalt {
  content-visibility: hidden;
}

.drawer {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: var(--schweb);
  transform: translateY(103%);
  transition: transform .42s var(--ease);
  touch-action: pan-y;
}

.drawer.offen {
  transform: translateY(0);
}

.drawer.schiebt {
  transition: none;
}

.drawer-editor {
  height: 100svh;
  max-height: 100svh;
  border-radius: 0;
  border: 0;
}

.grabber {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--linie-stark);
  margin: 10px auto 2px;
  flex: none;
}

.drawer-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--linie);
  flex: none;
}

.drawer-titel {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  text-transform: uppercase;
  line-height: 1.02;
  margin-top: 3px;
}

.drawer-inhalt {
  overflow-y: auto;
  padding: 16px 18px;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}

.drawer-fuss {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie);
  background: var(--papier);
  flex: none;
}

.drawer-fuss .btn {
  flex: 1;
}

.drawer-fuss .btn-still {
  flex: none;
}

/* Linien-Detail */
.det-toggle-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.det-peak {
  font-size: .76rem;
  color: var(--tinte-70);
  text-align: right;
}

/* Zusammengehörige Zeiträume („Nov–Dez") nie intern umbrechen */
.nowrap {
  white-space: nowrap;
}

.det-chart-wrap {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 10px 10px 4px;
  margin-bottom: 14px;
}

.det-chart {
  width: 100%;
  height: auto;
}

.det-desc {
  font-size: .94rem;
  color: var(--tinte-70);
  margin-bottom: 6px;
}

.drawer-h3 {
  margin: 18px 0 8px;
}

.det-ansagen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.det-ansagen li {
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: .88rem;
}

.det-ansagen svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--tinte-45);
}

.det-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.det-hashtags .chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem;
}

.det-gleise {
  display: grid;
  gap: 7px;
}

.det-gleis-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 9px 12px;
  font-size: .86rem;
}

.det-gleis-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--tinte);
}

.det-gleis-row .mono {
  margin-left: auto;
  font-size: .72rem;
  color: var(--tinte-45);
  white-space: nowrap;
}

/* ---------- Abfahrt-Editor ---------- */

.editor-grid {
  display: grid;
  gap: 20px;
}

.feld {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  border: 0;
  padding: 0;
  min-width: 0;
}

.feld label,
.feld legend,
.feld-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-45);
  padding: 0;
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: #fff;
  transition: border-color .2s var(--ease);
}

.feld textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  border-color: var(--tinte);
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--tinte-45);
}

.feld-zeile {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.feld-zeile > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.linie-schnell .chip {
  padding: 0 10px 0 6px;
}

.zaehler-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.zaehler {
  font-size: .78rem;
  color: var(--tinte-70);
}

.zaehler.ueber {
  color: var(--achtung);
  font-weight: 600;
}

.zaehler-gleis {
  font-size: .74rem;
  color: var(--tinte-45);
  text-align: right;
}

.limit-balken {
  display: grid;
  gap: 6px;
}

.limit-balken:empty {
  display: none;
}

.lb-row {
  display: grid;
  grid-template-columns: 92px 1fr 74px;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
}

.lb-name {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--tinte-45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-track {
  height: 4px;
  border-radius: 999px;
  background: var(--papier-2);
  overflow: hidden;
}

.lb-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--tinte);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .25s var(--ease);
}

.lb-row.ueber .lb-fill {
  background: var(--achtung);
}

.lb-count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--tinte-70);
}

.lb-row.ueber .lb-count {
  color: var(--achtung);
  font-weight: 600;
}

.gleis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feld-hinweis {
  font-size: .82rem;
  color: var(--tinte-70);
}

.feld-hinweis a {
  color: var(--tinte);
  font-weight: 600;
}

/* ---------- Medien-Dropzone (Editor) ---------- */
.feld-nebenlabel {
  text-transform: none;
  letter-spacing: .03em;
  font-weight: 400;
  color: var(--tinte-45);
}

.dropzone {
  position: relative;
  border: 1.5px dashed var(--linie-stark);
  border-radius: var(--r);
  background: var(--papier-2);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.dropzone:hover { border-color: var(--tinte); }

/* Sichtbarer Fokus für Tastatur (der File-Input selbst ist opacity:0) */
.dropzone:focus-within {
  border-color: var(--tinte);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(20, 24, 31, .12);
}

.dropzone.drueber {
  border-color: var(--tinte);
  background: #fff;
}

/* File-Input unsichtbar ÜBER der Dropzone — position:absolute;opacity:0,
   NICHT hidden (Chrome-Android braucht ein „sichtbares" Input für die
   Kamera-Option; kein accept="image/*" im HTML). */
.dropzone .dz-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.dz-inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  pointer-events: none;
}

.dz-inner svg {
  width: 26px;
  height: 26px;
  color: var(--tinte-45);
}

.dz-titel {
  font-weight: 600;
  font-size: .9rem;
  color: var(--tinte);
}

.dz-sub {
  font-size: .74rem;
  color: var(--tinte-45);
}

.dz-anon { color: var(--tinte-70); }
.dz-anon strong { color: var(--tinte); }

/* Vorschau-Thumbnails */
.medien-thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

.medien-thumbs[hidden] { display: none; }

.mthumb {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: calc(var(--r) - 3px);
  overflow: hidden;
  background: var(--papier-2);
}

.mthumb.fehler { border-color: var(--achtung); }

.mt-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.mt-media img,
.mt-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mt-typ {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .56rem;
  letter-spacing: .06em;
  background: rgba(20, 24, 31, .72);
  color: #fff;
}

.mt-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 24, 31, .72);
  color: #fff;
  cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s var(--ease);
}

.mt-remove svg { width: 13px; height: 13px; }
.mt-remove:hover { background: var(--achtung); }
.mt-remove:active { transform: scale(.9); }

.mt-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(20, 24, 31, .15);
}

.mt-prog-fill {
  display: block;
  height: 100%;
  background: var(--signal);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .2s var(--ease);
}

.mt-status {
  display: block;
  padding: 3px 6px;
  font-size: .6rem;
  text-align: center;
  color: var(--tinte-45);
}

.mt-status.ok { color: var(--tinte-70); }
.mt-status.achtung { color: var(--achtung); font-weight: 600; }

/* Medien-Regeln je Gleis */
.gleis-regeln {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

.gleis-regeln[hidden] { display: none; }

.gr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .78rem;
}

.gr-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinte);
  font-weight: 600;
}

.gr-name svg {
  width: 15px;
  height: 15px;
  color: var(--tinte-70);
  flex: none;
}

.gr-regel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: var(--tinte-45);
  text-align: right;
}

.gr-row.achtung .gr-name,
.gr-row.achtung .gr-regel { color: var(--achtung); }

.segment {
  display: inline-flex;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  overflow: hidden;
  width: fit-content;
}

.segment button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--tinte-70);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.segment button + button {
  border-left: 1px solid var(--linie-stark);
}

.segment button[aria-checked="true"] {
  background: var(--tinte);
  color: #fff;
}

.status-fix {
  color: var(--ok);
  font-size: .84rem;
}

.ed-meldung {
  min-height: 1.2em;
  font-size: .84rem;
  color: var(--tinte-70);
}

.ed-meldung.achtung {
  color: var(--achtung);
}

/* Editor-Vorschau */
.editor-vorschau {
  border-top: 1px solid var(--linie);
  padding-top: 4px;
}

.vorschau-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-size: .92rem;
  color: var(--tinte);
  cursor: pointer;
}

.vorschau-toggle svg {
  width: 17px;
  height: 17px;
  transition: transform .25s var(--ease);
}

.vorschau-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.vorschau-kicker {
  display: none;
  margin-bottom: 10px;
}

#vorschau-box[hidden] {
  display: none;
}

.vorschau-leer {
  font-size: .82rem;
  color: var(--tinte-45);
  border: 1px dashed var(--linie);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
}

/* ---------- Post-Mockup (Gleis-Feed + Editor-Vorschau) ---------- */

.post-mock {
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--pf, var(--linie-stark));
  border-radius: var(--r);
  padding: 13px 14px;
}

.pm-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.pm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--af, var(--tinte));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  flex: none;
}

.pm-wer {
  min-width: 0;
  display: grid;
  gap: 1px;
  flex: 1;
}

.pm-name {
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.1;
}

.pm-zeit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  color: var(--tinte-45);
}

.pm-plattform {
  flex: none;
  color: var(--tinte-45);
}

.pm-plattform svg {
  width: 16px;
  height: 16px;
}

.pm-titel {
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 4px;
}

.pm-text {
  font-size: .88rem;
  color: var(--tinte-70);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.pm-fuss {
  display: flex;
  gap: 18px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--linie);
  color: var(--tinte-45);
  font-size: .74rem;
}

.pm-fuss span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.pm-fuss svg {
  width: 14px;
  height: 14px;
}

/* Feed */
.feed-probe {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tinte-45);
  margin-bottom: 12px;
}

.feed-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.feed-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.feed-aktionen .btn {
  min-height: 40px;
  font-size: .82rem;
  padding: 0 14px;
}

.feed-leer {
  color: var(--tinte-45);
  font-size: .88rem;
  border: 1px dashed var(--linie);
  border-radius: var(--r);
  padding: 22px;
  text-align: center;
}

/* ---------- Modale ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}

.modal.offen {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease);
}

.modal-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: var(--schweb);
  max-width: 480px;
  width: 100%;
  padding: 26px 26px 22px;
  display: grid;
  gap: 12px;
  transform: translateX(-26px);
  transition: transform .42s var(--ease);
}

.modal.offen .modal-karte {
  transform: translateX(0);
}

.modal-schmal {
  max-width: 400px;
}

.modal-titel {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  line-height: 1;
}

.modal-karte p {
  font-size: .94rem;
  color: var(--tinte-70);
}

.modal-klein {
  font-size: .82rem !important;
  color: var(--tinte-45) !important;
}

.modal-aktionen {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.modal-aktionen .btn {
  flex: 1;
}

/* ---------- Toasts ---------- */

.toasts {
  position: fixed;
  z-index: 120;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  width: min(440px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tinte);
  color: var(--papier);
  border: 0;
  border-radius: var(--r);
  padding: 13px 16px;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  box-shadow: var(--schweb);
  cursor: default;
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.toast.drin {
  opacity: 1;
  transform: translateX(0);
}

.toast.klickbar {
  cursor: pointer;
}

.toast.klickbar:active {
  transform: scale(.98);
}

.toast svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.toast .t-ok {
  color: #7ee2a1;
}

/* Bei offenem Drawer/Sheet/Modal (body.mit-overlay, app.js) weichen die
   Toasts nach oben aus: über die Aktionsleiste (.drawer-fuss, ~70px hoch)
   des Fullscreen-Editors — sonst überdeckt ein Toast den Speichern-Knopf
   und verschluckt den Klick. */
body.mit-overlay .toasts {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   DESKTOP-AST (≥ 900px) — eigenes Produkt, nutzt die Fläche
   ========================================================================== */

@media (min-width: 900px) {

  :root {
    --kopf-h: 64px;
  }

  main {
    padding-bottom: 40px;
  }

  .tabbar {
    display: none;
  }

  .toasts {
    left: auto;
    right: 26px;
    transform: none;
    bottom: 26px;
  }

  /* Drawer docken rechts an — bei offenem Overlay weichen die Toasts nach
     unten links aus, damit sie nie über der Editor-Aktionsleiste liegen */
  body.mit-overlay .toasts {
    left: 26px;
    right: auto;
    bottom: 26px;
  }

  /* Bahnsteig-Reiter oben */
  .reiter {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: 4px;
  }

  .reiter a {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    position: relative;
    color: var(--tinte-70);
    text-decoration: none;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color .2s var(--ease);
  }

  .reiter a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: var(--tinte);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
  }

  .reiter a:hover {
    color: var(--tinte);
  }

  .reiter a:hover::after {
    transform: scaleX(.55);
  }

  .reiter a[aria-current="page"] {
    color: var(--tinte);
  }

  .reiter a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .probe-chip {
    display: inline-flex;
  }

  #top-plus {
    display: inline-flex;
  }

  /* --- Netzplan: Split — Verzeichnis links (340px), Netzplan rechts --- */
  .np-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .verzeichnis {
    order: -1;
    position: sticky;
    top: calc(var(--kopf-h) + 16px);
    max-height: calc(100vh - var(--kopf-h) - 32px);
  }

  .np-karte {
    min-height: 520px;
  }

  .netz-wrap {
    padding: 16px 20px 0;
  }

  .legende {
    padding-inline: 22px;
  }

  /* --- Fahrplan: Depot-Leiste + Raster + Abfahrtstafel --- */
  .fp-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 324px;
    gap: 18px;
    align-items: start;
  }

  .depot-leiste {
    display: block;
    position: sticky;
    top: calc(var(--kopf-h) + 16px);
    max-height: calc(100vh - var(--kopf-h) - 32px);
    overflow-y: auto;
  }

  .tafel {
    position: sticky;
    top: calc(var(--kopf-h) + 16px);
    max-height: calc(100vh - var(--kopf-h) - 32px);
    overflow-y: auto;
  }

  .monat-strip {
    display: none;
  }

  .fp-monat {
    font-size: 1.9rem;
    min-width: 210px;
  }

  /* --- Gleise: 4er-Raster --- */
  .gleise-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .depot-zeile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Echtbetrieb-Konto: Formularfelder nebeneinander */
  .ek-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    max-width: 640px;
  }

  .ek-form .ek-meldung,
  .ek-form .ek-aktionen {
    grid-column: 1 / -1;
  }

  /* --- Drawer von rechts statt Bottom-Sheet --- */
  .drawer {
    left: auto;
    top: 0;
    bottom: 0;
    width: min(480px, 94vw);
    max-height: none;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--linie);
    transform: translateX(103%);
    touch-action: auto;
  }

  .drawer.offen {
    transform: translateX(0);
  }

  .drawer-editor {
    width: min(780px, 94vw);
    height: auto;
  }

  .grabber {
    display: none;
  }

  .drawer-kopf {
    padding-top: 18px;
  }

  /* Editor: Formular + Live-Vorschau nebeneinander */
  .editor-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }

  .editor-vorschau {
    border-top: 0;
    border-left: 1px solid var(--linie);
    padding: 0 0 0 20px;
    position: sticky;
    top: 0;
  }

  .vorschau-toggle {
    display: none;
  }

  .vorschau-kicker {
    display: block;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .fp-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .depot-leiste {
    display: none;
  }

  .gleise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zwischengröße: Gleis-Karten zu zweit */
@media (min-width: 560px) and (max-width: 899px) {
  .gleise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .depot-zeile {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bottom-Sheets: Grabber/Kopf als Wisch-Zone (nur Mobil) */
@media (max-width: 899px) {

  .drawer .grabber,
  .drawer .drawer-kopf {
    touch-action: none;
  }
}

/* Small Mobile: Depot-Aktion mit zwei Knöpfen unter den Text stapeln */
@media (max-width: 560px) {
  .depot-aktion {
    flex-wrap: wrap;
  }

  .depot-sicherung-btns {
    width: 100%;
  }

  .depot-sicherung-btns .btn {
    flex: 1;
  }
}

/* Sehr schmal (bis 360px): Editor-Zeile stapeln */
@media (max-width: 400px) {
  .feld-zeile {
    grid-template-columns: 1fr;
  }

  .fp-aktionen .btn span {
    display: none;
  }

  .fp-aktionen .btn svg {
    margin: 0;
  }
}

/* ==========================================================================
   prefers-reduced-motion (Pflicht — zusätzlich zu tokens.css)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  html.js .einfahrt {
    opacity: 1;
    transform: none;
  }
}