@font-face {
  font-family: "ETCFont";
  src: url("assets/fonts/ETCFont.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --etc-purple: #4800ff;
  --etc-black: #000000;
  --etc-white: #ffffff;
  --etc-bg: #f5f5fb;
  --etc-border-soft: #ddddf5;
  --etc-ink-soft: #4c4b5f;
  --etc-muted: #747184;
  --etc-radius: 22px;
  --etc-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
  --etc-page-width: min(1180px, calc(100vw - 36px));
  --etc-font-ui: "Bahnschrift", "DIN Alternate", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --etc-font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--etc-black) !important;
  font-family: var(--etc-font-ui) !important;
  background:
    linear-gradient(90deg, rgba(72, 0, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(72, 0, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 0 0, #ffffff 0, #f0ecff 42%, #ffffff 78%) !important;
  background-size: 36px 36px, 36px 36px, auto !important;
}

body.site-page {
  padding: 0 18px 56px !important;
}

body.monitor-page,
body.showmap-page {
  padding: 0 !important;
  background: #000 !important;
  color: #fff;
}

body::selection {
  color: var(--etc-white);
  background: var(--etc-purple);
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

img[src*=".png"] {
  image-rendering: pixelated;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: 18px;
  top: 12px;
  z-index: 999;
  transform: translateY(-140%);
  padding: 10px 14px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 800;
  text-decoration: none;
}

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

.etc-shell-nav {
  position: sticky;
  top: 14px;
  z-index: 100;
  width: var(--etc-page-width);
  margin: 14px auto 30px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid #000;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(18px);
}

.etc-shell-brand {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  color: #000;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.etc-shell-brand img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
}

.etc-shell-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.etc-shell-links::-webkit-scrollbar {
  display: none;
}

.etc-shell-links a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #000;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.etc-shell-links a:hover,
.etc-shell-links a:focus-visible {
  border-color: #000;
  background: var(--etc-white);
  transform: translateY(-1px);
}

.etc-shell-links a.is-active,
.etc-shell-links a[data-primary="true"].is-active {
  border-color: #000;
  background: var(--etc-purple);
  color: #fff;
}

.etc-shell-links a[data-primary="true"]:not(.is-active) {
  background: #000;
  color: #fff;
}

body:not(.netzplan-page):not(.data-editor-page) main,
.container,
.wrap,
.section-shell,
.etc-shell-nav,
.footer,
body.site-page > h1,
body.site-page > ul,
body.site-page > p {
  width: var(--etc-page-width) !important;
  max-width: var(--etc-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.netzplan-page):not(.data-editor-page) main {
  display: grid;
  gap: 28px;
}

.container,
.wrap {
  position: relative;
  padding: clamp(20px, 3vw, 36px) !important;
  border: 2px solid #000 !important;
  border-radius: var(--etc-radius) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--etc-shadow) !important;
}

.container::before,
.wrap::before,
.section-shell::before {
  content: "";
  position: absolute;
  inset: 12px auto auto 18px;
  width: 56px;
  height: 6px;
  background: var(--etc-purple);
  box-shadow: 66px 0 0 #000;
}

body:not(.netzplan-page):not(.data-editor-page) h1 {
  margin: 0 0 20px !important;
  color: #000;
  font-family: "ETCFont", var(--etc-font-ui) !important;
  font-size: clamp(1.55rem, 3.6vw, 2.85rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.04 !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

body:not(.netzplan-page):not(.data-editor-page) h2,
body:not(.netzplan-page):not(.data-editor-page) h3,
body:not(.netzplan-page):not(.data-editor-page) h4 {
  color: #000;
  font-family: var(--etc-font-ui) !important;
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1;
}

body:not(.netzplan-page):not(.data-editor-page) h2 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 4vw, 3.7rem);
}

body:not(.netzplan-page):not(.data-editor-page) h3 {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

p {
  line-height: 1.6;
}

body:not(.netzplan-page):not(.data-editor-page) .muted,
body:not(.netzplan-page):not(.data-editor-page) .sub,
body:not(.netzplan-page):not(.data-editor-page) .hint,
body:not(.netzplan-page):not(.data-editor-page) .meta,
body:not(.netzplan-page):not(.data-editor-page) small {
  color: var(--etc-muted) !important;
}

.section-shell {
  position: relative;
  width: var(--etc-page-width);
  max-width: var(--etc-page-width) !important;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 42px);
  border: 2px solid #000;
  border-radius: var(--etc-radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--etc-shadow);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--etc-purple);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(320px, 0.68fr);
  gap: 24px;
  align-items: stretch;
  min-height: 560px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 72px;
}

.hero h1 {
  max-width: 620px;
  font-size: clamp(2rem, 5.2vw, 4.15rem) !important;
  letter-spacing: 0.025em !important;
  line-height: 1.02 !important;
}

.hero-text {
  max-width: 660px;
  margin: 0 0 26px;
  color: var(--etc-ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 650;
}

.hero-actions,
.ops-actions,
.search-row,
.route-action-row,
body:not(.netzplan-page):not(.data-editor-page) .controls,
.filters,
.top-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.hero-panel,
.ops-card,
.search-card,
.map-card,
.mode-stack,
.line-board,
body:not(.netzplan-page):not(.data-editor-page) .card,
.panel,
.result,
.type-section,
.line-card,
.disruption,
.highlight-card,
.mini-card,
.component-block,
.branch-card,
.station-detail,
.search-results,
details {
  border: 2px solid #000 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08) !important;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  background:
    linear-gradient(135deg, #000 0 42%, var(--etc-purple) 42% 52%, #fff 52%) !important;
  color: #fff;
}

.panel-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.panel-topline strong {
  color: #fff;
}

.stats-grid {
  display: grid;
  gap: 12px;
  margin: auto 0 0;
}

.stats-grid div {
  padding: 16px;
  border: 2px solid #000;
  border-radius: 16px;
  background: #fff;
  color: #000;
}

.stats-grid dt {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.stats-grid dd {
  margin: 4px 0 0;
  color: var(--etc-muted);
  font-weight: 850;
  text-transform: uppercase;
}

.pixel-route {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.pixel-route span {
  height: 16px;
  border: 2px solid #000;
  background: #fff;
}

.pixel-route span:nth-child(2n) {
  background: var(--etc-purple);
}

body:not(.netzplan-page):not(.data-editor-page) .button,
body:not(.netzplan-page):not(.data-editor-page) button,
body:not(.netzplan-page):not(.data-editor-page) input[type="button"],
body:not(.netzplan-page):not(.data-editor-page) input[type="submit"],
.button-black,
.button-primary,
.button-ghost,
.disruptbutton,
#backbtn {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  background: var(--etc-purple) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: var(--etc-font-ui) !important;
  font-size: 0.98rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

body:not(.netzplan-page):not(.data-editor-page) .button:hover,
body:not(.netzplan-page):not(.data-editor-page) button:hover,
.button-black:hover,
.button-primary:hover,
.button-ghost:hover,
.disruptbutton:hover,
#backbtn:hover {
  transform: translateY(-2px);
}

.button-black,
body:not(.netzplan-page):not(.data-editor-page) button[type="submit"],
.button-ghost.dark {
  background: #000 !important;
  color: #fff !important;
}

.button-ghost,
.button.secondary {
  background: #fff !important;
  color: #000 !important;
}

body:not(.netzplan-page):not(.data-editor-page) input,
body:not(.netzplan-page):not(.data-editor-page) select,
body:not(.netzplan-page):not(.data-editor-page) textarea,
.input {
  min-height: 48px !important;
  width: auto;
  max-width: 100%;
  padding: 0 16px !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--etc-font-ui) !important;
  font-size: 1rem !important;
}

body:not(.netzplan-page):not(.data-editor-page) textarea {
  min-height: 120px !important;
  padding-top: 14px !important;
  border-radius: 20px !important;
}

body:not(.netzplan-page):not(.data-editor-page) select {
  appearance: auto;
}

body:not(.netzplan-page):not(.data-editor-page) input:focus,
body:not(.netzplan-page):not(.data-editor-page) select:focus,
body:not(.netzplan-page):not(.data-editor-page) textarea:focus,
.input:focus {
  border-color: var(--etc-purple) !important;
  box-shadow: 0 0 0 4px rgba(72, 0, 255, 0.13) !important;
}

body:not(.netzplan-page):not(.data-editor-page) label {
  color: #000;
  font-weight: 900;
}

form {
  display: grid;
  gap: 14px;
  width: 100% !important;
  max-width: none !important;
}

form > div[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

.navigator-page {
  width: var(--etc-page-width) !important;
  max-width: var(--etc-page-width) !important;
}

.navigator-page form {
  width: 100%;
}

.navigator-page .route-action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.navigator-page .route-action-row .button {
  width: 100% !important;
}

.navigator-page .button,
.navigator-page button {
  min-height: 46px !important;
  font-size: 1rem !important;
}

.transport-options {
  display: grid;
  gap: 10px;
  padding: 16px !important;
  border: 2px solid #000 !important;
  border-radius: 20px !important;
  background: var(--etc-bg) !important;
}

.transport-options[style*="display:none"] {
  display: none !important;
}

.transport-options .checkbox,
.accessibility-setting {
  min-height: 48px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid #000;
  border-radius: 16px;
  background: #fff;
}

.transport-options img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

.transport-options input[type="checkbox"] {
  min-height: 18px !important;
  width: 18px !important;
  accent-color: var(--etc-purple);
}

.quick-access {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.access-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px;
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
  color: #000;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.access-card:hover {
  transform: translateY(-4px);
  background: var(--etc-purple);
  color: #fff;
}

.access-card img {
  width: 42px;
  height: 42px;
}

.access-card span {
  font-size: 1.55rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.access-card small {
  color: currentColor !important;
  opacity: 0.72;
  font-weight: 700;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 22px;
}

.section-heading p:not(.eyebrow) {
  color: var(--etc-ink-soft);
  font-weight: 650;
}

.network-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
}

.map-card {
  padding: 16px;
  overflow: hidden;
}

.map-card img {
  width: 100%;
  min-height: 320px;
  object-fit: contain;
}

.mode-stack {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.mode-stack article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 2px solid #000;
  border-radius: 16px;
  background: var(--etc-bg);
}

.mode-stack img {
  width: 38px;
  height: 38px;
}

.mode-stack h3,
.mode-stack p {
  margin: 0;
}

.search-card {
  padding: 18px;
}

.search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 8px;
}

.search-row input {
  width: 100%;
}

.station-results {
  margin-top: 14px;
  padding: 14px;
  border: 2px dashed var(--etc-purple);
  border-radius: 18px;
  background: var(--etc-bg);
}

.line-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.line-intro {
  margin: 18px 0 10px;
  padding: 18px;
  border: 2px solid #000;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #ffffff 0 58%, #f5f0ff 58% 100%);
}

.line-intro h3 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
}

.line-intro p:last-child {
  max-width: 720px;
  margin-bottom: 0;
}

.line-badge,
.line-label,
.pill,
.track-label,
.access-label,
.status-badge,
.line-meta,
.station-connection,
.s,
.kbd {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  background: var(--etc-purple);
  color: #fff !important;
  font-family: var(--etc-font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  vertical-align: middle;
}

.line-group {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0 18px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.line-group:first-child {
  padding-top: 4px;
}

.line-group__head {
  flex: 0 0 220px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.line-group__head img {
  width: 46px;
  height: 46px;
  padding: 7px;
  border: 2px solid #000;
  border-radius: 14px;
  background: #f5f0ff;
  box-shadow: none;
  object-fit: contain;
}

.line-group__head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 950;
}

.line-group__head span {
  grid-column: 2;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--etc-muted);
}

.line-group__lines {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.line-board .line-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
  background: var(--line-color, var(--etc-purple)) !important;
  color: #fff !important;
  font-family: var(--etc-font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.line-board .line-pill.is-light {
  color: #000 !important;
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.track-label,
.access-label,
.station-connection,
.line-meta,
.kbd {
  background: #fff !important;
  color: #000 !important;
}

.pill,
.status-badge,
.s {
  background: #000;
}

.disruption .severity-pill {
  background: #fff !important;
  background: color-mix(in srgb, var(--severity-color, var(--etc-purple)) 14%, #fff) !important;
  border-color: var(--severity-color, var(--etc-purple)) !important;
  color: var(--severity-color, var(--etc-purple)) !important;
}

/* Navigator: override the legacy one-file layout without changing routing logic. */
.navigator-page {
  display: grid !important;
  gap: 16px !important;
}

.navigator-page::before {
  display: block !important;
  background: var(--etc-purple) !important;
  box-shadow: 66px 0 0 #000 !important;
}

.navigator-page h1 {
  margin-bottom: 10px !important;
  text-align: center !important;
}

.navigator-page #routeForm {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 0 auto !important;
  padding: 22px !important;
  border: 2px solid #000 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.navigator-page #routeForm > h3 {
  justify-content: center !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  letter-spacing: -0.03em !important;
}

.navigator-page #routeForm > label {
  margin: 8px 0 -8px !important;
  color: var(--etc-muted) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.navigator-page #routeForm > div[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 0 !important;
}

.navigator-page input[list] {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
}

.navigator-page #clipboardStartBtn,
.navigator-page #clipboardZielBtn {
  width: auto !important;
  min-width: 190px !important;
  min-height: 52px !important;
  margin: 0 !important;
  background: #fff !important;
  color: #000 !important;
  border-radius: 14px !important;
}

.navigator-page .route-action-row {
  margin: 4px 0 0 !important;
}

.navigator-page #swapBtn,
.navigator-page #transportOptions {
  min-height: 46px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: var(--etc-purple) !important;
  color: #fff !important;
}

.navigator-page #transportOptionsList {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, #ffffff 0, #f5f0ff 100%) !important;
}

.navigator-page #transportOptionsList[style*="block"] {
  display: grid !important;
}

.navigator-page #transportOptionsList .types {
  display: none !important;
}

.navigator-page .accessibility-setting {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(150px, auto) minmax(240px, 1fr);
  align-items: center !important;
  gap: 12px !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.035) !important;
}

.navigator-page .accessibility-setting select {
  width: 100% !important;
  margin: 0 !important;
}

.navigator-page .transport-options .checkbox {
  display: grid !important;
  grid-template-columns: auto 30px minmax(0, 1fr);
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  cursor: pointer;
  min-height: 58px !important;
  padding: 10px 12px !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  overflow: visible;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.navigator-page .transport-options .checkbox:hover {
  transform: translateY(-2px);
  background: var(--etc-purple) !important;
  color: #fff !important;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.16);
}

.navigator-page .transport-options input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto;
  transform: none !important;
}

.navigator-page .transport-options .checkbox img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  margin: 0 !important;
}

