/* LS-Terminal – Fahrzeugterminal-Optik, Nachtmodus als Standard
   Markenpalette (Nutzerwunsch 4. Oktober 2026): #B3C719 Lime, #66721F Oliv, #FFFFFF, #202020, #EBECE3, #47494C.
   Die Grundwerte hier sind die Vorlage „Default“. Flächen-Zwischentöne sind Mischungen der Palettenfarben;
   fest eingetragene Farben der übrigen Vorlagen wurden mit tools/brand-colors.js auf die Palette abgebildet.
   Erweiterte Helferfarben: #007AFF Blau, #FF9500 Orange (Blau- und Orangetöne darauf abgebildet).
   Übrige Signalfarben (Grün, Rot, Lila, Gelb) bleiben eigenständig. */
:root {
  /* Bewegung: kräftige Kurven statt der schwachen Standard-Easings */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --brand-lime: #B3C719;
  --brand-olive: #66721F;
  --brand-white: #FFFFFF;
  --brand-black: #202020;
  --brand-paper: #EBECE3;
  --brand-grey: #47494C;
  --helper-blue: #007AFF;
  --helper-orange: #FF9500;
  --helper-red: #FF3B30;    /* passend zu Blau/Orange (gleiche Systemfarben-Familie) */
  --helper-violet: #AF52DE;
  /* Tastenfarben im Editor (Schlüssel bleiben wegen gespeicherter Profile: neutral, green, blue, amber, red, purple) */
  --key-neutral: var(--muted);
  --key-green: var(--brand-lime);
  --key-blue: var(--helper-blue);
  --key-amber: var(--helper-orange);
  --key-red: var(--helper-red);
  --key-purple: var(--helper-violet);
  --bg: var(--brand-black);
  --panel: color-mix(in srgb, var(--brand-grey) 25%, var(--brand-black));
  --panel-2: color-mix(in srgb, var(--brand-grey) 45%, var(--brand-black));
  --line: var(--brand-grey);
  --text: var(--brand-white);
  --muted: color-mix(in srgb, var(--brand-paper) 55%, var(--brand-grey));
  --accent: var(--brand-lime);
  --accent-ink: var(--brand-black);
  --green: #46d68c;
  --blue: var(--helper-blue);
  --amber: var(--helper-orange);
  --red: var(--helper-red);
  --purple: var(--helper-violet);
  --neutral: var(--muted);
  --lamp-off: color-mix(in srgb, var(--brand-grey) 45%, var(--brand-black));
  --shadow: none;
  --radius: 6px;
  --chip-in: 6px; /* Innenradius der Knöpfe in Karten-Chips (Arbeitsbreite, Spurwahl) */
  --chip-r: calc(var(--chip-in) + 4px); /* Radius der Karten-Chips = innen + 4 px Rand */
  --gap: 12px;
  --accent-text: var(--accent);
  --accent-line: var(--accent);
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-system);
  --font-num: var(--font-system);
  --key-min: 210px;
  --key-h: 124px; /* alle Tasten gleich hoch, auch eigene Seiten (Nutzerwunsch 11.10.2026) */
  color-scheme: dark;
}
:root[data-theme="day"] {
  --bg: var(--brand-paper);
  --panel: var(--brand-white);
  --panel-2: color-mix(in srgb, var(--brand-paper) 50%, var(--brand-white));
  --line: color-mix(in srgb, var(--brand-grey) 20%, var(--brand-paper));
  --text: var(--brand-black);
  --muted: var(--brand-grey);
  --accent-text: var(--brand-olive); /* Lime auf Hell ist nicht lesbar */
  --green: #129a55;
  --blue: var(--helper-blue);
  --amber: var(--helper-orange);
  --red: var(--helper-red);
  --purple: var(--helper-violet);
  --key-green: var(--brand-olive); /* Lime ist auf Hell zu schwach */
  --key-neutral: var(--muted);
  --neutral: var(--muted);
  --lamp-off: var(--brand-paper);
  --shadow: none;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* Browser-Gesten sperren: touch-action wirkt auf alle Kinder (Schnittmenge mit den Vorfahren) –
   kein Doppeltipp-Zoom, kein Zoomen mit zwei Fingern. Karten/GPS setzen selbst "none" und zoomen eigenständig. */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg image { -webkit-user-drag: none; user-drag: none; }
/* Schrift: nur zwei Schnitte von Inter – Regular 400 für Text/Beschriftung, Semibold 600 für Werte/Hervorhebung.
   Browser-Standard „bold“ (700) gibt es dann nicht mehr. */
b, strong, h1, h2, h3, h4, h5, h6, th, dt, legend, optgroup { font-weight: 600; }
code, kbd, pre, samp { font-family: var(--font); } /* auch Links/Debug-Ausgaben in Inter statt Monospace */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iPad: kein Kontextmenü beim langen Drücken */
  touch-action: pan-x pan-y;     /* kein Zoom durch Doppeltippen/zwei Finger, Tasten reagieren sofort */
  overscroll-behavior: none;     /* Seite federt nicht nach */
  overflow: hidden;
}
button { font: inherit; color: inherit; padding: 1px 6px; } /* fester Innenabstand: Safari (iPad/iPhone) setzt sonst 0 1em, dann laufen Icons in 40-px-Knöpfen nach rechts */
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }

.terminal {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Statuszeile ---------- */
.status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  min-height: 56px;
}
.status__left, .status__right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.status__right { justify-content: flex-end; }
.brand { font-weight: 600; letter-spacing: .08em; color: var(--accent-text); }
/* Logo statt Schriftzug (Nutzerwunsch 15.10.2026); Name als Alternativtext */
.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; width: 34px; height: 34px; border-radius: 24%; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.vehicle { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat { white-space: nowrap; font-size: 15px; }
.stat small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-weight: 600; font-family: var(--font-num); }
.stat--money { color: var(--muted); }

.conn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn[data-state="game"] i { background: var(--green); box-shadow: 0 0 10px var(--green); }
.conn[data-state="demo"] i { background: var(--amber); }
.conn[data-state="offline"] i { background: var(--red); }
/* Verbindungs-Pille erscheint nur kurz (beim Start und bei jedem Wechsel), dann blendet sie aus;
   den Dauerzustand zeigt der Rahmen um das Display (Nutzerwunsch 9.10.2026) */
/* Ein- und Ausblenden gleich (Pille und Rahmen je 400 ms), Nutzerwunsch: wirkt ruhiger */
.conn { transition: opacity 400ms var(--ease-in-out); }
.conn:not(.is-shown) { opacity: 0; pointer-events: none; }
.conn-frame {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  --frame-w: 4px; --frame-c: var(--red);
  box-shadow: inset 0 0 0 var(--frame-w) var(--frame-c);
  transition: box-shadow 400ms var(--ease-in-out);
}
.conn-frame[data-state="init"] { --frame-w: 0px; } /* vor der ersten Meldung: Rahmen läuft von 0 ein */
.conn-frame[data-state="demo"] { --frame-c: var(--amber); }
.conn-frame[data-state="game"] { --frame-c: var(--green); }
.conn-frame[data-state="game-done"] { --frame-c: var(--green); --frame-w: 0px; }
.conn-frame[data-state="demo-done"] { --frame-c: var(--amber); --frame-w: 0px; }

.icon-btn {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; transition: transform 140ms var(--ease-out);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(.96); }

/* ---------- Views ---------- */
.views { min-height: 0; padding: 0 16px; position: relative; }
/* Keine Spieldaten (kein Spielstand geladen, Spiel aus, Bridge weg) */
.nodata {
  position: absolute; inset: 0 16px; z-index: 30; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px);
}
.nodata[hidden] { display: none; }
.nodata__box { max-width: 460px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.nodata__icon { width: 48px; height: 48px; color: var(--accent); }
.nodata h2 { margin: 0; font-size: 1.35rem; }
.nodata p { margin: 0; color: var(--muted); line-height: 1.5; }
.nodata .nodata__hint { margin-top: 6px; font-size: .9rem; padding-top: 12px; border-top: 1px solid var(--line); }
.view { height: 100%; min-height: 0; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
}
.panel__off {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-radius: inherit; color: var(--muted); font-size: 20px; font-weight: 600;
}

/* ---------- Fahren ---------- */
.view--drive { position: relative; overflow-x: clip; } /* Inhalt von der Kopfzeile bis zur Menüleiste; die Seitenpunkte schweben darüber */
:is(.drive-layout, .board, #isoPanel, #isoShow, .dbl-stage) { touch-action: pan-y; } /* waagerecht wischt die Seite (pager.js), senkrecht scrollt */
.drive-layout { height: 100%; min-height: 0; }
.drive-classic {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap);
}
.gauge-panel { display: grid; place-items: center; padding: 12px; min-height: 0; }
.gauge { width: 100%; height: 100%; max-height: 100%; grid-area: 1 / 1; }
.gauge__track { stroke: var(--lamp-off); stroke-width: 14; }
.gauge__value { stroke: var(--accent-line); stroke-width: 14; transition: stroke-dasharray .12s linear; }
.gauge__tick { stroke: var(--muted); stroke-width: 1.5; }
.gauge__tick--major { stroke: var(--text); stroke-width: 2.5; }
.gauge__label { fill: var(--muted); stroke: none; font: 600 13px var(--font-num); text-anchor: middle; dominant-baseline: middle; }
.gauge__cruise path { fill: var(--blue); stroke: none; }
.gauge__cruise { transition: opacity .2s; }
.gauge__center { grid-area: 1 / 1; text-align: center; pointer-events: none; }
.gauge__speed { font-family: var(--font-num); font-size: clamp(56px, 11vh, 120px); font-weight: 600; line-height: .95; letter-spacing: -.02em; }
.gauge__unit { color: var(--muted); font-size: 16px; margin-top: 2px; }
.gauge__gear {
  margin-top: 14px; display: inline-flex; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-weight: 600; font-size: 20px;
}
.gauge__gear span { padding: 4px 12px; background: var(--panel-2); }
.gauge__gear span:first-child { color: var(--accent-text); }

.drive-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.tile { padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 0; }
.tile__head { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.tile__head b { font-family: var(--font-num); color: var(--text); font-size: 28px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.tile__head small { font-size: 14px; color: var(--muted); font-weight: 400; }
.tile__foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }

.segbar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 26px; }
.segbar i { border-radius: 3px; background: var(--lamp-off); }
.segbar i.on { background: var(--green); }
.segbar i.on.warn { background: var(--amber); }
.segbar i.on.crit { background: var(--red); }


.tile--cruise .cruise__value { font-family: var(--font-num); font-size: 40px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; color: var(--muted); }
.tile--cruise .cruise__value small { font-size: 15px; font-weight: 400; }
.tile--cruise.active .cruise__value { color: var(--blue); }
.tile--cruise.active #cruiseState { color: var(--blue); }

.lamps {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px;
  padding: 10px;
}
.lamp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center;
}
.lamp svg { width: 30px; height: 30px; color: var(--lamp-off); stroke: color-mix(in srgb, var(--muted) 45%, transparent); transition: color .15s, stroke .15s, filter .15s; }
.lamp.on { color: var(--text); }
.lamp.on svg { stroke: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
.lamp.blink.on svg { animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { stroke: color-mix(in srgb, var(--muted) 45%, transparent); filter: none; } }

/* ---------- Tasten ---------- */
.board-bar { margin-bottom: 4px; }
.mods-filter-slot:empty { display: none; } /* Schalter „Nur aktive“ der Mod-Seiten, rechts auf Höhe der Seiten-Reiter */

/* ---------- Reiterleiste (Nutzerwunsch 11.10.2026): Navigation und Filter unterscheiden sich ----------
   Links Reiter = wohin (Seite, Arbeitsart): Text, aktiv mit Akzentstrich, durchgehende Linie darunter.
   Rechts schlichte Bedienelemente = wie (Sortierung als Textknopf mit Menü, Filter als Schalter), ohne Fläche. */
.tabbar { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; align-self: stretch; min-width: 0; max-width: 100%; }
.tabs button {
  position: relative; min-height: 48px; padding: 0 14px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tabs button:first-child { padding-left: 4px; }
.tabs button:first-child::after { left: 2px; }
.tabbar__end { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 4px 0; }
.tabbar__switch { min-height: 40px; font-size: 14px; font-weight: 600; color: var(--muted); }
.tabbar__switch small { font-family: var(--font-num); font-weight: 500; margin-left: 4px; }
.tabbar__switch input { width: 40px; height: 24px; }
.tabbar__switch input::after { width: 16px; height: 16px; }
.tabbar__switch input:checked::after { transform: translateX(16px); }
.tabbar__end .btn { min-height: 40px; }
.sort { position: relative; }
.sort__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sort__btn svg { width: 16px; height: 16px; color: var(--muted); }
.sort__btn .sort__chev { transition: transform 140ms var(--ease-out, ease-out); }
.sort__btn[aria-expanded="true"] .sort__chev { transform: rotate(180deg); }
.sort__menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px; padding: 6px; display: grid;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.sort__menu[hidden] { display: none; }
.sort__menu button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.sort__menu button:hover { background: var(--panel-2, rgba(127, 127, 127, .12)); }
.sort__menu button svg { width: 16px; height: 16px; color: var(--accent-text); visibility: hidden; }
.sort__menu button[aria-checked="true"] svg { visibility: visible; }

.board {
  display: grid; gap: var(--gap); align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(var(--key-min), 1fr));
  grid-auto-rows: minmax(var(--key-h), auto);
  overflow-y: auto; overflow-x: hidden; padding: 4px 2px 8px;
}
.key {
  --c: var(--neutral);
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 16px; border-radius: var(--radius); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform 140ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
  touch-action: manipulation;
}
.key::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: var(--lamp-off); transition: background .15s, box-shadow .15s;
}
.key.on::before { background: var(--c); box-shadow: 0 0 12px var(--c); }
.key.on { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--panel)); }
/* Makro läuft (wartet auf Strecke, Vorgewende oder Zustand): pulsierender Rahmen, nochmal tippen bricht ab */
.key.running { border-color: var(--blue); animation: keyrun 1.2s ease-in-out infinite; }
@keyframes keyrun { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .key.running { animation: none; } }
.key svg { width: 34px; height: 34px; color: var(--c); }
.key__label { font-size: var(--key-font, 18px); font-weight: 600; line-height: 1.2; }
.key__hint { font-size: 12px; color: var(--muted); margin-top: 4px; font-family: var(--font-num); }
.key:active, .key.pressed { transform: scale(.97); background: var(--panel-2); }
.key--add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); gap: 8px; }
.key--add svg { color: var(--muted); }

/* Bearbeiten: nur Stift ohne Fläche (Nutzerwunsch 11.10.2026); alternativ eine Taste lange drücken */
.board-edit {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer; transition: color 150ms ease, transform 140ms var(--ease-out);
}
.board-edit svg { width: 22px; height: 22px; }
.board-edit:hover, .board-edit:focus-visible { color: var(--text); }
.board-edit:active { transform: scale(.92); }
/* Langes Drücken: Taste sinkt während des Haltens langsam ein, dann öffnet die Bearbeitung (wie iOS) */
.key.holding { transform: scale(.93); transition: transform 500ms var(--ease-out); }

.board.editing .key:not(.key--add) { animation: wiggle .5s ease-in-out infinite alternate; }
.board.editing .key:not(.key--add)::after {
  content: "Bearbeiten"; position: absolute; right: 10px; bottom: 10px; font-size: 11px;
  padding: 3px 8px; border-radius: 6px; background: var(--panel-2); color: var(--muted);
}
.cell { position: relative; display: grid; }
/* Tasten-Seiten „Spiel“ und „Mods“ (modkeys.js): Trenner je Mod über die ganze Breite, gebaut wie die Kartenköpfe
   im Planer (.plan-card__head/.plan-card__toggle, Nutzerwunsch 11.10.2026); Ton = Tastenfarbe der Seite */
.mods-sep { --tone: var(--key-green); grid-column: 1 / -1; margin: 8px 0 0; }
.board--game .mods-sep { --tone: var(--key-blue); }
.mods-sep:first-child { margin-top: 0; }
.mods-sep--dev { --tone: var(--muted); }
/* Alle Tasten (eigene Seiten, „Spiel“, „Mods“) gleich gebaut und gleich hoch – sauberes Raster: oben Symbol und rechts
   daneben die Belegung als dezente Kappen, darunter der Name in höchstens zwei Zeilen, darunter ggf. der Zustand
   (Nutzerwunsch 11.10.2026) */
.board { grid-auto-rows: var(--key-h); }
.board--mods { grid-auto-rows: auto; } /* Trenner nur so hoch wie nötig */
.board--mods .cell { height: var(--key-h); }
.board .key:not(.key--add) { justify-content: flex-start; gap: 10px; padding: 12px 14px; overflow: hidden; }
.board .key:not(.key--add) svg { width: 26px; height: 26px; flex: none; }
.board .key__label { margin-top: auto; /* unten bündig, höchstens zwei Zeilen, sonst … (Nutzerwunsch 12.10.2026) */ font-size: var(--key-font, 15px); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board .key__hint { margin-top: -6px; }
.board .key__hint:empty { display: none; }
.board.editing .key__caps { visibility: hidden; } /* Platz für die Verschiebe-Knöpfe */
.key__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
/* Spieltaste dezent (Nutzerwunsch 11.10.2026): flache Kappen ohne Fläche, nur feiner Rand, gedämpfte Schrift */
.key__caps { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; color: var(--muted); font: 400 11px/1 var(--font-num); white-space: nowrap; }
.key__caps kbd { min-width: 18px; padding: 3px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); background: none; color: var(--muted); font: inherit; text-align: center; }
.key__caps i { font-style: normal; opacity: .7; }
:root[data-hints="off"] .key__caps { display: none; }
@media (max-width: 520px) {
  .mods-sep .plan-card__toggle { grid-template-columns: 24px minmax(0, 1fr) 20px; } .mods-sep .plan-card__toggle span { display: none; }
  .board--mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* viele Tasten: zwei je Reihe */
  .board--mods .cell { height: 100px; }
}
.key--mod { --c: var(--key-green); }
.key--game { --c: var(--key-blue); }
.key--mod .key__label { overflow-wrap: anywhere; }
.key--mod svg { color: var(--muted); } /* Symbole auf „Spiel“/„Mods“ grau (Nutzerwunsch 11.10.2026) */
.key--mod.is-off { opacity: .45; }
.mods-empty { grid-column: 1 / -1; display: grid; gap: 6px; place-content: center; text-align: center; padding: 48px 24px; }
.key__move { position: absolute; top: 12px; right: 10px; display: flex; gap: 4px; }
.key__move button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.key__move button:disabled { opacity: .3; cursor: default; }
.key__move svg { width: 18px; height: 18px; color: var(--muted); }
@keyframes wiggle { from { transform: rotate(-.4deg); } to { transform: rotate(.4deg); } }
@media (prefers-reduced-motion: reduce) { .board.editing .key { animation: none !important; } }

/* ---------- Buttons ---------- */
.btn {
  min-height: 46px; padding: 0 18px; border-radius: 10px; cursor: pointer; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: transform 140ms var(--ease-out);
}
.btn--ghost { background: transparent; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; vertical-align: middle; }

/* ---------- Platzhalter / System ---------- */
/* Einstellungen wie eine Systemeinstellung (Nutzerwunsch 5.10.2026): links Bereiche, rechts Zeilen –
   Name und Erklärung links, Bedienelement rechts, feine Trennlinien. Handy: Bereiche oben, umbrechend. */
.view--settings { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.set-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-y: auto; padding: 4px 0; }
.set-nav__title { font-size: 12px; color: var(--muted); padding: 14px 12px 6px; }
.set-nav__title:first-child { padding-top: 4px; }
.set-nav button {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.set-nav button svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .set-nav button:hover { background: var(--panel); } }
.set-nav button[aria-current="true"] { background: var(--panel-2); font-weight: 600; }
.set-nav button[aria-current="true"] svg { color: var(--accent-text); }
.set-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 8px 28px 24px; }
.set-sec[hidden] { display: none; }
.set-sec h2 { margin: 18px 0 6px; font-size: 18px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); min-height: 64px; }
.set-row:last-of-type { border-bottom: 0; }
.set-row--stack { display: grid; justify-content: stretch; align-items: start; }
.set-label { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.set-label b { font-weight: 600; font-size: 15px; }
.set-label small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.set-value { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.set-row--stack .set-value { text-align: left; }
.set-value code { font-size: 14px; color: var(--accent-text); }
.set-path { word-break: break-all; color: var(--muted) !important; font-weight: 400; }
/* kompakte Umschalter und Auswahlliste rechts in der Zeile */
.set-seg { flex: none; }
.set-seg button { flex: none; min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
/* Auswahl nur mit Icons (Tag/Nacht): quadratische Felder, auch am Handy nicht gestreckt */
.set-seg--icons button { width: 44px; padding: 0; display: grid; place-items: center; }
.set-seg--icons svg { width: 20px; height: 20px; }
.set-select {
  min-height: 40px; min-width: 200px; max-width: 100%; padding: 0 36px 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A1A29D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text); font-size: 15px; appearance: none; cursor: pointer;
}
.set-row.switch { cursor: pointer; }
.set-row.switch input { order: 2; }
.hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.set--raw pre { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); user-select: text; white-space: pre-wrap; word-break: break-all; }
@media (max-width: 760px) {
  .settings { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .set-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 0; }
  .set-nav__title { display: none; }
  .set-nav button { flex: 1 1 auto; justify-content: center; min-height: 40px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
  .set-nav button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .set-nav button[aria-current="true"] svg { color: var(--accent-ink); }
  .set-main { padding: 4px 16px 20px; }
  .set-seg:not(.set-seg--icons) { flex: 1 1 100%; }
  .set-seg button { flex: 1; padding: 0 8px; }
  .set-select { flex: 1 1 100%; }
  .set-sec .skins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }

.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fonts button {
  display: grid; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
}
.fonts button b { font-size: 22px; font-weight: 600; line-height: 1.2; }
.fonts button small { font-family: var(--font); color: var(--muted); font-size: 12px; }
.fonts button[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }

.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.switch input { appearance: none; width: 48px; height: 28px; border-radius: 14px; background: var(--lamp-off); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(20px); background: var(--accent-ink); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch small { color: var(--muted); margin-left: 6px; }

.sets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sets li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.sets li div { flex: 1; min-width: 0; }
.sets li b { display: block; }
.sets li span { color: var(--muted); font-size: 13px; }

:root[data-keysize="s"] { --key-min: 160px; --key-h: 104px; --key-font: 14px; }
:root[data-keysize="l"] { --key-min: 270px; --key-h: 160px; --key-font: 18px; }
:root[data-hints="off"] .key__hint { display: none !important; }

/* ---------- Dock ---------- */
.dock { display: flex; gap: 8px; padding: 12px 16px 14px; }
.dock__item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-weight: 600; cursor: pointer;
  touch-action: manipulation; transition: transform 140ms var(--ease-out);
}
.dock__item:active { transform: scale(.97); }
.dock__item svg { width: 24px; height: 24px; }
/* Einstellungen: nur Zahnrad ganz rechts, durch eine Linie von den Ansichten getrennt */
.dock__sep { flex: none; width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
.dock__item--icon { flex: none; width: 64px; }
.dock__item { min-width: 0; }
/* Schmale Geräte: Dock darf nie breiter als der Schirm werden (8 Punkte + Zahnrad) */
@media (max-width: 600px) {
  .dock { gap: 4px; padding: 8px; }
  .dock__item { padding: 0; }
  .dock__item--icon { flex: 1; width: auto; }
  .dock__sep { display: none; }
}
.dock__item[aria-current="page"] { color: var(--text); border-color: var(--accent-line); box-shadow: inset 0 -3px 0 var(--accent-line); }

/* ---------- Dialog ---------- */
.dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
}
.dialog[open] { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .dialog[open] { opacity: 0; transform: scale(.96); } }
.dialog::backdrop { background: rgba(0,0,0,.6); transition: opacity 200ms ease; }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.dialog__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.dialog__head h2 { margin: 0; font-size: 20px; }
.dialog__body { padding: 4px 20px 16px; overflow-y: auto; display: grid; gap: 18px; }
.dialog__foot { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.spacer { flex: 1; }
.field { display: grid; gap: 8px; }
.field > span { font-weight: 600; font-size: 14px; }
.field small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.field input, .field select, .steps input, .steps select {
  min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; user-select: text;
}
.field input:focus-visible, .field select:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
.key:focus-visible, .dock__item:focus-visible, .tabs button:focus-visible, .sort__btn:focus-visible, .sort__menu button:focus-visible, .swatches button:focus-visible, .icon-picker button:focus-visible, .seg button:focus-visible, .fonts button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.swatches, .icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 3px var(--panel); }
.swatches button[aria-pressed="true"] { border-color: var(--text); }
.icon-picker { max-height: 268px; overflow-y: auto; align-content: flex-start; padding: 2px; }
#cfgIconPack { margin-bottom: 8px; }
.icon-picker button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.icon-picker button svg { width: 24px; height: 24px; }
.icon-picker button[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-text); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 8px; counter-increment: step; }
.steps li::before { content: counter(step); color: var(--muted); font-size: 13px; text-align: center; }
.steps .rec { min-width: 120px; }
.steps .rec.listening { background: var(--red); color: #FFFFFF; border-color: var(--red); }
.steps .wait { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.steps .wait input { width: 110px; }
.steps__add { display: flex; gap: 8px; }
.step-del { width: 46px; padding: 0; display: grid; place-items: center; }

/* ---------- Toast ---------- */
/* Meldungen wie die Kartenfelder im GPS (Nutzerwunsch 11.10.2026): dunkles Glas, mehr Rand um die Schrift, fester
   Abstand über der Menüleiste (über den Seitenpunkten) */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock-h, 64px) + var(--sa-b, 0px) + 80px); transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  max-width: min(560px, calc(100vw - 32px)); padding: 14px 22px; border-radius: var(--wk-glass-r, 12px); border: 0;
  background: rgba(30,30,30,.88); color: #F1F2EC; box-shadow: 0 6px 24px rgba(0,0,0,.35); text-align: center; line-height: 1.4;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  font-weight: 600; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease;
}
/* rein zügig, raus schneller */
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }

