/* tafelentwurf.css — Das Plantafel-Artefakt („Plantafel Neu", 25.08.2026), EXAKT
   übersetzt (v2.237, SM 31.08.: „was ist hiermit, deinem eigenen artefakt plantafel
   neu? kannst du das bitte genau so umsetzen? die produktionsplanung für mitarbeiter
   als auch den leitstand").

   Die Fußnote des Entwurfs selbst regelt die einzige Abweichung: „Der Akzent ist hier
   Apple-Blau; in der Umsetzung übernimmt ihn das HKM-Blau aus tokens.css." Alles
   andere — Maße, Radien, Schatten, Tints, Typo-Skala — steht hier wie im Artefakt.
   Gescopet unter .te, geladen vom Leitstand und von /produktionsplan/. */

.te {
  --te-bg: #F5F5F7;
  --te-surface: #FFFFFF;
  --te-ink: #1D1D1F;
  --te-ink2: #6E6E73;
  --te-ink3: #AEAEB4;
  --te-line: rgba(29, 29, 31, 0.08);
  --te-accent: var(--hk-blau, #1275bb);
  --te-accent-tint: rgba(18, 117, 187, 0.10);
  --te-gruen: #34C759;
  --te-gruen-tint: rgba(52, 199, 89, 0.14);
  --te-gelb: #FF9500;
  --te-gelb-tint: rgba(255, 149, 0, 0.14);
  --te-rot: #FF3B30;
  --te-rot-tint: rgba(255, 59, 48, 0.10);
  --te-grau-tint: rgba(29, 29, 31, 0.05);
  --te-schatten: 0 1px 2px rgba(29,29,31,.04), 0 8px 24px rgba(29,29,31,.06);
  --te-schatten-tief: 0 4px 12px rgba(29,29,31,.10), 0 24px 60px rgba(29,29,31,.16);
  --te-radius: 18px;
  /* Brett-Maße als Variablen (v2.239): Desktop = die Werte des Artefakts, am Handy
     rechnet dasselbe CSS mit kleineren. Vorher standen Spurhöhe und Block-Position als
     feste Pixel im style-Attribut — die ließen sich in keiner Media Query korrigieren. */
  --te-spur-h: 72px;
  --te-spur-top: 14px;
  --te-spur-abstand: 50px;
  --te-gang-h: 44px;
  /* Höhe des senkrechten Bretts am Handy (v2.241) — 16 Stunden auf 432 px sind 27 px
     je Stunde; ein Ein-Stunden-Block bleibt damit über der Tippgrenze. */
  --te-brett-h: 432px;
  color: var(--te-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Kopf ---------- */
.te .te-augenbraue { font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--te-ink3); margin: 0 0 10px; }
.te h1.te-gruss { font-size: clamp(34px, 5vw, 48px); font-weight: 700;
  letter-spacing: -0.022em; margin: 0; text-wrap: balance; text-align: left; }
.te h1.te-gruss::before { content: none; }
.te .te-tagsatz { font-size: 17px; color: var(--te-ink2); margin: 10px 0 0; max-width: 62ch; }
.te .te-tagsatz b { color: var(--te-ink); font-weight: 600; }

/* ---------- Ansage (Sprache zuerst, prominent wie eine Suche) ---------- */
.te .te-ansage { margin: 36px 0 0; }
.te .te-ansage-feld { display: flex; align-items: center; gap: 14px;
  background: var(--te-surface); border: 1px solid var(--te-line); border-radius: 16px;
  padding: 6px 8px 6px 20px; box-shadow: var(--te-schatten);
  transition: box-shadow .2s ease, border-color .2s ease; }
.te .te-ansage-feld:focus-within { border-color: var(--te-accent);
  box-shadow: 0 0 0 4px var(--te-accent-tint), var(--te-schatten); }
.te .te-ansage-feld .te-mic { flex: none; width: 20px; height: 20px; color: var(--te-accent);
  background: none; border: 0; padding: 0; cursor: pointer; }
.te .te-ansage-feld input { flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: var(--te-ink); padding: 12px 0; min-width: 0; }
.te .te-ansage-feld input::placeholder { color: var(--te-ink3); }
.te .te-ansage-feld .te-los { flex: none; border: 0; cursor: pointer;
  background: var(--te-accent); color: #fff; font: inherit; font-size: 15px;
  font-weight: 600; padding: 10px 20px; border-radius: 11px;
  transition: transform .12s ease, opacity .12s ease; }
.te .te-ansage-feld .te-los:hover { opacity: .9; }
.te .te-ansage-feld .te-los:active { transform: scale(.97); }

/* ---------- Drei Zahlen, mehr nicht ---------- */
.te .te-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 28px 0 0; }
.te .te-zahl { background: var(--te-surface); border: 1px solid var(--te-line);
  border-radius: var(--te-radius); padding: 20px 22px; box-shadow: var(--te-schatten); }
.te .te-zahl .te-wert { font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.te .te-zahl .te-wert small { font-size: 16px; font-weight: 500; color: var(--te-ink2);
  letter-spacing: 0; }
.te .te-zahl .te-label { font-size: 13px; color: var(--te-ink2); margin-top: 2px; }
.te .te-zahl .te-label b { color: var(--te-ink); font-weight: 600; }
.te .te-zahl.warn .te-wert { color: var(--te-rot); }
/* v2.245: Die Stückzahl ist die Kachel, die gesucht wird — sie trägt die Akzentfarbe,
   die anderen drei bleiben ruhig. Ohne rechenbare Zahl wird sie gedimmt, nicht rot:
   „wissen wir nicht" ist keine Störung. */
.te .te-zahl.te-stueck .te-wert { color: var(--te-accent); }
.te .te-zahl.te-stueck.leer .te-wert { color: var(--te-ink2); }

/* ---------- Leiste: „Maschinen heute" + Legende + Segmente ---------- */
.te .te-leiste { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 44px 0 18px; flex-wrap: wrap; }
.te .te-leiste h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.te .te-leiste-rechts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.te .te-segmente { display: inline-flex; background: var(--te-grau-tint);
  border-radius: 11px; padding: 3px; gap: 2px; }
.te .te-segmente button { border: 0; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 500; color: var(--te-ink2); background: transparent; padding: 7px 18px;
  border-radius: 8px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.te .te-segmente button[aria-pressed="true"] { background: var(--te-surface);
  color: var(--te-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(29,29,31,.12); }
.te .te-legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px;
  color: var(--te-ink2); }
.te .te-legende span { display: inline-flex; align-items: center; gap: 7px; }
.te .te-punkt { width: 8px; height: 8px; border-radius: 50%; }
.te .te-warn-wort { color: var(--te-rot); font-weight: 600; }

/* ---------- Tagestafel ---------- */
.te .te-tafel { background: var(--te-surface); border: 1px solid var(--te-line);
  border-radius: var(--te-radius); box-shadow: var(--te-schatten);
  padding: 10px 0 18px; overflow: hidden; }
.te .te-scroll { overflow-x: auto; }
.te .te-innen { min-width: 860px; padding: 0 24px; position: relative; }

.te .te-stunden { display: flex; margin-left: 220px; border-bottom: 1px solid var(--te-line);
  padding: 10px 0 8px; }
.te .te-stunden span { flex: 1; font-size: 11px; font-weight: 500; color: var(--te-ink3);
  font-variant-numeric: tabular-nums; }

.te .te-zeile { display: flex; align-items: center; padding: 0;
  border-bottom: 1px solid var(--te-line); }
.te .te-zeile:last-child { border-bottom: 0; }
.te .te-maschine { flex: none; width: 220px; padding: 18px 18px 18px 2px; }
.te .te-maschine .te-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; }
.te .te-maschine .te-sub { font-size: 12.5px; color: var(--te-ink2); margin-top: 1px; }
.te .te-maschine .te-sub b { font-weight: 600; }
/* Der Trenner gehört zum Plätze-Teil, nicht zwischen zwei Spans: am Handy sind die
   Stammdaten ausgeblendet, dann darf kein führendes „ · " stehen bleiben (v2.239). */
.te .te-maschine .te-plaetze::before { content: " · "; font-weight: 400; }
.te .te-maschine .te-sub.te-warnung { color: var(--te-rot); font-weight: 600; }
.te .te-maschine .te-sub.te-marke { color: var(--te-gelb); font-weight: 600; }
.te .te-maschine .te-name .te-m-wort { min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.te .te-maschine .te-name .te-m-kurz { display: none; }
.te .te-status-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.te .te-p-laeuft { background: var(--te-gruen); }
.te .te-p-geplant, .te .te-p-frei { background: var(--te-ink3); }
.te .te-p-rueckstand { background: var(--te-gelb); }
.te .te-p-steht { background: var(--te-rot); }

.te .te-spur { flex: 1; position: relative;
  height: calc(var(--te-spur-h) + (var(--spuren, 1) - 1) * var(--te-spur-abstand)); }
.te .te-spur-grund { position: absolute; inset: var(--te-spur-top) 0; border-radius: 10px;
  background: var(--te-grau-tint); }

/* --a = Beginn, --b = Ausmaß, beides in Prozent der Spur. WELCHE Achse das ist,
   entscheidet allein das CSS (v2.241): quer am Leitstand, senkrecht am Handy. */
.te .te-gang { position: absolute; border: 0; cursor: pointer;
  left: var(--a); width: var(--b);
  top: calc(var(--te-spur-top) + var(--unterspur, 0) * var(--te-spur-abstand));
  height: var(--te-gang-h);
  font: inherit; text-align: left; border-radius: 10px; padding: 5px 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  overflow: hidden; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease; color: var(--te-ink); }
.te .te-gang:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(29,29,31,.14);
  z-index: 3; }
.te .te-gang .te-t { font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  text-overflow: ellipsis; overflow: hidden; }
.te .te-gang .te-z { font-size: 11px; color: var(--te-ink2);
  font-variant-numeric: tabular-nums; text-overflow: ellipsis; overflow: hidden; }
.te .te-gang.te-schmal .te-z { display: none; }
/* Kein Block schmaler als ein Fingertipp: die Mindestbreite von 9 % ist relativ — auf
   einer 300-px-Spur sind das 27 px, auf 900 px sind es 81. Diese Untergrenze ist
   absolut (v2.239). */
.te .te-gang { min-width: 30px; }

/* Vier Zustände statt zwölf Signale — Farbe heißt etwas (Artefakt-Prinzip 2).
   laeuft = Grün mit Kante · geplant = Akzent-Wäsche · Rückstand = Bernstein ·
   steht = Rot, gedimmt · frei/mannlos = transparent mit feiner Kante. */
.te .te-gang.te-laeuft { background: var(--te-gruen-tint);
  box-shadow: inset 0 0 0 1.5px var(--te-gruen); }
.te .te-gang.te-geplant { background: var(--te-accent-tint); }
.te .te-gang.te-rueckstand { background: var(--te-gelb-tint); }
.te .te-gang.te-steht { background: var(--te-rot-tint); opacity: .75; }
/* Eine Ebene tiefer als ein echter Balken: wo sich beide berühren, gewinnt die Arbeit
   und nicht die Lücke (v2.244). */
.te .te-gang.te-mannlos { background: transparent; z-index: 0;
  box-shadow: inset 0 0 0 1.5px var(--te-line); cursor: default; }
.te .te-gang:not(.te-mannlos) { z-index: 1; }
.te .te-gang.te-mannlos .te-t, .te .te-gang.te-mannlos .te-z { color: var(--te-ink3); }
.te .te-hand { margin-right: 4px; }
.te .te-wer-wort { color: var(--te-rot); font-weight: 700; }

.te .te-fortschritt { position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--te-gruen); border-radius: 0 2px 2px 0; }
.te .te-chip-neu { display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; color: var(--te-accent); text-transform: uppercase; }

.te .te-jetzt { position: absolute; width: 2px; background: var(--te-rot);
  left: var(--jetzt); top: 8px; bottom: 8px;
  border-radius: 2px; z-index: 4; pointer-events: none; }
.te .te-jetzt.te-jetzt-oben { top: 26px; }
.te .te-jetzt[data-zeit]::before { content: attr(data-zeit); position: absolute;
  top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700;
  color: #fff; background: var(--te-rot); padding: 2px 7px; border-radius: 20px;
  font-variant-numeric: tabular-nums; }

/* Freie Maschinen: EINE stille Zeile unter dem Brett statt sechs leerer Karten
   (v2.239). Antippen führt zum Einplanen — der Weg bleibt, der Lärm geht. */
.te .te-frei-zeile { padding: 14px 2px 4px; font-size: 13px; color: var(--te-ink2);
  border-top: 1px solid var(--te-line); margin-top: 4px; }
.te .te-frei-chip { border: 0; background: transparent; color: var(--te-ink2);
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 2px;
  text-decoration: underline dotted transparent; }
.te .te-frei-chip:hover { color: var(--te-accent); text-decoration-color: var(--te-accent); }
/* v2.245 Stufe 3 — „frei" ist keine Antwort, sondern die Wiederholung der Frage.
   Der Chip einer leeren Maschine trägt jetzt das Wort, das den nächsten Handgriff nennt
   („wartet auf Gate B", „Arbeit ohne Termin"); der ganze Satz hängt im title. Was dem
   BETRIEB fehlt, steht einmal unter dem Brett statt fünfmal an fünf Zeilen. */
.te .te-frei-chip .te-frei-wort { margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(217, 154, 0, 0.16); color: #8a6200;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.te .te-frei-chip.te-frei-warum { color: var(--te-ink); }
.te .te-nicht-planbar { margin: 10px 0 0; padding: 9px 14px; border-radius: 10px;
  max-width: 100%; box-sizing: border-box;
  background: rgba(18, 117, 187, 0.06); color: var(--te-ink2);
  font-size: 12.5px; line-height: 1.45; }
.te .te-nicht-planbar b { color: var(--te-ink); margin-right: 6px; }

/* ---------- Rückstands-Band: was keine Zeit hat, steht neben der Zeitachse ----------
   Karten statt Chips, weil hier die Entscheidung fällt: Teil, Kunde, Menge, Alter,
   Maschine. Waagerecht scrollend — die Reihe wächst, das Brett darunter nicht. */
.te .te-band { margin: 0 0 14px; }
.te .te-band-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 9px; }
.te .te-band-kopf h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 7px; color: var(--te-ink); }
.te .te-band-kopf h3 i { font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--te-gelb-tint); color: #96560a; border-radius: 7px; padding: 1px 8px; }
.te .te-band-reihe { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  /* Die Reihe endet nicht mit einem Schnitt, sondern mit einem Auslaufen — das ist
     die Einladung zu wischen (Artefakt-Prinzip: Kanten erzählen mit). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
.te .te-rk { scroll-snap-align: start; flex: none; width: 178px; text-align: left;
  background: var(--te-surface); border: 1px solid var(--te-line); border-left: 3px solid var(--te-gelb);
  border-radius: 14px; padding: 10px 12px 9px; cursor: pointer; font: inherit;
  box-shadow: var(--te-schatten); transition: transform .12s ease, box-shadow .12s ease; }
.te .te-rk:hover { transform: translateY(-1px); box-shadow: var(--te-schatten-tief); }
.te .te-rk.te-r-steht { border-left-color: var(--te-rot); }
.te .te-rk.te-r-laeuft { border-left-color: var(--te-gruen); }
.te .te-rk.te-r-geplant { border-left-color: var(--te-accent); }
.te .te-rk b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--te-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te .te-rk u { display: block; text-decoration: none; font-size: 12px; color: var(--te-ink2);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te .te-rk s { display: block; text-decoration: none; font-size: 11.5px; font-weight: 600;
  color: var(--te-gelb); margin-top: 7px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.te .te-rk.te-r-steht s { color: var(--te-rot); }

/* Gänge ohne Plan-Zeit: unterhalb der Spur, ehrlich benannt — keine erfundene Uhrzeit. */
.te .te-ohne-zeit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 0 0 12px 220px; border-bottom: 1px solid var(--te-line); }
.te .te-chip { border: 1px dashed var(--te-ink3); background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--te-ink); padding: 5px 12px;
  border-radius: 999px; }