.navigator-page .button-black[type="submit"] {
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 1.04rem !important;
}

.navigator-page #result {
  display: grid;
  gap: 12px;
  min-height: 70px;
  margin: 0 !important;
  padding: 14px !important;
  border-style: solid !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.navigator-page #result:empty::before {
  content: "Route erscheint hier nach der Berechnung.";
  color: var(--etc-muted);
  font-weight: 850;
}

.navigator-page .route-display {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
}

.navigator-page .route-display > h2 {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 18px !important;
  border-bottom: 2px solid #000 !important;
  color: #fff !important;
  font-size: clamp(1.2rem, 2vw, 1.7rem) !important;
  background: #000 !important;
}

.navigator-page .route-title::after {
  content: "▼";
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0;
}

.navigator-page .route-title.active::after {
  content: "▲";
}

.navigator-page .route-icons,
.navigator-page .route-display > h2 > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-column: 1 / -1;
}

.navigator-page .route-icons .line-icon {
  width: 34px !important;
  height: 34px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
  background: #fff !important;
}

/* Navigator output: keep the proven old TLF-like route layout. */
.navigator-page #result {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 16px !important;
}

.navigator-page .route-display {
  margin: 0.7rem 0 !important;
  padding: 0.9rem !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.navigator-page .route-display > h2,
.navigator-page .route-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 0.65rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--etc-border-soft) !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 1.35rem !important;
  font-weight: 950 !important;
  user-select: none;
}

.navigator-page .route-title::after {
  content: " anzeigen";
  width: auto;
  height: auto;
  display: inline;
  margin-left: 0.45rem;
  border: 0;
  color: var(--etc-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.navigator-page .route-title.active::after {
  content: " ausblenden";
}

.navigator-page .route-icons,
.navigator-page .route-display > h2 > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  margin-top: 0.45rem !important;
}

.navigator-page .route-icons .line-icon,
.navigator-page .route-display > h2 .line-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain;
  transition: transform 140ms ease;
}

.navigator-page .route-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line-color, var(--etc-purple));
  border-radius: 8px;
  background: #fff;
  transition: transform 140ms ease;
}

.navigator-page .route-steps,
.navigator-page .route-display > div {
  display: block !important;
  padding: 0.35rem 0 0 !important;
  background: transparent !important;
}

.navigator-page .route-display > div[style*="none"] {
  display: none !important;
}

.navigator-page .route-leg-output,
.navigator-page .route-display > div > span {
  --timeline-x: 0.86rem;
  position: relative;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.navigator-page .route-leg-output::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-x) - 2px);
  top: 1.05rem;
  bottom: -2.35rem;
  width: 4px;
  border-radius: 0;
  background: var(--leg-color, var(--etc-purple));
  z-index: 5;
}

.navigator-page .route-leg-output:last-child::before,
.navigator-page .route-leg-output.is-final-leg::before {
  bottom: calc(var(--station-row-height) / 2) !important;
  background: var(--leg-color, var(--etc-purple));
}

.navigator-page .route-leg-output::after {
  content: "";
  position: absolute;
  left: calc(var(--timeline-x) - 9px);
  top: 0.55rem;
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  z-index: 6;
}

.navigator-page .route-leg-output.is-final-leg {
  --station-row-height: calc((1.14rem * 1.2) + 0.68rem);
}

.navigator-page .station {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100%;
  margin: 0 !important;
  padding: 0.34rem 0.7rem 0.34rem 2rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 1.14rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  z-index: auto !important;
}

.navigator-page .route-leg-output.is-final-leg > .final-station {
  position: relative;
  z-index: 9 !important;
}

.navigator-page .route-leg-output.is-final-leg > .final-station::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-x) - 9px);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
}

.navigator-page .route-leg-output.is-final-leg > .sideBar {
  padding-bottom: 0 !important;
}

.navigator-page .route-leg-output > .station:last-child {
  margin-top: 0 !important;
  padding-top: 0.34rem !important;
  border-top: 0 !important;
}

.navigator-page .sideBar {
  position: relative;
  display: block !important;
  margin: 0 !important;
  padding: 0.38rem 0 0.38rem 2rem !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: rgba(72, 0, 255, 0.045) !important;
  text-align: left !important;
  font-size: 1.28rem !important;
  line-height: 1 !important;
  z-index: auto !important;
}

.navigator-page .sideBar > * {
  vertical-align: middle;
}

.navigator-page .service-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: 1rem;
  margin-bottom: 0.28rem;
}

.navigator-page .service-row > .line-icon,
.navigator-page .sideBar > .line-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.navigator-page .sideBar .line-label {
  display: inline-flex !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.25rem 0.5rem !important;
  border: 2px solid #000 !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
}

.navigator-page .sideBar .line-destination {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  max-width: min(100%, 340px);
  margin: 0;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--etc-border-soft);
  border-radius: 7px;
  background: #fff;
  color: #24202c;
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.navigator-page .sideBar .track-label {
  display: inline-flex !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.22rem 0.5rem !important;
  border: 2px solid var(--etc-purple) !important;
  border-radius: 7px !important;
  background: #f5f0ff !important;
  color: var(--etc-purple) !important;
  font-size: 0.98rem !important;
  font-weight: 950 !important;
}

.navigator-page .leg-info {
  display: flex !important;
  align-items: center !important;
  min-height: 0;
  margin: 0.14rem 0 0 1rem !important;
  padding: 0.12rem 0.35rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  opacity: 0.82;
}

.navigator-page .stops-toggle {
  width: max-content;
  margin-top: 0.25rem !important;
  padding: 0.22rem 0.5rem !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  font-weight: 900 !important;
  opacity: 1;
}

.navigator-page .stops-toggle.active {
  background: #000 !important;
  color: #fff !important;
}

.navigator-page .contained-stops {
  --timeline-x: -1.14rem;
  display: grid;
  gap: 0 !important;
  margin: 0.25rem 0 0.45rem -2rem !important;
  padding: 0.1rem 0 0.1rem 2rem !important;
  border-left: 0 !important;
  background: transparent !important;
}

.navigator-page .intermediate-stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0.34rem 0 0.34rem 1.55rem;
  color: #222;
  font-size: 1rem;
  font-weight: 850;
}

.navigator-page .intermediate-stop span:first-child {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--timeline-x) - 7px);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  line-height: 0;
  z-index: 6;
}

.navigator-page .intermediate-stop span:last-child {
  grid-column: 1;
}

.navigator-page .extra-info-list {
  list-style: none !important;
  text-align: center;
  display: flex !important;
  flex-direction: column;
  margin-left: 1rem !important;
  padding: 0.3rem !important;
  background: transparent !important;
}

.navigator-page .total-time {
  margin-top: 0.55rem !important;
  padding: 0.45rem 0.65rem !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 10px !important;
  background: var(--etc-bg) !important;
  color: #000 !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  opacity: 1;
}

.ops-card {
  padding: clamp(22px, 4vw, 42px);
  background:
    linear-gradient(135deg, #000 0 58%, var(--etc-purple) 58% 68%, #fff 68%) !important;
  color: #fff;
}

.ops-card h2,
.ops-card p {
  max-width: 700px;
  color: #fff;
}

.ops-card .eyebrow {
  color: #fff;
}

.footer {
  width: var(--etc-page-width);
  max-width: var(--etc-page-width) !important;
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--etc-muted);
  font-weight: 800;
}

.footer img {
  width: 36px;
  height: 36px;
}

.footer a {
  color: #000;
  font-weight: 950;
}

.panel,
.card,
.result,
.type-section,
.line-card,
.disruption,
.highlight-card,
.mini-card,
.component-block,
.branch-card,
.station-detail,
.search-results,
details {
  width: 100%;
  max-width: none !important;
  margin: 14px 0;
  padding: 18px !important;
}

.stat-grid,
.highlights-grid,
.list-grid,
.grid-two,
.station-search-grid,
.router-grid,
.grid,
.grid2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

th,
td {
  padding: 12px !important;
  border-bottom: 1px solid var(--etc-border-soft) !important;
  text-align: left !important;
}

th {
  background: #000 !important;
  color: #fff !important;
  font-weight: 950 !important;
}

tr:last-child td {
  border-bottom: 0 !important;
}

ul,
ol {
  padding-left: 1.25rem;
}

.station-list {
  display: grid;
  gap: 12px;
}

.station-list details,
details {
  overflow: hidden;
}

summary {
  cursor: pointer;
  font-weight: 950;
}

.line-card__head,
.row,
.eta-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.line-card__body,
.station-body,
.list {
  display: grid;
  gap: 10px;
}

.station-dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 3px solid var(--etc-purple) !important;
  border-radius: 50%;
  background: #fff;
}

.page-intro {
  margin: 0 0 18px;
  padding: clamp(20px, 4vw, 34px);
  border: 2px solid #000;
  border-radius: 22px;
  background:
    linear-gradient(135deg, #fff 0 62%, #f5f0ff 62% 100%);
}

.page-intro h2 {
  max-width: 820px;
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 0.98;
}

.page-intro p:last-child {
  max-width: 760px;
  margin-bottom: 0;
}

body.site-page .container > form,
body.site-page .top-bar form {
  margin: 0 0 18px !important;
  padding: 16px !important;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

body.site-page .container > form h3,
body.site-page .top-bar form h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

body.site-page .filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

body.site-page .filters input,
body.site-page .filters select {
  min-height: 50px;
  margin: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  background: #f8f7ff !important;
  color: #000 !important;
  font-weight: 850;
}

#stationCount.info-text {
  margin: 0 0 14px;
  text-align: left;
  color: #000;
  font-size: 1rem;
  font-weight: 950;
}

#stationList {
  gap: 10px;
}

#stationList details {
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

#stationList summary {
  min-height: 74px;
  padding: 14px 16px !important;
  color: #000 !important;
}

#stationList summary strong {
  font-size: 1.08rem;
}

#stationList .meta {
  color: var(--etc-muted) !important;
  font-weight: 900;
}

#stationList .station-body {
  padding: 16px !important;
  border-top: 2px solid #000 !important;
  background: #f8f7ff;
}

#stationList .fact-list {
  display: grid;
  gap: 8px;
}

#line-types.result {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#line-types .type-section {
  margin: 0 0 18px !important;
  padding: 18px !important;
  border: 2px solid #000 !important;
  border-radius: 22px !important;
  background: #fff !important;
}

#line-types .type-title {
  margin: 0 0 14px !important;
  color: #000 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  line-height: 1;
}

#line-types .line-card {
  margin: 10px 0 0 !important;
  padding: 14px !important;
  border: 2px solid #000 !important;
  border-radius: 18px !important;
  background: #f8f7ff !important;
  box-shadow: none !important;
}

#line-types .line-card__head {
  align-items: flex-start !important;
}

#line-types .line-card__head > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#line-types .line-meta {
  color: var(--etc-muted) !important;
  font-weight: 900;
}

#line-types .line-card__body {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
}

#line-types .component-block,
#line-types .branch-card {
  border: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
}

#line-types .station-list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
}

.status-strip h2 {
  margin: 0 !important;
  color: #000 !important;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
}

.status-strip span {
  color: var(--etc-muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.site-page .top-bar {
  margin: 0 0 18px !important;
}

body.site-page .top-bar > div {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px !important;
  padding: 16px;
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
}

body.site-page .top-bar .input {
  min-height: 50px;
  width: 100%;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  background: #f8f7ff !important;
  color: #000 !important;
  font-weight: 850;
}

body.site-page .top-bar .button {
  min-height: 50px;
  margin: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
}

#disruptions {
  display: grid;
  gap: 14px;
}

#disruptions > p {
  margin: 0;
  padding: 22px;
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
  font-weight: 900;
}

.disruption {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0 !important;
  padding: 18px !important;
  border: 2px solid #000 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, #fff 0 72%, #f5f0ff 72% 100%) !important;
}

.disruption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 6px;
  border-radius: 0 999px 999px 0;
  background: var(--severity-color, var(--etc-purple));
}

.disruption h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding-left: 8px;
  color: #000 !important;
  font-size: clamp(1.12rem, 2.6vw, 1.55rem) !important;
  line-height: 1.05;
}

.disruption h2 span {
  border: 2px solid #000;
  border-radius: 9px !important;
  font-size: 0.9rem;
  font-weight: 950;
}

.disruption .type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding-left: 8px;
  color: #000 !important;
  font-weight: 950 !important;
}

.disruption .message {
  margin: 0 !important;
  padding-left: 8px;
  color: #111;
  font-weight: 750;
}

.disruption .muted {
  color: var(--etc-muted) !important;
  font-weight: 850;
}

.impact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 8px;
}

.impact-box span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 0.86rem;
  font-weight: 950;
}