/* ---------- Kleinere Displays ---------- */
@media (max-width: 860px), (max-height: 560px) and (orientation: portrait) {
  .drive-classic { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1fr) auto auto; overflow-y: auto; }
  .drive-side { grid-template-rows: none; }
  .status { grid-template-columns: minmax(0, 1fr) auto; }
  .status__center { display: none; }
  .stat--money, .vehicle { display: none; }
  .dock__item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* nur optisch weg, Name bleibt */
}
@media (max-width: 860px) {
  .views { overflow-y: auto; }
}

/* ---------- Rückfrage ---------- */
.dialog--small { width: min(440px, calc(100vw - 32px)); }
.ask__text { margin: 0; color: var(--muted); line-height: 1.5; white-space: pre-line; }
.ask__text:empty { display: none; }
.btn--danger.btn--solid { background: var(--red); color: #FFFFFF; border-color: var(--red); }

/* ---------- Symbol-Sets ---------- */
.ico { display: inline-block; line-height: 1; font-size: 24px; font-style: normal; }
.key .ico { font-size: 34px; color: var(--c); }
.icon-picker .ico { font-size: 24px; }

/* ---------- Monitor ---------- */
:root { --map-bg: var(--panel); --field-free: var(--brand-grey); --field-own: var(--brand-lime); --field-other: var(--helper-blue); --map-road: var(--panel-2); }
:root[data-theme="day"] { --map-bg: var(--brand-paper); --field-free: color-mix(in srgb, var(--brand-grey) 30%, var(--brand-paper)); --field-own: var(--brand-olive); --field-other: var(--helper-blue); --map-road: var(--brand-white); }
.view--agri { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); }

/* ---------- Arbeitsplaner (web/planner.js) ---------- */
.view--plan { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 4px 4px 0; }
.plan-head h2 { margin: 0 0 2px; font-size: 22px; }
.plan-head .muted { font-size: 13px; }
.plan-body { overflow-y: auto; min-height: 0; padding-bottom: 8px; }
/* Je Arbeitsart eine Karte mit eingefärbtem Kopf, darin Feld-Kacheln im Raster (Nutzerwunsch 5.10.2026:
   Trenner verschmolzen in der Liste mit den Feldern) */
.plan-body { display: grid; gap: var(--gap); align-content: start; }
/* Feld in Arbeit (live gemessen): Kopf mit Punkt, großer Fortschritt der laufenden Arbeit, offene Arbeiten als Chips */
/* Feld in Arbeit: eigene Akzentfarbe Violett, damit es sich vom überall genutzten Lime abhebt (Nutzerwunsch 11.10.2026) */
.plan-live { --live: #B2A1FF; display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: var(--radius); background: var(--live); border: 0;
  color: #1B1530; --text: #1B1530; --muted: rgba(27,21,48,.72); --line: rgba(27,21,48,.18); --lamp-off: rgba(27,21,48,.16); --accent-text: #1B1530; }
.plan-live .plan-live__dot { background: #1B1530; }
.plan-live .fill__bar i, .plan-live .fill__bar b { background: #1B1530; }
.plan-live .plan-chip { background: rgba(255,255,255,.35); color: #1B1530; }
.plan-live .plan-chip svg { color: #1B1530; }
.plan-live__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; align-content: center; }
.plan-live__head b { font: 600 20px var(--font-num); }
.plan-live__head > span:last-child { color: var(--muted); font-size: 14px; }
.plan-live__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); align-self: center; animation: plan-live-pulse 1.6s var(--ease-in-out) infinite; }
@keyframes plan-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .plan-live__dot { animation: none; } }
.plan-live__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 12px; }
.plan-live__what { display: grid; font-weight: 600; font-size: 16px; }
.plan-live__what small { color: var(--muted); font-size: 13px; font-weight: 400; }
.plan-live__main > b { font: 600 32px/1 var(--font-num); color: var(--accent-text); text-align: right; }
.plan-live__rest { grid-column: 1 / -1; order: 1; color: var(--muted); font-size: 13px; }
.plan-live__main .fill__bar { grid-column: 1 / -1; height: 10px; }
.plan-live__tasks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-live__tasks .plan-chip svg { width: 18px; height: 18px; color: var(--tone); }
.plan-live__tasks .plan-chip small { color: var(--muted); font-weight: 400; }
.plan-live__none { margin: 0; color: var(--muted); font-size: 14px; }
.plan-card { --tone: var(--muted); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: clip; }
:is(.plan-card, .plan-chip)[data-tone="lime"] { --tone: var(--accent-text); }
:is(.plan-card, .plan-chip)[data-tone="blue"] { --tone: var(--blue); }
:is(.plan-card, .plan-chip)[data-tone="amber"] { --tone: var(--amber); }
:is(.plan-card, .plan-chip)[data-tone="red"] { --tone: var(--red); }
/* Ton-Farben am Tag: eigene klare, dunklere Farbtöne statt mit Schwarz abgemischt (wirkte schmutzig, Nutzerwunsch
   11.10.2026); Schrift damit ≥ 4,5:1 auf Weiß. Gilt für Feldnummern, Symbole und Tönungen. */
