/* THE WALL, gemeinsame Regeln fuer alle Seiten.
   Werte aus den Entwuerfen stehen inline im Markup. Hier steht nur, was inline
   nicht geht: Grundzustand der Seite, Hover, Fokus, Zustaende ueber aria-Attribute,
   Keyframes, Range-Regler und reduzierte Bewegung. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.tw-de-pending body { visibility: hidden; }
body {
  margin: 0;
  background-color: #08090A;
  background-image: radial-gradient(circle at center, #181C20 1px, transparent 1.2px);
  background-size: 6px 6px;
  color: #E8EAEC;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-page="map"] { background: #050607; background-image: none; }
a { color: #FFAA00; text-decoration: none; }
a:hover { color: #FFC44D; }
::selection { background: #FFAA00; color: #08090A; }
canvas { display: block; image-rendering: pixelated; }
input, select, textarea { font-family: "IBM Plex Mono", monospace; }
input::placeholder, textarea::placeholder { color: #8B949C; }
button { font: inherit; }
[hidden] { display: none !important; }

/* Sichtbarer Fokus auf allem, was bedienbar ist (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #FFC44D;
  outline-offset: 2px;
}
body[data-page="welcome"] a:focus-visible, body[data-page="welcome"] button:focus-visible,
body[data-page="notfound"] a:focus-visible, body[data-page="notfound"] button:focus-visible {
  outline-offset: 3px;
  border-radius: 2px;
}
/* Farbwahl hinter "Mehr": das Feld liegt unsichtbar ueber dem Label, also traegt das Label den Ring (FEHLERLISTE 2.1). */
label:has(input[type="color"]:focus-visible) { outline: 2px solid #FFC44D; outline-offset: 2px; }

[data-skip]:focus { transform: translateY(0) !important; }

/* Ueberschriften auf dem LED-Raster: der Text bleibt fuer Screenreader im DOM. */
[data-pxhead] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Trefferflaeche 44 px hoch, ohne das Aussehen zu aendern (FEHLERLISTE 2.3). */
.hit { position: relative; }
.hit::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Sprachschalter */
.tw-lang {
  position: relative;
  font-family: inherit; font-size: 11px; letter-spacing: 0.08em;
  padding: 6px 9px; border: 0; border-radius: 1px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  background: transparent; color: #8B949C;
}
.tw-lang[aria-pressed="true"] { background: #FFAA00; color: #08090A; font-weight: 600; }
.tw-lang::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* Hover-Varianten aus style-hover der Entwuerfe */
.h-text:hover { color: #E8EAEC !important; }
.h-nav:hover { color: #E8EAEC !important; background: #12171A !important; }
.h-solid:hover { background: #FFC44D !important; color: #08090A !important; }
.h-ghost:hover { border-color: #4A565F !important; background: #0E1215 !important; }
.h-ghost-text:hover { border-color: #4A565F !important; color: #E8EAEC !important; }
.h-row:hover { background: #12171A !important; }
.h-border:hover { border-color: #4A565F !important; }
.h-bright:hover { color: #E8EAEC !important; }
.a-press:active { transform: scale(0.97); }

/* Knoepfe aus den Entwuerfen */
.btn-ghost {
  min-height: 44px; padding: 0 16px; border: 1px solid #2C353C; border-radius: 2px; background: transparent; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #B4BCC3;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1);
}
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { border-color: #4A565F; color: #E8EAEC; }
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.btn-solid {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 2px; background: #FFAA00; color: #08090A; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1);
}
.btn-solid:hover:not(:disabled):not([aria-disabled="true"]) { background: #FFC44D; }
.btn-solid:disabled, .btn-solid[aria-disabled="true"] { background: #1E252A; color: #8B949C; cursor: default; }
.btn-danger {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 2px; background: #FF4A1C; color: #08090A; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1);
}
.btn-danger-ghost {
  min-height: 44px; padding: 0 16px; border: 1px solid #6B2313; border-radius: 2px; background: transparent; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #FF7A54;
  transition: border-color 160ms ease, background 160ms ease;
}
.btn-danger-ghost:hover { border-color: #FF4A1C; }
.btn-subtle {
  min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8B949C;
  transition: color 160ms ease;
}
.btn-subtle:hover { color: #E8EAEC; }

/* A1 Textfeld mit Rahmen, Fokus leuchtet, Fehler rot */
.field {
  width: 100%; min-height: 48px; padding: 13px 14px; background: #0E1215; color: #E8EAEC; font-size: 15px;
  border: 1px solid #2C353C; border-radius: 2px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field:focus { border-color: #FFAA00; box-shadow: 0 0 0 3px rgba(255,170,0,0.14); }
.field[aria-invalid="true"] { border-color: #FF4A1C; box-shadow: 0 0 0 3px rgba(255,74,28,0.12); }
.field-account { background: #0B0D0F; }
select.field { cursor: pointer; }
/* Passwort anzeigen: der Knopf haengt am Feld und teilt dessen Randfarbe. */
.pw-toggle {
  min-height: 48px; padding: 0 14px; border: 1px solid #2C353C; border-left: 0; border-radius: 0 2px 2px 0; background: #0E1215; color: #B4BCC3;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.field:focus + .pw-toggle { border-color: #FFAA00; }
.field[aria-invalid="true"] + .pw-toggle { border-color: #FF4A1C; }
[data-meter] > span { flex: 1; height: 4px; border-radius: 1px; background: #1E252A; transition: background 200ms cubic-bezier(0.23,1,0.32,1); }

/* C1 Kippschalter */
.sw {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px; padding: 0;
  border: 1px solid #2C353C; border-radius: 2px; cursor: pointer; background: #0E1215;
  transition: background 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms ease;
}
.sw::before { content: ""; position: absolute; inset: -9px -6px; }
.sw > span {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 1px; display: block;
  /* #8B949C: der Aus-Zustand braucht 3:1 gegen den Grund (WCAG 1.4.11), #4A565F hatte 2,5:1. */
  background: #8B949C; transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.23,1,0.32,1), background 180ms ease;
}
.sw[aria-checked="true"] { border-color: #FFAA00; background: rgba(255,170,0,0.18); }
.sw[aria-checked="true"] > span { background: #FFAA00; transform: translateX(20px); }
.sw:disabled { cursor: default; opacity: 0.55; }

/* Moduszeilen links auf der Geraeteseite */
.navrow {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; text-align: left; border-radius: 2px;
  transition: background 160ms ease, color 160ms ease; background: transparent; color: #B4BCC3;
}
.navrow[aria-checked="true"] { background: #171E23; color: #E8EAEC; }
.navdot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 1px; display: block;
  border: 1px solid #8B949C; background: transparent; transition: background 160ms ease, border-color 160ms ease;
}
[aria-checked="true"] > .navdot { border-color: #FFAA00; background: #FFAA00; box-shadow: 0 0 9px rgba(255,170,0,0.6); }
.livetag { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 1px; background: #1E252A; color: #8B949C; }
[aria-checked="true"] > .livetag { background: #FFAA00; color: #08090A; }

/* D5 Chips fuer die Rotation */
.chip {
  min-height: 44px; padding: 0 11px; border: 1px solid #2C353C; border-radius: 2px; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  background: transparent; color: #B4BCC3;
}
.chip[aria-pressed="true"] { border-color: #FFAA00; background: #FFAA00; color: #08090A; font-weight: 600; }
/* Chips mit eigener Farbe: Bus, Zug und Tram im Nahverkehr */
.chip.tint { padding: 0 14px; font-size: 12px; }
.chip.tint[aria-pressed="true"] { border-color: var(--tint); background: var(--tint); }
.chip:disabled { cursor: default; opacity: 0.55; }
/* Linien im Nahverkehr: an einem Busbahnhof sind es fuenfzig, gefuellt waere das eine Bernsteinwand.
   Gezeigt: Rand in Bernstein. Ausgeblendet: grau und durchgestrichen. */
.chip.line { min-width: 44px; }
.chip.line[aria-pressed="true"] { background: transparent; border-color: #FFAA00; color: #E8EAEC; font-weight: 500; }
.chip.line[aria-pressed="false"] { color: #8B949C; text-decoration: line-through; }

/* Zwei Felder nebeneinander, etwa 24 H und 12 H */
.two {
  min-height: 44px; border: 1px solid #2C353C; border-radius: 2px; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease; background: transparent; color: #B4BCC3;
}
.two[aria-pressed="true"], .two[role="radio"][aria-checked="true"] { border-color: #FFAA00; background: #FFAA00; color: #08090A; font-weight: 600; }
.two:disabled { cursor: default; opacity: 0.55; }

/* Auswahlzeilen mit Quadrat */
.rrow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 13px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; text-align: left; transition: background 160ms ease, color 160ms ease;
  background: #0B0D0F; color: #B4BCC3;
}
.rrow[aria-checked="true"] { background: #141A1E; color: #E8EAEC; }
.rdot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 1px; display: block;
  border: 1px solid #8B949C; background: transparent; transition: background 160ms ease, border-color 160ms ease;
}
[aria-checked="true"] > .rdot { border-color: #FFAA00; background: #FFAA00; }

/* E5 Farbfelder */
.swatch {
  width: 44px; height: 44px; padding: 0; border-radius: 2px; cursor: pointer; background: var(--sw);
  border: 2px solid transparent; box-shadow: 0 0 0 1px #2C353C;
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
.swatch[aria-pressed="true"] { border-color: #F2F4F5; box-shadow: 0 0 0 1px #2C353C, 0 0 14px var(--sw); }
.more {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 56px; height: 44px;
  border: 1px dashed #4A565F; border-radius: 2px; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8B949C;
}
.more[data-active="true"] { color: #FFAA00; }
.more input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Ziffernschrift-Auswahl */
.face {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; cursor: pointer;
  border: 1px solid #2C353C; border-radius: 2px; background: #0B0D0F; transition: border-color 160ms ease, background 160ms ease;
}
.face[aria-checked="true"] { border-color: #FFAA00; background: #141A1E; }
.facelabel { flex: 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8B949C; }
[aria-checked="true"] > .facelabel { color: #FFAA00; }

/* Segmente, etwa Ansehen und Bedienen */
.seg {
  min-height: 44px; padding: 0 14px; border: 0; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em;
  transition: background 160ms ease, color 160ms ease; background: transparent; color: #B4BCC3;
}
.seg + .seg { border-left: 1px solid #2C353C; }
.seg[aria-pressed="true"] { background: #FFAA00; color: #08090A; font-weight: 600; }

/* Reiter auf der Kontoseite */
.tab {
  padding: 12px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease; color: #8B949C; min-height: 44px;
}
.tab[aria-pressed="true"] { border-bottom-color: #FFAA00; color: #E8EAEC; }

/* Demo der Startseite: auf dem Handy Einleitung, Panel und Bildschirme untereinander, damit
   man den Wechsel sieht; breiter steht das Panel rechts neben beiden und bleibt im Bild. */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "side" "tabs"; gap: 24px; }
.demo-intro { grid-area: intro; }
.demo-side { grid-area: side; }
.demo-tabs { grid-area: tabs; }
@media (min-width: 760px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro side" "tabs side"; column-gap: clamp(32px, 5vw, 64px); row-gap: 0; align-items: start; }
  .demo-side { position: sticky; top: 96px; }
}

/* Ansichten der Demo auf der Startseite */
.vtab {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 2px; border: 0; border-bottom: 1px solid #1B2126; background: transparent;
  font-family: inherit; font-size: 12px; letter-spacing: 0.1em; cursor: pointer; text-align: left;
  transition: color 160ms ease, padding-left 200ms cubic-bezier(0.23,1,0.32,1); color: #8B949C;
}
.vtab[aria-pressed="true"] { color: #FFAA00; padding-left: 10px; box-shadow: inset 2px 0 0 #FFAA00; }
.vtab[hidden] { display: none; }
/* Der Kopf der Startseite hat unter 900 Pixeln zwei oder drei Zeilen, bis 120 Pixel: dort klebt er nicht. */
@media (max-width: 899px) { .site-head { position: static !important; } }
/* Auf dem Handy zwei Spalten ohne den Hinweis rechts: elf Zeilen untereinander waren ueber 500 Pixel. */
@media (max-width: 559px) {
  .demo-tabs [data-views] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px !important; }
  .vtab { gap: 6px; padding: 13px 2px; }
  .vtab-hint { display: none; }
}

/* Kacheln der Modi auf der Startseite: eine Spalte, ab 640 Pixeln zwei, ab 1000 drei. Die letzte Karte
   ("Auf der Liste") fuellt die Reihe auf, --span2 und --span3 rechnet die Seite aus der Zahl der Kacheln. */
.mode-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
@media (min-width: 640px) {
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-later { grid-column: span var(--span2, 1); }
}
@media (min-width: 1000px) {
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-later { grid-column: span var(--span3, 1); }
}

/* "Neben den Modi": Begriff und Satz untereinander, ab 560 Pixeln nebeneinander. */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 559px) { .facts dd { border-top: 0 !important; } }
@media (min-width: 560px) { .facts { grid-template-columns: 10.5rem minmax(0, 1fr); } }

/* Zeilen der Animationsliste */
.arow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 11px; border: 0; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; text-align: left; border-radius: 2px;
  transition: background 160ms ease, color 160ms ease; background: transparent; color: #B4BCC3;
}
.arow[aria-checked="true"] { background: #171E23; color: #E8EAEC; }
.anum { flex: 0 0 auto; font-size: 10px; letter-spacing: 0.06em; color: #8B949C; }
[aria-checked="true"] > .anum { color: #FFAA00; }

/* Bewegung anhalten, gleicher Stil wie der Wechsel-Knopf der Startseite.
   data-running="true": laeuft gerade, Knopf in Bernstein. */
.motion {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; min-height: 44px; border: 1px solid #2C353C; border-radius: 2px;
  background: transparent; font-family: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); color: #8B949C;
}
.motion[data-running="true"] { color: #FFAA00; }
.motion:hover { border-color: #4A565F; }
.motion > span:first-child { width: 9px; height: 9px; background: currentColor; border-radius: 1px; flex: 0 0 auto; }

/* Range-Regler, 44 px hoch als Trefferflaeche (CLAUDE.md), die Spur bleibt 4 px. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #1E252A; border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 4px; background: #1E252A; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  background: #FFAA00; border: 0; border-radius: 2px;
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #FFAA00; border: 0; border-radius: 2px; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255,196,77,0.5); }
input[type="range"].vert { writing-mode: vertical-lr; direction: rtl; width: 30px; height: 132px; }
input[type="checkbox"] { accent-color: #FFAA00; width: 20px; height: 20px; cursor: pointer; }

/* Statuspunkte blinken kurz und bleiben dann an, damit nichts laenger als
   fuenf Sekunden ohne Haltknopf blinkt (FEHLERLISTE 2.4). */
@keyframes px-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0.2 } }
.blink-18 { animation: px-blink 1.8s steps(1, end) 2; }
.blink-24 { animation: px-blink 2.4s steps(1, end) 2; }

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

/* Einfuehrung ins Geraet (js/lib/tour.js), nach design/Intro.dc.html. Hier steht nur, was
   inline nicht geht: die Breite ueber eine Media Query, Zustaende ueber Attribute, Keyframes. */
.tour {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 10px; background: rgba(8,9,10,0.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.tour-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.tour-visual { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-bottom: 1px solid #1B2126; }
.tour-stage { position: relative; width: 100%; height: 200px; background: #070A0C; border: 1px solid #1B2126; border-radius: 2px; overflow: hidden; }
/* Auf dem Handy etwas enger, damit Zurueck, Ueberspringen und Weiter in eine Zeile passen. */
.tour-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid #1B2126; background: #0B0D0F; }
@media (min-width: 860px) {
  .tour { padding: 24px; }
  .tour-foot { gap: 10px; padding: 14px 18px; }
  .tour-body { display: grid; grid-template-columns: 1.25fr 1fr; }
  .tour-visual { border-bottom: 0; border-right: 1px solid #1B2126; }
  .tour-stage { height: 280px; }
}
/* Kleine Knoepfe im Kopf und die Zustaende in Station 6: 44 px Trefferflaeche ohne das Aussehen zu aendern. */
.tour-hit { position: relative; }
.tour-hit::before { content: ""; position: absolute; inset: -10px -4px; }
.tour-rail {
  display: flex; align-items: center; min-height: 34px; padding: 0 10px; cursor: pointer;
  border: 1px solid #2C353C; border-radius: 2px; background: transparent;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #B4BCC3;
  transition: border-color 160ms ease, color 160ms ease;
}
.tour-rail:hover { border-color: #4A565F; color: #E8EAEC; }
.tour-rail[aria-pressed="true"] { border-color: #FFAA00; background: rgba(255,170,0,0.12); color: #FFC44D; }
/* Das erklaerte Bauteil bleibt hell, der Rest geht auf 28 Prozent. Abgedunkelt wird jede Flaeche,
   nicht das Bauteil: opacity auf einem Element mit preserve-3d macht seine Kinder flach. Die
   Ausnahmen sind spezifischer als die Regel, ohne :not(). */
.tour-face { transition: opacity 320ms cubic-bezier(0.23,1,0.32,1); }
.tour-board[data-focus] .tour-face { opacity: 0.28; }
.tour-board[data-focus="module"] [data-part="module"] .tour-face,
.tour-board[data-focus="usb"] [data-part="usb"] .tour-face,
.tour-board[data-focus="usb"] [data-part="power"] .tour-face,
.tour-board[data-focus="usb"] [data-part="vh4p"] .tour-face,
.tour-board[data-focus="wheel"] [data-part="wheel"] .tour-face,
.tour-board[data-focus="en"] [data-part="en"] .tour-face,
.tour-board[data-focus="en"] [data-part="boot"] .tour-face { opacity: 1; }
@keyframes tw-glow {
  0%, 100% { box-shadow: 0 0 0 1px #FFAA00, 0 0 18px rgba(255,170,0,0.45); }
  50% { box-shadow: 0 0 0 1px #FFAA00, 0 0 34px rgba(255,170,0,0.8); }
}
.tour-halo { animation: tw-glow 2.4s ease-in-out infinite; }
.tour[data-paused="true"] .tour-halo { animation-play-state: paused; }
.tour[data-reduce="true"] .tour-halo { animation: none; box-shadow: 0 0 0 1px #FFAA00, 0 0 22px rgba(255,170,0,0.6); }

/* Abspielknopf der Animationsseite: angehalten heller als der allgemeine Bewegungsknopf. */
.motion.play { color: #B4BCC3; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; padding: 0 18px; }
.motion.play[data-running="true"] { color: #FFAA00; }

/* Varianten aus der Eingabe-Bibliothek (nur dort gezeigt) */
.field-underline {
  width: 100%; min-height: 48px; padding: 13px 2px; background: transparent; color: #E8EAEC; font-size: 15px;
  border: 0; border-bottom: 1px solid #2C353C; border-radius: 0; transition: border-color 160ms ease;
}
.field-underline:focus { border-bottom-color: #FFAA00; box-shadow: 0 1px 0 0 #FFAA00; }
.field-inset {
  width: 100%; min-height: 48px; padding: 13px 14px; background: #050607; color: #E8EAEC; font-size: 15px;
  border: 1px solid #171C21; border-radius: 2px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field-inset:focus { border-color: #FFAA00; box-shadow: inset 0 2px 6px rgba(0,0,0,0.7), 0 0 0 3px rgba(255,170,0,0.12); }
.term {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 14px; background: #050607;
  border: 1px solid #1E2A24; border-radius: 2px; transition: border-color 160ms ease;
}
.term:focus-within { border-color: #3DE07C; box-shadow: 0 0 0 3px rgba(61,224,124,0.12); }
.term input { flex: 1; min-width: 0; background: transparent; border: 0; color: #E8EAEC; font-size: 15px; padding: 0; }
.step {
  min-height: 44px; padding: 0 4px; border: 1px solid #2C353C; border-radius: 2px; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-variant-numeric: tabular-nums;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1);
  background: transparent; color: #B4BCC3;
}
.step[aria-pressed="true"] { border-color: #FFAA00; background: #FFAA00; color: #08090A; font-weight: 600; }
.ledbtn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; cursor: pointer;
  border: 1px solid #2C353C; border-radius: 2px; background: #0E1215;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #E8EAEC;
  transition: background 180ms ease, border-color 180ms ease;
}
.ledbtn[aria-checked="true"] { border-color: #FFAA00; background: rgba(255,170,0,0.10); }
.ledbtn .lamp { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 1px; display: block; background: #2C353C; transition: background 180ms ease, box-shadow 180ms ease; }
.ledbtn[aria-checked="true"] .lamp { background: #FFAA00; box-shadow: 0 0 10px #FFAA00; }
.ledbtn .state { font-size: 11px; color: #8B949C; }
.ledbtn[aria-checked="true"] .state { color: #FFAA00; }
.tile {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px; cursor: pointer;
  border: 1px solid #2C353C; border-radius: 2px; background: #0B0D0F;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #B4BCC3;
  transition: border-color 160ms ease, background 160ms ease;
}
.tile[aria-checked="true"] { border-color: #FFAA00; background: #141A1E; color: #E8EAEC; }
.segfull { flex: 1; min-height: 44px; padding: 0 14px; border: 0; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; transition: background 160ms ease, color 160ms ease; background: transparent; color: #B4BCC3; }
.segfull + .segfull { border-left: 1px solid #2C353C; }
.segfull[aria-pressed="true"] { background: #FFAA00; color: #08090A; font-weight: 600; }
.swatch[role="radio"][aria-checked="true"] { border-color: #F2F4F5; box-shadow: 0 0 0 1px #2C353C, 0 0 14px var(--sw); }
.chip-lib { min-height: 44px; padding: 0 14px; border: 1px solid #2C353C; border-radius: 2px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; background: transparent; color: #B4BCC3; }
.chip-lib[aria-pressed="true"] { border-color: #FFAA00; background: #FFAA00; color: #08090A; font-weight: 600; }
.hexfield { flex: 1; min-width: 0; min-height: 48px; padding: 13px 14px; background: #0E1215; color: #E8EAEC; font-size: 15px; text-transform: uppercase; border: 1px solid #2C353C; border-radius: 0 2px 2px 0; }
.hexfield[aria-invalid="true"] { border-color: #FF4A1C; }

/* Raster mit einer Karte ueber zwei Spalten: wenn nur zwei Spalten passen, bliebe
   neben der ersten Karte eine graue Luecke, bei einer Spalte entstuende eine
   unsichtbare zweite. Unterhalb dieser Breite wird untereinander gestapelt. */
@media (max-width: 660px) {
  .span-2 { grid-column: 1 / -1 !important; }
}

/* Kopf der Seiten nach der Anmeldung (views/app_header.php). Er klebt oben, auf dem Handy nicht: mit
   Wortmarke, Umschalter und Bereichen waere er dort ein Fuenftel des Bildes. */
.app-head { position: sticky; top: 0; z-index: 30; background: rgba(8,9,10,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #1B2126; }
@media (max-width: 830px) {
  .app-head { position: static; }
  /* Die Trennlinien zwischen Wortmarke, Umschalter und Bereichen gelten nur in einer Zeile; sobald die Reihe umbricht, standen sie am Zeilenanfang. */
  .app-head-in { gap: 8px 14px !important; padding: 10px 20px !important; }
  .app-head-sep { border-left: 0 !important; padding-left: 0 !important; }
}
@media (max-width: 480px) {
  /* So passen Bereiche und Sprachschalter auf dem Handy in eine Zeile. */
  .app-head nav a, .app-head nav span { padding: 7px 8px !important; }
}

/* Geraeteseite. Im Dokument stehen Modi, Vorschau, Rotation: in dieser Reihenfolge lesen Vorleser, tabbt die
   Tastatur, und auf dem Handy liegt die Vorschau gleich unter den Modi statt tausend Pixel tiefer. Ab 831 px
   stehen Modi und Rotation links uebereinander, die Vorschau mit Timer und Wecker rechts ueber beide Zeilen. */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: #1B2126; border: 1px solid #1B2126; }
.stage-modes, .stage-main, .stage-rot { min-width: 0; background: #0B0D0F; }
@media (min-width: 831px) {
  .stage-grid { grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); }
  .stage-modes { grid-column: 1; grid-row: 1; }
  .stage-rot { grid-column: 1; grid-row: 2; }
  .stage-main { grid-column: 2; grid-row: 1 / span 2; }
}
/* Timer und Wecker unter der Vorschau, getrennt durch eine Rasterluecke */
.stage-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: #1B2126; border-top: 1px solid #1B2126; }
.stage-tools > article { min-width: 0; padding: 22px; background: #0B0D0F; }
/* Sieben Modi untereinander sind auf dem Handy 350 Pixel: in zwei Spalten die Haelfte. */
@media (max-width: 830px) { .mode-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mode-list .livetag { display: none; } }

/* Leiste am unteren Rand, solange etwas nicht uebernommen ist und "Uebernehmen" oben aus dem Bild liegt
   (device.js, renderDock). Gleiche Flaeche wie der Kopf, eine Linie statt Schatten. */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(8,9,10,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid #2C353C; }
.dock-in { max-width: 1400px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dock-screen { flex: 0 0 auto; padding: 3px; background: #15191C; border-radius: 2px; }
.dock-screen canvas { display: block; }
.dock-text { flex: 1 1 200px; min-width: 0; }
.dock-title { margin: 0 0 2px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFC44D; }
.dock-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: #8B949C; }
.dock-actions { flex: 0 0 auto; display: flex; gap: 8px; margin-left: auto; }
body.has-dock { padding-bottom: 96px; }
@media (max-width: 520px) {
  /* Auf dem Handy links die Vorschau, rechts Titel und die zwei Knoepfe untereinander: eine Zeile statt zwei, rund 100 statt 140 Pixel. */
  .dock-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 8px 12px; }
  .dock-screen { grid-row: 1 / span 2; }
  .dock-text { grid-column: 2; }
  .dock-note { display: none; }
  .dock-actions { grid-column: 2; margin-left: 0; }
  body.has-dock { padding-bottom: 116px; }
}

/* Nur fuer Vorleser: die Ueberschrift eines Bereichs, den die Reiter schon nennen */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bereiche einer Seite als Reiter (views/subnav.php, initSubnav in ui.js): Links mit ?tab=, der aktive traegt
   aria-current. Ohne JavaScript laedt jeder Link die Seite mit dem gewaehlten Bereich. */
.subnav { display: flex; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid #1B2126; }
a.tab { display: inline-flex; align-items: center; margin-bottom: -1px; }
a.tab:hover { color: #E8EAEC; }
.tab[aria-current="true"] { border-bottom-color: #FFAA00; color: #E8EAEC; }

/* Ansichten waehlen: Dialog mit den Vorschauen, die der Server gerade rechnet. Gleiche
   Sprache wie die Einfuehrung, nur breiter: vier Panels nebeneinander lesen sich nur
   gross. Flaechen trennt eine 1px Rasterluecke, kein Schatten. */
.vp {
  position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center;
  padding: 10px; background: rgba(8,9,10,0.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.vp-box {
  display: flex; flex-direction: column; width: min(1180px, 100%); max-height: calc(100vh - 20px);
  background: #0B0D0F; border: 1px solid #1B2126; border-radius: 3px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9);
}
.vp-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border-bottom: 1px solid #1B2126; }
.vp-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr; gap: 1px; background: #1B2126; }
.vp-tile { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #0B0D0F; }
.vp-screen { padding: 8px; background: linear-gradient(#22282D,#15191C); border-radius: 3px; }
.vp-screen > div { display: flex; justify-content: center; background: #050607; border-radius: 1px; overflow: hidden; }
.vp-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #1B2126; }
@media (min-width: 900px) {
  .vp { padding: 24px; }
  .vp-body { grid-template-columns: 1fr 1fr; }
  .vp-head, .vp-foot { padding: 16px 20px; }
}