.impact-box span:first-child {
  background: color-mix(in srgb, var(--severity-color, var(--etc-purple)) 12%, #fff);
  border-color: var(--severity-color, var(--etc-purple));
}

.disruption details {
  margin: 4px 0 0 8px !important;
  padding: 12px !important;
  border: 2px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.disruption summary {
  color: #000;
}

.fact-list li,
.eta-list li {
  margin: 8px 0;
}

body.site-page > h1,
body.site-page > ul,
body.site-page > p {
  padding: 18px;
  border: 2px solid #000;
  border-radius: 20px;
  background: #fff;
}

body.site-page > ul {
  list-style: none;
  display: grid;
  gap: 10px;
  padding-left: 18px;
}

body.site-page > ul a {
  font-weight: 950;
  color: #000;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--etc-purple);
}

.error-banner,
.error-box {
  padding: 14px 16px !important;
  border: 2px solid #000 !important;
  border-radius: 16px !important;
  background: #fff0f0 !important;
  color: #8b0000 !important;
  font-weight: 900 !important;
}

.progress {
  height: 14px;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
}

.bar {
  height: 100%;
  background: var(--etc-purple);
}

.big {
  font-size: clamp(1.6rem, 4vw, 3.6rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.screen {
  min-height: 100vh;
  padding: 18px;
}

.monitor-page .screen,
.monitor-page .card,
.monitor-page .ticker,
.showmap-page .screen {
  background: #000 !important;
  color: #fff !important;
}

.monitor-page .topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 2px solid #fff;
  border-radius: 20px;
  background: var(--etc-purple);
}

.monitor-page .main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  margin-top: 18px;
}

.monitor-page .card {
  border-color: #fff !important;
}

.monitor-page .sub,
.monitor-page .muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

.monitor-page .ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-top: 2px solid #fff;
}

.marquee {
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

.showmap-page iframe,
.showmap-page img,
.showmap-page svg {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 640ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 640ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(34px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  :root {
    --etc-page-width: calc(100vw - 24px);
  }

  body.site-page {
    padding-inline: 12px !important;
  }

  .etc-shell-nav {
    top: 10px;
    align-items: stretch;
    border-radius: 24px;
  }

  .etc-shell-brand {
    padding-right: 8px;
  }

  .etc-shell-links {
    justify-content: flex-start;
  }

  .hero,
  .network-grid,
  .monitor-page .main {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-copy {
    padding-top: 56px;
  }

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

  form > div[style*="display:flex"],
  .navigator-page #routeForm > div[style*="display:flex"],
  .search-row,
  .navigator-page .route-action-row {
    grid-template-columns: 1fr !important;
  }

  .navigator-page #clipboardStartBtn,
  .navigator-page #clipboardZielBtn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .navigator-page #transportOptionsList {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .line-group {
    flex-direction: column;
  }

  .line-group__head {
    flex-basis: auto;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(1.45rem, 8vw, 2.25rem) !important;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 9.8vw, 2.95rem) !important;
  }

  .section-shell,
  .container,
  .wrap {
    width: var(--etc-page-width) !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .quick-access {
    grid-template-columns: 1fr;
  }

  .navigator-page #transportOptionsList {
    grid-template-columns: 1fr !important;
  }

  .navigator-page .accessibility-setting {
    grid-template-columns: 1fr !important;
  }

  .etc-shell-nav {
    flex-direction: column;
  }

  .etc-shell-brand {
    width: 100%;
    justify-content: center;
  }

  .etc-shell-links {
    width: 100%;
  }
}

/* Header correction: page titles and navigation need different scales. */
body.site-page > :is(.container, .wrap) > h1,
body.site-page > h1 {
  max-width: 100%;
  margin: 0 0 22px !important;
  padding: 5px 0 17px;
  border-bottom: 1px solid var(--etc-border-soft);
  color: var(--etc-black) !important;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem) !important;
  letter-spacing: 0.11em !important;
  line-height: 1.12 !important;
  text-align: left !important;
  overflow-wrap: normal;
}

body.site-page > :is(.container, .wrap) > h1::after,
body.site-page > h1::after {
  content: "";
  width: 42px;
  height: 4px;
  display: block;
  margin-top: 13px;
  border-radius: 999px;
  background: var(--etc-purple);
}

body.site-page .page-intro {
  margin-top: -5px;
}

@media (max-width: 820px) {
  .etc-shell-nav {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .etc-shell-brand {
    padding-bottom: 4px;
  }

  .etc-shell-links {
    width: auto;
  }
}

@media (max-width: 680px) {
  .etc-shell-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .etc-shell-brand {
    padding-right: 2px;
  }

  .etc-shell-brand img {
    width: 34px;
    height: 34px;
  }

  .etc-shell-links a {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.68rem;
  }
}

/* navigator/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.navigator-shell-page) {
    /* --- Design beibehalten (Weiß, Schwarz, Lila) --- */
    :scope {
      font-family: "Bahnschrift", "Roboto Condensed", "Arial", sans-serif;
      margin: 2rem;
      background: #ffffff;
      color: #000;
    }

    h1 {
      text-align: center;
      color: #4B0082;
    }

    form {
      background: #fff;
      padding: 1rem;
      max-width: 600px;
      margin: 0 auto 1rem auto;
      border: 2px solid #4B0082;
      border-radius: 5px;
    }

    form input,
    form select,
    form button {
      padding: 0.5rem;
      margin: 0.5rem 0;
      width: 100%;
      box-sizing: border-box;
      font-size: 1rem;
    }

    .result {
      background: #fff;
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem;
      border-radius: 5px;
    }

    .extra-info-list {
      list-style-type: none;
      text-align: center;
      display: flex;
      flex-direction: column;
    }

    .extra-info-list>* {
      margin-top: 0.5rem;
    }

    .station {
      margin: 0.5rem 0;
      padding: 0.5rem;
      margin-top: 0;
      margin-bottom: 0;
      border-left: 4px solid #4B0082;
      display: flex;
      align-items: center;
      font-size: 1.25rem;
    }

    .line-label {
      font-weight: bold;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      color: #fff;
      margin-right: 0.5rem;
      font-size: 1.25rem;
    }

    .track-label {
      font-weight: bold;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      border: 2px solid #4B0082;
      color: #4B0082;
      margin-right: 0.5rem;
      font-size: 1.1rem;
      background: #f5f0ff;
    }

    .sideBar {
      text-align: left;
      font-size: 1.5rem;
      line-height: 1;
    }

    .leg-info {
      font-size: 1rem;
      margin: 0.5rem;
      padding: 0.3rem;
      margin-top: 0.2rem;
      margin-bottom: -0.2rem;
      margin-left: 1rem;
      border-left: 0;
      display: flex;
      align-items: center;
      color: #000;
    }

    .total-time {
      font-weight: bold;
      text-align: left;
      margin-top: 1rem;
      color: #4B0082;
      font-size: 1rem;
    }

    .transport-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      margin: 0.5rem 0;
    }

    .transport-options label {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: #f0f0f0;
      padding: 0.3rem 0.5rem;
      border-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    .transport-options label.accessibility-setting {
      cursor: default;
    }

    .transport-options label.accessibility-setting select {
      flex: 1;
      width: auto;
    }

    .transport-options input[type="checkbox"] {
      accent-color: #4B0082;
      width: auto;
      scale: 125%;
      margin: 0.5rem;
    }

    .line-icon {
      width: 20px;
      height: 20px;
      margin-right: 0.3rem;
      margin-left: 1rem;
      vertical-align: middle;
    }

    .transport-options {
      display: none;
    }

    .button {
      margin: 0.5rem 0;
      background: #4B0082;
      color: #fff;
      padding: 0.5rem;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      user-select: none;
    }

    .disruptbutton {
      margin: 0.5rem 0;
      background: #820000;
      color: #fff;
      padding: 0.5rem;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      user-select: none;
    }

    .button:hover {
      background: #5c1ab0;
    }

    .disruptbutton:hover {
      background: #a00000;
    }

    .button-black {
      margin: 0.5rem 0;
      background: #000;
      color: #fff;
      padding: 0.5rem;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      user-select: none;
    }

    .types {
      user-select: none;
      cursor: pointer;
    }

    .button-black:hover {
      background: #333;
    }

    div.checkbox {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: #f0f0f0;
      padding: 0.3rem 0.5rem;
      border-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    .checkbox {
      padding: 0.3rem;
      margin: 0.5rem;
    }

    h2 {
      cursor: pointer;
      color: #4B0082;
      user-select: none;
    }

    .route-display {
      margin: 0.5rem 0;
      padding: 0.5rem;
      border: 2px solid lightgray;
      border-radius: 5px;
      background-color: #f0f0f0;
    }

    h3 {
      color: #4B0082;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .error-banner {
      max-width: 600px;
      margin: 0 auto 1rem auto;
      padding: 0.75rem;
      border-radius: 5px;
      background: #fde2e1;
      color: #7a1813;
      border: 1px solid #f5c2c0;
    }
}

/* stations/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.stations-page) {
    :scope { font-family:"Bahnschrift","Roboto Condensed","Arial",sans-serif; margin:2rem; background:#ffffff; color:#000; }
    h1 { text-align:center; color:#4B0082; }
    .container { max-width:900px; margin:0 auto; }
    form {
      background:#fff;
      padding:1rem;
      border:2px solid #4B0082;
      border-radius:5px;
      margin:0 auto 1rem auto;
    }
    form input,
    form select {
      padding:0.5rem;
      margin:0.5rem 0;
      width:100%;
      box-sizing:border-box;
      font-size:1rem;
    }
    .filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.5rem; }
    .button {
      margin:0.5rem 0;
      background:#4B0082;
      color:#fff;
      padding:0.5rem;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
      user-select:none;
      border:none;
      font-size:1rem;
    }
    .button:hover { background:#5c1ab0; }
    .header-bar { display:flex; justify-content:flex-end; margin-bottom:1rem; }
    .result {
      background:#fff;
      padding:1rem;
      border-radius:5px;
      max-width:900px;
      margin:0 auto;
      border:2px solid #4B0082;
    }
    .info-text { text-align:center; margin-bottom:0.5rem; color:#555; }
    .station-list details {
      border:1px solid #d7caef;
      border-radius:5px;
      margin-bottom:0.75rem;
      background:#fff;
    }
    .station-list summary {
      cursor:pointer;
      padding:0.75rem 1rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:600;
      color:#4B0082;
    }
    .station-list summary::marker { display:none; }
    .station-body {
      padding:0.75rem 1rem 1rem;
      border-top:1px solid #e3d8fa;
    }
    ul.fact-list { list-style:none; padding-left:0; margin:0; }
    ul.fact-list li { margin-bottom:0.35rem; }
    .line-label {
      display:inline-flex;
      align-items:center;
      padding:0.18rem 0.45rem;
      color:#fff;
      border-radius:3px;
      font-size:0.85rem;
      margin:0.1rem;
    }
    .track-label {
      font-weight:bold;
      padding:0.2rem 0.4rem;
      border-radius:3px;
      border:2px solid #4B0082;
      color:#4B0082;
      margin:0.1rem;
      font-size:0.9rem;
      background:#f5f0ff;
      display:inline-block;
    }
    .access-label {
      font-weight:bold;
      padding:0.2rem 0.4rem;
      border-radius:3px;
      border:2px solid #a30052;
      color:#a30052;
      margin:0.1rem;
      font-size:0.85rem;
      background:#fff0f6;
      display:inline-block;
    }
    .muted { color:#555; font-size:0.95rem; }
    .meta {
      display:flex;
      flex-wrap:wrap;
      gap:0.6rem;
      font-size:0.9rem;
      color:#555;
    }
}

/* lines/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.lines-page) {
    :scope { font-family:"Bahnschrift","Roboto Condensed","Arial",sans-serif; margin:2rem; background:#ffffff; color:#000; }
    h1 { text-align:center; color:#4B0082; }
    .container { max-width:1100px; margin:0 auto; }
    .button { margin:0.5rem 0; background:#4B0082; color:#fff; padding:0.6rem 1.2rem; cursor:pointer; border-radius:6px; text-align:center; user-select:none; border:none; font-size:1rem; }
    .button:hover { background:#5c1ab0; }
    .top-bar form {
      background:#fff;
      padding:1rem;
      border:2px solid #4B0082;
      border-radius:5px;
      margin-bottom:1rem;
    }
    .top-bar form .filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.5rem; }
    .top-bar form input,
    .top-bar form select { padding:0.5rem; margin:0.5rem 0; width:100%; box-sizing:border-box; font-size:1rem; }
    .result { background:transparent; border:none; padding:0; }
    .type-section { background:#fff; border:2px solid #4B0082; border-radius:6px; padding:1rem; margin-bottom:1.25rem; }
    .type-title { color:#4B0082; margin:0 0 1rem; }
    .line-card { border:1px solid #e0d1fb; border-radius:8px; padding:1rem; background:#fff; margin-bottom:1rem; box-shadow:0 6px 18px rgba(75,0,130,0.06); }
    .line-card__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; }
    .line-label { font-weight:bold; padding:0.2rem 0.5rem; border-radius:3px; color:#fff; display:inline-block; margin-right:0.5rem; font-size:1.15rem; }
    .line-meta { color:#555; font-size:0.9rem; }
    .line-info { margin-top:0.5rem; }
    .line-info ul { list-style:none; padding-left:1rem; margin:0.25rem 0 0; }
    .line-info li { color:#4B0082; font-size:0.95rem; margin-bottom:0.2rem; }
    .line-card__body { margin-top:0.75rem; }
    .component-block { border-top:1px solid #e8dcff; padding-top:0.75rem; margin-top:0.75rem; }
    .component-title { font-weight:600; color:#4B0082; margin-bottom:0.4rem; }
    .station-list { list-style:none; margin:0; padding:0; }
    .station-list li { display:flex; gap:0.75rem; padding:0.35rem 0; border-bottom:1px solid #f3ecff; }
    .station-dot { width:12px; height:12px; border-radius:50%; border:3px solid #4B0082; margin-top:0.4rem; flex-shrink:0; }
    .station-name { font-weight:600; }
    .station-connections { margin-top:0.15rem; font-size:0.85rem; display:flex; flex-wrap:wrap; gap:0.25rem; }
    .station-connection { border:1px solid #d7caef; border-radius:999px; padding:0.1rem 0.5rem; background:#f5f0ff; }
    .track-label { font-weight:600; padding:0.15rem 0.45rem; border-radius:3px; border:2px solid #4B0082; color:#4B0082; margin:0.05rem 0.1rem; background:#f5f0ff; display:inline-block; }
    .access-label { font-weight:600; padding:0.15rem 0.45rem; border-radius:3px; border:2px solid #a30052; color:#a30052; margin:0.05rem 0.1rem; background:#fff1f8; display:inline-block; }
    .branch-card { border:1px dashed #c6b1f2; border-radius:6px; padding:0.5rem 0.75rem; background:#fcf9ff; margin-top:0.6rem; }
    .branch-title { font-weight:600; color:#4B0082; margin-bottom:0.3rem; }
    .ring-list { display:flex; flex-wrap:wrap; gap:0.35rem; }
    .ring-chip { border-radius:999px; border:1px solid #d7caef; padding:0.2rem 0.6rem; background:#f5f0ff; font-size:0.85rem; }
    .muted { color:#666; font-size:0.9rem; }
    .line-card[data-collapsed="true"] .line-card__body,
    .line-card[data-collapsed="true"] .line-info { display:none; }
    .line-card { cursor:pointer; }
}

/* betriebslage/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.disruptions-page) {
    :scope { font-family: "Bahnschrift","Roboto Condensed","Arial",sans-serif; margin:2rem; background:#fff; color:#000; }
    h1 { text-align:center; color:#4B0082; }
    .container { max-width:800px; margin:0 auto; }
    .top-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:.5rem; }
    #backbtn, .button {
      background:#4B0082; color:#fff; padding:.5rem 1rem; text-align:center; border-radius:5px;
      cursor:pointer; user-select:none; border:none;
    }
    #backbtn:hover, .button:hover { background:#5c1ab0; }
    .disruption { border:2px solid #4B0082; padding:1rem; margin:1rem 0; border-radius:5px; background:#f9f9f9; }
    .disruption h2 { margin:0; font-size:1.2rem; color:#4B0082; }
    .disruption .type { font-weight:600; color:#B22222; margin-top:.25rem; }
    .disruption .message { margin-top:.5rem; }
    h2 { color:#4B0082; }
    .input { padding:.5rem .6rem; border:1px solid #ccc; border-radius:6px; font:inherit; }
    .small { font-size:.9rem; } .muted { color:#666; }
    .pill {
      display:inline-block; padding:.1rem .5rem; border-radius:999px; border:1px solid #ccc; background:#fff;
      margin-right:.5rem; font-weight:600;
    }
    details summary { cursor:pointer; font-weight:600; list-style:none; }
    details summary::marker, details summary::-webkit-details-marker { display:none; }
    details summary::after { content:"▸"; margin-left:.5rem; color:#4B0082; font-weight:700; }
    details[open] summary::after { content:"▾"; }
}

/* facts/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.facts-page) {
    :scope { font-family:"Bahnschrift","Roboto Condensed","Arial",sans-serif; margin:2rem; background:#ffffff; color:#000; }
    h1 { text-align:center; color:#4B0082; margin-bottom:1rem; }
    .container { max-width:1100px; margin:0 auto; }
    .panel {
      background:#fff;
      padding:1rem;
      border:2px solid #4B0082;
      border-radius:5px;
      margin:0 auto 1rem auto;
    }
    .panel input,
    .panel .input,
    .panel select {
      padding:0.5rem;
      margin:0.5rem 0;
      width:100%;
      box-sizing:border-box;
      font-size:1rem;
    }
    .header-bar { display:flex; justify-content:flex-end; }
    .button {
      margin:0.5rem 0;
      background:#4B0082;
      color:#fff;
      padding:0.5rem;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
      user-select:none;
      border:none;
      font-size:1rem;
    }
    .button:hover { background:#5c1ab0; }
    .stat-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
    .grid-two { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
    .highlights-grid { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; }
    .highlight-card { display:flex; flex-direction:column; flex:1 1 320px; }
    .highlight-card .mini-card { flex:1; min-height:180px; display:flex; flex-direction:column; justify-content:center; }
    .highlight-card .mini-card p { margin:0.25rem 0; }
    .highlight-card .history-toggle { margin-top:0.75rem; }
    .highlight-card .history { margin-top:0.75rem; }
    .stat-card {
      background:#f5f0ff;
      border:1px solid #d3c4f0;
      border-radius:5px;
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:0.2rem;
    }
    .stat-card span { color:#555; font-size:0.9rem; }
    .stat-card strong { font-size:1.6rem; }
    table { width:100%; border-collapse:collapse; font-size:0.95rem; }
    thead tr { background:#4B0082; color:#fff; }
    th, td { padding:0.45rem 0.5rem; text-align:left; }
    tbody tr:nth-child(odd) { background:#f5f0ff; }
    th.sortable { cursor:pointer; user-select:none; }
    th.sortable span { font-size:0.8rem; margin-left:0.2rem; color:#ddd; }
    .muted { color:#555; font-size:0.95rem; }
    ul.fact-list { list-style:none; padding-left:0; margin:0; }
    ul.fact-list li { margin-bottom:0.4rem; }
    .line-label { display:inline-flex; align-items:center; padding:0.15rem 0.5rem; color:#fff; border-radius:3px; font-weight:bold; font-size:0.9rem; }
    .track-label {
      font-weight:600;
      padding:0.15rem 0.45rem;
      border-radius:3px;
      border:2px solid #4B0082;
      color:#4B0082;
      margin:0.05rem 0.1rem;
      font-size:0.85rem;
      background:#f5f0ff;
      display:inline-block;
    }
    .access-label {
      font-weight:600;
      padding:0.15rem 0.45rem;
      border-radius:3px;
      border:2px solid #a30052;
      color:#a30052;
      margin:0.05rem 0.1rem;
      font-size:0.85rem;
      background:#fff1f8;
      display:inline-block;
    }
    .pill { border:1px solid #ddd; border-radius:999px; padding:0.1rem 0.5rem; font-size:0.8rem; margin-left:0.3rem; }
    .bar { height:12px; border-radius:999px; background:linear-gradient(90deg,#4B0082,#7c3aed); }
    details summary { cursor:pointer; font-weight:bold; }
    details summary::marker { display:none; }
    .list-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
    .mini-card {
      border:1px solid #d7caef;
      border-radius:5px;
      padding:0.8rem;
      background:#fff;
    }
    .history {
      max-height:250px;
      overflow:auto;
      margin-top:0.75rem;
      border:1px solid #d7caef;
      border-radius:5px;
      padding:0.5rem 0.75rem;
      background:#fff;
    }
    .router-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
    .mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
    .station-search-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:0.75rem; }
    .search-results {
      max-height:260px;
      overflow:auto;
      border:1px solid #d7caef;
      border-radius:5px;
      background:#fff;
    }
    .search-results button {
      width:100%;
      border:none;
      border-bottom:1px solid #eee;
      padding:0.5rem;
      text-align:left;
      background:#fff;
      cursor:pointer;
      font-family:inherit;
    }
    .search-results button:hover { background:#f5f0ff; }
    .station-detail {
      border:1px solid #d7caef;
      border-radius:5px;
      padding:0.8rem;
      background:#fff;
      min-height:200px;
    }
    .badge {
      display:inline-block;
      padding:0.15rem 0.4rem;
      border-radius:999px;
      font-size:0.8rem;
      margin:0.15rem;
      border:1px solid #ddd;
    }
}

/* plans/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.plans-page) {
    /* Basis-Styles */
    :scope {
      font-family: "Bahnschrift", "Roboto Condensed", "Arial", sans-serif;
      margin: 2rem;
      background: #ffffff;
      color: #000;
    }
    
    h1 {
      text-align: center;
      color: #4B0082;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }

    .top-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    
    /* Suchleiste */
    #search-bar {
      flex: 1;
      min-width: 250px;
      margin: 0.5rem;
      padding: 0.5rem;
      font-size: 1rem;
      border: 2px solid #4B0082;
      border-radius: 5px;
    }
    
    /* Linienfilter */
    #line-filter {
      flex: 1;
      min-width: 150px;
      margin: 0.5rem;
      padding: 0.5rem;
      font-size: 1rem;
      border: 2px solid #4B0082;
      border-radius: 5px;
    }
    
    /* Container für die Stationsliste */
    .result {
      background: #fff;
      padding: 1rem;
      border: 2px solid #4B0082;
      border-radius: 5px;
      margin-bottom: 1rem;
    }
    
    /* Stationseintrag */
    .station {
      margin: 0.5rem 0;
      padding: 0.5rem;
      border-left: 4px solid #4B0082;
      font-size: 1.25rem;
    }
    
    /* Linien-Label */
    .line-label {
      font-weight: bold;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      color: #fff;
      margin-right: 0.5rem;
      font-size: 0.9rem;
      display: inline-block;
    }
    
    .button {
      background: #4B0082;
      color: #fff;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      margin: 0.5rem;
    }
    
    .button:hover {
      background: #5c1ab0;
    }
}