:root[data-theme="day"] :is(.plan-card, .plan-chip)[data-tone="amber"] { --tone: #B45309; }
:root[data-theme="day"] :is(.plan-card, .plan-chip)[data-tone="red"] { --tone: #C62828; }
:root[data-theme="day"] :is(.plan-card, .plan-chip)[data-tone="blue"] { --tone: #0062CC; }
:root[data-skin="default"][data-theme="day"] :is(.plan-card, .plan-chip)[data-tone="blue"] { --tone: #6B4BC2; }
.plan-card__head {
  margin: 0; font-size: 15px;
  background: color-mix(in srgb, var(--tone) 16%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line));
}
.plan-card__head svg { width: 22px; height: 22px; color: var(--tone); }
/* Kopf zuklappbar: ganze Zeile ist der Knopf, Zähler und Fläche bleiben auch zugeklappt sichtbar */
.plan-card__toggle {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 20px; align-items: center; gap: 10px;
  padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.plan-card__head .plan-card__chev { width: 20px; height: 20px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.plan-card__toggle[aria-expanded="false"] .plan-card__chev { transform: rotate(-90deg); }
.plan-card__head b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-card__head span { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* Alle Kacheln gleich hoch (Nutzerwunsch): feste Zeilenhöhe, die Zeile für Mitspieler ist immer reserviert */
.plan-tiles { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 104px; }
.plan-tile {
  position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 2px; padding: 10px 12px 10px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  text-align: left; cursor: pointer; overflow: hidden; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .plan-tile:hover { border-color: color-mix(in srgb, var(--tone) 50%, var(--line)); } }
.plan-tile:active { transform: scale(.98); }
.plan-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-tile.busy { border-color: color-mix(in srgb, var(--tone) 60%, var(--line)); background: color-mix(in srgb, var(--tone) 10%, var(--panel-2)); }
.plan-tile__top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.plan-tile__id { font: 600 26px/1.1 var(--font-num); color: var(--tone); }
.plan-tile__pct { font: 600 12px var(--font-num); color: var(--muted); white-space: nowrap; }
.plan-tile__fruit { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.plan-tile__fruit small { color: var(--muted); font-weight: 400; }
.plan-tile__meta { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-tile__foot { display: flex; align-items: end; gap: 6px; min-width: 0; overflow: hidden; }
.plan-tile__who { display: flex; gap: 6px; flex-wrap: nowrap; align-items: end; min-width: 0; overflow: hidden; }
/* „% offen“ als eine Plakette statt Text + Balken */
.plan-badge { flex: none; height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--text); font: 600 12px var(--font-num); white-space: nowrap; }

/* Ansicht „Nach Feld“: ein Feld pro Zeile, nächstes zuerst; im Querformat als Tabelle mit ausgerichteten Zahlen */
.plan-table { display: grid; gap: 6px; align-content: start; }
.plan-row {
  display: grid; grid-template-columns: 56px minmax(160px, 1.2fr) minmax(0, 2fr) 90px; align-items: center; gap: 4px 16px;
  min-height: 60px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid transparent; background: var(--panel-2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 140ms var(--ease-out);
}
.plan-row:active { transform: scale(.99); }
.plan-card :is(.plan-row, .plan-tile) { border-radius: max(0px, calc(var(--radius) - 13px)); } /* Kasten in Kasten: innen = außen − Rand */
/* „Nach Arbeit“ als Tabelle: Feld · Frucht (mit Bearbeitern) · Erledigt · Fläche; Kopfzeile nur einmal oben */
.plan-row--work { grid-template-columns: 56px minmax(0, 1fr) 248px 90px; min-height: 56px; }
/* Fortschritt: Balken 192 px mit „x %“ erledigt, rechts vor der Fläche (Nutzerwunsch 11.10.2026) */
.plan-row__prog { display: grid; grid-template-columns: 192px auto; align-items: center; gap: 10px; }
.plan-row__prog .fill__bar { height: 6px; }
.plan-row__prog .fill__bar b { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--tone); transform: scaleX(var(--p, 0)); transform-origin: left; }
.plan-row__prog > b { font: 600 13px var(--font-num); text-align: right; min-width: 40px; }
/* Feld und Frucht links, Bearbeiter als Chips gleich daneben */
.plan-row__fruit { display: flex !important; align-items: center; gap: 12px; }
.plan-row__fruit > span:first-child { display: grid; min-width: 0; }
.plan-row__fruit .plan-row__who { justify-content: flex-end; flex: none; margin-left: auto; } /* rechts bündig direkt vor dem Balken (Nutzerwunsch 12.10.2026) */
.plan-row--work.plan-row--head { min-height: 20px; }
.plan-card .plan-table { padding: 12px; }
.plan-row__open .plan-badge { height: 28px; }
.plan-row.busy { border-color: var(--accent); }
.plan-row--head { flex: none; min-height: 20px; padding: 0 15px 2px; background: none; cursor: default; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan-row--head:active { transform: none; }
.plan-row--head .num, .plan-row__num { text-align: right; }
.plan-row__num { font: 600 15px var(--font-num); white-space: nowrap; }
.plan-row__id { font: 600 24px/1 var(--font-num); color: var(--accent-text); }
.plan-row__fruit { display: grid; font-weight: 600; min-width: 0; }
.plan-row__fruit small { color: var(--muted); font-size: 12px; font-weight: 400; }
.plan-row__tasks { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.plan-chip { --tone: var(--muted); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--tone) 16%, transparent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.plan-chip svg { width: 16px; height: 16px; color: var(--tone); }
.plan-chip small { font: 600 12px var(--font-num); color: var(--muted); }
.plan-row__who { display: flex; gap: 6px; min-width: 0; overflow: hidden; justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) { .plan-row:not(.plan-row--head):hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } }
/* schmal: Zeile wird zur Karte – Feld links, Frucht und Entfernung oben, Arbeiten darunter */
@media (max-width: 1000px) {
  .plan-row--head { display: none; }
  .plan-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "id fruit fruit" "id tasks tasks"; align-items: start; gap: 6px 12px; padding: 12px; }
  .plan-row__id { grid-area: id; } .plan-row__fruit { grid-area: fruit; } .plan-row__dist { grid-area: dist; }
  .plan-row__tasks { grid-area: tasks; } .plan-row__who { grid-area: who; justify-content: flex-start; }
  .plan-row__area { display: none; }
  .plan-row__who:empty { display: none; }
}
.plan-tile__who .plan-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.plan-who--more { flex: none !important; padding: 0 8px; background: var(--line); color: var(--text); }
.plan-tile__bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--tone); }
.plan-who {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: 13px;
  --who: var(--blue); /* Namens-Chips getönt wie die Arbeits-Chips, Schrift in Textfarbe, Symbol in Farbe – nur „Du“ voll */
  background: color-mix(in srgb, var(--who) 24%, transparent); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.plan-who:not(.self) svg { color: var(--who); }
.plan-who.self { background: var(--accent); color: var(--accent-ink); }
.plan-who.ai { --who: var(--purple); }
.plan-who svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 600px) { .plan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; } }.plan-empty { grid-column: 1 / -1; display: grid; gap: 6px; place-items: center; text-align: center; padding: 48px 16px; color: var(--muted); }
.plan-empty b { color: var(--text); font-size: 18px; }
.map-panel { overflow: hidden; background: var(--map-bg); min-height: 0; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
/* Kartenbild als eigene Ebene unter dem SVG (Monitor und GPS), Position/Zoom per CSS-Transform aus JS.
   Kein will-change: Damit hat Chrome das Bild nicht mehr gezeichnet, sobald die Feld-Polygone darüber lagen. */
.map__img, .gps__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.map__img[hidden], .gps__img[hidden] { display: none; }
canvas.gps__img, canvas.map__img { width: 100%; height: 100%; } /* Zeichenfläche in Panelgröße, Kartenbild wird in JS gezeichnet */
.map.dragging { cursor: grabbing; }
.map__field { stroke: var(--field-free); stroke-width: 1.5; vector-effect: non-scaling-stroke; fill: var(--field-free); fill-opacity: .55; transition: fill-opacity .15s; cursor: pointer; }
.map__field[data-owner="own"] { fill: var(--field-own); stroke: var(--field-own); fill-opacity: .22; }
.map__field[data-owner="other"] { fill: var(--field-other); stroke: var(--field-other); fill-opacity: .2; }
.map__field.selected { fill-opacity: .5; stroke: var(--text); stroke-width: 2.5; }
.has-image .map__field { fill-opacity: .12; }
.has-image .map__field.selected { fill-opacity: .35; }
.map__fieldpin { fill: var(--field-free); stroke: var(--line); vector-effect: non-scaling-stroke; cursor: pointer; }
.map__label { fill: var(--muted); stroke: none; font-family: var(--font-num); font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map__poi rect { fill: var(--panel); stroke: var(--muted); vector-effect: non-scaling-stroke; }
.map__poi text { fill: var(--text); stroke: none; font-family: var(--font); font-weight: 600; pointer-events: none; }
/* Straßennetz und Route zum Feld: Straße durchgezogen, Stücke querfeldein gestrichelt */
.map__roads { fill: none; stroke: var(--helper-blue); stroke-opacity: .55; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; }
.map__route { fill: none; stroke: var(--helper-orange); stroke-width: 6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.map__route--casing { stroke: var(--bg); stroke-width: 10; stroke-opacity: .8; }
.map__route--off { stroke-dasharray: 2 10; stroke-width: 5; }
.map__route-end { fill: var(--helper-orange); stroke: var(--bg); stroke-width: 3; vector-effect: non-scaling-stroke; }
.map-fieldpop__route { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fc-line); }
.map-fieldpop__route small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.map-fieldpop__route .btn { width: 100%; min-height: 40px; }
.map-fieldpop__route .btn.on { background: var(--helper-orange); border-color: var(--helper-orange); color: #202020; }
.map__trail { fill: none; stroke: var(--accent-line); stroke-opacity: .55; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.map__unit { --u: var(--blue); pointer-events: none; }
.map__unit.self { --u: var(--accent); }
.map__unit.ai { --u: var(--purple); }
.map__unit path, .map__unit circle { fill: var(--u); stroke: var(--map-bg); stroke-width: 2; }
.map__unit .halo { fill: var(--u); fill-opacity: .18; stroke: none; }
/* Fahrzeug: Kreis in Spielerfarbe, Maschinensymbol darin (Claas-Paket), Richtungspfeil am Rand */
.map__unit .badge { stroke-width: 2.5; }
.map__unit .hd { stroke-width: 1.5; }
.map__unit .ico { color: var(--brand-white); fill: none; stroke: currentColor; stroke-width: 1.8; } /* Claas/Carbon-Symbole füllen selbst, eigene zeichnen Striche */
.map__unit.self .ico { color: var(--accent-ink); }
.map__unit text { fill: var(--text); stroke: var(--map-bg); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; font: 600 13px var(--font); text-anchor: middle; }
.map__unit text.veh { font: 400 12px var(--font); fill: var(--text); fill-opacity: .82; } /* Traktor unter dem Namen */

/* Oben links: Kartenname | Legende in einer Leiste */
.map-head { position: absolute; left: 12px; top: 12px; right: 76px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; width: max-content; max-width: calc(100% - 88px); padding: 7px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; pointer-events: none; }
.map-title { font-weight: 600; font-size: 14px; padding-right: 14px; border-right: 1px solid var(--line); }
.legend.legend--inline { display: flex; gap: 12px; font-size: 13px; color: var(--muted); }
.legend.legend--inline li { gap: 6px; }
.legend.legend--inline i { width: 14px; height: 10px; }
/* Feld-Info als Einblendung auf der Karte */
.map-fieldpop { position: absolute; left: 12px; top: 60px; }
.map-fieldpop[hidden] { display: none; }
.map-fieldpop__close { width: 36px; height: 36px; margin: -8px -8px -8px 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.map-fieldpop__close svg { width: 16px; height: 16px; }
.map-panel .gps-maptype { right: 12px; bottom: 12px; }
.map-tools { position: absolute; right: 12px; top: 12px; display: grid; gap: 8px; }
.map-tools .icon-btn { width: 48px; height: 48px; }
.map-tools .icon-btn[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-text); }
/* Ebenen-Knopf ohne verfügbares Kartenbild: sichtbar, aber gedämpft */
.icon-btn.is-unavailable { opacity: .45; }
.icon-btn.is-unavailable[aria-pressed="true"] { border-color: var(--line); color: inherit; }
.map-scale { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; font: 600 12px var(--font-num); color: var(--text); text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); pointer-events: none; }
.map-scale i { display: block; height: 6px; border: 2px solid currentColor; border-top: 0; width: 100px; filter: drop-shadow(0 0 2px var(--bg)); }
.map-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--muted); padding: 24px; }
.map-empty b { color: var(--text); font-size: 18px; }

.agri-side { display: grid; grid-template-rows: auto 1fr; gap: var(--gap); min-height: 0; overflow-y: auto; }
.agri-card { padding: 16px; display: grid; gap: 12px; align-content: start; }
.agri-card h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.units { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Hof-Filter über der Liste: bricht um statt seitlich zu scrollen */
/* Trenner je Hof in der Liste (statt Hof-Filter, Nutzerwunsch 11.10.2026) */
.units-sep { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 2px 2px; font-size: 13px; font-weight: 600; color: var(--text); }
.units-sep:first-child { padding-top: 0; }
.units-sep__n { font-family: var(--font-num); font-weight: 500; color: var(--muted); }
.units button {
  width: 100%; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; min-height: 52px;
}
.units button[aria-pressed="true"] { border-color: var(--accent-line); }
.units .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.units .dot.self { background: var(--accent); }
.units .dot.ai { background: var(--purple); }
.units .dot.foot { border-radius: 2px; }
.units b { display: block; font-size: 15px; }
.units small { display: block; color: var(--muted); font-size: 12px; }
.units .spd { font-family: var(--font-num); font-weight: 600; color: var(--muted); font-size: 14px; }
.field-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.field-kv dt { color: var(--muted); }
.field-kv dd { margin: 0; font-weight: 600; text-align: right; font-family: var(--font-num); }
.field-big { font-size: 28px; font-weight: 600; font-family: var(--font-num); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { width: 18px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; }

@media (max-width: 1000px) {
  .view--agri { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 1fr) auto; overflow-y: auto; }
  .agri-side { grid-template-rows: none; overflow: visible; }
}

/* ---------- Tasten-Konfigurator ---------- */
.board-normal { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); height: 100%; min-height: 0; }
/* Seitenpunkte unten wie bei Fahren; Platz darunter, damit die letzte Tastenreihe frei bleibt */
.page-dots[hidden] { display: none; }
.board-normal:has(.page-dots:not([hidden])) .board {
  padding-bottom: 64px; /* Platz unter der letzten Reihe für die Seitenpunkte (16 px + Kapsel) */
  /* Hinweis, dass das Raster weiterscrollt, statt einer hart abgeschnittenen Reihe unter den Seitenpunkten */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.board .key { touch-action: pan-y; } /* waagerechtes Wischen bleibt beim Blättern, senkrecht scrollt */
.view--board { display: block; }
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gap); height: 100%; min-height: 0; }
.cfg-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.cfg-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; }
.cfg-top > .btn { justify-self: end; }
.cfg-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.cfg-label svg { width: 18px; height: 18px; }
.cfg-profile { position: relative; justify-self: start; }
.cfg-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 240px; min-height: 44px; padding: 0 8px 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; cursor: pointer; }
.cfg-select svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--panel-2); }
.cfg-select[aria-expanded="true"] svg { transform: rotate(180deg); background: var(--accent); color: var(--accent-ink); }
.cfg-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(420px, 80vw); padding: 10px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.35); display: grid; gap: 10px; }
.cfg-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cfg-plist li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 36px); gap: 4px; align-items: center; }
.cfg-pname { display: grid; text-align: left; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--bg); font-weight: 600; cursor: pointer; min-height: 44px; }
.cfg-pname small { color: var(--muted); font-weight: 400; font-size: 12px; }
.cfg-plist li.active .cfg-pname { background: var(--accent); color: var(--accent-ink); }
.cfg-plist li.active .cfg-pname small { color: inherit; opacity: .75; }
.cfg-picon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--bg); color: var(--muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cfg-picon:hover { color: var(--text); } }
.cfg-picon svg { width: 17px; height: 17px; }
.cfg-pfoot { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cfg-pfoot .btn { border-radius: 999px; }
.cfg-pfoot .btn svg { width: 20px; height: 20px; }

.cfg-layers { text-align: center; }
.cfg-layers .cfg-label { justify-content: center; }
.cfg-layerbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cfg-top > * { min-width: 0; }
.cfg-layername { width: min(190px, 100%); min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-weight: 600; text-align: center; user-select: text; }
.cfg-dots { display: flex; gap: 6px; }
.cfg-dots button, .cfg-dot-add { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-weight: 600; cursor: pointer; display: grid; place-items: center; padding: 0; }
.cfg-dots button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cfg-dot-add { color: var(--muted); border-style: dashed; }
.cfg-dot-add svg { width: 18px; height: 18px; }

.cfg-stage { display: grid; place-items: center; overflow: auto; min-height: 0; padding: 8px; }
.cfg-device {
  display: grid; grid-template-columns: repeat(4, minmax(0, 112px)); grid-auto-rows: 100px; gap: 8px; max-width: 100%;
  padding: 14px; border-radius: 22px; background: #242424; box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.cfg-key {
  --c: var(--neutral);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px;
  border-radius: 12px; border: 1px solid #353738; background: #2C2D2E; color: #EEEFE8; cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 1.2; transition: transform .08s, background .12s;
}
.cfg-key svg, .cfg-key .ico { width: 28px; height: 28px; font-size: 28px; color: var(--c); }
.cfg-key span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (hover: hover) and (pointer: fine) { .cfg-key:hover { background: #303132; } }
.cfg-key.selected { background: color-mix(in srgb, var(--accent) 20%, #2C2D2E); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cfg-key.drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.cfg-key.dragging { opacity: .35; }
.cfg-key--add { border-style: dashed; background: transparent; color: #8794a1; }
.cfg-key--add svg { color: #8794a1; }
.cfg-hint { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }

.cfg-side { display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.cfg-empty { margin: auto; display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--muted); max-width: 260px; }
.cfg-empty b { color: var(--text); font-size: 17px; }
.cfg-head { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.cfg-tile { width: 76px; height: 76px; border-radius: 16px; background: #242424; display: grid; place-items: center; }
.cfg-tile svg, .cfg-tile .ico { width: 38px; height: 38px; font-size: 38px; color: var(--c); }
.cfg-namefield { display: grid; gap: 6px; }
.cfg-namefield span { color: var(--muted); font-size: 13px; }
.cfg-namefield input, .cfg-search, .cfg-steps input, .cfg-side select {
  min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; user-select: text; width: 100%;
}
.cfg-headactions { display: flex; justify-content: flex-end; gap: 6px; margin-top: -6px; }
.cfg-headactions .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
.cfg-del { color: var(--red); }
.cfg-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cfg-tabs button { min-height: 42px; border-radius: 999px; border: 0; background: var(--bg); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 6px; }
.cfg-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.cfg-body { display: grid; gap: 12px; align-content: start; }
.cfg-body h4 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cfg-note { margin: 0; font-size: 13px; line-height: 1.45; }
.cfg-assign { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.cfg-assign small { display: block; color: var(--muted); font-size: 12px; }
.cfg-assign b { font-size: 18px; font-family: var(--font-num); }
.cfg-rec.on, .cfg-recbar { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.cfg-mods { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cfg-mods button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; cursor: pointer; }
.cfg-mods button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Tastenpalette: feste Spaltenzahl je Gruppe (--cols: 5, Ziffernblock und Steuerung 3) – nie seitliches Scrollen */
.cfg-palette { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; }
.cfg-palette button { min-width: 0; min-height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-palette button:active, .cfg-actions button:active { transform: scale(.96); }
/* Spielfunktionen: 2 je Reihe, Name und darunter „⚡ direkt · Taste“ */
.cfg-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cfg-actions button { --c: var(--neutral); min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.cfg-actions button > svg, .cfg-actions button > .ico { grid-row: span 2; width: 24px; height: 24px; font-size: 24px; color: var(--c); }
.cfg-actions button span { font-weight: 600; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-actions button small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.cfg-actions button small svg, .cfg-steps small svg, .cfg-seg svg { width: 13px; height: 13px; flex: none; color: var(--accent-text); }
.cfg-seg svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: currentColor; }

/* Abschnitte der Seitenleiste: 1 Erscheinung · 2 Funktion · 3 Status · Position */
.cfg-side { overflow-x: hidden; }
.cfg-side > * { min-width: 0; }
.cfg-sec { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cfg-sec h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.cfg-sec h4 i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; letter-spacing: 0; }
.cfg-sec h5 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.cfg-sec--quiet h4 { color: var(--muted); }
.cfg-look { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cfg-look .swatches button { width: 34px; height: 34px; }
.cfg-iconbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.cfg-iconbtn svg, .cfg-iconbtn .ico { width: 22px; height: 22px; font-size: 22px; }
.cfg-icons { display: grid; gap: 8px; }
.cfg-assign { flex-wrap: wrap; }
.cfg-assign > div { min-width: 0; flex: 1 1 160px; }
.cfg-assign b { display: block; overflow: hidden; text-overflow: ellipsis; }
.cfg-assign b svg { width: 16px; height: 16px; margin-right: 4px; color: var(--accent-text); vertical-align: -2px; }
.cfg-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-seg button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-seg--sub button { min-height: 38px; font-size: 13px; }
.cfg-statetext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cfg-statetext label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.cfg-statetext input { min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; user-select: text; }
/* Makro-Schritte */
.cfg-addsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; }
.cfg-addsteps button { min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; }
.cfg-addsteps button svg, .cfg-addsteps button .ico { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.cfg-addsteps button[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.cfg-actions button:disabled { opacity: .45; cursor: not-allowed; }
.cfg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cfg-steps li { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.cfg-steps li > svg, .cfg-steps li > .ico { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }
/* Warte-Schritte (Zeit, Strecke, Vorgewende, Zustand): blauer Rahmen und leichte Tönung statt Seitenstreifen */
.cfg-step--wait, .cfg-step--distance, .cfg-step--headland, .cfg-step--until { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)) !important; background: color-mix(in srgb, var(--blue) 8%, var(--bg)) !important; }
.cfg-stepmain { display: grid; gap: 6px; min-width: 0; }
.cfg-stepmain b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-stepmain small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; min-width: 0; }
.cfg-stepmain input:not([type="number"]) { min-height: 36px; min-width: 0; }
.cfg-num { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cfg-num input { width: 84px; min-height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 15px var(--font-num); user-select: text; }
.cfg-until { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cfg-until select { min-width: 0; }
.cfg-steps li .cfg-stepbtns { display: flex; gap: 2px; }
.cfg-stepbtns button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.cfg-stepbtns button:disabled { opacity: .25; cursor: default; }
.cfg-stepbtns svg { width: 16px; height: 16px; }
.cfg-stepno { color: var(--muted); font-size: 12px; text-align: center; grid-row: 1 / span 2; }
.cfg-steps li > svg { grid-row: 1 / span 2; }
.cfg-stepempty { display: block !important; text-align: center; border-style: dashed !important; }
.cfg-recbar { min-height: 50px; border-radius: 12px; border: 0; font-weight: 600; cursor: pointer; }
.cfg-recbar.on { animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { background: color-mix(in srgb, var(--red) 65%, #202020); } }
@media (prefers-reduced-motion: reduce) { .cfg-recbar.on { animation: none; } }
.cfg-side .field > span { font-size: 13px; }
.cfg-side :is(button, input, select, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1100px) {
  .cfg { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; height: auto; }
  .view--board { overflow-y: auto; }
  .cfg-top { grid-template-columns: 1fr; justify-items: start; }
  .cfg-layers { text-align: left; }
  .cfg-layers .cfg-label { justify-content: flex-start; }
  .cfg-device { grid-template-columns: repeat(3, minmax(0, 100px)); }
}

/* Vorschau-Karten der Design-Vorlagen */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.skins button { display: grid; gap: 8px; padding: 10px; text-align: left; cursor: pointer; border-radius: 15px; border: 1px solid var(--line); background: var(--bg); } /* = Vorschau 4 + Rand 11 */
.skins button[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.skins button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skins small { color: var(--muted); font-size: 12px; }
/* Alle Vorlagen außer Default sind Beta (Nutzerwunsch 15.10.2026) */
.skin-beta { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; font: 600 11px var(--font); letter-spacing: .04em; font-style: normal; text-transform: uppercase; background: color-mix(in srgb, var(--helper-orange) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--helper-orange) 55%, transparent); }
.skin-prev { height: 64px; border-radius: 4px; overflow: hidden; display: grid; grid-template-rows: 12px 1fr 12px; }
.skin-prev i { display: block; }
.skin-prev span { display: flex; gap: 4px; padding: 6px; align-items: center; }
.skin-prev b { width: 22px; height: 16px; border-radius: 4px; }

/* ---------- GPS / Spurführung ---------- */
:root { --gps-ground: var(--panel); --gps-field: var(--panel-2); --gps-line: var(--brand-grey); --gps-active: var(--helper-blue); --gps-pre: var(--brand-white); --gps-cover-op: .8; --gps-would: #ffd23a; --gps-edge: rgba(255,255,255,.9); }
:root[data-theme="day"] { --gps-edge: color-mix(in srgb, var(--brand-black) 80%, transparent); --gps-ground: var(--brand-paper); --gps-field: color-mix(in srgb, var(--brand-grey) 15%, var(--brand-paper)); --gps-line: color-mix(in srgb, var(--brand-grey) 50%, var(--brand-paper)); }
.view--gps { display: grid; }
.gps-panel { overflow: hidden; background: var(--gps-ground); min-height: 0; container: gps / inline-size; } /* GPS-Seite und eingebettetes GPS: gleiche Regeln je Kartenbreite */
.gps-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.gps__fields polygon { fill: var(--gps-field); stroke: rgba(255,255,255,.18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* jede Überfahrt halbtransparent: wo zwei übereinanderliegen, wird die Fläche kräftiger (= Überlappung) */
.gps__cover polyline { fill: none; stroke: var(--accent); stroke-linecap: butt; stroke-linejoin: round; stroke-opacity: var(--gps-cover-op); }
/* Ebenen-Menü: einzelne Ebenen ausblenden */
.gps-panel.no-lines #gpsCourse, .gps-panel.no-cover .gps__cover, .gps-panel.no-fields :is(.gps__fields, .gps__edge) { display: none; }
.gps__line { stroke: var(--gps-line); stroke-opacity: .75; stroke-width: 2; vector-effect: non-scaling-stroke; }
.gps__line.active { stroke: var(--gps-active); stroke-opacity: 1; stroke-width: 5; }
.gps__line.pre { stroke: var(--gps-pre); stroke-opacity: .6; stroke-width: 4; }
/* Kurs der Spiel-Spurführung: alle Spuren und Vorgewende-Runden hellgrau durchgezogen, die vorgewählte orange,
   bei eingeschalteter Lenkung blau; bearbeitete Spuren gedämpft */
.gps__course polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.gps__course .gps__line { stroke: #EBECE3; stroke-opacity: .55; stroke-width: 2; }
.gps__course .gps__line.done { stroke-opacity: .22; }
.gps__course .gps__line.pre { stroke: var(--helper-orange); stroke-opacity: 1; stroke-width: 4; }
.gps__course .gps__line.active { stroke: var(--gps-active); stroke-opacity: 1; stroke-width: 5; }
/* Feldzustand aus dem Spiel: gemäht/geerntet strohgelb, stehende Frucht leicht grün (Farben im Bild, gps.js) */
.gps__fieldstate { pointer-events: none; opacity: var(--gps-cover-op); }
/* Feldrand: eigene Linie über Fläche und Bemalung, kräftiger als die Flächenfarbe (Nutzerwunsch) */
.gps__edge { fill: none; stroke: var(--gps-edge); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.gps__vehicle path { fill: var(--helper-orange); stroke: #2a1300; stroke-width: 1.5; }
.gps__impl { fill: var(--helper-orange); stroke: none; }
.gps__img { opacity: .7; }
.gps-panel.has-mapimg .gps__fields polygon { fill-opacity: .35; }
.gps-panel.has-mapimg .gps__fields polygon.current { fill-opacity: .82; }
.gps__fields.has-current polygon:not(.current) { display: none; }
.gps__fields polygon.current { stroke: none; }
#gpsTractor, .gps__vehicle { pointer-events: none; }
.gps-map.dragging { cursor: grabbing; }

.gps-top { position: absolute; top: 12px; left: calc(50% + var(--gps-inset-l, 0px) / 2); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
/* Banner, solange die Spurführung des Spiels lenkt */
.gps-banner { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--gps-active) 82%, #000); color: #FFFFFF; font-weight: 600; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.gps-banner svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.gps-banner[hidden] { display: none; }

:is(.gps-tools .icon-btn, .gps-layers-btn) { background: rgba(39,40,40,.78); border-color: transparent; color: #F1F2EC; }
/* Ansichtsknöpfe ohne Aktiv-Farbe (Nutzerwunsch 11.10.2026): Pfeil, 2D/3D, Vollbild bleiben weiß wie + und − */
:is(.gps-tools .icon-btn, .gps-layers-btn)[aria-pressed="true"] { color: #F1F2EC; border-color: transparent; }
/* Ebenen-Menü neben den Werkzeugen */
.gps-layers { position: absolute; right: 70px; top: 12px; display: grid; gap: 2px; min-width: 190px; padding: 10px 12px; border-radius: 12px; background: rgba(39,40,40,.8); color: #F1F2EC; box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 3; }
.gps-layers[hidden] { display: none; }
.gps-layers > b { font-size: 12px; color: #9fc3c8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.gps-layers label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; font-size: 14px; cursor: pointer; }
.gps-layers label[hidden] { display: none; }
.gps-layers input { width: 20px; height: 20px; accent-color: var(--accent); }
/* Feldwerte oben links */
.gps-info { position: absolute; left: calc(12px + var(--gps-inset-l, 0px)); top: 12px; display: grid; gap: 8px; align-content: start; justify-items: start; pointer-events: none; }
.gps-info .fieldcard[hidden] { display: none; }
.gps-stats[hidden], .gps-stats .fill[hidden] { display: none; }
/* Anteile der Spielzustände und Arbeitsbreite je als eigener Block unter der Feldkarte */
.gps-legend-card, .gps-width-card { gap: 0; }
.gps-width-card { padding-block: 10px; }
/* 3D-Ansicht: Karte (SVG + Kartenbild) per CSS-Perspektive gekippt, Geometrie in gps.js (stage) */
.gps-3d span { font: 600 14px var(--font-num); letter-spacing: .02em; }
.gps-panel.is-3d :is(.gps-map, canvas.gps__img) { inset: auto; }
/* Horizont: das ferne Ende der gekippten Karte läuft in die Grundfarbe aus */
.gps-sky { position: absolute; inset: 0; pointer-events: none; opacity: var(--tilt, 0); background: linear-gradient(to bottom, var(--gps-ground) 0, var(--gps-ground) var(--sky, 0px), transparent calc(var(--sky, 0px) + 18%)); }
.gps-sky[hidden] { display: none; }
/* 3D: Fahrzeugbild schräg von hinten, unverzerrt über der gekippten Karte (Lage und Größe aus gps.js) */
.gps-veh3d { position: absolute; height: auto; max-width: none; pointer-events: none; user-select: none; }
.gps-veh3d[hidden] { display: none; }

/* Feldkarte: gemeinsamer Baustein für Feldwerte (GPS), Füllstände (GPS) und Feldinfo (Monitor).
   Aufbau wie die Füllstände: Kopf mit Feld und Größe, Fortschritt als Balken, Details als ruhige Zeilen. */
.fieldcard {
  --fc-text: #F1F2EC; --fc-muted: rgba(241,242,236,.7); --fc-line: rgba(255,255,255,.12); --lamp-off: rgba(255,255,255,.18);
  width: 240px; display: grid; gap: 14px; align-content: start; padding: 12px 14px; border-radius: 12px;
  background: rgba(39,40,40,.78); color: var(--fc-text); --muted: var(--fc-muted);
}
.fieldcard__head { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.fieldcard__head b { font: 600 17px var(--font-num); }
.fieldcard__head span { margin-left: auto; font: 600 15px var(--font-num); color: var(--fc-muted); }
.fieldcard__rows, .fieldcard__group { display: grid; gap: 8px; }
.fieldcard__group { padding-top: 12px; border-top: 1px solid var(--fc-line); gap: 12px; }
.fieldcard__group h4 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fc-muted); }
.fieldcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.fieldcard__row span { color: var(--fc-muted); }
.fieldcard__row b { font: 600 15px var(--font-num); text-align: right; }
.fieldcard .fill { min-width: 0; }
/* Legende der Spielzustände (wie Spielkarte „Wachstum“): Farbfeld, Name, Anteil */
.gps-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gps-legend[hidden] { display: none; }
.gps-legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.gps-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.gps-legend span { color: var(--fc-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gps-legend b { font: 600 13px var(--font-num); color: var(--fc-muted); }
.fieldcard .fill__head b { color: var(--accent); }
.fieldcard .fill__head span { color: var(--fc-text); }
/* Unten: links Füllstände, mittig Bedienung, rechts Maßstab (ohne Fläche, wie im Monitor) und Kartenart */
.gps-bottom { position: absolute; left: calc(12px + var(--gps-inset-l, 0px)); right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; pointer-events: none; }
.gps-bottom > * { pointer-events: auto; }
.gps-bottom .gps-fills { justify-self: start; }
.gps-corner { grid-column: 3; justify-self: end; display: flex; align-items: flex-end; gap: 12px; }
.gps-scale { display: grid; justify-items: start; gap: 4px; padding: 0 0 2px; border: 0; background: none; color: var(--text); font: 600 12px var(--font-num); text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); cursor: pointer; }
.gps-scale i { display: block; height: 6px; border: 2px solid currentColor; border-top: 0; min-width: 20px; filter: drop-shadow(0 0 2px var(--bg)); }
.gps-maptype { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 74px; display: grid; grid-template-rows: 1fr auto; padding: 3px; border-radius: 10px; border: 2px solid rgba(255,255,255,.85); background: rgba(39,40,40,.82); color: #FFFFFF; cursor: pointer; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.gps-maptype[hidden] { display: none; }
.gps-maptype i { display: block; border-radius: 5px; /* 10 − 2 Rahmen − 3 Innenabstand */ background: #4c7a3c linear-gradient(135deg, #6b9a4f, #3d6b35); background-repeat: no-repeat; }
.gps-maptype.to-plain i { background: var(--gps-field); background-image: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.5) 46% 54%, transparent 54%); }
.gps-maptype span { font-size: 12px; font-weight: 600; padding-top: 2px; }
.gps-maptype.is-unavailable { opacity: .5; }

.gps-bar { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.gps-corner .gps-maptype { position: static; }
.gps-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--chip-r); border: 1px solid rgba(255,255,255,.1); background: rgba(39,40,40,.72); color: #F1F2EC; font-weight: 600; font-size: 14px; cursor: pointer; }
.gps-chip { transition: transform 140ms var(--ease-out), background-color 150ms ease; touch-action: manipulation; }
.gps-chip:active { transform: scale(.97); }
.gps-chip i { width: 14px; height: 14px; border-radius: 4px; }
/* Bedienleiste unten (Nutzerwunsch 11.10.2026): Kurs (Helfer-Menü) und Ebenen und Zurücksetzen nur als Symbol,
   Markieren mit dem Modus als farbigem Wort; das Ebenen-Menü klappt über der Leiste auf */
.gps-bar { position: relative; }
.gps-chip--icon { width: 48px; padding: 0; justify-content: center; }
.gps-chip--icon[hidden] { display: none; }
.gps-chip--icon svg { width: 20px; height: 20px; }
.gps-mark b { font-weight: 700; color: var(--accent); }
.gps-mark[data-mode="on"] b { color: var(--helper-blue); }
.gps-mark[data-mode="off"] b { color: var(--red); }
/* Werkzeuge rechts in Gruppen: Vollbild | Zoom | Ausrichtung | 2D/3D; + und − wirken wie ein Knopf */
.gps-tools { gap: 12px; }
.gps-zoom { display: grid; }
.gps-tools .gps-zoom .icon-btn:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gps-tools .gps-zoom .icon-btn:last-child { border-top-left-radius: 0; border-top-right-radius: 0; }
/* dezente Trennlinie zwischen + und − bzw. zwischen den Füllständen, bis an den Rand (Nutzerwunsch 11.10.2026) */
.gps-tools .gps-zoom .icon-btn + .icon-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.gps-fills .fill + .fill { border-top: 1px solid var(--fc-line); }
/* Glas: Kartenfelder leicht durchsichtig mit Weichzeichner dahinter */
/* Ebenen über der Kartenart, gleich groß wie die Kartenknöpfe; das Menü klappt links daneben auf */
.gps-mapset { position: relative; display: grid; gap: 12px; justify-items: end; }
.gps-layers-btn { width: 48px; height: 48px; }
.gps-mapset .gps-layers { top: auto; bottom: 0; right: calc(100% + 8px); }
/* Banner: „GPS aktiv“ kräftig, die Spur flacher daneben (wie die Beschriftung „Arbeitsbreite“) */
.gps-banner { font-size: 14px; }
.gps-banner b { font-weight: 600; }
.gps-banner span { font-weight: 400; opacity: .86; } /* Fläche 82 % abgedunkelt, damit Weiß ≥ 4,5:1 hat; die Spur bleibt im vollen Blau */
.gps-banner span:empty { display: none; }
/* Füllstände wie + und −: Abschnitte liegen ohne Lücke aneinander, jeder mit gleichem Rand */
.gps-fills { padding: 0; gap: 0; }
.gps-fills .fill { padding: 12px 14px; }
.fill__foot { display: flex; justify-content: space-between; gap: 12px; }
.fill__max { font: 400 14px var(--font-num); color: var(--muted); }
/* Overlays: eine Schriftgröße (14 px) – Werte und Titel 600, Beschriftungen 400 gedämpft */
.fieldcard :is(.fieldcard__head b, .fieldcard__head span, .fieldcard__row, .fieldcard__row b, .fill__head, .fill__name, .gps-legend li, .gps-legend b) { font-size: 14px; }
.fieldcard .fieldcard__head b { font-weight: 600; }
.fieldcard .fieldcard__head span, .fieldcard .gps-legend b { font-weight: 400; }
:is(.gps-chip, .gps-tools .icon-btn, .gps-layers-btn, .gps-hint) { font-size: 14px; }
:is(.gps-chip, .gps-layers, .fieldcard, .gps-tools .icon-btn, .gps-layers-btn, .gps-hint) { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.gps-hint { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 12px 18px; border-radius: 12px; background: rgba(39,40,40,.85); color: #F1F2EC; font-weight: 600; text-align: center; max-width: 80%; }
.gps-panel .map-empty { color: #EBECE3; background: var(--gps-ground); }
.gps-panel .map-empty b { color: #FFFFFF; }
.gps-panel button:focus-visible { outline: 2px solid var(--gps-active); outline-offset: 2px; }

/* Vollbild innerhalb des Terminals: Statuszeile und Dock ausblenden */
.terminal.gps-full .status, .terminal.gps-full .dock { display: none; }
:root .terminal.gps-full { grid-template-rows: minmax(0, 1fr); }
.terminal.gps-full .views { padding: 0; }
.terminal.gps-full .gps-panel { border-radius: 0; border: 0; }

@media (max-width: 600px) { .fieldcard { width: 200px; padding: 10px 12px; gap: 10px; } }
@container gps (max-width: 600px) {
  .fieldcard { width: 200px; padding: 10px 12px; gap: 10px; }
  /* schmal: Banner oben links, Feldkarte darunter; unten Füllstände + Karte, darunter die Knopfleiste */
  .gps-info:has(~ .gps-top .gps-banner:not([hidden])) { padding-top: 48px; } /* Platz für das Banner darüber */
  .gps-top { left: calc(12px + var(--gps-inset-l, 0px)); right: 64px; transform: none; justify-items: start; }
  .gps-bottom { grid-template-columns: minmax(0, 1fr) auto; }
  /* Maßstab über der Kartenart, sonst schieben Füllstände und Ecke die Kartenart aus dem Bild */
  .gps-corner { flex-direction: column; align-items: flex-end; gap: 8px; }
  .gps-bottom .gps-fills { width: min(200px, 100%); }
  .gps-bar { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .gps-corner { grid-column: 2; grid-row: 1; }
  .gps-banner { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
  .gps-bar { flex-wrap: wrap; gap: 6px; }
  .gps-chip { padding: 0 12px; }
}


/* ---------- Seitenpunkte (Fahren, Tasten, ISOBUS, Dashboard Live) ---------- */
/* Nutzerwunsch 11.10.2026: überall gleich – fest mittig 16 px über der Menüleiste, über dem Inhalt; sichtbar beim Öffnen
   der Ansicht und beim Wischen/Blättern, danach blenden sie aus (.show aus pager.js).
   Dunkle Kapsel mit hellem Rand und Schatten (sichtbar auf Karte wie auf heller Fläche), mehr Luft um die Punkte. */
.drive-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; z-index: 5;
  background: rgba(18,18,18,.86); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 14px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.drive-dots.show, .drive-dots:focus-within { opacity: 1; pointer-events: auto; transition-duration: 150ms; }
.drive-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width 200ms var(--ease-in-out), background-color 150ms ease; }
.drive-dots button[aria-current="true"] { width: 26px; background: #FFFFFF; }
.drive-dots button::after { content: ""; position: absolute; inset: -10px; }
.drive-dots button { position: relative; }
.drive-classic .lamps { margin-bottom: 34px; }

/* Gemeinsame Signal-Symbole (Cockpit & Arbeit) */
[data-ck] { --on: var(--text); color: color-mix(in srgb, var(--muted) 35%, transparent); display: inline-grid; place-items: center; transition: color .15s; }
[data-ck] svg { width: 30px; height: 30px; }
[data-ck].on { color: var(--on); }
[data-ck].lime { --on: var(--accent); }
[data-ck].ok { --on: var(--green); }
[data-ck].warn { --on: var(--amber); }
[data-ck].red { --on: var(--red); }
[data-ck].blue { --on: var(--blue); }
[data-ck].orange { --on: var(--helper-orange); }
[data-ck].info { --on: var(--blue); }
[data-ck].blink.on { animation: ckblink .8s steps(1) infinite; }
@keyframes ckblink { 50% { color: color-mix(in srgb, var(--muted) 35%, transparent); } }

/* ---------- Cockpit ---------- */
/* ---------- Großes Kombiinstrument (Fahren, Seite 1) ----------
   Zwei Ringe mit Doppelskala, Mitte Uhrzeit, Infoleiste, dunkle Kontrollleuchten-Leiste. Farben aus den Tokens,
   damit Tag/Nacht und Design-Vorlagen passen; Wertbogen in der Akzentfarbe, rote Zone nur am Ende. */
.kb { position: relative; display: grid; grid-template-rows: minmax(0, auto) auto auto; align-content: center; gap: 8px; padding: 6px 14px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-height: 0; overflow: hidden; }
/* Blinker und Richtung schweben oben in der Mitte – die Ringe bekommen die ganze Höhe (Nutzer: „wirkt sehr klein“) */
.kb-top { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; justify-content: center; align-items: center; gap: 40px; }
.kb-top [data-ck] svg { width: 38px; height: 38px; }
.kb-turn.on { --on: var(--green); }
.kb-dir { display: flex; gap: 6px; }
.kb-dir [data-ck] svg { width: 30px; height: 30px; }
.kb-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 7vw, 100px) minmax(0, 1fr); align-items: center; min-height: 0; padding-top: 18px; }
/* Großer Bildschirm: alles bleibt beieinander statt auseinanderzulaufen */
.kb-main, .kb-info, .kb-lamps { width: 100%; max-width: 1240px; justify-self: center; }
/* Ringfläche als Container: Zahlen und Einheiten wachsen mit der Ringgröße (cqmin) */
/* Größe gedeckelt (27-Zoll: „viel zu groß“) – die Ringfläche selbst, damit Schrift (cqmin) mitgeht */
.kb-gauge { position: relative; display: grid; place-items: center; width: min(100%, 540px, calc(100vh - 360px)); aspect-ratio: 1; justify-self: center; min-height: 0; container-type: size; }
.kb-svg { width: 100%; height: 100%; overflow: visible; stroke-linecap: butt; stroke-linejoin: miter; } /* eckig: global ist svg rund */
.kb-track { fill: none; stroke: var(--lamp-off); stroke-width: 14; }
.kb-val { fill: none; stroke: var(--accent); stroke-width: 14; transition: stroke-dasharray .15s linear, stroke .2s; }
.kb-val.red { stroke: var(--red); }
.kb-red { fill: none; stroke: var(--red); stroke-width: 4; }
.kb-tick { stroke: color-mix(in srgb, var(--muted) 70%, transparent); stroke-width: 1.6; }
.kb-mark { fill: var(--muted); stroke: none; }
.kb-mark.on { fill: var(--green); }
.kb-seg { fill: none; stroke: var(--lamp-off); stroke-width: 8; transition: stroke .2s; }
.kb-seg.on { stroke: color-mix(in srgb, var(--text) 78%, transparent); }
.kb-seg.on.warn { stroke: var(--red); }
.kb-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1cqmin; pointer-events: none; }
.kb-read b { font: 400 22cqmin/1 var(--font-num); letter-spacing: -.01em; }
.kb-read small { color: var(--muted); font: 600 4.6cqmin var(--font-num); letter-spacing: .12em; text-transform: uppercase; }
.kb-read > span { color: var(--muted); font: 400 5cqmin var(--font-num); letter-spacing: .02em; margin-top: 1.5cqmin; }
.kb-cruise { display: inline-flex; align-items: center; gap: 1.5cqmin; color: var(--muted); font: 400 4.8cqmin var(--font-num); margin-bottom: 1cqmin; }
.kb-cruise svg { width: 5.5cqmin; height: 5.5cqmin; }
.kb-cruise span { text-transform: uppercase; }
.kb-cruise.on { color: var(--green); }
/* Symbole der Segmentringe unten neben den Ringenden (Lage relativ zur Ringgröße) */
/* Ringenden liegen bei 145°/35°: rund 21–25 cqmin unter und 29–36 cqmin neben der Mitte – Symbole knapp darunter */
.kb-ico { position: absolute; top: calc(50% + 29cqmin); color: var(--muted); }
.kb-ico svg { width: 7cqmin; height: 7cqmin; }
.kb-ico--l { left: calc(50% - 30cqmin); } .kb-ico--r { right: calc(50% - 30cqmin); }
.kb-ico.off { opacity: .25; }
.kb-center { display: grid; justify-items: center; gap: 10px; }
.kb-center b { font: 400 clamp(18px, 2.2vw, 26px) var(--font-num); }
.kb-center [data-ck] svg { width: 30px; height: 30px; }
.kb-gear { min-width: 44px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); text-align: center; font: 600 18px var(--font-num); color: var(--muted); }
/* Infoleiste: aktive Zapfwelle gelb hinterlegt (wie im Vorbild), Warnungen rot */
.kb-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: 10px; overflow: hidden; }
.kb-cell { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 6px 10px; background: var(--panel-2); color: var(--text); min-width: 0; }
.kb-cell svg { width: 24px; height: 24px; flex: none; color: var(--muted); }
.kb-cell small { color: var(--muted); font-size: 12px; }
.kb-cell b { font: 600 clamp(15px, 1.8vw, 22px) var(--font-num); white-space: nowrap; }
.kb-cell.on { background: #FFCC00; color: #202020; }
.kb-cell.on svg, .kb-cell.on small { color: #202020; }
.kb-cell.warn b { color: var(--red); }
/* sehr schmal (bis 400 px): Kopfzeile ohne Spieltag, Kombi-Kacheln brechen um (Beschriftung bleibt),
   damit nichts überlappt oder abgeschnitten wird */
@media (max-width: 400px) {
  .stat--day { display: none; }
  .kb-cell { flex-wrap: wrap; gap: 0 6px; padding: 6px 8px; }
  .kb-cell b { white-space: normal; text-align: center; }
}
/* Kontrollleuchten-Leiste: in beiden Modi dunkel, aus fast unsichtbar, an in ihrer Farbe */
.kb-lamps { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); padding: 8px 16px; border-radius: 10px; background: #161616; min-height: 48px; overflow: hidden; }
.kb-lamps [data-ck] { color: rgba(255, 255, 255, .12); }
.kb-lamps [data-ck].on { color: var(--on); }
.kb-lamps [data-ck] svg { width: 28px; height: 28px; }
.kb-lamps__gap { flex: 1; }
.kb-p { width: 28px; height: 28px; border: 2.5px solid currentColor; border-radius: 50%; font: 600 15px/1 var(--font-num); }
@media (max-width: 760px) {
  .kb { padding: 8px 10px 10px; }
  .kb-main { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; gap: 8px 4px; }
  .kb-gauge { width: 100%; }
  .kb-center { grid-column: 1 / -1; grid-row: 2; grid-auto-flow: column; align-items: center; }
  .kb-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-lamps { gap: 10px; padding: 6px 10px; flex-wrap: wrap; }
  .kb-lamps [data-ck] svg { width: 22px; height: 22px; }
  .kb-lamps__gap { display: none; }
}
.ck { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; padding: 14px 24px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ck-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ck-icons { display: flex; flex-wrap: wrap; gap: 22px; min-width: 0; }
.ck-icons--right { justify-content: flex-end; }
.ck-arrows { display: flex; gap: 26px; align-items: center; margin-top: 4px; }
.ck-arrows [data-ck] svg { width: 44px; height: 44px; }
.ck-main { display: grid; grid-template-columns: 60px minmax(0, 1fr) 80px minmax(0, 1fr) 60px; align-items: center; gap: 12px; min-height: 0; }
.ck-bar { display: grid; justify-items: center; gap: 10px; color: var(--muted); }
.ck-bar > svg { width: 34px; height: 34px; }
.ck-seg { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; width: 18px; height: min(260px, 32vh); }
.ck-seg i { background: var(--lamp-off); border-radius: 2px; }
.ck-seg i.on { background: var(--accent); }
.ck-seg.low i.on { background: var(--red); }
.ck-gauge { position: relative; display: grid; place-items: center; min-height: 0; height: 100%; }
.ck-arc { width: 100%; height: 100%; max-height: min(420px, 52vh); }
.ck-arc__track { stroke: var(--lamp-off); stroke-width: 22; stroke-linecap: butt; }
.ck-arc__val { stroke: var(--accent); stroke-opacity: .28; stroke-width: 22; transition: stroke-dasharray .15s linear; }
.ck-arc__tick { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.ck-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.ck-read b { font: 400 clamp(56px, 9vw, 120px)/1 var(--font-num); letter-spacing: -.02em; }
.ck-read small { color: var(--muted); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.ck-icon { width: 36px; height: 36px; color: var(--accent); }
.ck-center { display: grid; gap: 18px; justify-items: center; }
.ck-center [data-ck] svg { width: 44px; height: 44px; }
.ck-center [data-ck="road"].on { --on: var(--muted); color: var(--text); }
.ck-hazard { display: grid; justify-items: center; }
.ck-hazard [data-ck] svg { width: 40px; height: 40px; }
.ck-bottom { display: flex; align-items: center; gap: 36px; color: var(--muted); font-size: 15px; margin-top: 8px; }
.ck-bottom span { display: inline-flex; align-items: center; gap: 10px; }
.ck-bottom svg { width: 28px; height: 28px; }
.ck-bottom b { color: var(--text); font: 600 22px var(--font-num); }
.ck-bottom__gap { flex: 1; }

/* ---------- Arbeit ---------- */
/* Drei Varianten (Nutzerwunsch 11.10.2026, data-variant aus views.js): side = Spalte links + GPS rechts,
   over = Spalte als Kartenfeld über dem GPS (volle Höhe, wie die Feldkarte), solo = nur die Spalte, volle Breite.
   Das GPS ist dieselbe Ansicht wie die GPS-Seite, es reagiert über die Containerabfrage auf seine eigene Breite. */
.wk { display: grid; grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr); gap: var(--gap); }
.wk[data-variant="solo"] { grid-template-columns: minmax(0, 1fr); }
.wk[data-variant="solo"] .wk-map { display: none; }
.wk-left { position: relative; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; padding: 16px 20px; min-height: 0; }
.wk-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.wk-head b { justify-self: end; font: 600 18px var(--font-num); }
/* Fahrstufe platzsparend: kleine Buchstaben, die aktive mit Fläche (wie auf der Seite „Fahrt“) */
.wk-prnd { display: flex; gap: 1px; font: 600 14px var(--font-num); color: var(--muted); }
.wk-prnd span { min-width: 20px; padding: 2px 4px; border-radius: 5px; text-align: center; transition: background-color 150ms ease, color 150ms ease; }
.wk-prnd .on { color: var(--text); background: var(--panel-2); }
/* Blinker oben in der Mitte zwischen Fahrstufe und Tank */
.wk-blink { display: flex; gap: 14px; }
.wk-turn svg { width: 26px; height: 26px; }
.wk-fuel { height: 4px; background: var(--lamp-off); border-radius: 2px; overflow: hidden; }
.wk-fuel i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 300ms var(--ease-out); }
.wk-speed { display: flex; justify-content: space-between; align-items: flex-start; }
.wk-speed > div { display: grid; }
.wk-speed > div b { font: 400 clamp(56px, 8vw, 96px)/1 var(--font-num); letter-spacing: -.02em; }
.wk-speed small { color: var(--muted); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.wk-speed > span b { font: 600 18px var(--font-num); }
.wk-vehicle { display: grid; grid-template-columns: 40px 1fr 40px; /* rechts gleich breit wie die Warnspalte, damit der Traktor mittig steht */ align-items: center; min-height: 0; overflow: hidden; }
/* Leuchten und Traktor wie in der Fokus-Spalte (Nutzerwunsch 11.10.2026) */
.wk-warn { display: grid; align-content: center; gap: 8px; }
.wk-warn [data-ck] { width: 40px; height: 40px; }
.wk-warn [data-ck] svg { width: 30px; height: 30px; }
.wk-warn [data-ck="gpsActive"] { --on: var(--gps-active); } /* Spurführung im GPS-Blau, wie Spur und Banner */
/* Traktor mit Gang-Pfeilen davor und dahinter; die Pfeile erscheinen nur beim gewählten Gang (grün) */
.wk-tractor { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; height: 100%; } /* Gang-Pfeile 8 px direkt am Traktor */
/* eine Linie unter dem Traktor, nach oben und unten ausgeblendet – nur bei aktiver Spurführung */
.wk-tractor::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 3px); width: 6px; background: var(--gps-active); opacity: 0; transition: opacity 200ms ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 80%, transparent); }
.wk-tractor.guided::before { opacity: 1; }
.wk-gear { position: relative; flex: none; opacity: 0; transition: opacity 150ms ease; } /* liegt über der Spurlinie */
.wk-gear.on { opacity: 1; }
.wk-gear.ok { --on: var(--accent); }
.wk-impl { position: relative; flex: none; display: block; width: 130px; height: 8px; margin-top: -6px; border-radius: 2px; background: var(--lamp-off); transition: background-color 150ms ease; }
.wk-impl.down { background: var(--helper-orange); }
.wk-impl[hidden] { display: none; } /* gleiches Grün wie Tempomat-Stufe und Tankbalken (Nutzerwunsch 11.10.2026) */
.wk-gear svg { width: 45px; height: 45px; filter: drop-shadow(0 0 4px var(--panel)); }
.wk-topview { position: relative; height: clamp(120px, 24vh, 210px); max-height: calc(100% - 130px); min-height: 0; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); }  /* Bild aus dem GIANTS Editor, transparent */
/* Tempomat: Kopf mit Zustand und −/+, darunter die drei Stufen als Wahlleiste. aktiv = Akzentfläche,
   gewählt aber aus = Akzentrahmen, übrige Stufen ruhig (Nutzerwunsch 11.10.2026) */
.wk-cruise { display: grid; gap: 10px; }
.wk-cruise__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-cruise__label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: .08em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.wk-cruise__label small { font-size: 13px; font-weight: 400; letter-spacing: .04em; }
.wk-cruise__label small.on { color: var(--accent-text); font-weight: 600; }
.wk-cruise__step { display: flex; gap: 6px; }
.wk-cruise__btn { width: 48px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; background: var(--panel-2); color: var(--text); cursor: pointer; border-radius: 10px; touch-action: manipulation; }
.wk-cruise__btn svg { width: 22px; height: 22px; }
.wk-cruise__btn:active { background: var(--bg); }
.ccg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel-2); width: 100%; }
.ccg--single { grid-template-columns: minmax(0, 1fr); }
.ccg__slot { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 6px 4px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 150ms, color 150ms, box-shadow 150ms; }
.ccg__slot:active { transform: scale(.97); }
.ccg__slot small { font-size: 12px; letter-spacing: .04em; }
.ccg__slot b { font: 400 28px/1 var(--font-num); }
.ccg__slot.sel { color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }
.ccg__slot.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.kb-cruise__n { font-style: normal; padding: 0 1.2cqmin; border: 1px solid currentColor; border-radius: 1cqmin; }
.wk-map { min-height: 0; display: grid; }
.wk-map .gps-panel { height: 100%; }
/* Variante „Spalte im GPS“: Karte über die ganze Fläche, die Spalte als Kartenfeld links in voller Höhe.
   --gps-inset-l (px) schiebt die Kartenfelder und die Bildmitte des GPS in die freie Fläche rechts daneben. */
@media (min-width: 1001px) {
  .wk[data-variant="over"] { --wk-over-w: 360px; --gps-inset-l: 372px; /* 1,5 × Feldkarte (240 px) */ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wk[data-variant="over"] > * { grid-area: 1 / 1; }
  .wk[data-variant="over"] .wk-left { z-index: 2; justify-self: start; width: var(--wk-over-w); margin: 12px; padding: 12px 14px; border-radius: var(--wk-glass-r, 12px);
    --text: #F1F2EC; --muted: rgba(241,242,236,.7); --panel-2: rgba(255,255,255,.1); --lamp-off: rgba(255,255,255,.18); --bg: rgba(0,0,0,.25); --accent-text: var(--accent);
    background: var(--wk-glass, rgba(39,40,40,.78)); color: var(--text); box-shadow: none; /* gleiche Fläche wie die Feldkarte (je Vorlage) */ -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
  .wk[data-variant="over"] .wk-speed > div b { font-size: 64px; }
  .wk[data-variant="over"] .wk-topview { height: clamp(110px, 20vh, 170px); }
  .wk[data-variant="over"] .ccg__slot { min-height: 56px; }
  .wk[data-variant="over"] .ccg__slot b { font-size: 24px; }
}
/* Variante „nur Fahrzeug“: Traktor größer, Tempomat nicht breiter als nötig */
.wk[data-variant="solo"] .wk-topview { height: clamp(140px, 34vh, 320px); }
.wk[data-variant="solo"] .wk-cruise { width: min(100%, 560px); justify-self: center; }

/* ---------- Fahren · Fahrt (nach einem Pkw-Fahrerdisplay): Karte als Hintergrund, wenige ruhige Karten darüber.
   Gilt für alle Design-Vorlagen – Farben kommen aus deren Tokens. */
.rt { position: relative; overflow: hidden; padding: 0; }
.rt-map { position: absolute; inset: 0; display: grid; }
.rt-map .gps-panel { height: 100%; border: 0; border-radius: 0; }
/* Von der GPS-Karte nur die Karte selbst – Bedienfelder bleiben auf der GPS-Seite */
.rt-map :is(.gps-info, .gps-top, .gps-bottom, .gps-tools, .gps-layers, .gps-hint) { display: none !important; }
.rt-map .gps-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--bg) 22%, transparent); }
.rt-card { --rt-glass: color-mix(in srgb, var(--panel) 84%, transparent); background: var(--rt-glass); color: var(--text); border-radius: max(var(--radius), 8px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rt-left { position: absolute; left: 20px; top: 20px; display: grid; justify-items: start; gap: 14px; }
.rt-limit { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--lamp-off); background: var(--panel); color: var(--muted); font: 600 19px var(--font-num); transition: border-color 150ms ease, color 150ms ease; }
.rt-limit.on { border: 5px solid var(--red); background: #FFFFFF; color: #1C1C1E; }
.rt-speed { display: flex; align-items: baseline; gap: 8px; padding: 10px 22px 14px 18px; }
.rt-speed b { font: 400 clamp(72px, 10vw, 128px)/1 var(--font-num); letter-spacing: -.03em; }
.rt-speed small { font-size: 20px; color: var(--muted); }
.rt-lamps { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 8px; }
.rt-lamp { width: 48px; height: 48px; border-radius: max(var(--radius), 8px); background: color-mix(in srgb, var(--panel) 84%, transparent); }
.rt-lamp svg { width: 26px; height: 26px; }
.rt-prnd { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 84%, transparent); font: 600 15px var(--font-num); }
.rt-prnd span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: background-color 150ms ease, color 150ms ease; }
.rt-prnd span.on { background: var(--panel-2); color: var(--text); }
.rt-right { position: absolute; right: 20px; top: 20px; width: min(340px, 40%); display: grid; gap: 8px; }
.rt-next { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; }
.rt-next svg { width: 40px; height: 40px; color: var(--accent-text); transform: scaleX(-1); }
.rt-next[data-state="soon"] svg, .rt-next[data-state="headland"] svg { color: var(--helper-orange); }
.rt-next > span { display: grid; min-width: 0; }
.rt-next b:first-child { font-size: 18px; font-weight: 600; }
.rt-next__m { font: 600 30px/1.1 var(--font-num); }
.rt-next__m small { font-size: 16px; color: var(--muted); }
.rt-next > span > small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.rt-eta { display: grid; gap: 2px; padding: 10px 16px; }
.rt-eta small { color: var(--muted); font-size: 13px; }
.rt-eta b { font: 600 17px var(--font-num); }
.rt-energy { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: baseline; gap: 6px; padding: 10px 18px 12px; }
.rt-energy b { font: 400 clamp(40px, 5vw, 60px)/1 var(--font-num); letter-spacing: -.02em; }
.rt-energy b.low { color: var(--red); }
.rt-energy small { font-size: 16px; color: var(--muted); margin-right: 14px; }
.rt-energy small:last-child { margin-right: 0; }
@media (max-width: 760px) {
  .rt-left { left: 12px; top: 12px; gap: 10px; }
  .rt-limit { width: 48px; height: 48px; font-size: 16px; }
  .rt-right { right: 12px; top: auto; bottom: 214px; width: calc(100% - 24px); }
  .rt-energy { right: 12px; bottom: 148px; }
  .rt-energy b { font-size: 36px; }
  .rt-lamps { left: 12px; bottom: 90px; }
  .rt-lamp { width: 40px; height: 40px; }
  .rt-prnd { bottom: 40px; }
}

/* Füllstände (GPS-Overlay & ISOBUS) */
.fill { display: grid; gap: 6px; min-width: 180px; }
.fill__head { display: flex; justify-content: space-between; font: 600 15px var(--font-num); }
.fill__head b { color: var(--accent-text); font-weight: 600; }
.fill__bar { height: 8px; border-radius: 2px; background: var(--lamp-off); overflow: hidden; }
.fill__bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 300ms var(--ease-out); }
.fill__bar.low i { background: var(--amber); }
.fill__name { font-size: 14px; }
.gps-fills:empty { display: none; }

/* ---------- ISOBUS ---------- */
.view--isobus { display: grid; grid-template-rows: minmax(0, 1fr); position: relative; }
.view--isobus > .panel { padding-bottom: 50px; } /* Platz für die Seitenpunkte */
/* ---------- ISOBUS Seite 2 „Gespann“: Shop-Bilder groß nebeneinander, darunter Zustand und Schalter ---------- */
.iso-show { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 16px 20px; min-height: 0; overflow: auto; }
.iso-show .iso-head { justify-content: flex-start; }
.iso-stage { display: flex; justify-content: center; align-items: stretch; gap: clamp(12px, 2vw, 32px); min-height: 0; flex-wrap: wrap; }
.iso-fig { margin: 0; flex: 1 1 260px; max-width: 460px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; padding: 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.iso-fig.selected { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.iso-fig__pic { display: grid; place-items: center; height: clamp(150px, 28vh, 300px); border-radius: 10px;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--text) 9%, transparent), transparent 70%); }
.iso-fig__pic { position: relative; min-height: 0; }
.iso-fig__pic img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); user-select: none; }
.iso-fig__ph { display: grid; place-items: center; width: 45%; aspect-ratio: 1; border-radius: 50%; background: var(--panel); color: var(--muted); }
.iso-fig__ph svg { width: 45%; height: 45%; }
.iso-fig figcaption { display: grid; gap: 3px; }
.iso-fig figcaption small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.iso-fig figcaption b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iso-fig__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.iso-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.iso-chip.on { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: var(--text); border-color: var(--accent-line); }
.iso-fig__fill { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.iso-fig__fill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iso-fig__fill i { height: 8px; border-radius: 4px; background: var(--lamp-off); overflow: hidden; }
.iso-fig__fill i b { display: block; height: 100%; background: var(--accent); }
.iso-fig__fill em { font-style: normal; font: 600 13px var(--font-num); color: var(--text); }
.iso-fig__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; align-self: end; }
.iso-fig--tractor .iso-fig__pic { height: clamp(170px, 32vh, 340px); }
@media (max-width: 760px) { .iso-fig { flex-basis: 100%; } .iso-fig__pic { height: 160px; } }
.iso { position: relative; display: grid; grid-template-rows: auto auto auto auto; align-content: start; gap: 20px; padding: 16px 20px; min-height: 0; overflow: auto; }
.iso-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iso-head h2 { margin: 0; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.iso-group { display: flex; gap: 6px; }
.iso-group:empty { display: none; }
.iso-group button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.iso-group button small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.iso-group button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.iso-group button[aria-pressed="true"] small { color: inherit; }
/* Gespann: vorne links, Zugmaschine (Front nach links) in der Mitte, hinten rechts */
/* Vorne und hinten gleich hoch: Reihe so hoch wie die höhere Seite, Karten füllen sie */
.iso-rig { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); gap: 16px; align-items: stretch; align-self: start; min-height: 0; }
.iso-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.iso-side .iso-card { flex: 1; }
.iso-tractor { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
/* Bild ist hochkant (280×466) und wird gedreht: Rand gleicht die ungedrehte Höhe aus (140 × 466/280 ≈ 233 → sichtbar 140) */
.iso-tractor__top { width: 140px; transform: rotate(-90deg); margin: -36px 0; }
/* Shop-Bild der Maschine (freigestellt, Schrägansicht): passt sich der Spalte an */
.iso-tractor__shop { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: contain; }
/* Maschine mit eigenen Funktionen (Häcksler, Mähdrescher …): breitere Mitte, Schalter unter dem Bild */
.iso-rig.has-machine { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); }
.iso-tiles--machine { width: 100%; margin-top: 4px; text-align: left; font-weight: 400; color: var(--text); }
.iso-none { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.iso-card { display: grid; gap: 12px; align-content: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); opacity: .55; transition: opacity .2s; }
.iso-card.in-group { opacity: 1; }
.iso-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.iso-card header div { display: grid; gap: 2px; min-width: 0; }
/* Im Spiel (Taste G) gewähltes Gerät bzw. Zugmaschine: Rahmen + Marke oben rechts */
.iso-card.selected { opacity: 1; border-color: var(--accent); }
.iso-sel { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.iso-tractor.selected img { filter: drop-shadow(0 0 10px var(--accent)); }
.iso-old { grid-column: 1 / -1; border-color: var(--accent); color: var(--text); }
.iso-card header b { font-size: 15px; }
.iso-card header small { color: var(--muted); font-size: 12px; }
@keyframes iso-blink { 50% { opacity: .2; } }
/* Schalter-Kacheln: gleich im Gerät (klein) und für die Gruppe (unten) – Funktion, Zustand mit Punkt, Tipp-Aktion */
.iso-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.iso-globalbox { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.iso-globalbox[hidden] { display: none; }
.iso-ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iso-ghead h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.iso-ghead h3 small { font-size: 12px; margin-left: 8px; color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.iso-global { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.iso-global:empty { display: none; }
.iso-switch { display: grid; gap: 6px; justify-items: start; align-content: center; text-align: left; padding: 12px 16px; min-height: 72px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.iso-switch small { color: var(--muted); font-size: 12px; font-weight: 600; }
.iso-switch b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
/* Zustand über den Rahmen: Akzent = an, orange = gemischt bzw. bewegt sich (blinkt), sonst neutral */
.iso-switch[data-state="on"] { border-color: var(--accent); }
.iso-switch[data-state="mixed"], .iso-switch[data-state="moving"] { border-color: var(--warn, var(--helper-orange)); }
.iso-switch[data-state="moving"] { animation: iso-blink-border 1s infinite; }
@keyframes iso-blink-border { 50% { border-color: var(--line); } }
.iso-switch--sm { min-height: 60px; padding: 10px 12px; background: var(--bg); }
.iso-switch--sm b { font-size: 14px; }
.iso-switch:disabled { cursor: default; }
.iso-switch { transition: border-color 150ms ease, transform 140ms var(--ease-out); }
.iso-switch:not(:disabled):active { transform: scale(.97); }
.iso-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.iso-fills { display: flex; gap: 28px; flex-wrap: wrap; }
@media (max-width: 760px) { .iso { grid-template-rows: auto; align-content: start; } .iso-rig, .iso-rig.has-machine { grid-template-columns: 1fr; align-self: start; min-height: auto; } .iso-tractor__top { width: 80px; margin: 0; } .iso-tractor__shop { max-width: 200px; } }

/* ---------- Dashboard Live (Test): Bordcomputer-Bild aus dem Mod, Werte als SVG darüber ---------- */
.view--dashlive { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 44px; }
.dbl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dbl-seg { max-width: 100%; }
.dbl-seg button { padding: 0 14px; min-height: 40px; white-space: nowrap; }
.dbl-fullbtn { margin-left: auto; }
@media (max-width: 720px) { .dbl-seg { flex: 1 1 100%; } .dbl-seg button { padding: 0 4px; font-size: 12px; } .dbl-note { flex: 1; } }
/* Ladeanzeige in der Mitte, solange das Bild kommt */
.dbl-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 14px; pointer-events: none; }
.dbl-load i { width: 40px; height: 40px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--muted) 30%, transparent); border-top-color: var(--accent); animation: dbl-spin 800ms linear infinite; }
@keyframes dbl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dbl-load i { animation-duration: 2.4s; } }
/* Vollbild wie bei der Karte (.gps-full): Kopfzeile und Dock weg, Auswahl ausgeblendet, Knopf bleibt oben rechts */
.terminal.dbl-full .status, .terminal.dbl-full .dock { display: none; }
:root .terminal.dbl-full { grid-template-rows: minmax(0, 1fr); }
.terminal.dbl-full .views { padding: 0; }
.terminal.dbl-full .view--dashlive { grid-template-rows: minmax(0, 1fr); padding-bottom: 0; background: #000000; }
.terminal.dbl-full .dbl-head { position: absolute; top: 10px; right: 10px; z-index: 6; }
.terminal.dbl-full .dbl-head > :not(.dbl-fullbtn) { display: none; }
.terminal.dbl-full .dbl-dots.show { opacity: .7; } /* Vollbild: etwas zurückhaltender, gleiche Stelle */
.terminal.dbl-full .dbl-fullbtn { background: rgba(39,40,40,.78); border-color: transparent; color: #F1F2EC; }
[data-skin="fokus"] .terminal.dbl-full { grid-template-columns: minmax(0, 1fr); }
[data-skin="fokus"] .terminal.dbl-full .ts { display: none; }
[data-skin="fokus"] .terminal.dbl-full .views { grid-column: 1; grid-row: 1 / -1; }
.dbl-note { font-size: 14px; }
.dbl-stage { position: relative; min-height: 0; display: grid; }
.dbl-screen { width: 100%; height: 100%; display: block; font-family: Inter, system-ui, sans-serif; touch-action: pan-y; stroke: none; stroke-linecap: butt; } /* ohne die Icon-Striche aus „svg {}“ */
/* Farben wie in den Bildschirmen: Text dunkel am Tag, hell bei Nacht; auf den dunklen Rundinstrumenten immer hell */
.dbl-screen { --dbl-ink: #3A3C3E; --dbl-dim: #7C7F82; --dbl-track: #CDD0D3; --dbl-bg: #F0F0F0; --dbl-lime: #B3C719; }
.dbl-screen[data-mode="night"] { --dbl-ink: #F2F2F2; --dbl-dim: #A4A7AA; --dbl-track: #4A4D50; --dbl-bg: #2D2D2D; }
.dbl-ink { fill: var(--dbl-ink); }
.dbl-inv { fill: #FFFFFF; }
.dbl-dim { fill: var(--dbl-dim); }
.dbl-lime { fill: var(--dbl-lime); }
.dbl-s-lime { stroke: var(--dbl-lime); }
.dbl-s-warn { stroke: var(--helper-red); }
.dbl-s-dim { stroke: var(--dbl-dim); }
.dbl-f-lime { fill: var(--dbl-lime); }
.dbl-f-dim { fill: var(--dbl-dim); }
.dbl-f-warn { fill: var(--helper-red); }
.dbl-f-track { fill: var(--dbl-track); }
.dbl-f-bg { fill: var(--dbl-bg); }
.dbl-f-panel { fill: #1C1C1C; }
.dbl-f-blue { fill: #1A9BE0; }
/* Markenfarben der Bildschirme (Fendt-Grün, John-Deere-Grün) */
.dbl-fgreen { fill: #5FAE32; }
.dbl-s-fgreen { stroke: #5FAE32; }
.dbl-s-amber { stroke: var(--helper-orange); }
.dbl-jdgreen { fill: #2E7D1E; }
.dbl-f-fgreen { fill: #5FAE32; }
.dbl-f-jdgreen { fill: #2E7D1E; }
.dbl-f-jdsel { fill: color-mix(in srgb, #2E7D1E 30%, transparent); }
.dbl-s-ink { stroke: var(--dbl-ink); }

/* ---------- Licht ---------- */
.view--lights { display: grid; }
.lt { grid-template-rows: auto minmax(0, 1fr) auto; }
/* Kacheln an ihrer Stelle am Traktor: vorne oben, hinten unten, Blinker links/rechts */
.lt-rig { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(200px, 280px) minmax(130px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "front front front" "left fig right" "back back back"; gap: 12px; align-self: stretch; min-height: 0; }
.lt-front, .lt-back { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lt-front { grid-area: front; } .lt-back { grid-area: back; }
.lt-front .lt-key, .lt-back .lt-key { width: 180px; }
.lt-side { display: grid; align-content: center; }
.lt-side--left { grid-area: left; justify-items: end; } .lt-side--right { grid-area: right; justify-items: start; }
.lt-side .lt-key { width: 160px; }
/* Licht-Kachel wie eine Taste: Symbol in Tastenfarbe (--c), Lampenbalken, aktiv eingefärbt */
.lt-key {
  --c: var(--key-neutral);
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
@media (min-width: 1000px) {
  .lt-rig { grid-template-columns: minmax(170px, 1fr) minmax(240px, 380px) minmax(170px, 1fr); gap: 16px; }
  .lt-front .lt-key, .lt-back .lt-key { width: clamp(180px, 17vw, 240px); }
  .lt-side .lt-key { width: clamp(170px, 15vw, 220px); }
  .lt-key b { font-size: 17px; }
  .lt-fig { max-height: 460px; }
}
.lt-key svg { width: 28px; height: 28px; flex: none; color: var(--c); }
.lt-key small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.lt-key b { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.lt-key::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--lamp-off); transition: background .15s, box-shadow .15s; }
.lt-key:is([data-state="on"], [data-state="blink"]) { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 12%, var(--panel-2)); }
.lt-key:is([data-state="on"], [data-state="blink"])::before { background: var(--c); box-shadow: 0 0 12px var(--c); }
.lt-key[data-state="mixed"]::before { background: linear-gradient(90deg, var(--c) 50%, var(--lamp-off) 50%); }
.lt-key[data-state="blink"]::before, .lt-key[data-state="blink"] svg { animation: lt-blink .8s steps(1) infinite; }
.lt-key:active { transform: scale(.97); }
/* Kacheln am Traktor: kein Rahmen, Fläche läuft in Strahlrichtung aus; Lampenbalken auf der Traktorseite */
.lt-key--beam { --to: top; --a: 0%; border: 0; background: linear-gradient(to var(--to), color-mix(in srgb, var(--c) var(--a), var(--panel-2)) 0%, transparent 100%); }
.lt-key--beam:is([data-state="on"], [data-state="blink"]) { --a: 28%; background: linear-gradient(to var(--to), color-mix(in srgb, var(--c) var(--a), transparent) 0%, transparent 100%); }
.lt-key--beam[data-dir="up"] { --to: top; }
.lt-key--beam[data-dir="up"]::before { top: auto; bottom: 0; border-radius: 4px 4px 0 0; }
.lt-key--beam[data-dir="down"] { --to: bottom; }
.lt-key--beam[data-dir="left"] { --to: left; justify-content: flex-start; }
.lt-key--beam[data-dir="right"] { --to: right; }
.lt-key--beam:is([data-dir="left"], [data-dir="right"])::before { top: 12px; bottom: 12px; left: auto; right: 0; width: 4px; height: auto; border-radius: 4px 0 0 4px; }
.lt-key--beam[data-dir="right"]::before { right: auto; left: 0; border-radius: 0 4px 4px 0; }
@media (prefers-reduced-motion: reduce) { .lt-key[data-state="blink"]::before, .lt-key[data-state="blink"] svg { animation: none; } }
/* Traktorbild füllt die freie Mitte, bestimmt aber nicht deren Höhe (sonst ragten die Kacheln bei
   niedrigen Bildschirmen oben in die Überschrift) */
.lt-center { grid-area: fig; position: relative; min-height: 140px; }
.lt-fig { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 360px; margin: auto; overflow: visible; }
.lt-fig { --lt-beam: #fff6c8; --lt-head: #FFD84A; --lt-work: #F2F5FF; } /* Fahrlicht gelblich, Arbeitslicht weißlich */
.lt-beam { mix-blend-mode: screen; } /* Weichzeichner im SVG (#ltSoft) */
:root[data-theme="day"] .lt-fig { --lt-beam: #f2c200; --lt-head: #F2B800; --lt-work: #9DB0CC; } /* auf Hell kräftiger, sonst unsichtbar; Weiß als kühles Grau */
:root[data-theme="day"] .lt-beam { mix-blend-mode: multiply; }
.lt-blink { animation: lt-blink .8s steps(1) infinite; }
.lt-beacon { animation: lt-pulse 1s ease-in-out infinite; }
@keyframes lt-blink { 50% { opacity: 0; } }
@keyframes lt-pulse { 50% { opacity: .35; } }
.lt-quick { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 760px) {
  .lt { grid-template-rows: auto; align-content: start; } /* untereinander, die Ansicht scrollt (wie ISOBUS) */
  .lt-rig { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "fig fig" "front front" "left right" "back back"; align-self: start; min-height: auto; }
  .lt-front, .lt-back { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .lt-center { height: 200px; }
  .lt-front .lt-key, .lt-back .lt-key, .lt-side .lt-key { width: 100%; }
  .lt-side--left, .lt-side--right { justify-items: stretch; }
}
.iso .map-empty { background: var(--panel); border-radius: inherit; }

@media (max-width: 1000px) {
  .wk { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr); overflow-y: auto; }
  /* einspaltig: linke Spalte so hoch wie ihr Inhalt (sonst schob die Karte sich über Tempo und Tempomat); Traktorbild entfällt */
  .wk-left { min-height: auto; grid-template-rows: none; }
  .wk-vehicle { display: none; }
  /* „nur Fahrzeug“ hat keine Karte darunter: Spalte füllt die Höhe, Traktor bleibt */
  .wk[data-variant="solo"] { grid-template-rows: minmax(0, 1fr); }
  .wk[data-variant="solo"] .wk-left { min-height: 0; grid-template-rows: auto auto auto minmax(160px, 1fr) auto; }
  .wk[data-variant="solo"] .wk-vehicle { display: grid; }
  .ck-main { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .ck-center { display: none; }
}
@media (max-width: 600px) {
  .ck { padding: 10px 12px 12px; }
  .ck-icons { gap: 10px; }
  .ck-icons [data-ck] svg { width: 22px; height: 22px; }
  .ck-arrows { gap: 12px; }
  .ck-arrows [data-ck] svg { width: 30px; height: 30px; }
  .ck-main { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 22px; gap: 6px; }
  .ck-bar > svg { width: 22px; height: 22px; }
  .ck-seg { width: 10px; }
  .ck-read b { font-size: clamp(34px, 11vw, 56px); }
  .ck-read small { font-size: 12px; }
  .ck-icon { width: 26px; height: 26px; }
  .ck-bottom { flex-wrap: wrap; gap: 8px 16px; font-size: 13px; min-width: 0; }
  .ck-bottom__gap { display: none; }
  .ck-bottom svg { width: 22px; height: 22px; }
}

/* =====================================================================
   Design-Vorlage „Default“ – Formen und Regeln (Teil 1, data-base="default")
   Dunkle Leisten, Karten ohne Rahmen, leichte große Ziffern. Farben aus den Markenfarben in :root,
   die Teil 2 (unten) auf die Schwarz/Weiß-Palette umlegt.
   ===================================================================== */
[data-base="default"] .status { background: var(--brand-black); color: var(--brand-white); margin-bottom: 0; padding: 10px 20px;
  --muted: color-mix(in srgb, var(--brand-paper) 55%, var(--brand-grey)); --text: var(--brand-white); } /* Leiste bleibt auch am Tag dunkel */
[data-base="default"] .status .icon-btn { background: var(--brand-grey); border-color: transparent; color: var(--brand-white); border-radius: 10px; }
[data-base="default"] .brand { color: var(--brand-lime); }
[data-base="default"] .conn { background: var(--brand-grey); border-color: transparent; color: var(--brand-white); }
[data-base="default"] .views { padding: 0; }
[data-base="default"] .panel, [data-base="default"] .ck { border-color: transparent; border-radius: 0; }
[data-base="default"] .view > .panel, [data-base="default"] .drive-layout { border-radius: 0; }
[data-base="default"] .drive-classic, [data-base="default"] .wk, [data-base="default"] .board-normal, [data-base="default"] .cfg, [data-base="default"] .settings, [data-base="default"] .view--agri, [data-base="default"] .view--plan { padding: 12px 16px; }
[data-base="default"] .wk { gap: 0; padding: 0 0 34px; }
[data-base="default"] .wk-left { background: var(--panel); }
[data-base="default"] .wk-map .gps-panel { border-radius: 0; }
[data-base="default"] .dock { background: var(--brand-black); padding: 12px 20px; gap: 12px; }
[data-base="default"] .dock__item { background: color-mix(in srgb, var(--brand-grey) 55%, var(--brand-black)); border: 0; border-radius: 12px; color: var(--brand-paper); min-height: 64px; box-shadow: none; }
[data-base="default"] .dock__item[aria-current="page"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
[data-base="default"] .btn { border-radius: 8px; border-color: transparent; }
[data-base="default"] .btn--primary, [data-base="default"] .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
[data-base="default"] .icon-btn { border-radius: 8px; border-color: transparent; background: var(--panel-2); }
[data-base="default"] .key { border-radius: 6px; border-color: transparent; background: var(--panel-2); }
[data-base="default"] .key::before { left: 0; right: 0; border-radius: 0; }
[data-base="default"] .gauge__speed, [data-base="default"] .tile__head b, [data-base="default"] .cruise__value { font-weight: 400; }
[data-base="default"] .tile__head, [data-base="default"] .agri-card h3 { letter-spacing: .1em; }
[data-base="default"] .iso-key, [data-base="default"] .iso-status span { border-radius: 4px; border-color: transparent; }
[data-base="default"] .iso-figure .body { fill: var(--accent); }
[data-base="default"] { --wk-glass: color-mix(in srgb, var(--brand-black) 72%, transparent); --wk-glass-r: var(--chip-r); } /* = Feldkarte, für Arbeit „im GPS“ */
[data-base="default"] .gps-chip, [data-base="default"] .gps-stats, [data-base="default"] .gps-layers, [data-base="default"] .gps-fills, [data-base="default"] .fieldcard, [data-base="default"] :is(.gps-tools .icon-btn, .gps-layers-btn) { background: color-mix(in srgb, var(--brand-black) 72%, transparent); border-color: transparent; border-radius: var(--chip-r); }
[data-base="default"] .gps__vehicle path { fill: var(--accent); stroke: var(--brand-black); }
[data-base="default"] .cfg-main, [data-base="default"] .cfg-side { border-radius: 0; border-color: transparent; }

/* --- Überarbeitung nach Stitch-Richtlinie (docs/design/stitch/default/DESIGN.md, 8.10.2026) ---
   Ein Akzent, Gliederung über Tonwerte statt Rahmen, Farbe nur bei Zustand, zwei Radien (6 / 12). */
[data-base="default"] { --radius: 6px; --chip-in: 4px; }
[data-base="default"] .btn, [data-base="default"] .icon-btn, [data-base="default"] .status .icon-btn { border-radius: 6px; }
[data-base="default"] .kb { border-color: transparent; border-radius: 0; }
/* Seitentitel: ruhig in Satzschreibung wie „Arbeitsplaner“ und „Darstellung“, statt gesperrter Großbuchstaben */
[data-base="default"] .iso-head h2, [data-base="default"] .plan-head h2 { font-size: 20px; letter-spacing: -.01em; text-transform: none; }
[data-base="default"] .iso-ghead h3 { font-size: 13px; letter-spacing: .06em; color: var(--muted); }
[data-base="default"] .iso-ghead h3 small { color: var(--text); }
/* Zapfwelle an: Lime statt fremdem Gelb */
[data-base="default"] .kb-cell.on { background: var(--accent); color: var(--accent-ink); }
[data-base="default"] .kb-cell.on svg, [data-base="default"] .kb-cell.on small { color: var(--accent-ink); }
/* ISOBUS: keine Rahmen in Rahmen – Gerät als Tonfläche, Schalter nur bei Zustand mit Ring */
[data-base="default"] .iso-card, [data-base="default"] .iso-fig { border-color: transparent; border-radius: 6px; background: var(--panel-2); }
[data-base="default"] .iso-card.selected { border-color: var(--accent); }
[data-base="default"] .iso-chip { border-color: transparent; }
[data-base="default"] .iso-none { border-radius: 6px; }
[data-base="default"] .iso-switch { border-color: transparent; border-radius: 6px; background: var(--panel-2); }
[data-base="default"] .iso-switch--sm { background: var(--bg); }
[data-base="default"] .iso-switch[data-state="on"] { border-color: var(--accent); }
[data-base="default"] .iso-switch:is([data-state="mixed"], [data-state="moving"]) { border-color: var(--warn, var(--helper-orange)); }
/* Arbeitsplaner: Arbeitsart als Abschnitt mit Linie oben statt eingefärbter Karte, Felder als flache Kacheln */
[data-base="default"] .plan-body { gap: 16px; }
[data-base="default"] .plan-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
[data-base="default"] .plan-card__head { background: none; border-bottom: 0; border-top: 1px solid var(--line); }
[data-base="default"] .plan-card__toggle { padding: 12px 4px 10px; }
[data-base="default"] .plan-row { border-radius: 6px; }
[data-base="default"] .plan-card .plan-table { padding: 0 0 4px; }
[data-base="default"] .plan-card__head b { font-weight: 600; }
[data-base="default"] .plan-tiles { padding: 0; gap: 8px; }
[data-base="default"] .plan-tile { border-color: transparent; border-radius: 6px; }
[data-base="default"] .plan-tile.busy { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 8%, var(--panel-2)); }
@media (hover: hover) and (pointer: fine) { [data-base="default"] .plan-tile:hover { border-color: color-mix(in srgb, var(--tone) 40%, transparent); } }
/* Licht: Symbol nur farbig, wenn die Lampe brennt; ausgeschaltet ruhig und flach */
[data-base="default"] .lt-key { border-color: transparent; border-radius: 6px; }
[data-base="default"] .lt-key:not([data-state="on"], [data-state="blink"], [data-state="mixed"]) svg { color: var(--muted); }
[data-base="default"] .lt-key--beam:not([data-state="on"], [data-state="blink"]) { background: var(--panel-2); }
/* Tag: ohne Rahmen tragen die Flächen den Unterschied – Kacheln in Papier statt Fast-Weiß */
[data-base="default"][data-theme="day"] :is(.iso-switch, .lt-key, .iso-card .iso-switch--sm) { background: var(--brand-paper); }
[data-base="default"][data-theme="day"] .iso-card { background: color-mix(in srgb, var(--brand-paper) 45%, var(--brand-white)); }
[data-base="default"][data-theme="day"] .lt-key:is([data-state="on"], [data-state="blink"]) { background: color-mix(in srgb, var(--c) 18%, var(--brand-paper)); }
/* Verbindung: Punkt atmet, solange Daten fließen – das einzige dauerhafte Bewegungszeichen */
[data-base="default"] .conn:is([data-state="game"], [data-state="demo"]) i { animation: conn-live 2.4s var(--ease-in-out) infinite; }
@keyframes conn-live { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { [data-base="default"] .conn i { animation: none; } }

/* =====================================================================
   Design-Vorlage „Default“ – Farben (Teil 2; bis 11.10.2026 Arbeitstitel „Plantage“,
   seitdem Default – der frühere Default und „Kachel“ sind entfallen, Nutzerwunsch).
   Flächen neutral Schwarz/Weiß wie bei Fokus (Grautreppe aus dem Kit, bester
   Kontrast); die Farben aus den Farbtafeln des Nutzers nur als Akzente:
   Lime nachts Inchworm #B1FA63, am Tag Sulu #CCEC60 (SKINS.default.accent
   in app.js), Schrift darauf Te Papa Green, Akzentschrift am Tag Spectra,
   Violett statt Blau, Orange, Plum. Teil 1 rechnet alles aus den
   Markenfarben; hier werden sie umgelegt.
   ===================================================================== */
:root[data-skin="default"] {
  --pl-tepapa: #223B38; --pl-spectra: #2F5954; --pl-tasman: #C9D9CD;
  --pl-inchworm: #B1FA63; --pl-sulu: #CCEC60; --pl-codgray: #151515; --pl-silver: #D1D1D1;
  --pl-orange: #FE7733; --pl-violet: #B2A1FF; --pl-plum: #741E6A;
  --brand-black: var(--pl-codgray);     /* Leisten, Nachtgrund */
  --brand-grey: #414141;                /* Linien nachts, Mischbasis */
  --brand-paper: #F0F0F0;               /* Taggrund */
  --brand-white: #FFFFFF;
  --brand-lime: var(--pl-inchworm);
  --brand-olive: var(--pl-spectra);     /* Akzentschrift und eigene Felder am Tag */
  --helper-blue: var(--pl-violet);      /* Spur, Fernlicht, fremde Felder */
  --helper-orange: var(--pl-orange);
  --helper-violet: color-mix(in srgb, var(--pl-plum) 45%, var(--pl-violet));
}
/* Aktive GPS-Spur und Banner im Blau von Fokus (Nutzerwunsch 11.10.2026: besserer Kontrast als Violett) */
:root[data-skin="default"] { --gps-active: #007AFF; }
/* Flächenstufen (Nutzerwunsch 11.10.2026): Leisten → Inhalt → Karte → Unterfläche je mindestens 5 Punkte
   Helligkeit (HSB-B) Abstand. Leisten #151515 = B 8. */
:root[data-skin="default"]:not([data-theme="day"]) {
  --bg: #232323; --panel: #303030; --panel-2: #3C3C3C; --line: #4A4A4A;
  --text: #FFFFFF; --muted: #ADAEB0; --lamp-off: #414141; /* #A2A3A5 lag auf getönten Flächen unter 4,5:1 */
}
:root[data-skin="default"][data-theme="day"] {
  --bg: #EBEBEB; --panel: #FFFFFF; --panel-2: #F2F2F2; --line: var(--pl-silver);
  --text: var(--pl-codgray); --muted: #616161; /* #757575 hatte nur 4,0:1 */ --lamp-off: var(--pl-silver);
  --accent-line: var(--pl-spectra);
  --helper-blue: color-mix(in srgb, var(--pl-violet) 62%, var(--pl-plum)); /* helles Violett ist auf Weiß zu schwach */
  --helper-violet: var(--pl-plum);
}
/* Gewählte Taste im Konfigurator: Lime-Hauch auf dem festen Grau der Gerätevorschau */
[data-skin="default"] .cfg-key.selected { background: color-mix(in srgb, var(--accent) 22%, #2C2D2E); }
/* Menüleiste (Nutzerwunsch 11.10.2026): ohne Flächen, Abstand und Trenner. Die Ansichten als Block mittig, nur
   Symbole (26 px) in 72-px-Feldern wie Fokus; nur der gewählte Punkt zeigt seinen Namen und wird so breiter.
   Fahren steht getrennt ganz links (Claas-Traktor von hinten) und bleibt wie Einstellungen (ganz rechts) nur Symbol.
   Gewählt: 4-px-Lime-Strich an der Unterkante. Innenabstand der Leiste steht bei den sicheren Zonen (weiter unten). */
[data-skin="default"] .dock { position: relative; gap: 8px; justify-content: center; } /* luftiger wie Fokus */
[data-skin="default"] .dock__sep { display: none; }
[data-skin="default"] .dock__item { flex: 0 0 72px; padding: 0; justify-content: center; background: transparent; border-radius: 0; color: #A2A3A5; position: relative; } /* inaktiv wie Fokus */
[data-skin="default"] :is(.dock__item:not([aria-current="page"]), .dock__item[data-target="drive"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* nur optisch weg; Fahren wie Einstellungen immer nur Symbol */
/* Inaktiv nur Symbol, daher größer (32 px, Nutzerwunsch 11.10.2026); aktiv mit Namen daneben kleiner (24 px) */
[data-skin="default"] .dock__item svg { width: 32px; height: 32px; }
[data-skin="default"] .dock__item[aria-current="page"]:not([data-target="drive"], .dock__item--icon) svg { width: 24px; height: 24px; }
[data-skin="default"] .dock__item[aria-current="page"] { flex: 0 0 auto; padding: 0 20px; background: transparent; color: var(--brand-white); box-shadow: none; }
/* Strich als eigenes Element, damit er oben links und rechts 4 px gerundet sein kann */
[data-skin="default"] .dock__item[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--accent); }
[data-skin="default"] .dock__item[aria-current="page"] svg { color: var(--accent); }
[data-skin="default"] .dock__item--icon { position: absolute; top: 0; bottom: var(--sa-b); right: var(--sa-r); width: 72px; }
[data-skin="default"] .dock__item[data-target="drive"] { position: absolute; top: 0; bottom: var(--sa-b); left: var(--sa-l); width: 72px; padding: 0; }
/* Fahren-Symbol: in Default der Claas-Traktor von hinten (gefüllt), sonst der Tacho */
.dock__alt { display: none; }
[data-skin="default"] .dock__item .dock__alt { display: block; width: 36px; height: 36px; } /* Claas-Traktor hat mehr Rand im Symbol – so wirkt er so groß wie das Zahnrad */
[data-skin="default"] .dock__item .dock__alt + svg { display: none; }
@media (max-width: 860px) {
  [data-skin="default"] .dock { gap: 0; }
  [data-skin="default"] .dock__item, [data-skin="default"] .dock__item[aria-current="page"] { flex: 1 1 0; padding: 0; }
  [data-skin="default"] :is(.dock__item--icon, .dock__item[data-target="drive"]) { position: relative; inset: auto; width: auto; }
}
/* Inhalte reichen von der Kopfzeile bis zur Menüleiste; die Seitenpunkte schweben 16 px darüber auf dem Inhalt */
[data-skin="default"] :is(.drive-classic, .board-normal, .cfg, .settings, .view--agri, .view--plan) { padding-top: 0; padding-bottom: 0; }
[data-skin="default"] .wk { padding-bottom: 0; }
[data-skin="default"] .view--isobus > .panel, [data-skin="default"] .view--dashlive { padding-bottom: 0; }


.syskeys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.syskeys label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.syskeys input { min-width: 0; width: 100%; }
.syskeys input { min-height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 600 14px var(--font-num); user-select: text; }
@media (max-width: 600px) {
  .wk { grid-template-rows: auto minmax(560px, 1fr); }
  /* Seitenpunkte schweben: Inhalt darf darunter hervorscrollen */
  .iso { padding-bottom: 64px; }
}


.gps__grid { display: none; }
#gpsGrid path { fill: none; stroke: rgba(0,0,0,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }


/* =====================================================================
   Design-Vorlage „Horizont“ (Arbeitstitel) – nach einem Kabinen-Zukunftskonzept:
   Panorama-Kopfzeile mit Feld im Abendlicht, dunkle, weich gerundete Displays mit Lime-Glow,
   leichte große Ziffern, Feldkarte mit leuchtender Feldgrenze.
   Eigenes Kopfzeilenbild: web/assets/horizont.jpg (fehlt es, bleibt der gezeichnete Verlauf).
   ===================================================================== */
.hz { display: none; }
:root[data-skin="horizont"] { --radius: 20px; --chip-in: 10px; --hz-glow: rgba(179,199,25,.16); }
:root[data-skin="horizont"][data-theme="night"] {
  --bg: #262627; --panel: #333435; --panel-2: #404142; --line: #47494C; --text: #F3F4EF; --muted: #B8B8B8; --lamp-off: #38393B; /* #9a9a9a: 4,4:1, auf getönten Köpfen 3,3:1 */
  --accent-line: var(--accent); --map-bg: #292A2B; --shadow: none;
  --field-free: #8d8f88; --field-own: var(--accent); --field-other: #EBECE3;
  --gps-ground: #2A2B2C; --gps-field: #2F3031; --gps-line: #6e716a;
}
:root[data-skin="horizont"][data-theme="day"] {
  --bg: #E4E5DA; --panel: #F4F5F0; --panel-2: #E7E8DE; --line: #E4E5DA; --text: #2C2D2E; --muted: #5C5C5C; --lamp-off: #EBECE3;
  --accent-text: #66721F; --accent-line: #B3C719; --shadow: none; --hz-glow: rgba(179,199,25,.18);
  --gps-ground: #EBECE3; --gps-field: #EDEEE6; --gps-line: #8c8f88;
}

/* Kopfzeile als Panoramastreifen */
[data-skin="horizont"] .status {
  grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 20px; min-height: 96px; margin: 12px 12px 0; padding: 0 18px 0 24px;
  border-radius: var(--radius); overflow: hidden; position: relative; color: #FFFFFF; isolation: isolate;
  background:
    linear-gradient(90deg, rgba(40,41,41,.95) 0%, rgba(40,41,41,.78) 28%, rgba(40,41,41,.3) 62%, rgba(40,41,41,.12) 100%),
    url("assets/horizont.jpg") center 62% / cover no-repeat,
    radial-gradient(ellipse 22% 70% at 68% 46%, rgba(255,236,190,.95), rgba(255,196,110,.45) 45%, transparent 75%),
    linear-gradient(180deg, #cdb98d 0%, #b6965a 36%, #6f5a33 44%, #9a7a35 52%, #b48a34 70%, #6e4f1c 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
[data-skin="horizont"] .status::before, [data-skin="horizont"] .status::after {
  content: ""; position: absolute; left: 24px; right: 38%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0)); z-index: -1;
}
[data-skin="horizont"] .status::before { top: 12px; }
[data-skin="horizont"] .status::after { bottom: 12px; }
[data-skin="horizont"] .status .vehicle, [data-skin="horizont"] .status .stat { display: none; }
[data-skin="horizont"] .brand { color: var(--accent); }
[data-skin="horizont"] .status__center { justify-self: end; }
[data-skin="horizont"] .conn { background: rgba(0,0,0,.35); border-color: transparent; color: #FFFFFF; }
[data-skin="horizont"] .status .icon-btn { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.12); color: #FFFFFF; }
[data-skin="horizont"] .hz { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); min-width: 0; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hz__wx { display: flex; align-items: center; gap: 10px; }
.hz__wx svg { width: 38px; height: 38px; stroke-width: 1.4; }
.hz__wx b { font: 400 40px/1 var(--font-num); letter-spacing: -.02em; }
.hz__col { display: grid; gap: 2px; min-width: 0; white-space: nowrap; }
.hz__col b { font: 600 19px/1.15 var(--font); }
.hz__col span { font: 400 16px/1.2 var(--font); opacity: .92; overflow: hidden; text-overflow: ellipsis; }
.hz__turn { position: relative; width: 72px; height: 72px; flex: none; }
.hz__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.hz__ring circle { fill: rgba(0,0,0,.18); stroke: rgba(255,255,255,.45); stroke-width: 3; }
.hz__ring #hzRing { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .4s; }
.hz__turn-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.hz__turn-in svg { width: 18px; height: 18px; stroke-width: 2.4; }
.hz__turn-in b { font: 600 20px/1 var(--font-num); }
.hz__turn-in small { font-size: 12px; opacity: .85; }
.hz__turn[data-state="soon"] #hzRing, .hz__turn[data-state="headland"] #hzRing { stroke: var(--helper-orange); }
.hz__next b { font: 400 34px/1 var(--font-num); }
.hz__next span { font-size: 15px; }
@media (max-width: 1100px) { [data-skin="horizont"] .hz > .hz__col:nth-child(3) { display: none; } }
@media (max-width: 820px) { [data-skin="horizont"] .hz > :is(.hz__col:nth-child(2), .hz__next) { display: none; } }

/* Displays: dunkel, weich gerundet, leiser Lime-Glow an der Kante */
[data-skin="horizont"] .panel { background: var(--panel); border-color: var(--line); border-radius: var(--radius); }
[data-skin="horizont"] :is(.gps-panel, .ck, .map-panel) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 40px var(--hz-glow); }
[data-skin="horizont"] :is(.gauge__speed, .ck-read b, .ccg__slot b, .field-big, .gps-stats b) { font-weight: 400; }
[data-skin="horizont"] .wk-speed > div b { font-weight: 400; }
[data-skin="horizont"] :is(.gauge__track, .ck-arc__track) { stroke: color-mix(in srgb, var(--text) 18%, transparent); }
[data-skin="horizont"] .gauge__track { stroke-width: 6; }
[data-skin="horizont"] .ck-arc__track { stroke-width: 8; }
[data-skin="horizont"] :is(.gauge__value, .ck-arc__val, .ck-arc__tick) { stroke: var(--accent); }
[data-skin="horizont"] :is(.segbar i.on, .ck-seg i.on, .wk-fuel i, .fill__bar i) { background: var(--accent); }
[data-skin="horizont"] .tile__head, [data-skin="horizont"] .agri-card h3 { letter-spacing: .02em; text-transform: none; font-weight: 400; }

/* Dock als Reiter: aktive Seite mit Lime-Linie oben, sonst nur Text */
[data-skin="horizont"] .dock { gap: 0; padding: 6px 12px 12px; }
[data-skin="horizont"] .dock__item { border: 0; border-radius: 0; background: transparent; font-weight: 400; box-shadow: inset 0 2px 0 var(--line); }
[data-skin="horizont"] .dock__item[aria-current="page"] { color: var(--text); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
[data-skin="horizont"] .dock__item[aria-current="page"] svg { color: var(--accent); }
[data-skin="horizont"][data-theme="day"] .dock__item[aria-current="page"] svg { color: var(--accent-text); } /* Lime auf Hell 1,6:1 → Oliv */

/* Tasten */
[data-skin="horizont"] .key { border-radius: 18px; border-color: var(--line); }
[data-skin="horizont"] .key.on { box-shadow: 0 0 0 1px var(--accent), 0 0 22px var(--hz-glow); }
[data-skin="horizont"] .iso-key { border-radius: 16px; }
[data-skin="horizont"] :is(.btn, .icon-btn) { border-radius: 14px; }

/* GPS & Monitor: Feldgrenze leuchtet Lime, andere Felder weiß umrandet */
[data-skin="horizont"] .gps__fields polygon { fill: var(--gps-field); stroke: rgba(255,255,255,.55); stroke-width: 2; }
[data-skin="horizont"] .gps__fields polygon.current { stroke: none; }
[data-skin="horizont"] .gps__edge { stroke: var(--gps-edge); stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(0,0,0,.45)); }
[data-skin="horizont"] { --wk-glass: rgba(43,44,45,.78); --wk-glass-r: var(--chip-r); }
[data-skin="horizont"] :is(.gps-chip, .gps-stats, .gps-layers, .gps-fills, .fieldcard, :is(.gps-tools .icon-btn, .gps-layers-btn), .gps-hint, .gps-state span) {
  background: rgba(43,44,45,.78); border-color: rgba(255,255,255,.08); color: #F3F4EF; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--chip-r);
}
[data-skin="horizont"] .gps-state #gpsZone { background: var(--accent); color: #2B2C2D; }
[data-skin="horizont"] .map__field { fill: #2E2E2F; fill-opacity: .55; stroke: var(--field-other); stroke-opacity: .55; stroke-width: 2; }
[data-skin="horizont"] .map__field[data-owner="own"] { stroke: var(--field-own); stroke-opacity: 1; stroke-width: 3; fill: var(--field-own); fill-opacity: .12; filter: drop-shadow(0 0 5px rgba(179,199,25,.6)); }
[data-skin="horizont"] .map__field.selected { stroke: #FFFFFF; stroke-opacity: 1; fill-opacity: .25; }
[data-skin="horizont"] .map__unit.self path, [data-skin="horizont"] .map__unit.self circle { stroke: #FFFFFF; }
[data-skin="horizont"] .map__label { fill: #EBECE3; font-weight: 400; }
[data-skin="horizont"][data-theme="day"] .status .icon-btn { color: #FFFFFF; }

/* ---------- Bildschirm-Rollen: ein Gerät zeigt nur einen Teil ---------- */
.screen-hotspot { display: none; }
:root:not([data-screen="all"]) .dock { display: none; }
:root:not([data-screen="all"]) .terminal { grid-template-rows: auto minmax(0, 1fr); }
:root:not([data-screen="all"]) .screen-hotspot { display: block; position: fixed; left: 0; top: 0; width: 72px; height: 72px; z-index: 50; opacity: 0; border: 0; background: transparent; touch-action: none; -webkit-tap-highlight-color: transparent; }
/* Tacho und GPS nutzen den ganzen Bildschirm */
:root[data-screen="tacho"] .status, :root[data-screen="gps"] .status { display: none; }
:root[data-screen="tacho"] .terminal, :root[data-screen="gps"] .terminal { grid-template-rows: minmax(0, 1fr); }
:root[data-screen="gps"] .views { padding: 0; }
:root[data-screen="gps"] .gps-panel { border-radius: 0; border: 0; }
:root[data-screen="gps"] #gpsFull { display: none; }
.set--screen { grid-column: 1 / -1; }
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.screens button { display: grid; gap: 4px; padding: 12px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.screens button small { color: var(--muted); font-size: 12px; }
.screens button[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.screen-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.screen-links li { display: grid; gap: 2px; font-size: 13px; }
.screen-links code { font-size: 12px; color: var(--muted); user-select: all; }

/* ---------- Tacho ---------- */
.view--tacho { display: grid; position: relative; }
.view--tacho[hidden] { display: none; }
.tc {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 64px; grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px 20px; padding: 18px 20px; min-height: 0; height: 100%;
  background: radial-gradient(ellipse 60% 80% at 50% 45%, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--bg) 75%);
  border-radius: var(--radius); border: 1px solid var(--line);
}
.view--tacho.is-off .tc { opacity: .35; }
.tc-off { display: none; }
.view--tacho.is-off .tc-off { display: grid; }
.tc-gauge { position: relative; display: grid; place-items: center; min-height: 0; height: 100%; }
.tc-arc { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.tc-arc__track { fill: none; stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 7; stroke-linecap: round; }
.tc-arc__val { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray .25s; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
.tc-gauge--rpm .tc-arc__val { stroke: color-mix(in srgb, var(--text) 75%, transparent); filter: none; }
.tc-ticks line { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1.5; }
.tc-cruise:not([transform]) { display: none; }
.tc-cruise circle { fill: var(--bg); stroke: var(--muted); stroke-width: 2.5; }
.tc-cruise.on circle { stroke: #FFFFFF; fill: var(--accent); }
.tc-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.tc-read b { font: 400 clamp(26px, 4.4vw, 54px)/1 var(--font-num); letter-spacing: -.02em; }
.tc-read small { color: var(--muted); font-size: 13px; letter-spacing: .04em; margin-top: 4px; }
.tc-read--big b { font-size: clamp(56px, 11vw, 150px); font-weight: 400; }
.tc-read--big small { font-size: 16px; }
.tc-max { opacity: .6; margin-left: 6px; }
.tc-gear { display: flex; gap: 6px; margin-top: 10px; }
.tc-gear i { font: 600 15px/1 var(--font-num); font-style: normal; padding: 5px 10px; border-radius: 8px; background: var(--panel-2); }
.tc-gear i:first-child { color: var(--accent-text); }
.tc-turn { display: grid; place-items: center; color: var(--lamp-off); align-self: stretch; }
.tc-turn svg { width: 52px; height: 52px; stroke: color-mix(in srgb, var(--muted) 40%, transparent); }
.tc-turn.on svg { stroke: var(--green); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--green) 70%, transparent)); animation: blink .8s steps(1) infinite; }
.tc-bars { display: grid; gap: 14px; align-content: center; }
.tc-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.tc-row svg { width: 20px; height: 20px; color: var(--muted); }
.tc-row b { font: 400 16px var(--font-num); min-width: 64px; text-align: right; }
.tc-row--kv span { color: var(--muted); }
.tc-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s; }
.tc-bar.low i { background: var(--red); }
.tc-lamps { grid-column: 2 / 5; display: flex; justify-content: center; gap: 22px; }
.tc-lamps .lamp { padding: 0; background: none; border: 0; }
.tc-foot { grid-column: 1 / -1; display: flex; justify-content: center; gap: 28px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; }
.tc-foot b { color: var(--text); font: 400 15px var(--font-num); }
@media (max-width: 760px) {
  .tc { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.4fr) 40px; }
  .tc-bars { grid-column: 2 / 4; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-lamps { grid-row: 3; }
  .tc-gauge--rpm { display: grid; }
}
:root[data-screen="tacho"] .views { padding: 0; }
:root[data-screen="tacho"] .tc { border-radius: 0; border: 0; }

/* ---------- Horizont: Feinschliff ---------- */
[data-skin="horizont"] .map__field[data-owner="own"] { fill-opacity: .06; }
[data-skin="horizont"] .wk-left { box-shadow: 0 0 0 1px var(--line); }
[data-skin="horizont"] .agri-side .panel { border-radius: 18px; }
[data-skin="horizont"] .tc { background: radial-gradient(ellipse 55% 75% at 50% 45%, rgba(179,199,25,.07), transparent 70%), var(--panel); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 40px var(--hz-glow); }
[data-skin="horizont"] .screens button { border-radius: 16px; }

/* =====================================================================
   Design-Vorlage „Fokus“ (Arbeitstitel, Name vom Nutzer, 9.10.2026) – nach dem Fahrzeug-Display im Pkw:
   feste Fahrzeug-Spalte links (Fahrstufe, großes Tempo, Tempomat als Schild, Leuchten, Gespann von oben,
   Hinweiskarten), rechts die Ansicht randlos, unten eine schwarze Leiste nur mit Symbolen.
   Ruhig, fast farblos; Lime nur für „aktiv“. Keine Logos.
   ===================================================================== */
.ts { display: none; }
/* Werte aus der Figma-Bibliothek „Fokus Dashboard UI Component Library (Community)“, Seite „Model 3 UI Kit“:
   Grautreppe #FFFFFF · #FAFAFA · #F0F0F0 · #E0E0E0 · #D0D1D2 · #A2A3A5 · #757575 · #414141 · #171717,
   Licht-Grün #25CB55, Spurblau #005AFF, Rot #ED4E3B. Kleine Radien (4–8 px), keine Glas-Effekte. */
:root[data-skin="fokus"] { --radius: 6px; --chip-in: 2px; --gap: 10px; --ts-green: #25CB55; --ts-blue: #005AFF; --red: #ED4E3B; }
:root[data-skin="fokus"][data-theme="night"] {
  --bg: #242424; --panel: #313131; --panel-2: #3D3D3D; --line: #4A4A4A; --text: #FFFFFF; --muted: #ADAEB0; --lamp-off: #414141;
  --ts-side: #171717; --ts-speed: #E0E0E0; --ts-rule: #414141; --ts-road: #1D1D1D; --ts-lane: #414141; --ts-card: #414141; --ts-shadow: none;
  --map-bg: #1A1A1A; --gps-ground: #171717; --gps-field: #1E1E1E; --gps-line: #5A5A5A;
}
:root[data-skin="fokus"][data-theme="day"] {
  --bg: #EBEBEB; --panel: #FFFFFF; --panel-2: #F2F2F2; --line: #D0D1D2; --text: #171717; --muted: #616161; --lamp-off: #D0D1D2;
  --accent-text: #66721F; --accent-line: #B3C719;
  --ts-side: #FAFAFA; --ts-speed: #616161; --ts-rule: #D0D1D2; --ts-road: #F3F3F3; --ts-lane: #D0D1D2; --ts-card: #FFFFFF;
  --ts-shadow: 1px 1px 12px rgba(65,65,65,.07), -2px -2px 20px rgba(117,117,117,.08), 5px -3px 30px rgba(117,117,117,.1);
  --gps-ground: #EDEDED; --gps-field: #E4E4E4; --gps-line: #A2A3A5;
}
/* Gerüst: Spalte links über Kopfzeile und Inhalt, Leiste unten über die ganze Breite */
[data-skin="fokus"] .terminal { grid-template-columns: clamp(270px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
[data-skin="fokus"] .ts { grid-column: 1; grid-row: 1 / 3; }
[data-skin="fokus"] .status { grid-column: 2; grid-row: 1; }
[data-skin="fokus"] .views { grid-column: 2; grid-row: 2; padding: 0; }
[data-skin="fokus"] .dock { grid-column: 1 / -1; grid-row: 3; }
[data-skin="fokus"] .terminal.gps-full { grid-template-columns: minmax(0, 1fr); }
[data-skin="fokus"] .terminal.gps-full .ts { display: none; }
[data-skin="fokus"] .terminal.gps-full .views { grid-column: 1; grid-row: 1 / -1; }
/* Arbeit „Spalte im GPS“ und „nur Fahrzeug“: dort ist die Arbeit-Spalte die Fahrzeugspalte – die eigene Spalte entfällt */
[data-skin="fokus"] .terminal:has(#view-drive:not([hidden]) .wk:not([hidden]):not([data-variant="side"])) { grid-template-columns: minmax(0, 1fr); }
[data-skin="fokus"] .terminal:has(#view-drive:not([hidden]) .wk:not([hidden]):not([data-variant="side"])) .ts { display: none; }
[data-skin="fokus"] .terminal:has(#view-drive:not([hidden]) .wk:not([hidden]):not([data-variant="side"])) :is(.status, .views) { grid-column: 1; }

/* Fahrzeug-Spalte */
[data-skin="fokus"] .ts {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "drive drive" "lamps car" "cards cards";
  gap: 8px 8px; padding: 0 24px 16px 18px; background: var(--ts-side); color: var(--text); min-height: 0; overflow: hidden;
  box-shadow: var(--ts-shadow); position: relative; z-index: 1;
}
/* Statuszeile der Spalte: P R N D links, Tank wie Batterie rechts, feine Linie darunter (64 px wie im Kit) */
.ts__top { grid-area: top; display: flex; justify-content: space-between; align-items: center; height: 56px; margin-left: 6px; border-bottom: 2px solid var(--ts-rule); }
.ts__prnd { display: flex; gap: 5px; font: 400 17px/1.2 var(--font-num); letter-spacing: -.01em; }
.ts__prnd span { color: var(--muted); }
.ts__prnd span.on { color: var(--text); font-weight: 600; }
.ts__fuel { display: inline-flex; align-items: center; gap: 8px; font: 400 17px/1.2 var(--font-num); color: var(--ts-speed); }
.ts__fuel i { position: relative; width: 38px; height: 18px; padding: 2px; border: 1.5px solid var(--muted); border-radius: 4px; }
.ts__fuel i::after { content: ""; position: absolute; right: -5px; top: 5px; width: 3px; height: 6px; border-radius: 0 2px 2px 0; background: var(--muted); }
.ts__fuel b { display: block; height: 100%; border-radius: 1px; background: var(--muted); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 300ms var(--ease-out); }
.ts__fuel b.low { background: var(--red); }
/* Tempo groß in Grau (nicht Weiß), Einheit fett in Großbuchstaben darunter */
.ts__drive { grid-area: drive; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0 0 6px; }
.ts__speed { color: var(--ts-speed); }
.ts__speed b { display: block; font: 400 clamp(60px, 6.2vw, 80px)/.8 var(--font-num); letter-spacing: -.02em; }
.ts__speed small { display: block; margin-top: 10px; font: 600 15px/1.1 var(--font-num); text-transform: uppercase; }
/* Tempomat wie ein Tempo-Schild: rot umrandet, blass solange aus */
.ts__cruise { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--lamp-off); background: transparent; color: var(--muted); font: 600 17px var(--font-num); transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.ts__cruise.on { border: 5px solid var(--red); background: #FFFFFF; color: #1C1C1E; }
.ts__lamps { grid-area: lamps; display: grid; align-content: start; gap: 8px; padding-top: 4px; }
.ts__lamps [data-ck] { width: 40px; height: 40px; }
.ts__lamps [data-ck] svg { width: 30px; height: 30px; }
.ts__lamps [data-ck].ok { --on: var(--ts-green); }
.ts__lamps [data-ck].blue { --on: var(--ts-blue); }
.ts [data-ck="aiActive"] { --on: var(--purple); }
/* Gespann von oben auf einer angedeuteten Fahrspur */
.ts__car { grid-area: car; position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; justify-items: center; min-height: 0; }
/* Fahrspur: zwei Linien, die nach oben ausblenden – grau, bei aktiver Spurführung Blau wie der Autopilot */
.ts__car::before { content: ""; position: absolute; inset: 0 16%; border-left: 6px solid var(--ts-lane); border-right: 6px solid var(--ts-lane); transition: border-color 200ms ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 80%, transparent); }
.ts__car.guided::before { border-color: var(--ts-blue); }
.ts__rig { position: relative; display: grid; justify-items: center; gap: 2px; height: 100%; max-height: 260px; min-height: 0; align-content: center; }
.ts__rig img { height: clamp(120px, 24vh, 210px); max-height: 100%; min-height: 0; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); }
.ts__impl { display: block; width: 130px; height: 8px; border-radius: 2px; background: var(--lamp-off); transition: background-color 150ms ease; }
.ts__impl.down { background: var(--helper-orange); }
.ts__impl[hidden] { display: none; }
.ts__turn { position: relative; }
.ts__turn svg { width: 26px; height: 26px; }
.ts__cards { grid-area: cards; display: grid; gap: 8px; }
.ts__card { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--ts-card); box-shadow: var(--ts-shadow); }
.ts__card svg { width: 22px; height: 22px; color: var(--muted); }
.ts__card b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts__card small { display: block; color: var(--muted); font-size: 12px; }
.ts__card--warn svg { color: var(--red); }
.ts__card--on svg { color: var(--accent); }
.ts__card--warn b { color: var(--text); }

/* Kopfzeile: klein und ruhig über der Ansicht, ohne Marke */
[data-skin="fokus"] .status { background: transparent; padding: 8px 16px; gap: 12px; font-size: 14px; }
[data-skin="fokus"] .brand { display: none; }
[data-skin="fokus"] .vehicle { color: var(--muted); }
[data-skin="fokus"] .status .icon-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 6px; }
[data-skin="fokus"] .status { font-weight: 600; }
[data-skin="fokus"] .conn { background: var(--panel-2); border-color: transparent; }

/* Symbolleiste unten: schwarz in Tag und Nacht, nur Symbole, aktiv in Lime */
[data-skin="fokus"] .dock { background: #0A0A0A; padding: 4px 16px calc(4px + env(safe-area-inset-bottom)); gap: 4px; justify-content: center; }
[data-skin="fokus"] .dock__item { flex: 0 0 72px; min-height: 52px; border: 0; border-radius: 6px; background: transparent; color: #A2A3A5; box-shadow: none; }
[data-skin="fokus"] .dock__item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-skin="fokus"] .dock__item svg { width: 26px; height: 26px; }
[data-skin="fokus"] .dock__item[aria-current="page"] { background: #2A2A2A; color: var(--accent); }
/* Einstellungen getrennt ganz rechts, die übrigen Menüpunkte bleiben mittig (Nutzerwunsch 11.10.2026, wie Default) */
[data-skin="fokus"] .dock { position: relative; }
[data-skin="fokus"] .dock__sep { display: none; }
[data-skin="fokus"] .dock__item--icon { position: absolute; top: 4px; bottom: max(4px, var(--sa-b)); right: max(16px, var(--sa-r)); width: 72px; }

/* Inhalt randlos wie die rechte Display-Hälfte; Flächen über Tonwerte */
[data-skin="fokus"] .panel, [data-skin="fokus"] .ck, [data-skin="fokus"] .kb { border-color: transparent; border-radius: 0; }
[data-skin="fokus"] .drive-classic, [data-skin="fokus"] .board-normal, [data-skin="fokus"] .cfg, [data-skin="fokus"] .settings, [data-skin="fokus"] .view--agri, [data-skin="fokus"] .view--plan { padding: 12px 16px; }
[data-skin="fokus"] .btn, [data-skin="fokus"] .icon-btn, [data-skin="fokus"] .key, [data-skin="fokus"] .iso-switch, [data-skin="fokus"] .lt-key, [data-skin="fokus"] .plan-tile, [data-skin="fokus"] .plan-row { border-color: transparent; }
[data-skin="fokus"] .iso-switch[data-state="on"] { border-color: var(--accent); }
[data-skin="fokus"] .iso-card, [data-skin="fokus"] .iso-fig { border-color: transparent; background: var(--panel); }
[data-skin="fokus"] .iso-card.selected { border-color: var(--accent); }
[data-skin="fokus"] .iso-switch--sm { background: var(--panel-2); }
[data-skin="fokus"] :is(.iso-head h2, .plan-head h2) { font-size: 20px; letter-spacing: -.01em; text-transform: none; }
[data-skin="fokus"] .iso-ghead h3 { font-size: 13px; letter-spacing: .06em; color: var(--muted); }
[data-skin="fokus"] .iso-ghead h3 small { color: var(--text); }
[data-skin="fokus"] .iso-switch:is([data-state="mixed"], [data-state="moving"]) { border-color: var(--helper-orange); }
/* Arbeit-Layout: die Fahrzeug-Spalte ersetzt die linke Spalte – Karte über die ganze Breite */
[data-skin="fokus"] .wk { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 34px; }
[data-skin="fokus"] .wk[data-variant="side"] .wk-left { display: none; } /* Fokus hat die eigene Spalte; „im GPS“ und „nur Fahrzeug“ zeigen die Arbeit-Spalte */
/* Fahrt-Seite: Tempo, Tempomat, Fahrstufe und Leuchten stehen schon in der Fahrzeug-Spalte */
[data-skin="fokus"] :is(.rt-left, .rt-lamps, .rt-prnd) { display: none; }
/* Kartenfelder wie Navigationskarten: dunkles Glas, weich gerundet */
[data-skin="fokus"] { --wk-glass: rgba(65,65,65,.9); --wk-glass-r: var(--chip-r); }
[data-skin="fokus"] :is(.gps-chip, .gps-stats, .gps-layers, .gps-fills, .fieldcard, :is(.gps-tools .icon-btn, .gps-layers-btn), .gps-hint) {
  background: rgba(65,65,65,.9); border-color: transparent; border-radius: var(--chip-r); box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
[data-skin="fokus"] .fieldcard { --fc-muted: #C4C5C7; --lamp-off: #2A2A2A; }
/* Knöpfe wie im Kit: flach, 4 px, Grautreppe */
[data-skin="fokus"] .btn, [data-skin="fokus"] .seg, [data-skin="fokus"] .seg button { border-radius: 4px; }
[data-skin="fokus"][data-theme="night"] .btn:not(.btn--primary):not([aria-pressed="true"]) { background: #414141; color: #FFFFFF; }

/* Schmal: Spalte wird zu schmal – normales Gerüst, linke Spalte im Arbeit-Layout zurück */
@media (max-width: 760px) {
  [data-skin="fokus"] .terminal { grid-template-columns: minmax(0, 1fr); }
  [data-skin="fokus"] .ts { display: none; }
  [data-skin="fokus"] .status, [data-skin="fokus"] .views, [data-skin="fokus"] .dock { grid-column: 1; }
  [data-skin="fokus"] .wk-left { display: grid; }
  [data-skin="fokus"] .rt-left { display: grid; }
  [data-skin="fokus"] :is(.rt-lamps, .rt-prnd) { display: flex; }
  [data-skin="fokus"] .dock__item { flex: 1 1 0; }
  [data-skin="fokus"] .dock__item--icon { position: static; width: auto; }
}

/* =====================================================================
   Randlos auf iPad/iPhone (Home-Bildschirm-App): Uhrzeit-Leiste und Home-Balken lassen sich nicht ausblenden,
   aber Kopfzeile, Dock und Karte laufen darunter durch. Statt Rand + eigenem Innenabstand gilt jeweils der
   größere Wert (max) – das gibt Platz zurück. Unten bleibt kein Rand für den Home-Balken (Nutzerwunsch):
   Dock und Inhalt gehen bis zur Kante, der Balken liegt darüber (--sa-b = 0). Auf Geräten ohne Aussparungen sind alle Werte 0, nichts ändert sich.
   ===================================================================== */
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-b: 0px; --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px); }
.terminal { padding: 0; }
/* Höhenkorrektur aus app.js (fixIosHeight): Seite reicht bis zur Unterkante des Bildschirms */
:root[data-iosfix], :root[data-iosfix] body { height: var(--app-h); overflow: hidden; }
:root[data-iosfix] .terminal { height: var(--app-h); }
:root .status { padding-top: var(--sa-t); padding-bottom: 0; min-height: calc(64px + var(--sa-t)); align-items: center; padding-left: max(16px, var(--sa-l)); padding-right: max(16px, var(--sa-r)); }
:root .dock { padding-bottom: max(14px, var(--sa-b)); padding-left: max(16px, var(--sa-l)); padding-right: max(16px, var(--sa-r)); }
:root .views { margin-left: var(--sa-l); margin-right: var(--sa-r); }
@media (max-width: 600px) { :root .dock { padding-bottom: max(8px, var(--sa-b)); padding-left: max(8px, var(--sa-l)); padding-right: max(8px, var(--sa-r)); } }
[data-base="default"] .status { padding-left: max(20px, var(--sa-l)); padding-right: max(20px, var(--sa-r)); }
[data-base="default"] .dock { padding-bottom: max(12px, var(--sa-b)); padding-left: max(20px, var(--sa-l)); padding-right: max(20px, var(--sa-r)); }
/* Default: Leiste ohne Innenabstand; links und rechts bleibt je eine Einstellungen-Breite frei, damit der Block mittig steht */
[data-skin="default"] .dock { padding: 0 calc(72px + var(--sa-r)) var(--sa-b) calc(72px + var(--sa-l)); }
@media (max-width: 860px) { [data-skin="default"] .dock { padding: 0 var(--sa-r) var(--sa-b) var(--sa-l); } }
/* Horizont: schwebender Streifen – Abstand zum Rand mindestens so groß wie die Zone */
[data-skin="horizont"] .status { padding-top: 0; padding-left: 24px; padding-right: 18px; min-height: 96px; margin: max(12px, var(--sa-t)) max(12px, var(--sa-r)) 0 max(12px, var(--sa-l)); }
[data-skin="horizont"] .dock { padding-bottom: max(12px, var(--sa-b)); padding-left: max(12px, var(--sa-l)); padding-right: max(12px, var(--sa-r)); }
/* Fokus: Fahrzeug-Spalte reicht bis oben und an den linken Rand, Kopfzeile rechts daneben */
[data-skin="fokus"] .ts { padding-top: var(--sa-t); padding-left: max(18px, var(--sa-l)); }
[data-skin="fokus"] .status { padding-left: 16px; }
[data-skin="fokus"] .views { margin-left: 0; }
[data-skin="fokus"] .dock { padding-bottom: max(4px, var(--sa-b)); }
@media (max-width: 760px) {
  [data-skin="fokus"] .status { padding-left: max(16px, var(--sa-l)); }
  [data-skin="fokus"] .views { margin-left: var(--sa-l); }
}
/* Ohne Kopfzeile (Tacho, GPS als eigener Bildschirm, Karten-/Dashboard-Vollbild): Inhalt beginnt unter der Uhrzeit-Leiste,
   die Leiste selbst bekommt die Farbe der Kopfzeile – nichts liegt unter der Uhrzeit */
:root { --hdr-bg: var(--bg); }
[data-base="default"] { --hdr-bg: var(--brand-black); }
.terminal::before { content: ""; display: none; position: fixed; left: 0; right: 0; top: 0; height: var(--sa-t); background: var(--hdr-bg); z-index: 60; pointer-events: none; }
:is(.terminal.gps-full, .terminal.dbl-full, :root[data-screen="tacho"] .terminal, :root[data-screen="gps"] .terminal)::before { display: block; }
:is(.terminal.gps-full, .terminal.dbl-full, :root[data-screen="tacho"] .terminal, :root[data-screen="gps"] .terminal) .views { margin-top: var(--sa-t); }
.terminal.dbl-full .views { margin-left: 0; margin-right: 0; }
.terminal.dbl-full .view--dashlive { padding: 0 var(--sa-r) 0 var(--sa-l); }
:is(.terminal.gps-full, :root[data-screen="gps"] .terminal) .views { margin-left: 0; margin-right: 0; }
:is(.terminal.gps-full, :root[data-screen="gps"] .terminal) :is(.gps-info, .gps-bottom) { margin-left: var(--sa-l); }
:is(.terminal.gps-full, :root[data-screen="gps"] .terminal) :is(.gps-tools, .gps-layers, .gps-bottom) { margin-right: var(--sa-r); }


/* =====================================================================
   Design-Vorlage „Kapsel“ (Arbeitstitel vom Nutzer, 11.10.2026) – Ergebnis des Kapsel-Checks.
   Muster aus Fahrzeug- und Smart-Home-Apps (Polestar, Fokus, Rivian, Waymo, Google Home, Apple Maps):
   - Systemgraus (Schwarz / #1C1C1E / #2C2C2E, am Tag #EBEBF0 / Weiß), Kopfzeile ohne eigene Leiste
   - schwebende Menüleiste als Kapsel, jeder Punkt mit Namen (wiedererkennen statt erinnern), gewählt als getönte Kapsel
   - „an“ ist eine gefüllte Kachel (Tönung + Ring in der Zustandsfarbe) statt eines schmalen Lampenstrichs
   - große Radien (16 Kacheln, 12 Knöpfe, Kapsel für Menü und Kartenknöpfe)
   - Überschriften und Einheiten in natürlicher Schreibung statt gesperrter Großbuchstaben
   Baut auf Default auf (SKINS.kapsel.base = default), Regeln hier gewinnen durch ihre Lage am Dateiende.
   ===================================================================== */
:root[data-skin="kapsel"] {
  --brand-black: #1C1C1E; --brand-grey: #3A3A3C; --brand-paper: #EBEBF0; --brand-white: #FFFFFF;
  --brand-olive: #57621A; /* Akzentschrift am Tag: 5,2:1 auch auf #E9E9EE */
  --radius: 16px; --chip-in: 10px; --hdr-bg: var(--bg); --gps-active: #0A84FF;
}
:root[data-skin="kapsel"]:not([data-theme="day"]) {
  --bg: #000000; --panel: #1C1C1E; --panel-2: #2C2C2E; --line: #38383A;
  --text: #F5F5F7; --muted: #A1A1A6; --lamp-off: #3A3A3C;
  --mb-text: #F5F5F7; --mb-muted: #A1A1A6;
}
:root[data-skin="kapsel"][data-theme="day"] {
  --bg: #EBEBF0; --panel: #FFFFFF; --panel-2: #E9E9EE; /* Stufen ≥ 5 HSB-B: 94 → 100 → 93 */ --line: #D1D1D6;
  --text: #1C1C1E; --muted: #5E5E63; --lamp-off: #D1D1D6;
  --mb-text: #1C1C1E; --mb-muted: #5E5E63; --accent-line: #57621A;
}

/* Kopfzeile: liegt auf dem Grund, keine dunkle Leiste */
[data-skin="kapsel"] .status { background: var(--bg); color: var(--mb-text); --text: var(--mb-text); --muted: var(--mb-muted); }
[data-skin="kapsel"] .brand { color: var(--accent-text); }
[data-skin="kapsel"] .status .icon-btn { background: var(--panel); color: var(--text); border-radius: 999px; }
[data-skin="kapsel"] .conn { background: var(--panel); color: var(--text); }

/* Menüleiste: schwebende Kapsel mit Symbol und Namen; gewählt = getönte Kapsel, Symbol in Akzent */
[data-skin="kapsel"] .dock {
  justify-self: center; max-width: calc(100% - 24px); margin: 4px auto max(12px, var(--sa-b));
  padding: 6px; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
[data-skin="kapsel"] .dock__item {
  flex: 0 0 auto; flex-direction: column; gap: 4px; min-width: 76px; min-height: 58px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; box-shadow: none;
}
[data-skin="kapsel"] .dock__item svg { width: 22px; height: 22px; }
[data-skin="kapsel"] .dock__item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); color: var(--text); box-shadow: none; }
[data-skin="kapsel"] .dock__item[aria-current="page"] svg { color: var(--accent-text); }
[data-skin="kapsel"] .dock__item--icon { min-width: 58px; width: auto; padding: 0; }
[data-skin="kapsel"] .dock__sep { margin: 12px 4px; }
@media (max-width: 760px) {
  [data-skin="kapsel"] .dock { justify-self: stretch; max-width: none; margin: 4px max(8px, var(--sa-l)) max(8px, var(--sa-b)) max(8px, var(--sa-r)); padding: 4px; }
  [data-skin="kapsel"] .dock__item, [data-skin="kapsel"] .dock__item--icon { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0; }
  [data-skin="kapsel"] .dock__sep { display: none; }
}

/* Überschriften und Einheiten in natürlicher Schreibung (liest sich schneller als gesperrte Großbuchstaben) */
[data-skin="kapsel"] :is(.tile__head, .agri-card h3, .cfg-body h4, .cfg-sec h4, .cfg-sec h5, .fieldcard__group h4, .iso-ghead h3, .iso-head h2, .iso-fig figcaption small, .gps-layers > b, .plan-row--head, .stat small, .kb-read small, .kb-cruise span, .ck-read small, .wk-speed small, .wk-cruise__label) { text-transform: none; letter-spacing: 0; }
[data-skin="kapsel"] :is(.agri-card h3, .iso-ghead h3) { font-size: 15px; color: var(--text); }
[data-skin="kapsel"] .iso-head h2 { font-size: 20px; letter-spacing: -.01em; }

/* Knöpfe: 12 px */
[data-skin="kapsel"] :is(.btn, .icon-btn, .board-edit) { border-radius: 12px; }

/* Tasten: Kachel ohne Rahmen und Lampenstrich; „an“ = Tönung + Ring in der Tastenfarbe, Zustand in Textfarbe */
[data-skin="kapsel"] .key { border: 0; border-radius: var(--radius); background: var(--panel); }
[data-skin="kapsel"] .key::before { display: none; }
[data-skin="kapsel"] .key.on { background: color-mix(in srgb, var(--c) 22%, var(--panel)); box-shadow: inset 0 0 0 2px var(--c); }
[data-skin="kapsel"] .key.on .key__hint { color: var(--text); font-weight: 600; }
[data-skin="kapsel"] .key:active, [data-skin="kapsel"] .key.pressed { background: var(--panel-2); }
[data-skin="kapsel"] .key--add { box-shadow: inset 0 0 0 1px var(--line); }

/* ISOBUS: Gerät als Kachel, Schalter gefüllt statt gerahmt */
[data-skin="kapsel"] :is(.iso-card, .iso-fig, .iso-none) { border-radius: var(--radius); background: var(--panel); }
:root[data-skin="kapsel"] :is(.iso-switch, .iso-card .iso-switch--sm) { border: 0; border-radius: 12px; background: var(--panel-2); }
:root[data-skin="kapsel"] .iso-switch[data-state="on"] { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--accent-line); }
:root[data-skin="kapsel"] .iso-switch:is([data-state="mixed"], [data-state="moving"]) { background: color-mix(in srgb, var(--helper-orange) 16%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--helper-orange); }
:root[data-skin="kapsel"] .iso-switch[data-state="moving"] { animation: mb-blink 1s steps(1) infinite; }
@keyframes mb-blink { 50% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin="kapsel"] .iso-switch[data-state="moving"] { animation: none; } }

/* Licht: gleiche Kachel wie die Tasten, auch am Traktor (kein Verlauf), „an“ gefüllt */
:root[data-skin="kapsel"] :is(.lt-key, .lt-key--beam) { border: 0; border-radius: var(--radius); background: var(--panel); }
[data-skin="kapsel"] .lt-key::before { display: none; }
:root[data-skin="kapsel"] .lt-key:is([data-state="on"], [data-state="blink"]) { background: color-mix(in srgb, var(--c) 22%, var(--panel)); box-shadow: inset 0 0 0 2px var(--c); }
:root[data-skin="kapsel"] .lt-key[data-state="mixed"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 50%, var(--line)); }

/* Karten (GPS, Monitor): Glasfelder 16 px, Knöpfe rund; Zoom als eine senkrechte Kapsel */
[data-skin="kapsel"] :is(.gps-chip, .gps-stats, .gps-layers, .gps-fills, .fieldcard) { border-radius: var(--radius); }
[data-skin="kapsel"] { --wk-glass-r: var(--radius); }
[data-skin="kapsel"] :is(.map-tools .icon-btn, .gps-layers-btn) { border-radius: 999px; }
[data-skin="kapsel"] .gps-tools .gps-zoom .icon-btn:first-child { border-radius: 24px 24px 0 0; }
[data-skin="kapsel"] .gps-tools .gps-zoom .icon-btn:last-child { border-radius: 0 0 24px 24px; }

/* Planer: Zeilen und Kacheln weich */
[data-skin="kapsel"] :is(.plan-row, .plan-tile) { border-radius: 12px; }

/* Einstellungen: gruppierte Liste wie in den Systemeinstellungen – Zeilen auf einer Karte, Überschrift darüber */
[data-skin="kapsel"] .set-main { background: var(--bg); }
[data-skin="kapsel"] .set-sec .set-row { background: var(--panel); padding: 14px 18px; border-bottom: 1px solid var(--line); }
[data-skin="kapsel"] .set-sec h2 + .set-row { border-radius: var(--radius) var(--radius) 0 0; }
[data-skin="kapsel"] .set-sec .set-row:not(:has(~ .set-row)) { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0; }
[data-skin="kapsel"] .set-sec h2 + .set-row:not(:has(~ .set-row)) { border-radius: var(--radius); }
[data-skin="kapsel"] .set-sec h2 { margin: 22px 4px 10px; }
[data-skin="kapsel"] .set-nav button { border-radius: 12px; }
@media (max-width: 760px) { [data-skin="kapsel"] .set-nav button { border: 0; border-radius: 999px; } }

/* ===================== Seitenkopf, angedockte Leisten (Nutzerwunsch 11.10.2026) ===================== */
/* Seitenkopf für Tasten, ISOBUS, Licht und Planer: Abstand oben = Abstand links (20 px), große Überschrift,
   Unterzeile gedämpft darunter. Steht am Ende, damit er in allen Vorlagen gleich gilt. */
:root :is(.view--plan, .board-normal) { padding: 20px 20px 0; }
:root .iso, :root .view--isobus > .iso { padding: 20px; }
:root :is(.plan-head, .iso-head, .page-head) { display: grid; gap: 4px; padding: 0; justify-content: start; }
:root :is(.plan-head h2, .iso-head h2, .page-head h2) { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
:root :is(.plan-head .muted, .page-sub) { margin: 0; font-size: 14px; color: var(--muted); }
:root .iso-show .iso-head { display: grid; }
.page-sub:empty { display: none; }
.board-normal { grid-template-rows: auto auto minmax(0, 1fr); }

/* Angedockte Leiste unten wie die Kartenfelder im GPS: schwebende Fläche mit Schatten über dem Inhalt
   (ISOBUS „Alle Geräte“, Licht „Schnellwahl“). Bleibt beim Scrollen unten stehen. */
@media (min-width: 761px) { .iso { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; } }
/* Stil wie die Kartenfelder im GPS (Glas der Feldkarte je Vorlage), Abstand links/rechts/unten = Seitenrand 20 px */
:root .dock-bar { position: sticky; bottom: 0; /* im Seitenrand: unten 20 px wie links/rechts */ z-index: 3; padding: 12px; border: 0; border-radius: var(--wk-glass-r, 12px);
  background: var(--wk-glass, rgba(39,40,40,.78)); box-shadow: 0 6px 24px rgba(0,0,0,.3);
  color: #F1F2EC; --text: #F1F2EC; --muted: rgba(241,242,236,.7); --line: rgba(255,255,255,.14); --panel-2: rgba(255,255,255,.08); --bg: rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
:root .dock-bar :is(.iso-switch, .lt-key) { background: rgba(255,255,255,.08); color: #F1F2EC; }
:root .dock-bar .iso-ghead h3 { color: rgba(241,242,236,.7); }
.dock-bar .iso-ghead { min-height: 0; }
/* Handy: Leiste im Fluss (sonst deckt sie den Inhalt zu), Schalter zu zweit je Reihe */
@media (max-width: 760px) { :root .dock-bar { position: static; box-shadow: 0 0 0 1px var(--line); } .dock-bar .iso-global { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ISOBUS: Gespann waagerecht – vorne links, Traktor von der Seite in der Mitte (Front nach links), hinten rechts;
   Füllstände direkt in der Gerätekarte */
@media (min-width: 761px) { .iso-rig { align-self: center; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr); align-items: center; column-gap: 48px; } }
.iso-tractor__side { width: 100%; max-width: 300px; height: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.iso-card__fills { display: grid; gap: 0; border-radius: 8px; overflow: hidden; background: var(--bg); }
.iso-card__fills .fill { padding: 6px 10px; }
.iso-card__fills .fill + .fill { border-top: 1px solid var(--line); }
.iso-card__fills .fill__head b { color: var(--accent-text); }
.iso-tractor__fills { width: 100%; text-align: left; font-weight: 400; color: var(--text); }

/* Monitor wie das GPS (Nutzerwunsch 11.10.2026): Legende als Kartenfeld (Glas wie die Feldkarte), Knöpfe in
   Gruppen, Ebenen über der Kartenart unten rechts */
:root .map-head { background: var(--wk-glass, rgba(39,40,40,.78)); color: #F1F2EC; border: 0; border-radius: var(--wk-glass-r, 12px); padding: 10px 14px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); --muted: rgba(241,242,236,.7); --line: rgba(255,255,255,.14); }
:root .map-head .legend--inline { color: rgba(241,242,236,.8); }
.map-panel .gps-tools { gap: 12px; }
.map-mapset { position: absolute; right: 12px; bottom: 12px; }
.map-mapset .gps-maptype { position: static; }

/* ISOBUS-Gerätekarten neu (Nutzerwunsch 11.10.2026): Gerätebild oben, darunter Name, Füllstände und die eigenen Schalter;
   vorne links, hinten rechts, Traktor dazwischen */
.iso-card { gap: 10px; padding: 12px; }
/* Bild links neben Name und Typ (waagerecht, spart Höhe) */
.iso-card header:has(.iso-card__pic) { justify-content: flex-start; align-items: center; gap: 12px; }
.iso-card__pic { flex: none; width: 128px; height: 72px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); overflow: hidden; }
.iso-card__pic img { max-width: 120px; max-height: 66px; object-fit: contain; }
.iso-card__pic .iso-fig__ph svg { width: 36px; height: 36px; color: var(--muted); }
.iso-card--front .iso-card__pic img { transform: scaleX(-1); } /* Frontgerät schaut zum Traktor */
@media (min-width: 761px) { .iso-side { justify-content: center; } .iso-side .iso-card { flex: none; } }

/* Planer (Nutzerwunsch 12.10.2026): Feld in Arbeit fest über den Reitern, darunter scrollt die Liste; die Gruppen-Trenner
   bleiben beim Scrollen nacheinander oben stehen */
.plan-liveslot { margin: 12px 0 4px; }
.plan-liveslot:empty { display: none; }
.plan-card__head { position: sticky; top: 0; z-index: 2; background: var(--bg); }
:root[data-base="default"] .plan-card__head { background: var(--bg); }

/* =====================================================================
   Design-Vorlage „Glas“ (Arbeitstitel, Nutzerwunsch 14.10.2026) – nach einer Report-Karte aus
   mattiertem Glas über einem unscharfen Foto:
   - Grund: weiche, unscharfe Landschaft aus Salbei-, Erd- und Cremetönen (nur CSS-Verläufe, kein Bild)
   - Flächen: halbtransparentes Weiß mit feinem hellem Rand oben, großen Radien; Leisten mit Weichzeichner
   - Etiketten und gewählte Reiter als Glas-Kapseln, Schrift hell (nachts) bzw. dunkel (am Tag)
   Baut auf Default auf (SKINS.glas.base = default), Regeln hier gewinnen durch ihre Lage am Dateiende.
   ===================================================================== */
:root[data-skin="glas"] {
  --radius: 20px; --chip-in: 10px;
  --gl-blur: blur(22px) saturate(150%);
}
:root[data-skin="glas"]:not([data-theme="day"]) {
  --bg: transparent; --panel: rgba(255,255,255,.10); --panel-2: rgba(255,255,255,.14); --line: rgba(255,255,255,.18);
  --text: #FFFFFF; --muted: rgba(255,255,255,.70); --lamp-off: rgba(255,255,255,.22);
  --gl-glass: rgba(255,255,255,.12); --gl-edge: rgba(255,255,255,.26); --gl-pill: rgba(255,255,255,.20);
  --gl-map: rgba(28,36,31,.46); /* Glas über der Karte etwas dunkler, sonst unlesbar auf hellem Feld */
  --wk-glass: var(--gl-map);
  --gl-scene: radial-gradient(55% 50% at 16% 18%, #7F9B78 0%, transparent 72%),
    radial-gradient(45% 42% at 84% 26%, #C4B193 0%, transparent 70%),
    radial-gradient(70% 60% at 62% 92%, #3E5A4B 0%, transparent 72%),
    radial-gradient(40% 38% at 28% 82%, #8A6C52 0%, transparent 70%),
    linear-gradient(180deg, #33433A, #24302A);
}
:root[data-skin="glas"][data-theme="day"] {
  --bg: transparent; --panel: rgba(255,255,255,.42); --panel-2: rgba(255,255,255,.55); --line: rgba(24,33,28,.12);
  --text: #18211C; --muted: rgba(24,33,28,.66); --lamp-off: rgba(24,33,28,.16);
  --gl-glass: rgba(255,255,255,.45); --gl-edge: rgba(255,255,255,.75); --gl-pill: rgba(255,255,255,.62);
  --gl-map: rgba(255,255,255,.62);
  --wk-glass: rgba(28,36,31,.5);
  --gl-scene: radial-gradient(55% 50% at 16% 18%, #B7CCB0 0%, transparent 72%),
    radial-gradient(45% 42% at 84% 26%, #EADCC4 0%, transparent 70%),
    radial-gradient(70% 60% at 62% 92%, #9DB7A6 0%, transparent 72%),
    radial-gradient(40% 38% at 28% 82%, #D8C1A4 0%, transparent 70%),
    linear-gradient(180deg, #E4E9DE, #D5DDD0);
}
:root[data-skin="glas"] body { background: var(--gl-scene); background-attachment: fixed; }

/* Glas nur bei den Karten (Nutzerwunsch 14.10.2026): Kopfzeile, Menüleiste und Flächen bleiben wie Default,
   die großen Flächen der Ansichten werden durchsichtig – die Karten liegen direkt auf der Landschaft */
[data-skin="glas"] :is(.view > .panel, .drive-layout, .ck, .kb, .cfg-main, .cfg-side) { background: transparent; border-color: transparent; }
[data-skin="glas"] .wk-left { background: transparent; }
[data-skin="glas"] :is(.key, .iso-card, .iso-switch, .lt-key, .plan-row:not(.plan-row--head), .plan-tile, .wk-cruise, .ccg, .kb-cell, .iso-fig, .agri-side .panel, .set-card, .cfg-sec) {
  background: var(--gl-glass); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-edge);
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
[data-skin="glas"] :is(.key, .iso-card, .lt-key, .plan-row, .plan-tile, .wk-cruise, .iso-fig, .agri-side .panel, .dock-bar) { border-radius: 20px; }
/* Angedockte Leisten (ISOBUS, Licht) bleiben dunkles Glas wie die Kartenfelder – ihre Schrift ist hell */
[data-skin="glas"] .dock-bar { --gl-glass: rgba(255,255,255,.12); --gl-edge: rgba(255,255,255,.26); border-radius: 20px; border: 1px solid var(--gl-edge); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
:root[data-skin="glas"] .dock-bar :is(.iso-switch, .lt-key) { background: rgba(255,255,255,.12); color: #F1F2EC; } /* auch am Tag: Kacheln in der dunklen Leiste dunkel */
[data-skin="glas"] :is(.iso-switch, .ccg, .kb-cell) { border-radius: 14px; }
[data-skin="glas"] .iso-switch[data-state="on"], [data-skin="glas"] .ccg.on { border-color: var(--accent); }
[data-skin="glas"] .iso-switch:is([data-state="mixed"], [data-state="moving"]) { border-color: var(--helper-orange); }
[data-skin="glas"] :is(.plan-chip, .plan-badge, .plan-who, .iso-chip) { border-radius: 999px; }
[data-skin="glas"] .plan-card__head { background: transparent; }
[data-skin="glas"] .kb-cell.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; } /* Zustand „an“ bleibt Vollfläche */
/* Karten (GPS, Monitor) brauchen einen deckenden Grund */
:root[data-skin="glas"]:not([data-theme="day"]) { --gps-ground: #2B3730; --gps-field: #34443A; --map-bg: #2B3730; }
:root[data-skin="glas"][data-theme="day"] { --gps-ground: #DDE3D6; --gps-field: #CFD8C8; --map-bg: #DDE3D6; }
/* Kartenfelder: dunkleres bzw. helleres Glas mit Weichzeichner, damit sie auf jeder Karte lesbar bleiben */
[data-skin="glas"] :is(.gps-chip, .gps-track, .gps-xte, .gps-stats, .gps-layers, .gps-scale, .gps-fills, .fieldcard, .gps-tools .icon-btn, .gps-layers-btn, .gps-hint) {
  background: var(--gl-map); border: 1px solid var(--gl-edge); border-radius: 18px; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
:root[data-skin="glas"][data-theme="day"] .fieldcard { --fc-text: #18211C; --fc-muted: rgba(24,33,28,.66); --fc-line: rgba(24,33,28,.12); --lamp-off: rgba(24,33,28,.14); }
:root[data-skin="glas"][data-theme="day"] :is(.gps-chip, .gps-track, .gps-stats, .gps-layers, .gps-scale, .gps-tools .icon-btn, .gps-layers-btn) { color: #18211C; }