.pocket-train {
  width: var(--train-width);
  box-sizing: border-box;
  max-width: 100%;
  color: var(--train-text);
  font: 700 var(--train-font-size)/1.25 var(--train-font);
  filter: drop-shadow(0 8px 12px #0003);
}
.pocket-train * { box-sizing: border-box; }
.pocket-train .train-track {
  height: var(--train-bar-height);
  min-width: 20px;
  flex: 1;
  position: relative;
  border-radius: 999px;
  background: var(--train-track);
}
.pocket-train .train-track > span {
  width: var(--train-progress);
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--train-accent);
  transition: width .5s ease;
}
.pocket-train.is-warning .train-track > span { background: var(--train-warn); }
.pocket-train .train-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pocket-train.is-warning .train-clock { color: var(--train-warn); }
.pocket-train.is-warning .train-time-badge { background: var(--train-warn); color: #fff; }
.pocket-train .train-top { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pocket-train .train-points { white-space: nowrap; }
.pocket-train .train-record {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  white-space: nowrap; color: var(--train-muted); font-weight: 700;
}
.pocket-train .train-record.is-new { color: var(--train-accent); }
.pocket-train.layout-bar,
.pocket-train.layout-minimal,
.pocket-train.layout-ticker,
.pocket-train.layout-train { background: var(--train-bg); }
.pocket-train.layout-bar,
.pocket-train.layout-train { border-radius: var(--train-radius); }

/* 01 · Balken */
.pocket-train.layout-bar { padding: 13px 14px; }
.pocket-train .train-bar { display: flex; align-items: center; gap: 11px; }
.pocket-train .train-level {
  display: grid; place-items: center; flex: 0 0 auto;
  min-width: 35px; height: 37px; padding: 0 5px;
  border-radius: 7px; background: var(--train-accent); font-size: 1.05em;
}
.pocket-train .train-main { min-width: 0; flex: 1; }
.pocket-train .train-bar-meta { display: flex; align-items: center; gap: 9px; min-height: 19px; font-size: .68em; margin-bottom: 4px; }
.pocket-train .train-bar .train-track { height: max(5px,calc(var(--train-bar-height) * .75)); }
.pocket-train .train-bar .train-clock { font-size: 1.1em; }

/* 02 · Schaffner: Badges über dem Levelbalken */
.pocket-train.layout-conductor { filter: none; }
.pocket-train .train-badges { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.pocket-train .train-supporter-badge,
.pocket-train .train-count-badge,
.pocket-train .train-time-badge,
.pocket-train .train-badges .train-record {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 31px; padding: 0 12px; border-radius: 999px;
  background: var(--train-pill); color: var(--train-pill-text); font-size: .68em;
}
.pocket-train .train-time-badge { margin-left: auto; font-variant-numeric: tabular-nums; }
.pocket-train .train-badges .train-record.is-new { background: var(--train-accent); color: #fff; }
.pocket-train .train-schaffner-pill {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  height: 56px; padding: 0 18px; border-radius: 999px; background: var(--train-bg);
}
.pocket-train .train-schaffner-pill > strong { font-size: 1.45em; color: var(--train-accent); }
.pocket-train .train-schaffner-pill .train-track { height: max(5px,calc(var(--train-bar-height) * .75)); }
.pocket-train .train-track.has-knob > i {
  position: absolute; top: 50%; left: var(--train-progress); width: 13px; height: 13px;
  border-radius: 50%; transform: translate(-50%,-50%);
  background: var(--train-accent); box-shadow: 0 0 0 2px var(--train-bg);
}
.pocket-train .train-next-level { display: flex; flex-direction: column; align-items: center; line-height: .85; }
.pocket-train .train-next-level small { font-size: .42em; }
.pocket-train .train-next-level b { font-size: 1.45em; }

/* 03 · Minimal */
.pocket-train.layout-minimal { border-radius: 0; padding: 9px 11px; }
.pocket-train .train-minimal { display: flex; align-items: center; gap: 10px; }
.pocket-train .train-minimal > span:first-child { color: var(--train-accent); white-space: nowrap; font-size: .75em; }
.pocket-train .train-minimal .train-record { font-size: .58em; }
.pocket-train .train-minimal .train-track { height: max(5px,calc(var(--train-bar-height) * .75)); }
.pocket-train .train-minimal .train-clock { font-size: .75em; }

/* 04 · Ticker */
.pocket-train.layout-ticker { border-radius: 0; }
.pocket-train.layout-ticker > .train-track { height: max(4px,calc(var(--train-bar-height) * .55)); border-radius: 0; }
.pocket-train .train-ticker {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 4px 10px; white-space: nowrap;
  color: var(--train-accent); font-size: .7em;
}
.pocket-train .train-ticker .train-top,
.pocket-train .train-ticker .train-clock { color: var(--train-text); }
.pocket-train .train-ticker .train-record { font-size: 1em; }

/* 05 · Zug: flache, horizontale Route */
.pocket-train.layout-train { padding: 10px 14px; }
.pocket-train .train-inline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pocket-train .train-loco { display: block; flex: 0 0 54px; width: 54px; height: 52px; align-self: end; }
.pocket-train .train-loco svg { display: block; width: 100%; height: 100%; }
.pocket-train .train-content { flex: 1; min-width: 0; }
.pocket-train .train-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: .68em; white-space: nowrap; margin-bottom: 7px; }
.pocket-train .train-heading .train-top { color: var(--train-muted); }
.pocket-train .train-heading-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.pocket-train .train-next-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--train-muted); font-size: .57em; font-weight: 500; white-space: nowrap; }
.pocket-train .train-wagons { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pocket-train .train-wagons svg { width: 28px; height: 24px; display: block; }
.pocket-train.layout-train .train-track { height: max(4px,calc(var(--train-bar-height) * .65)); }
.pocket-train.layout-train .train-clock { align-self: end; padding-bottom: 5px; font-size: .86em; }

@media(max-width:500px) {
  .pocket-train { font-size: calc(var(--train-font-size) * .8); }
  .pocket-train.layout-train { padding: 9px 11px; }
  .pocket-train .train-inline { gap: 6px; }
  .pocket-train .train-loco { flex-basis: 43px; width: 43px; height: 43px; }
  .pocket-train .train-wagons { gap: 3px; }
  .pocket-train .train-wagons svg { width: 21px; height: 20px; }
  .pocket-train .train-next-row { gap: 4px; }
  .pocket-train .train-schaffner-pill { height: 47px; padding: 0 12px; gap: 8px; }
}
@media(max-width:360px) {
  .pocket-train .train-wagons svg:last-child { display: none; }
  .pocket-train .train-heading { font-size: .58em; }
  .pocket-train .train-next-row { font-size: .5em; }
  .pocket-train.layout-train .train-clock { font-size: .72em; }
}