/* maps/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.maps-page) {
        :scope {
            font-family: Bahnschrift, Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 10px 0;
        }
        a {
            text-decoration: none;
            color: #0066cc;
        }
        a:hover {
            text-decoration: underline;
        }
}

/* driver/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.driver-page) {
  :scope{
    --bg:#0b0b0f; --fg:#f5f6f8; --muted:#a8adba; --accent:#8a63f0;
    --card:#12131a; --ok:#21c178; --warn:#ffcc00; --danger:#ff5d5d;
  }
  *{box-sizing:border-box}
  :scope{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial}
  header{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:12px 16px;background:#0e0f15;border-bottom:1px solid #1c1f2a;position:sticky;top:0;z-index:2}
  header .brand{font-weight:700;letter-spacing:.3px}
  header .clock{font-variant-numeric:tabular-nums;color:var(--muted)}
  .wrap{max-width:1100px;margin:0 auto;padding:16px}
  .grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
  .card{background:var(--card);border:1px solid #1c1f2a;border-radius:16px;padding:16px}
  .controls{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end}
  label{font-size:.85rem;color:var(--muted)}
  select,input[type="number"]{width:100%;padding:10px;border-radius:10px;border:1px solid #2a2f3d;background:#0f1118;color:var(--fg)}
  input[type="range"]{width:100%}
  button{padding:10px 12px;border:1px solid #2a2f3d;background:#141723;color:var(--fg);border-radius:12px;cursor:pointer}
  button:hover{background:#191c2b}
  button.primary{background:var(--accent);border-color:transparent;color:white;font-weight:600}
  .driver{display:flex;flex-direction:column;gap:14px}
  .line-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700}
  .line-dot{width:12px;height:12px;border-radius:999px;background:var(--accent);display:inline-block}
  .big{font-size:2.1rem;font-weight:800;letter-spacing:.2px}
  .sub{color:var(--muted)}
  .progress{height:14px;border-radius:999px;background:#0f1120;border:1px solid #23273a;overflow:hidden}
  .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#5db4ff)}
  .eta-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .eta-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#0f1119;border:1px solid #1e2231;border-radius:12px}
  .pill{padding:4px 8px;border-radius:999px;font-size:.78rem;border:1px solid #2a2f3d;color:var(--muted)}
  .status{display:flex;gap:10px;align-items:center}
  .status .s{padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600}
  .s.go{background:rgba(33,193,120,.15);color:var(--ok)}
  .s.stop{background:rgba(255,93,93,.15);color:var(--danger)}
  .s.turn{background:rgba(255,204,0,.15);color:var(--warn)}
  .hint{color:var(--muted);font-size:.85rem}
  .kbd{border:1px solid #2a2f3d;background:#0f1119;border-radius:6px;padding:2px 6px;font-family:ui-monospace,Consolas,Menlo,monospace}
  @media (max-width:1180px){ .controls{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (max-width:980px){ .grid{grid-template-columns:1fr} }
}

/* infomonitor/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.monitor-page) {
  :scope{
    --bg:#0b0d14; --fg:#f6f7fb; --muted:#9ea6b8;
    --card:#111526; --border:#1d2336;
    --acc:#8a63f0; --ok:#1ec97b; --warn:#ffcc00; --bad:#ff5d5d;
    --ticker:#0f1428;
  }
  *{box-sizing:border-box}
  :scope{height:100%}
  :scope{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
  .screen{display:grid;grid-template-rows:auto 1fr auto;height:100%}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#0e1330;border-bottom:1px solid var(--border)}
  .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.3px}
  .brand .tag{padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border)}
  .clock{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
  .main{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:16px}
  .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px}
  h2{margin:0 0 8px 0;font-size:1.15rem;letter-spacing:.2px}
  .slide{height:100%;display:flex;flex-direction:column;gap:12px}
  .big{font-size:2.2rem;font-weight:900;line-height:1.1}
  .sub{color:var(--muted)}
  .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#0b0f22;border:1px solid var(--border);border-radius:12px}
  .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .pill{padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:.82rem;color:var(--muted)}
  .s{padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:800}
  .s.ok{background:rgba(30,201,123,.12);color:var(--ok)}
  .s.warn{background:rgba(255,204,0,.12);color:var(--warn)}
  .s.bad{background:rgba(255,93,93,.12);color:var(--bad)}
  .s.info{background:rgba(138,99,240,.12);color:var(--acc)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ticker{height:42px;background:var(--ticker);border-top:1px solid var(--border);display:flex;align-items:center;overflow:hidden}
  .marquee{white-space:nowrap;will-change:transform;animation:scroll 40s linear infinite}
  .tag{display:inline-flex;align-items:center;gap:6px;margin:0 12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:.8rem;color:var(--muted)}
  @keyframes scroll{ from{transform:translateX(100%)} to{transform:translateX(-100%)} }
  @media (max-width:1100px){ .main{grid-template-columns:1fr} }

  /* Bild-Werbung */
  .adWrap{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#0b0f22; border:1px solid var(--border); border-radius:12px}
  .adWrap img{max-width:100%; max-height:100%; object-fit:contain; display:block}
}