.te .te-chip:hover { border-color: var(--te-accent); }
.te .te-ohne-wort { font-size: 11.5px; color: var(--te-ink3); }

/* ---------- Wochenansicht: Last je Maschine und Tag ---------- */
.te .te-woche table { width: 100%; border-collapse: collapse; min-width: 760px; }
.te .te-woche th { text-align: left; font-size: 12px; font-weight: 600;
  color: var(--te-ink3); text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--te-line); }
.te .te-woche th:first-child { width: 200px; padding-left: 24px; }
.te .te-woche th.te-heute-spalte { color: var(--te-accent); }
.te .te-woche td { padding: 12px 14px; border-bottom: 1px solid var(--te-line);
  vertical-align: top; }
.te .te-woche td:first-child { padding-left: 24px; }
.te .te-woche tr:last-child td { border-bottom: 0; }
.te .te-woche .te-m-name { font-weight: 600; font-size: 15px; }
.te .te-woche .te-m-sub { font-size: 12px; color: var(--te-ink2); }
.te .te-last { display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.te .te-last.te-l-ok { background: var(--te-gruen-tint); color: var(--te-ink); }
.te .te-last.te-l-voll { background: var(--te-gelb-tint); }
.te .te-last.te-l-frei { background: var(--te-grau-tint); color: var(--te-ink2);
  font-weight: 500; }
.te .te-last.te-l-steht { background: var(--te-rot-tint); }

/* ---------- Detail-Sheet (unten mittig, wie im Artefakt) ---------- */
.te-sheet { position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(16px); width: min(560px, calc(100vw - 32px));
  background: #FFFFFF; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 20px;
  box-shadow: 0 4px 12px rgba(29,29,31,.10), 0 24px 60px rgba(29,29,31,.16);
  padding: 22px 24px; z-index: 50; color: #1D1D1F;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .te-sheet { transition: none; } }
.te-sheet.offen { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.te-sheet .te-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; }
.te-sheet h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.te-sheet .te-unter { color: #6E6E73; font-size: 13.5px; margin: 2px 0 0; }
.te-sheet .te-zu { flex: none; border: 0; cursor: pointer; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(29, 29, 31, 0.05); color: #6E6E73;
  font-size: 15px; line-height: 1; }
.te-sheet dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(29, 29, 31, 0.08); }
.te-sheet dt { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #AEAEB4; margin: 0; }
.te-sheet dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.te-sheet .te-aktionen { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.te-sheet .te-aktionen button { border: 0; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; padding: 9px 16px; border-radius: 10px;
  background: rgba(29, 29, 31, 0.05); color: #1D1D1F; }
.te-sheet .te-aktionen button.te-primaer { background: var(--hk-blau, #1275bb); color: #fff; }

/* Handy: die Maschinenspalte schrumpft, das Brett bleibt scrollbar. */
/* ====================================================================================
   HANDY: das BRETT bleibt ein Brett — nur passend skaliert (v2.239, SM 01.09.2026).

   Erster Anlauf war falsch: Ich hatte aus dem Gantt eine Liste gemacht. SMs Korrektur:
   „Ich möchte eigentlich, dass wir das Layout von Plantafel neu behalten, dieses
   Cleane. Es war einfach nur zu schmal gezogen, dann der Text oben drüber war zu groß,
   da muss man mal zu weit runterscrollen. Vielleicht müsste man das einen Tick kleiner
   machen … höhere Informationsdichte."

   Also bleibt die Zeitachse — sie IST die Aussage der Tafel („wo ist wann was los?").
   Was sich ändert: das Brett wird nicht mehr auf 860 px Mindestbreite gezwungen (das
   war das „zu schmal gezogen": es passte nicht ins Fenster und musste seitwärts
   gescrollt werden), und alles wird einen Tick kleiner — Maschinenspalte, Zeilenhöhe,
   Blöcke, Kopf. Artefakt-Prinzip 3 trägt das: Details erst auf Tipp. Ein schmaler
   Block muss nicht lesbar sein, er muss an der richtigen Stelle liegen und die
   richtige Farbe haben; das Detail-Sheet sagt den Rest.
   ==================================================================================== */
@media (max-width: 720px) {
  .te-sheet dl { grid-template-columns: repeat(2, 1fr); }

  /* Das Brett füllt das Fenster statt es zu sprengen — kein Seitwärts-Scrollen. */
  .te .te-innen { min-width: 0; padding: 0 6px; }
  .te .te-tafel { border-radius: 16px; padding: 6px 0 12px; }

  /* Kompakter Kopf: der große Gruß war schön, kostete aber den halben ersten Schirm. */
  .te h1.te-gruss { font-size: 26px; letter-spacing: -0.02em; }
  .te .te-augenbraue { font-size: 11px; margin-bottom: 6px; }
  .te .te-tagsatz { font-size: 13.5px; line-height: 1.42; margin-top: 5px; }
  /* v2.245: Aus drei Kacheln sind vier geworden — 3 nebeneinander liessen fuer die
     vierte eine einsame Zeile und drueckten jede auf 118 px. 2x2 gibt jeder Kachel
     ~180 px, und Stueck + Gaenge stehen zusammen in der ersten Reihe. */
  .te .te-zahlen { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 14px; }
  .te .te-zahl { padding: 8px 10px; border-radius: 12px; }
  .te .te-zahl .te-wert { font-size: 20px; letter-spacing: -0.02em; }
  .te .te-zahl .te-wert small { display: block; font-size: 10.5px; line-height: 1.2;
    margin-top: 1px; }
  /* Die Erläuterungszeile wiederholt den Tagsatz zwei Zeilen weiter oben. */
  .te .te-zahl .te-label { display: none; }
  /* Gemessen 01.09.: Leiste 86 px, davon 45 px Legende in zwei Zeilen. Vier Wörter
     mit Punkt brauchen keine zwei Zeilen — und jede Zeile hier schiebt das Brett
     unter den Falz. */
  .te .te-leiste { margin: 12px 0 8px; gap: 6px; }
  .te .te-leiste h2 { font-size: 16px; }
  .te .te-legende { gap: 9px; font-size: 10.5px; width: 100%; }
  .te .te-legende .te-punkt { width: 7px; height: 7px; }

  /* Das Band am Handy: Karten etwas schmaler, sonst identisch. */
  .te .te-band { margin-bottom: 12px; }
  .te .te-band-kopf { margin-bottom: 7px; }
  .te .te-band-kopf h3 { font-size: 14px; }
  .te .te-band-kopf .te-ohne-wort { font-size: 11px; }
  .te .te-rk { width: 156px; border-radius: 13px; padding: 9px 11px 8px; }
  .te .te-rk b { font-size: 13.5px; }
  .te .te-rk u { font-size: 11.5px; }
  .te .te-rk s { font-size: 11px; margin-top: 6px; }

  /* ================================================================================
     DIE ZEITACHSE FOLGT DER LANGEN SEITE DES GERÄTS (v2.241).
     Ein Gantt ist breit, ein Handy ist hoch — quer gab es 16 Stunden auf 300 px, also
     19 px je Stunde. Senkrecht sind es 432 px auf dieselben 16 Stunden: 27 px je
     Stunde, und jede Maschine bekommt eine eigene Spalte statt einer 30-px-Zeile.
     Dieselbe Auszeichnung, dieselben Prozentwerte — nur die Achse dreht sich.
     ================================================================================ */
  /* Kein verschachtelter Scroller: sonst klebt die Stundenspalte nicht. */
  .te .te-scroll { overflow: visible; }
  .te .te-gitter { display: flex; flex-direction: row; align-items: stretch;
    overflow-x: auto; padding-bottom: 2px; }

  /* Die Stundenspalte links, beim Wischen stehenbleibend. Ihr Kopf ist leer — er hält
     die Höhe der Maschinenköpfe, damit Stunde und Balken auf einer Linie liegen. */
  .te .te-stunden { position: sticky; left: 0; z-index: 3; flex: none;
    flex-direction: column; width: 24px; margin-left: 0; padding: 46px 0 0;
    border-bottom: 0; border-right: 1px solid var(--te-line);
    background: var(--te-surface); }
  .te .te-stunden span { flex: 1; font-size: 9px; text-align: right; padding-right: 3px;
    line-height: 1; visibility: visible; }
  .te .te-stunden span:nth-child(even) { visibility: hidden; }

  /* Eine Spalte je Maschine: Kopf oben, Spur darunter. */
  /* Die Spalten TEILEN sich die Breite, statt eine feste zu fordern: bei fünf belegten
     Maschinen (dem Regelfall der Halle) passen alle nebeneinander, ab der siebten
     greift die Untergrenze und es wird gewischt. Eine feste Spaltenbreite hätte je
     nach Maschinenzahl mal gepasst und mal die letzte Spalte abgeschnitten — genau das
     war am 01.09. mit der Ulla passiert. */
  .te .te-zeile { flex: 1 1 0; min-width: 48px; flex-direction: column;
    align-items: stretch; border-bottom: 0; border-left: 1px solid var(--te-line); }
  .te .te-maschine { box-sizing: border-box; width: auto; height: 46px;
    overflow: hidden; padding: 6px 5px 4px; text-align: center; }
  /* Der Zustandspunkt steht am Handy ÜBER dem Namen statt davor: nebeneinander
     kosteten Punkt und Abstand 9 der 44 verfügbaren Pixel und machten aus „Monika"
     ein „Mo…". Übereinander trägt die Spalte den ganzen Namen — und der Punkt wird
     zur Reihe von Ampeln über dem Brett, die man in einem Blick abliest. */
  .te .te-maschine .te-name { font-size: 11.5px; gap: 2px; letter-spacing: 0;
    flex-direction: column; justify-content: center; }
  /* „Gildemeister CT20" wird in einer 54-px-Spalte zu „Gil…" — das ist kein Name mehr.
     Wo ein Spitzname steht („Inge", „Monika", „Ulla"), passt er ohnehin; wo der lange
     Herstellername steht, tritt das Kürzel ein, mit dem die Halle spricht. */
  .te .te-maschine .te-name.te-lang .te-m-wort { display: none; }
  .te .te-maschine .te-name.te-lang .te-m-kurz { display: inline; }
  .te .te-maschine .te-sub { font-size: 9.5px; line-height: 1.2; margin-top: 2px; }
  /* Der rote Punkt am Namen und die rote Spalte darunter sagen bereits „steht" — das
     Wort dazu passte nicht mehr in den 46-px-Kopf und wurde mittig abgeschnitten. */
  .te .te-maschine .te-sub.te-warnung { display: none; }
  .te .te-maschine .te-stamm, .te .te-maschine .te-plaetze { display: none; }
  /* In einer 68-px-Spalte bräuchte „3 ohne Zeit" zwei Zeilen und säße dem Namen im
     Nacken. Die Zahl in Bernstein sagt dasselbe; das Wort steht im Band darüber. */
  .te .te-maschine .te-marke .te-marke-wort { display: none; }
  .te .te-maschine .te-marke b { font-size: 11px; }
  .te .te-status-punkt { width: 6px; height: 6px; }

  .te .te-spur { flex: none; width: 100%; height: var(--te-brett-h); }
  /* Stundenlinien statt Wanne: auf einer senkrechten Achse braucht das Auge das
     Raster, nicht den grauen Grund. */
  .te .te-spur-grund { inset: 0; border-radius: 0; background: transparent;
    background-image: repeating-linear-gradient(to bottom,
      var(--te-line) 0 1px, transparent 1px calc(100% / var(--stunden, 16))); }

  .te .te-gang { left: calc(var(--unterspur, 0) * 100% / var(--spuren, 1));
    width: calc(100% / var(--spuren, 1)); top: var(--a); height: var(--b);
    min-width: 0; min-height: 26px; padding: 4px 6px; border-radius: 8px;
    white-space: normal; justify-content: flex-start; }
  .te .te-gang .te-t { font-size: 10.5px; line-height: 1.2; letter-spacing: 0;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  /* Ein kurzer Block trägt eine Zeile statt keiner: senkrecht ist die BREITE da, es
     fehlt nur die Höhe (v2.240 blendete den Text ganz aus — das war der quere Fall). */
  .te .te-gang.te-schmal .te-t { display: -webkit-box; -webkit-line-clamp: 1; }
  .te .te-gang.te-schmal { padding: 4px 5px; }
  .te .te-gang .te-z { display: none; }

  .te .te-jetzt { left: 0; right: 0; width: auto; height: 2px;
    top: var(--jetzt); bottom: auto; }
  .te .te-jetzt.te-jetzt-oben { top: var(--jetzt); }
  .te .te-jetzt[data-zeit]::before { font-size: 9px; padding: 1px 5px;
    top: -7px; left: 2px; transform: none; }

  /* Die freien Maschinen brauchten am Handy vier Zeilen für eine Nebensache. Eine
     Zeile, waagerecht wischbar — sie bleibt erreichbar und hört auf zu drängeln. */
  .te .te-frei-zeile { padding: 10px 10px 2px; font-size: 12px;
    white-space: nowrap; overflow-x: auto; }
  .te .te-frei-chip { font-size: 12px; }
  .te .te-frei-chip { font-size: 12px; }
}

/* Wirte bringen eigene h2-Regeln mit (Leitstand: klein + VERSAL) — die Leiste des
   Artefakts setzt sich durch. */
.te .te-leiste h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  text-transform: none; color: var(--te-ink); margin: 0; }