/* huelle-tabelle.css: Reiter-Art `tabelle` (Stufe 1a des Tabellen-Bauplans, 30.09.2026),
   zu huelle-tabelle.js, huelle-tabelle-eingabe.js und huelle-haende.js.
   Formelzeile, virtualisiertes Raster, Blatt-Reiter, Statusleiste; Vorschläge der Agentin
   in ihrer Farbe (blau), Aufleuchten 1,5 s. Zellen stehen hell wie Papier, auch im Dunkel-
   modus, weil Farben aus einer xlsx-Datei für hellen Grund gewählt sind. */

.tabFlaeche { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tabLeerKnoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.tabFormel { display: grid; grid-template-columns: 92px auto minmax(0, 1fr); gap: 6px; align-items: center; }
.tabAdresse, .tabFormelFeld { min-width: 0; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.tabAdresse { font-family: var(--schriftMono, ui-monospace, monospace); text-align: center; }
.tabFormelFeld { font-family: var(--schriftMono, ui-monospace, monospace); }
.tabFx { color: var(--dim); font-style: italic; font-size: 13px; }
.tabRaster { position: relative; height: min(68vh, 720px); min-height: 280px; overflow: auto; outline: none;
  border: 1px solid var(--linie); border-radius: var(--rundKlein, 8px); background: #ffffff; color: #1c1c1c;
  font-size: 13px; overscroll-behavior: contain; }
.tabRaster:focus-visible { box-shadow: 0 0 0 2px var(--blau); }
.tabInhalt { position: relative; }
.tz, .tabKopfS, .tabKopfZ, .tabEcke, .tabAuswahl, .tabAktiv { position: absolute; box-sizing: border-box; }
.tz { padding: 0 4px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: clip;
  border-right: 1px solid #ececec; border-bottom: 1px solid #ececec; background: #ffffff; }
.tz.rechts { text-align: right; }
.tz.links { text-align: left; }
.tz.mitte { text-align: center; }
.tz.fett { font-weight: 700; }
.tz.kursiv { font-style: italic; }
.tz.unter { text-decoration: underline; }
.tz.umbruch { white-space: normal; line-height: 1.25; }
.tz.rahmen-oben { border-top: 1px solid #333; }
.tz.rahmen-unten { border-bottom: 1px solid #333; }
.tz.rahmen-links { border-left: 1px solid #333; }
.tz.rahmen-rechts { border-right: 1px solid #333; }
.tz.fehler { color: #b3261e; }
.tz.notiz::after { content: ""; position: absolute; top: 0; right: 0; border: 4px solid transparent;
  border-top-color: #d4a017; border-right-color: #d4a017; }
.tz.marke-fremd::before, .tz.marke-veraltet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #d4a017; }
.tz.marke-veraltet { color: #8a6d0b; }
.tz.marke-leise { color: #5f5f5f; }
.tz.marke-zirkel { color: #b3261e; font-weight: 600; }
.tz.vorschlag { outline: 2px dashed #2f6fd6; outline-offset: -2px; background: #eaf1fc; color: #173f7a; }
.tz.leuchten-agentin { animation: tabLeuchtenAgentin 1.5s ease-out; }
.tz.leuchten-andere { animation: tabLeuchtenAndere 1.5s ease-out; }
@keyframes tabLeuchtenAgentin { from { background: #b9d2f7; } to { background: #ffffff; } }
@keyframes tabLeuchtenAndere { from { background: #f7e7b0; } to { background: #ffffff; } }
@media (prefers-reduced-motion: reduce) { .tz.leuchten-agentin, .tz.leuchten-andere { animation: none; } }
.tabKopfS, .tabKopfZ, .tabEcke { z-index: 3; background: #f3f3f1; color: #555; font-size: 11.5px; text-align: center;
  line-height: 23px; border-right: 1px solid #dcdcd8; border-bottom: 1px solid #dcdcd8; -webkit-user-select: none; user-select: none; }
.tabEcke { z-index: 4; }
.tabAuswahl { z-index: 1; pointer-events: none; background: rgba(47, 111, 214, 0.10); border: 1px solid #2f6fd6; }
.tabAktiv { z-index: 1; pointer-events: none; border: 2px solid #2f6fd6; }
.tabEditor { position: absolute; z-index: 5; box-sizing: border-box; padding: 0 4px; border: 2px solid #2f6fd6;
  background: #ffffff; color: #1c1c1c; font: inherit; font-size: 13px; outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); resize: none; overflow: hidden; line-height: 18px; white-space: pre; }
.tabBlaetter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tabBlatt { padding: 4px 12px; border: 1px solid var(--linie); border-radius: 0 0 6px 6px; background: var(--panel);
  color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; }
.tabBlatt[aria-selected="true"] { color: var(--text); background: var(--zeile); box-shadow: inset 0 2px 0 var(--gold); }
.tabStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 18px; font-size: 12.5px;
  color: var(--dim); }
.tabStatusTeil { display: inline-flex; align-items: center; gap: 4px; }
.tabStatusTeil .ikon { width: 14px; height: 14px; }
.tabStatusTeil.tabStatusWarn { color: #9a5b00; font-weight: 600; cursor: help; }
.tabStatusTeil.puls { color: #2f6fd6; animation: tabPuls 1.2s ease-in-out infinite; }
@keyframes tabPuls { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tabStatusTeil.puls { animation: none; } }
.haendeVorschlaege { display: flex; flex-direction: column; gap: 4px; }
.haendeVorschlag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px; background: rgba(47, 111, 214, 0.12); }
.haendeMarke { display: inline-flex; color: #2f6fd6; }
.haendeMarke .ikon { width: 16px; height: 16px; }
.haendeWort { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
@media (max-width: 760px) { .tabFormel { grid-template-columns: 72px auto minmax(0, 1fr); } .tabRaster { height: 60vh; } }

/* Stufe 1b (01.10.2026): Leiste, Suchen und Filter, Fixieren, Anfasser, Ablage, Entwurf,
   Diagramme. Zu huelle-tabelle-leiste.js, -griffe.js und -diagramm.js. */
.tabLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; position: relative; }
.tabLeisteGruppe { display: inline-flex; align-items: center; gap: 2px; padding-right: 10px;
  border-right: 1px solid var(--linie); position: relative; }
.tabLeisteGruppe:last-child { border-right: 0; }
.tabLeisteGruppe .zAktion[disabled] { opacity: 0.35; cursor: default; }
.tabSchrift { min-width: 26px; font-size: 14px; font-family: Georgia, "Times New Roman", serif; }
.tabSchrift.fett { font-weight: 700; }
.tabSchrift.kursiv { font-style: italic; }
.tabSchrift.unter { text-decoration: underline; }
.tabWahl { max-width: 130px; padding: 3px 4px; border: 1px solid var(--linie); border-radius: 6px; background: var(--panel);
  color: var(--text); font: inherit; font-size: 12.5px; }
.tabFarbe { width: 28px; height: 26px; padding: 1px; border: 1px solid var(--linie); border-radius: 6px; background: var(--panel);
  cursor: pointer; }
.tabMenue { position: absolute; top: 100%; left: 0; z-index: 20; display: flex; flex-direction: column; min-width: 190px;
  padding: 4px; border: 1px solid var(--linie); border-radius: 8px; background: var(--panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.tabMenueEintrag { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tabMenueEintrag:hover, .tabMenueEintrag:focus-visible { background: var(--zeile); }
.tabMenueEintrag .ikon { width: 16px; height: 16px; }
.tabNeben { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tabNeben:empty { display: none; }
.tabNeben.filter { flex-direction: row; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--panel); }
.tabSucheFeld { min-width: 0; width: 180px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.tabHaken { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--dim); }
.tabSucheZahl { min-width: 32px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tabFilterKopf { width: 100%; font-weight: 600; font-size: 13px; }
.tabFilterListe { display: flex; flex-direction: column; gap: 2px; max-height: 180px; min-width: 180px; overflow: auto;
  padding-right: 8px; }
.tabEntwurf { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
  background: rgba(212, 160, 23, 0.16); font-size: 13px; }
.tabEntwurf[hidden] { display: none; }
.tabEntwurfWort { flex: 1; min-width: 0; }
.tz.fix { z-index: 2; background: #fbfbf9; }
.tabFixLinie { position: absolute; z-index: 2; pointer-events: none; background: #9a9a96; }
.tabFixLinie.waag { height: 2px; }
.tabFixLinie.senk { width: 2px; }
.tabFilterKnopf { position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: 1px solid #c9c9c5; border-radius: 3px; background: #f7f7f5; color: #555;
  cursor: pointer; }
.tabFilterKnopf.an { background: #dce8fb; border-color: #2f6fd6; color: #2f6fd6; }
.tabFilterKnopf .ikon { width: 11px; height: 11px; }
.tabAnfasser { position: absolute; z-index: 2; width: 7px; height: 7px; background: #2f6fd6; border: 1px solid #ffffff;
  cursor: crosshair; }
.tabZiel { position: absolute; z-index: 1; pointer-events: none; border: 1px dashed #2f6fd6; }
.tabAblage { position: absolute; z-index: 1; pointer-events: none; border: 2px dashed #2f6fd6; }
.tabDiagramme { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tabDiagramm { position: absolute; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box;
  border: 1px solid #d4d4d0; border-radius: 6px; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  overflow: hidden; }
.tabDiagrammKopf { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 8px;
  border-bottom: 1px solid #ececec; }
.tabDiagrammKopf .tabWahl { background: #ffffff; color: #1c1c1c; border-color: #d4d4d0; }
.tabDiagrammKopf .zAktion { color: #555; }
.tabDiagrammTitel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; font-size: 12.5px; color: #1c1c1c; cursor: move; }
.tabDiagrammFlaeche { display: block; }
/* Formel bearbeiten wie in Excel (01.10.2026), zu huelle-tabelle-formel.js: Bezüge farbig im Text
   und als Rahmen im Raster, Vorschläge, Argument-Hilfe, Klammerpaar. Der farbige Text liegt über
   dem Feld, dessen Schrift dann durchsichtig ist; darum ändert hier nichts die Breite der Zeichen
   (keine fette Schrift). Das Raster ist Papier und immer hell: dort gelten die hellen Werte der
   Themenfarben. */
.tabInhalt { --blau: #2563eb; --warn: #ea580c; --goldhell: #7c4dee; --gruen: #16a34a; --gold: #4f46e5; }
.tabFormelHuelle { position: relative; display: flex; min-width: 0; }
.tabFormelHuelle .tabFormelFeld { flex: 1; width: 100%; box-sizing: border-box; line-height: 18px; }
.tabFormelFarbe { position: absolute; inset: 0; box-sizing: border-box; padding: 5px 8px; border: 1px solid transparent;
  overflow: hidden; white-space: pre; pointer-events: none; color: var(--text);
  font-family: var(--schriftMono, ui-monospace, monospace); font-size: 13px; line-height: 18px; }
.tabEditorFarbe { position: absolute; z-index: 6; box-sizing: border-box; width: max-content; padding: 0 4px;
  border: 2px solid transparent; white-space: pre; pointer-events: none; color: #1c1c1c; font-size: 13px; line-height: 18px; }
.tabFormelFarbe[hidden], .tabEditorFarbe[hidden], .tabFormelBei[hidden] { display: none; }
.tabFormelFeld.formel { color: transparent; caret-color: var(--text); }
.tabEditor.formel { color: transparent; caret-color: #1c1c1c; }
.tfB0, .tfR0 { color: var(--blau); }
.tfB1, .tfR1 { color: var(--warn); }
.tfB2, .tfR2 { color: var(--goldhell); }
.tfB3, .tfR3 { color: var(--gruen); }
.tfB4, .tfR4 { color: var(--gold); }
.tfText { opacity: 0.7; }
.tfKlammer.paar { background: rgba(47, 111, 214, 0.25); border-radius: 2px; }
.tabBezug { position: absolute; z-index: 1; box-sizing: border-box; pointer-events: none; border: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 9%, transparent); }
.tabBezug.zeigt { border-style: dashed; }
.tabFormelBei { position: absolute; z-index: 8; min-width: 220px; max-width: 440px; padding: 4px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--panel); color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-size: 12.5px; }
.tabFormelEintrag { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; }
.tabFormelEintrag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.tabFormelEintrag.gewaehlt, .tabFormelEintrag:hover { background: var(--zeile); }
.tabFormelHilfe { padding: 2px 6px; white-space: nowrap; font-family: var(--schriftMono, ui-monospace, monospace); }
/* E-16-Umbau (01.10.2026): Hände an Tafel und Zeitstrahl. */
.tfLeiste { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.haeAutonomie[aria-pressed="true"] { color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; border-radius: 6px; }
.tfVorschlaege { margin: 6px 0; }
.tfGriffe { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.prommKarte:hover .tfGriffe, .prommKarte:focus-within .tfGriffe,
.prommSchritt:hover .tfGriffe, .prommSchritt:focus-within .tfGriffe { opacity: 1; }
.tfGriffe .zAktion .ikon { width: 14px; height: 14px; }
.prommKarte[draggable="true"] { cursor: grab; }
.prommKarte.zieht { opacity: 0.45; }
.prommBahn.tfZiel { outline: 2px dashed #2f6fd6; outline-offset: -2px; }
.tfPlus { margin-left: auto; }
.prommAbschnitt:hover .tfGriffe, .prommAbschnitt:focus-within .tfGriffe { opacity: 1; }
.tfAbschnitte { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tfAbschnittKopf { margin: 4px 0; font-size: 14px; }
.tfVorschlag { outline: 2px dashed #2f6fd6; outline-offset: 2px; }
.tfForm { display: grid; gap: 4px; margin-top: 6px; font-size: 12.5px; }
.tfForm label { display: grid; gap: 2px; color: var(--dim); }
.tfForm input { font: inherit; padding: 3px 6px; border: 1px solid var(--linie); border-radius: 4px; }
.prommKarte.leuchten-agentin, .prommSchritt.leuchten-agentin { animation: tabLeuchtenAgentin 1.5s ease-out; }
.prommKarte.leuchten-andere, .prommSchritt.leuchten-andere,
.prommKarte.leuchten-aussen, .prommSchritt.leuchten-aussen { animation: tabLeuchtenAndere 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .prommKarte, .prommSchritt { animation: none !important; } }
/* E-16-Umbau Stufe 2 (01.10.2026): Hände an Vortrag und Stil. */
.fhFarbe { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--linie); }
.haendeVorschlag:has(.fhFarbe) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.folieMini.tfVorschlag { outline: 2px dashed #2f6fd6; outline-offset: 1px; }
.fhLeuchten.leuchten-agentin { animation: fhLeuchtenAgentin 1.5s ease-out; }
.fhLeuchten.leuchten-andere, .fhLeuchten.leuchten-aussen { animation: fhLeuchtenAndere 1.5s ease-out; }
@keyframes fhLeuchtenAgentin { from { box-shadow: 0 0 0 4px #2f6fd6; } to { box-shadow: 0 0 0 4px transparent; } }
@keyframes fhLeuchtenAndere { from { box-shadow: 0 0 0 4px #d4a017; } to { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .fhLeuchten { animation: none !important; } }
/* E-16-Umbau Stufe 3 (01.10.2026): Hände an Datei und Ordner. */
.dtDatei { display: flex; flex-direction: column; gap: 2px; }
.dtBlock { position: relative; padding: 2px 8px; border-radius: 6px; }
.dtBlock:hover { background: var(--zeile); }
.dtDiagramm { padding: 10px 6px; overflow-x: auto; text-align: center; }
.dtDiagramm svg { max-width: none; height: auto; }
.dtDiagrammRoh { text-align: left; font-size: 12px; white-space: pre-wrap; color: var(--dim); margin: 0; }
.dtDiagrammFehler { text-align: left; font-size: 12px; color: #9a5b00; margin: 6px 0 0; }
.dtBlock .dtGriffe { position: absolute; top: 2px; right: 4px; background: var(--panel); border-radius: 6px; }
.dtBlock:hover .dtGriffe, .dtBlock:focus-within .dtGriffe { opacity: 1; }
.dtBlock.dtInArbeit { opacity: 0.45; }
.dtBlock[draggable="true"] { cursor: grab; }
.dtVorschau { margin: 2px 0; padding: 2px 8px; border-radius: 6px; outline: 2px dashed #2f6fd6; outline-offset: -2px;
  background: rgba(47, 111, 214, 0.08); }
.dtFeld { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: start; margin: 4px 0; }
.dtFeld textarea { font: inherit; font-family: ui-monospace, monospace; font-size: 13px; padding: 6px 8px;
  border: 2px solid #2f6fd6; border-radius: 6px; background: var(--panel); color: var(--text); resize: vertical; }
/* E-16-Umbau Stufe 4 (01.10.2026): Hände am Grafik-Reiter. */
.prommWerkstatt { position: relative; }
.grEbene { position: absolute; pointer-events: none; image-rendering: pixelated; outline: 2px dashed #2f6fd6; outline-offset: -2px; }
.prommKachel.tfVorschlag { outline: 2px dashed #2f6fd6; outline-offset: 2px; }
.grSymbolWahl { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--panel); color: var(--text); max-width: 120px; }

/* --- Ohne Text auf den ersten Blick (21.10.2026): leerer Reiter und Tafel als Symbole ------------------------ */
.prommLeerSymbol { display: grid; place-items: center; min-height: 40vh; color: var(--dim); opacity: .5; }
.prommLeerSymbol .ikon { width: 56px; height: 56px; animation: dvAtmen 3.2s ease-in-out infinite; }
.prommSymbole { display: flex; flex-direction: column; gap: 18px; }
.prommSymbolGruppe { display: flex; flex-direction: column; gap: 10px; }
.prommSymbolKopf { display: inline-flex; align-items: center; gap: 6px; width: max-content; color: var(--dim); }
.prommSymbolZahl { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prommSymbolGruppe[data-rolle="fertig"] { --symbolFarbe: var(--gruenText); }
.prommSymbolGruppe[data-rolle="jetzt"] { --symbolFarbe: var(--goldText); }
.prommSymbolGruppe[data-rolle="offen"] { --symbolFarbe: var(--dim); }
.prommSymbolGruppe[data-rolle="weg"] { --symbolFarbe: var(--warnText); }
.prommSymbolKopf .prommBahnMarke, .prommSymbolKopf .prommSymbolZahl { color: var(--symbolFarbe, var(--dim)); }
.prommSymbolReihe { display: flex; flex-wrap: wrap; gap: 8px; }
.prommSymbolKnopf { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  cursor: pointer; color: var(--symbolFarbe, var(--dim));
  background: color-mix(in srgb, var(--symbolFarbe, var(--dim)) 14%, transparent); transition: transform .15s ease; }
.prommSymbolGruppe[data-rolle="offen"] .prommSymbolKnopf { opacity: .65; }
.prommSymbolKnopf .ikon { width: 22px; height: 22px; }
.prommSymbolKnopf:hover { transform: scale(1.08); }
.prommSymbolKnopf[aria-expanded="true"] { outline: 2px solid var(--symbolFarbe, var(--dim)); outline-offset: 2px; opacity: 1; }
.prommSymbolAuf { max-width: 640px; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--symbolFarbe, var(--dim)) 8%, transparent); }
.prommSymbolAuf dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.prommSymbolAuf dt { color: var(--dim); }
.prommSymbolAuf dd { margin: 0; color: var(--text); }