/* netzplan/index.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.netzplan-page) {
    :scope {
      --ink: #101114;
      --muted: #5d6470;
      --panel: #ffffff;
      --line: #d8dbe2;
      --soft: #f3f5f8;
      --accent: #0057ff;
      --cyan: #00a7b7;
      --amber: #f0a000;
      --green: #0c8f63;
      --danger: #c53b4b;
      --shadow: 0 18px 50px rgba(8, 12, 20, 0.16);
      --font: "Bahnschrift", "DIN Alternate", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    }

    * {
      box-sizing: border-box;
    }

    :scope {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      color: var(--ink);
      font-family: var(--font);
      background:
        linear-gradient(90deg, rgba(0, 87, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 167, 183, 0.045) 1px, transparent 1px),
        #edf1f5;
      background-size: 32px 32px;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .app {
      height: 100%;
      display: grid;
      grid-template-columns: minmax(290px, 360px) 1fr;
    }

    .side {
      position: relative;
      z-index: 4;
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 14px;
      padding: 16px;
      border-right: 2px solid var(--ink);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
    }

    .brand {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 12px;
      align-items: center;
    }

    .mark {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: var(--ink);
      color: #fff;
      font-family: ETCFont, var(--font);
      font-size: 1.35rem;
      font-weight: 900;
    }

    h1 {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.25;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .stat {
      min-width: 0;
      padding: 9px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #fff;
    }

    .stat strong {
      display: block;
      font-size: 1.18rem;
      line-height: 1;
    }

    .stat span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .controls {
      min-height: 0;
      overflow: auto;
      padding-right: 2px;
    }

    .group {
      margin: 0 0 16px;
      padding: 0 0 16px;
      border-bottom: 1px solid var(--line);
    }

    .group:last-child {
      border-bottom: 0;
    }

    .label {
      display: block;
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .segmented,
    .type-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .chip,
    .icon-btn {
      min-height: 34px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      font-weight: 800;
      line-height: 1;
      transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
    }

    .chip {
      padding: 0 10px;
      font-size: 0.83rem;
    }

    .chip:hover,
    .icon-btn:hover {
      transform: translateY(-1px);
    }

    .chip.active {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
    }

    .chip.off {
      border-color: #cfd4dc;
      background: #f8f9fb;
      color: #828a96;
    }

    .type-chip {
      display: inline-grid;
      grid-template-columns: 12px auto;
      gap: 6px;
      align-items: center;
    }

    .type-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
    }

    .search {
      width: 100%;
      height: 42px;
      padding: 0 12px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #fff;
      outline: none;
    }

    .search:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.16);
    }

    .line-list {
      max-height: 260px;
      overflow: auto;
      display: grid;
      gap: 6px;
      padding-right: 2px;
    }

    .line-row {
      width: 100%;
      min-height: 36px;
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      border: 1px solid #d8dbe2;
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
    }

    .line-row:hover,
    .line-row.active {
      border-color: var(--ink);
      background: #f7faff;
    }

    .swatch {
      height: 8px;
      border-radius: 999px;
      background: #555;
    }

    .line-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 850;
    }

    .line-type {
      color: var(--muted);
      font-size: 0.75rem;
    }

    .status {
      min-height: 44px;
      display: grid;
      align-content: center;
      padding: 9px 10px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #f9fafc;
      font-size: 0.86rem;
      line-height: 1.25;
    }

    .stage {
      position: relative;
      min-width: 0;
      min-height: 0;
    }

    .map-toolbar {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 3;
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 30px rgba(8, 12, 20, 0.14);
      backdrop-filter: blur(14px);
    }

    .icon-btn {
      width: 36px;
      padding: 0;
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 1rem;
    }

    .scale-readout {
      min-width: 56px;
      text-align: center;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .legend {
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 3;
      max-width: min(560px, calc(100vw - 410px));
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 30px rgba(8, 12, 20, 0.12);
      backdrop-filter: blur(14px);
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .legend-line {
      width: 28px;
      height: 5px;
      border-radius: 999px;
      background: #555;
    }

    .map {
      width: 100%;
      height: 100%;
      cursor: grab;
      background:
        radial-gradient(circle at 20% 20%, rgba(0, 167, 183, 0.10), transparent 36%),
        radial-gradient(circle at 84% 72%, rgba(240, 160, 0, 0.12), transparent 32%),
        #eef2f6;
      user-select: none;
      touch-action: none;
    }

    .map.dragging {
      cursor: grabbing;
    }

    .district {
      fill: rgba(255, 255, 255, 0.56);
      stroke: rgba(16, 17, 20, 0.18);
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }

    .grid-line {
      stroke: rgba(16, 17, 20, 0.08);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .route {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.92;
      vector-effect: non-scaling-stroke;
      transition: opacity 120ms ease, stroke-width 120ms ease;
    }

    .route.dimmed {
      opacity: 0.08;
    }

    .route.focused {
      opacity: 1;
      stroke-width: 8;
    }

    .station-hit {
      fill: transparent;
      cursor: pointer;
    }

    .station-dot {
      fill: #fff;
      stroke: #101114;
      vector-effect: non-scaling-stroke;
      transition: opacity 120ms ease, r 120ms ease;
    }

    .station-dot.interchange {
      fill: #101114;
      stroke: #fff;
    }

    .station-dot.hidden,
    .station-label.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .station-label {
      paint-order: stroke;
      stroke: rgba(255, 255, 255, 0.92);
      stroke-width: 5px;
      stroke-linejoin: round;
      fill: #111318;
      font-weight: 850;
      pointer-events: none;
      vector-effect: non-scaling-stroke;
    }

    .station-label.subtle {
      fill: #5b6470;
      font-weight: 750;
    }

    .station-label.focused {
      fill: #000;
      font-size: 18px;
    }

    .tooltip {
      position: absolute;
      z-index: 5;
      min-width: 220px;
      max-width: 320px;
      padding: 10px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(8, 12, 20, 0.18);
      pointer-events: none;
      opacity: 0;
      transform: translate(12px, 12px);
      transition: opacity 100ms ease;
    }

    .tooltip.visible {
      opacity: 1;
    }

    .tooltip strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.98rem;
    }

    .tooltip-lines {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .line-pill {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 6px;
      border-radius: 4px;
      color: #fff;
      font-size: 0.74rem;
      font-weight: 900;
    }

    .loading {
      position: absolute;
      inset: 0;
      z-index: 6;
      display: grid;
      place-items: center;
      background: #edf1f5;
      color: var(--ink);
      font-size: 1.1rem;
      font-weight: 900;
    }

    @media (max-width: 880px) {
      :scope {
        overflow: auto;
      }

      .app {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto 78vh;
      }

      .side {
        border-right: 0;
        border-bottom: 2px solid var(--ink);
      }

      .controls {
        max-height: 44vh;
      }

      .legend {
        max-width: calc(100vw - 32px);
      }
    }
}

/* edit-data.html: page-specific rules, scoped to the shared stylesheet. */
@scope (body.data-editor-page) {
    :scope {
      color-scheme: dark;
      --bg: #0b1020;
      --panel: #111827;
      --panel-2: #172033;
      --panel-3: #1f2937;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --line: #374151;
      --accent: #66c4ff;
      --accent-2: #9c66ff;
      --danger: #ff6b6b;
      --ok: #70ff66;
      --warn: #ffcc66;
      --shadow: rgba(0,0,0,.35);
      --radius: 18px;
      --radius-sm: 12px;
      --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    * { box-sizing: border-box; }

    :scope {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      background:
        radial-gradient(circle at top left, rgba(102,196,255,.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(156,102,255,.15), transparent 34rem),
        var(--bg);
      color: var(--text);
    }

    button, input, select, textarea {
      font: inherit;
    }

    a { color: var(--accent); }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(11, 16, 32, .88);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 60px var(--shadow);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem clamp(1rem, 2vw, 2rem);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .85rem;
      min-width: 0;
    }

    .logo {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: grid;
      place-items: center;
      color: #05101f;
      font-weight: 900;
      box-shadow: 0 8px 30px rgba(102,196,255,.22);
      flex: 0 0 auto;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(1.05rem, 2vw, 1.45rem);
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand p {
      margin: .15rem 0 0;
      color: var(--muted);
      font-size: .85rem;
    }

    .actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .55rem;
      justify-content: flex-end;
    }

    .btn, .file-label {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding: .63rem .9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select: none;
      text-decoration: none;
      white-space: nowrap;
    }

    .btn:hover, .file-label:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.22);
    }

    .btn.primary {
      background: linear-gradient(135deg, rgba(102,196,255,.92), rgba(156,102,255,.92));
      color: #07101f;
      font-weight: 750;
      border: 0;
    }

    .btn.danger {
      border-color: rgba(255,107,107,.4);
      color: #ffd5d5;
    }

    .btn.small {
      padding: .42rem .62rem;
      font-size: .86rem;
    }

    .file-label input {
      display: none;
    }

    main {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 1rem;
      padding: 1rem clamp(1rem, 2vw, 2rem) 2rem;
    }

    aside, .workspace {
      background: rgba(17, 24, 39, .74);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: 0 20px 80px var(--shadow);
      min-height: calc(100vh - 122px);
      overflow: hidden;
    }

    aside {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .5rem;
      padding: 1rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .stat {
      background: rgba(255,255,255,.055);
      border-radius: 14px;
      padding: .7rem .5rem;
      text-align: center;
    }

    .stat strong {
      display: block;
      font-size: 1.2rem;
    }

    .stat span {
      color: var(--muted);
      font-size: .75rem;
    }

    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
      padding: 1rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .tab {
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: var(--text);
      padding: .65rem .5rem;
      border-radius: 12px;
      cursor: pointer;
    }

    .tab.active {
      background: rgba(102,196,255,.16);
      border-color: rgba(102,196,255,.55);
    }

    .sidebar-body {
      min-height: 0;
      overflow: auto;
      padding: 1rem;
    }

    .search {
      width: 100%;
      padding: .72rem .85rem;
      border-radius: 13px;
      background: rgba(0,0,0,.2);
      border: 1px solid rgba(255,255,255,.1);
      color: var(--text);
      outline: none;
      margin-bottom: .75rem;
    }

    .search:focus, input:focus, textarea:focus, select:focus {
      border-color: rgba(102,196,255,.68);
      box-shadow: 0 0 0 3px rgba(102,196,255,.12);
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: .45rem;
    }

    .item {
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.045);
      border-radius: 14px;
      padding: .7rem .72rem;
      cursor: pointer;
      text-align: left;
      color: var(--text);
      display: grid;
      gap: .18rem;
    }

    .item:hover {
      background: rgba(255,255,255,.075);
    }

    .item.active {
      border-color: rgba(102,196,255,.7);
      background: rgba(102,196,255,.13);
    }

    .item strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meta {
      color: var(--muted);
      font-size: .78rem;
      display: flex;
      align-items: center;
      gap: .45rem;
      flex-wrap: wrap;
    }

    .dot {
      width: .8rem;
      height: .8rem;
      border-radius: 999px;
      display: inline-block;
      border: 1px solid rgba(255,255,255,.4);
      background: var(--accent);
    }

    .sidebar-footer {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 1rem;
      display: grid;
      gap: .5rem;
    }

    .workspace {
      display: grid;
      grid-template-rows: auto 1fr;
      min-width: 0;
    }

    .workspace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 1.2rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .workspace-head h2 {
      margin: 0;
      font-size: 1.2rem;
    }

    .workspace-head p {
      margin: .2rem 0 0;
      color: var(--muted);
      font-size: .88rem;
    }

    .content {
      min-height: 0;
      overflow: auto;
      padding: 1.1rem;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: .85rem;
      align-items: start;
    }

    .card {
      grid-column: span 12;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      padding: 1rem;
      min-width: 0;
    }

    .card.half { grid-column: span 6; }
    .card.third { grid-column: span 4; }
    .card.two-third { grid-column: span 8; }

    .card h3 {
      margin: 0 0 .8rem;
      font-size: 1rem;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: .75rem;
    }

    label.field {
      display: grid;
      gap: .32rem;
      color: var(--muted);
      font-size: .82rem;
      grid-column: span 12;
    }

    label.field.span-6 { grid-column: span 6; }
    label.field.span-4 { grid-column: span 4; }
    label.field.span-3 { grid-column: span 3; }

    input, textarea, select {
      width: 100%;
      border-radius: 12px;
      padding: .7rem .75rem;
      color: var(--text);
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.11);
      outline: none;
    }

    input[type="color"] {
      padding: .2rem;
      height: 42px;
    }

    textarea {
      min-height: 9rem;
      resize: vertical;
      font-family: var(--mono);
      font-size: .86rem;
      line-height: 1.45;
    }

    .row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .space-between {
      justify-content: space-between;
    }

    .connection {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-sm);
      background: rgba(0,0,0,.14);
      padding: .8rem;
      margin-bottom: .72rem;
    }

    .connection-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .75rem;
      margin-bottom: .7rem;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      padding: .2rem .52rem;
      background: rgba(255,255,255,.07);
      color: var(--muted);
      font-size: .76rem;
    }

    .notice {
      border-radius: var(--radius-sm);
      border: 1px solid rgba(102,196,255,.25);
      background: rgba(102,196,255,.08);
      color: #d9f3ff;
      padding: .75rem .85rem;
      line-height: 1.45;
    }

    .notice.warn {
      border-color: rgba(255,204,102,.35);
      background: rgba(255,204,102,.08);
      color: #ffedc5;
    }

    .notice.danger {
      border-color: rgba(255,107,107,.35);
      background: rgba(255,107,107,.08);
      color: #ffd4d4;
    }

    .validation-list {
      display: grid;
      gap: .5rem;
      margin-top: .8rem;
    }

    .mapbox {
      width: 100%;
      height: 420px;
      border-radius: var(--radius);
      overflow: hidden;
      background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.22));
      border: 1px solid rgba(255,255,255,.08);
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .muted { color: var(--muted); }
    .danger-text { color: #ffb5b5; }
    .ok-text { color: #baffb5; }
    .mono { font-family: var(--mono); }
    .hidden { display: none !important; }

    details {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-sm);
      padding: .8rem;
      background: rgba(0,0,0,.12);
    }

    details summary {
      cursor: pointer;
      color: var(--muted);
    }

    .json-preview {
      min-height: 28rem;
      white-space: pre;
      overflow: auto;
    }

    @media (max-width: 980px) {
      main {
        grid-template-columns: 1fr;
      }
      aside {
        min-height: auto;
      }
      .sidebar-body {
        max-height: 42vh;
      }
      .card.half, .card.third, .card.two-third {
        grid-column: span 12;
      }
    }

    @media (max-width: 620px) {
      .topbar, .workspace-head {
        align-items: stretch;
        flex-direction: column;
      }
      .actions {
        justify-content: stretch;
      }
      .btn, .file-label {
        justify-content: center;
        flex: 1 1 auto;
      }
      label.field.span-6,
      label.field.span-4,
      label.field.span-3 {
        grid-column: span 12;
      }
      .tabs {
        grid-template-columns: 1fr;
      }
    }
}

/* Standalone tools keep their full-screen canvas while sharing this file. */
body.netzplan-page {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  background:
    linear-gradient(90deg, rgba(0, 87, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 167, 183, 0.045) 1px, transparent 1px),
    #edf1f5 !important;
  background-size: 32px 32px !important;
}

body.data-editor-page {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  background:
    radial-gradient(circle at top left, rgba(102,196,255,.16), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(156,102,255,.15), transparent 34rem),
    var(--bg) !important;
  background-size: auto !important;
}

/* ========================================================================
   ETC DESIGN REFINEMENT
   Based on the ETC corporate design manual. Route output below #result is
   intentionally not part of this refinement.
   ======================================================================== */

body.site-page {
  padding: 0 18px 72px !important;
  background: radial-gradient(circle at 0 0, #fff 0, #f0ecff 45%, #fff 80%) !important;
  background-size: auto !important;
}

.etc-shell-nav {
  top: 0;
  width: min(1120px, calc(100vw - 36px));
  margin: 0 auto 34px;
  padding: 8px 10px;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid #222;
  border-radius: 0 0 14px 14px;
  background: rgba(0, 0, 0, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.etc-shell-brand {
  padding: 4px 12px 4px 4px;
  color: #fff;
  font-family: "ETCFont", var(--etc-font-ui);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.etc-shell-brand img {
  width: 38px;
  height: 38px;
  padding: 3px;
  border-radius: 10px;
  background: #fff;
}

.etc-shell-links {
  gap: 4px;
}

.etc-shell-links a {
  min-height: 36px;
  padding: 0 11px;
  border-width: 1px;
  color: #fff;
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.etc-shell-links a:hover,
.etc-shell-links a:focus-visible {
  border-color: var(--etc-purple);
  background: #111;
  transform: none;
}

.etc-shell-links a.is-active,
.etc-shell-links a[data-primary="true"].is-active {
  border-color: var(--etc-purple);
  background: var(--etc-purple);
}

.etc-shell-links a[data-primary="true"]:not(.is-active) {
  border-color: #333;
  background: #111;
}

body.site-page > main,
body.site-page > .container,
body.site-page > .wrap,
body.site-page > .section-shell,
body.site-page > h1,
body.site-page > ul,
body.site-page > p,
.footer {
  width: min(1120px, calc(100vw - 36px)) !important;
  max-width: min(1120px, calc(100vw - 36px)) !important;
}

body.site-page > .container,
body.site-page > .wrap,
.section-shell {
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

body.site-page > .container::before,
body.site-page > .wrap::before,
.section-shell::before {
  inset: 0 22px auto;
  width: 78px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--etc-purple);
  box-shadow: none;
}

body.site-page h1 {
  margin-bottom: 16px !important;
  font-size: clamp(1.65rem, 3.3vw, 2.7rem) !important;
  letter-spacing: 0.16em !important;
  line-height: 1.08 !important;
}

body.site-page h2 {
  letter-spacing: -0.02em;
}

body.site-page .eyebrow {
  color: #666;
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
}

body.site-page .page-intro {
  margin: 0 0 26px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--etc-border-soft);
}

body.site-page .page-intro h2 {
  margin-bottom: 10px;
  font-family: "ETCFont", var(--etc-font-ui) !important;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.18;
  text-transform: uppercase;
}

body.site-page .page-intro p:last-child {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--etc-ink-soft);
}

body.site-page :is(.card, .panel, .result, .type-section, .line-card, .disruption, .component-block, .branch-card, .station-detail, .search-results):not(#result):not(#result *) {
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: var(--etc-bg) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

body.site-page form:not(#result form) {
  border-radius: 14px;
}

body.site-page :is(input, select, textarea):not(#result *) {
  border-width: 1px !important;
  border-color: #bdbdca !important;
  background: #fff !important;
}

body.site-page :is(input, select, textarea):not(#result *):focus {
  border-color: var(--etc-purple) !important;
  box-shadow: 0 0 0 3px rgba(72, 0, 255, 0.12) !important;
}

body.site-page :is(.button, button, input[type="button"], input[type="submit"]):not(#result *) {
  border-width: 1px !important;
  box-shadow: 0 5px 12px rgba(72, 0, 255, 0.16) !important;
}

body.site-page :is(.button, button, input[type="button"], input[type="submit"]):not(#result *):hover {
  transform: translateY(-1px);
}

.etc-shell-footer {
  margin: 48px auto 0 !important;
  padding: 18px 2px 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--etc-border-soft);
  background: transparent;
  color: #777;
  font-size: 0.8rem;
  text-align: left;
}

.etc-shell-footer div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.etc-shell-footer strong {
  color: var(--etc-purple);
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.etc-shell-footer a {
  color: #444;
  font-weight: 800;
  text-decoration: none;
}

.etc-shell-footer a:hover {
  color: var(--etc-purple);
}

@media (max-width: 820px) {
  .etc-shell-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }

  .etc-shell-links {
    width: 100%;
    justify-content: flex-start;
  }

  .etc-shell-brand {
    padding-bottom: 2px;
  }
}

@media (max-width: 560px) {
  body.site-page {
    padding-inline: 12px !important;
  }

  .etc-shell-nav,
  body.site-page > main,
  body.site-page > .container,
  body.site-page > .wrap,
  body.site-page > .section-shell,
  .footer {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
  }

  .etc-shell-footer,
  .etc-shell-footer div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Subheaders: compact, readable page introductions. */
body.site-page .page-intro {
  margin: 0 0 26px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--etc-border-soft);
  border-left: 4px solid var(--etc-purple);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, var(--etc-bg) 100%);
}

body.site-page .page-intro .eyebrow {
  margin: 0 0 8px;
  color: var(--etc-purple);
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}

body.site-page .page-intro h2 {
  margin: 0 0 9px;
  color: var(--etc-black);
  font-family: var(--etc-font-ui) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-transform: none;
}

body.site-page .page-intro p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--etc-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  body.site-page .page-intro {
    padding: 17px 16px;
  }
}

/* ========================================================================
   HOMEPAGE
   ======================================================================== */

body.home-page main {
  gap: 24px;
}

body.home-page .section-shell {
  overflow: hidden;
}

.home-hero {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(34px, 6vw, 72px) !important;
}

.home-hero__copy {
  max-width: 680px;
}

body.home-page .home-hero h1 {
  max-width: 680px;
  margin: 0 0 20px !important;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem) !important;
  letter-spacing: 0.09em !important;
  line-height: 0.98 !important;
}

.home-hero__lead {
  max-width: 650px;
  margin: 0 0 28px;
  color: var(--etc-ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.55;
}

.home-hero__benefits {
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  color: #555;
  font-size: 0.84rem;
  font-weight: 700;
}

.home-hero__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-hero__benefits li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--etc-purple);
}

.home-status {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--etc-border-soft);
  border-top: 4px solid var(--etc-purple);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #f7f5ff 100%);
  color: #000;
  box-shadow: 0 10px 24px rgba(72, 0, 255, 0.08);
}

.home-status__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--etc-border-soft);
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-status__head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #222;
  font-family: var(--etc-font-ui);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

.home-status__head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5dff75;
  box-shadow: 0 0 0 4px rgba(93, 255, 117, 0.13);
}

.home-stats {
  margin: 22px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.home-stats div {
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--etc-border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.home-stats dt {
  color: #000;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
}

.home-stats dd {
  margin: 0;
  color: #666;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

.home-status__link {
  margin-top: auto;
  padding: 15px 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--etc-border-soft);
  color: #111;
  font-weight: 800;
  text-decoration: none;
}

.home-status__link span {
  color: #a987ff;
  font-size: 1.35rem;
  transition: transform 160ms ease;
}

.home-status__link:hover span {
  transform: translateX(4px);
}

.home-section-head {
  max-width: 760px;
  margin-bottom: 24px;
}

.home-section-head h2,
body.home-page .home-cta h2 {
  margin: 0 0 10px;
  font-family: "ETCFont", var(--etc-font-ui) !important;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.12;
  text-transform: uppercase;
}

body.home-page .home-section-head h2 {
  font-family: "ETCFont", var(--etc-font-ui) !important;
}

.home-section-head > p:last-child,
.home-section-head > div > p:last-child {
  max-width: 700px;
  margin: 0;
  color: var(--etc-ink-soft);
}

.home-section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.home-section-head--split .button {
  flex: 0 0 auto;
}

.home-quick__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-quick-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 17px 18px;
  border: 1px solid var(--etc-border-soft);
  border-radius: 14px;
  background: var(--etc-bg);
  color: #000;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.home-quick-card:hover,
.home-quick-card:focus-visible {
  border-color: var(--etc-purple);
  background: #fff;
  box-shadow: 0 8px 18px rgba(72, 0, 255, 0.09);
  transform: translateY(-2px);
}

.home-quick-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.home-quick-card span {
  min-width: 0;
}

.home-quick-card strong,
.home-quick-card small {
  display: block;
}

.home-quick-card strong {
  margin-bottom: 4px;
  font-size: 1.03rem;
}

.home-quick-card small {
  color: #666 !important;
  font-size: 0.82rem;
}

.home-quick-card b {
  color: var(--etc-purple);
  font-size: 1.3rem;
}

.home-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.home-map {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--etc-border-soft);
  border-radius: 14px;
  background: #f7f7fb;
  color: #000;
  text-decoration: none;
}

.home-map img {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
  padding: 18px;
  transition: transform 300ms ease;
}

.home-map:hover img {
  transform: scale(1.015);
}

.home-map > span {
  padding: 16px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--etc-border-soft);
  background: #fff;
}

.home-map strong {
  font-size: 1rem;
}

.home-map small {
  color: #666 !important;
  text-align: right;
}

.home-modes {
  display: grid;
  gap: 12px;
}

.home-modes article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--etc-border-soft);
  border-radius: 14px;
  background: #fff;
}

.home-modes img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.home-modes h3 {
  margin: 0 0 5px;
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.home-modes p {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.45;
}

body.home-page .home-lines .line-board {
  margin-top: 0;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.home-page .home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(28px, 5vw, 48px) !important;
  border-color: #000 !important;
  background: #000 !important;
  color: #fff;
}

body.home-page .home-cta::before {
  width: 110px;
  background: var(--etc-purple);
}

body.home-page .home-cta > div:first-child {
  max-width: 720px;
}

body.home-page .home-cta h2 {
  color: #fff;
}

body.home-page .home-cta p:not(.eyebrow) {
  margin: 0;
  color: #c9c9c9;
}

body.home-page .home-cta .eyebrow {
  color: #a987ff;
}

.home-cta__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .home-hero,
  .home-overview__grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: auto;
  }

  .home-status {
    min-height: 0;
  }

  .home-map {
    min-height: 400px;
  }

  .home-modes {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-modes article {
    align-content: start;
    grid-template-columns: 1fr;
  }

  body.home-page .home-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .home-quick__grid,
  .home-modes {
    grid-template-columns: 1fr;
  }

  .home-section-head--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-map {
    min-height: 330px;
  }

  .home-map > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .home-map small {
    text-align: left;
  }

  .home-modes article {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .home-stats {
    grid-template-columns: 1fr;
  }

  .home-stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .home-stats dd {
    margin-top: 0;
  }
}

/* ========================================================================
   SUBPAGE SYSTEM
   One visual layer for all current content pages. Functional route output is
   intentionally excluded.
   ======================================================================== */

body.site-page:not(.home-page) > :is(.container, .wrap) {
  width: min(1120px, calc(100vw - 36px)) !important;
  max-width: min(1120px, calc(100vw - 36px)) !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

body.site-page:not(.home-page) > :is(.container, .wrap)::before {
  inset: 0 22px auto;
  width: 76px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--etc-purple);
  box-shadow: none;
}

body.site-page:not(.home-page) > :is(.container, .wrap) > h1 {
  margin: 0 0 22px !important;
  padding: 5px 0 17px;
  border-bottom: 1px solid var(--etc-border-soft);
  color: #000 !important;
  font-family: "ETCFont", var(--etc-font-ui) !important;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

body.site-page:not(.home-page) > :is(.container, .wrap) > h1::after {
  content: none;
}

body.site-page .page-intro {
  margin: 0 0 22px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--etc-border-soft);
  border-left: 4px solid var(--etc-purple);
  border-radius: 14px;
  background: var(--etc-bg);
}

body.site-page .page-intro .eyebrow {
  margin: 0 0 7px;
  color: var(--etc-purple);
  font-family: "ETCFont", var(--etc-font-ui);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.site-page .page-intro h2 {
  margin: 0 0 8px;
  color: #111;
  font-family: var(--etc-font-ui) !important;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
}

body.site-page .page-intro p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--etc-ink-soft);
  font-family: var(--etc-font-ui);
  font-size: 0.96rem;
  line-height: 1.55;
}

body.site-page:not(.home-page) form:not(#result form) {
  margin: 0 0 18px !important;
  padding: 17px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.site-page:not(.home-page) form:not(#result form) h3 {
  margin: 0 0 14px;
  color: #111;
  font-family: var(--etc-font-ui) !important;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.site-page:not(.home-page) :is(input, select, textarea):not(#result *) {
  min-height: 48px !important;
  border: 1px solid #c9c8d3 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-family: var(--etc-font-ui) !important;
  font-weight: 600;
}

body.site-page:not(.home-page) :is(input, select, textarea):not(#result *):focus {
  border-color: var(--etc-purple) !important;
  box-shadow: 0 0 0 3px rgba(72, 0, 255, 0.12) !important;
}

body.site-page:not(.home-page) :is(.button, button):not(#result *) {
  border-width: 1px !important;
  font-family: var(--etc-font-ui) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.site-page:not(.home-page) :is(.filters, .top-bar) {
  gap: 10px !important;
}

body.site-page:not(.home-page) .top-bar {
  margin-bottom: 18px;
  padding: 0;
  background: transparent;
}

/* Station and line registers */
.stations-page .result,
.lines-page .result {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stations-page #stationCount {
  margin: 16px 0 10px;
  color: #666;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stations-page #stationList {
  gap: 8px;
}

.stations-page #stationList details,
.lines-page .line-card {
  margin: 0;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.stations-page #stationList summary,
.lines-page .line-card__head {
  min-height: 66px;
  padding: 13px 16px;
}

.lines-page .type-section {
  margin: 0 0 14px;
  padding: 16px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: var(--etc-bg) !important;
  box-shadow: none !important;
}

.lines-page .type-title {
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--etc-border-soft);
  color: #111;
  font-family: var(--etc-font-ui) !important;
  font-size: 1.15rem !important;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Operations */
.disruptions-page .status-strip {
  margin: 14px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--etc-border-soft);
  border-left: 4px solid var(--etc-purple);
  border-radius: 12px;
  background: var(--etc-bg);
}

.disruptions-page .status-strip h2,
.disruptions-page #disruptionCount {
  margin: 0;
  font-family: var(--etc-font-ui) !important;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem) !important;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.disruptions-page #disruptions {
  gap: 10px;
}

.disruptions-page .disruption {
  border: 1px solid var(--etc-border-soft) !important;
  border-left: 4px solid var(--severity-color, var(--etc-purple)) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.disruptions-page .disruption h2 {
  font-family: var(--etc-font-ui) !important;
  font-size: 1.1rem !important;
  line-height: 1.3;
}

/* Facts */
.facts-page .panel,
.facts-page .highlight-card,
.facts-page .mini-card {
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.facts-page .panel {
  margin-bottom: 14px;
  padding: clamp(17px, 2.4vw, 23px);
}

.facts-page .panel h2,
.facts-page .panel > div:first-child > h2 {
  margin-bottom: 14px;
  color: #111;
  font-family: var(--etc-font-ui) !important;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem) !important;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.facts-page .panel h3 {
  font-family: var(--etc-font-ui) !important;
  font-size: 1rem !important;
  line-height: 1.25;
}

.facts-page table {
  border: 1px solid var(--etc-border-soft);
  border-radius: 10px;
  background: #fff;
}

.facts-page th {
  background: var(--etc-bg);
}

/* Navigator input shell only */
.navigator-shell-page #routeForm {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: clamp(20px, 3vw, 26px) !important;
  border-left: 4px solid var(--etc-purple) !important;
  background: var(--etc-bg) !important;
}

.navigator-shell-page #routeForm > h3 {
  margin: 0 0 5px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--etc-border-soft);
  font-family: var(--etc-font-ui) !important;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-align: left !important;
  text-transform: none;
}

.navigator-shell-page .navigator-page::before {
  background: var(--etc-purple) !important;
  box-shadow: none !important;
}

.disruptions-page .top-bar {
  padding: 16px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.disruptions-page .top-bar > div {
  width: 100%;
}

.navigator-shell-page #routeForm > div[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.navigator-shell-page :is(#clipboardStartBtn, #clipboardZielBtn) {
  min-width: 168px;
  background: #fff !important;
  color: #111 !important;
}

.navigator-shell-page .route-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.navigator-shell-page .navigator-page #routeForm .route-action-row .button {
  width: auto !important;
  min-width: 150px;
  flex: 0 0 auto !important;
  border-color: #c9c8d3 !important;
  background: #fff !important;
  color: #111 !important;
}

.navigator-shell-page #transportOptionsList {
  padding: 14px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.navigator-shell-page #routeForm > .button-black[type="submit"] {
  width: auto !important;
  min-width: 190px;
  justify-self: start;
  border-color: var(--etc-purple) !important;
  background: var(--etc-purple) !important;
  color: #fff !important;
}

/* Maps */
.plans-page #maps,
.maps-page ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.plans-page #maps {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.plans-page #maps > div,
.maps-page li a {
  padding: 15px;
  border: 1px solid var(--etc-border-soft);
  border-radius: 12px;
  background: var(--etc-bg);
}

.maps-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maps-page li {
  margin: 0;
}

/* Shared token alignment for specialist tools */
body.netzplan-page {
  --accent: var(--etc-purple);
  --soft: var(--etc-bg);
  --line: var(--etc-border-soft);
}

.netzplan-page .mark,
.netzplan-page .chip.active {
  border-color: var(--etc-purple);
  background: var(--etc-purple);
  color: #fff;
}

.monitor-page {
  --accent: #7d55ff;
}

.data-editor-page {
  --accent: #8f70ff;
  --accent-2: var(--etc-purple);
  --radius: 14px;
  --radius-sm: 10px;
}

@media (max-width: 760px) {
  body.site-page:not(.home-page) > :is(.container, .wrap) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
    padding: 18px !important;
  }

  .plans-page #maps,
  .maps-page ul {
    grid-template-columns: 1fr;
  }

  .navigator-shell-page #routeForm > div[style*="display:flex"] {
    grid-template-columns: 1fr !important;
  }

  .navigator-shell-page :is(#clipboardStartBtn, #clipboardZielBtn),
  .navigator-shell-page .navigator-page #routeForm .route-action-row .button,
  .navigator-shell-page #routeForm > .button-black[type="submit"] {
    width: 100% !important;
    min-width: 0;
  }

  .navigator-shell-page .route-action-row {
    align-items: stretch !important;
    flex-direction: column;
  }

}

/* FACTS DATA DESK ------------------------------------------------------ */
.facts-page .facts-shell {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 0 !important; overflow: hidden;
  border: 1px solid var(--etc-border-soft) !important; background: #f7f7fc !important;
}
.facts-page .facts-shell > * { min-width: 0; }
.facts-page .facts-shell::before { content: none !important; }
.facts-page .facts-hero {
  position: relative; min-height: 390px; display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(250px,.55fr);
  overflow: hidden; background: #050505; color: #fff;
}
.facts-page .facts-hero::before {
  content: ""; position: absolute; inset: -30% 25% -60% -15%;
  background: radial-gradient(circle,rgba(72,0,255,.92),rgba(72,0,255,0) 66%);
}
.facts-page .facts-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size: 40px 40px; mask-image: linear-gradient(90deg,#000,transparent 72%);
}
.facts-page .facts-hero__copy { position: relative; z-index: 1; align-self: end; padding: clamp(34px,6vw,70px); }
.facts-page .facts-kicker {
  margin: 0 0 10px; color: var(--etc-purple); font-family: "ETCFont",var(--etc-font-ui);
  font-size: .68rem; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase;
}
.facts-page :is(.facts-hero,.facts-feature,.facts-lab) .facts-kicker { color: #bba7ff; }
.facts-page .facts-hero h1 {
  max-width: 720px; margin: 0 !important; color: #fff !important;
  font-family: "ETCFont",var(--etc-font-ui) !important; font-size: clamp(3rem,8.5vw,6.8rem) !important;
  font-weight: 400 !important; letter-spacing: .015em !important; line-height: .84 !important;
}
.facts-page .facts-hero h1 span { color: #a98dff; }
.facts-page .facts-hero__copy > p:last-child { max-width: 590px; margin: 26px 0 0; color: #ffffffc2; font-size: clamp(1rem,2vw,1.22rem); line-height: 1.55; }
.facts-page .facts-hero__mark {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px; border-left: 1px solid #ffffff38; background: #4800ffb8;
}
.facts-page .facts-hero__mark > span { position: absolute; inset: 24px 24px auto auto; font-family: var(--etc-font-mono); font-size: .72rem; letter-spacing: .18em; }
.facts-page .facts-hero__mark strong { color: #fff; font-family: "ETCFont",var(--etc-font-ui); font-size: clamp(4rem,9vw,7rem); font-weight: 400; line-height: .8; }
.facts-page .facts-hero__mark small { max-width: 145px; margin-top: 18px; color: #ffffffbd; font-size: .82rem; font-weight: 750; line-height: 1.35; text-transform: uppercase; }
.facts-page .facts-jump {
  position: relative; z-index: 2; display: flex; gap: 6px; margin: 0 18px; padding: 7px;
  overflow-x: auto; border: 1px solid var(--etc-border-soft); border-radius: 999px;
  background: #fffffff0; box-shadow: 0 8px 24px #00000014; backdrop-filter: blur(16px); scrollbar-width: none;
}
.facts-page .facts-jump::-webkit-scrollbar { display: none; }
.facts-page .facts-jump a { min-width: max-content; padding: 9px 16px; border-radius: 999px; color: #333; font-size: .78rem; font-weight: 850; text-decoration: none; text-transform: uppercase; }
.facts-page .facts-jump a:hover { background: #000; color: #fff; }
.facts-page :is(.facts-overview,.facts-daily,.facts-panel,.facts-feature,.facts-lab) {
  margin: 0 18px; padding: clamp(22px,4vw,42px); border: 1px solid var(--etc-border-soft); border-radius: 14px; background: #fff;
}
.facts-page .facts-lab { margin-bottom: 18px; }
.facts-page .facts-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.facts-page .facts-section-head h2 { margin: 0 !important; color: #090909; font-size: clamp(1.65rem,3.4vw,2.7rem) !important; font-weight: 900 !important; letter-spacing: -.04em; line-height: 1.02; }
.facts-page .facts-section-head > p { max-width: 350px; margin: 0; color: #aaa6b4; line-height: 1.45; }
.facts-page .facts-search { width: min(360px,100%); }
.facts-page :is(.facts-search,.router-grid label) > span { display: block; margin-bottom: 7px; color: var(--etc-muted); font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.facts-page .facts-section-head :is(input,select),.facts-page .router-grid :is(input,select) { width: 100% !important; margin: 0 !important; }
.facts-page .stat-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--etc-border-soft); border-radius: 12px; background: var(--etc-border-soft); }
.facts-page .stat-card { min-height: 132px; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 20px; padding: 20px 16px; border: 0; border-radius: 0; background: #fff; }
.facts-page .stat-card span { color: var(--etc-muted); font-size: .69rem; font-weight: 850; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.facts-page .stat-card strong { color: #080808; font-family: "ETCFont",var(--etc-font-ui); font-size: clamp(1.55rem,3vw,2.35rem); font-weight: 400; line-height: 1; }
.facts-page .stat-card:nth-child(3) { background: var(--etc-purple); }
.facts-page .stat-card:nth-child(3) :is(span,strong) { color: #fff; }
.facts-page :is(.facts-feature,.facts-lab) { border-color: #000; background: #080808; color: #fff; }
.facts-page .facts-section-head--light h2 { color: #fff !important; }
.facts-page .facts-feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #343434; border-left: 1px solid #343434; }
.facts-page .facts-story { position: relative; min-height: 310px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; overflow: hidden; border-right: 1px solid #343434; border-bottom: 1px solid #343434; }
.facts-page .facts-story::after { content: ""; position: absolute; inset: auto -25% -55% 5%; height: 190px; background: radial-gradient(circle,var(--story-color),transparent 68%); opacity: .6; }
.facts-page .facts-story__number { color: #6e6e6e; font-family: var(--etc-font-mono); font-size: .72rem; }
.facts-page .facts-story__tag { margin: 38px 0 8px; color: #aaa; font-size: .73rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.facts-page .facts-story strong { color: #fff; font-family: "ETCFont",var(--etc-font-ui); font-size: clamp(2.25rem,4.2vw,3.6rem); font-weight: 400; line-height: .9; white-space: nowrap; }
.facts-page .facts-story__unit { margin-top: 8px; color: var(--story-color); font-weight: 850; }
.facts-page .facts-story > p:last-child { position: relative; z-index: 1; margin: auto 0 0; color: #bdbdbd; font-size: .86rem; line-height: 1.45; }
.facts-page .highlights-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch !important; gap: 12px; }
.facts-page .highlight-card { min-width: 0; padding: 26px; border: 1px solid var(--etc-border-soft) !important; border-radius: 12px !important; background: #f5f5fb !important; }
.facts-page .highlight-card--purple { border-color: var(--etc-purple) !important; background: var(--etc-purple) !important; color: #fff; }
.facts-page .highlight-card__label { margin-bottom: 18px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.facts-page .highlight-card .mini-card { min-height: 150px; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.facts-page .highlight-card .mini-card p { margin: 7px 0; }
.facts-page .highlight-card--purple .muted { color: #ffffffb3; }
.facts-page .highlight-card .history-toggle { width: 100%; margin: 20px 0 0; border-color: #c9c7d5 !important; background: #fff !important; color: #111 !important; }
.facts-page .highlight-card--purple .history-toggle { border-color: #ffffff73 !important; background: transparent !important; color: #fff !important; }
.facts-page .history { max-height: 250px; margin-top: 12px; padding: 12px; overflow: auto; border: 1px solid var(--etc-border-soft); border-radius: 10px; background: #fff; color: #111; }
.facts-page .facts-rankings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.facts-page .facts-connections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px; }
.facts-page :is(.facts-rankings,.facts-connections) > article,.facts-page .facts-geo-grid > article,.facts-page .facts-operator-grid > article { min-width: 0; padding: 22px; border: 1px solid var(--etc-border-soft); border-radius: 12px; background: #fafafe; }
.facts-page .facts-index { display: block; margin-bottom: 34px; color: var(--etc-purple); font-family: var(--etc-font-mono); font-size: .72rem; }
.facts-page :is(.facts-rankings,.facts-connections,.facts-geo-grid,.facts-operator-grid) h3 { margin: 0 0 16px; color: #111; font-size: 1rem !important; font-weight: 900; line-height: 1.25; }
.facts-page ul.fact-list { margin: 0; padding: 0; list-style: none; }
.facts-page ul.fact-list li { margin: 0; padding: 9px 0; overflow-wrap: anywhere; border-bottom: 1px solid #e8e8f2; color: #454451; font-size: .85rem; line-height: 1.45; }
.facts-page ul.fact-list li:last-child { border-bottom: 0; }
.facts-page :is(.facts-finder,.facts-table-section) .facts-section-head > input { width: min(330px,100%) !important; margin: 0 !important; }
.facts-page .station-search-grid { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); gap: 12px; }
.facts-page :is(.search-results,.station-detail) { min-height: 340px; max-height: 470px; overflow: auto; border: 1px solid var(--etc-border-soft); border-radius: 12px; background: #fafafe; }
.facts-page .station-detail { padding: 24px; }
.facts-page .search-results button { width: 100%; padding: 13px 15px; border: 0 !important; border-bottom: 1px solid var(--etc-border-soft) !important; border-radius: 0 !important; background: transparent !important; color: #111 !important; text-align: left; }
.facts-page .search-results button:hover { background: #eeeafd !important; }
.facts-page .facts-geo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.facts-page .facts-geo-main { background: var(--etc-purple) !important; color: #fff; }
.facts-page .facts-geo-main :is(h3,li) { color: #fff !important; }
.facts-page .facts-geo-main li { border-color: #ffffff38 !important; }
.facts-page .facts-geo-wide { grid-column: 1/-1; }
.facts-page :is(.grid-two,.router-grid) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.facts-page .facts-operator-grid h3:not(:first-child) { margin-top: 26px; }
.facts-page .line-label { display: inline-flex; align-items: center; padding: .22rem .48rem; border-radius: 6px; color: #fff; font-size: .78rem; font-weight: 900; line-height: 1.15; }
.facts-page :is(.track-label,.access-label,.pill) { display: inline-flex; margin: 2px; padding: .18rem .42rem; border: 1px solid #cfcde2; border-radius: 999px; background: #fff; color: #3d3a55; font-size: .72rem; font-weight: 800; }
.facts-page .bar { height: 7px; border-radius: 999px; background: linear-gradient(90deg,var(--etc-purple),#a78bfa); }
.facts-page .facts-export { margin: 0 0 14px; background: #000 !important; color: #fff !important; }
.facts-page .facts-table-wrap { max-height: 620px; overflow: auto; border: 1px solid var(--etc-border-soft); border-radius: 12px; background: #fff; }
.facts-page table { width: 100%; border: 0 !important; border-collapse: separate; border-spacing: 0; border-radius: 0 !important; font-size: .78rem; }
.facts-page thead { position: sticky; top: 0; z-index: 2; }
.facts-page th { padding: 13px 11px; border-bottom: 1px solid #292929; background: #080808 !important; color: #fff; text-align: left; white-space: nowrap; }
.facts-page td { padding: 11px; border-bottom: 1px solid #e8e8f2; color: #393845; text-align: left; white-space: nowrap; }
.facts-page tbody tr:nth-child(odd) { background: #f7f7fc; }
.facts-page th.sortable { cursor: pointer; user-select: none; }
.facts-page th.sortable span { color: #8f8f99; }
.facts-page .facts-lab .router-grid label > span { color: #aaa; }
.facts-page .facts-lab-actions { display: flex; align-items: start; gap: 12px; margin-top: 14px; }
.facts-page .facts-lab .button { margin: 0; background: var(--etc-purple) !important; color: #fff !important; }
.facts-page .facts-lab details { min-width: 230px; padding: 12px 15px; border: 1px solid #454545 !important; border-radius: 12px !important; background: #151515 !important; color: #fff !important; box-shadow: none !important; }
.facts-page .facts-lab summary { cursor: pointer; font-weight: 850; }
.facts-page .facts-lab details .button { margin-top: 12px; }
.facts-page .facts-lab .mini-card { border-color: #3d3d3d !important; background: #151515 !important; color: #fff; }
.facts-page .facts-route-result { min-height: 62px; margin-top: 14px; padding: 16px; }
.facts-page .facts-route-result:empty::before { content: "Das Ergebnis erscheint nach der Berechnung."; color: #aaa; }
.facts-page .operator-meta { display: block; margin-top: 5px; color: var(--etc-muted); font-size: .78rem; font-weight: 600; }
.facts-page .fact-section { scroll-margin-top: 110px; }
.facts-page .facts-story__unit { color: var(--story-color) !important; }
.facts-page .facts-story:nth-child(4) strong { font-size: clamp(2rem,3.5vw,3rem); }

body.site-page.facts-page .facts-shell .highlight-card--purple {
  border-color: var(--etc-purple) !important; background: var(--etc-purple) !important; color: #fff !important;
}
body.site-page.facts-page .facts-shell .highlight-card .mini-card {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
body.site-page.facts-page .facts-shell .highlight-card:not(.highlight-card--purple) .history-toggle {
  border-color: #000 !important; background: #000 !important; color: #fff !important;
}
body.site-page.facts-page .facts-shell .highlight-card--purple .history-toggle {
  border-color: #fff !important; background: transparent !important; color: #fff !important;
}
body.site-page.facts-page .facts-shell .search-results button {
  display: block !important; width: 100% !important; min-height: 0 !important; padding: 12px 15px !important;
  border: 0 !important; border-bottom: 1px solid var(--etc-border-soft) !important; border-radius: 0 !important;
  background: transparent !important; color: #111 !important; text-align: left !important;
}
body.site-page.facts-page .facts-shell .search-results button:hover { background: #eeeafd !important; }
body.site-page.facts-page .facts-shell :is(.track-label,.access-label,.pill) {
  border: 1px solid #cfcde2 !important; background: #fff !important; color: #3d3a55 !important;
}
.facts-page .muted { color: var(--etc-muted); }

@media (max-width: 980px) {
  .facts-page .stat-grid { grid-template-columns: repeat(3,1fr); }
  .facts-page .facts-feature-grid { grid-template-columns: repeat(2,1fr); }
  .facts-page :is(.facts-rankings,.facts-connections) { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .facts-page .facts-hero { grid-template-columns: 1fr; }
  .facts-page .facts-hero__copy { min-height: 340px; }
  .facts-page .facts-hero__mark { min-height: 170px; border-top: 1px solid #ffffff40; border-left: 0; }
  .facts-page .facts-jump { top: 76px; border-radius: 12px; }
  .facts-page .facts-section-head { align-items: stretch; flex-direction: column; }
  .facts-page :is(.facts-search,.facts-finder .facts-section-head > input,.facts-table-section .facts-section-head > input) { width: 100% !important; }
  .facts-page :is(.highlights-grid,.station-search-grid,.facts-geo-grid,.grid-two,.router-grid) { grid-template-columns: 1fr; }
  .facts-page .facts-geo-main { grid-row: auto; }
  .facts-page .facts-geo-wide { grid-column: auto; }
}
@media (max-width: 520px) {
  .facts-page .facts-shell { gap: 10px; }
  .facts-page :is(.facts-overview,.facts-daily,.facts-panel,.facts-feature,.facts-lab) { margin: 0 10px; }
  .facts-page .facts-jump { margin: 0 10px; }
  .facts-page :is(.stat-grid,.facts-feature-grid,.facts-rankings,.facts-connections) { grid-template-columns: 1fr !important; }
  .facts-page .stat-card { min-height: 105px; }
  .facts-page .facts-story { min-height: 245px; }
  .facts-page .facts-lab-actions { flex-direction: column; }
  .facts-page .facts-lab details { width: 100%; }
}

/* Calm facts intro: the key figures live in the section directly below. */
.facts-page .facts-hero {
  min-height: 300px;
  grid-template-columns: minmax(0,1fr);
  border-bottom: 1px solid var(--etc-border-soft);
  background: #fff;
  color: #000;
}
.facts-page .facts-hero::before {
  inset: 0 auto 0 0;
  width: 10px;
  background: var(--etc-purple);
}
.facts-page .facts-hero::after {
  inset: 0 0 0 42%;
  opacity: .45;
  background-image: linear-gradient(rgba(72,0,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(72,0,255,.09) 1px,transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg,transparent,#000);
}
.facts-page .facts-hero__copy {
  align-self: center;
  padding: clamp(42px,7vw,76px);
}
.facts-page .facts-hero .facts-kicker { color: var(--etc-purple); }
.facts-page .facts-hero h1 {
  max-width: 820px;
  color: #000 !important;
  font-size: clamp(2.5rem,6.5vw,5.2rem) !important;
  line-height: .95 !important;
}
.facts-page .facts-hero__copy > p:last-child {
  max-width: 650px;
  margin-top: 22px;
  color: var(--etc-ink-soft);
  font-size: clamp(.98rem,1.8vw,1.15rem);
}
.facts-page .facts-hero__mark { display: none; }

@media (max-width: 700px) {
  .facts-page .facts-hero { min-height: 250px; }
  .facts-page .facts-hero__copy { min-height: 0; }
}

/* ========================================================================
   STATION + LINE REGISTERS
   Shared master/detail explorer for the two network directories.
   ======================================================================== */

:is(.stations-page,.lines-page) .register-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin: 0 0 18px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--etc-border-soft);
  border-radius: 12px;
  background: var(--etc-border-soft);
}

:is(.stations-page,.lines-page) .register-stats > div {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px 19px;
  background: #fff;
}

:is(.stations-page,.lines-page) .register-stats > div:first-child {
  background: var(--etc-purple);
}

:is(.stations-page,.lines-page) .register-stats :is(dt,dd) { margin: 0; }
:is(.stations-page,.lines-page) .register-stats dt {
  font-family: "ETCFont",var(--etc-font-ui);
  font-size: clamp(1.65rem,3vw,2.25rem);
  line-height: 1;
}
:is(.stations-page,.lines-page) .register-stats dd {
  color: var(--etc-muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:is(.stations-page,.lines-page) .register-stats > div:first-child :is(dt,dd) { color: #fff; }

body.site-page:is(.stations-page,.lines-page) .register-filterbar {
  margin-bottom: 14px !important;
  background: var(--etc-bg) !important;
}

.stations-page .register-filterbar .filters { grid-template-columns: 1.4fr repeat(3,minmax(150px,1fr)); }
.lines-page .register-filterbar .filters { grid-template-columns: 1.5fr repeat(2,minmax(170px,1fr)); }

:is(.stations-page,.lines-page) .register-tabs {
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
:is(.stations-page,.lines-page) .register-tabs::-webkit-scrollbar { display: none; }
body.site-page:is(.stations-page,.lines-page) .register-tabs button {
  min-width: max-content;
  min-height: 38px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: .78rem;
}
body.site-page:is(.stations-page,.lines-page) .register-tabs button.is-active {
  border-color: #000 !important;
  background: #000 !important;
  color: #fff !important;
}
:is(.stations-page,.lines-page) .register-tabs button span {
  color: var(--etc-muted);
  font-size: .7rem;
}

:is(.stations-page,.lines-page) .register-layout {
  display: grid;
  grid-template-columns: minmax(310px,.8fr) minmax(0,1.45fr);
  align-items: start;
  gap: 14px;
}

:is(.stations-page,.lines-page) .register-results,
:is(.stations-page,.lines-page) .register-detail {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--etc-border-soft);
  border-radius: 14px;
  background: #fff;
}

:is(.stations-page,.lines-page) .register-results {
  max-height: min(760px,calc(100vh - 130px));
  display: flex;
  flex-direction: column;
}

:is(.stations-page,.lines-page) .register-results .info-text {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 14px 16px;
  border-bottom: 1px solid var(--etc-border-soft);
  color: var(--etc-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

:is(.stations-page,.lines-page) .register-list {
  min-height: 0;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.site-page:is(.stations-page,.lines-page) .register-item {
  position: relative;
  width: 100% !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--etc-border-soft) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111 !important;
  text-align: left !important;
  transition: background 140ms ease;
}

body.site-page:is(.stations-page,.lines-page) .register-item:hover { background: #f5f3ff !important; }
body.site-page:is(.stations-page,.lines-page) .register-item.is-selected {
  background: #eeeaff !important;
  box-shadow: inset 4px 0 0 var(--etc-purple) !important;
}

:is(.stations-page,.lines-page) .register-item-main { min-width: 0; }
:is(.stations-page,.lines-page) .register-item-main > strong {
  display: block;
  overflow: hidden;
  color: #111;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.stations-page,.lines-page) .register-item-main > small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--etc-muted);
  font-size: .73rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.stations-page,.lines-page) .register-item-meta {
  color: var(--etc-muted);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.stations-page .register-item-lines {
  min-height: 19px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 7px;
  overflow: hidden;
}
.stations-page .register-item-lines .line-label {
  max-width: 76px;
  margin: 0 !important;
  padding: 3px 6px !important;
  overflow: hidden;
  border-width: 1px !important;
  border-radius: 5px !important;
  font-size: .62rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stations-page .register-item-lines small { color: var(--etc-muted); font-size: .65rem; font-weight: 800; }

.lines-page .line-register-item { grid-template-columns: 7px minmax(0,1fr) auto !important; }
.lines-page .register-line-mark {
  align-self: stretch;
  width: 7px;
  border-radius: 999px;
  background: var(--line-color,var(--etc-purple));
}

body.site-page:is(.stations-page,.lines-page) .register-more {
  flex: 0 0 auto;
  margin: 10px !important;
  background: #000 !important;
  color: #fff !important;
}

:is(.stations-page,.lines-page) .register-detail {
  position: sticky;
  top: 96px;
  max-height: min(760px,calc(100vh - 112px));
  overflow-y: auto;
}
:is(.stations-page,.lines-page) .register-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--etc-muted);
  text-align: center;
}
:is(.stations-page,.lines-page) .register-detail-head {
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--etc-border-soft);
  background: var(--etc-bg);
}
:is(.stations-page,.lines-page) .register-kicker {
  margin: 0 0 7px;
  color: var(--etc-purple);
  font-family: "ETCFont",var(--etc-font-ui);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:is(.stations-page,.lines-page) .register-detail-head h2 {
  margin: 0 !important;
  color: #111;
  font-size: clamp(1.35rem,3vw,2rem) !important;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
}
:is(.stations-page,.lines-page) .register-detail-head > p:last-child {
  margin: 8px 0 0;
  color: var(--etc-muted);
  font-size: .8rem;
}
:is(.stations-page,.lines-page) .register-actions {
  display: flex;
  gap: 8px;
  padding: 14px 26px 0;
}
body.site-page:is(.stations-page,.lines-page) .register-actions .button {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  text-decoration: none;
}
:is(.stations-page,.lines-page) .register-detail-body { padding: 18px 26px 26px; }
:is(.stations-page,.lines-page) .register-detail-body > p { margin: 0 0 14px; color: #444; font-size: .86rem; line-height: 1.5; }
:is(.stations-page,.lines-page) .register-detail-body h4 { margin: 22px 0 8px; font-size: .9rem; }
:is(.stations-page,.lines-page) .register-detail-body .fact-list { margin: 0; padding: 0; list-style: none; }
:is(.stations-page,.lines-page) .register-detail-body .fact-list li { padding: 9px 0; border-bottom: 1px solid var(--etc-border-soft); color: #444; font-size: .8rem; line-height: 1.45; }

body.site-page.lines-page .line-detail-card {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: default;
}
.lines-page .line-detail-card .line-card__head {
  order: 1;
  min-height: 0;
  padding: 24px 26px 16px;
  border-top: 7px solid var(--line-color,var(--etc-purple));
  border-bottom: 0;
}
.lines-page .line-detail-summary {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin: 0 26px;
  overflow: hidden;
  border: 1px solid var(--etc-border-soft);
  border-radius: 9px;
  background: var(--etc-border-soft);
}
.lines-page .line-detail-summary span { padding: 10px; background: var(--etc-bg); color: #444; font-size: .7rem; font-weight: 800; text-align: center; }
.lines-page .line-detail-card .line-info { order: 3; margin: 14px 26px 0; padding: 14px; border: 1px solid #ffd5a8; border-radius: 10px; background: #fff8ef; }
.lines-page .line-detail-card .line-card__body { order: 4; margin: 0; padding: 8px 26px 26px; }
.lines-page .line-detail-card .line-card__body { display: block !important; }
.lines-page .line-detail-card .component-block { margin-top: 16px; padding: 16px 0 0 !important; border: 0 !important; border-top: 1px solid var(--etc-border-soft) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.lines-page .line-detail-card .component-title { margin-bottom: 12px; color: #111; font-size: .84rem; font-weight: 900; }
.lines-page .line-detail-card .station-list { position: relative; display: block !important; }
.lines-page .line-detail-card .station-list.reveal { opacity: 1 !important; transform: none !important; }
.lines-page .line-detail-card .station-list::before { content: ""; position: absolute; left: 5px; top: 13px; bottom: 13px; width: 3px; background: var(--line-color,var(--etc-purple)); }
.lines-page .line-detail-card .station-list li { position: relative; display: grid !important; grid-template-columns: 14px minmax(0,1fr); gap: 9px; padding: 7px 0; border-bottom: 0; }
.lines-page .line-detail-card .station-dot { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 3px; border: 2px solid #000 !important; background: #fff; }
.lines-page .line-detail-card .station-name { color: #222; font-size: .83rem; font-weight: 850; }
.lines-page .line-detail-card .station-connections { gap: 3px; }
body.site-page.lines-page .line-detail-card .station-connections :is(.track-label,.access-label) {
  margin: 1px !important;
  padding: 2px 5px !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  font-size: .62rem !important;
}
body.site-page.lines-page .line-detail-card .branch-card {
  margin-top: 9px !important;
  padding: 12px !important;
  border: 1px solid var(--etc-border-soft) !important;
  border-radius: 10px !important;
  background: var(--etc-bg) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .stations-page .register-filterbar .filters,
  .lines-page .register-filterbar .filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :is(.stations-page,.lines-page) .register-layout { grid-template-columns: minmax(270px,.75fr) minmax(0,1.25fr); }
}

@media (max-width: 700px) {
  :is(.stations-page,.lines-page) .register-layout { grid-template-columns: 1fr; }
  :is(.stations-page,.lines-page) .register-results { max-height: 460px; }
  :is(.stations-page,.lines-page) .register-detail { position: static; max-height: none; }
}

@media (max-width: 520px) {
  :is(.stations-page,.lines-page) .register-stats > div { min-height: 82px; padding: 13px 11px; }
  :is(.stations-page,.lines-page) .register-stats dd { font-size: .58rem; }
  .stations-page .register-filterbar .filters,
  .lines-page .register-filterbar .filters { grid-template-columns: 1fr; }
  :is(.stations-page,.lines-page) .register-actions { padding-inline: 18px; }
  :is(.stations-page,.lines-page) .register-detail-body { padding-inline: 18px; }
  .lines-page .line-detail-card .line-card__head { padding-inline: 18px; }
  .lines-page .line-detail-summary { margin-inline: 18px; }
  .lines-page .line-detail-card .line-card__body { padding-inline: 18px; }
}