/* SEPP — gemeinsame Styles. Seit dem 10.09.2026 in der CI der Einsatzplanung (Vorgabe Chris): MEDIAtek-Grau, CI-Rot `#C8102E` als Akzent, Blatt `#F4F5F6`, Linien `#C4C8CD`, EINE Schriftfamilie (Bahnschrift, 87,5 % gestaucht, Ziffern tabellarisch). Die Grundsätze davor gelten weiter: harte Ecken, Akzent NUR für Primäraktion, aktiven Zustand und Fokus; alles Farbige in der Fläche kommt aus AVP.SIGNALS. Die Rollen `--f-display`/`--f-body`/`--f-mono` bleiben als Token stehen und zeigen auf dieselbe Familie — wer eine zweite Schrift will, ändert eine Zeile. */ :root { /* CI der Einsatzplanung (10.09.2026): Rot #C8102E, Grau #5F6368 / #A6A8AB, Blatt #F4F5F6, Linien #C4C8CD. `--acc-t` ist der Akzent als TEXT auf hellem Grund und liegt eine Stufe dunkler (7,5:1 auf Weiß); `--acc-l` ist das „red-soft" der Einsatzplanung. */ /* **Seit 18.10.2026 Richtung D** (Entwurf „SEPP Designrichtungen“, Vorgabe Chris): der Akzent ist Blau statt CI-Rot, damit Rot, Gelb und Grün allein dem STATUS gehören. Hell und dunkel haben dieselbe Gestalt, nur andere Farben. Die Werte der Einsatzplanung darüber sind Herleitung. */ /* **Seit 20.10.2026 Entwurf A+C mit Petrol** (Board https://claude.ai/artifact/JohZksL99Lrp6QPLgLYeGF, Farbe 1, Vorgabe Chris): neutrale Grautöne, der Inhalt als EINE Fläche (`--card`) auf dem Grund (`--bg`), die Seitenleiste auf dem Grund. Akzent Petrol #26788E (5,0:1 mit Weiß), als Text eine Stufe dunkler. Die Werte darüber (Blau, CI-Rot) sind Herleitung. */ --acc:#26788E; --acc-h:#1F6679; --acc-l:#E7F2F5; --acc-t:#1F6679; --on-acc:#FFFFFF; --acc-f:#26788E; --acc-fh:#1F6679; /* Fläche im Akzent (Hauptknopf, gefüllte Marken) — s. Dunkelmodus */ --bg:#F6F6F5; --card:#FFFFFF; --card-2:#F2F2F3; --txt:#18181B; --nav:#F6F6F5; /* Statusfläche getönt (seit 20.10.2026): der Punkt von `.st` ist eine blasse Fläche mit dem Zeichen in Statusfarbe — dieselbe Gestalt in Menü, Übersicht, Reife und Listen (Vorgabe Chris, Foto). */ --ok-l:#E7F5EC; --gelb-l:#FBF3DB; --rot-l:#FCE8E8; --aus-l:#EFEFF1; /* Status (seit 18.10.2026): Text- und Füllfarbe je Stufe, dazu IMMER ein Zeichen (✓ ! × –) — Farbe allein trennen Rot und Grün für Farbenblinde nicht. `--warn` bleibt der Name für Rot. */ --gelb:#8A5300; --ok-f:#2E9E4F; --gelb-f:#D99000; --rot-f:#DE3B30; --aus-f:#9AA1AA; --auf-st:#FFFFFF; --r-k:12px; /* `--mut` traegt Hilfstexte, Legende und Spaltenkoepfe bei 10–13 px. Mit #71757C lag der Kontrast bei 4,47:1 auf dem Blatt und 4,12:1 auf `--card-2` — beides unter WCAG AA (4,5). #62666C bringt 5,57 bzw. 5,14 (Audit 10.09.2026, Befund D-03). Das CI-Grau #5F6368 der Einsatzplanung liegt mit 5,9 auf Weiß und 5,1 auf `--card-2` ebenfalls über AA. */ --mut:#62626C; /* `--bdr` sind Trennlinien (dort ist wenig Kontrast gewollt), `--ctl-bdr` der Umriss von BEDIENelementen. Der lag mit `--hover-bdr` bei 1,90:1; WCAG 1.4.11 verlangt 3:1, sonst ist ein Eingabefeld vom Blatt kaum zu unterscheiden (Befund D-05). */ --bdr:#E7E7EA; --hover:#EDEDEF; --hover-bdr:#D4D4D8; --ctl-bdr:#C4C4CA; /* Seit 20.10.2026: Knöpfe tragen ihren Text, der Umriss ist dort Schmuck (`--ctl-bdr`, leiser). Ein EINGABEFELD hat keinen Text, der es kennzeichnet — dort bleibt die 3:1-Regel (WCAG 1.4.11, D-05). */ --inp-bdr:#909098; /* `--ok` stand bei 4,17:1 (hell) und 3,78:1 (dunkel) — beides unter AA bei 11–13 px, und einen Dunkelwert gab es gar nicht (Befund D-04). */ --ok:#1B7A35; --warn:#B3261E; /* Radien seit 18.10.2026 (Richtung D): Felder und Chips 6 px, Karten und Dialoge `--r-k`, Knöpfe als Pille (in `.btn`). Vorher 3 px überall („Reissbrett“). */ --r:6px; --r-xs:2px; --sh:0 1px 2px rgba(0,0,0,.05); /* ---------- Skalen (Befunde D-15, D-16, D-21, D-32) ---------- Bis zum Audit gab es 26 verschiedene Schatten, 15 z-index-Werte, 29 Schriftgroessen und 21 Abstaende ohne erkennbare Regel. Die Tokens sind die gemeinsame Sprache fuer alles Neue; der Bestand wandert nach und nach nach — **ein neuer Wert wird hier gesucht, nicht erfunden.** Die z-Skala hat Vorrang, dort steckte ein echter Fehler: das Spaltenfilter- Popover lag auf 200 und damit ueber der Rueckfrage-Ebene (120). */ /* Signalfarbe Strom am Bildschirm (27.09.2026): `AVP.SIGNALS` trägt #3A3A3A — auf dem dunklen Grund unlesbar. Das Schema zeichnet Strom über dieses Token; das PDF-Blatt setzt es auf den Wert der Liste zurück. */ --sig-strom:#3A3A3A; --sh-1:0 1px 2px rgba(0,0,0,.05); /* Karte, Chip */ --sh-2:0 8px 24px rgba(0,0,0,.18); /* Popover, Dropdown, Menue, Tooltip */ --sh-3:0 18px 48px rgba(0,0,0,.28); /* Modal */ --z-sticky:5; --z-drag:10; --z-pop:60; --z-tip:70; --z-modal:100; --z-sub:110; --z-ask:120; /* Menüs liegen über allem — auch über einem Dialog, aus dem sie geöffnet werden (Block-Editor, 03.10.2026); sie schließen beim nächsten Klick ohnehin. Vorher 60, also HINTER jedem Modal. */ --z-menu:130; --fs-1:10px; --fs-2:11px; --fs-3:12px; --fs-4:13px; --fs-5:14px; --fs-6:16px; --fs-7:21px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; /* **Drei Schriftrollen, alle ohne Webfont** (Festlegung 26.07.2026: kein CDN, nichts nachzuladen). Auf Windows greifen die ersten Namen; auf der Baustelle steht aber auch ein Tablet oder ein Telefon (Vorgabe Chris), und dort gibt es weder Bahnschrift noch Segoe UI Variable noch Cascadia Mono. Bis zum 10.09.2026 fiel `--f-display` dann auf `system-ui` zurück — also auf DIESELBE Schrift wie `--f-body`, und damit war der Unterschied zwischen Auszeichnung und Lauftext auf genau den Geräten weg, auf denen der Platz am knappsten ist. Die schmalen Systemschriften von iOS und Android stehen jetzt davor. **Auf iOS und Android ist das nicht nachgemessen** — ein Name, den es nicht gibt, wird übersprungen, mehr als der bisherige Zustand kann also nicht herauskommen. */ /* **Seit dem 10.09.2026 EINE Familie** (Vorgabe Chris: Schrift wie in der Einsatzplanung). Dort ist der Ansatz mit drei Schriftrollen ausdrücklich zurückgenommen worden: es gilt immer genau eine Familie, Bahnschrift, 87,5 % gestaucht; tabellarische Ziffern sind eine Ziffernvariante DERSELBEN Schrift (`font-variant-numeric`), keine zweite Familie. Die drei Token bleiben stehen, weil 137 Regeln sie benutzen und die Rollen (Auszeichnung, Lauftext, Kennzeichen) weiter lesbar sein sollen — sie zeigen nur auf dieselbe Liste. */ /* **Seit 20.10.2026 Inter** (Entscheidung Chris, Board A+C): lokal unter vendor/inter (OFL), kein CDN — die Regel „nichts aus dem Netz nachladen“ gilt weiter, „kein Webfont“ ist für Inter aufgehoben. Lädt die Datei nicht, greift Segoe UI. Kennzeichen (BMK, LV-Position, IP) in Cascadia Mono. Bahnschrift bleibt nur in den Ausgaben (Plankopf, Etiketten). */ --f-display:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; --f-body:var(--f-display); --f-mono:'Cascadia Mono','Cascadia Code',Consolas,ui-monospace,monospace; /* Eigener Zeiger fürs Verdrahten: Fadenkreuz mit Steckerpunkt, Hotspot in der Mitte. Zwei Konturen (dunkel außen, hell innen), damit er auf hellem UND dunklem Grund sichtbar ist. Fällt auf crosshair zurück, falls der Browser den Bild-Cursor ablehnt. */ --cur-plug:url('data:image/svg+xml;utf8,') 13 13, crosshair; } html[data-theme="dark"] { /* Dunkelmodus der Einsatzplanung: Rot #E0344F, Fläche #1C1D20, Panel #26282C, Linie #4A4E55. */ /* Seit 18.10.2026 Richtung D „Leitstand“: Graphit, Akzent Hellblau mit dunkler Schrift darauf. */ /* Seit 20.10.2026 nachts (Rückmeldung Chris „Farbe im Dunkelmodus nicht optimal … mehr Richtung Hellmodus?"): FLÄCHEN im Akzent tragen dasselbe Petrol wie hell (`--acc-f`, weiße Schrift 4,7:1); Schrift, Symbole und Linien im Akzent bleiben hell (`--acc`), denn Petrol als Schrift auf Graphit käme nur auf rund 3:1. */ /* Schrift/Linien seit 20.10.2026 nachts Petrol hell statt Hellblau (Vorgabe Chris „altes Hellblau ersetzen“): #3E95AB hat 5,3:1 auf --card, #4FA3B8 als Textakzent 6,3:1. */ --acc:#3E95AB; --acc-h:#4FA3B8; --acc-l:#11303A; --acc-t:#4FA3B8; --on-acc:#FFFFFF; --acc-f:#2A7E96; --acc-fh:#318AA2; --bg:#0D0E10; --card:#141518; --card-2:#1A1B1E; --txt:#ECECEE; --mut:#8E8E98; --nav:#0D0E10; --ok-l:#13261C; --gelb-l:#2A2311; --rot-l:#2E1516; --aus-l:#1F2024; --sig-strom:#C9CCD1; --bdr:#24252A; --hover:#1F2024; --hover-bdr:#34353B; --ctl-bdr:#3E3F46; --inp-bdr:#5E5F67; --ok:#4CC38A; --warn:#F2555A; --gelb:#E5B53B; --ok-f:#3FBF63; --gelb-f:#E9A62A; --rot-f:#E5483D; --aus-f:#5A6068; --auf-st:#111316; --sh:0 1px 2px rgba(0,0,0,.5); --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 8px 24px rgba(0,0,0,.55); --sh-3:0 18px 48px rgba(0,0,0,.65); /* Der Verdrahtungs-Zeiger trug im Dunkelmodus den HELLEN Akzentton (Befund D-34). */ --cur-plug:url('data:image/svg+xml;utf8,') 13 13, crosshair; } @font-face { font-family:'Inter'; src:url('vendor/inter/InterVariable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } * { box-sizing:border-box; } /* 13,5 px Inter statt 15 px Bahnschrift gestaucht: ungefähr dieselbe Zeilenbreite. `font-stretch` wirkt bei Inter nicht (keine Breitenachse) — die 137 Regeln, die es noch setzen, sind damit folgenlos. */ body { margin:0; font:13.5px/1.45 var(--f-body); font-variant-numeric:tabular-nums; font-feature-settings:'cv11' 1; background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; } button { font:inherit; color:inherit; cursor:pointer; } input, select, textarea { font:inherit; color:inherit; } :focus-visible { outline:2px solid var(--acc); outline-offset:1px; } /* **`transition` allein reicht nicht.** Wer Bewegung reduziert haben will, meint auch `animation`: die Sprungmarken der fehlenden Pflichtangaben lassen ihr Zielfeld 1,2 s lang blinken (`cdblink`), und genau solche Blinkfolgen sind der Grund fuer die Einstellung. Die Hervorhebung bleibt — sie ist die Information, die Bewegung nur ihre Verstaerkung; deshalb bleibt die Toenung stehen, solange die Klasse gesetzt ist (JS nimmt sie nach 1,2 s wieder weg), statt sie ersatzlos zu streichen. (Die Pulsanimationen der Verdrahtung sind schon seit dem 16.08.2026 abgedeckt, s. u.) */ @media (prefers-reduced-motion:reduce) { * { transition:none !important; } .field.blink, .bmk-modus.blink { animation:none; background:color-mix(in srgb, var(--acc) 18%, transparent); } } /* ---------- Projekt-Switcher = Projektband (seit 13.09.2026) ---------- „Ich muss jederzeit wissen, in welchem Projekt ich mich befinde" (Vorgabe Chris 16.08.2026) — und **Projekt und Menüpunkt nie in einer Zeile**. Vom 16.08. bis 13.09.2026 stand dafür ein eigenes Band über der Überschrift; es wiederholte den Switcher in der Kopfzeile und kostete in jeder Ansicht 48 px. Jetzt trägt der KNOPF des Switchers die Gestalt des Bands: Akzentkante links, Ordnersymbol, Nummer in Mono (Kennzeichen), Name in der Auszeichnungsschrift, Kunde gedämpft. Hervorgehoben über Kante und Symbol, NICHT über eine farbige Fläche: Farbe in der Fläche gehört in dieser App den Signalarten (s. §Design). Der Name bekommt Auslassungspunkte statt eines Umbruchs — die Kopfzeile ist 64 px hoch und bleibt es. */ .prj-switch .csel-btn { gap:9px; padding:6px 14px 6px 13px; white-space:nowrap; min-width:0; border-radius:8px; background:var(--card-2); } /* Radius wie alle Knöpfe (18.10.2026) */ .prj-switch .csel-btn > i.ti-folder { color:var(--acc); font-size:16px; } .prj-switch .pb-nr { font-family:var(--f-mono); font-size:12.5px; color:var(--acc-t); font-variant-numeric:tabular-nums; } .prj-switch .pb-name { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:15px; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; min-width:0; } .prj-switch .pb-name.pb-leer { color:var(--mut); font-weight:500; } .prj-switch .pb-kunde { font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0; } /* Zwischen 1300 und 1500 px stehen Langname und Switcher um den Platz; der Kunde ist dort die entbehrlichere Angabe — er steht auch auf der Projektkarte und im Bearbeiten-Dialog. */ @media (max-width:1500px) { .prj-switch .pb-kunde { display:none; } } /* ---------- App-Frame ---------- */ /* Die Kopfzeile ist 64 px hoch (vorher 56): Logo 36 px plus BAUER-Zeile brauchen 51 px. Wer die Höhe ändert, zieht die beiden `top`/`inset`-Werte der mobilen Seitenleiste unten mit. */ .app { display:grid; grid-template-columns:240px 1fr; grid-template-rows:64px 1fr; height:100vh; } /* Kopfzeile nach dem Muster der Einsatzplanung (Festlegung Chris 10.09.2026): weiße Zeile mit 2-px-Abschluss, links das Firmenlogo über der BAUER-Zeile, daneben der Plattformname. Im Dunkelmodus wird die Zeile dunkelgrau (#232529) mit rotem Abschluss — dieselben Werte wie dort, damit beide Anwendungen nebeneinander als EIN Haus erkennbar sind. */ .topbar { grid-column:1/3; display:flex; align-items:center; gap:20px; padding:0 16px; background:var(--card); border-bottom:1px solid var(--bdr); } /* Seit 18.10.2026 (Richtung D) ohne farbigen Abschluss: hell und dunkel dieselbe 1-px-Linie. */ html[data-theme="dark"] .topbar { background:#1C1F23; } /* Kein Strich mehr zwischen Logo und Wortmarke (Entwurfsboard 05.10.2026, Richtung A, Punkt 6): zusammen mit dem Kopfabschluss und dem roten Strich unter SEPP waren es drei Linien auf engem Raum, und der Strich trennte zwei Dinge, die zusammengehören. Der Abstand (4 + 20 px) trennt genug. Die BAUER-Zeile ist einen Hauch gesperrt, damit sie unter dem Logo nicht gequetscht wirkt. */ .firma { display:flex; flex-direction:column; align-items:center; padding-right:4px; } .firma img { height:36px; display:block; } .firma small { display:block; color:var(--mut); font-size:10px; letter-spacing:.04em; margin-top:2px; text-align:center; width:100%; white-space:nowrap; } /* Das Logo ist hellgraue Schrift auf WEISS (JPEG, keine Transparenz). Invertieren, aufhellen und die weiße Fläche per `screen` in den Kopf fallen lassen ergibt einen weißen Schriftzug auf Dunkelgrau — ohne zweite Bilddatei (so auch in der Einsatzplanung entschieden). */ html[data-theme="dark"] .firma img { filter:invert(1) brightness(2.9); mix-blend-mode:screen; } html[data-theme="dark"] .firma small { color:#C9CCD1; } .brand { display:flex; align-items:baseline; gap:14px; white-space:nowrap; } /* Die Wortmarke: weit gesperrte Versalien, darunter ein 3-px-Strich in CI-Rot — die Akzentkante, die sonst dem aktiven Nav-Punkt gehört, hier als Marke. Keine gefüllte Fläche (s. §Design). Im Langnamen sind die vier Anfangsbuchstaben S E P P in Rot und einen Grad größer gesetzt, damit man die Abkürzung darin liest, ohne sie erklärt zu bekommen (Vorgabe Chris). */ .brand .wm { position:relative; font-family:var(--f-display); font-stretch:87.5%; font-weight:700; font-size:26px; line-height:1; letter-spacing:.2em; padding-bottom:5px; } .brand .wm::after { content:''; position:absolute; left:0; right:.2em; bottom:0; height:3px; background:var(--acc); } .brand small { color:var(--mut); font-weight:400; font-size:12.5px; letter-spacing:.01em; } .brand small b { color:var(--acc); font-weight:700; font-size:14.5px; } /* Der Langname ist 60 Zeichen; unter 1300 px nimmt er dem Projekt-Switcher den Platz. */ @media (max-width:1300px) { .brand small { display:none; } } .topbar .sp { flex:1; } /* Überschrift der offenen Ansicht in der Kopfzeile (seit 27.09.2026). Links neben der Wortmarke, durch einen Strich getrennt — das Projekt steht weiterhin allein rechts im Switcher, beide bleiben zwei Elemente an zwei Enden der Zeile. Neben der Ansicht wird der Langname der Wortmarke früher entbehrlich: er weicht jetzt schon unter 1600 px. */ .kopf-ort { display:block; overflow:hidden; text-overflow:ellipsis; min-width:0; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:22px; white-space:nowrap; } /* Mittig in der Kopfzeile (dritte Runde 27.09.2026): absolut gesetzt, damit die Mitte nicht davon abhängt, wie breit Logo und Wortmarke links oder der Projekt-Switcher rechts gerade sind. Höchstens ein Viertel der Zeile breit, sonst Auslassungspunkte — so läuft er in keinen Nachbarn. */ .topbar { position:relative; } .topbar > .kopf-ort { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:25%; } /* Am Tablet (unter 1100 px) ist die Mitte schon vom Logo belegt — absolut gesetzt lag die Überschrift über der Wortmarke (A6, am Bild gefunden, 820 px). Dort steht sie in der Reihe hinter der Wortmarke und nimmt, was zwischen ihr und dem Switcher frei ist. */ @media (max-width:1100px) { .topbar > .kopf-ort { position:static; transform:none; max-width:none; flex:0 1 auto; margin-left:6px; font-size:19px; } } .kopf-ort:empty { display:none; } .kopf-ort .ihint { font-size:16px; } /* Das Symbol des Menüpunkts vor der Überschrift (Entwurfsboard 05.10.2026, Punkt 7): Menü und Titel sind dasselbe Wort, und nichts verband sie sichtbar. `kopfOrt()` liest es aus dem aktiven Nav-Eintrag; in Hilfstextgrau, damit es die Überschrift begleitet und nicht anführt. */ .kopf-ort .ort-ik { font-size:20px; color:var(--mut); margin-right:10px; vertical-align:-3px; } /* Die Wortmarke ist seit dem 27.09.2026 leiser: kleiner, in Hilfstextgrau, der rote Strich dünner. Sie bleibt als Marke erkennbar, ohne mit der Überschrift um den Blick zu konkurrieren. */ .brand .wm { font-size:17px; color:var(--mut); letter-spacing:.22em; padding-bottom:4px; } /* Der Strich unter SEPP war die CI-Rot-Kante; mit Richtung D (18.10.2026) entfällt er. */ .brand .wm::after { display:none; } .brand small { font-size:11.5px; } .brand small b { font-size:12.5px; } @media (max-width:1600px) { .brand small { display:none; } } .prj-switch { display:flex; align-items:center; gap:8px; max-width:520px; min-width:0; } .prj-switch .prj-einst { flex:none; } /* Zustand der Projektablage (15.10.2026): flächenlos wie der Thema-Knopf, Farbe nur bei der Ausnahme — Warnfarbe für „offline" und „nur dieser Browser", Akzent für „neuer Stand". */ .abl-zustand { gap:6px; white-space:nowrap; color:var(--mut); } .abl-zustand[hidden] { display:none; } .abl-zustand.warn { color:var(--warn); } .abl-zustand.neu { color:var(--acc); } @media (max-width: 1300px) { .abl-zustand .tb-tx { display:none; } } /* Neue Programmversion (22.10.2026): umrandet im Akzent — eine Aufforderung, keine Hauptaktion der Ansicht */ .prog-neu { gap:6px; white-space:nowrap; color:var(--acc-t); border-color:var(--acc); margin-right:6px; } .prog-neu[hidden] { display:none; } .prj-switch > .csel { min-width:0; } /* Seitenleiste nach dem Entwurfsboard vom 05.10.2026 (Richtung A „Reissbrett", Punkte 1–5): · Menütext in TEXTfarbe, Gewicht 500 — vorher stand alles in Hilfstextgrau mit Symbolen zu 75 % Deckung, und die Leiste las sich wie eine Liste gesperrter Einträge. · Die Zeile läuft über die volle Spaltenbreite, ohne Radius; der Innenabstand der Leiste (8 px) ist in die Zeile gewandert (12 → 20 px), der Text steht also an derselben Stelle. · Aktivkante 3 px BÜNDIG am Spaltenrand statt 2 px im abgerundeten Kasten. Die Fläche bleibt neutral — Akzent nur als Kante und Symbol (Festlegung 26.07.2026 gilt weiter). · Zeilen 34 statt 36 px (8 px Innenabstand). */ /* Seit 18.10.2026 (Richtung D): eigene Fläche `--nav`, Zeilen als abgerundete Felder mit 10 px Abstand zum Rand; die Akzentkante bleibt als Merkmal des aktiven Punkts. */ .sidebar { border-right:1px solid var(--bdr); background:var(--nav); padding:12px 0; overflow-y:auto; } .nav-item { display:flex; align-items:center; gap:10px; width:auto; margin:1px 10px; padding:8px 10px; border:none; background:none; border-radius:8px; text-align:left; font-size:14px; line-height:18px; font-weight:500; color:var(--txt); } /* Module, die das Projekt nicht führt, stehen nicht in der Leiste (Planungsumfang, 22.09.2026). `display:flex` hebelt `hidden` aus — die bekannte Falle, deshalb ausdrücklich. */ .nav-item[hidden] { display:none; } .nav-item i { font-size:18px; width:20px; text-align:center; color:var(--mut); } .nav-item:hover { background:var(--hover); } .nav-item:hover i { color:var(--txt); } /* aktiver Punkt neutral gefüllt, Akzent nur als Kante + Icon — Akzent bleibt der Aktion vorbehalten */ .nav-item.active { background:var(--hover); color:var(--txt); font-weight:700; box-shadow:inset 3px 0 0 var(--acc); } .nav-item.active i { color:var(--acc); } .nav-item .soon { margin-left:auto; font-family:var(--f-mono); font-size:10px; background:none; border:1px solid var(--bdr); color:var(--mut); border-radius:var(--r); padding:0 5px; } /* Gruppenüberschriften statt Trennlinien (Punkt 2): „Planung" über Struktur bis Bedienung, „Übergreifend" über Gerätestamm und Exporte. Die Linien gliederten, sagten aber nicht wonach. „Projekte" steht ohne Überschrift oben — es ist der Einstieg. */ .nav-cap { padding:14px 20px 4px; font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--mut); white-space:nowrap; } .nav-sep { margin:10px 12px; border-top:1px solid var(--bdr); } /* „Einklappen" ist kein Menüpunkt, sondern ein Schalter für die Leiste (Punkt 5): Fußzeile mit Linie darüber, kleiner, in Hilfstextgrau, ohne aktiven Zustand. */ .nav-klapp, .nav-klapp:hover { margin-top:auto; border-top:1px solid var(--bdr); padding:10px 20px; font-size:12px; font-weight:400; color:var(--mut); background:none; } .nav-klapp:hover { color:var(--txt); } .nav-klapp i { font-size:16px; } /* Einklappen (seit 27.09.2026): der Knopf steht unten in der Leiste. Eingeklappt ist die Spalte 56 px breit, die Beschriftung (ein Textknoten neben dem Symbol) fällt über `font-size:0` weg, das Symbol behält seine eigene Größe; den Namen trägt dann der Tooltip (ui.js). */ .sidebar { display:flex; flex-direction:column; } /* Die Regeln für den eingeklappten Zustand stehen seit 24.10.2026 gesammelt am Ende des Abschnitts „Entwurf A+C" (Einklappen ohne Umbau der Zeilen, Ausklappen beim Überfahren). */ .app.nav-schmal { grid-template-columns:56px 1fr; } /* Menü nach Tätigkeit (seit 18.10.2026): eine kräftige Linie trennt, was für alle Projekte gilt (Projekte, Gerätestamm), vom Projekt im Switcher; feine Linien gliedern „Planen“ ohne weitere Überschrift; am Fuß stehen Einrichten und Überwachen gedämpft über „Einklappen“. */ .nav-projekt { margin:10px 0 2px; padding:8px 20px 2px; border-top:2px solid var(--hover-bdr); font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--mut); } .nav-projekt::before { content:"Projekt"; } .nav-sep-fein { margin:5px 20px; } .nav-unten { margin-top:auto; padding-top:10px; border-bottom:1px solid var(--bdr); } .nav-unten ~ .nav-klapp { margin-top:0; } .nav-item.nav-leise { font-weight:400; color:var(--mut); } .nav-item.nav-leise.active { color:var(--txt); } /* Status am Menüpunkt und an der Gruppe (seit 19.10.2026, Statusregel): die EINE Gestalt `.st`, nur kleiner — Zeichen im Punkt, daneben die Zahl offener Punkte. Grau (nicht begonnen) und Grün bleiben ohne Zahl. Die Gruppenmarke ist ein Knopf (öffnet die Planungsreife), aber flächenlos wie ein Etikett. */ .nav-st.st { margin-left:auto; font-size:11.5px; font-weight:600; gap:4px; font-variant-numeric:tabular-nums; } .nav-st.st::before, .nav-gst.st::before { width:14px; height:14px; font-size:9px; } .nav-st.st.aus, .nav-st.st.ok { opacity:.75; } .nav-st[hidden], .nav-gst[hidden] { display:none; } .nav-item.active .nav-st.st { opacity:1; } .nav-cap[data-gruppe] { display:flex; align-items:center; gap:6px; padding-right:14px; } .nav-cap[data-gruppe] > span { flex:1; } .nav-gst.st { margin:0; padding:1px 4px; border:0; border-radius:var(--r); background:none; cursor:pointer; font-size:11px; letter-spacing:0; text-transform:none; gap:4px; } .nav-gst.st:hover { background:var(--hover); } .nav-gst.st:focus-visible { outline:2px solid var(--acc); outline-offset:1px; } /* Der Streifen oben in einer Ansicht (19.10.–24.10.2026) ist entfallen: der Status des Bereichs steht seit 24.10.2026 rechts in der Kopfzeile (`#kopf-status`, Regeln am Ende des Abschnitts „Entwurf A+C"). */ /* Flex-Spalte, damit `.view.fill` den Rest der Höhe bekommen kann. `height:100%` genügt dafür NICHT: über den Ansichten steht seit dem 16.08.2026 das Projektband, und 100 % meinen die volle Höhe von `.main` — die Ansicht ragte damit genau um die Bandhöhe (52 px) nach unten heraus und die Seite bekam einen Scrollbalken. Das betraf ALLE drei fill-Ansichten (Geräteliste, Gerätestamm, Verdrahtung), aufgefallen ist es an der Verdrahtung. `flex-shrink:0` auf allen Kindern: die übrigen Ansichten sollen ihre Inhaltshöhe behalten und `.main` scrollen lassen, statt gestaucht zu werden. */ .main { overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; } .main > * { flex-shrink:0; } /* Keine Breitenbegrenzung: eine Geräteliste mit 20 Spalten soll jeden Zoll des Monitors nutzen dürfen (Rückmeldung Chris 29.07.2026). Ein Lesetext-Maximum wäre hier falsch — das sind Tabellen, keine Fließtexte. */ .view { max-width:none; margin:0; } .view h1 { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:21px; margin:0 0 3px; letter-spacing:.005em; } /* Das Info-Symbol in einer Überschrift läuft in deren Schriftgröße mit — es soll die Zeile nicht dominieren. */ .view h1 .ihint { font-size:16px; vertical-align:1px; } .view .sub { color:var(--mut); font-size:13px; font-variant-numeric:tabular-nums; margin:0 0 18px; } /* Die Überschrift steht seit 27.09.2026 in der Kopfzeile (`#kopf-ort`). In der Ansicht bleibt die

im DOM (Module schreiben hinein), wird aber nicht gezeigt; eine Titelzeile, die NUR sie trug, fällt ganz weg — das sind 50 px je Plan-Ansicht. Wo die Zeile mehr trägt (Suchfeld, Hauptaktion, Untertitel), bleibt sie ohne Überschrift stehen. */ .view h1 { display:none; } .view > .toolbar:has(> div:only-child > h1:only-child) { display:none; } /* ---------- Buttons ---------- */ /* Drei Ränge: gefüllt = Hauptaktion der Ansicht, umrandet = normal, flächenlos = Nebensache */ /* Knöpfe seit 18.10.2026 mit 8 px Radius — erst Pillen (Richtung D), auf Rückmeldung Chris am selben Abend „weniger rund, aber nicht ganz eckig". */ .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px 6px; border-radius:8px; border:1px solid var(--ctl-bdr); background:var(--card); font-family:var(--f-display); font-stretch:87.5%; font-weight:500; font-size:13.5px; } /* Ein erbt die Knopffarbe NICHT: das UA-Stylesheet setzt für Links eine eigene `color` (Standardblau), und die schlägt jede Vererbung — `.btn` selbst definiert keine. Ein als Knopf gestalteter Link sah dadurch aus wie ein roher Link mitten in der Zeile (gefunden am Bild, 21.08.2026, am „Öffnen" der Unterlagenliste). Hier zentral geradegezogen, damit der nächste Link-Knopf nicht dieselbe Runde kostet. */ a.btn { color:var(--txt); text-decoration:none; } a.btn:hover { color:var(--acc); } .btn:hover { border-color:var(--acc); color:var(--acc); background:var(--card); } .btn:hover i { color:var(--acc); } .btn.pri { background:var(--acc-f); border-color:var(--acc-f); color:var(--on-acc); font-weight:600; } .btn.pri:hover { background:var(--acc-fh); border-color:var(--acc-fh); color:var(--on-acc); } .btn.gh { border-color:transparent; background:none; color:var(--mut); } .btn.gh:hover { background:var(--hover); color:var(--txt); border-color:transparent; } .btn.on { border-color:var(--acc); color:var(--acc); background:var(--acc-l); } /* Ansichts-Reiter: die Leiste heisst `.vtabs`, der einzelne Knopf traegt `.vtab` — **ohne eigene Regel**. Sein Aussehen kommt vollstaendig aus `.btn` und `.on` (Festlegung 27.07.2026, nachdem eine erfundene `.vtab`-Regel im dunklen Thema weisse Schrift auf weissem Grund ergab). `.vtab` bleibt als Markierung im Markup, damit erkennbar ist, welche Knoepfe eine Ansicht umschalten; wer hier nach der Regel dazu sucht, findet zu Recht keine. */ .vtabs { display:inline-flex; gap:5px; margin-left:8px; } /* ---------- Ansichts-Umschalter (Audit 10.09.2026, D-30) ---------- `.vtab` war eine Klasse OHNE jede Regel: sie diente nur als Griff fuer `querySelectorAll`, und wie ein Umschalter aussieht, entschied allein, ob jemand `.btn` oder `.btn.sm` daneben geschrieben hatte. Vier Bauformen fuer dieselbe Sache. **Die Hoehe kommt weiterhin aus `.btn` bzw. `.btn.sm`** und wird hier ausdruecklich NICHT angefasst: die Werkzeugzeilen sind auf 36 px gemessen und dokumentiert (CLAUDE.md §Eine Werkzeugzeile in allen Ansichten), und eine Vereinheitlichung ueber alle Ansichten haette genau diese Messung umgeworfen. Geregelt wird, was den Umschalter ausmacht: mittig gesetzter Text, kein Umbruch, und ein aktiver Zustand, der ueberall gleich aussieht. */ .vtab { justify-content:center; white-space:nowrap; } .vtabs .vtab + .vtab { margin-left:0; } /* Werkzeugmenü an einem Knopf (`AVP.menue`, seit 23.08.2026) — dieselbe Blase wie `.colpop`, nur mit Zeilen für Schalter und Aktionen. Die Häkchenspalte hat feste Breite, damit die Beschriftungen fluchten, egal wie viele Schalter gerade an sind. */ .tbmenu { position:fixed; min-width:210px; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); padding:5px; z-index:var(--z-menu); } .tbm-i { display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; font-size:13px; font-family:var(--f-body); text-align:left; background:none; border:0; border-radius:var(--r); color:var(--txt); cursor:pointer; } .tbm-i:hover { background:var(--hover); } .tbm-i i { font-size:15px; color:var(--mut); flex:none; } .tbm-i.on i.tbm-hk { color:var(--acc); } .tbm-hk { width:15px; } .tbm-hk.aus { visibility:hidden; } /* Platz halten, damit die Labels fluchten */ .tbm-sep { height:1px; margin:5px 4px; background:var(--bdr); } .colpop-wrap { position:relative; } .colpop { position:absolute; right:0; top:calc(100% + 6px); min-width:230px; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); padding:6px; z-index:60; display:none; } .colpop.show { display:block; } .colpop-hd { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); padding:6px 8px 4px; } .colpop-row { display:flex; gap:9px; align-items:center; padding:6px 8px; font-size:13.5px; border-radius:var(--r); cursor:pointer; } .colpop-row:hover { background:var(--hover); } /* Spaltenreihenfolge (seit 16.08.2026): je Zeile zwei Pfeile, dann das Häkchen, dann der Name. Das Popover kann bei mehreren aktiven Gruppen über 20 Zeilen lang werden — deshalb scrollt es, und deshalb sind es Pfeile statt Ziehen (in einer scrollenden Liste ist ein Zug kaum zu treffen). */ .colpop { max-height:min(70vh,560px); overflow:auto; } .colpop-row.ord { cursor:default; } .ord-btns { display:flex; flex-direction:column; gap:1px; flex:none; } .ord-btns button { width:20px; height:13px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--hover-bdr); background:var(--card-2); color:var(--mut); border-radius:var(--r-xs); cursor:pointer; font-size:10px; line-height:1; } .ord-btns button:hover:not(:disabled) { border-color:var(--acc); color:var(--acc); } .ord-btns button:disabled { opacity:.3; cursor:default; } .ord-btns .ti { font-size:11px; } /* Basis-Spalten haben kein Häkchen — der Platzhalter hält die Namen trotzdem in einer Flucht. */ .ord-fix { width:13px; flex:none; } .ord-h { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .colpop-reset { display:block; width:100%; margin-top:6px; padding:6px; font-size:12px; background:none; border:1px solid var(--hover-bdr); border-radius:var(--r); color:var(--mut); cursor:pointer; } .colpop-reset:hover { border-color:var(--acc); color:var(--acc); } .tbl.v53 td.bez1 { white-space:nowrap; max-width:380px; overflow:hidden; text-overflow:ellipsis; } /* Leitsignal des Geräts (AVP.SIGNALS) — einziges farbiges Element in der Zeile */ .sigbar { display:inline-block; width:3px; height:13px; border-radius:var(--r-xs); vertical-align:-2px; margin-right:8px; } .bez-info { color:var(--mut); cursor:pointer; font-size:15px; vertical-align:-2px; } .bez-info:hover, .bez-info.on { color:var(--acc); } /* Spaltenfilter nach Excel-Art */ /* Seit 17.09.2026 unsichtbar, bis der Kopf überfahren wird oder ein Filter steht — 26 Trichter in einer Kopfzeile waren Rauschen. Ohne Hover (Tablet) dauerhaft sichtbar, s. @media unten. */ .th-flt { border:none; background:none; color:var(--mut); padding:0 0 0 5px; font-size:13px; opacity:0; vertical-align:-1px; } .tbl th:hover .th-flt { opacity:.9; } .th-flt.on { opacity:1; color:var(--acc); } .colflt-pop { position:fixed; z-index:var(--z-pop); width:280px; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); padding:8px; display:flex; flex-direction:column; gap:7px; } .cf-search { padding:5px 8px; font-size:13px; } .cf-list { max-height:270px; overflow-y:auto; display:flex; flex-direction:column; } .cf-row { display:flex; align-items:center; gap:8px; padding:4px 6px; font-size:13px; border-radius:var(--r); cursor:pointer; } .cf-row:hover { background:var(--hover); } .cf-row span:first-of-type { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cf-row.cf-all { border-bottom:1px solid var(--bdr); border-radius:0; margin-bottom:3px; padding-bottom:6px; } .cf-n { font-family:var(--f-mono); font-size:11px; color:var(--mut); } .cf-ft { display:flex; gap:7px; justify-content:space-between; border-top:1px solid var(--bdr); padding-top:7px; } .colflt { padding:4px 8px; font-size:12.5px; min-width:70px; border-radius:var(--r); } .langrow td { white-space:normal; font-size:12.5px; color:var(--mut); background:var(--bg); } .tbl tr.dim td:not(.cell-ed) { color:color-mix(in srgb, var(--txt) 45%, var(--card)); } .tbl.v53 td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tbl.v53 tr.langrow td { white-space:normal; } .tbl.v53 th, .tbl.v53 td { border-right:1px solid var(--bdr); } .tbl.v53 th:last-child, .tbl.v53 td:last-child { border-right:0; } /* Spaltenraster des Gerätestamms — dieselbe Bildsprache wie die Geräteliste: einzeilige Zellen mit Ellipsis und senkrechte Trennlinien. Erst dadurch wirken feste Spaltenbreiten überhaupt (ohne nowrap würde die Zelle umbrechen statt zu kürzen). */ .tbl.cols td, .tbl.cols th { white-space:nowrap; } .tbl.cols td { overflow:hidden; text-overflow:ellipsis; } .tbl.cols th, .tbl.cols td { border-right:1px solid var(--bdr); } .tbl.cols th:last-child, .tbl.cols td:last-child { border-right:0; } .th-rs { position:absolute; top:0; right:-5px; width:10px; height:100%; cursor:col-resize; z-index:7; } .th-rs::after { content:''; position:absolute; left:4px; top:0; width:2px; height:100%; background:transparent; } .th-rs:hover::after, .th-rs.on::after { background:var(--acc); } .th-rs:hover, .th-rs.on { background:color-mix(in srgb, var(--acc) 12%, transparent); } body.col-resizing { cursor:col-resize; user-select:none; } /* Spalte mit Umschalt/Strg + Ziehen verschieben (seit 13.09.2026, s. initColResize): die Quelle wird gedämpft, das Ziel trägt die Akzentkante auf der Seite, auf der die Spalte landet. Inset-Schatten statt Rahmen, damit die Kopfzelle nicht um 3 px wächst. */ body.col-drag { cursor:grabbing; user-select:none; } .tbl th.col-quelle { opacity:.45; } /* Die beiden Vorschau-Bänder über die volle Tabellenhöhe (Kinder des scrollenden Rahmens): grau über der Quelle, Akzent an der Einfügestelle — so breit wie die gezogene Spalte, mit der kräftigen Kante auf der Seite, an der sie landet. `z-index` über der sticky Kopfzeile (5), damit das Band auch dort sichtbar ist, wo es am meisten sagt. */ .col-vorschau { position:absolute; top:0; pointer-events:none; z-index:6; border-radius:2px; } .col-vorschau.quelle { background:color-mix(in srgb, var(--mut) 18%, transparent); } .col-vorschau.ziel { background:color-mix(in srgb, var(--acc) 22%, transparent); } .col-vorschau.ziel.davor { border-left:3px solid var(--acc); } .col-vorschau.ziel.danach { border-right:3px solid var(--acc); } /* Gespeicherte Ansichten als Knöpfe neben den Spaltengruppen (seit 13.09.2026): lange Namen werden gekürzt statt die Zeile aufzuziehen. */ .vtabs .btn.vt-ans { max-width:170px; } .vtabs .btn.vt-ans span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Geräteliste: EIN Ansichtsknopf mit Klappmenü (seit 18.10.2026); der Text nennt, was zu sehen ist. */ .vtabs .btn.vt-sicht { max-width:260px; } .vtabs .btn.vt-sicht .vt-tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Zählzeile der Geräteliste in zwei Teilen (seit 13.09.2026): der Kern „143 von 143 Positionen" hat eine feste Mindestbreite, damit die Ansichts-Umschalter dahinter NICHT wandern, wenn die Zahl ihre Stellen wechselt (Vorgabe Chris: „darf nicht hin & herspringen"). Alles Veränderliche — „ohne Stammdaten", Filtergründe, Rücksetzer — steht HINTER den Umschaltern. */ .cat-kopf .cz-kern { flex:none; min-width:190px; } /* Geräteliste in EINER Zeile (seit 27.09.2026): Suchfeld, Bestand und Import stehen rechts in der Zählzeile. Kein Umbruch — das Suchfeld gibt zuerst nach, darunter greifen die Stufen 1500/1300 (Beschriftungen weg), dieselben wie bisher. */ /* ---------- Suche mittig: `.tb-mitte` (seit 27.09.2026) ---------- Vorgabe Chris: „Suche nach Möglichkeit immer mittig". Linke und rechte Gruppe wachsen von 0 aus zu gleichen Teilen (`flex:1 1 0`), das Suchfeld steht dazwischen. Braucht eine Gruppe mehr als die Hälfte, bekommt sie es (min-width:auto) — dann rückt die Suche zur Seite, statt dass etwas überdeckt wird. Die Filter-Chips (#ger-zahl-mehr, #cat-zahl) halten per JS eine Mindestbreite bis 360 px (`chipsMin` in ui.js), danach werden sie beschnitten. */ .toolbar.tb-mitte, .cat-kopf.tb-mitte { flex-wrap:nowrap; } .tb-mitte > .tb-l, .tb-mitte > .tb-r { flex:1 1 0; display:flex; align-items:center; gap:inherit; } .tb-mitte > .tb-r { justify-content:flex-end; } .tb-mitte > .tb-l > *, .tb-mitte > .tb-r > * { flex:none; } /* `contain:inline-size` (05.10.2026): der Inhalt des Behälters darf die Mindestbreite der linken Gruppe nicht mehr bestimmen — s. AVP.chipsMin in ui.js, das Mindestbreite und Flex-Basis setzt. */ .tb-mitte > .tb-l > #ger-zahl-mehr, .tb-mitte > .tb-l > #cat-zahl { flex:0 1 auto; overflow:hidden; white-space:nowrap; flex-wrap:nowrap; } .tb-mitte > .tb-l > #ger-zahl-mehr { contain:inline-size; } /* Die linke Gruppe wird nie schmaler als ihr Inhalt (18.10.2026, Rückmeldung Chris mit Bild): mit `min-width:auto` gab der Browser ihr bei vier Spaltengruppen 32 px zu wenig, und die Zählzeile lag unter dem Suchfeld. Den Inhalt begrenzt `AVP.chipsMin` auf das, was frei ist; nachgeben muss die Suche. */ .tb-mitte > .tb-l { min-width:max-content; } /* Unter 1250 px passen Knöpfe, Zählzeile, Suche und rechte Gruppe nicht mehr in eine Zeile (gemessen bei 1024 px: 156 px zu breit). Dann rutscht die Suche in eine eigene Zeile darunter, statt dass etwas überdeckt wird oder der Arbeitsbereich waagerecht scrollt. */ @media (max-width:1250px) { .cat-kopf.tb-mitte:has(> .tb-l > #ger-zahl-mehr) { flex-wrap:wrap; } .cat-kopf.tb-mitte > #flt-search { order:3; flex:1 1 100%; } } .tb-mitte > .search, .cat-kopf .ger-such { flex:0 6 300px; min-width:110px; height:34px; } /* Messmodus des Doppelklicks auf die Spaltentrennlinie (`inhaltsBreite` in ui.js): die Spalte wird für einen Augenblick weit aufgezogen, damit die Ellipsis nicht greift und der GANZE Inhalt gemessen wird. Die Deckel einzelner Zellen müssen dabei fallen — `td.bez1` steht auf `max-width:380px`, `td.wrap` auf 260…420 px; darin gemessen käme immer derselbe Deckelwert heraus, egal wie lang die Bezeichnung ist. Die Klasse liegt nur für die Dauer der Messung an. */ .tbl.mess-auto td, .tbl.mess-auto th { max-width:none; min-width:0; } .colflt { width:100%; } .grp-edit { cursor:pointer; color:var(--mut); font-size:14px; margin-left:6px; } .grp-edit:hover { color:var(--acc); } .btn.sm { padding:5px 9px 3px; font-size:12.5px; border-radius:7px; } .btn.icon { padding:7px; } .btn.danger { color:var(--warn); } .btn.danger:hover { border-color:var(--warn); color:var(--warn); } /* ---------- Formulare ---------- */ .field { display:flex; flex-direction:column; gap:4px; } .field label { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; color:var(--mut); font-weight:600; text-transform:none; letter-spacing:0; } .inp { padding:7px 10px; border:1px solid var(--inp-bdr); border-radius:var(--r); background:var(--card); width:100%; font-size:14px; } .inp:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); } .frm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; } /* AVP.formular: zwei feste Spalten, ein breites Feld über beide (26.09.2026). */ /* `#hk-modal` ist zugleich `.cat-modal` (12er-Raster) — die ID hebt das Formular darüber. */ #hk-modal .frm-grid.frm-2, .frm-grid.frm-2 { grid-template-columns:1fr 1fr; min-width:min(520px, 80vw); } .frm-grid.frm-2 .field.breit { grid-column:1 / -1; } /* Custom-Dropdown (csel) */ .csel { position:relative; } .csel-btn { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:1px solid var(--inp-bdr); border-radius:var(--r); background:var(--card); text-align:left; font-size:14px; } .csel-btn:hover { border-color:var(--acc); } .csel-btn::after { content:'\ea5f'; font-family:'tabler-icons'; margin-left:auto; color:var(--mut); } /* `max-width`: eine Liste langer Projektnamen darf nie breiter werden als das Fenster — sonst wird die Seite waagerecht scrollbar und der Fokus in der Liste schiebt die ganze App zur Seite (Rückmeldung Chris 10.09.2026, Projekt-Switcher). Die Seite dazu regelt `cselAuf` in ui.js. */ .csel-pop { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; max-width:min(560px, calc(100vw - 16px)); max-height:280px; overflow-y:auto; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); z-index:60; display:none; } .csel.open .csel-pop { display:block; } .csel-opt { display:flex; align-items:center; gap:8px; width:100%; padding:7px 12px; border:none; background:none; text-align:left; font-size:14px; white-space:nowrap; } .csel-opt:hover { background:var(--hover); } .csel-opt.sel { background:var(--acc-l); color:var(--acc-t); font-weight:600; } /* Beim Blättern mit den Pfeiltasten muss zu sehen sein, WO man steht. `:focus` und nicht `:focus-visible`: der Fokus wird hier per Skript gesetzt (beim Aufklappen und bei jedem Tastendruck), und dafür schaltet der Browser die Sichtbarkeitsheuristik nicht zwingend an. Die Kante liegt innen, damit die Liste nicht um einen Ring breiter wird. */ .csel-opt:focus { outline:none; background:var(--hover); box-shadow:inset 2px 0 0 var(--acc); } .csel-opt.sel:focus { background:var(--acc-l); } /* ---------- Karten / Tabellen ---------- */ .card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-k); box-shadow:var(--sh); } /* `min-height:36px` = die Höhe eines Knopfs: eine Titelzeile MIT Knöpfen (Geräteliste) und eine ohne (Verdrahtung, Rack, Grundriss) sind damit gleich hoch, und die Werkzeugzeile darunter beginnt in jeder Ansicht auf derselben Höhe (Vorgabe Chris 16.09.2026: „die Zeile letztendlich auch auf gleicher Höhe"). Gemessen vorher: 39 zu 33 px, die Hauptaktion stand 6 px tiefer. */ .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; min-height:36px; } .toolbar .sp { flex:1; } /* `.tb-2` (zweite Werkzeugzeile, 02.08.2026) hat seit dem 23.08.2026 keinen Nutzer mehr — die Verdrahtung war der einzige, und sie kommt jetzt mit EINER Zeile aus (s. `.tb-werk`). Die Regel bleibt als Mechanik stehen: eine Ansicht, die doch zwei Leisten braucht, soll sie nicht neu erfinden. */ .toolbar.tb-2 { gap:6px; margin-top:-6px; } .tb-sep { width:1px; align-self:stretch; background:var(--bdr); margin:0 6px; } .toolbar .search { min-width:220px; } /* Einzeilige Werkzeugleiste der Verdrahtung (seit 23.08.2026): enger gesetzt als die Standardleiste, damit alles in EINE Zeile passt — bricht sie um, ist der gewonnene Platz wieder weg. Der Chevron sitzt am Klappmenü-Knopf und ist kleiner als dessen Symbol: er ist ein Hinweis auf das Menü, keine zweite Aussage. */ /* Umbruch bleibt erlaubt: bei sehr schmalem Fenster ist eine zweite Zeile besser als eine Leiste, deren rechtes Ende abgeschnitten ist (die Falle aus der Rackplanung). Bis dahin sorgt die Media Query unten dafür, dass es gar nicht erst so weit kommt. */ .toolbar.tb-werk { gap:5px; } .toolbar.tb-werk .btn { padding:8px 10px 6px; flex:none; } .toolbar.tb-werk .btn.icon { padding:7px; } /* Trenner enger als in der Standardleiste: bei vier Gruppen kosten sie sonst 48 px, und die fehlen der einen Zeile. */ .toolbar.tb-werk .tb-sep { margin:0 4px; } .tb-chev { font-size:13px !important; opacity:.6; margin-left:-2px; } /* Wird es eng, verlieren die NEBENsachen ihre Beschriftung und nicht die Zeile. Ein Umbruch würde genau die Höhe zurückholen, die der Umbau eingespart hat; Symbol und Tooltip tragen die Aussage weiter. **Die Hauptaktion behält ihren Text** (`.btn.pri` ist ausgenommen): ein einzelnes „+" sagt nicht, dass dort ein Gerät in den Plan kommt — und es ist die eine Aktion, die man in dieser Ansicht ständig braucht. Der Plan-Umschalter bleibt aus demselben Grund beschriftet: er nennt den Namen des Plans, und den kann kein Symbol ersetzen. */ @media (max-width: 1500px) { .toolbar.tb-werk .btn:not(.pri) .tb-tx, .tb-akt .btn:not(.pri) .tb-tx, .cat-kopf .btn:not(.pri) .tb-tx { display:none; } } /* Zweite Stufe: unter 1300 px verliert auch die Hauptaktion ihren Text. Ihr Symbol ist dort das kleinere Übel — eine umgebrochene Leiste kostet die Höhe, um die es bei diesem Umbau überhaupt geht. Gemessen im Grundriss (der die meisten Werkzeuge trägt): mit Beschriftung braucht die Zeile 1250 px, ohne Nebenlabels 1079, ohne alle 979. */ @media (max-width: 1300px) { .toolbar.tb-werk .btn .tb-tx, .tb-akt .btn .tb-tx, .cat-kopf .btn .tb-tx { display:none; } .toolbar.tb-werk { gap:3px; } .toolbar.tb-werk .tb-sep { margin:0 3px; } } /* „+ Gerät" steht seit 13.09.2026 als Hauptaktion VORN in der Zählzeile der Geräteliste — unter der Überschrift, wie „Gerät einfügen" in der Verdrahtung, und in derselben Optik. */ .cat-kopf .btn.pri { padding:8px 10px 6px; flex:none; } .cat-kopf .tb-sep { margin:0 2px; } /* Die Aktionen der Geräteliste stehen seit 13.09.2026 rechts in der Titelzeile (`.tb-akt`), nicht mehr in einer eigenen Werkzeugzeile — dieselben Knöpfe, dieselbe Optik, und die beiden Stufen oben gelten für sie mit. */ .tb-akt.tb-werk .btn { padding:8px 10px 6px; flex:none; } .tb-akt.tb-werk { gap:5px; } .tbl-wrap { overflow-x:auto; border-radius:var(--r); } /* Listenansichten füllen die Höhe, die Tabelle scrollt INNERHALB der Karte. Sonst steht der waagerechte Scrollbalken unter der letzten Zeile — bei 336 Einträgen muss man erst ans Listenende scrollen, um die Tabelle seitlich verschieben zu können (Rückmeldung Chris). Kopfzeile bleibt dabei sticky, weil der Scrollport jetzt die Karte selbst ist. */ .view.fill { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .view.fill[hidden] { display:none; } /* display:flex hebelt hidden aus (s. Kritische Regeln) */ .tbl-wrap.grow { flex:1; min-height:220px; overflow:auto; } /* Bühne um die Tabelle (Geräteliste, seit 13.09.2026): trägt den Bezug für den Streifen mit Rückmeldungen (`.stage-msgs`, unten links) — die Karte selbst scrollt, ein absolut gesetztes Kind darin wanderte beim Blättern mit (dieselbe Überlegung wie `.rk-cols`). */ .tbl-buehne { position:relative; display:flex; flex-direction:column; min-height:0; } .tbl-buehne.grow { flex:1; } /* Über dem waagerechten Rollbalken der Karte, nicht darauf (am Bild gemessen, 13.09.2026). */ .tbl-buehne > .stage-msgs { bottom:22px; } table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; } /* **Geräteliste und Gerätestamm: getrennte Zellrahmen** (seit 27.09.2026, Rückmeldung Chris: „wenn ich scrolle, verschwinden Linien in den Überschriften"). Bei `border-collapse:collapse` gehören die Linien dem Tabellenraster, nicht der Zelle — eine klebende Kopfzelle (sticky) wandert, ihre Linien bleiben an der alten Stelle und scrollen weg; dasselbe bei den fixierten Spalten und den klebenden Gruppenzeilen. Mit `separate` + Abstand 0 trägt jede Zelle ihre Linien selbst. Jede Zelle zeichnet nur rechts und unten, also bleibt es bei einer Linie; an einer Gruppengrenze (`grp-l`, links) stehen zwei — gewollt eine Stufe kräftiger. */ table.tbl.v53, table.tbl.cols { border-collapse:separate; border-spacing:0; } .tbl th { text-align:left; padding:8px 10px; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); border-bottom:1px solid var(--hover-bdr); white-space:nowrap; position:sticky; top:0; background:var(--card); z-index:5; } .tbl td { padding:7px 10px; border-bottom:1px solid var(--bdr); vertical-align:middle; } .tbl tbody tr { cursor:pointer; } .tbl tbody tr:hover { background:var(--hover); } /* Kennzeichen und Zahlen in Festbreite mit Tabellenziffern — Stellen stehen untereinander */ .tbl .num { text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12.5px; } .tbl .mut { color:var(--mut); font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12.5px; } .tbl .mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12.5px; } /* V5.3-Tabelle (Geräteliste): viele schmale Spalten, Bezeichnung/Bemerkung umbrechend */ .tbl.v53 td, .tbl.v53 th { white-space:nowrap; } .tbl.v53 td.wrap { white-space:normal; min-width:260px; max-width:420px; } /* Gruppenzeilen: Gewerk kräftig, Anlage eine Stufe leiser — beide neutral, kein Akzent */ .tbl.v53 tr.grp td { background:var(--card-2); font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; cursor:default; border-top:1px solid var(--hover-bdr); } .tbl.v53 tr.grp.sub td { font-size:12.5px; text-transform:none; letter-spacing:0; color:var(--txt); background:var(--card-2); border-top:0; } .tbl.v53 tr.grp:hover td, .tbl.v53 tr.grp.sub:hover td { background:var(--card-2); } /* Die LV-Nummer der Gruppenzeile steht seit 16.08.2026 in DERSELBEN Zelle wie ihr Text (die Spaltenreihenfolge ist frei einstellbar, feste Spaltenpositionen tragen nicht mehr). Mono + fester Mindestabstand hält die Nummern trotzdem in einer Flucht. */ .tbl.v53 tr.grp .grp-nr { font-family:var(--f-mono); font-stretch:normal; letter-spacing:0; font-variant-numeric:tabular-nums; display:inline-block; min-width:72px; opacity:.8; } /* ---------- Geräteliste: Bild und Bedienung nach dem Entwurf vom 17.09.2026 ---------- Acht Punkte, von Chris am Entwurfsboard freigegeben („Setze deinen Entwurf um"): Fenster fixieren, Spaltengruppen als Band, Gruppen zuklappen, Sortieren und Filter-Chips, kompakte Zeilen mit ruhiger Aktionsspalte, aktive Zelle mit Zeile und Spalte, Farbe nur für die Ausnahme, Kategoriesymbol. Dazu die Einzelheiten-Zeile und die Statusleiste. Alles hängt an `.tbl.v53` (Geräteliste); der Gerätestamm (`.tbl.cols`) ist unberührt, bis Chris ihn nachziehen will — bis auf den Trichter, der in beiden Listen nur noch beim Überfahren erscheint. */ /* Zeilen: 34 px statt 44. Die Zeilenhöhe kam von den drei Knöpfen der Aktionsspalte (29 px + 2 × 7 px Innenabstand); die Knöpfe sind jetzt 25 px und die Zelle hat 4 px Luft. „Kompakt" (Schalter in der Zählzeile) nimmt 2 px und eine Schriftstufe kleiner: 20 statt 14 Zeilen auf 600 px. */ /* **Zeilenhöhe als Einstellung, Zoom über `zoom`** (Nachbesserung Chris am selben Tag: statt zweier Dichte-Stellungen ein Regler 22–60 px und ein Zoom 60–160 %). `--tz` setzt devices.js an der Tabelle; die Zelle hat keinen senkrechten Innenabstand mehr, die Höhe ist die Zeile. */ .tbl.v53 { --tz:33px; } .tbl.v53 tbody td { height:var(--tz); padding-top:0; padding-bottom:0; } .tbl.v53 tr.detail td { height:auto; } .tbl.v53 .akt-b .btn.sm.icon { padding:4px; } .tbl.v53.eng .akt-b .btn.sm.icon { padding:1px; } .tbl.v53.eng tbody td { font-size:12.5px; } .tbl.v53.eng .sigbar { height:11px; } /* Vorn nur noch der Pfeil mit Klappmenü und der Stamm-Punkt (Chris 17.09.2026: „Bearbeiten und Löschen im Dropdown unter dem Pfeil, den gewonnenen Platz nach links rücken"). Der Pfeil ist ein flächenloser Knopf, gedämpft, bis die Zeile überfahren wird oder das Menü offen ist. */ .tbl.v53 .akt-b .btn.zl-menu { border-color:transparent; background:none; color:var(--mut); opacity:.55; } .tbl.v53 tbody tr:hover .akt-b .btn.zl-menu, .tbl.v53 .akt-b .btn.zl-menu.on, .tbl.v53 tr.zeile-aktiv .akt-b .btn.zl-menu { opacity:1; } .tbl.v53 .akt-b .btn.zl-menu:hover, .tbl.v53 .akt-b .btn.zl-menu.on { color:var(--acc); border-color:var(--hover-bdr); } /* Zeilennummer wie in Excel: schmal, gedämpft, Klick wählt die Zeile; in der aktiven Zeile im Akzent. Auch sie ist fixiert (Vorspann 2 in fixiereSpalten). */ .tbl.v53 th.nr, .tbl.v53 td.nr { width:36px; padding:0 4px; text-align:center; color:var(--mut); font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:11px; cursor:context-menu; user-select:none; } .tbl.v53 th.nr { cursor:default; } .tbl.v53 tbody td.nr:hover { color:var(--acc); background:var(--hover); } .tbl.v53 tbody tr.zeile-aktiv > td.nr { color:var(--acc-t); font-weight:600; } /* Farbe nur für die Ausnahme: „aktiv" trägt keine Fläche mehr — s. die Statusregeln weiter unten (`td.zst-aktiv`), dort geändert, weil sie nach dieser Stelle stehen und gewinnen. */ /* Trennlinien nur ZWISCHEN den Spaltengruppen (`grp-l` an der ersten Zelle einer Gruppe), nicht mehr zwischen allen Zellen. Die waagerechten Haarlinien bleiben. */ /* Senkrechte Linien zwischen allen Spalten (Nachbesserung Chris 17.09.2026: „Füge vertikale Linien bei den Spalten ein") — leise; die Gruppengrenzen (`grp-l`) bleiben eine Stufe kräftiger. */ .tbl.v53 th, .tbl.v53 td { border-right:1px solid var(--bdr); } .tbl.v53 th.grp-l, .tbl.v53 td.grp-l { border-left:1px solid var(--hover-bdr); } /* Das Band der Spaltengruppen: 22 px hoch, gedämpft, klebt bei 0; die Spaltenköpfe darunter kleben bei 22. Beide Höhen sind FEST, weil die Gruppenzeilen darunter bei 54 px kleben (s. u.) — gemessen wird hier nichts. */ /* EINE Fläche über die ganze Bandzeile (Rückmeldung Chris 17.09.2026: „das verschiedene Grau in der obersten Zeile stört mich") — dieselbe wie die Köpfe darunter; die Gruppen trennt allein die Linie an `grp-l`. */ /* Beschriftung linksbündig über der ersten Spalte der Gruppe (Vorgabe Chris 27.09.2026). */ .tbl.v53 thead tr.band th { text-align:left; height:22px; padding:0 10px; font-size:10px; letter-spacing:.14em; color:var(--mut); background:var(--card); border-bottom:1px solid var(--bdr); top:0; } /* Die Beschriftung klebt hinter der fixierten Zone (`left` aus JS), damit sie beim Blättern über ihren Spalten stehen bleibt, solange die Gruppe im Bild ist. */ .tbl.v53 thead tr.band th.band > span { position:sticky; display:inline-block; } .tbl.v53 thead tr.spalten th { top:22px; height:32px; padding-top:0; padding-bottom:0; vertical-align:middle; } /* Kopf über allem, fixierter Kopf über dem Kopf; das Vorschau-Band beim Spaltenziehen (6) muss weiterhin darüber liegen, deshalb rückt es auf 8. */ .tbl.v53 thead th { z-index:6; } .tbl.v53 thead th.fx { z-index:7; } .col-vorschau { z-index:8; } /* Sortieren per Klick auf den Kopf: Pfeil in Akzent, der Kopf zeigt beim Überfahren, dass er ein Knopf ist. Der Trichter erscheint nur noch beim Überfahren oder wenn er gesetzt ist — 26 Trichter in einer Kopfzeile waren Rauschen (Regel `.th-flt` oben: opacity 0). */ .tbl.v53 thead tr.spalten th[data-sort] { cursor:pointer; } .tbl.v53 thead tr.spalten th[data-sort]:hover { color:var(--txt); } .th-sort { font-size:12px; color:var(--acc-t); margin-left:4px; vertical-align:-1px; } /* Aktive Zeile und aktive Spalte (Statusleiste setzt die Klassen): Akzentkante links, Kopf getönt. Die aktive Zelle selbst trägt ihren Rahmen aus der Zellauswahl. */ .tbl.v53 tbody tr.zeile-aktiv > td:first-child { box-shadow:inset 3px 0 0 var(--acc); } .tbl.v53 thead tr.spalten th.sp-aktiv { color:var(--acc-t); background:color-mix(in srgb, var(--acc) 12%, var(--card)); } /* Gruppenzeilen: Pfeil zum Zuklappen, Zahl dahinter, und sie kleben unter dem Kopf (54 px = Band 22 + Köpfe 32), damit man beim Blättern sieht, in welcher Gruppe man ist. Eine Unter- und eine Hauptgruppe kleben an derselben Stelle — die spätere deckt die frühere, das ist die „aktuelle Gruppe". */ .tbl.v53 tr.grp td { position:sticky; top:54px; z-index:4; cursor:pointer; } .tbl.v53 tr.grp td.fx { z-index:5; } .tbl.v53 tr.grp .grp-n { font-family:var(--f-body); font-weight:500; text-transform:none; letter-spacing:0; color:var(--mut); font-size:12px; margin-left:12px; } .tbl.v53 tr.grp.zu td { color:var(--mut); } /* Aktion IN der Gruppenzeile („n Geräte gehören ins LV — Positionen vergeben", 26.09.2026): klein und in Zeilenschrift, damit die Zeile ihre Höhe behält. */ .tbl.v53 tr.grp .grp-akt { margin-left:10px; height:22px; padding:0 8px; font-size:11.5px; font-family:var(--f-body); text-transform:none; letter-spacing:0; vertical-align:1px; } /* ---------- Fenster fixieren ---------- `fx` = fixierte Zelle (sticky, `left` aus JS), `fx-end` = die letzte je Zeile mit Kante und, sobald gescrollt ist, Schatten. **Die Fläche muss DECKEND sein**, sonst scheinen die gescrollten Spalten durch: Grundfläche, Hover, Gruppe je in `:where()`, damit die Bedeutungsfarben von Status, Herkunft und Auswahl (spezifischere Regeln) gewinnen. */ /* `!important`, weil vier Zellregeln `position:relative` setzen (Auswahlspalte `.editable.wahl`, `.sel`, `.sel-eck`, `.cell-ed`) und jede davon die Fixierung aufhöbe — die Statusspalte scrollte am Bild weg, während ihre Nachbarn standen (gefunden 17.09.2026). Sticky muss hier über jeder Zellregel gewinnen, und das ist genau der Fall für die Ausnahme. */ .tbl.fixiert td.fx, .tbl.fixiert th.fx { position:sticky !important; z-index:3; } /* Eine offene Zelle in einer fixierten Spalte liegt über den fixierten Zellen darunter (auch den Gruppenzeilen, 5) — sonst verdeckte die nächste Zeile die aufgeklappte Liste (gefunden 18.10.2026 am Status; `.tbl td.cell-ed` setzt zwar 5, verliert aber gegen diese Regel). */ .tbl.fixiert td.fx.cell-ed { z-index:6; } :where(.tbl.fixiert) td.fx { background-color:var(--card); } :where(.tbl.fixiert tbody tr:hover) td.fx { background-color:var(--hover); } :where(.tbl.fixiert tr.grp) td.fx { background-color:var(--card-2); } .tbl.fixiert .fx-end { border-right:1px solid var(--hover-bdr) !important; } .tbl-wrap.gescrollt .tbl.fixiert .fx-end { box-shadow:4px 0 6px -4px rgba(0,0,0,.3); clip-path:inset(0 -12px 0 0); } /* Kategoriesymbol vor der Bezeichnung, neben dem Signalbalken; der Pfeil dahinter klappt die Einzelheiten-Zeile auf und ist gedämpft, bis die Zeile überfahren wird. */ .kat-ik { font-size:13px; color:var(--mut); margin-right:7px; vertical-align:-1px; } /* ---------- Einzelheiten-Zeile ---------- Der Inhalt klebt links im scrollenden Kasten (die Zelle spannt über alle Spalten und darf dafür nicht clippen); Breite kommt inline aus JS. */ .tbl.v53 tr.detail td { padding:0; white-space:normal; overflow:visible; background:var(--bg); border-bottom:1px solid var(--hover-bdr); cursor:default; } .dt { position:sticky; left:0; box-sizing:border-box; display:grid; grid-template-columns:auto minmax(200px, 1fr) minmax(240px, 1fr); gap:8px 24px; padding:10px 14px 12px 14px; font-size:12.5px; box-shadow:inset 3px 0 0 var(--acc); } .dt-bild img { max-width:220px; max-height:110px; display:block; border:1px solid var(--bdr); border-radius:var(--r-xs); background:#fff; cursor:zoom-in; } .dt-bild img:hover { border-color:var(--acc); } .dt-cap { font-size:11px; color:var(--mut); margin-top:4px; } .dt-lnk { border:0; background:none; padding:0; font:inherit; color:var(--acc-t); text-decoration:underline; cursor:pointer; } .dt-h { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:10.5px; text-transform:none; letter-spacing:.09em; color:var(--mut); margin-bottom:4px; } /* Zwei Spalten ab der achten Buchse — ein Core mit 50 Anschlüssen machte die Zeile 420 px hoch. */ .dt-ports { columns:2; column-gap:20px; } .dt-port { display:flex; align-items:center; gap:7px; line-height:20px; white-space:nowrap; break-inside:avoid; } .dt-dot { width:8px; height:8px; border-radius:50%; flex:none; } .dt-dir { width:18px; color:var(--mut); font-size:11px; flex:none; } .dt-stk { margin-left:auto; padding-left:10px; color:var(--mut); font-size:11.5px; } .dt-kv { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:3px 12px; margin:0; } .dt-kv dt { color:var(--mut); margin:0; } .dt-kv dd { margin:0; overflow:hidden; text-overflow:ellipsis; } /* Die Knöpfe der aufgeklappten Zeile stehen senkrecht links in der Aktionsspalte. */ .tbl.v53 tr.detail td.akt { vertical-align:top; } .dt-links { display:flex; flex-direction:column; gap:4px; align-items:center; padding:8px 0; } /* Blende nur ansehen (aus der Geräteliste): alle Werkzeuge weg, die Bühne und die Liste bleiben. */ #ov-panel.nur-lesen #pn-foto, #ov-panel.nur-lesen #pn-crop-btn, #ov-panel.nur-lesen #pn-aufb, #ov-panel.nur-lesen #pn-auto, #ov-panel.nur-lesen #pn-ports, #ov-panel.nur-lesen #pn-snap, #ov-panel.nur-lesen #pn-frei, #ov-panel.nur-lesen .pn-breite, #ov-panel.nur-lesen #pn-add, #ov-panel.nur-lesen #pn-edit, #ov-panel.nur-lesen #pn-bl-neu, #ov-panel.nur-lesen #pn-auto-tab { display:none !important; } .dt-lang { grid-column:1 / -1; color:var(--mut); white-space:pre-wrap; line-height:1.4; } /* ---------- Statusleiste ---------- Dauerhaft unter der Tabelle (bis 17.09.2026 nur bei Auswahl): neutral, solange nichts gewählt ist, im Akzent mit Auswahl. */ #ger-ausw.ausw-bar { border-color:var(--bdr); background:var(--card-2); margin-top:6px; min-height:30px; padding:3px 10px; font-size:12px; } #ger-ausw.ausw-bar.hat-ausw { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 8%, var(--card)); } .ausw-bar .aw-zelle b { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12px; text-transform:none; letter-spacing:0; } .ausw-bar .aw-sum { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; } .ausw-bar .aw-ok { color:var(--ok); display:inline-flex; align-items:center; gap:3px; } /* ---------- Filter und Sortierung als Chips in der Zählzeile ---------- Der veränderliche Teil der Zählzeile darf die Zeile nicht umbrechen (Vorgabe Chris 13.09.2026: zwei Zeilen, feste Stellen): er bleibt einzeilig und wird bei Platznot rechts beschnitten — jeder Chip trägt seinen vollen Text im Tooltip. */ .cat-kopf #ger-zahl-mehr { flex:0 1 auto; min-width:0; max-width:44%; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; } .cat-kopf #ger-zahl-mehr > * { flex:none; } .fchip { display:inline-flex; align-items:center; gap:2px; height:22px; padding:0 2px 0 8px; margin:0 2px; border:1px solid var(--acc); border-radius:var(--r); background:color-mix(in srgb, var(--acc) 8%, var(--card)); color:var(--acc-t); font-family:var(--f-display); font-stretch:87.5%; font-size:11.5px; font-weight:600; vertical-align:middle; } .fchip button { border:0; background:none; color:inherit; font:inherit; font-size:15px; line-height:1; padding:0 5px; cursor:pointer; } .fchip button:hover { color:var(--acc); } .fchip.sort { border-style:dashed; } /* Popover Zeilenhöhe und Zoom */ .zoom-pop, .ger-ansicht-pop { min-width:290px; } /* Das Popover „Ansicht" trägt seit 27.09.2026 auch Zoom und das Speichern — etwas mehr Höhe. */ .ger-ansicht-pop { max-height:min(82vh, 760px); } /* Nur noch wenige Menüknöpfe (Geräteliste: Bestand · Ansicht · Ausgabe, Gerätestamm: Import · Eintrag · Ansicht · Ausgabe): sie behalten ihre Beschriftung bis 1300 px, statt sie wie die übrigen Zählzeilen schon unter 1500 abzugeben. */ @media (min-width:1300px) { #view-geraete .cat-kopf .btn .tb-tx, #view-katalog .cat-kopf .btn .tb-tx { display:inline; } } .zp-row { display:flex; align-items:center; gap:8px; padding:4px 8px 8px; } .zp-row input[type="range"] { flex:1; min-width:0; accent-color:var(--acc); } .zp-val { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--mut); min-width:44px; text-align:right; } .zp-btn { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--hover-bdr); background:var(--card-2); color:var(--mut); border-radius:var(--r); cursor:pointer; flex:none; } .zp-btn:hover { border-color:var(--acc); color:var(--acc); } /* Spalten-Popover: Fenster fixieren */ .colpop-fix { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; } .fix-btns { flex-direction:row; gap:3px; } .fix-btns button { width:22px; height:20px; } .chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:11px; padding:1px 6px; border-radius:var(--r); border:1px solid var(--bdr); background:none; white-space:nowrap; } .chip .dot { width:8px; height:8px; border-radius:50%; } .kat-badge { font-family:var(--f-mono); font-size:11px; padding:1px 6px; border-radius:var(--r); border:1px solid var(--bdr); color:var(--mut); white-space:nowrap; } /* Anschlüsse als Signalgruppen (Gerätestamm): bei 50 Ports ist eine Kette einzelner Chips unlesbar — die Aussage ist die Zusammensetzung. Zahl vorn = Anschlüsse gesamt, dahinter je Signalart Punkt + Anzahl in der Farbe aus AVP.SIGNALS. */ .pgrp { display:inline-flex; align-items:center; gap:9px; } .pgrp .pg-n { font-family:var(--f-mono); font-size:11px; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:0 5px; } .pgrp .pg { display:inline-flex; align-items:center; gap:4px; font-size:12px; } .pgrp .pg i { width:8px; height:8px; border-radius:50%; background:var(--pc); flex:none; } .pgrp .pg b { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:11.5px; } .pgrp .pg span { color:var(--mut); font-size:11.5px; } /* `.tv-badge` („Teil von CORE 24f") ist am 20.09.2026 entfallen — der Gerätestamm zeigt keine Abrechnungsanteile mehr, also gibt es nichts mehr so auszuzeichnen (s. katalog.js). */ /* Abgekündigt — durchgezogen und in Warnfarbe: eine Aussage über die Beschaffbarkeit, keine Einordnung des Eintrags. Steht seit dem 20.09.2026 HINTER dem Typ (s. katalog.js). */ .lc-badge { font-family:var(--f-mono); font-size:10.5px; padding:0 5px; border-radius:var(--r); border:1px solid var(--warn); color:var(--warn); white-space:nowrap; cursor:help; } /* Indikatorspalten (Stand, Blende): schmal, nur Symbol — sie sind Zustandsanzeigen, keine Daten, und dürfen keine Spaltenbreite kosten. Erklärung steckt im Tooltip. Kopf und Zelle müssen in 38 px passen: kompakte Innenabstände, Filtersymbol ohne zusätzlichen Einzug, nichts darf in die Nachbarspalte laufen. */ .tbl th.ind, .tbl td.ind { text-align:center; padding-left:2px; padding-right:2px; overflow:hidden; } .tbl th.ind { font-size:14px; letter-spacing:0; } /* In 38 px passen Symbol UND Filterknopf nicht nebeneinander — der Filter erscheint deshalb erst beim Überfahren, als Overlay über dem Symbol (th ist sticky, also Bezugsrahmen). */ .tbl th.ind .th-flt { display:none; } .tbl th.ind:hover .th-flt { display:inline-flex; position:absolute; inset:0; margin:auto; align-items:center; justify-content:center; padding:0; background:var(--card); opacity:1; } .tbl th.ind .th-flt.on { display:inline-flex; position:absolute; inset:0; margin:auto; align-items:center; justify-content:center; padding:0; background:var(--card); } .tbl td.ind .ind { max-width:100%; } /* Nur auf span/i einschränken: `th`/`td` tragen die Klasse ebenfalls, und ein `display: inline-flex` auf einer Tabellenzelle wirft sie aus der Tabellenstruktur — der Browser erzeugt anonyme Zellen und ALLE Spalten verrutschen (so gefunden am 29.07.2026). */ span.ind, i.ind { display:inline-flex; align-items:center; justify-content:center; gap:2px; font-size:14px; line-height:1; vertical-align:middle; cursor:help; font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .ind.ok { color:var(--ok); } .ind.mut { color:var(--mut); opacity:.7; font-size:11px; } i.ind.mut, i.ind.ok { font-size:14px; } .ind.warn { color:var(--warn); font-size:11px; font-weight:600; } .ind.warn i { font-size:13px; } /* Füllspalte: leerer Rest rechts der letzten Datenspalte — trennlinienlos, damit die Tabelle dort optisch ausläuft. **Die frühere Regel `:nth-last-child(2) { border-right:0 }` ist entfallen.** Sie nahm der AKTIONSSPALTE die Linie, solange die hinten stand; seit sie vorn sitzt (15.08.2026) traf sie die letzte Datenspalte — hinter „Typ" fehlte der Abschluss, sobald keine weitere Gruppe eingeblendet war (Rückmeldung Chris 16.08.2026). Wer eine Spalte umstellt, prüft die Positionsregeln mit. */ .tbl th.fil, .tbl td.fil { border-right:0 !important; } /* „Gilt nicht" — die Angabe kann es für dieses Gerät gar nicht geben. Nicht leer lassen: leer heißt „fehlt", und das wäre eine Falschaussage. */ .tbl td.na { background:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--mut) 11%, transparent) 5px 6px); } /* Freigegebene Zeile ruhig stellen — sie ist erledigt, nicht hervorzuheben */ .tbl tr.frei td:first-child { box-shadow:inset 2px 0 0 var(--ok); } /* Herkunftspunkt am Feld-Label: gefüllt = belegt, hohl+gestrichelt = gerechnet/geschätzt, blass = nicht dokumentiert. Dieselbe Aussage wie .pq-vage in der Tabelle. */ /* Seit 23.09.2026 je Quelle eine eigene Form statt eines roten Punkts für alles Belegte: Rot ist Akzent (Aktion, Fokus) und las sich als „von Hand". Grün = eine Unterlage des Herstellers trägt den Wert, Grau = Preisliste oder Festlegung, Raute = ein Mensch. */ .qdot { display:inline-block; box-sizing:border-box; width:7px; height:7px; border-radius:50%; margin-left:6px; vertical-align:1px; background:var(--mut); cursor:help; flex:none; } .qdot.q-datenblatt { background:var(--ok); } .qdot.q-katalogseite { background:none; border:2px solid var(--ok); } .qdot.q-preisliste { background:var(--mut); } .qdot.q-hand { background:var(--txt); border-radius:1px; transform:rotate(45deg) scale(.9); } .qdot.q-regel { background:none; border:1.5px solid var(--mut); } .qdot.q-abgeleitet, .qdot.q-geschaetzt, .qdot.vage { background:none; border:1px dashed var(--mut); } /* Angabe aus der Geräteliste (Rumpf für die KI-Recherche, 19.10.2026): halb gefüllt — es steht etwas da, belegt ist es nicht. */ .qdot.q-lv { background:linear-gradient(90deg, var(--mut) 50%, transparent 50%); border:1px solid var(--mut); } .qdot.leer { background:var(--bdr); } /* Abgekündigte und deaktivierte Stamm-Einträge in der Suche (30.09.2026): Zeile gedämpft (Textfarbe, nicht opacity — fixierte Zellen müssen deckend bleiben); im Editor steht „deaktiviert" in der Freigabezeile */ .tbl tr.deakt td:not(.akt), .tbl tr.deakt td:not(.akt) b { color:var(--mut); } .tbl td.akt .btn[disabled] { opacity:.4; cursor:not-allowed; } .tbl td.akt .btn[disabled]:hover { border-color:var(--ctl-bdr, var(--bdr)); color:inherit; } .cd-frei .cd-deakt { color:var(--warn); font-weight:600; } /* Freigabe-Zeile im Stamm-Editor */ .cd-frei { display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card-2); } .cd-frei > div { flex:1; min-width:0; } .cd-frei b { font-family:var(--f-display); font-stretch:87.5%; font-size:13px; display:block; } .cd-frei .hint { display:block; margin-top:2px; } .cd-frei.on { border-color:var(--ok); } .cd-frei.on b { color:var(--ok); } .cd-frei.warn { border-color:var(--warn); } .cd-frei.warn b { color:var(--warn); } /* Fehlende Pflichtangaben als Sprungmarken — „3 offen" nützt nichts, wenn man dann sucht */ .cd-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; } .cd-chip { font-size:11.5px; padding:2px 8px; border:1px solid var(--warn); color:var(--warn); background:none; border-radius:var(--r); font-family:var(--f-body); } .cd-chip:hover { background:color-mix(in srgb, var(--warn) 12%, transparent); } /* Leeres Feld mit Ableitung: der Platzhalter zeigt den gerechneten Wert (gestrichelt wie überall, wo etwas nicht gepflegt, sondern hergeleitet ist) */ .inp.abgeleitet::placeholder { color:var(--mut); font-style:italic; opacity:.85; } /* Plausibilitätshinweis (Zahlenfeld ≠ Anschlussliste) — Hinweis, keine Lücke */ .cd-hinweis { display:flex; align-items:flex-start; gap:7px; margin:0; font-size:12px; color:var(--warn); line-height:1.45; } .cd-hinweis i { font-size:15px; flex-shrink:0; } /* Hinweis, dass die Feldauswahl an der Kategorie hängt */ /* „Blende führen" steht neben dem Knopf, der davon abhängt — die Wirkung der Auswahl ist damit ohne Umweg sichtbar. Unten ausgerichtet, damit Feld und Knopf auf einer Linie sitzen. */ .cd-blende { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } .cd-blende .field { width:260px; } .cd-blende > .btn { height:34px; } .cd-blende-hint { margin:-4px 0 0; max-width:720px; } .cd-profil { margin:0; font-size:11.5px; color:var(--mut); line-height:1.45; } .cd-profil b { color:var(--txt); } /* Legende der Herkunftspunkte */ .cd-legende { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-size:11.5px; color:var(--mut); padding:2px 2px 0; } .cd-legende span { display:inline-flex; align-items:center; gap:6px; } .cd-legende .qdot { margin-left:0; } /* Feld mit fehlender Pflichtangabe */ .field.fehlt > .inp, .field.fehlt .csel-btn { border-color:var(--warn); } .fehlt-tag { margin-left:7px; font-family:var(--f-body); font-size:10px; letter-spacing:0; text-transform:none; color:var(--warn); border:1px solid var(--warn); border-radius:var(--r); padding:0 4px; } .field.blink { animation:cdblink 1.2s ease; } /* Sprungmarke aus der Anleitung: die Kennzeichnungskarte blinkt einmal auf. */ .bmk-modus.blink { animation:cdblink 1.2s ease; } @keyframes cdblink { 0%, 60% { background:color-mix(in srgb, var(--acc) 18%, transparent); } 100% { background:none; } } .cd-frei .btn[disabled] { opacity:.5; cursor:not-allowed; } .cd-frei .btn[disabled]:hover { border-color:var(--hover-bdr); color:inherit; } /* Gesperrtes Dropdown: sieht aus wie ein Feld, ist aber nur Anzeige */ .inp.fest { background:var(--card-2); color:var(--mut); } .modal .inp[disabled] { background:var(--card-2); color:var(--mut); cursor:not-allowed; } /* Hinweis im Spalten-Popover (z. B. „gerätespezifische Merkmale folgen") */ .colpop-note { font-size:11.5px; color:var(--mut); line-height:1.4; padding:7px 8px 4px; border-top:1px solid var(--bdr); margin-top:4px; } /* Anschlüsse aus dem Preislisten-Text sind belastbar, abgeleitete werden gedämpft gezeigt */ .tbl td .pq-vage .chip, .tbl td.pq-vage .chip { opacity:.55; border-style:dashed; } .tbl td span.pq-vage { opacity:.6; border-bottom:1px dashed var(--mut); } .empty { text-align:center; padding:60px 20px; color:var(--mut); } .empty i { font-size:44px; display:block; margin-bottom:10px; opacity:.5; } /* Knöpfe in der Leeransicht (Raum, seit 22.10.2026) tragen ihr Symbol in Knopfgröße, nicht als großes Leersymbol */ .empty .btn { margin:14px 4px 0; } .empty .btn i { font-size:inherit; display:inline; margin:0; opacity:1; } /* ---------- Markenleiste + Produktgruppen (Gerätestamm) ---------- Einstieg über den Hersteller, dann über dessen Produktgruppe. Beides ist ein FILTER auf dieselbe Tabelle, kein zweiter Datenbestand — deshalb bleiben Suche, Spaltenfilter und Spaltengruppen daneben unverändert gültig. Die Kachel trägt entweder ein Logo (marken/.svg|png|webp|jpg, falls hinterlegt) oder den Namen als Wortmarke in Bahnschrift. Das Logo wird vorab geprüft und erst nach erfolgreichem Laden eingesetzt — ein mit onerror-Fallback flackert bei jedem Neuzeichnen, weil die meisten Hersteller kein Logo im Ordner haben. */ .marken { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; } /* display:flex hebelt hidden aus (bekannte Falle) — beide Leisten sind im Geräte-Picker der Verdrahtung nur im Reiter „Aus dem Gerätestamm" sichtbar. */ .marken[hidden], .grp-leiste[hidden] { display:none; } /* Im Picker: kompaktere Kacheln und eine Leiste, die nicht die halbe Höhe frisst. */ /* `flex:none` ist der eigentliche Fix (Rückmeldung Chris 10.09.2026, „Hersteller oben nicht korrekt"): `.modal-bd` ist eine Flex-Spalte, und sobald die Produktgruppen-Zeile dazukam, wurde die Kachelzeile auf ~30 px zusammengedrückt — Kacheln abgeschnitten, Rollbalken im Kopf. Ein Flex-Kind schrumpft, wenn man es nicht daran hindert. */ #ov-wir-dev .marken, #ov-wir-dev .grp-leiste { flex:none; } #ov-wir-dev .marken { max-height:124px; overflow-y:auto; margin:0; } #ov-wir-dev .marke { height:44px; min-width:118px; } #ov-wir-dev .mk-logo b { font-size:13px; } .marke { display:flex; align-items:center; gap:10px; min-width:132px; height:52px; padding:0 12px; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); box-shadow:var(--sh); } .marke:hover { border-color:var(--acc); color:var(--acc-t); } .marke.on { border-color:var(--acc); background:var(--card-2); box-shadow:inset 2px 0 0 var(--acc); } .mk-logo { display:flex; align-items:center; justify-content:center; min-width:0; } /* ---------- Herstellerlogos: MASKE statt Bild (Vorgabe Chris 16.08.2026) ---------- Die Vorlagen kommen so, wie der Hersteller sie ausliefert: Sennheiser schwarz, QSC und Sharp farbig, Rittal als JPEG mit weißem Grund. Nebeneinander in einer Leiste ergibt das ein unruhiges Bild, und **je nach Thema verschwindet die Hälfte** — Schwarz auf Graphit, Weiß auf Blattweiß. Deshalb wird nicht das Bild gezeigt, sondern seine FORM: der Alphakanal maskiert eine Fläche in `currentColor`. Damit ist das Logo immer in Textfarbe — hell im dunklen Thema, dunkel im hellen — und nimmt bei Hover und aktiver Kachel denselben Akzent an wie die Wortmarke daneben. Ein zweiter Satz Dateien je Thema ist nicht nötig, und ein neues Logo passt sich von selbst an. **Voraussetzung: der Alphakanal muss die Logoform tragen.** Eine deckende Vorlage (JPEG) ergäbe einen vollen Farbblock — Rittal ist deshalb freigestellt worden und liegt jetzt als PNG vor (Weg: `POST /api/marke`, s. .claude/serve.js). Wer ein Logo ergänzt, prüft das: im Zweifel Vorlage mit weißem Grund freistellen, nicht einfach ablegen. `-webkit-mask` bleibt neben `mask` stehen — ältere WebKit-Stände kennen nur die Präfixform, und ohne sie wäre die Kachel dort leer statt bloß unschön. Die BREITE kommt aus dem Seitenverhältnis (inline von katalog.js gesetzt): eine Maske hat keine Eigengröße, mit fester Breite stünde jedes Logo in derselben Box. Dieselbe Falle wie beim SVG ohne `width`/`height` am 14.08.2026, nur andersherum. */ .mk-mark { display:block; height:26px; max-width:104px; background:currentColor; -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; } #ov-wir-dev .mk-mark { height:20px; max-width:88px; } .mk-logo b { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:15px; text-transform:none; letter-spacing:0; white-space:nowrap; } /* Aktive Kachel: Logo UND Wortmarke im Akzent. Die Regel galt nur für `b` — beim Hover fällt das nicht auf, weil dort die ganze Kachel `color` setzt und die Maske über `currentColor` erbt; bei `.on` gab es das nicht, und das Logo blieb als einziges Element unbeteiligt. */ .marke.on .mk-logo b, .marke.on .mk-mark { color:var(--acc-t); } .mk-n { margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--mut); background:var(--card-2); border:1px solid var(--bdr); border-radius:var(--r); padding:1px 6px; } .marke.on .mk-n { color:var(--acc-t); border-color:var(--acc); } /* Herstellerfarben beim Überfahren (seit 23.09.2026, Werte und Quellen in katalog.js `MARKEN_FARBEN`). Das Markenbild gilt in BEIDEN Themen gleich — es ist das Bild des Herstellers, nicht unseres; Fläche und Logofarbe kommen deshalb nicht aus den Token. Auch die aktive Kachel zeigt es beim Überfahren; ohne Zeiger bleibt `.on` im Akzent. */ .marke[data-farbe] { position:relative; overflow:hidden; transition:background-color .15s, border-color .15s, color .15s; } .marke[data-farbe]:hover { background:var(--mk-bg); border-color:var(--mk-kante); color:var(--mk-fg); } .marke[data-farbe]:hover .mk-mark, .marke[data-farbe]:hover .mk-logo b { color:var(--mk-fg); } .marke[data-farbe]:hover .mk-n { color:var(--mk-fg); background:transparent; border-color:color-mix(in srgb, var(--mk-fg) 40%, transparent); } .marke[data-farbe]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--mk-band, none); opacity:0; transition:opacity .15s; pointer-events:none; } .marke[data-farbe]:hover::after { opacity:1; } /* „Alle" ist schmaler — es ist kein Hersteller, sondern das Aufheben der Auswahl. */ .marke.alle { min-width:0; } /* Reiter „Abgekündigt" (23.09.2026): letzte Kachel, gestrichelt wie die Archivspalte des Projektbretts, mit Abstand zu den Herstellern — er ist kein Fabrikat. */ .marke.archiv { border-style:dashed; background:transparent; margin-left:8px; min-width:0; } .marke.archiv .mk-logo { display:flex; align-items:center; gap:6px; } .marke.archiv .mk-logo .ti { font-size:18px; } .marke.archiv.on { border-style:solid; } /* Prüfliste (Stufe 2, 15.10.2026): eigene Kachel vor dem Archiv, durchgezogen — sie ist Arbeit, kein Abgelegtes. */ .marke.archiv.pruefliste { border-style:solid; } /* Stufenmarke vorn in der Zeile und in der Prüfansicht. Farbe nur für die Ausnahme (§Design): „bereit" grün, Widerspruch in Warnfarbe, alles andere neutral gestrichelt. Die Zahl ist die Nutzung in Projekten. Feste Breite, damit die Aktionsspalte in einer Flucht bleibt. */ .pr-st { display:inline-flex; align-items:center; justify-content:center; width:34px; height:22px; margin-right:4px; border:1px dashed var(--ctl-bdr); border-radius:var(--r); background:transparent; font-size:11px; font-variant-numeric:tabular-nums; color:var(--mut); cursor:pointer; flex:none; } .pr-st.pr-bereit { border:1.5px solid var(--ok); color:var(--ok); } .pr-st.pr-widerspruch { border-color:var(--warn); color:var(--warn); } .pr-st.pr-frei { border:1.5px solid var(--ok); background:var(--ok); color:var(--card); } .pr-st.pr-gross { width:auto; padding:0 8px; font-size:12px; cursor:default; } .pr-chips { display:inline-flex; gap:4px; margin-left:6px; } .pr-chip.pr-bereit span { color:var(--ok); } .pr-fort { margin:0 8px; color:var(--mut); font-size:12px; white-space:nowrap; } .pr-modal .modal-hd .pr-genutzt { font-size:12px; font-weight:400; } .pr-modal .pr-bd { flex-direction:row; gap:16px; flex:1; min-height:0; padding:12px 16px; } /* .pr-modal davor: sonst gewinnt .modal-bd (steht weiter hinten) */ .pr-links { flex:0 0 440px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; } .pr-rechts { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; } .pr-seiten { flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card-2); } .pr-seiten canvas { box-shadow:var(--sh-1); } .pr-doks { display:flex; gap:4px; align-items:center; flex-wrap:wrap; } .pr-gruende { margin:0; padding-left:18px; color:var(--txt); font-size:13px; } .pr-ok { color:var(--ok); font-size:13px; } .pr-felder { width:100%; border-collapse:collapse; font-size:13px; } .pr-felder th { text-align:left; font-weight:500; color:var(--mut); padding:4px 8px 4px 0; white-space:nowrap; } .pr-felder td { padding:4px 6px; border-bottom:1px solid var(--bdr); } .pr-felder tr.pr-offen td, .pr-felder tr.pr-offen th { background:var(--hover); } .pr-felder .pr-q { color:var(--mut); font-size:12px; white-space:nowrap; } .pr-pos { font-variant-numeric:tabular-nums; } .pr-modal .modal-ft .sp { flex:1; } @media (max-width: 1100px){ .pr-modal .pr-bd { flex-direction:column; } .pr-links { flex:none; max-height:40vh; } } .grpbar { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; align-items:center; } .grpbar[hidden] { display:none; } /* Filterzeile der Geräteliste — das Gegenstück zur Markenleiste des Stamms (seit 16.08.2026): hier wird der AUSSCHNITT gewählt (Ansicht, Raum, Kategorie), nicht die Darstellung. Dieselbe Höhe und derselbe Abstand wie `.marken`/`.grpbar`, damit beide Listen gleich gegliedert wirken. Die Auswahlfelder dürfen nicht auf voller Breite laufen — sie tragen ihre Breite als Inline-Stil und würden sonst die Zeile sprengen. */ .grp-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:12px; text-transform:none; letter-spacing:0; } .grp-chip:hover { border-color:var(--acc); color:var(--acc-t); } .grp-chip.on { background:var(--acc-f); border-color:var(--acc-f); color:var(--on-acc); } .grp-chip span { font-family:var(--f-mono); font-stretch:normal; letter-spacing:0; font-size:11px; font-variant-numeric:tabular-nums; opacity:.75; } /* Zählzeile: die Zahl ist die Aussage, deshalb steht sie groß und in Bahnschrift vorn. */ /* Kopfzeile mit Titel UND Knopf: der Titelblock braucht eine kleine `flex-basis`, sonst bricht die Zeile um, BEVOR er schrumpft — `flex-wrap` weicht zuerst aus und staucht erst danach. Nur für Kopfzeilen mit `.tb-titel`, damit die übrigen Werkzeugleisten unberührt bleiben. */ .toolbar.tb-titel { flex-wrap:nowrap; align-items:center; } /* Drei Blöcke: Titel — Suchfeld — Aktionen. Titel und Aktionsblock bekommen mit `flex:1 1 0` dieselbe Restbreite, deshalb sitzt das Suchfeld EXAKT in der Mitte der Ansicht und nicht nur zwischen zwei ungleich breiten Nachbarn. `flex-basis:0` ist dabei entscheidend — mit `auto` bestimmte der Inhalt die Breite und die Mitte verschöbe sich mit jeder Überschrift. */ .toolbar.tb-titel > div:first-child { flex:1 1 0; min-width:0; } .toolbar.tb-titel > .tb-akt { flex:1 1 0; min-width:0; display:flex; justify-content:flex-end; gap:8px; } .toolbar.tb-titel > .btn, .toolbar.tb-titel > .tb-akt > .btn { flex:0 0 auto; } /* Rund ein Drittel der Breite (Vorgabe Chris 16.08.2026), gedeckelt: unter 220px ist ein Suchfeld nicht mehr bedienbar, über 460px frisst es die Mitte auf, die es sparen soll. */ .toolbar.tb-titel > .tb-such { flex:0 1 32%; min-width:220px; max-width:460px; } /* Schmales Fenster: lieber umbrechen als drei Blöcke gegeneinander stauchen. Das Suchfeld rutscht dann unter die Überschrift und nimmt die volle Breite — der alte Zustand, aber erst dort, wo die Mitte ohnehin keinen Platz mehr hat. */ @media (max-width:1100px){ .toolbar.tb-titel { flex-wrap:wrap; } .toolbar.tb-titel > div:first-child { flex:1 1 200px; } .toolbar.tb-titel > .tb-akt { flex:0 0 auto; } .toolbar.tb-titel > .tb-such { flex:1 1 100%; max-width:none; order:3; } } /* Eine Zeile direkt über der Tabelle: Zahl, Spaltengruppen, dann die Werkzeuge. Alles darin beschreibt dieselbe Tabelle — die Gruppen standen vorher oben in der Werkzeugleiste, weit weg von ihrer Wirkung. Die Gruppen stehen DICHT an der Zahl (nur ein Abstand), die Werkzeuge schiebt der Spacer nach rechts. */ .cat-kopf { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; } .cat-kopf .vtabs { margin:0 0 0 12px; } .cat-kopf .sp { flex:1; } /* Gerätestamm: die Zählzeile bleibt EINE Zeile (seit 23.09.2026, Rückmeldung Chris — bei 1332 px und gewähltem Hersteller brach „Excel" in eine zweite Zeile: Zahl 435 + Tabs 412 + Knöpfe 166 px gegen 1052 px Platz). Wie in der Geräteliste (13.09.2026): unter 1500 px verlieren „Spalten" und „Excel" ihre Beschriftung (`.tb-tx`), und der veränderliche Teil der Zahl (Filtergründe) wird rechts beschnitten statt umzubrechen. Tabs und Knöpfe schrumpfen nie — sie sind Bedienelemente, die Gründe stehen zusätzlich als Chips/Links. */ .cat-kopf:has(> #cat-zahl) { flex-wrap:nowrap; } .cat-kopf > #cat-zahl { flex:0 1 auto; min-width:0; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; } .cat-kopf:has(> #cat-zahl) > :not(#cat-zahl):not(.sp) { flex:none; } /* Der Filterknopf in der Aktionsspalte (Stammdaten-Stand, seit 13.09.2026): die Kopfzelle ist sonst leer, der Knopf steht also allein und braucht keinen Abstand zu einem Text. Dieselbe Sichtbarkeit wie jeder andere Filterknopf — gedämpft, beim Überfahren kräftig, aktiv rot. */ .tbl th.akt .th-flt { padding:0; } .cat-zahl { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0; color:var(--mut); font-size:13px; } .cat-zahl b { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:20px; color:var(--txt); font-variant-numeric:tabular-nums; } .cat-zahl .cz-grund { color:var(--acc-t); } .cat-zahl .cz-reset { border:none; background:none; padding:0; color:var(--mut); text-decoration:underline; font-size:13px; } .cat-zahl .cz-reset:hover { color:var(--acc); } /* ---------- Modal ---------- */ .overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:var(--z-modal); padding:20px; } .overlay.show { display:flex; } /* **Dialoge stapeln sich nach ROLLE, nicht nach Reihenfolge im HTML** (Rückmeldung Chris 14.08.2026: „Blendenansicht öffnet sich im Hintergrund"). Alle Overlays lagen auf z-index 100, also entschied die Dokumentreihenfolge — und `#ov-cat` (Stamm-Editor) steht weit hinter `#ov-panel`. Wer im Editor „Blendenansicht öffnen" klickte, bekam sie hinter dem Editor. Drei Ebenen, damit das nicht vom nächsten neuen Modal abhängt: 100 = Grunddialog · 110 = Unterdialog, der aus einem Dialog heraus geöffnet wird · 120 = Rückfrage (AVP.frage/eingabe) — die muss IMMER obenauf liegen, sonst wartet die App auf eine Antwort auf einen Dialog, den man nicht sieht. */ #ov-panel, #ov-hk, #ov-dev-stamm, #ov-dok { z-index:var(--z-sub); } /* #ov-dok: Unterlage aus dem Stamm-Editor (15.10.2026) */ #ov-dlg { z-index:var(--z-ask); } .modal { background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r-k); width:100%; max-width:560px; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--sh-3); } .modal.wide { max-width:900px; } .modal-hd { display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--bdr); font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:16px; } .modal-hd .x { margin-left:auto; } .modal-bd { padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; } .modal-ft { display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--bdr); } /* Import-Dropzone */ .dropzone { border:1px dashed var(--hover-bdr); border-radius:var(--r); padding:38px 20px; text-align:center; color:var(--mut); cursor:pointer; } .dropzone:hover, .dropzone.over { border-color:var(--acc); background:var(--acc-l); color:var(--acc-t); } .dropzone i { font-size:34px; display:block; margin-bottom:8px; } .map-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:8px 14px; align-items:center; } .map-grid .src { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .map-grid .smp { font-size:11.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .imp-info { font-size:13px; color:var(--mut); } .imp-info b { color:var(--txt); } /* ---------- Import: Art und Abgleich (Audit 10.09.2026, F-07) ---------- Die drei Arten stehen untereinander und nennen JE ihre Wirkung. Nebeneinander waeren es drei Woerter ohne Folgenangabe — und „Ersetzen" hat die groesste Folge von allen. */ /* Revisionstabelle im PDF-Dialog (F-07) — dieselbe Spaltenfolge wie auf dem Blatt. */ /* Eine gerechnete Kabellaenge darf nie wie ein Mass aussehen (F-10) — dieselbe Bildsprache wie `.pq-vage` im Geraetestamm: gedaempft, mit Symbol, und der Grund im Klartext. */ .wp-vage { display:flex; align-items:center; gap:4px; margin-top:3px; font-size:11px; color:var(--mut); font-style:italic; } .wp-vage i { font-style:normal; } .rv-kopf, .rv-z { display:grid; grid-template-columns:80px 150px minmax(0,1fr) 32px; gap:6px; align-items:center; } .rv-kopf { margin-bottom:2px; } .rv-kopf span { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); } .rv-z { margin-bottom:5px; } .imp-art { display:flex; flex-direction:column; gap:6px; } .imp-art label { display:grid; grid-template-columns:auto 1fr; gap:3px 8px; align-items:baseline; padding:7px 10px; border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; } .imp-art label:hover { border-color:var(--acc); } .imp-art input { grid-row:1 / 3; align-self:center; } .imp-art b { font-family:var(--f-display); font-stretch:87.5%; font-size:13.5px; } .imp-art span { font-size:11.5px; color:var(--mut); line-height:1.35; } /* Die Farben sind Zustandsfarben, keine Signalarten — dieselbe Ausnahme wie bei Status und Herkunft in der Tabelle (s. CLAUDE.md §Herkunft). */ .rev-zahlen { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 8px; } .rev-z { font-size:12px; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:3px 9px; } .rev-z b { color:var(--txt); font-family:var(--f-mono); } .rev-z.neu { border-color:color-mix(in srgb, var(--pill-neu) 45%, var(--bdr)); } .rev-z.neu b { color:var(--pill-neu); } .rev-z.geaendert { border-color:color-mix(in srgb, var(--pill-nach) 45%, var(--bdr)); } .rev-z.geaendert b { color:var(--pill-nach); } .rev-z.entfallen { border-color:color-mix(in srgb, var(--warn) 45%, var(--bdr)); } .rev-z.entfallen b { color:var(--warn); } .tbl tr.rev-neu td:first-child { box-shadow:inset 3px 0 0 var(--pill-neu); } .tbl tr.rev-geaendert td:first-child { box-shadow:inset 3px 0 0 var(--pill-nach); } .tbl tr.rev-entfallen td:first-child { box-shadow:inset 3px 0 0 var(--warn); } .tbl tr.rev-entfallen td { opacity:.7; } /* ---------- Geräte-Drawer ---------- */ /* Den seitlichen Auszug (`.drawer`, 560 px, von rechts einfahrend) gibt es seit dem 15.08.2026 NICHT MEHR — zuerst wich der Stamm-Editor einem mittigen Popup (29.07.), jetzt auch der Geräte-Editor (Vorgabe Chris). Die Regel ist bewusst gelöscht statt auskommentiert: sie schiebt ihr Element mit `right:-560px` aus dem Bild, und wer die Klasse ahnungslos wiederverwendet, sucht lange nach dem unsichtbaren Dialog. `.drawer-hd`, `.drawer-bd` und `.drawer h4` leben weiter — sie sind der INHALT beider Popups und haben mit der Einfahrbewegung nie etwas zu tun gehabt. */ .drawer-hd { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bdr); } .drawer-hd .ttl { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .drawer-hd .x { margin-left:auto; } .drawer-bd { padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; } .drawer h4, .cat-modal h4 { margin:8px 0 0; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:11.5px; text-transform:none; letter-spacing:0; color:var(--mut); padding-bottom:5px; border-bottom:1px solid var(--bdr); } /* Stamm-Editor: mittiges Popup statt seitlichem Auszug (Rückmeldung Chris 29.07.2026). Ein Stamm-Eintrag hat je nach Kategorie bis zu 25 Felder — im 560-px-Auszug stand jedes untereinander und man scrollte ewig; auf 1100 px legt `.frm-grid` sie vier- bis fünfspaltig nebeneinander, und der Blick bleibt in der Mitte, wo man ohnehin hinsieht. */ .cat-modal { max-width:1100px; height:auto; } .cat-modal .drawer-bd { padding:16px 20px; } .cat-modal .inp[disabled] { background:var(--card-2); color:var(--mut); cursor:not-allowed; } /* **Festes 12er-Raster statt `auto-fit`.** Mit `minmax(180px,1fr)` bekam „HE" genauso viel Platz wie „Bezeichnung", und die Spaltenzahl sprang je Abschnitt (4 Felder → 4 Spalten, 5 Felder → 5 Spalten): kein Feld stand unter dem anderen in einer Flucht. Jetzt liegt jedes Feld auf 3 von 12 Spalten (lange Textfelder auf 6, Bezeichnung auf 12) — vier Felder je Zeile, abschnittsübergreifend dieselben Kanten. `align-items:start` ist Pflicht: sonst dehnt ein Feld mit Hinweistext die ganze Zeile und die Eingaben daneben stehen mittig statt oben. */ .cat-modal .frm-grid { grid-template-columns:repeat(12,1fr); gap:10px 14px; align-items:start; } .cat-modal .frm-grid .w3 { grid-column:span 3; } .cat-modal .frm-grid .w6 { grid-column:span 6; } .cat-modal .frm-grid .w12 { grid-column:1/-1; } /* Der Hinweis steht UNTER der Eingabe und darf die Zeilenhöhe nicht bestimmen. */ .cat-modal .field > .hint { margin-top:1px; font-size:11px; } @media (max-width:900px) { .cat-modal .frm-grid .w3 { grid-column:span 6; } } /* `.cat-modal` trägt seit dem 15.08.2026 AUCH der Geräte-Editor (`.dev-modal` daneben für das Wenige, das sich unterscheidet). Der Klassenname ist historisch — geteilt wird das Verhalten „mittiges Popup mit 12er-Raster", nicht der Gerätestamm. Umbenennen hieße, ihn in zwei Modulen und im HTML nachzuziehen; das ist die Verwechslungsgefahr nicht wert, solange es hier steht. */ .dev-modal { max-width:1080px; } .dev-modal .drawer-bd { gap:12px; } /* ---------- Bearbeiten in der Tabelle (seit 15.08.2026) ---------- Der Stift in der Zeile schaltet sie scharf, danach öffnet ein Klick die Zelle an Ort und Stelle (Vorgabe Chris: „wie bei Excel"). Die Eingabe füllt die Zelle vollständig aus und bekommt den Akzentrahmen — man soll sehen, WELCHE Zelle man gerade schreibt, ohne dass die Zeile in der Höhe springt. */ /* Die Zelle in Bearbeitung darf NICHT clippen: `.tbl.v53 td` steht auf `overflow:hidden`, und darin wäre die aufgeklappte Auswahlliste unsichtbar. */ .tbl td.cell-ed { padding:0 !important; overflow:visible !important; position:relative; z-index:5; } .cell-inp { width:100%; height:100%; min-height:30px; border:2px solid var(--acc); border-radius:0; background:var(--card); color:var(--txt); font:inherit; padding:3px 7px; outline:none; } .tbl td.cell-ed .csel { width:100%; } .tbl td.cell-ed .csel-btn { border:2px solid var(--acc); border-radius:0; height:100%; min-height:30px; } /* Das offene Auswahlfeld LIEGT über der Zelle, statt in ihr zu stehen (seit 18.10.2026, Rückmeldung Chris „wird die ganze Zeile größer"): der Knopf trägt den Innenabstand der Knöpfe aus Richtung D (8/6 px + Rand) und war damit 38 px hoch in einer 33-px-Zeile. Absolut gesetzt bestimmt er die Zeilenhöhe nicht mehr, bei jeder Einstellung von Zeilenhöhe und Zoom. */ .tbl td.cell-ed > .csel-btn { position:absolute; inset:0; height:auto; min-height:0; padding:0 8px; line-height:1; /* … und sieht aus wie die Zelle (Nachbesserung Chris am selben Tag: „der Text wird größer, es soll einfach gleich bleiben"): Schrift, Größe, Versalien, Farbe und Fläche der Zelle, nur der Akzentrahmen zeigt, dass sie offen ist. Der Statuspunkt wird in den Knopf übernommen (starteZellEdit). */ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:transparent; gap:0; } .tbl td.cell-ed > .csel-btn > i { flex:none; } /* **Die Rückmeldung hängt an der ZELLE, nicht an der Zeile.** Es gibt keinen Bearbeiten-Zustand mehr: ein Klick in eine Zelle ändert sie sofort, der Stift am Zeilenanfang öffnet das Popup (s. devices.js). Gezeigt wird sie beim Überfahren — dauerhaft wären es bei vier Auswahlspalten Dutzende Pfeile, und die Tabelle sähe aus wie ein Formular. **Textcursor (I-Balken), nicht `cell`** (Vorgabe Chris 15.08.2026): `cursor:cell` zeigt ein Fadenkreuz mit Plus — das steht in Tabellenprogrammen fürs Markieren von Bereichen, nicht fürs Schreiben. Was hier passiert, ist Schreiben, also derselbe Zeiger wie in Word. */ /* Auf `.tbl` und nicht auf `.tbl.v53`: Geräteliste (`.v53`) und Gerätestamm (`.cols`) tragen verschiedene Tabellenklassen, bedienen sich aber gleich. */ /* **Zellzeiger statt I-Balken** (seit 19.08.2026): ein Klick tippt nicht mehr, er WÄHLT. Genau dafür steht das Fadenkreuz mit Plus in Tabellenprogrammen — am 15.08.2026 war es noch falsch, weil der Klick damals sofort ins Feld sprang. */ .tbl tbody td.editable { cursor:cell; } .tbl tbody td.editable:hover { background:var(--card-2); box-shadow:inset 0 0 0 1px var(--hover-bdr); } /* Auswahlfeld statt Eingabe: **Zeigefinger statt I-Balken** — hier wird nicht getippt, sondern ausgewählt, und der Zeiger soll das vorher sagen (Vorgabe Chris). Dazu ein Dreieck am rechten Zellenrand, gezeichnet aus Rahmen statt als Icon-Glyph: ein Codepoint der Icon-Schrift wäre geraten, das Dreieck stimmt in jeder Vendor-Version. `position:relative` ist Pflicht — ohne sie hängt sich das Dreieck an den nächsten positionierten Vorfahren und landet irgendwo im Blatt. */ .tbl tbody td.editable.wahl { cursor:cell; position:relative; padding-right:18px; } /* Das Dreieck erscheint beim Überfahren UND an der gewählten Zelle: dort ist es der Hinweis, dass ein zweiter Klick die Liste aufklappt (Rückmeldung Chris 19.08.2026). Dauerhaft an allen Zellen wären es bei vier Auswahlspalten Dutzende Pfeile und die Tabelle sähe aus wie ein Formular — das war schon am 15.08.2026 der Grund gegen die Dauereinblendung. */ .tbl tbody td.editable.wahl:hover::after, .tbl tbody td.editable.wahl.sel-aktiv::after { content:''; position:absolute; right:6px; top:50%; margin-top:-2px; border:5px solid transparent; border-top-color:var(--acc); pointer-events:none; } .tbl tbody td.cell-ed.wahl:hover::after, .tbl tbody td.cell-ed.wahl.sel-aktiv::after { content:none; } /* offene Liste hat ihren eigenen Pfeil */ /* Aktionsspalte steht VORN und trägt beide Knöpfe in gleicher Optik (Vorgabe Chris 15.08.2026). Rechts war sie bei vielen Spalten erst nach dem Scrollen erreichbar. `.akt` liegt auch auf den Gruppen- und Langtextzeilen, damit die Spaltenflucht stimmt. */ .tbl td.akt, .tbl th.akt { white-space:nowrap; padding-left:6px; padding-right:6px; } /* Die Knopfreihe ist ein Flexkasten mit festem Abstand — nicht Knöpfe mit Leerraum dazwischen. Nur so lässt sich der Platzbedarf der Spalte ausrechnen statt zu messen (s. aktSpaltenBreite in ui.js); `flex:none` hält die Knöpfe davon ab, sich stauchen zu lassen. Der Kasten sitzt IM `td` — eine `display`-Regel auf der Zelle selbst würde sie aus der Tabellenstruktur werfen (s. §Kritische Regeln). */ .akt-b { display:inline-flex; gap:4px; align-items:center; } .akt-b > .btn { flex:none; } /* Inaktiv: kursiv und gedämpft. Das Gerät steht noch in der Liste, gehört aber nicht mehr zur Planung — es wird weder verdrahtet noch ins Rack gebaut (s. AVP.istInaktiv). */ /* **`opacity` NICHT auf der Zelle in Bearbeitung.** Sie wirkt auf den ganzen Teilbaum — also auch auf ein aufgeklapptes Dropdown darin. In einer inaktiven Zeile war die Optionsliste deshalb halbdurchsichtig, und man sah die Tabelle hindurch (Rückmeldung Chris 17.08.2026: „wenn ich von inaktiv zurück auf aktiv schalten will, ist es wieder transparent"). Ein deckender Hintergrund am Popup hilft dagegen nicht: `opacity` verrechnet die fertig gezeichnete Ebene, nicht die einzelnen Flächen. Die Zelle, die man gerade bearbeitet, wird deshalb voll deckend gezeigt — was ohnehin richtig ist: sie ist in diesem Moment das, worauf man schaut. */ /* **Seit 17.09.2026 über die Textfarbe gedämpft, nicht über `opacity`**: eine fixierte Zelle mit `opacity` ließe die gescrollten Spalten durchscheinen. Balken, Symbol und Chip werden einzeln gedämpft; die rote Statuszelle bleibt voll — sie ist die Aussage der Zeile. */ .tbl tr.inaktiv td:not(.cell-ed) { font-style:italic; color:color-mix(in srgb, var(--txt) 50%, var(--card)); } .tbl tr.inaktiv td .sigbar, .tbl tr.inaktiv td .kat-ik, .tbl tr.inaktiv td .chip { opacity:.5; } .tbl tr.inaktiv td.zhkz { opacity:.6; } .tbl tr.inaktiv td.cell-ed { font-style:italic; } .tbl tr.inaktiv td .chip { font-style:normal; } .cat-zahl .cz-inakt { color:var(--mut); font-style:italic; } /* Port-Editor */ .port-row { display:grid; grid-template-columns:1.2fr 78px 1.2fr 1fr 1fr 104px 30px; gap:6px; align-items:center; } /* Ab 10 Anschlüssen wird der Rest eingeklappt (Vorgabe Chris 15.08.2026) — ein Core mit 50 Ports schob sonst alles andere aus dem Blick. Der Knopf sagt, wie viele noch kommen; ohne die Zahl wäre nicht erkennbar, dass überhaupt etwas fehlt. */ .port-mehr { display:flex; align-items:center; gap:8px; width:100%; justify-content:center; margin-top:8px; color:var(--mut); } .port-mehr:hover { color:var(--acc); } .port-mehr i { font-size:15px; transition:transform .15s; } .port-mehr.auf i { transform:rotate(180deg); } .port-head { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:10.5px; color:var(--mut); text-transform:none; letter-spacing:0; } .port-row .inp, .port-row .csel-btn { padding:5px 8px; font-size:13px; } .port-del { border:none; background:none; color:var(--mut); font-size:16px; padding:4px; } .port-del:hover { color:var(--warn); } /* Zwischenüberschriften der Exporte-Ansicht (26.09.2026): Listen und Daten · Pläne (PDF). */ .exp-hd { font-family:var(--f-display); font-stretch:87.5%; font-size:12px; font-weight:600; text-transform:none; letter-spacing:.09em; color:var(--mut); margin:18px 0 8px; } /* Projektliste */ .prj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; } /* ---------- Projekte als Kanban (Vorgabe Chris 10.09.2026) ---------- Fünf Spalten aus AVP.PHASEN, Karten in Zugrichtung links → rechts. Die Spalten sind neutral gefüllt (`--card-2`), die Karten weiß darauf; nur die Zielspalte beim Ziehen trägt den Akzent. */ .kb { display:grid; grid-template-columns:repeat(4, minmax(210px, 1fr)) minmax(170px, .75fr); gap:12px; align-items:start; overflow-x:auto; padding-bottom:6px; } /* Das Archiv ist keine Phase: gestrichelt, ohne Füllung, Karten gedämpft und ohne Zähler. */ .kb-col.archiv { background:transparent; border-style:dashed; } /* Modulsymbole auf der Karte (Planungsumfang, 22.09.2026) — gedämpft, sie sind eine Angabe, keine Aktion. */ .kb-module { display:inline-flex; gap:5px; margin-left:10px; vertical-align:middle; } .kb-module i { font-size:13px; color:var(--mut); opacity:.8; } .kb-col.archiv .prj-card { opacity:.7; } .kb-col.archiv .prj-card .cnt { display:none; } .kb-col { background:var(--card-2); border:1px solid var(--bdr); border-radius:var(--r-k); min-height:180px; display:flex; flex-direction:column; } .kb-col.ziel { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); } .kb-hd { display:flex; align-items:center; gap:6px; padding:9px 12px; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); border-bottom:1px solid var(--bdr); } .kb-hd .n { margin-left:auto; font-weight:400; } /* „Neues Projekt" oben in der Spalte Entwurf (seit 27.09.2026) — volle Spaltenbreite. */ .kb-body { display:flex; flex-direction:column; gap:8px; padding:8px; flex:1; } .kb-leer { color:var(--mut); font-size:12px; text-align:center; padding:22px 6px; border:1px dashed var(--hover-bdr); border-radius:var(--r); } /* `touch-action:none` auf der Karte, nicht auf dem Brett: das Brett soll am Finger weiter waagerecht blättern, die Karte soll dem Finger folgen (s. §Ein Finger ist kein Mauszeiger). */ .kb .prj-card { touch-action:none; user-select:none; } .kb .prj-card h3 { font-size:14.5px; } .kb .prj-card.zieht { opacity:.35; } .kb-ghost { position:fixed; z-index:var(--z-drag); pointer-events:none; box-shadow:var(--sh-2); transform:rotate(-1.5deg); } /* ---------- Projektseite: Kacheln, Liste, Pipeline (projekte.js, seit 20.10.2026) ---------- Nach dem Arbeitsbereich von AVmemora. Farbe nur für den Status (`.st`), die Phase ist ein neutrales Etikett. */ .prj-tb { flex-wrap:nowrap; } .prj-tb .tb-l, .prj-tb .tb-r { flex:none; display:flex; align-items:center; gap:inherit; } /* Die Suche nimmt, was zwischen den Gruppen frei ist, und gibt zuerst nach — nie liegt sie unter den Knöpfen (Rückmeldung Chris 20.10.2026 mit Bild: mit `.tb-mitte` stieß sie an die Sortierung). */ .prj-tb .prj-such { flex:1 1 300px; max-width:440px; min-width:120px; height:34px; margin:0 auto; } .prj-tb .prj-sel { min-width:150px; } .prj-tb .prj-sel.an .csel-btn, #prj-mehr.an { border-color:var(--acc); color:var(--acc); } .prj-tb .vtabs { margin-left:0; } .prj-zahl { color:var(--mut); font-size:13px; white-space:nowrap; } .prj-zahl b { color:var(--txt); font-weight:600; font-family:var(--f-mono); } @media (max-width:1200px) { .prj-tb .tb-tx { display:none; } .prj-tb .prj-sel { min-width:120px; } } .prj-pin { font-size:13px; color:var(--acc); margin-right:4px; vertical-align:-1px; } .prj-ph { display:inline-block; font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; text-transform:none; letter-spacing:0; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:1px 7px; white-space:nowrap; } #prj-grid .kb .prj-card.arc, #prj-grid.kb .prj-card.arc { opacity:.65; } .kb-tag { margin-top:6px; } .kb-zeile { margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .kb-zeile .cnt { margin-top:0; } .kb-termin { font-size:12px; color:var(--mut); display:inline-flex; align-items:center; gap:4px; } #prj-grid.kb .pb-sym { margin-top:8px; } /* Symbole je Bereich in der Statusfarbe des Menüs (`symbole` in projekte.js). Ohne Status gedämpft. Sie bleiben IN der Karte: Umbruch statt Überstand. */ .pb-sym { display:flex; flex-wrap:wrap; gap:6px 8px; min-width:0; } /* Bereichssymbol mit Status (seit 20.10.2026): Symbol neutral, Status als kleiner voller Kreis mit Zeichen (`.st.mini`). */ .pb-ic { position:relative; display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; color:var(--mut); } .pb-ic > i { font-size:15px; } /* Ordner- und Gruppenköpfe: volle Breite über dem Kachelraster, Ablageziel beim Ziehen */ .pf-hd { grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:8px 6px 6px; margin-top:6px; border-bottom:1px solid var(--bdr); cursor:pointer; user-select:none; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:13px; letter-spacing:.03em; } .pf-hd:first-child { margin-top:0; } .pf-hd.ziel { border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--acc); background:var(--acc-l); } .pf-caret { font-size:14px; color:var(--mut); transition:transform .15s; } .pf-hd.zu .pf-caret { transform:rotate(-90deg); } .pf-ic { font-size:16px; color:var(--mut); } .pf-n { font-family:var(--f-mono); font-weight:400; font-size:11.5px; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:0 6px; } .pf-akt { margin-left:auto; display:flex; gap:2px; opacity:0; transition:opacity .12s; } .pf-hd:hover .pf-akt, .pf-hd:focus-within .pf-akt { opacity:1; } @media (hover:none) { .pf-akt { opacity:.55; } } .pf-leer { grid-column:1 / -1; color:var(--mut); font-size:12px; padding:14px 10px; border:1px dashed var(--hover-bdr); border-radius:var(--r); margin:8px 0; } /* Kacheln */ .pk-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; align-content:start; } .pk { display:flex; flex-direction:column; gap:8px; padding:14px 14px 0; overflow:hidden; user-select:none; } .pk.arc { opacity:.65; } .pk.zieht, .pl-p.zieht { opacity:.35; } .pk-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .pk-tit { min-width:0; } .pk-tit h3 { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pk-zeile { display:flex; align-items:center; gap:8px; min-height:18px; } .pk-zeile .pb-sym { margin-left:auto; justify-content:flex-end; } .pk-meta { color:var(--mut); font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pk-termin { display:inline-flex; align-items:center; gap:3px; } .pk-fuss { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; } .pk-r { display:flex; align-items:center; gap:8px; color:var(--mut); } .pk-n { font-family:var(--f-mono); font-size:12px; display:inline-flex; align-items:center; gap:3px; } .pk-pp { height:3px; margin:2px -14px 0; background:var(--card-2); } .pk-pp i { display:block; height:100%; background:var(--ok-f); } /* Liste: ein Raster je Zeile, Kopf mit Spaltenmenüs (Sortieren + Filtern) */ .pl { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-k); overflow:auto; } .pl .pf-hd { margin:0; padding:9px 12px 7px; background:var(--card-2); } .pl .pf-leer { margin:8px 12px; } .pl-zeile { display:grid; grid-template-columns:var(--pl-cols); gap:8px; align-items:center; padding:0 12px; min-width:var(--pl-min); } .pl-kz { position:relative; min-width:0; display:flex; align-items:center; } .pl-k.still { cursor:default; } .pl-griff { position:absolute; top:4px; bottom:4px; right:-6px; width:9px; cursor:col-resize; touch-action:none; z-index:1; } .pl-griff::after { content:''; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--bdr); } .pl-griff:hover::after, body.pl-zieht .pl-griff::after { background:var(--acc); width:2px; } body.pl-zieht, body.pl-zieht * { cursor:col-resize !important; user-select:none; } .pl-p > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pl-p > .pb-sym { flex-wrap:nowrap; overflow:hidden; } .pl-kopf { position:sticky; top:0; z-index:2; background:var(--card); border-bottom:1px solid var(--bdr); min-height:38px; } .pl-k { all:unset; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); padding:8px 0; white-space:nowrap; } .pl-k:hover, .pl-k.sortiert, .pl-k.gefiltert { color:var(--txt); } .pl-k:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r); } .pl-k .ti { font-size:13px; } .pl-k.gefiltert .ti-filter { color:var(--acc); } .pl-si { opacity:.5; } .pl-k.sortiert .pl-si { opacity:1; color:var(--acc); } .pl-p { min-height:46px; border-bottom:1px solid var(--bdr); cursor:pointer; font-size:13px; user-select:none; } .pl-p:hover { background:var(--hover); } .pl-p.arc { opacity:.65; } .pl-p .num { text-align:right; font-family:var(--f-mono); } .pl-p .mono { font-family:var(--f-mono); font-size:12.5px; } .pl-tit { min-width:0; padding:6px 0; } .pl-name { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pl-sub { color:var(--mut); font-size:12px; } .pl-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pl-zeile > div:nth-child(6), .pl-zeile > div:nth-child(7) { text-align:right; } .pl-kopf > .pl-kz:nth-child(6), .pl-kopf > .pl-kz:nth-child(7) { justify-content:flex-end; } .prj-card { padding:16px; cursor:pointer; } .prj-card:hover { border-color:var(--hover-bdr); } .prj-card h3 { margin:0 0 4px; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:16px; } /* Fließtext bleibt Fließtext — Mono nur für Kennzeichen und Zahlen */ .prj-card .meta { color:var(--mut); font-size:12.5px; } .prj-card .cnt { margin-top:10px; font-family:var(--f-mono); font-size:11.5px; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:1px 7px; display:inline-block; } /* ---------- Verdrahtungsschema ---------- */ /* Das Eigenschaften-Panel steht NEBEN der Zeichenflaeche, nicht darueber. Als schwebende Karte verdeckte es genau den Bereich, in dem man gerade arbeitet — beim Waehlen einer Leitung im rechten oberen Feld lagen ihre Ziehgriffe unter dem Panel, das sich durch dieselbe Auswahl geoeffnet hatte (gefunden im Funktionsdurchlauf 02.08.2026). Ist nichts gewaehlt, ist die Spalte weg und die Flaeche wieder voll breit. */ /* Die Fläche nimmt, was nach Band, Überschrift und den zwei Werkzeugleisten übrig bleibt. Vorher stand hier `calc(100vh - 200px)` — geraten, und um rund 110 px zu viel: bei 720 px Fensterhöhe ragte die Karte unter den Rand und die Seite bekam einen Scrollbalken („es sollte nur der Bereich ersichtlich sein, was auch auf den Monitor passt", Chris 16.08.2026). Mit flex:1 in einer `.view.fill`-Spalte stimmt es bei jeder Fensterhöhe und jeder Zeilenzahl der Werkzeugleisten — dieselbe Lehre wie bei hoehe3d() in der Rackplanung: nicht rechnen, was man messen lassen kann. */ .wir-stage { position:relative; flex:1 1 auto; min-height:300px; overflow:hidden; display:flex; align-items:stretch; } .wir-stage #wir-svg { flex:1 1 auto; min-width:0; } /* Raster liegt IM transformierten Layer, skaliert und wandert also mit Zoom/Pan mit */ /* Ohne `user-select:none` markiert der Browser beim Aufziehen eines Auswahlrahmens die Portnamen und Gerätetitel blau — das sieht aus wie ein Fehler und stört jede Zeichengeste. */ /* `cursor:default` und nicht `grab`: seit dem 31.07.2026 waehlt ein Zug auf der Flaeche aus, statt die Ansicht zu verschieben (dafuer mittlere Maustaste oder Leertaste, s. §Auswahl). Bis zum 10.09.2026 stand hier `grab` und wurde 140 Zeilen tiefer wieder ueberschrieben — zwei Regeln fuer dieselbe Frage, von denen die erste nichts bewirkte. */ #wir-svg { width:100%; height:100%; display:block; cursor:default; user-select:none; } #wir-svg.panning { cursor:grabbing; } #wir-svg.dragging { cursor:grabbing; } .wgrid-dot { fill:var(--bdr); } /* **Fläche und Rahmen sind zwei Elemente** (seit 13.09.2026). `.wn-bg` trägt nur noch die Füllung; die Kontur zeichnet `.wn-rahmen`, ein zweites, ungefülltes Rechteck, das NACH dem Kopfbalken kommt. Vorher lag der Kopfbalken (`.wn-hdbg`) ÜBER der Kontur und deckte am oberen Rand die innere Hälfte des Strichs ab — bei 2 px Auswahl war die Oberkante 1 px, die Unterkante 2 px („oben und unten unterschiedlich dick", Chris). Ein Strich liegt in SVG immer zur Hälfte innerhalb der Fläche; was danach gemalt wird, deckt diese Hälfte zu. Der Rahmen nimmt keine Klicks an, sonst fräße er die Trefferfläche des Kopfbalkens. */ .wn-bg { fill:var(--card); } .wn-rahmen { fill:none; stroke:var(--hover-bdr); stroke-width:1; pointer-events:none; transition:stroke .12s ease; } .wn.on .wn-rahmen { stroke:var(--acc); stroke-width:2; } /* Inaktives Gerät im Schema (Entwurf A, seit 18.09.2026): gestrichelt, Blattfarbe, alle Beschriftungen gedämpft, Kopf und BMK durchgestrichen, „ENTFÄLLT" in Warnfarbe. Bis dahin lief das über `opacity:.45` — damit verblassten auch die Anschlusspunkte, während die Leitungen daran kräftig blieben. Das Gerät steht noch im Plan (samt seinen Leitungen), gehört aber nicht mehr zur Planung — s. AVP.istInaktiv. */ .wn.inaktiv .wn-bg { fill:var(--bg); } .wn.inaktiv .wn-rahmen { stroke-dasharray:5 3; } .wn.inaktiv .wn-bmk, .wn.inaktiv .wp-tx, .wn.inaktiv .wn-kicon { fill:var(--mut); } .wn.inaktiv .wn-hkt { fill:var(--warn); } .wn-strich { stroke:var(--mut); stroke-width:1; pointer-events:none; } /* ---------- Generische Plankomponente (Vorgabe Chris 16.08.2026) ---------- „nicht wie Geräteblöcke aussehen lassen, sondern etwas filigraner, damit es nicht nach Gerät aussieht." Unterschieden wird über die FLÄCHE, nicht über eine zusätzliche Farbe: ein Gerät ist eine Gerätefront (`--card`, gefüllter Kopf, kräftige Kante), eine Komponente liegt auf dem Blatt (`--bg`, kein Kopfbalken, Haarlinie). Farbe in der Fläche gehört in dieser App den Signalarten. Gestrichelt wäre falsch — das heißt hier „inaktiv". */ .wn.gen .wn-bg { fill:var(--bg); } .wn.gen .wn-rahmen { stroke:var(--bdr); stroke-width:1; } /* **`transparent`, NICHT `none`.** In SVG nimmt eine Fläche mit `fill:none` keine Zeiger-Ereignisse an — der Kopfbalken der Komponente war damit nur über seine Beschriftung greifbar. Wer daneben klickte, traf `.wn-bg` und löste weder Auswahl noch Ziehen aus: die Komponente „blieb dunkel", ließ sich aber bewegen, wenn man zufällig den Text erwischte (Rückmeldung Chris 16.08.2026). Optisch ist beides identisch. Gleiche Fehlerklasse wie `pointer-events:none` bei `.wp-dot` und dem Multicore-Strang — nur andersherum: dort fraß ein Element den Klick, hier reicht ihn keines weiter. */ .wn.gen .wn-hdbg { fill:transparent; } .wn.gen:hover .wn-hdbg { fill:var(--hover); } .wn.gen .wn-sep { stroke:var(--bdr); } .wn.gen .wn-typ { fill:var(--mut); font-weight:500; } .wn.gen .wn-kicon { fill:var(--mut); } .wn.gen .wp-tx { fill:var(--mut); } /* ---------- Herkunft am Geräteblock (Vorgabe Chris 16.08.2026, Gestalt seit 18.09.2026) ---------- Ein Bestandsgerät IST ein Gerät und behält die Blockform. Herkunft und Status kommen über Fläche, Linie und Muster, nicht über eine weitere Farbe — Farbe gehört den Signalarten, und ein S/W-Druck muss die Kennzeichnung noch tragen (Entwurfsboard 18.09.2026, Entwurf A): Nachtrag = 3-px-Akzentkante links im Kopf und Marke ▲ mit dem Nachtragsbereich; Bauseits = schraffierter Kopf auf `--card-2`, gedämpfte Schrift; Entfällt = s. `.wn.inaktiv`. Filigran wird nur, was gar kein Gerät ist (`.wn.gen`). */ .wn.hk-bauseits .wn-bg { fill:var(--card-2); } .wn.hk-bauseits .wn-bmk { fill:var(--mut); } .wn-schraff { pointer-events:none; } /* fill:url(#wschraff) steht inline — der PDF-Klon benennt es um */ .wn-schraff-l { stroke:var(--hover-bdr); stroke-width:1; } .wn-kante { fill:var(--acc); pointer-events:none; } .wn-marke path { fill:var(--acc); } .wn-marke text { font-family:var(--f-display); font-stretch:87.5%; font-size:8.5px; font-weight:700; fill:var(--on-acc); pointer-events:none; } .wn-hkt { font-family:var(--f-display); font-stretch:87.5%; font-size:8px; font-weight:600; letter-spacing:.08em; fill:var(--mut); pointer-events:none; } .wn.hk-nachtrag .wn-hkt { fill:var(--acc-t); } /* Symbolfeld links im Kopf: ein weißes Feld mit Haarlinie, das Symbol in Textfarbe */ .wn-ikf { fill:var(--card); stroke:var(--bdr); pointer-events:none; } .wn.gen .wn-ikf { fill:none; stroke:none; } /* Fußzeile: Ort · Rackplatz links, LV-Position des Nachtrags rechts — Kennzeichen, also Mono */ .wn-fuss { font-family:var(--f-mono); font-size:8.5px; fill:var(--mut); pointer-events:none; } /* Warnmarke an der Ecke — die Warnfarbe nur hier, nie in der Fläche */ .wn-warn { cursor:help; } .wn-warn circle { fill:var(--warn); } .wn-warn text { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; font-weight:700; fill:var(--on-acc); pointer-events:none; } /* Anschluss: frei = Ring in Blattfarbe der Karte, Doppelring bei zwei Leitungen, Richtung und PoE-Blitz ohne Klickfläche */ .wp-dot.frei { fill:var(--card); stroke-width:1.5; } .wn.hk-bauseits .wp-dot.frei { fill:var(--card-2); } .wn.inaktiv .wp-dot.frei { fill:var(--bg); } .wp-dot2 { fill:none; stroke-width:1.2; pointer-events:none; } .wp-dir { fill:var(--mut); pointer-events:none; } .wp-poe { stroke-width:1.6; pointer-events:none; opacity:.35; } .wp-poe.fliesst { opacity:1; } /* Netzanschluss, den PoE überflüssig macht: gedämpft, der Ring gestrichelt */ .wp.per-poe .wp-ring, .wp.per-poe .wp-dot { opacity:.45; stroke-dasharray:2 2; } .wn-fuss.poe-warnung, .wn-fuss.poe-fehler { fill:var(--warn); font-weight:600; } /* Unterzeile des Anschlusses (Steckertyp · IP) — die Zeile ist dafür 30 px hoch */ .wp-sub { font-family:var(--f-display); font-stretch:87.5%; font-size:8.5px; fill:var(--mut); pointer-events:none; font-variant-numeric:tabular-nums; } .wp:hover .wp-sub { fill:var(--txt); } .wp-leiste { stroke-width:.6; pointer-events:none; } /* Überfahren hebt den ganzen Block hervor — bei vielen Blöcken sieht man sonst nicht, welcher unter dem Zeiger liegt (Rückmeldung Chris 30.07.2026). */ .wn:hover .wn-rahmen { stroke:var(--acc); stroke-width:1.5; } .wn:hover .wn-hdbg { fill:var(--hover); } /* **Die Auswahl muss NACH den Sonderformen stehen.** `.wn.on .wn-rahmen` (oben) und `.wn.gen .wn-rahmen` haben dieselbe Spezifität — die spätere Regel gewann, und ein gewählter Bodentank behielt seine graue Haarlinie: er ließ sich verschieben, sah aber unmarkiert aus (Rückmeldung Chris 16.08.2026, „bleiben dunkel"). Dasselbe galt für Bestandsgeräte (`.hk`). Hier noch einmal mit höherer Spezifität, damit jede künftige Sonderform sie nicht erneut aushebelt. */ .wn.on .wn-rahmen, .wn.gen.on .wn-rahmen, .wn.hk.on .wn-rahmen, .wn.inaktiv.on .wn-rahmen { stroke:var(--acc); stroke-width:2; } .wn-hdbg { fill:var(--card-2); cursor:grab; } .wn-sep { stroke:var(--bdr); } /* Kopfzeilen seit 18.09.2026: die BMK zuerst, groß und fett — sie steht auf Etikett und in der Kabelliste —, der Typ als zweite Zeile in Grau (vorher umgekehrt). */ .wn-bmk { font-family:var(--f-mono); font-size:12.5px; font-weight:700; letter-spacing:.02em; fill:var(--txt); pointer-events:none; } .wn-typ { font-family:var(--f-display); font-stretch:87.5%; font-weight:400; font-size:11px; fill:var(--mut); pointer-events:none; } .wp-tx { font-size:11px; fill:var(--txt); pointer-events:none; } .wn-kicon { font-family:'tabler-icons'; font-size:18px; fill:var(--txt); pointer-events:none; } /* Anschlusspunkte: Ring erscheint beim Überfahren, im Verbindungsmodus an allen Zielen. Punkt/Ring/Text sind mausdurchlässig — sonst liegen sie über der Trefferfläche und erben den Greifhand-Zeiger der Zeichenfläche statt des Fadenkreuzes. */ .wp { cursor:var(--cur-plug); } .wp-hit { fill:transparent; } .wp-dot, .wp-ring, .wp-tx { pointer-events:none; } .wp-ring { opacity:0; stroke-width:1.5; } .wp-dot, .wp-ring, .wp-tx { transition:r .12s ease, opacity .12s ease; } .wp:hover .wp-ring { opacity:.45; } .wp:hover .wp-dot { r:6.5; } .wp:hover .wp-tx { fill:var(--acc); font-weight:600; } /* Im Verbindungsmodus: passende Ziele leuchten, unpassende bekommen ein rotes X */ #wir-svg.linking .wp.ok .wp-ring { opacity:.55; } #wir-svg.linking .wp.ok:hover .wp-ring { opacity:1; stroke-width:2.5; } #wir-svg.linking .wp.ok:hover .wp-dot { r:6.5; } #wir-svg.linking .wp.no { cursor:not-allowed; } #wir-svg.linking .wp.no .wp-dot { opacity:.3; } #wir-svg.linking .wp.no .wp-tx { fill:var(--mut); opacity:.55; } #wir-svg.linking .wp.no:hover .wp-tx { fill:var(--warn); opacity:1; font-weight:400; } .wp-no { stroke:var(--warn); stroke-width:2; stroke-linecap:round; pointer-events:none; } /* Im Verbindungsmodus gilt der Kabel-Zeiger überall — auch über Blöcken und leerer Fläche */ #wir-svg.linking, #wir-svg.linking .wn-hdbg, #wir-svg.linking .wp { cursor:var(--cur-plug); } .wp.act .wp-dot { r:7; } .wp.act .wp-ring { opacity:1; stroke:var(--acc); stroke-width:2.5; r:9; } .wp.act .wp-tx { fill:var(--acc); font-weight:700; } .wn-x circle { fill:transparent; } .wn-x path { stroke:var(--mut); stroke-width:1.4; fill:none; } .wn-x { cursor:pointer; opacity:0; } .wn:hover .wn-x { opacity:1; } .wn-x:hover path { stroke:var(--warn); } .we { fill:none; stroke-width:2; } /* ---------- Gewählte Leitung pulsiert, beide Anschlüsse leuchten mit ---------- Vorgabe Chris 16.08.2026: „damit auf den ersten Blick erkennbar ist, wo die Verbindung hingeht." Vorher war die gewählte Leitung nur dicker (3,5 statt 2 px) — bei vielen gleichfarbigen Leitungen sagt das wenig, und an einem Block mit 40 Anschlüssen findet man das Ende ohne Markierung gar nicht. **Animiert wird die Strichbreite, nicht die Farbe**: die Farbe der Leitung IST ihre Signalart (s. §Design) und darf nicht wandern. Der Halo darunter liegt in Akzentfarbe und ist die eigentliche Bewegung; er hat `pointer-events:none`, sonst nähme er der Trefferfläche den Klick (die bekannte Falle von `.wp-dot` und dem Multicore-Strang). */ @keyframes we-puls { 0%,100% { stroke-width:3.5; } 50% { stroke-width:5.5; } } @keyframes wp-puls { 0%,100% { r:7.5; opacity:.9; } 50% { r:11; opacity:.35; } } @keyframes wsv-puls { 0%,100% { stroke-width:1.5; } 50% { stroke-width:3; } } .we.on { stroke-width:3.5; animation:we-puls 1.4s ease-in-out infinite; } /* Anschluss am Ende einer gewählten Leitung: der Ring pulsiert, der Punkt bleibt ruhig — zwei bewegte Kreise übereinander flimmern. */ .wp.hl .wp-ring { opacity:.9; stroke-width:2.5; animation:wp-puls 1.4s ease-in-out infinite; } .wp.hl .wp-dot { r:6.5; } .wp.hl .wp-tx { fill:var(--acc); font-weight:700; } .wp.hl .wp-grp, .wp.hl .wp-grp2 { stroke:var(--acc); } /* Fähnchen des Seitenverweises — dort gibt es nur EIN Ende im Plan, gerade da hilft es. */ .wsv.on .wsv-bg { animation:wsv-puls 1.4s ease-in-out infinite; } /* `prefers-reduced-motion` schaltet global nur `transition` ab (Zeile 33) — Animationen müssen eigens gestoppt werden, sonst pulsiert es weiter. Die Hervorhebung bleibt: sie ist die Information, die Bewegung nur ihre Verstärkung. */ @media (prefers-reduced-motion:reduce) { .we.on, .wp.hl .wp-ring, .wsv.on .wsv-bg { animation:none; } .we.on { stroke-width:4.5; } .wp.hl .wp-ring { opacity:1; r:9.5; } } /* Trefferfläche etwas breiter als die Leitung selbst — bei 2 px Strich ist sonst kaum zu treffen. 16 px bei 20 px Bahnabstand lässt zwischen zwei Leitungen noch 4 px frei. */ .we-hit { fill:none; stroke:transparent; stroke-width:16; cursor:pointer; } /* Konfektionierung an den Leitungsenden, Nummer/Länge in der Mitte */ .we-kon { font-family:var(--f-mono); font-size:9.5px; fill:var(--mut); pointer-events:none; } .we-mid { pointer-events:none; } .we-mid rect { fill:var(--card); stroke:var(--bdr); } .we-mid text { font-family:var(--f-mono); font-size:10px; } .we-mid.on rect { stroke:var(--acc); } .we-mid.on text { font-weight:700; } /* Griff auf dem Querstück: verschiebt die Leitungsführung, Doppelklick setzt sie zurück */ .we-h rect { fill:var(--card); stroke:var(--acc); stroke-width:1.5; } .we-h path { stroke:var(--acc); stroke-width:1.5; fill:none; } .we-h.mid { cursor:ew-resize; } .we-h.lane { cursor:ns-resize; } /* Hilfslinien beim Verschieben: gestrichelt = Flucht, durchgezogen mit Endstrichen = Abstand */ .wg-layer { pointer-events:none; } .wg { stroke:var(--acc); stroke-width:1; stroke-dasharray:5 4; fill:none; opacity:.9; } .wg-mass { stroke:var(--acc); stroke-width:1; fill:none; opacity:.9; } .wg-tx { font-family:var(--f-mono); font-size:10px; fill:var(--acc); } /* Bereichsrahmen und Freitext — Zeichenebene, liegt UNTER Leitungen und Blöcken. Die Fläche selbst nimmt keine Klicks an (sonst ließe sich im Rahmen weder ziehen noch ein Auswahlrahmen aufspannen); angefasst wird an Titelleiste und Eckgriff. */ #wir-svg.zeichnen { cursor:crosshair; } #wir-svg.greifen { cursor:grab; } /* Leertaste gedrückt: Ansicht verschieben */ .dlg-text { margin:0 0 4px; white-space:pre-line; line-height:1.5; } .dlg-text[hidden] { display:none; } .wr-bg { fill:var(--acc); fill-opacity:.03; stroke:var(--hover-bdr); stroke-width:1; stroke-dasharray:7 5; pointer-events:none; } .wr.on .wr-bg { stroke:var(--acc); stroke-dasharray:none; } /* Beim Aufziehen eines Auswahlrahmens: der Bereich zeigt sofort, dass er mitkommt — er wird aber nur mitgenommen, wenn er VOLLSTÄNDIG im Auswahlrahmen liegt (s. wiring.js). */ .wr.tr .wr-bg { stroke:var(--acc); stroke-width:2; stroke-dasharray:none; } .wr.tr .wr-kopf { stroke:var(--acc); } .wr-kopf { fill:var(--card-2); stroke:var(--hover-bdr); stroke-width:1; cursor:grab; } .wr.on .wr-kopf { stroke:var(--acc); } .wr-tx { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; fill:var(--mut); cursor:grab; } .wr.on .wr-tx { fill:var(--acc); } /* Griffe an allen Kanten und Ecken. Die Kantenstreifen sind unsichtbar (sie liegen auf der Rahmenlinie), die Eckpunkte werden bei Auswahl sichtbar — wie in jedem Zeichenprogramm. */ .wr-rand { fill:transparent; cursor:pointer; } .wr-kante { fill:transparent; } .wr-kante.n, .wr-kante.s { cursor:ns-resize; } .wr-kante.w, .wr-kante.e { cursor:ew-resize; } .wr-ecke { fill:transparent; } .wr-ecke.nw, .wr-ecke.se { cursor:nwse-resize; } .wr-ecke.ne, .wr-ecke.sw { cursor:nesw-resize; } /* Eckpunkte gibt es nur am gewählten Rahmen — dort dann deutlich sichtbar */ .wr-eckpunkt { fill:var(--acc); stroke:var(--acc); stroke-width:1.5; pointer-events:none; } .wt-tx { font-family:var(--f-body); font-size:12.5px; fill:var(--txt); pointer-events:none; } .wt-hit { fill:transparent; cursor:grab; } .wt.on .wt-hit { fill:var(--acc); fill-opacity:.08; stroke:var(--acc); stroke-width:1; } /* Auswahlrahmen über Anschlüsse (Umschalt + Ziehen) */ .wsel { fill:var(--acc); fill-opacity:.08; stroke:var(--acc); stroke-width:1; stroke-dasharray:4 3; } /* Live-Hervorhebung während des Aufziehens: was der Rahmen berührt, zeigt es sofort */ .we.tr { stroke-width:4; } .we.ader.tr { stroke-width:3.5; } .wn.tr .wn-rahmen { stroke:var(--acc); stroke-width:2.5; } .wn.tr .wn-hdbg { fill:var(--hover); } .wp.tr .wp-dot { r:6.5; } .wp.tr .wp-ring { opacity:1; stroke:var(--acc); stroke-width:2.5; r:9; } .wsel.ports { stroke-dasharray:2 3; } /* Anschlussauswahl: feiner gestrichelt */ /* Anschlussgruppen: Pfeil zum Ein-/Ausklappen, eingeklappte Zeile, Mehrfachauswahl */ /* ---- Block-Editor der Verdrahtung (seit 03.10.2026, wiring.js openBlock) ---- Der Block ist dasselbe Markup wie im Plan (blockHtml), doppelt so groß; Entfernen-Kreuz und Klapp-Pfeile gibt es im Editor nicht, der Kopf ist kein Griff. */ .block-modal { max-width:1060px; } .be-bd { flex-direction:row; gap:16px; min-height:320px; } .be-titel { font-weight:400; color:var(--mut); margin-left:4px; } .be-links { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; } .be-zoom { display:flex; align-items:center; gap:5px; } .be-zoomwert { font-size:11.5px; color:var(--mut); min-width:44px; text-align:right; font-variant-numeric:tabular-nums; } .be-zoomtip { font-size:11px; color:var(--mut); margin-left:auto; } /* Feste Höhe, damit „Einpassen" ein Maß hat, an dem es sich messen kann. */ .be-buehne { flex:1 1 auto; overflow:auto; height:min(70vh, 780px); background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r); position:relative; touch-action:none; user-select:none; outline:none; /* Der Block steht mittig, solange er Platz hat; wird er größer als die Bühne, beginnt er oben links (`safe`), sonst wäre sein Anfang nicht erreichbar. */ display:grid; place-items:safe center; } .be-griff { fill:transparent; cursor:ew-resize; } .be-griff:hover { fill:var(--acc); fill-opacity:.25; } .be-breite { display:flex; align-items:center; gap:6px; } .be-breite .mono { font-size:12px; min-width:52px; text-align:center; font-variant-numeric:tabular-nums; } .be-buehne:focus-visible { box-shadow:inset 0 0 0 2px var(--acc); } .be-svg { display:block; } .be-svg .wn-x, .be-svg .wg-tog { display:none; } .be-svg .wn-hdbg { cursor:default; } .be-svg .wp { cursor:grab; } .be-svg .wp:active { cursor:grabbing; } .be-svg .wp.be-zieht { opacity:.3; } .wp-zeile { fill:transparent; } .be-svg .wp:hover .wp-zeile { fill:var(--hover); } .be-bd { user-select:none; } .be-bd .inp { user-select:text; } .be-ghost { pointer-events:none; opacity:.8; } .be-ziel { fill:var(--acc); fill-opacity:.12; stroke:var(--acc); stroke-width:1; pointer-events:none; } .be-ziel-linie { stroke:var(--acc); stroke-width:2.5; stroke-linecap:round; pointer-events:none; } .be-seite { flex:none; width:280px; display:flex; flex-direction:column; gap:10px; } .be-seite .field { display:flex; flex-direction:column; gap:4px; } .be-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .be-h { margin:4px 0 0; font-family:var(--f-display); font-stretch:87.5%; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--mut); padding-bottom:4px; border-bottom:1px solid var(--bdr); } .be-knopfe { display:flex; flex-wrap:wrap; gap:6px; } .be-hinweis { margin:0; font-size:11.5px; line-height:1.45; color:var(--mut); } .be-ft .sp { flex:1; } .be-ft label.chk { color:var(--mut); } .be-ft label.chk:has(input:disabled) { opacity:.55; } @media (max-width: 900px){ .be-bd { flex-direction:column; } .be-seite { width:auto; } } .wg-tog circle { fill:var(--card-2); stroke:var(--bdr); } .wg-tog path { stroke:var(--mut); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; } .wg-tog { cursor:pointer; opacity:0; } .wn:hover .wg-tog, .wg-tog.zu { opacity:1; } .wg-tog:hover circle { stroke:var(--acc); } .wg-tog:hover path { stroke:var(--acc); } .wp-grp, .wp-grp2 { pointer-events:none; } .wp-grp2 { stroke-width:1.6; } .wp-tx.grp { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; } .wp.sel .wp-dot { r:6.5; } .wp.sel .wp-ring { opacity:1; stroke:var(--acc); stroke-width:2.5; r:9; } .wp.sel .wp-tx { fill:var(--acc); font-weight:700; } .we.mc { stroke-width:4; } .we.mc.on { stroke-width:5.5; } /* Multicore: der Strang ist deutlich dicker als eine Ader und trägt eine Innenlinie, damit er auch in Graustufen und bei kleinem Zoom als Sammelleitung lesbar bleibt. */ /* Der Strang ist eine MASSIVE Linie, kein Mantel mit heller Innenader. Die Innenader (5,5 px Mantel + 1,6 px Blattfarbe) ergab am Bild zwei dünne Parallelen mit Lücke — das liest sich wie zwei Kabel nebeneinander, nicht wie eines (Chris 02.08.2026). 9 px vollflächig waren umgekehrt ein Balken (31.07.2026); 6 px trifft es: dreifache Aderstärke, aber keine Fläche. Dass hier gebündelt ist, sagen jetzt der Fächer und die Abbindungen, nicht die Strichart. */ /* Der sichtbare Strang liegt ÜBER seiner Trefferfläche und muss sie durchlassen — sonst geht der Klick genau in der Strangmitte ins Leere und der Strang wählt seine Adern nicht aus. Dasselbe Muster wie bei `.wp-dot`/`.wp-ring` an den Anschlusspunkten. */ .we-trunk, .we-bund { pointer-events:none; } .we-trunk { fill:none; stroke-width:6; stroke-linecap:butt; } .we-trunk.on { stroke-width:8; } /* Abbindung: feiner Querstrich in Blattfarbe ÜBER dem Strang — eine Einschnürung, so wie ein Kabelbinder aussieht. In Signalfarbe wäre er auf dem Strang unsichtbar. */ .we-bund { stroke:var(--bg); stroke-width:2; stroke-linecap:butt; fill:none; } /* **Gefüllte Spitze, nicht Haarlinie** (seit 16.08.2026): bei 2 px Leitungsbreite trug ein 1,8-px-Winkel zu wenig, um überhaupt als Pfeil gelesen zu werden. Die Farbe kommt inline aus der Signalart. */ .we-pf { pointer-events:none; } .we-pf path { stroke:none; } /* Auf dem Multicore-Strang liegt der Pfeil IM Kabel — in Blattfarbe, sonst verschwindet er im gleichfarbigen Strang (wie die Abbindung). CSS schlägt das inline-Attribut. */ .we-pf.mc path { fill:var(--bg); } /* Seitenverweis: Fähnchen mit Spitze nach außen */ .wsv { cursor:move; } .wsv-bg { fill:var(--card); stroke-width:1.5; } .wsv.on .wsv-bg { stroke-width:2.5; } .wsv-tx { font-family:var(--f-mono); font-size:10px; pointer-events:none; } .wsv-sub { font-family:var(--f-body); font-size:9.5px; fill:var(--mut); pointer-events:none; } .we.ader { stroke-width:2; } .we-hit.mc { stroke-width:16; } .we-mid.mc rect { stroke-width:1.5; } .we-mid.mc text { font-weight:700; } /* Legende: Farbtafel der Signalarten UND Erklärung der Zeichen (Vorgabe Chris 16.08.2026). Sie liegt über der Zeichenfläche und darf deshalb keine Klicks annehmen. */ /* Legende: **rechts, hochkant** (Vorgabe Chris 16.08.2026). Unten links lag sie über der Zeichenfläche und verdeckte genau die Ecke, in der man arbeitet; als schmale Spalte am rechten Rand stört sie nur dort, wo ohnehin das Eigenschaften-Panel aufgeht. **Und dann legt sich das Panel darüber, statt die Legende zur Seite zu schieben** (Vorgabe Chris 23.08.2026). Ausweichen hieß: sie wandert 332 px nach links und verdeckt dort einen Bereich, in dem gezeichnet wird — sie tauschte also eine Verdeckung gegen eine schlechtere. Verdeckt sein ist für eine Legende außerdem harmlos: sie erklärt Farben, die man beim Bearbeiten eines einzelnen Objekts gerade nicht nachschlagen muss, und mit dem Schließen des Panels ist sie wieder da. Sie nimmt keine Klicks an. */ .wir-legend { position:absolute; right:12px; top:12px; width:206px; max-height:calc(100% - 24px); overflow:auto; font-family:var(--f-body); font-size:11px; color:var(--mut); background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:7px 10px 9px; pointer-events:none; z-index:2; } .wir-legend:empty, .wir-legend[hidden] { display:none; } /* Einklappen und Schließen an der Legende (26.09.2026) — oben rechts in ihrer Kopfzeile. */ /* Die Legende selbst ist durchklickbar (pointer-events:none, darunter wird gezeichnet) — nur die beiden Knöpfe nehmen Klicks an. */ .wir-legend .wl-knoepfe { position:absolute; top:4px; right:4px; display:flex; gap:2px; pointer-events:auto; } .wir-legend .wl-knoepfe .btn { pointer-events:auto; } .wir-legend .wl-knoepfe .btn { width:22px; height:22px; min-height:0; padding:0; font-size:13px; } .wir-legend.zu .wl-body { display:none; } .wir-legend.zu .wl-hd { margin-bottom:0; } #wir-legend .wl-hd { padding-right:50px; } /* Suchfeld in der Werkzeugzeile der Verdrahtung (26.09.2026). */ .toolbar .wir-such { width:190px; height:32px; flex:0 1 190px; min-width:120px; } .wir-legend .wl-hd { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--txt); margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--bdr); } .wir-legend .wl-body { display:flex; flex-direction:column; gap:8px; } .wir-legend .wl-col { display:flex; flex-direction:column; gap:4px; } .wir-legend .wl-col + .wl-col { padding-top:7px; border-top:1px solid var(--bdr); } .wir-legend .wl-col > span { display:flex; align-items:flex-start; gap:7px; line-height:1.3; } .wir-legend i { width:10px; height:10px; border-radius:var(--r-xs); flex:none; margin-top:2px; } .wir-legend .wl-zeichen svg { flex:none; color:var(--txt); margin-top:1px; } /* Im PDF liegt sie waagerecht im Fußstreifen — dort ist Breite da und Höhe knapp. */ .pdf-blatt .wir-legend { position:static; width:auto; max-height:none; overflow:visible; } .pdf-blatt .wir-legend .wl-body { flex-direction:row; gap:16px; } .pdf-blatt .wir-legend .wl-col + .wl-col { padding-top:0; border-top:none; padding-left:14px; border-left:1px solid var(--bdr); } /* ---------- Pillen für Status und Herkunft (seit 16.08.2026) ---------- **Eine Form für beide** (Rückmeldung Chris): es sind zwei Einordnungen derselben Zeile, sie dürfen nicht unterschiedlich aussehen. Jeder Wert bekommt eine Pille, auch die Regelfälle „aktiv" und „Neu (LV)" — gedämpfter Text ohne Pille las sich wie ein Feld, das jemand vergessen hat zu füllen. Getönte Fläche + Kontur in derselben Farbe, damit sie in hell wie dunkel tragen. Das ist die eine Stelle, an der Farbe NICHT aus AVP.SIGNALS kommt — sie beschreibt hier den Zustand der Zeile, nicht ein Signal, und liegt deshalb auch nicht in der Zeichenfläche. */ /* Die Herkunft-Rückfrage: **der Inhalt darf nicht scrollen**. Sie hat drei Felder, aber ein aufgeklapptes Auswahlfeld braucht Platz nach unten — in einem scrollenden `.modal-bd` wurde es abgeschnitten und man musste eine Bildlaufleiste bedienen, um „Bauseits" überhaupt zu sehen (Rückmeldung Chris 16.08.2026, am Bild). `overflow:visible` lässt die Liste aus dem Kasten heraushängen, `min-height` hält darunter Luft frei. */ /* Herkunft-Rückfrage (bis 16.08.2026 `#wir-hk-modal` — jetzt neutral, weil sie auch die Rackplanung stellt). **`overflow:visible` ist Pflicht**: in einem scrollenden Dialogkörper wird das aufgeklappte Auswahlfeld abgeschnitten, und man müsste eine Bildlaufleiste bedienen, um „Bauseits" überhaupt zu sehen. Genau das passierte beim Umbenennen der ID ein zweites Mal — die Regel hing an der alten ID und griff nicht mehr. */ #hk-modal { max-width:760px; } #hk-modal .modal-bd { overflow:visible; min-height:230px; } #hk-modal .frm-grid { align-items:start; } /* ---------- Status und Herkunft: die ZELLE trägt die Farbe, nicht eine Pille ---------- Vorgabe Chris 16.08.2026: „Die Pillen sollen weg (Status u. Herkunft); es reicht, wenn die Zelle und der Text die Farbe erhält." Die Pillenform kam am selben Tag und war gut gemeint — in einer Liste mit dreihundert Zeilen ergibt ein Etikett je Zeile aber ein Muster aus Kapseln statt einer Tabelle. Die getönte Zelle wirkt über die volle Spaltenbreite und ist im Überfliegen schneller zu erfassen. Beide Spalten sind bearbeitbar; die Tönung darf deshalb die Markierung der Zelle in Bearbeitung nicht überdecken — `td.cell-ed` gewinnt weiter unten. */ :root { --pill-neu:#1565D0; --pill-neu-bg:#E7EFFA; --pill-nach:#8F5400; --pill-nach-bg:#FBF0DF; /* 3,76:1 auf eigener Flaeche war zu wenig (D-04) */ --pill-baus:#5B6470; --pill-baus-bg:#EDEFF1; } html[data-theme="dark"] { --pill-neu:#7EB0EE; --pill-neu-bg:#16263A; --pill-nach:#E2A64A; --pill-nach-bg:#332714; --pill-baus:#A2ABB6; --pill-baus-bg:#262A2F; } /* Ganze Zeile dezent tönen (Vorgabe Chris). Der Ton liegt auf den ZELLEN — ein Hintergrund am wird bei border-collapse nur teilweise gezeichnet (bekannte Falle, s. Anschlussliste). */ /* Deckend gemischt (mit `--card` statt `transparent`, seit 17.09.2026): fixierte Zellen brauchen eine deckende Fläche, sonst scheinen die gescrollten Spalten durch. */ .tbl tr.zhk-nachtrag > td { background:color-mix(in srgb, var(--pill-nach) 7%, var(--card)); } .tbl tr.zhk-bauseits > td { background:color-mix(in srgb, var(--pill-baus) 9%, var(--card)); } /* Der Text steht in Bahnschrift-Versalien wie zuvor auf der Pille — nur eben ohne Kapsel. Das hält den Rang der Angabe (Einordnung, kein Messwert) und unterscheidet sie vom Fließtext der Bezeichnung daneben. **Diese Regeln stehen NACH der Zeilentönung**, sonst überdeckt sie den Zellton: beide haben dieselbe Spezifität, und bei Gleichstand gewinnt die spätere. Sichtbar würde das an einem Gerät, das zugleich inaktiv und bauseits ist — dort ginge ausgerechnet das Rot verloren, das sagt, dass die Zeile nicht mehr zur Planung zählt. Gleiche Falle wie bei der Auswahlmarkierung der Geräteblöcke in der Verdrahtung (16.08.2026). */ .tbl td.zst, .tbl td.zhkz { font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0; } /* „aktiv" ist seit 18.10.2026 grün (Vorgabe Chris, Richtung D: Status auf einen Blick) — vorher gedämpft, weil Farbe nur der Ausnahme gehören sollte (Entwurf 17.09.2026). Ohne Fläche: nur die Schrift, damit die Spalte kein Teppich wird; inaktiv bleibt rot mit Fläche. */ .tbl tr > td.zst-aktiv { color:var(--ok); } .tbl tr > td.zst-inaktiv { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent); } .tbl tr > td.zhkz-neu { color:var(--pill-neu); background:var(--pill-neu-bg); } .tbl tr > td.zhkz-nachtrag { color:var(--pill-nach); background:var(--pill-nach-bg); } .tbl tr > td.zhkz-bauseits { color:var(--pill-baus); background:var(--pill-baus-bg); } /* ---------- Das Dropdown IN einer gefärbten Zelle ---------- Die Zelle ist selbst das `.csel`; Feld und Optionsliste sind ihre Kinder und **erben damit ihre Farbe**. Das ergab zwei Fehler auf einmal (Rückmeldung Chris 17.08.2026, am Bild): in einer aktiven Zelle waren BEIDE Optionen grün, in einer inaktiven beide rot — die Liste zeigte also den Zustand der Zeile statt der Bedeutung der Auswahl. Gemessen: die Option „aktiv" trug in der inaktiven Zelle `rgb(228,99,95)`. Jede Option trägt deshalb ihre EIGENE Bedeutungsfarbe. Das ist auch der Sinn der Sache — man wählt hier eine Bedeutung, und die soll man vor dem Klicken sehen. */ .tbl td.zst .csel-opt, .tbl td.zhkz .csel-opt { color:var(--txt); } .tbl td.zhkz .csel-opt[data-v="neu"] { color:var(--pill-neu); } .tbl td.zst .csel-opt[data-v="aktiv"] { color:var(--ok); } .tbl td.zst .csel-opt[data-v="inaktiv"] { color:var(--warn); } .tbl td.zhkz .csel-opt[data-v="nachtrag"] { color:var(--pill-nach); } .tbl td.zhkz .csel-opt[data-v="bauseits"] { color:var(--pill-baus); } /* Die ausgewählte Option wird über Fläche und Fettung markiert, NICHT über die Akzentfarbe: sonst überschriebe der Akzent genau die Bedeutungsfarbe, um die es hier geht (und rote Schrift auf türkisem Grund wäre ohnehin unlesbar). */ .tbl td.zst .csel-opt.sel, .tbl td.zhkz .csel-opt.sel { background:var(--hover); font-weight:600; } /* **Die Liste muss DECKEND sein.** Sie ist nur so breit wie die schmale Statusspalte und ragt über die nächste Tabellenzeile; die Optionen selbst sind flächenlos (`background:none`), und die getönte Zelle darunter schien durch — im Bild las sich das als durchsichtiges Dropdown. Deshalb hier ein eigener, undurchsichtiger Grund statt des geerbten, dazu etwas mehr Schatten, damit die Liste als eigene Ebene über der Tabelle erkennbar bleibt. */ .tbl td.cell-ed .csel-pop { background:var(--card); box-shadow:var(--sh-2); } .tbl td.cell-ed .csel-opt { background-color:transparent; } .tbl td.cell-ed .csel-opt:hover { background-color:var(--hover); } .tbl tr.zhk:hover > td { background:var(--hover); } /* Ansichtsleiste: feste Knopfbreite, sonst springt sie beim Umschalten (aktiv = fetter, Anzahl ändert sich). */ /* `.vt-n` (Zählmarke) und `.vt-fix` (feste Knopfbreite) gehörten den drei Sicht-Knöpfen der Geräteliste („Alle / Neu (LV) / Bauseits", 16.08.–13.09.2026). Die Knöpfe sind ausgebaut (s. Kopf von devices.js), die Regeln mit ihnen — eine Regel ohne Verwendung ist eine Absichtserklärung (dieselbe Lehre wie bei den Token-Skalen, D-14/D-15). */ /* `z-index:3` liegt ÜBER der Legende (2) — sie steht am selben rechten Rand, und das Panel soll sie überblenden statt sie wegzuschieben (s. `.wir-legend`). Ohne diese eine Zahl gewann die Legende: sie ist absolut positioniert mit z-index, das Panel nur `relative` ohne. */ .wir-props { position:relative; z-index:3; flex:0 0 320px; width:320px; background:var(--card); border-left:1px solid var(--bdr); padding:14px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; } /* ---------- Status und Rückmeldungen IN der Zeichenfläche (seit 23.08.2026) ---------- Früher der Untertitel unter der Überschrift — er kostete in jeder Ansicht eine Zeile für eine Angabe, die man beim Zeichnen nebenbei liest (Vorgabe Chris: erst für die Verdrahtung, dann „Statuszeilen bei Racks und Grundriss auch in die Zeichenfläche"). Der Stapel liegt unten links, weil dort nichts liegt: Legende oben rechts, Eigenschaften-Panel und Palette rechts. Er kostet KEINE Layouthöhe (`position:absolute`) und ist leer unsichtbar — deshalb springt die Zeichenfläche nicht, wenn eine Meldung kommt oder geht. Keine Klicks: darunter wird gezeichnet. Mehrere Streifen stapeln sich nach OBEN (`column-reverse`), damit der Dauerstatus unten an seiner Stelle stehen bleibt und die kurzlebige Rückmeldung darüber erscheint. */ .stage-msgs { position:absolute; left:12px; bottom:12px; z-index:2; display:flex; flex-direction:column-reverse; gap:6px; align-items:flex-start; max-width:min(62%, 680px); pointer-events:none; } .stage-msg { font-size:12px; color:var(--mut); background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:5px 10px; box-shadow:var(--sh); } .stage-msg:empty, .stage-msg[hidden] { display:none; } /* Eine Handlungsanweisung („Wand zeichnen: Anfang und Ende anklicken") ist keine Statusangabe — sie trägt die Akzentkante und volle Textfarbe, damit man sie vom Dauerstatus unterscheidet. */ .stage-msg.tun { border-left:3px solid var(--acc); color:var(--txt); padding:7px 11px; } .wir-props .wp-hd { display:flex; align-items:center; gap:8px; font-size:14px; } .wir-props .wp-hd .dot { width:10px; height:10px; border-radius:50%; } .wir-props .wp-hd .x { margin-left:auto; } .wir-props .wp-route { font-family:var(--f-mono); font-size:11.5px; color:var(--mut); } .wir-props .wp-warn { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--warn); } .wir-props .wp-ft { display:flex; justify-content:flex-end; } .wir-props .wp-tools { display:flex; gap:4px; align-items:center; flex-wrap:wrap; } .wir-props .wp-sep { width:1px; height:20px; background:var(--bdr); margin:0 4px; } /* display:flex würde das hidden-Attribut aushebeln — deshalb hier explizit ausblenden */ .wir-empty[hidden], .wir-props[hidden] { display:none; } .wir-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--mut); text-align:center; pointer-events:none; } .wir-empty i { font-size:44px; opacity:.5; margin-bottom:8px; } /* Der Picker ist eine Liste mit fünf Spalten, kein Formular — mit den 560 px des Standard-Modals blieben für die Bezeichnung 52 px übrig und jeder Name war abgeschnitten (Rückmeldung Chris 16.08.2026, am Bild geprüft). */ .modal.pick-modal { max-width:940px; } /* Die Auswahlliste (.wir-pick*) gehört NICHT allein der Verdrahtung — sie trägt auch den Verknüpfungs-Dialog der Geräteliste. Ein zweiter Satz Klassen liefe beim ersten Eingriff auseinander; die Namen bleiben, weil Klassennamen hier nie umbenannt werden. */ .wir-picklist { display:flex; flex-direction:column; gap:2px; max-height:52vh; overflow-y:auto; } /* Gerät hinzufügen der Geräteliste: feste Höhe, damit der Dialog beim Suchen nicht springt */ #ov-ger-stamm .modal { height:min(800px, 92vh); } #ov-ger-stamm .modal-bd { flex:1; min-height:0; overflow:hidden; } #ov-ger-stamm .marken, #ov-ger-stamm .grp-leiste, #ov-ger-stamm .search, #ger-pick-hinweis { flex:none; } #ger-pick-list { flex:1; min-height:0; max-height:none; } .wir-pick { display:flex; align-items:center; gap:12px; width:100%; padding:7px 9px; border:none; background:none; border-radius:var(--r); text-align:left; } .wir-pick:hover { background:var(--hover); } .wir-pick .wp-id { font-family:var(--f-mono); font-size:12px; color:var(--mut); flex:0 0 82px; } /* Die BEZEICHNUNG ist die Spalte, nach der man sucht — sie bekommt doppelt so viel Rest wie Fabrikat/Typ und schrumpft nie unter eine lesbare Breite. `min-width:0` ist Pflicht, sonst verweigert ein Flex-Element das Schrumpfen und die Ellipsis greift nie. */ .wir-pick .wp-nm { flex:2 1 0; min-width:150px; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wir-pick .wp-ct { font-family:var(--f-mono); font-size:11px; color:var(--mut); flex:0 0 84px; text-align:right; } /* Fabrikat + Typ gehören in die Zeile: BMK und Bezeichnung allein reichen nicht, wenn eine Anlage zwanzig gleich benannte Deckenlautsprecher hat (Vorgabe Chris 16.08.2026). */ .wir-pick .wp-typ { font-family:var(--f-mono); font-size:11px; color:var(--mut); flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wir-pick .wp-rolle { font-family:var(--f-display); font-stretch:87.5%; font-size:9.5px; text-transform:none; letter-spacing:0; color:var(--mut); border:1px solid var(--bdr); border-radius:var(--r); padding:1px 5px; min-width:46px; text-align:center; } .wir-picksep { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--mut); margin:10px 0 3px; padding-bottom:3px; border-bottom:1px solid var(--bdr); } .wir-picklist .wir-picksep:first-child { margin-top:0; } /* Editor für generische Komponenten: Anschlussliste als schmale Tabelle, damit vier Angaben je Zeile nebeneinander stehen und nicht untereinander. */ #wir-komp-modal .k-ports { width:100%; margin:10px 0 4px; } #wir-komp-modal .k-ports th { font-size:10.5px; } #wir-komp-modal .k-ports td { padding:3px 6px; } #wir-komp-modal .k-ports .inp.sm { padding:3px 6px; font-size:12.5px; } #wir-komp-modal .k-neu { padding-top:8px; border-top:1px solid var(--bdr); } .cat-modal .frm-grid .w2 { grid-column:span 2; } .cat-modal .frm-grid .w4 { grid-column:span 4; } @media (max-width:900px) { .cat-modal .frm-grid .w2, .cat-modal .frm-grid .w4 { grid-column:span 6; } } /* display:flex/grid hebeln das hidden-Attribut aus (bekannter Fallstrick, s. .wir-empty). Betrifft alle Buttons, die per hidden ein-/ausgeblendet werden (Löschen in den Modals), und die Rack-Felder im Ort-Modal. */ .btn[hidden], .frm-grid[hidden] { display:none; } /* ---------- Planblatt für den PDF-Druck (seit 16.08.2026) ---------- Gedruckt wird über den Browser: ein Blatt in DIN-Größe, Rahmen mit breiterem Heftrand links (ISO 5457), Schriftfeld unten rechts (ISO 7200). Das ergibt ein Vektor-PDF mit auswählbarem Text — ohne PDF-Bibliothek im Vendor-Ordner. Das Blatt trägt die HELLE Palette fest, unabhängig vom Thema der App: die Farbmarken sind auf `html[data-theme]` definiert, und im dunklen Thema wäre die Schrift hell — auf Papier also unsichtbar. Ein Plan wird auf Weiß gedruckt, immer. **Das Blatt hängt an der KLASSE `.pdf-blatt`, nicht an der id** (seit 13.09.2026): der PDF-Dialog zeigt dasselbe Markup verkleinert als Druckvorschau (`AVP.planVorschau`), und die Vorschau muss auf dem Bildschirm genauso aussehen wie das Blatt im Druck — sonst zeigt sie etwas anderes, als herauskommt. Nur die id `#pdf-blatt` bleibt dem Druckexemplar am Ende von ``: sie ist auf dem Schirm unsichtbar und im Druck das Einzige, was bleibt. */ #pdf-blatt { display:none; } @media print { html, body { background:#fff !important; } body > *:not(#pdf-blatt) { display:none !important; } #pdf-blatt { display:block; margin:0; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; } } .pdf-blatt { --bg:#FFFFFF; --card:#FFFFFF; --card-2:#F4F5F4; --txt:#111316; --mut:#5C6066; --sig-strom:#3A3A3A; --bdr:#B9BDBC; --acc:#26788E; --acc-l:#E7F2F5; --on-acc:#FFFFFF; --hover:#F0F2F1; --warn:#B3261E; --ok:#1B7A35; --gelb:#8A5300; --ok-f:#2E9E4F; --gelb-f:#D99000; --rot-f:#DE3B30; --aus-f:#9AA1AA; --auf-st:#FFFFFF; position:relative; background:#fff; color:var(--txt); overflow:hidden; font-family:var(--f-body); font-size:14px; } .pdf-blatt .pdf-rahmen { position:absolute; border:.6mm solid var(--txt); display:flex; flex-direction:column; } .pdf-blatt .pdf-zeichnung { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3mm; } .pdf-blatt .pdf-fuss { display:flex; align-items:stretch; border-top:.3mm solid var(--txt); } /* Die Legende steht NEBEN dem Schriftfeld, nicht in der Zeichnung: dort verdeckte sie regelmäßig genau die untere linke Ecke des Plans. */ .pdf-blatt .pdf-legende { flex:1; padding:2mm 3mm; overflow:hidden; } .pdf-blatt .pdf-legende .wir-legend { position:static; max-width:none; border:none; padding:0; background:none; display:block; } .pdf-blatt .pdf-kopf { border-left:.3mm solid var(--txt); padding:2mm 3mm; display:flex; flex-direction:column; gap:.6mm; } .pdf-blatt .pk-firma { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:3.4mm; text-transform:uppercase; letter-spacing:.08em; display:flex; align-items:center; justify-content:space-between; gap:3mm; } /* Logo im Schriftfeld (Vorgabe Chris 13.10.2026): rechts in der Firmenzeile, 4,5 mm hoch — die Kopfhöhe bleibt. Das JPEG hat eine weiße Fläche; das Blatt ist immer weiß. */ .pdf-blatt .pk-logo { height:4.5mm; width:auto; flex:none; } .pdf-blatt .pk-titel { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:4.4mm; line-height:1.1; } .pdf-blatt .pk-prj { font-size:2.9mm; color:var(--mut); } .pdf-blatt .pk-raster { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:.4mm 3mm; } .pdf-blatt .pk-z { display:flex; flex-direction:column; line-height:1.15; } .pdf-blatt .pk-z span { font-size:2.2mm; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; font-family:var(--f-display); font-stretch:87.5%; } .pdf-blatt .pk-z b { font-size:2.9mm; font-weight:600; font-family:var(--f-mono); } .pdf-blatt .pk-bem { font-size:2.5mm; color:var(--mut); margin-top:.8mm; } /* Aenderungsvermerk nach ISO 7200: ueber dem Schriftfeld, gleiche Breite, waechst nach oben. Deckend (`background:var(--card)`), sonst scheint die Zeichnung darunter durch. */ .pdf-blatt .pdf-rev { position:absolute; right:0; background:var(--card); border-left:.3mm solid var(--txt); border-top:.3mm solid var(--txt); } .pdf-blatt .pdf-rev-z { display:grid; grid-template-columns:12mm 22mm 1fr; gap:0 2mm; padding:.6mm 3mm; font-size:2.5mm; border-bottom:.15mm solid var(--bdr); } .pdf-blatt .pdf-rev-z:last-child { border-bottom:none; } .pdf-blatt .pdf-rev-kopf span { font-family:var(--f-display); font-stretch:87.5%; font-size:2.2mm; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); } .pdf-blatt .pdf-rev-z span:first-child { font-family:var(--f-mono); font-weight:600; } /* ---------- Rackplan auf dem Blatt (seit 16.09.2026) ---------- Das Blatt trägt hier HTML statt einer SVG (`o.inhalt`, s. AVP.planBlattHtml): DASSELBE Rackbild wie in der Ansicht (`rackBild` in racks.js), nur in Blatt-Millimetern gerechnet. Die Werkzeugfarben stehen fest — der Schrank ist dunkel wie am Schirm, das Blatt drumherum bleibt weiß. Alles in mm; die Beschriftung neben dem Schrank skaliert nicht mit dem Maßstab, sie hat ihre Schrifthöhe wie das Schriftfeld. */ .pdf-blatt .pdf-zeichnung.frei { display:block; padding:4mm 5mm; } .pdf-blatt .rkp { --rk-profil:#3A3E43; --rk-loch:#141518; --rk-innen:#1B1D20; --rk-metall:#4A4F55; --r-xs:.3mm; --r:.5mm; display:flex; flex-direction:column; gap:3mm; height:100%; font-size:2.6mm; line-height:1.25; } .pdf-blatt .rkp-kopf { font-family:var(--f-display); font-stretch:87.5%; font-size:3.4mm; font-weight:600; border-bottom:.3mm solid var(--txt); padding-bottom:1.2mm; } .pdf-blatt .rkp-kopf .mut { font-weight:400; color:var(--mut); font-size:2.8mm; } .pdf-blatt .rkp-mitte { display:flex; flex-direction:column; gap:4mm; flex:1; min-height:0; } .pdf-blatt .rkp.rechts .rkp-mitte { flex-direction:row; align-items:flex-start; } .pdf-blatt .rkp-ansichten { display:flex; align-items:flex-start; flex:1; min-width:0; } .pdf-blatt .rkp-seite { flex:none; } .pdf-blatt .rkp-titel { height:6mm; font-family:var(--f-display); font-stretch:87.5%; font-size:2.8mm; font-weight:600; text-transform:uppercase; letter-spacing:.08em; display:flex; align-items:flex-end; padding-bottom:1mm; white-space:nowrap; } .pdf-blatt .rkp-titel .mut { font-weight:400; text-transform:none; letter-spacing:0; color:var(--mut); margin-left:1mm; } .pdf-blatt .rkp-bild { display:flex; align-items:flex-start; } .pdf-blatt .rkp-bild .rk-scale { position:relative; flex:none; } .pdf-blatt .rkp-bild .rk-he-nr { right:1mm; width:auto; font-size:2mm; opacity:.7; } /* Der Schrank ist auch auf dem Blatt dunkel (seit 21.10.2026, Vorgabe Chris) — dieselben Token wie `.rk-board .rk-rack` am Schirm; Blatt, Skala und Beschriftung bleiben hell. */ .pdf-blatt .rkp-bild .rk-rack { flex:none; border:.2mm solid #15171A; --card:#141518; --card-2:#1A1B1E; --txt:#ECECEE; --mut:#8E8E98; --bdr:#24252A; --hover-bdr:#34353B; --hover:#1F2024; } .pdf-blatt .rkp-bild .rk-dev { cursor:default; } .pdf-blatt .rkp-bild .rk-kab-nr { font-size:1.9mm; } /* Seitenansicht (seit 21.10.2026): derselbe dunkle Schrank, Geräte als Kästen in ihrer Tiefe, Steckerfreiraum gestrichelt dahinter, ohne Stammtiefe gestrichelt; Konflikt in Statusrot. */ .pdf-blatt .rkp-sa-seite { margin-left:5mm; } .pdf-blatt .rkp-sa > span { position:absolute; } .pdf-blatt .rkp-sa-profil { background:var(--rk-profil); } .pdf-blatt .rkp-sa-dev { background:var(--rk-metall); border:.15mm solid #9AA0A6; } .pdf-blatt .rkp-sa-dev.blech { border:none; background:#9AA0A6; } .pdf-blatt .rkp-sa-dev.inh { background:color-mix(in srgb, var(--rk-metall) 70%, #9AA0A6); } .pdf-blatt .rkp-sa-dev.vage { background:transparent; border-style:dashed; } .pdf-blatt .rkp-sa-dev.err, .pdf-blatt .rkp-sa-frei.err { border-color:var(--warn); } .pdf-blatt .rkp-sa-frei { border:.15mm dashed #9AA0A6; border-left:none; } .pdf-blatt .rkp-sa-mass { left:0; right:0; top:calc(100% + 1mm); display:flex; justify-content:space-between; align-items:baseline; border-top:.15mm solid #15171A; padding-top:.6mm; font-size:2.2mm; color:#5F6368; white-space:nowrap; } .pdf-blatt .rkp-sa-mass b { color:#15171A; font-weight:600; } /* Beschriftung zwischen den Seiten: eine Zeile je Gerät auf Gerätehöhe, links und rechts ein kurzer Strich zur jeweiligen Ansicht. Erste Zeile BMK und Typ, die weiteren gedämpft. */ .pdf-blatt .rkp-lg { position:relative; flex:1; min-width:46mm; margin:0 1.6mm; } .pdf-blatt .rkp-lg-z { position:absolute; left:0; right:0; overflow:hidden; padding:0 2.4mm; display:flex; flex-direction:column; justify-content:center; line-height:3mm; font-size:2.4mm; border-top:.12mm solid var(--bdr); } /* Nur die ZEILEN sind Blöcke (`>`), nicht jedes span darin (Befund 26.09.2026): die HE-Angabe „38" steckt als span in der ersten Zeile und stand sonst in einer eigenen — bei 1 HE war damit die eigentliche Beschriftung unter die Zeilenhöhe gerutscht und halb abgeschnitten. */ .pdf-blatt .rkp-lg-z > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pdf-blatt .rkp-lg-z > span + span { color:var(--mut); font-size:2.1mm; } .pdf-blatt .rkp-lg-z .mono { font-family:var(--f-mono); } .pdf-blatt .rkp-lg-z .rkp-inh { color:var(--txt); } .pdf-blatt .rkp-lg-z.err > span:first-child { color:var(--warn); } .pdf-blatt .rkp-lg-z::before, .pdf-blatt .rkp-lg-z::after { content:''; position:absolute; top:50%; width:1.6mm; border-top:.15mm solid var(--mut); } .pdf-blatt .rkp-lg-z::before { left:0; } .pdf-blatt .rkp-lg-z::after { right:0; } /* Auswertung: unter den Ansichten (Hochformat) oder rechts daneben (Querformat) — dieselben Zahlen wie die Karte rechts in der Ansicht. */ .pdf-blatt .rkp-ausw { border-top:.3mm solid var(--txt); padding-top:1.5mm; font-size:2.5mm; overflow:hidden; } .pdf-blatt .rkp.rechts .rkp-ausw { border-top:none; border-left:.3mm solid var(--txt); padding:0 0 0 3mm; width:58mm; flex:none; margin-top:6mm; } .pdf-blatt .rkp-h { font-family:var(--f-display); font-stretch:87.5%; font-size:2.4mm; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin:1.5mm 0 .6mm; } .pdf-blatt .rkp-h.err { color:var(--warn); } .pdf-blatt .rkp-kpi { display:flex; flex-wrap:wrap; gap:1mm 6mm; } .pdf-blatt .rkp.rechts .rkp-kpi { flex-direction:column; gap:.6mm; } .pdf-blatt .rkp-kpi > div { display:flex; gap:2mm; font-variant-numeric:tabular-nums; } .pdf-blatt .rkp-kpi span { color:var(--mut); } .pdf-blatt .rkp-list { margin:0; padding-left:4mm; font-size:2.3mm; line-height:1.35; color:var(--mut); } .pdf-blatt .rkp-list.err { color:var(--warn); } .pdf-blatt .rkp-sub { margin:1mm 0 0; font-size:2.3mm; color:var(--mut); } .pdf-blatt .rkp-legende { display:flex; flex-wrap:wrap; gap:1mm 4mm; font-size:2.4mm; margin-top:2mm; } .pdf-blatt .rkp-legende .mut { color:var(--mut); } /* Belegte Höheneinheiten sind an der Skala markiert (Vorgabe Chris 16.09.2026) — am Bildschirm wie auf dem Blatt: Nummer voll, Balken an der Kante zum Schrank. Neutral, nicht im Akzent: die Belegung ist ein Zustand des Schranks, keine Aktion. */ .rk-he-nr.belegt { color:var(--txt); opacity:1; font-weight:600; box-shadow:inset -3px 0 0 var(--txt); } .pdf-blatt .rkp-bild .rk-he-nr.belegt { box-shadow:inset -.7mm 0 0 var(--txt); opacity:1; } .pdf-blatt .rkp-lg-z .rkp-he { font-family:var(--f-mono); color:var(--mut); font-size:2mm; margin-right:.8mm; } /* ---------- Liste auf dem Blatt (seit 16.09.2026): Geräteliste als PDF ---------- Kein Planblatt fester Größe, sondern Fließtext über beliebig viele Seiten (AVP.listeDrucken): Kopf mit Titel, Projekt und Logo, dann die Tabelle mit wiederholtem Kopf. Dieselbe Gestalt wie die Excel-Blätter. Nur `#pdf-blatt` bleibt am Schirm unsichtbar (s. oben). */ #pdf-blatt.pdf-liste { --txt:#111316; --mut:#5F6670; --bdr:#C9CDD3; --acc:#26788E; --acc-l:#E7F2F5; font-family:var(--f-body); font-size:8pt; line-height:1.3; color:var(--txt); background:#fff; } @media print { #pdf-blatt.pdf-liste { break-inside:auto; } } /* ---------- Deckblatt des Gesamtexports (26.09.2026) ---------- Dasselbe Gerüst wie die Geräteliste als PDF (`.pdf-liste`: Kopf, Tabellen mit Akzentkopf), ergänzt um die Kenndaten als zweispaltige Tabelle und Zwischenüberschriften. */ .pdf-deckblatt .db-kv { width:auto; min-width:120mm; margin:6mm 0 2mm; table-layout:auto; } .pdf-deckblatt .db-kv th { background:none; color:var(--mut); text-align:left; font-weight:600; padding:.8mm 6mm .8mm 0; border:none; } .pdf-deckblatt .db-kv td { border:none; padding:.8mm 0; font-weight:600; } .pdf-deckblatt .db-h { font-family:var(--f-display); font-stretch:87.5%; font-size:11pt; font-weight:700; color:var(--acc); text-transform:uppercase; letter-spacing:.06em; margin:7mm 0 2mm; break-after:avoid; } .pdf-deckblatt .db-t { font-size:9pt; margin:0 0 2mm; } .pdf-deckblatt tr { break-inside:avoid; } /* Pflichtenheft als PDF (Stufe 4, D3): Fließtext statt Tabelle — je Kapitel eine neue Seite, Abschnitte nicht zerreißen, wo es geht; „Aus der Planung" gedämpft wie in der Ansicht. */ .ph-blatt { font-size:9.5pt; line-height:1.45; } .ph-blatt .ph-inhalt-p { margin:0 0 4mm; padding-left:0; list-style:none; } .ph-blatt .ph-inhalt-p > li { margin:1.5mm 0; } .ph-blatt .ph-inhalt-p ol { list-style:none; padding-left:7mm; margin:.5mm 0 0; color:var(--mut); } .ph-blatt .ph-neu { break-before:page; } .ph-blatt .ph-h3 { font-family:var(--f-display); font-stretch:87.5%; font-size:10.5pt; font-weight:700; margin:5mm 0 1.5mm; break-after:avoid; } .ph-blatt .ph-p { margin:0 0 2mm; } .ph-blatt .ph-ab-p { break-inside:avoid-page; } .ph-blatt .ph-daten-p { margin:1.5mm 0 0; padding:1.5mm 3mm; border-left:.6mm solid var(--bdr); color:var(--mut); font-size:8.5pt; } .ph-blatt .ph-daten-p span { font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:7.5pt; } .ph-blatt .ph-daten-p ul { margin:.5mm 0 0; padding-left:4mm; } /* ---------- Gesamtexport: Auswahl und Fortschritt ---------- */ #hk-modal .ge-bd { min-width:min(620px, 88vw); } #hk-modal .ge-knoepfe { display:flex; gap:4px; margin-bottom:6px; } #hk-modal .ge-art { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 10px; } #hk-modal .ge-art .btn.on { border-color:var(--acc); color:var(--acc); box-shadow:inset 0 -2px 0 var(--acc); } #hk-modal .ge-liste { max-height:min(48vh, 460px); overflow:auto; border:1px solid var(--bdr); border-radius:var(--r); padding:4px 8px; } #hk-modal .ge-gr { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--mut); padding:8px 0 3px; } #hk-modal .ge-z { display:flex; align-items:center; gap:9px; padding:4px 2px; cursor:pointer; font-size:13px; } #hk-modal .ge-z:hover { background:var(--card-2); } #hk-modal .ge-z.leer span { color:var(--mut); } #hk-modal .ge-z input { width:16px; height:16px; accent-color:var(--acc); flex:none; } .ge-lauf { display:flex; align-items:center; gap:10px; margin:6px 0; font-size:14px; } .ge-dreh { font-size:20px; color:var(--acc); animation:ge-dreh 1s linear infinite; } @keyframes ge-dreh { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .ge-dreh { animation:none; } } /* ---------- Karte „Versionen" (Exporte) ---------- */ #exp-ver { padding:12px 16px; } #exp-ver .ver-akt { margin:0 0 8px; font-size:13px; } #exp-ver .ver-tbl { margin:4px 0 8px; font-size:12.5px; } #exp-ver .ver-knoepfe { display:flex; gap:6px; flex-wrap:wrap; } .pdf-liste .pl-kopf { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:.4mm solid var(--acc); padding-bottom:2mm; margin-bottom:3mm; } .pdf-liste .pl-titel { font-family:var(--f-display); font-stretch:87.5%; font-weight:700; font-size:15pt; color:var(--acc); line-height:1.1; } .pdf-liste .pl-prj { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:10pt; margin-top:.8mm; } .pdf-liste .pl-sub { font-size:8pt; color:var(--mut); margin-top:.5mm; } .pdf-liste .pl-marke { text-align:right; font-size:7.5pt; color:var(--mut); } .pdf-liste .pl-marke img { height:8mm; display:block; margin:0 0 1mm auto; } .pdf-liste table { width:100%; border-collapse:collapse; table-layout:fixed; } .pdf-liste thead { display:table-header-group; } .pdf-liste.einzeilig table { table-layout:auto; } .pdf-liste.einzeilig th, .pdf-liste.einzeilig td { white-space:nowrap; } .pdf-liste th { background:var(--acc-f); color:#fff; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:7.5pt; text-align:left; padding:1.2mm 1.5mm; vertical-align:bottom; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .pdf-liste td { padding:.9mm 1.5mm; border-bottom:.15mm solid var(--bdr); vertical-align:top; overflow-wrap:anywhere; } .pdf-liste tr { break-inside:avoid; } .pdf-liste tr.g1 td, .pdf-liste tr.g2 td { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .pdf-liste tr.g1 td { background:var(--acc-f); color:#fff; } .pdf-liste tr.g2 td { background:var(--acc-l); color:#1A5A6B; } .pdf-blatt .rkp-legende i { display:inline-block; width:5mm; height:1mm; margin-right:1.2mm; vertical-align:middle; border-radius:.5mm; } /* ---------- Druckvorschau im PDF-Dialog (Vorgabe Chris 13.09.2026) ---------- „Anpassungen am Format und der Ausrichtung sollen live mit dem Inhalt im Popup dargestellt werden, wie bei einer richtigen Druckvorschau." Links das Blatt, rechts die Einstellungen — die Aufteilung jedes Druckdialogs. Das Blatt ist das ECHTE Druckmarkup (`.pdf-blatt`), per `transform:scale` in die Bühne eingepasst; ein zweites, „ähnliches" Markup für die Vorschau liefe beim nächsten Eingriff am Schriftfeld auseinander. Die Bühne trägt die Blattfarbe der App (`--card-2`), das Blatt liegt weiß mit Schatten darauf — wie Papier auf dem Tisch. */ .modal.pdf-modal { max-width:1500px; height:92vh; } .pdf-modal .modal-bd { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 520px; gap:0 22px; padding:0; overflow:hidden; } .pdf-modal .pv-seite { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--card-2); border-right:1px solid var(--bdr); } .pdf-modal .pv-buehne { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:22px; overflow:hidden; } .pdf-modal .pv-info { margin:0; padding:8px 18px 10px; font-size:11.5px; color:var(--mut); border-top:1px solid var(--bdr); background:var(--card); } .pdf-modal .pv-form { display:flex; flex-direction:column; gap:14px; padding:18px 20px 18px 0; overflow-y:auto; min-height:0; } /* `.pv-box` hat die SKALIERTE Größe und zentriert damit; das Blatt darin behält seine echten Millimetermaße und wird nur gezeichnet kleiner — so bleiben alle mm-Angaben des Drucks gültig. */ .pv-box { position:relative; flex:none; box-shadow:var(--sh-3); } .pv-box .pdf-blatt { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; } /* 520 px Formularspalte: vier Felder je Zeile (`.w3`) wären 95 px breit — zwei je Zeile. */ .pdf-modal .frm-grid .w3 { grid-column:span 6; } @media (max-width:1100px){ .pdf-modal .modal-bd { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(220px,38%) minmax(0,1fr); gap:0; } .pdf-modal .pv-seite { border-right:none; border-bottom:1px solid var(--bdr); } .pdf-modal .pv-form { padding:16px 20px; } } /* ---------- Blendenansicht (Gerätestamm) ---------- Das Bild bekommt die Fläche (die Zuordnung per Klick braucht sie), die Anschlussliste steht rechts daneben und ist zugleich die Portliste des Stamm-Eintrags. */ .modal.xl { max-width:1680px; height:92vh; } .pn-bd { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:stretch; overflow:hidden; flex:1; min-height:0; } .pn-main { display:flex; flex-direction:column; gap:12px; min-width:0; overflow-y:auto; } .pn-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pn-wrap { display:flex; justify-content:flex-start; min-height:120px; overflow:auto; background:var(--card-2); border:1px solid var(--bdr); border-radius:var(--r); padding:10px; } .pn-stage { position:relative; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); overflow:hidden; flex:none; } .pn-stage.klick { cursor:crosshair; } .pn-stage.zieht, .pn-stage.zieht .pn-port { cursor:grabbing; } .pn-stage:not(.klick) .pn-port { cursor:grab; } .pn-stage[hidden], .pn-3d[hidden] { display:none; } .pn-img { display:block; width:100%; height:100%; object-fit:fill; user-select:none; } .pn-leer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--mut); text-align:center; padding:8px; } /* Anschlussmarker: maßstäblich in der Silhouette seines Steckertyps. Blass+rund = Lage nicht erfasst (nur verteilt), Ring in der Feldfarbe = aus der automatischen Erkennung. */ /* Füllung halbtransparent, Kontur kräftig: beim Prüfen einer Zuordnung muss die Buchse im Foto UNTER dem Marker sichtbar bleiben — sonst prüft man den Marker gegen sich selbst. */ /* --rot = Drehung der Buchse (port.drehung, seit 17.09.2026) — um die Mitte, nach dem Zentrieren */ .pn-port { position:absolute; transform:translate(-50%,-50%) rotate(var(--rot,0deg)); border-radius:var(--r-xs); cursor:pointer; background:color-mix(in srgb, var(--pc) 45%, transparent); box-shadow:inset 0 0 0 2px var(--pc), 0 0 0 1px rgba(255,255,255,.7); } .pn-port.f-rund { border-radius:50%; } .pn-port.f-iec { border-radius:35% 35% 8% 8%; } .pn-port.f-rj45::after { content:''; position:absolute; left:32%; right:32%; top:100%; height:28%; background:var(--pc); } .pn-port.vage { opacity:.45; border-radius:50%; } /* Auswahlrahmen (klicken und ziehen auf freier Fläche) */ .pn-band { position:absolute; z-index:6; pointer-events:none; border:1px dashed var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent); } .pn-band[hidden] { display:none; } /* Auswahl muss auf einen Blick auffindbar sein: kräftiger Ring plus ein Fähnchen mit dem Namen — ein Ring allein geht bei 30 Markern unter. */ .pn-port.aktiv { box-shadow:inset 0 0 0 2px var(--pc), 0 0 0 3px var(--acc), 0 0 0 6px color-mix(in srgb, var(--acc) 40%, transparent); z-index:4; } .pn-tag { position:absolute; z-index:5; transform:translate(-50%, -175%); pointer-events:none; background:var(--acc-f); color:var(--on-acc); font-size:11px; padding:1px 6px; border-radius:var(--r); white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.35); } .pn-tag.unten { transform:translate(-50%, 75%); } /* Fadenkreuz mit Hilfslinien: durchgezogen im Akzent, sobald die Achse auf einen vorhandenen Anschluss fängt — sonst dünn und gestrichelt. Ohne diese Rückmeldung weiß man beim Klicken nicht, ob die neue Lage in einer Flucht liegt. */ .pn-guides { position:absolute; inset:0; pointer-events:none; z-index:3; } .pn-guides[hidden] { display:none; } .pn-guides i { position:absolute; display:block; } .pn-guides .gx { top:0; bottom:0; width:0; border-left:1px dashed var(--mut); opacity:.7; } .pn-guides .gy { left:0; right:0; height:0; border-top:1px dashed var(--mut); opacity:.7; } .pn-guides .fang { border-style:solid; border-width:2px; border-color:var(--acc); opacity:1; } .pn-koord { position:absolute; transform:translate(8px,-140%); font-family:var(--f-mono); font-size:10.5px; background:var(--acc-f); color:var(--on-acc); padding:1px 5px; border-radius:var(--r); white-space:nowrap; } /* Rechte Spalte: Anschlussliste = Portliste des Stamm-Eintrags */ .pn-side { display:flex; flex-direction:column; gap:8px; min-height:0; border-left:1px solid var(--bdr); padding-left:16px; } .pn-side[hidden] { display:none; } .pn-liste { flex:1; overflow-y:auto; min-height:110px; } /* Zeilenrahmen und Markierung liegen auf den ZELLEN, nicht auf der Zeile: ein `box-shadow` auf einem wird bei `border-collapse:collapse` nur teilweise gezeichnet — mal erschien der Rahmen nur oben, mal nur unten (Rückmeldung 28.07.2026). */ .pn-tbl { width:100%; border-collapse:collapse; font-size:12.5px; } .pn-tbl tr { cursor:pointer; } .pn-tbl td { border-top:1px solid var(--bdr); } .pn-tbl tr:hover td { background:var(--hover); } .pn-tbl tr.sel td { background:color-mix(in srgb, var(--acc) 18%, transparent); border-top-color:var(--acc); } .pn-tbl tr.sel + tr td { border-top-color:var(--acc); } .pn-tbl tr.sel td:first-child { box-shadow:inset 2px 0 0 var(--acc); } /* Erfasst oder nicht muss die Zeile auf einen Blick sagen — sonst sucht man die Lücken in einer 48-zeiligen Liste über die Koordinatenspalte. */ .pn-tbl tr.offen td:first-child { box-shadow:inset 3px 0 0 var(--warn); } .pn-tbl tr.offen .pn-tbl-xy { color:var(--warn); } .pn-tbl-ok { width:16px; } .pn-tbl-ok i { font-size:13px; color:var(--ok); vertical-align:middle; } .pn-tbl tr.offen .pn-tbl-ok i { color:var(--warn); } .pn-side-filter { min-height:26px; } .pn-alle { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ok); } .pn-tbl td { padding:4px 5px; } .pn-tbl-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; } .pn-tbl-st { color:var(--mut); font-size:11px; white-space:nowrap; } .pn-tbl-xy { text-align:right; font-size:11px; white-space:nowrap; } .pn-chip { display:inline-block; width:9px; height:9px; border-radius:var(--r-xs); vertical-align:middle; margin-right:5px; } .pn-ed { display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--bdr); padding-top:10px; } /* Kopfzeile des Editors = die Antwort auf „welcher Anschluss ist gewählt?" */ .pn-ed-hd { display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:var(--r); background:color-mix(in srgb, var(--acc) 14%, transparent); box-shadow:inset 2px 0 0 var(--acc); font-size:13px; } .pn-ed-hd-st { color:var(--mut); font-size:11px; } .pn-ed-hd-xy { margin-left:auto; font-size:11px; color:var(--mut); white-space:nowrap; } .pn-ed-sort { display:flex; gap:2px; } .pn-ed-sort .btn { padding:2px 4px; } .pn-ed-btn { flex-wrap:wrap; } .pn-ed-tip { margin:0; font-size:11px; } .pn-ed-l { display:flex; flex-direction:column; gap:3px; font-family:var(--f-display); font-stretch:87.5%; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); } .pn-ed-xy { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pn-ed-btn { display:flex; gap:8px; } /* Steckerbibliothek — alles, was im Foto keine Farbe trägt, wird von Hand daraus ergänzt. Sie legt sich als Klappfeld ÜBER die Spalte: als weiterer Block darunter drückte sie Liste und Editor aus dem Modal heraus (bei 720 px Fensterhöhe sofort sichtbar). */ .pn-lib-wrap { border-top:1px solid var(--bdr); padding-top:10px; position:relative; } .pn-lib { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px; position:absolute; left:0; right:0; bottom:calc(100% - 2px); z-index:5; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); max-height:min(420px, 60vh); overflow-y:auto; } .pn-lib[hidden] { display:none; } .pn-lib-hd { grid-column:1/-1; font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; text-transform:none; letter-spacing:0; color:var(--mut); margin-top:6px; } .pn-lib-b { display:flex; align-items:center; gap:7px; padding:4px 6px; border:1px solid var(--bdr); background:none; border-radius:var(--r); font-size:11.5px; text-align:left; } .pn-lib-b:hover { border-color:var(--acc); color:var(--acc); } .pn-lib-ic { flex:none; background:var(--pc); border-radius:var(--r-xs); } .pn-lib-ic.f-rund { border-radius:50%; } .pn-lib-ic.f-iec { border-radius:35% 35% 8% 8%; } /* Ergebnis der automatischen Erkennung als Tabelle statt als Fließtext */ .pn-auto { width:100%; border-collapse:collapse; font-size:12px; } .pn-auto th { text-align:left; font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; text-transform:none; letter-spacing:0; color:var(--mut); font-weight:600; border-bottom:1px solid var(--bdr); padding:3px 6px; } .pn-auto td { padding:3px 6px; border-bottom:1px solid var(--bdr); } .pn-auto .num { text-align:right; font-variant-numeric:tabular-nums; } .pn-auto tbody tr { cursor:pointer; } .pn-auto tbody tr:hover { background:var(--hover); } .pn-auto tr.offen td { color:var(--mut); } .pn-warn { color:var(--warn); border-bottom:1px dashed currentColor; cursor:help; } .pn-auto-note { margin:4px 0 0; font-size:11px; } .pn-ecke { position:absolute; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%); background:var(--acc-f); color:var(--on-acc); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; z-index:3; } /* Zuschnitt-Rahmen über dem Rohbild. Der Bereich AUSSERHALB wird abgedunkelt, und zwar über einen sehr großen Schlagschatten statt über vier eigene Blenden-Elemente: so gibt es genau ein Element, das beim Ziehen bewegt wird, und die Abdunklung folgt ihm ohne zweite Rechnung. */ .pn-crop { position:absolute; z-index:4; cursor:move; border:1px solid var(--acc); box-shadow:0 0 0 9999px rgba(0,0,0,.55); } .pn-crop::after { content:""; position:absolute; inset:0; pointer-events:none; border:1px dashed rgba(255,255,255,.55); } /* Griffe: acht Stück, damit jede Kante einzeln nachziehbar ist — nur an den Ecken zu fassen heißt, für „2 mm oben weg" zweimal zu zielen. */ .pn-cg { position:absolute; width:11px; height:11px; background:var(--acc); border:1px solid var(--on-acc); box-sizing:border-box; } /* Trefferfläche 27 px statt 11 — sonst zieht man neben dem Griff einen neuen Rahmen auf. */ .pn-cg::before { content:""; position:absolute; inset:-8px; } .pn-cg.nw { left:0; top:0; cursor:nwse-resize; } .pn-cg.n { left:50%; top:0; margin-left:-5.5px; cursor:ns-resize; } .pn-cg.ne { right:0; top:0; cursor:nesw-resize; } .pn-cg.e { right:0; top:50%; margin-top:-5.5px; cursor:ew-resize; } .pn-cg.se { right:0; bottom:0; cursor:nwse-resize; } .pn-cg.s { left:50%; bottom:0; margin-left:-5.5px; cursor:ns-resize; } .pn-cg.sw { left:0; bottom:0; cursor:nesw-resize; } .pn-cg.w { left:0; top:50%; margin-top:-5.5px; cursor:ew-resize; } /* Auf freier Fläche zieht der Zug einen neuen Rahmen auf — das sagt der Zeiger mit. */ #pn-stage:has(.pn-crop) { cursor:crosshair; } #pn-stage:has(.pn-crop) .pn-img { pointer-events:none; } /* Aktionszeile unter einer Statusmeldung — als span, weil #pn-info ein

ist und ein

darin den Absatz vorzeitig schließen würde. */ .pn-akt { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; } /* Stand der Blendenerfassung im Gerätestamm */ .bl-ok { display:inline-flex; align-items:center; gap:4px; color:var(--ok); font-size:11.5px; white-space:nowrap; } /* Freigegebene Blende: Marker bleiben sichtbar, sind aber nicht mehr anfassbar */ .pn-stage.fest .pn-port { cursor:default; } .pn-breite { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:0; } .pn-3d { width:560px; height:360px; } .pn-3d canvas { display:block; width:100%; height:100%; cursor:grab; border:1px solid var(--bdr); border-radius:var(--r); } /* s. #rk-3d canvas */ .pn-3d canvas:active { cursor:grabbing; } /* ---------- Rack-Planung ---------- Das Rack ist die Hauptansicht und bekommt die Fläche; Palette und Auswertung stehen zusammen in einer schmalen Spalte rechts (vorher drei gleichrangige Spalten, wodurch das eigentliche Rack die kleinste war). */ /* Angebot „aus der Geräteliste übernehmen": Schrank-Positionen ohne Rack im Ortsbaum. Kein Fehlerzustand, sondern ein Vorschlag — deshalb neutral getönt und mit Akzentkante statt roter Warnfarbe. Farbe in der Fläche gehört in dieser App den Signalarten. */ .rk-uebn { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; padding:8px 12px; background:var(--card-2); border:1px solid var(--bdr); border-left:2px solid var(--acc); border-radius:var(--r); font-size:13px; color:var(--mut); } .rk-uebn[hidden] { display:none; } /* display:flex hebelt hidden aus (bekannte Falle) */ .rk-uebn > i { color:var(--acc); font-size:16px; } /* Zwei Spalten: Schrank · Palette und Auswertung. Die Werkzeugspalte vom 17.08.2026 ist am 23.08.2026 der einzeiligen Leiste über der Ansicht gewichen (Vorgabe Chris, gleiche Optik in allen Ansichten) — sie war die Antwort auf ZWEI Leisten à ~90 px; eine Zeile mit Klappmenüs kostet 36 px und gibt die 212 px Breite zurück. `grid-template-rows:minmax(0,1fr)` zusammen mit `.view.fill` gibt der Ansicht genau die sichtbare Höhe: NICHT rechnen, was man messen lassen kann (dieselbe Lehre wie bei hoehe3d() und der Verdrahtungsfläche — `calc(100vh - 200px)` stand hier und lag um ~110 px daneben). */ .rk-cols { display:grid; grid-template-columns:minmax(0,1fr) 320px; grid-template-rows:minmax(0,1fr); gap:14px; flex:1 1 auto; min-height:0; /* Bezug für den Statusstreifen (`.stage-msgs`) — er darf nicht in der scrollenden Bühne hängen, sonst wandert er beim Blättern durch ein hohes Rack mit. */ position:relative; } .rk-side { display:flex; flex-direction:column; gap:14px; min-width:0; overflow:auto; } .rk-pal, .rk-info { padding:14px 16px 10px; } /* Die Palette kann bei 250 Deckenlautsprechern beliebig lang werden — sie bekommt deshalb höchstens die Hälfte der Spalte und scrollt innen. Sonst schiebt sie die Auswertung mit den Summen aus dem Bild, und die braucht man häufiger als das Ende der Liste. */ .rk-pal { display:flex; flex-direction:column; min-height:0; max-height:56%; } /* … und umgekehrt darf eine lange Auswertung (sechs Hinweise im Technikeinbau) die Palette nicht auf eine Zeile drücken: die Liste behält Platz für vier Zeilen, die Spalte scrollt (Befund 26.09.2026: 70 px, die zugeordnete Klemmleiste war nur noch als Rollbalken zu sehen). */ .rk-pal #rk-pal-list, .rk-pal #eb-pal-list { overflow:auto; min-height:150px; } /* **Die Karte muss die 150 px mittragen**, nicht nur die Liste: mit `min-height:0` schrumpfte die Karte trotzdem, die Liste ragte unten heraus und die Auswertung darunter deckte sie zu (Befund 26.09.2026 im Technikeinbau: die Zeile lag unter der Auswertung, Rechtsklick traf die falsche Karte). `min-height:min-content` hält Kopf + Liste; die Spalte scrollt. */ .rk-pal { min-height:min-content; } .rk-info { flex:none; } .rk-pal-row.aus { opacity:.55; cursor:default; } /* Rackplanung (21.10.2026, Vorgabe Chris): die Auswertung steht FEST unten rechts, die Liste „Nicht eingebaut" darüber nimmt den Rest der Spalte, scrollt innen und lässt sich zuklappen. Vorher scrollte die ganze Spalte, und eine lange Liste schob die Summen aus dem Bild. */ /* Der Statusstreifen gehört zur Fläche des Schranks, nicht zur ganzen Spalte: unter 1360 px stehen Palette und Auswertung UNTER dem Schrank, und der Streifen lag über der Auswertung. Ein absolut gesetztes Grid-Kind mit Platzierung nimmt seinen Bereich als Bezug — mit BEIDEN Linien: eine offene Endlinie heißt bei absoluter Lage „bis zum Rand des Rasters“. */ .rk-cols > .stage-msgs { grid-row:1 / 2; grid-column:1 / 2; } .rk-pal-klapp { cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; flex:1; min-width:0; white-space:nowrap; } .rk-pal-klapp:hover { color:var(--acc); } .rk-pal-klapp .rk-pal-n { margin-left:6px; } .rk-pal-chev { font-size:14px; transition:transform .15s; } .rk-pal.zu .rk-pal-chev { transform:rotate(-90deg); } .rk-pal.zu > :not(.str-hd) { display:none; } @media (min-width: 1361px) { #view-racks .rk-side { overflow:hidden; } #view-racks .rk-pal { flex:1 1 auto; max-height:none; min-height:0; } #view-racks .rk-pal.zu { flex:none; } #view-racks .rk-pal #rk-pal-list { flex:1 1 auto; min-height:60px; } #view-racks .rk-info { max-height:62%; overflow:auto; margin-top:auto; } } /* ---------- Technikeinbau: Montageplatte (seit 22.09.2026) ---------- Die Platte ist EINE SVG in der Bühne (dieselbe `.rk-stage` wie das Rack). Farben aus den Token; Signalfarben kommen inline aus AVP.SIGNALS. */ #eb-frame { margin:auto; } /* 3D des Technikeinbaus: die volle Bühne, der Hinweis darunter (wie #rk-3d) */ #eb-3d { flex:1; min-width:0; min-height:420px; position:relative; } #eb-3d[hidden], #eb-frame[hidden] { display:none; } #eb-3d canvas { display:block; width:100%; height:100%; cursor:grab; border:1px solid var(--bdr); border-radius:var(--r); } #eb-3d canvas:active { cursor:grabbing; } #view-technikeinbau.d3 .eb-nur2d { display:none; } #view-technikeinbau.d3 .rk-stage { overflow:hidden; padding:12px 12px 34px; align-items:stretch; } .eb-svg { display:block; user-select:none; } .eb-platte { fill:var(--card); stroke:var(--bdr); stroke-width:1.5; } .eb-board.picking .eb-platte, .eb-board.picking .eb-svg { cursor:copy; } .eb-loch rect { fill:var(--card-2); stroke:var(--bdr); stroke-width:.5; } .eb-raster { fill:none; stroke:var(--bdr); stroke-width:.6; } .eb-mass { font-family:var(--f-mono); font-size:11px; fill:var(--mut); } .eb-dev { cursor:grab; } .eb-dev.dragging { cursor:grabbing; opacity:.85; } .eb-grund { fill:var(--card-2); stroke:var(--txt); stroke-width:1.2; } .eb-dev:hover .eb-grund { stroke:var(--acc); } .eb-dev.on .eb-grund { stroke:var(--acc); stroke-width:2.2; } .eb-dev.err .eb-grund { stroke:var(--warn); stroke-width:2.2; } .eb-dev.warn .eb-grund { stroke-dasharray:5 3; } .eb-kante { stroke:var(--txt); stroke-width:2.5; pointer-events:none; } .eb-dev.on .eb-kante, .eb-dev:hover .eb-kante { stroke:var(--acc); } .eb-blende { opacity:.92; pointer-events:none; } .eb-port { stroke:var(--card); stroke-width:1; } .eb-port.vage { opacity:.45; } .eb-bmk { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; fill:var(--txt); pointer-events:none; dominant-baseline:middle; } .eb-ik { font-family:'tabler-icons'; font-weight:400; } .eb-typ { font-family:var(--f-body); fill:var(--mut); pointer-events:none; dominant-baseline:middle; } .eb-kab path, .eb-abg path { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .eb-kab-hit { stroke:transparent !important; stroke-width:10 !important; } .eb-kab:hover path:not(.eb-kab-hit), .eb-abg:hover path:not(.eb-kab-hit) { stroke-width:3.5; } .eb-abg path:not(.eb-kab-hit) { stroke-dasharray:6 3; } .eb-kab-nr, .eb-abg-t { font-family:var(--f-mono); font-size:10.5px; } /* Kabelkanal: kein Gerät, sondern eine Bahn — leer gezeichnet, schraffiert, ohne Buchsen. */ .eb-dev.kanal .eb-grund { fill:none; stroke-dasharray:6 3; } .eb-dev.kanal .eb-kante { display:none; } .eb-abg-griff { cursor:grab; } .eb-abg.zieht .eb-abg-griff { cursor:grabbing; } .eb-abg-griff:hover { r:6; } /* Ziehgriff je Leitungsbahn — wie in der Verdrahtung: ein kurzer Streifen quer über die Mitte des Segments, sichtbar erst beim Überfahren der Leitung (unter `hover:none` immer, s. D-08). */ .eb-wgriff { stroke:var(--acc); stroke-width:7; stroke-linecap:round; opacity:0; transition:opacity .12s; } .eb-wgriff.waag { cursor:ns-resize; } .eb-wgriff.senk { cursor:ew-resize; } .eb-kab:hover .eb-wgriff, .eb-abg:hover .eb-wgriff, .eb-wgriff:hover { opacity:.85; } @media (hover:none) { .eb-wgriff { opacity:.5; } } /* Von Hand geführte Leitungen: kräftiger, damit man sieht, was nicht mehr automatisch läuft. */ .eb-kab.hand path:not(.eb-kab-hit), .eb-abg.hand path:not(.eb-kab-hit) { stroke-width:2.6; } .eb-ghost { fill:color-mix(in srgb, var(--acc) 18%, transparent); stroke:var(--acc); stroke-width:1.5; stroke-dasharray:4 3; pointer-events:none; } .eb-ghost.belegt { fill:color-mix(in srgb, var(--warn) 18%, transparent); stroke:var(--warn); } .eb-legende { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11.5px; color:var(--mut); margin-top:8px; } .eb-legende span { display:inline-flex; align-items:center; gap:5px; } .eb-legende i { display:inline-block; width:16px; height:3px; } .eb-legende i.abg, .pdf-blatt .rkp-legende i.abg { background:repeating-linear-gradient(90deg, var(--mut) 0 5px, transparent 5px 8px); } /* Einbauplan (Blatt) */ .pdf-blatt .ebp-bild { flex:none; } .pdf-blatt .ebp-bild svg { width:100%; height:100%; } /* Die Listen stehen rechts neben der Zeichnung und nehmen ihr nur Breite, keine Höhe — die Zeichnung ist die Hauptsache (Chris 22.09.2026). */ .pdf-blatt .ebp-listen { flex:none; min-width:0; display:flex; flex-direction:column; gap:1mm; } .pdf-blatt .ebp.unten .ebp-listen { width:auto; flex:1; } .pdf-blatt .ebp-tab { width:100%; border-collapse:collapse; font-size:2.6mm; margin:1mm 0 3mm; } .pdf-blatt .ebp-tab th { text-align:left; font-weight:600; border-bottom:.3mm solid var(--txt); padding:.4mm 1.2mm; } .pdf-blatt .ebp-tab td { padding:.4mm 1.2mm; border-bottom:.1mm solid var(--bdr); } .pdf-blatt .ebp-tab td.num { text-align:right; font-variant-numeric:tabular-nums; } .pdf-blatt .ebp-tab tr.err td { color:var(--warn); } .pdf-blatt .ebp-sig { display:inline-block; width:4mm; height:1mm; margin-right:1mm; vertical-align:middle; } .pdf-blatt .ebp.unten .rkp-mitte { flex-direction:column; } .pdf-blatt .ebp.rechts .rkp-mitte { flex-direction:row; flex-wrap:wrap; } .pdf-blatt .ebp-ausw { flex:none; } /* In 3D zoomt das Mausrad am Canvas, die Stufen −/einpassen/+ wirken dort NICHT, und eine Blendenseite zu WÄHLEN ist gegenstandslos. Ein Knopf, der im aktuellen Modus nichts tut, ist irreführend (dieselbe Überlegung wie bei „BMK vergeben" im LV-Modus). Die Klasse hängt seit 23.08.2026 an der ANSICHT und nicht mehr an `.rk-cols`: die Leiste steht jetzt darüber, also außerhalb des Rasters. */ #view-racks.d3 .rk-nur2d { display:none; } /* Umschalter, die eine Spaltenbreite gleichmäßig teilen (Palette, Auswertung). In der Werkzeugzeile bekommen sie ihre Inhaltsbreite — dort teilt niemand eine Spalte. */ .vtabs.breit { display:flex; gap:5px; margin:0; } .vtabs.breit .btn { flex:1 1 0; min-width:0; justify-content:center; } /* Der Ortspfad des Schranks kann lang werden — kürzen statt die Leiste aufziehen. */ .tb-sel { min-width:180px; max-width:320px; } #rk-sel .csel-btn { font-size:13px; padding:6px 9px; overflow:hidden; } #rk-sel .csel-btn > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Das Rack scrollt INNERHALB der Karte — sonst wandert die Auswertung daneben mit nach unten aus dem Bild, sobald ein hohes Rack größer gezoomt ist. Zentriert über `margin:auto` am Kind, NICHT über `justify-content:center`: bei zentriertem Flex-Inhalt, der breiter als der Kasten ist, wird der linke Überhang abgeschnitten und ist auch mit Bildlauf nicht erreichbar — beim Hineinzoomen genau der Regelfall. */ .rk-stage { padding:18px; display:flex; overflow:auto; position:relative; min-height:0; } #rk-frame { margin:auto; } /* Ansicht schieben: mittlere Maustaste (oder Leertaste + Ziehen) — der Zeiger sagt es an. */ .rk-stage.greifbar { cursor:grab; } .rk-stage.greifen, .rk-stage.greifen * { cursor:grabbing !important; } #rk-3d { width:100%; min-width:0; height:min(70vh,620px); position:relative; } /* In 3D bekommt die Ansicht die volle Fläche bis zum Fensterrand — die Höhe setzt `hoehe3d()` aus der gemessenen Oberkante, hier fallen nur die Deckel weg, die dagegen stünden. */ #view-racks.d3 .rk-stage { overflow:visible; padding:12px; align-items:stretch; } #view-racks.d3 #rk-3d { height:auto; } #rk-3d[hidden], #rk-frame[hidden] { display:none; } /* display:flex/block hebelt hidden aus */ /* **Breite und Höhe am Canvas sind Pflicht** (Befund 26.09.2026, Rückmeldung Chris: „3D-Ansicht ist zu groß und überblendet den rechten Teil"). racks.js ruft `ren.setSize(w, h, false)` — das setzt nur die PIXELgröße, und die ist w × devicePixelRatio. Ohne CSS-Maß zeigt der Browser den Canvas in dieser Pixelgröße: bei 150 % Bildschirmskalierung 1202 statt 785 px, quer über die Palette. In der Browser-Pane (100 %) fiel das nie auf. Grundriss- und Einbau-3D hatten die Regel schon. */ #rk-3d { overflow:hidden; } #rk-3d canvas { display:block; width:100%; height:100%; cursor:grab; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card-2); } #rk-3d canvas:active { cursor:grabbing; } .rk-3d-hint { position:absolute; left:0; right:0; bottom:-2px; transform:translateY(100%); font-size:11.5px; color:var(--mut); line-height:1.45; padding-top:6px; } .rk-3d-hint .mono { font-family:var(--f-mono); color:var(--txt); } .rk-pal-row { display:flex; align-items:center; gap:9px; padding:6px 8px; border-top:1px solid var(--bdr); cursor:pointer; min-height:34px; } .rk-pal-row:hover { background:var(--card-2); } .rk-pal-row.sel { background:var(--card-2); box-shadow:inset 2px 0 0 var(--acc); } .rk-pal-row.sel .str-bez { color:var(--acc); } /* Noch keinem Ort zugeordnet: die Palette bietet sie seit 16.08.2026 mit an (s. §Was lässt sich einbauen). Gedämpft, weil sie ein ANGEBOT sind und nicht schon hierher gehören — dieselbe Bildsprache wie `.pq-vage` bei abgeleiteten Werten. Kein eigener Farbton: Farbe in der Fläche gehört den Signalarten. */ .rk-pal-row.frei .str-code, .rk-pal-row.frei .str-bez { color:var(--mut); } .rk-pal-trenn { padding:7px 8px 3px; border-top:1px solid var(--bdr); font-family:var(--f-display); font-stretch:87.5%; font-size:10px; text-transform:none; letter-spacing:0; color:var(--mut); display:flex; align-items:center; gap:6px; } /* Anzahl je Rang — man will vor dem Aufklappen wissen, wie viel dahintersteckt. */ .rk-pal-n { margin-left:auto; font-family:var(--f-mono); font-stretch:normal; letter-spacing:0; font-size:10px; opacity:.7; } /* „nicht für den Schrank" ist zusammengeklappt und anklickbar. */ .rk-pal-trenn.aus { cursor:pointer; user-select:none; } .rk-pal-trenn.aus:hover { color:var(--acc); } .rk-pal-trenn.aus .ti { font-size:12px; } /* Auswahl-Dialog (AVP.auswahl): Liste mit Titel und Begründung je Zeile. Markiert wird die ganze Zeile, nicht nur der Radiopunkt — bei zweizeiligen Einträgen ist der Punkt zu wenig. **Die Klassen hießen zuerst `.wahl…` — und `wahl` liegt in Geräteliste UND Gerätestamm auf jeder `` mit Dropdown** (devices.js, katalog.js). `.wahl { display:flex }` hat damit jede Auswahlzelle aus der Tabellenstruktur gerissen: der Browser erzeugte anonyme Zellen, Status und Herkunft standen übereinander, Anlage und Ort rutschten unter Lokation, jede Zeile war doppelt so hoch (Rückmeldung Chris 17.08.2026, am Bild). Genau die Falle, die in §Kritische Regeln seit dem 29.07. steht (`.ind` mit `display:inline-flex`). Deshalb jetzt eigener Name UND auf die Dialoghülle eingeschränkt — zwei Sicherungen, damit es nicht am nächsten gleichnamigen Element wieder passiert. */ #hk-modal .dlgwahl-list { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto; } #hk-modal .dlgwahl-alle { display:flex; align-items:center; gap:6px; margin:0 0 8px; } #hk-modal .dlgwahl-alle .sub { margin-left:auto; } #hk-modal .dlgwahl-gr { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; text-transform:none; letter-spacing:.09em; color:var(--mut); margin:8px 0 2px; } #hk-modal .dlgwahl-gr:first-child { margin-top:0; } #hk-modal .dlgwahl { display:flex; align-items:flex-start; gap:9px; padding:8px 10px; cursor:pointer; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); } #hk-modal .dlgwahl:hover { border-color:var(--acc); } #hk-modal .dlgwahl.on { border-color:var(--acc); background:var(--acc-l); box-shadow:inset 2px 0 0 var(--acc); } #hk-modal .dlgwahl input { margin-top:2px; accent-color:var(--acc); } #hk-modal .dlgwahl-tx { display:flex; flex-direction:column; gap:1px; min-width:0; } #hk-modal .dlgwahl-tx b { font-size:13.5px; font-weight:600; } #hk-modal .dlgwahl.on .dlgwahl-tx b { color:var(--acc-t); } #hk-modal .dlgwahl-tx em { font-style:normal; font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums; } /* Werkzeugfarben des Racks — der Schrank ist in BEIDEN Themen dunkel (seit 21.10.2026, Vorgabe Chris: „ein 19-Zoll-Schrank ist fast immer schwarz … im hellen Modus auch dunkel"). Vorher trug er im Hellen das Zeichnungsblatt: Profile, Blenden, Leisten hell — so sieht kein Schrank aus. Im Schrank gelten deshalb die Flächen- und Schrifttoken des Dunkelmodus; Skala und Beschriftung daneben folgen weiter dem Thema. Das Druckblatt (`.pdf-blatt .rkp`) zieht mit. */ .rk-board { --rk-profil:#3A3E43; --rk-loch:#141518; --rk-innen:#1B1D20; --rk-metall:#4A4F55; display:grid; grid-template-columns:34px auto minmax(210px,290px); align-items:start; } .rk-board .rk-rack { --card:#141518; --card-2:#1A1B1E; --txt:#ECECEE; --mut:#8E8E98; --bdr:#24252A; --hover-bdr:#34353B; --hover:#1F2024; } /* Abgeschaltete HE-Skala: die Spalte fällt weg statt leer Platz zu halten — sonst steht der Schrank nicht mehr mittig und „einpassen" reservierte 34 px für nichts. */ .rk-board.ohne-he { grid-template-columns:0 auto minmax(210px,290px); } .rk-scale { position:relative; overflow:hidden; } .rk-he-nr { position:absolute; right:7px; width:24px; display:flex; align-items:center; justify-content:flex-end; font-family:var(--f-mono); font-size:10px; color:var(--mut); opacity:.65; } .rk-he-nr.fuenf { opacity:1; color:var(--txt); } /* Rahmen: zwei Montageprofile mit Lochbild, dazwischen die lichte Weite. Die Geräte liegen mit ihren Ohren ÜBER den Profilen und füllen deshalb immer die volle 19"-Breite. */ .rk-rack { position:relative; background:var(--rk-innen); border:1px solid var(--bdr); } .rk-rail { position:absolute; top:0; height:100%; } .rk-rail.l { left:0; } .rk-rail.r { right:0; } /* Rückseite: Profile vor den Geräten (Geräte z 2), unter den Leitungen (z 4) — 14.10.2026 */ .rk-rail.vorn { z-index:3; pointer-events:none; } .rk-rail .rk-rail-bg { fill:var(--rk-profil); } .rk-rail circle { fill:var(--rk-loch); } .rk-he { position:absolute; left:0; right:0; } .rk-board.picking .rk-he { cursor:copy; } .rk-dev { position:absolute; left:0; right:0; cursor:grab; z-index:2; } .rk-blende { position:absolute; top:0; bottom:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--hover-bdr); } .rk-dev-foto { width:100%; height:100%; object-fit:fill; display:block; user-select:none; } /* 19"-Ohr: gezeichnet, nicht fotografiert (Blendenbilder liegen ohne Ohren vor). Die Schrauben sitzen auf dem Lochbild des Profils darunter. */ .rk-ohr { position:absolute; top:0; bottom:0; background:linear-gradient(90deg, color-mix(in srgb, var(--rk-metall) 70%, #000 12%), var(--rk-metall) 45%, color-mix(in srgb, var(--rk-metall) 80%, #000 8%)); border:1px solid color-mix(in srgb, var(--rk-metall) 60%, #000 25%); } .rk-ohr.l { left:0; } .rk-ohr.r { right:0; } /* Befestigung (seit 30.09.2026): über jedem Montageprofil eine Ebene mit Langloch und Linsenkopfschraube — an JEDEM Gerät mit 19"-Front, auch über einem Foto mit Ohren und an Leerblenden ohne Foto. Größen kommen als Variablen aus `befestigung()` (racks.js). */ .rk-befest { position:absolute; top:0; bottom:0; z-index:3; pointer-events:none; } .rk-befest.l { left:0; } .rk-befest.r { right:0; } .rk-befest-pkt { position:absolute; left:50%; width:0; height:0; } .rk-langloch { position:absolute; width:var(--lw); height:var(--lh); border-radius:calc(var(--lh) / 2); transform:translate(-50%,-50%); background:#101214; box-shadow:inset 0 1px 1px #000a, 0 0 0 .5px #ffffff30; } .rk-schraube { position:absolute; width:var(--sk); height:var(--sk); border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 34% 28%, #fbfcfd 0, #cfd4d8 30%, #8e959c 70%, #5d646b 100%); box-shadow:0 .5px 1.5px #000b, inset 0 0 0 .5px #0005; } /* Kreuzschlitz, leicht verdreht wie eine angezogene Schraube — erst ab 7 px Kopfgröße. Nicht um 45°: dann liest er sich als „×" und sieht aus wie ein Schließen-Knopf. */ .rk-schraube.schlitz::before, .rk-schraube.schlitz::after { content:''; position:absolute; left:50%; top:50%; width:52%; height:12%; border-radius:1px; background:#33373c; box-shadow:0 .5px 0 #fff8; transform:translate(-50%,-50%) rotate(12deg); } .rk-schraube.schlitz::after { transform:translate(-50%,-50%) rotate(102deg); } /* Gerät ohne 19"-Front (halbe Baubreite): steht frei in der Öffnung, nicht an den Profilen */ .rk-dev.frei .rk-blende { border-style:dashed; } .rk-dev.hi .rk-blende { border-color:var(--acc); } .rk-dev.dragging { cursor:grabbing; z-index:10; filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); } .rk-rack.dragging .rk-dev:not(.dragging) { opacity:.55; } /* Konflikt = rot und kräftig, Hinweis nur gestrichelt (kein Rot — sonst sind beide gleich laut) */ .rk-dev.err .rk-blende { border-color:var(--warn); box-shadow:inset 0 0 0 2px var(--warn); } .rk-dev.warn .rk-blende { border-style:dashed; } /* Markiert (Klick, Entf baut aus) — **NACH `.err`**, sonst überdeckt der rote Konfliktrahmen bei gleicher Spezifität die Markierung, und zwar genau an dem Gerät, das man umbauen will. Der Akzent ist hier richtig: Markierung ist ein aktiver Zustand (s. §Design). */ .rk-dev.on .rk-blende { border-color:var(--acc); box-shadow:inset 0 0 0 2px var(--acc), 0 0 0 1px var(--acc); } /* ---------- Träger und ihr Inhalt (seit 17.08.2026) ---------- Der Träger ist die AUFNAHME, nicht das Gerät: gedämpfte Fläche und Haarlinie, damit die Geräte darin die Aufmerksamkeit bekommen. Gleiche Bildsprache wie bei den generischen Plankomponenten in der Verdrahtung (`.wn.gen`) — was kein Gerät ist, wird filigran. */ .rk-dev.traeger .rk-blende { background:var(--card-2); border-style:dashed; } /* Die WANNE ist das Blech, und zwar UNTEN: ein dünner Metallstreifen am Boden, darüber der Raum, den sie beansprucht und in dem das Gerät steht. Kein Kasten über die volle Bauhöhe (las sich wie ein leeres Gerät) und keine Auflagekante oben (da schwebte das Gerät über der Wanne). */ .rk-dev.traeger .rk-blende.blech { background:linear-gradient(180deg, color-mix(in srgb, var(--rk-metall) 92%, #fff 14%), var(--rk-metall) 55%, color-mix(in srgb, var(--rk-metall) 62%, #000 26%)); border:1px solid color-mix(in srgb, var(--rk-metall) 55%, #000 30%); } /* Der beanspruchte Raum über dem Blech: nur angedeutet, denn dort ist Luft — er gehört der Wanne, aber er ist nichts Festes. Ohne die Andeutung sähe eine leere Wanne aus wie ein loser Strich, und dass sie 2 HE belegt, wäre nicht ablesbar. */ .rk-ablage-raum { position:absolute; left:0; right:0; top:0; pointer-events:none; border:1px dashed color-mix(in srgb, var(--rk-metall) 70%, transparent); border-bottom:0; display:flex; align-items:center; justify-content:center; } /* Im Wählmodus: dieser Träger nimmt das gewählte Gerät auf — ein Klick darauf setzt es ein. Ohne die Hervorhebung wäre der Klick auf die Wanne ein Ratespiel. */ .rk-board.picking .rk-dev.nimmt { cursor:copy; z-index:6; } .rk-board.picking .rk-dev.nimmt .rk-blende, .rk-board.picking .rk-dev.nimmt .rk-ablage-raum { border-color:var(--acc); border-style:solid; box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); } .rk-sub-dev { position:absolute; z-index:4; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r-xs); box-shadow:0 1px 3px rgba(0,0,0,.28); } .rk-sub-dev .rk-dev-foto { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:fill; display:block; } .rk-sub-dev.on { border-color:var(--acc); box-shadow:0 0 0 2px var(--acc); } .rk-sub-dev:hover { border-color:var(--acc); } /* Kein Maß im Stamm: der Kasten ist das Fach, nicht das Gerät — gestrichelt und gedämpft, damit eine geschätzte Fläche nicht wie ein Maß aussieht (wie `.pq-vage` bei abgeleiteten Werten). */ .rk-sub-dev.vage { border-style:dashed; opacity:.72; box-shadow:none; } .rk-lg.on { background:var(--acc-l); box-shadow:inset 2px 0 0 var(--acc); } .rk-lg.on .rk-lg-nm { color:var(--acc-t); font-weight:600; } .rk-lg.on .rk-lg-x { opacity:1; } /* Zielband beim Ziehen und im Wählmodus — zeigt vorab, welche HE belegt werden und ob frei */ .rk-ghost { position:absolute; left:0; right:0; z-index:9; pointer-events:none; border:2px dashed var(--acc); background:color-mix(in srgb, var(--acc) 14%, transparent); display:flex; align-items:center; justify-content:center; } .rk-ghost.belegt { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent); } .rk-ghost[hidden] { display:none; } .rk-ghost-lbl { font-family:var(--f-mono); font-size:10.5px; background:var(--acc-f); color:var(--on-acc); padding:1px 6px; border-radius:var(--r); white-space:nowrap; } .rk-ghost.belegt .rk-ghost-lbl { background:var(--warn); color:#fff; } /* Kollision beim Ziehen (seit 30.09.2026): das getroffene Gerät leuchtet rot, ein zweites Band zeigt die nächste freie Lage darüber/darunter — dorthin wird beim Loslassen ausgewichen. */ /* Der Vorschlag ist GRÜN, nicht im Akzent: der Akzent ist in dieser App CI-Rot und läse sich neben dem roten Konfliktband als zweiter Konflikt. Beide Bänder liegen ÜBER dem gezogenen Gerät (z 11), das bei einer Kollision durchscheinend wird — sonst deckte es Band, Beschriftung und das getroffene Gerät zu (am Bild gefunden). */ .rk-ghost { z-index:11; } .rk-ghost.rk-vorschlag { border:2px solid var(--ok); background:color-mix(in srgb, var(--ok) 20%, transparent); } .rk-ghost.rk-vorschlag .rk-ghost-lbl { background:var(--ok); color:#fff; } .rk-rack.kollision .rk-dev.dragging { opacity:.45; } .rk-ghost.ueber { border-style:dotted; } .rk-dev.kollidiert .rk-blende { border-color:var(--warn); box-shadow:inset 0 0 0 3px var(--warn), 0 0 0 2px var(--warn); } /* Blende vor einem Ablageboden: liegt obenauf und ist durchscheinend, damit das Gerät auf der Wanne sichtbar bleibt. Die Befestigung bleibt deckend — die Schrauben sind echt. */ .rk-dev.ueber { z-index:5; } .rk-dev.ueber .rk-blende { background:color-mix(in srgb, var(--rk-metall) 22%, transparent); border-style:dashed; backdrop-filter:blur(.6px); } .rk-dev.ueber .rk-dev-foto { opacity:.35; } /* Beschriftung NEBEN dem Rack statt darauf: das Blendenfoto bleibt frei, lange Namen brauchen keinen Platz im Rack, und die Zeile trägt gleich HE-Bereich, Tiefe und Gewicht. */ .rk-legend { position:relative; } .rk-lg { position:absolute; left:0; right:0; display:flex; align-items:center; gap:7px; padding:2px 4px 2px 12px; font-size:12px; overflow:hidden; } .rk-lg::before { content:''; position:absolute; left:0; top:50%; width:9px; border-top:1px solid var(--bdr); } .rk-lg.hi { background:var(--hover); } .rk-lg-he { font-size:10.5px; color:var(--mut); min-width:30px; } .rk-lg-tx { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; line-height:1.2; overflow:hidden; } .rk-lg-bmk { font-family:var(--f-mono); font-weight:400; color:var(--txt); } .rk-lg-nm { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rk-lg-meta { font-size:10.5px; color:var(--mut); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rk-lg.err .rk-lg-nm { color:var(--warn); } /* Ist eine HE schmaler als zwei Textzeilen, entfällt die Metazeile. Sonst schneidet die Zeile (Höhe = Gerätehöhe, `overflow:hidden`) BEIDE Zeilen mittig durch, und aus Name und Metazeile wird ein unlesbarer Streifen — sichtbar geworden, sobald „einpassen" bei einem 42-HE-Schrank auf ~0,34 px/mm geht und eine HE nur noch 15 px hoch ist. Die Angaben stehen weiter im Tooltip der Zeile. */ .rk-legend.eng .rk-lg-meta { display:none; } .rk-legend.eng .rk-lg-nm { font-size:11px; } .rk-legend.eng .rk-lg { padding-top:0; padding-bottom:0; } /* Reicht es nicht einmal für EINE Zeile, bleibt die Beschriftung leer statt Textscheiben übereinander zu stapeln — der Tooltip der Zeile trägt weiter alles. */ .rk-legend.winzig .rk-lg-tx, .rk-legend.winzig .rk-lg-he { display:none; } .rk-lg-x { border:0; background:none; color:var(--mut); padding:2px; line-height:1; opacity:0; } .rk-lg:hover .rk-lg-x, .rk-lg.hi .rk-lg-x { opacity:1; } .rk-lg-x:hover { color:var(--warn); } /* Anschlüsse auf der Blende: maßstäblich als Stecker, Farbe = Signalart. Blass = Lage nicht erfasst (nur verteilt) — die Unterscheidung muss sichtbar bleiben, sonst wirkt ein Platzhalter wie ein Maß. Über einem echten Blendenfoto werden Platzhalter gar nicht gezeichnet: das Foto zeigt die Anschlüsse bereits, ein geratener Punkt darauf wäre falsch. */ /* Verdrahtung: aus der Buchse waagerecht heraus, senkrecht in einer Bahn am Rand, wieder waagerecht hinein — keine Diagonalen, die gibt es im Rack nicht. Liegt über den Geräten, nimmt aber keine Mausereignisse außer auf der Leitung selbst. */ .rk-kabel { position:absolute; left:0; top:0; z-index:4; pointer-events:none; overflow:visible; } .rk-kabel path { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.92; } .rk-kab-hit { stroke:transparent; stroke-width:11; pointer-events:stroke; } .rk-kab { pointer-events:auto; cursor:help; } .rk-kab:hover path { stroke-width:3.4; opacity:1; } .rk-kab-nr { font-family:var(--f-mono); font-size:9px; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:var(--rk-innen); stroke-width:3px; } /* Bündel zum Kabelaustritt (13.10.2026): Adern dünner als die inneren Leitungen und dicht beieinander, darunter ein blasses Band — der Kabelstrang. Die Marke ist der Griff. */ .rk-board.mit-aus { padding:30px 0; } /* Verdrahtungskanal links und rechts neben dem Schrank (24.10.2026, löst das Wellrohr ab): Innenraum dunkel, davor die Fingerwand in PVC-Grau mit Schlitzen (gestrichelter Strich in Kanalbreite). Grau wie in 3D; die Leitungen liegen darüber. Auf Schirm und Blatt gleich. */ .rk-kabel .rk-kanal-bd { fill:#1B1D20; stroke:#5A5F66; stroke-width:1; } .rk-kabel .rk-kanal-fi { fill:none; stroke:#8E9399; stroke-linecap:butt; opacity:1; } .pdf-blatt .rk-kabel .rk-kanal-bd { stroke-width:.6; } .rk-kabel .rk-kab-aus { stroke-width:1.5; } .rk-austritt { pointer-events:auto; cursor:grab; } .rk-austritt rect { fill:var(--card); stroke:var(--txt); stroke-width:1.2; } .rk-austritt text { font-family:var(--f-mono); font-size:10px; font-weight:700; fill:var(--txt); text-anchor:middle; dominant-baseline:central; } .rk-austritt:hover rect { stroke:var(--acc); stroke-width:2; } .rk-austritt.druck { pointer-events:none; cursor:default; } .rk-ports { position:absolute; inset:0; pointer-events:none; z-index:3; } .rk-port { position:absolute; transform:translate(-50%,-50%) rotate(var(--rot,0deg)); background:var(--pc); border-radius:var(--r-xs); pointer-events:auto; box-shadow:0 0 0 1px rgba(255,255,255,.8), 0 0 0 2px rgba(0,0,0,.45); } .rk-port.f-rund { border-radius:50%; } .rk-port.f-iec { border-radius:35% 35% 8% 8%; } .rk-port.f-rj45 { border-radius:1px 1px 2px 2px; } .rk-port.f-rj45::after { content:''; position:absolute; left:32%; right:32%; top:100%; height:28%; background:var(--pc); } .rk-port.vage { opacity:.4; border-radius:50%; box-shadow:none; } .rk-port.gform { box-shadow:0 0 0 1px rgba(255,255,255,.55); opacity:.8; } /* Form nur geraten */ /* Generische Blende (24.10.2026, wie in 3D): Buchse ohne vermessene Lage auf einem Gerät ohne Foto — voll in ihrer Steckerform, mit dunklem Steckgesicht, gestrichelt umrandet: eine Anordnung, kein Maß. Steht nach `.vage`, hebt dessen Blässe und Kreisform wieder auf. */ .rk-port.vage.gen { opacity:1; border-radius:var(--r-xs); box-shadow:none; outline:1px dashed #C9CDD2; outline-offset:1.5px; } .rk-port.vage.gen.f-rund { border-radius:50%; } .rk-port.vage.gen.f-iec { border-radius:35% 35% 8% 8%; } .rk-port.gen::before { content:''; position:absolute; inset:20% 16%; background:#0E0F11; border-radius:inherit; } .pdf-blatt .rk-port.vage.gen { outline-width:.2mm; outline-offset:.3mm; } .rk-kpi { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; } /* Drei Spalten: Bezeichnung — Zahl (rechtsbündig) — Einheit. Über `space-between` standen Wert und Einheit auseinandergezogen und keine zwei Zahlen fluchteten (Chris 22.09.2026). */ .rk-kpi div { display:grid; grid-template-columns:minmax(0,1fr) auto 52px; align-items:baseline; gap:4px 10px; padding:4px 0; border-top:1px solid var(--bdr); font-size:13px; font-variant-numeric:tabular-nums; } .rk-kpi span { color:var(--mut); font-size:12px; } .rk-kpi .kpi-z { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } .rk-kpi .kpi-e { font-size:11.5px; text-align:left; } .rk-h { font-family:var(--f-display); font-stretch:87.5%; font-size:12px; text-transform:none; letter-spacing:.09em; margin:12px 0 4px; display:flex; align-items:center; gap:6px; } .rk-h.err { color:var(--warn); } .rk-list { margin:0; padding-left:18px; font-size:12px; line-height:1.5; color:var(--mut); } .rk-list.err { color:var(--warn); } /* Schmaler Monitor: Palette und Auswertung rücken UNTER den Schrank und teilen sich die Breite. Der Schrank behält die 1fr-Zeile, damit er weiter die Höhe bekommt — deshalb ist die Palette dort in ihrer Höhe begrenzt. */ @media (max-width: 1360px) { .rk-cols { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; } .rk-side { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:flex-start; overflow:visible; } .rk-side > * { flex:1 1 320px; } /* Nebeneinander gibt es keine Spaltenhöhe, auf die sich 56 % beziehen könnten — hier begrenzt die Liste sich selbst, damit der Schrank seine Zeile behält. */ .rk-pal { max-height:none; } .rk-pal #rk-pal-list, .rk-pal #eb-pal-list { max-height:170px; } /* Technikeinbau (22.09.2026): die Auswertung trägt Hinweise und Legende und wurde bei 1024 px so hoch, dass die Bühne auf einen Streifen schrumpfte — am Bild gefunden. Beide begrenzt. */ #view-technikeinbau .rk-info { max-height:260px; overflow:auto; } /* Die Bühne bekommt eine feste Zeile von 440 px, die Ansicht wächst und die Seite blättert — eine Mindesthöhe allein schob die Bühne über die Karten darunter (am Bild gefunden). */ #view-technikeinbau { flex:0 0 auto; } #view-technikeinbau .rk-cols { grid-template-rows:440px auto; } } /* Unter 900 px übernimmt wieder der SEITENLAUF (Notbehelf, s. §Stack: Desktop-first). Alle Blöcke auf einer Bildschirmhöhe wird für jeden einzelnen zu kurz: gemessen war der Schrank auf 12 px/100 mm gequetscht. */ @media (max-width: 900px) { #view-racks, #view-technikeinbau { flex:0 0 auto; } .rk-cols { display:block; } .rk-cols > * + * { margin-top:14px; } .rk-stage { max-height:70vh; } .rk-side { flex-direction:column; overflow:visible; } .rk-side > * { flex:0 0 auto; } .rk-pal { max-height:none; } .rk-pal #rk-pal-list { max-height:none; overflow:visible; } } /* ---------- Struktur: Kartenköpfe (die Karten Anlagen und Orte sind seit 21.10.2026 durch orte.js ersetzt) ---------- */ .str-hd { display:flex; align-items:center; gap:10px; margin-bottom:2px; } .str-hd h2 { font-family:var(--f-display); font-stretch:87.5%; font-size:14px; text-transform:none; letter-spacing:.09em; margin:0; display:flex; align-items:center; gap:7px; flex:1; } .str-hd h2 i { color:var(--acc); font-size:17px; } /* In den Karten Anlagen und Orte ist der Erklärabsatz entfallen — sein Text steht jetzt im Info-Symbol der Überschrift (Vorgabe Chris 15.08.2026). Damit beginnt die Liste unmittelbar unter dem Kopf und die Karte trägt nur noch Daten. Das Symbol sitzt VOR dem Knopf, also am Ende der Überschrift und nicht am Kartenrand: es erklärt die Überschrift, nicht die Aktion. `.str-note` bleibt bestehen — die Rackplanung führt darunter weiterhin eine Anleitung („Geräte dieses Racks ohne Höheneinheit …“), die kein Erklärsatz ist, sondern sagt, was als Nächstes zu tun ist. */ /* Spezifischer geschrieben statt mit `!important`: der Gegenspieler ist `.view .sub` mit `margin:0 0 18px` — eine Klasse mehr reicht, um ihn zu schlagen. */ .view .sub.str-note { margin:0 0 10px; font-size:12px; line-height:1.45; } .str-hd > .ihint { margin-right:2px; } /* Etwas höhere Knöpfe, aber nur hier: global geändert wirkte es bis in die Tabellenzeilen von Geräteliste und Gerätestamm, wo die Zeilenhöhe an ihnen hängt (Vorgabe Chris 19.08.2026 galt der Struktur-Ansicht). */ #view-struktur .btn { padding:9px 15px; } #view-struktur .btn.sm { padding:6px 11px; } #view-struktur .btn.icon { padding:8px; } .str-code { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12.5px; white-space:nowrap; } .str-bez { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .str-meta { font-size:11.5px; color:var(--mut); } .str-bmk .badge { font-family:var(--f-mono); font-size:11px; padding:1px 6px; border-radius:var(--r); border:1px solid var(--bdr); color:var(--mut); } .str-empty { padding:26px 12px; font-size:13px; line-height:1.5; } .str-empty i { font-size:32px; } /* Statuszeile statt Erklärkarte: Beispiel-BMK + offener Handlungsbedarf, eine Zeile. */ /* Kennzeichnungsart: zwei gleichwertige Spalten nebeneinander — oben das Auswahlfeld, darunter das Beispiel dieser Art. Die Wirkung der Wahl soll man sehen, BEVOR man sie trifft, und zwar an BEIDEN Optionen gleichzeitig (Vorgabe Chris 19.08.2026). Die frühere Kurzvorschau im Auswahlfeld selbst ist damit abgelöst. */ .bmk-modus { padding:15px 17px 16px; margin-bottom:14px; } /* Projekteinstellungen mit Reitern (seit 19.10.2026, Teil C): Reiterleiste wie die Spaltengruppen — aktiver Reiter mit Akzentkante unten; die Karte darunter schließt bündig an. Formular im 12er-Raster (CLAUDE.md: feste Spaltenzahl, Hinweis UNTER dem Feld). */ .pe-reiter { display:flex; gap:2px; border-bottom:1px solid var(--bdr); margin-bottom:14px; } .pe-tab { border:0; background:none; padding:9px 16px 7px; font:inherit; font-family:var(--f-display); font-stretch:87.5%; font-size:14px; color:var(--mut); border-bottom:3px solid transparent; margin-bottom:-1px; cursor:pointer; } .pe-tab:hover { color:var(--txt); } .pe-tab.an { color:var(--acc-t); border-bottom-color:var(--acc); font-weight:600; } .pe-tab:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; border-radius:var(--r); } .pe-panel[hidden] { display:none; } .pe-panel:not(.bmk-modus) { padding:16px 18px; margin-bottom:14px; max-width:1100px; } .pe-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:14px 16px; align-items:start; } .pe-grid .w3 { grid-column:span 3; } .pe-grid .w6 { grid-column:span 6; } .pe-grid .w9 { grid-column:span 9; } .pe-grid .w12 { grid-column:1/-1; } .pe-grid textarea.inp { resize:vertical; min-height:64px; font:inherit; } .pe-hinweis { font-size:12px; color:var(--mut); } .pe-aktionen { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid var(--bdr); } .pe-bet { width:100%; margin-bottom:12px; } .pe-bet td { padding:4px 6px; } .pe-bet td .inp { width:100%; } .pe-bet th.akt, .pe-bet td.akt { width:44px; } @media (max-width:900px){ .pe-grid .w2, .pe-grid .w3, .pe-grid .w6, .pe-grid .w9 { grid-column:1/-1; } } .pe-aktionen .sp { flex:1; } .pe-aktionen { align-items:center; } /* Seit 19.10.2026: Route ab Buchbach unter einer Adresse (AVP.routeLink), Reiter Termine mit Meilensteinen, Beteiligte mit QR-Code und vCard, Dialog #ov-qr. */ .pe-route:empty { display:none; } .route-link { display:inline-flex; align-items:center; gap:4px; margin-top:5px; font-size:12px; color:var(--acc-t); text-decoration:none; } .route-link:hover { text-decoration:underline; } .route-link .ti { font-size:14px; } .pe-unter { display:flex; align-items:center; gap:6px; margin:22px 0 8px; font-family:var(--f-display); font-stretch:87.5%; font-size:15px; font-weight:600; } .pe-ms th.ms-dat, .pe-ms td.ms-dat { width:160px; } .pe-ms th.ms-erl, .pe-ms td.ms-erl { width:72px; text-align:center; } .pe-ms th.ms-st, .pe-ms td.ms-st { width:120px; } .pe-bet th.bet-akt, .pe-bet td.bet-akt { width:124px; white-space:nowrap; } .qr-modal { max-width:380px; } .qr-modal .modal-bd { align-items:center; text-align:center; } .qr-bild { width:260px; max-width:100%; aspect-ratio:1; background:#fff; border-radius:var(--r); padding:6px; } .qr-bild svg { display:block; width:100%; height:100%; } .bsp-menge { flex-basis:100%; } /* Assistent „Neues Projekt" (seit 19.10.2026, Teil D): Schritte oben im Dialog wie der Zeitstrahl der Übersicht, drei Startkarten, danach die Leiste über den Reitern der Projekteinstellungen. */ .nw-modal { width:min(920px, calc(100vw - 32px)); max-width:none; } .nw-schritte { list-style:none; margin:0; padding:12px 20px 0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; } /* so viele Spalten wie Schritte (seit 19.10.2026 sechs) */ .nw-schritte li { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--mut); } .nw-strich { height:5px; border-radius:3px; background:var(--bdr); } .nw-schritte li.fertig { color:var(--ok); } .nw-schritte li.fertig .nw-strich { background:var(--ok-f); } .nw-schritte li.jetzt { color:var(--acc-t); font-weight:600; } .nw-schritte li.jetzt .nw-strich { background:var(--acc); } .nw-frage { margin:0 0 12px; font-size:16px; } .nw-starts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:16px; } .nw-start { display:flex; flex-direction:column; gap:6px; text-align:left; padding:14px 16px; border:1px solid var(--bdr); border-radius:var(--r-k); background:var(--card); color:inherit; font:inherit; cursor:pointer; } .nw-start span { color:var(--mut); font-size:13px; } .nw-start:hover { border-color:var(--hover-bdr); } .nw-start.an { border:2px solid var(--acc); background:var(--acc-l); padding:13px 15px; } .nw-quelle { display:flex; flex-direction:column; gap:10px; max-width:520px; } .nw-orte { display:flex; align-items:center; gap:8px; } .nw-orte input { width:18px; height:18px; } @media (max-width:720px){ .nw-starts { grid-template-columns:1fr; } } .pe-assistent { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:8px 12px; border:1px solid var(--acc); border-radius:var(--r); background:var(--acc-l); color:var(--txt); } .pe-assistent[hidden] { display:none; } .pe-assistent > i { color:var(--acc-t); font-size:18px; } .pe-assistent .sp { flex:1; } /* ---------- Planungsumfang (Struktur-Ansicht, 22.09.2026) ---------- Eine Zeile je Modul: Schalter, Symbol, Name, dahinter gedämpft der Inhalt. Der Schalter ist eine Checkbox in Schaltergestalt — Tastatur und Sprachausgabe bekommen das native Element, das Auge den Schieber. Die Geräteliste trägt statt des Schalters ein Schloss. */ .umf-liste { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:4px 22px; } .umf-z { display:grid; grid-template-columns:34px 20px auto 1fr; align-items:center; gap:9px; padding:7px 6px; border-radius:var(--r); cursor:pointer; min-width:0; } .umf-z:hover { background:var(--card-2); } .umf-z.fest { cursor:default; } .umf-sw { position:relative; width:34px; height:18px; display:block; } .umf-sw input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; } .umf-sw > i:last-child { position:absolute; inset:0; border-radius:9px; background:var(--bdr); transition:background .15s; } .umf-sw > i:last-child::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; } .umf-z.on .umf-sw > i:last-child { background:var(--acc-f); } .umf-z.on .umf-sw > i:last-child::after { transform:translateX(16px); } .umf-sw input:focus-visible + i { outline:2px solid var(--acc); outline-offset:2px; } .umf-sw > i.ti { position:static; font-size:15px; color:var(--mut); display:flex; align-items:center; justify-content:center; height:18px; } .umf-z.fest .umf-sw > i:last-child { display:none; } .umf-ic { font-size:17px; color:var(--mut); opacity:.8; } .umf-z.on .umf-ic { color:var(--acc); opacity:1; } .umf-t { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:13px; white-space:nowrap; } .umf-z:not(.on) .umf-t { color:var(--mut); } /* Der Inhalt darf umbrechen (Rundgang 26.09.2026): mit Auslassungspunkten stand bei 1440 px „19"-Schränke bestücken, Rackplan und Rackbel…" — der Satz, der erklärt, was ein Modul tut, ist genau der, den man beim Einschalten lesen will. */ /* Pflichtangaben der Projekteinstellungen (seit 21.10.2026): Sternchen wie in Formularen üblich — im Akzent, nicht in Statusrot (Rot gehört dem Status). Was fehlt, sagt die Übersicht (`AVP.projektPflicht`). */ .pflichtfeld::after { content:' *'; color:var(--acc-t); font-weight:700; } .pe-pf-legende { margin:12px 0 0; font-size:12px; color:var(--mut); } .pe-pf-legende .pflichtfeld::after { content:'*'; } .pe-grid .w2 { grid-column:span 2; } @media (max-width:1300px){ .pe-grid .w2 { grid-column:span 4; } } @media (max-width:900px){ .pe-grid .w2 { grid-column:1/-1; } } .pe-adr { min-height:72px; line-height:1.45; } .pe-adr:disabled { opacity:.75; cursor:not-allowed; } .pe-wie { display:flex; align-items:center; gap:8px; height:32px; font-size:13px; cursor:pointer; } .pe-wie input { margin:0; accent-color:var(--acc-f); } .pe-erl { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); cursor:pointer; } .pe-erl input { margin:0; accent-color:var(--acc-f); } .pe-erl span { color:var(--ok); font-weight:600; } .pe-bet-gr th { padding:10px 6px 4px; text-align:left; font-family:var(--f-display); font-weight:600; font-size:12px; color:var(--mut); background:transparent; border:none; } .gi-adr { white-space:pre-line; } .pe-bet .bet-rolle { width:1%; font-weight:600; white-space:nowrap; padding-left:10px; } /* so schmal wie der Text, den Rest bekommen die Felder */ .bm-hd { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px; } .bm-hd h2 { font-family:var(--f-display); font-stretch:87.5%; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; margin:0; display:flex; align-items:center; gap:7px; } .bm-hd .sub { margin:0; font-size:12px; } .bm-wahl { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; } .bm-sp { display:grid; grid-template-rows:auto 1fr; gap:8px; } .bm-opt { display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--hover-bdr); border-radius:var(--r); cursor:pointer; } .bm-opt:hover { border-color:var(--acc); } .bm-opt.on { border-color:var(--acc); box-shadow:inset 2px 0 0 var(--acc); background:var(--card-2); } .bm-opt input { flex:none; margin:0; accent-color:var(--acc); } /* Titelzeile trägt das Info-Symbol der Option — der frühere Erklärabsatz `.bm-i` darunter ist entfallen. Ohne ihn ist die Karte nur noch Name + Musterkennzeichen, also genau das, worauf man bei der Wahl schaut. */ .bm-t { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; font-size:13px; display:flex; align-items:center; gap:5px; } /* ---------- Beispielkennzeichen UNTER den Karten (seit 19.08.2026) ---------- Es war eine schmale Zeile ÜBER Anlagen und Orten und las sich dort wie eine Statusleiste — dabei ist es das ERGEBNIS der beiden Karten (Vorgabe Chris 19.08.2026: „das Beispiel würde ich unter Orte und Anlagen setzen und klarer beschriften, dass es sich um ein Beispiel handelt"). Die Klammern benennen die Aspekte am Kennzeichen selbst; in Prosa daneben hat das bis hierher niemand gelesen. Die Segmentbreite ist max(Klammertext, Kennzeichenteil) — die Teile stehen dadurch etwas auseinander. Das ist gewollt: es ist eine Erklärgrafik, keine Etikettenvorschau (die steht als Kurzform in der Fußzeile). Deshalb sind die Beschriftungen zweizeilig und kurz. */ .bsp-box { position:relative; padding:11px 12px 12px; background:var(--card-2); border:1px solid var(--bdr); border-radius:var(--r); } .bsp-hd { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:7px; } .bsp-tag { font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:10.5px; color:var(--acc); padding:1px 6px; border:1px solid var(--acc); border-radius:var(--r); } .bsp-sub { font-size:12px; color:var(--mut); } .bsp-sub b { color:var(--txt); font-weight:600; } .bsp-sub .mono { font-family:var(--f-mono); font-size:12px; } .bsp-zeile { display:flex; align-items:flex-end; flex-wrap:wrap; } .bsp-seg { display:flex; flex-direction:column; align-items:center; min-width:0; } .bsp-l { display:flex; flex-direction:column; align-items:center; text-align:center; font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.06em; font-size:9.5px; color:var(--mut); padding:0 6px 4px; line-height:1.25; } .bsp-l b { font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:11px; font-weight:400; opacity:.85; } /* Klammer wie in einer Maßzeichnung: nach unten offener Bügel über der ganzen Segmentbreite. */ .bsp-kl { align-self:stretch; height:6px; border:1px solid var(--hover-bdr); border-bottom:none; border-radius:var(--r) var(--r) 0 0; } .bsp-t { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:15px; letter-spacing:.02em; padding:4px 6px 0; } .bsp-fuss { display:flex; align-items:center; flex-wrap:wrap; gap:5px 14px; margin-top:10px; padding-top:8px; border-top:1px solid var(--bdr); } .bsp-et { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--mut); } .bsp-et .mono { font-family:var(--f-mono); font-size:12.5px; color:var(--txt); } /* Das Info-Symbol des Blocks sitzt in der Ecke, nicht im Textfluss — sonst stünde es je nach Zahl der offenen Punkte an einer anderen Stelle. */ .str-offen { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--warn); } /* Kein Mangel, sondern eine Abkürzung: die Rackplanung verortet beim Einbau selbst. Deshalb gedämpft und mit Rack-Symbol, nicht im Warnrot der offenen Punkte daneben. */ .str-rackhint { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); margin-left:14px; } .str-rackhint .ti { font-size:14px; opacity:.8; } .str-bmk { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:7px 0; } .str-bmk .mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:13px; } .str-bmk .mono.big { font-size:17px; letter-spacing:.02em; } /* Assistent */ .sa-tbl { width:100%; } .sa-tbl .inp.sm, .btn.sm.sa-eb { padding:2px 7px; font-size:12px; } .sa-eb { width:100%; justify-content:center; } .sa-opt { display:flex; align-items:center; gap:8px; font-size:13px; } .sa-tbl .inp.dup { border-color:var(--warn); color:var(--warn); } /* BMK-Klasse in der Geräteliste: vergeben = fester Rahmen, nur vorgeschlagen = gestrichelt und gedämpft (gleiche Sprache wie .pq-vage bei den Ports). */ .klbadge { font-family:var(--f-mono); font-size:11px; font-weight:600; padding:1px 6px; border:1px solid var(--bdr); border-radius:var(--r); } .klbadge.vage { opacity:.55; border-style:dashed; font-weight:400; } .tbl .sub-inline { color:var(--mut); font-size:11.5px; } /* Normtext im Drawer — Fachbegriff steht im Dropdown, der Wortlaut nur auf Anforderung */ .normtext { font-size:11.5px; color:var(--mut); line-height:1.45; } .normtext summary { cursor:pointer; color:var(--mut); } .normtext summary:hover { color:var(--acc); } .normtext span { display:block; padding:4px 0 0 2px; } .view .sub.warn, .drawer .sub.warn { color:var(--warn); display:flex; align-items:flex-start; gap:7px; font-size:12px; line-height:1.45; margin:0; } .view .sub.warn i, .drawer .sub.warn i { font-size:15px; flex-shrink:0; } .sub.warn[hidden] { display:none; } /* display:flex hebelt hidden aus (s. Kritische Regeln) */ /* .mono/.mut waren bisher nur innerhalb von .tbl definiert — hier generisch für Fließtext, Modals und die BMK-Vorschau. .tbl .mono bleibt spezifischer und gewinnt dort weiterhin. */ .sub .mono, .hint .mono, label .mono { font-family:var(--f-mono); font-size:.95em; } .sub .mut { color:var(--mut); } .hint { font-size:11.5px; color:var(--mut); line-height:1.4; } /* ---------- Info-Symbol mit Sprechblase (seit 15.08.2026) ---------- Ersetzt Erklärtext, der dauerhaft in der Ansicht steht (s. AVP.info in ui.js). Das Symbol leuchtet beim Überfahren im Akzent auf, die Blase trägt den Satz. Rein in CSS, damit sie jeden innerHTML-Neuaufbau überlebt — und über :focus-visible auch mit der Tastatur erreichbar, sonst wäre der Text ohne Maus schlicht weg. KEIN Pfeil an der Blase: die Tabler-Icons belegen ::before mit ihrem Glyph, es bleibt genau ein Pseudoelement übrig — und im Reissbrett-Stil ist eine Blase mit Haarlinie ohnehin ruhiger als eine mit Zipfel. */ .ihint { position:relative; display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; flex:none; border-radius:50%; vertical-align:-4px; color:var(--mut); font-size:15px; cursor:help; transition:color .12s, background .12s; } .ihint:hover, .ihint:focus, .ihint.auf { color:var(--acc); background:var(--acc-l); } .ihint::after { content:attr(data-info); /* --ih-x rechnet ui.js beim Überfahren aus, damit die Blase am rechten Rand nicht aus der Ansicht läuft. Der Vorgabewert ist die Regellage, falls noch nichts gerechnet wurde. */ position:absolute; top:calc(100% + 6px); left:var(--ih-x, -9px); z-index:70; width:max-content; max-width:min(400px, 68vw); white-space:pre-line; text-align:left; /* Kurzschrift `font` setzt auch die Icon-Schriftfamilie zurück — sonst käme der Text in tabler-icons und damit als Kästchensalat. */ font:12px/1.55 var(--f-body); font-weight:400; letter-spacing:0; text-transform:none; padding:9px 12px; color:var(--txt); background:var(--card); border:1px solid var(--hover-bdr); border-radius:var(--r); box-shadow:var(--sh-2); /* In Ruhe `display:none`, nicht nur unsichtbar (Befund 26.09.2026): eine Blase mit `visibility:hidden` zählt trotzdem zum Scrollbereich ihres Containers — die 400 px breite Blase am Archiv-Kopf gab dem Projektbrett bei 1440 px einen waagerechten Rollbalken, und dasselbe droht jeder Karte mit Info-Symbol am rechten Rand. Das Einblenden läuft über `@starting-style`, damit der Übergang von `none` aus weiter weich ist. */ display:none; opacity:0; transition:opacity .12s .12s; } @starting-style { .ihint:hover::after, .ihint:focus::after, .ihint.auf::after { opacity:0; } } /* **`:focus` statt `:focus-visible`, dazu `.auf`** (Audit 10.09.2026, D-07). Ein Tipp auf ein Element mit `tabindex` erzeugt KEIN `:focus-visible` — auf dem Tablet war damit der gesamte Erklaertext der App unerreichbar, und er ist die einzige Stelle, an der die Begruendungen stehen. `.auf` setzt ui.js beim Antippen; ein zweiter Tipp oder ein Tipp daneben nimmt sie zurueck. Fuer die Maus aendert sich nichts — sie hat weiterhin `:hover`. */ .ihint:hover::after, .ihint:focus::after, .ihint.auf::after { display:block; opacity:1; } /* Unten kein Platz: die Blase kippt über das Symbol (Klasse setzt ui.js). */ .ihint.ihint-oben::after { top:auto; bottom:calc(100% + 6px); } /* ---------- Handlungsanweisung als Stichpunkt (seit 19.08.2026) ---------- Vorgabe Chris: „bei Kennzeichnung einen offensichtlichen Stichpunkt: wähle die Art der BMK-Zuweisung — klare Anweisung mit einem Stichpunkt überall". Sie ersetzt die Info-Symbole NICHT (ausdrücklich „erstmal drin lassen"), sondern trennt zwei Dinge, die vorher beide im Symbol lagen: was zu TUN ist, steht sichtbar; was die Felder BEDEUTEN, bleibt im Symbol. Deckt sich mit der Regel §Erklärtext gehört ins Info-Symbol — dort ist die Anleitung der Rackplanung schon als Ausnahme benannt: sie erklärt nicht, sie sagt an. */ .anw { position:relative; padding-left:16px; margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--txt); } .anw::before { content:'▸'; position:absolute; left:0; top:0; color:var(--acc); font-size:13px; } .anw b { font-weight:600; } .bmk-modus .anw { margin-bottom:13px; } /* Vorlagen im Anlagen-Modal — Vorschläge, keine Auswahl (der Code ist frei, s. core.js) */ .anl-vorl { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; } .anl-vorl-l { font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:11px; color:var(--mut); margin-right:2px; } .anl-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; font-size:12px; background:none; border:1px solid var(--bdr); border-radius:var(--r); color:var(--txt); cursor:pointer; font-family:var(--f-body); } .anl-chip .mono { font-family:var(--f-mono); font-size:11px; color:var(--mut); } .anl-chip:hover { border-color:var(--acc); color:var(--acc); } .anl-chip:hover .mono { color:var(--acc); } /* ---------- Schmale Schirme: Seitenleiste als Auszug (Audit 10.09.2026, Befund D-02) ---------- Bis dahin verschwand die Navigation unter 900 px ersatzlos — am Tablet und am Smartphone liess sich die Ansicht dann gar nicht mehr wechseln, und genau dort wird gearbeitet (Baustelle, Antwort 5 des Auftraggebers). Sie faehrt jetzt ueber den Menuknopf in der Topbar aus und legt sich als Auszug ueber die Ansicht; ein Klick daneben schliesst sie. Auf breiten Schirmen bleibt alles wie bisher — der Knopf ist dort nicht vorhanden. */ .nav-toggle { display:none; } .nav-schatten { display:none; } @media (max-width: 900px) { .app, .app.nav-schmal { grid-template-columns:1fr; } /* Einklappen gibt es hier nicht — die Leiste ist ohnehin ein Auszug. */ .nav-klapp { display:none; } .app.nav-schmal .sidebar { padding:12px 0; } .app.nav-schmal .nav-item { font-size:15px; gap:10px; justify-content:flex-start; padding:12px 20px; } .app.nav-schmal .nav-cap { font-size:10.5px; padding:14px 20px 4px; margin:0; border-top:none; } .main { padding:14px; } .nav-toggle { display:inline-flex; } .sidebar { position:fixed; top:64px; left:0; bottom:0; width:250px; z-index:90; transform:translateX(-100%); transition:transform .18s ease; box-shadow:var(--sh); } .sidebar.auf { transform:translateX(0); } .nav-schatten { display:block; position:fixed; inset:64px 0 0 0; z-index:89; background:rgba(0,0,0,.45); } .nav-schatten[hidden] { display:none; } /* Auf dem Touchgeraet sind 36 px die untere Grenze fuer einen sicheren Treffer. */ .nav-item { padding:12px 20px; font-size:15px; } } @media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } } /* ═══════════════════════════════════════════════════════════════════════════════════════ Grundriss (grundriss.js, seit 18.08.2026) ═══════════════════════════════════════════════════════════════════════════════════════ 2D-Ansicht von oben. Gezeichnet wird in Weltmetern; alle Striche tragen `vector-effect:non-scaling-stroke`, bleiben also in jeder Vergrößerung gleich dünn — sonst wäre eine Wandlinie beim Hineinzoomen fingerdick und beim Herauszoomen unsichtbar. Farbe in der Fläche gehört den Signalarten (s. §Design): die Geräte tragen ihr Leitsignal über `--sig`, alles andere ist neutral. Die Montageebene wird über Dämpfung geführt und nicht über eine weitere Farbe. */ /* Zwei Spalten: Plan · Palette und Eigenschaften. Die Werkzeugspalte vom 18.08.2026 ist am 23.08.2026 der einzeiligen Leiste gewichen (Vorgabe Chris, gleiche Optik in allen Ansichten) — ein Grundriss ist breit, und 196 px Spalte kosteten genau dort. */ .gr-cols { display:grid; grid-template-columns:minmax(0,1fr) 330px; grid-template-rows:minmax(0,1fr); gap:14px; flex:1 1 auto; min-height:0; } /* Der Bildschirmmaßstab steht am Ende der Zoomgruppe — eine Zahl, kein Knopf. Die feste Mindestbreite haelt die Zeile ruhig: ohne sie ruecken die Zoomknoepfe bei jedem Schritt, weil „1:50" schmaler ist als „1:200". Bis zum 10.09.2026 stand die Klasse ZWEIMAL in dieser Datei; die zweite Regel gewann und faerbte gedaempft statt im Akzent. */ .gr-ms { font-size:11px; color:var(--mut); margin:0 2px; padding:0 4px; min-width:58px; text-align:right; white-space:nowrap; } /* Rastermaß im Klappmenü „Hilfen": Auswahlfeld über einer Eingabe in Zentimetern. */ .tbm-eigen { padding:4px 9px 7px; display:flex; flex-direction:column; gap:6px; min-width:190px; } .tbm-t { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--mut); padding:7px 9px 2px; } .gr-stage { position:relative; min-height:300px; overflow:hidden; padding:0; } /* --gr-ink / --gr-paper: Strich- und Halofarbe der Zeichnung. Sie folgen dem Thema — AUSSER es liegt ein Blatt darunter (Klasse `blatt`, gesetzt von zeichne()). Dann gilt die Papierpalette, sonst verschwindet die eigene Zeichnung auf dem weißen Plan. */ #gr-svg { width:100%; height:100%; display:block; cursor:default; user-select:none; background:var(--bg); --gr-ink:var(--txt); --gr-paper:var(--bg); --gr-mut:var(--mut); } #gr-svg.blatt { --gr-ink:#15171A; --gr-paper:#FFFFFF; --gr-mut:#5C6066; } /* Die Druckkopie verliert die id `gr-svg` und damit diese drei Token — ohne sie haben Zeichnung, Wände und Türen KEINE Strichfarbe, und auf dem Blatt standen nur die Raumflächen (Rückmeldung Chris 21.10.2026). Gedruckt wird immer die Papierpalette. */ .gr-print { --gr-ink:#15171A; --gr-paper:#FFFFFF; --gr-mut:#5C6066; } #gr-svg.greifen { cursor:grab; } #gr-svg.zeichnen { cursor:crosshair; } /* **Auch die Druckkopie braucht das** — sie verliert ihre `id`, und ohne diese Regel sind alle Strichstärken plötzlich WELTmaße: aus 1,6 px Geräteumriss werden 1,6 METER, aus dem 3-px-Halo der Beschriftung 3 m weiße Fläche. Auf dem Blatt lag der Plan dadurch unter farbigen Klecksen (Bildkontrolle 18.08.2026 — in der reinen Maßprüfung davor war nichts davon zu sehen, die Größen stimmten ja alle). */ #gr-svg *, .gr-print * { vector-effect:non-scaling-stroke; } .gr-grid-l { stroke:var(--bdr); stroke-width:1; opacity:.7; } /* Eingelesene CAD-Zeichnung: EIN Pfad je Layer, deshalb kann sie nur EINE Strichfarbe haben. Das ist Absicht — die Zeichnung ist Unterlage, nicht Aussage; was farbig ist, gehört der Planung (Signalarten, Räume, Auswahl). */ .gr-geo { fill:none; stroke:var(--gr-mut); stroke-width:1; opacity:.75; } .gr-geo-t { fill:var(--gr-mut); opacity:.8; font-family:var(--f-body); } /* Angelegte Räume heben sich von der grau-weißen Zeichnung ab (seit 22.10.2026, Rückmeldung Chris): getönt im Akzent, Kante im Akzent; ohne Ort gestrichelt. Gewählt kräftiger — die Gestalt (Breite, Deckkraft) trägt den Unterschied. */ .gr-raum { fill:var(--acc); fill-opacity:.08; stroke:var(--acc); stroke-width:1.6; stroke-opacity:.7; cursor:pointer; } .gr-raum.ohne { stroke-dasharray:6 4; fill-opacity:.05; } .gr-raum:hover { fill-opacity:.13; stroke-opacity:.95; } .gr-raum.on { stroke:var(--acc); stroke-width:2.6; stroke-opacity:1; fill:var(--acc); fill-opacity:.16; stroke-dasharray:none; } .gr-raum-t { fill:var(--gr-ink); paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; font-family:var(--f-display); font-stretch:87.5%; font-size:12px; letter-spacing:0; text-transform:none; } .gr-raum-t2 { fill:var(--gr-mut); paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; font-family:var(--f-mono); font-size:10px; } /* Gerät: Fußabdruck in echter Größe, Füllung im Leitsignal. Die Vorderkante sagt, wohin es zeigt — ohne sie ist eine Drehung um 180° an einem Rechteck nicht zu sehen. */ .gr-dev { cursor:pointer; } .gr-dev rect, .gr-dev circle { fill:var(--sig); fill-opacity:.22; stroke:var(--sig); stroke-width:1.6; } .gr-dev .gr-front { stroke:var(--sig); stroke-width:2.6; fill:none; } .gr-dev .gr-greif { fill:none; stroke:var(--sig); stroke-width:1; stroke-opacity:.45; } .gr-dev:hover rect, .gr-dev:hover circle { fill-opacity:.36; } /* Geschätzte Grundfläche gestrichelt — dieselbe Bildsprache wie `.pq-vage`: eine Schätzung darf nie wie ein Maß aussehen. */ .gr-dev.vage rect, .gr-dev.vage circle { stroke-dasharray:4 3; fill-opacity:.12; } /* Nicht die aktive Montageebene: gedämpft, NICHT ausgeblendet — sonst sucht man ein Gerät, das nur unsichtbar ist. */ .gr-dev.dim { opacity:.22; } .gr-dev.inaktiv rect, .gr-dev.inaktiv circle { stroke-dasharray:3 3; fill-opacity:.06; } .gr-dev.inaktiv { opacity:.5; } /* Die Auswahl steht NACH den Sonderformen: gleiche Spezifität, spätere Regel gewinnt — sonst wäre ausgerechnet ein gedämpftes oder geschätztes Gerät nicht als gewählt zu erkennen. */ .gr-dev.on rect, .gr-dev.on circle { stroke:var(--acc); stroke-width:2.6; stroke-dasharray:none; } .gr-dev.on { opacity:1; } .gr-dev-t { fill:var(--gr-ink); font-family:var(--f-mono); font-size:11px; paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; } .gr-dev-t.dim { opacity:.3; } .gr-kabel { fill:none; stroke-width:1.6; opacity:.85; } .gr-kabel:hover { stroke-width:3; opacity:1; } /* Strichart und Farbe des Maßes stehen weiter unten bei der Bauzeichnungs-Optik (Endstriche, durchgezogen) — hier nur, was dort nicht wiederholt wird. Bis zum 10.09.2026 stand beides doppelt: gestrichelt im Akzent hier, durchgezogen in Tuschefarbe dort. Gewonnen hat immer die zweite Fassung, die erste war Papier. */ .gr-mass { fill:none; cursor:pointer; } .gr-mass-t { font-family:var(--f-mono); font-size:11px; paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; } .gr-txt { fill:var(--gr-ink); font-family:var(--f-body); font-size:12px; cursor:pointer; paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; } .gr-txt.on { fill:var(--acc-t); } .gr-temp { fill:var(--acc); fill-opacity:.07; stroke:var(--acc); stroke-width:1.6; stroke-dasharray:5 3; } .gr-temp-p { fill:var(--acc); stroke:var(--on-acc); stroke-width:1; } .gr-band { fill:var(--acc); fill-opacity:.08; stroke:var(--acc); stroke-width:1; stroke-dasharray:4 3; } /* `.gr-hint` ist seit 23.08.2026 ein `.stage-msg.tun` im gemeinsamen Stapel — eigene Lage und eigene Farben braucht es nicht mehr. */ /* ---------- Palette und Eigenschaften ---------- */ .gr-side { display:flex; flex-direction:column; gap:14px; min-width:0; overflow:auto; } .gr-pal, .gr-props { padding:14px 16px 12px; } /* Wie in der Rackplanung: die Palette bekommt höchstens gut die Hälfte der Spalte und scrollt innen — sonst schiebt sie bei 250 Deckenlautsprechern die Eigenschaften aus dem Bild. */ .gr-pal { display:flex; flex-direction:column; min-height:0; max-height:54%; gap:8px; } .gr-pal #gr-pal-list { overflow:auto; min-height:80px; margin:0 -6px; padding:0 6px; } .gr-props { min-height:0; overflow:auto; } .gr-pal-gr { display:flex; align-items:center; gap:7px; font-family:var(--f-display); font-stretch:87.5%; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:none; color:var(--mut); margin:10px 0 4px; } .gr-pal-gr:first-child { margin-top:0; } .gr-pal-gr .badge { margin-left:auto; } .gr-pal-it { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:1px solid transparent; border-radius:var(--r); padding:5px 7px; cursor:pointer; color:var(--txt); font:inherit; } .gr-pal-it:hover { background:var(--hover); border-color:var(--hover-bdr); } .gr-pal-it.on { border-color:var(--acc); background:var(--acc-l); } .gr-pal-it .sigbar { margin:0; flex:none; } .gr-pal-it .sigbar.leer { background:var(--bdr); } .gr-pal-tx { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.25; } .gr-pal-tx b { font-family:var(--f-mono); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gr-pal-tx .sub { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gr-pal-m { flex:none; font-family:var(--f-mono); font-size:10px; color:var(--mut); } /* Ersatzmaß auch in der Liste als solches kennzeichnen — dieselbe Aussage wie das gestrichelte Symbol im Plan. */ .gr-pal-m.vage { border-bottom:1px dashed var(--mut); opacity:.75; } /* Palette nach Raum (seit 21.10.2026): Kopf je Raum-Ort, klappbar, Ziel zeigt den Planraum */ .gr-pal-gr.gr-pal-ort { cursor:pointer; font-family:var(--f-body); font-stretch:normal; font-size:12px; font-weight:600; letter-spacing:0; color:var(--txt); padding:4px 4px; margin:8px 0 2px; border-radius:var(--r); min-height:28px; } .gr-pal-gr.gr-pal-ort:hover { background:var(--hover); } .gr-pal-pf { transition:transform .15s; color:var(--mut); flex:none; } .gr-pal-ort.zu .gr-pal-pf { transform:rotate(-90deg); } .gr-pal-oc { font-family:var(--f-mono); font-size:11px; font-weight:500; flex:none; } .gr-pal-ob { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gr-pal-ort .badge { flex:none; } .gr-pal-ziel { flex:none; margin-left:auto; height:24px; width:24px; min-height:0; padding:0; } .gr-pal-ziel + .badge { margin-left:0; } .gr-pal-los { flex:none; margin-left:auto; color:var(--mut); opacity:.6; font-size:14px; } .gr-pal-los + .badge { margin-left:0; } .gr-pal-lage { flex:none; color:var(--mut); font-size:14px; } body.gr-ziehen, body.gr-ziehen * { cursor:copy !important; user-select:none; } .gr-pr-kopf { display:flex; flex-direction:column; gap:1px; margin:0 0 10px; } .gr-pr-kopf b { font-family:var(--f-mono); font-size:14px; } .gr-layer { display:flex; flex-direction:column; gap:1px; max-height:210px; overflow:auto; border:1px solid var(--bdr); border-radius:var(--r); padding:4px; } /* `flex-start`, weil unter dem Namen der Grund der Einordnung steht (s. `.gr-lay-gr`): die Zeile ist zweizeilig, und mittig ausgerichtet saessen Haekchen und Farbfeld dann auf der Mitte beider Zeilen statt an der ersten. */ .gr-lay { display:flex; align-items:flex-start; gap:8px; padding:3px 6px; border-radius:var(--r); cursor:pointer; font-size:12px; } .gr-lay:hover { background:var(--hover); } .gr-imp-lay { max-height:230px; } /* Eine Zeile der Ebenenliste — im Plan-Import UND im Eigenschaftenbereich dieselbe Aufteilung: Farbkaestchen, Name, Anzahl. Bis zum 10.09.2026 war der Name im Eigenschaftenbereich ein klassenloses `` und wurde ueber `span:first-of-type` erwischt — im Import traf dieser Selektor dann das FARBKAESTCHEN und zerrte es ueber die halbe Zeile, was drei `!important` nach sich zog. Beide Markups tragen jetzt dieselben Klassen, und die Sonderregeln entfallen. */ .gr-lay-farb { flex:none; width:11px; height:11px; border-radius:var(--r-xs); border:1px solid var(--bdr); } .gr-lay-n { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-mono); } .gr-lay-z { flex:none; font-family:var(--f-mono); font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; } .gr-lay.aus .gr-lay-n, .gr-lay.aus .gr-lay-z { opacity:.45; text-decoration:line-through; } /* Ebene löschen (seit 21.10.2026): leise, erst beim Überfahren der Zeile deutlich */ .gr-lay-weg { flex:none; width:22px; height:22px; min-height:0; padding:0; margin:-3px -4px -3px 0; opacity:.45; } .gr-lay:hover .gr-lay-weg, .gr-lay-weg:focus-visible { opacity:1; } @media (hover:none){ .gr-lay-weg { opacity:.7; } } .gr-lay-kopf { display:flex; align-items:center; gap:6px; margin:8px 0 4px; } /* Kategorieüberschrift in der Ebenenliste. Sie sagt in einem Wort, was die Zeilen darunter sind — an „Strich 0,18 pt" ist das nicht zu erkennen, und genau daran ist die erste Fassung gescheitert. */ .gr-lay-grp { display:flex; align-items:baseline; gap:8px; padding:7px 6px 3px; font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:11px; border-top:1px solid var(--bdr); margin-top:3px; } .gr-lay-grp:first-child { border-top:0; margin-top:0; padding-top:2px; } .gr-lay-grp .sub { font-size:10px; text-transform:none; letter-spacing:0; font-family:var(--f-body); } .gr-lay-grp.aus { color:var(--mut); } /* Der Grund steht unter dem Namen, nicht dahinter: dahinter konkurriert er mit den Zahlen rechts, und bei zwanzig Zeilen liest ihn dann niemand. */ .gr-lay-gr { display:block; font-family:var(--f-body); font-size:10px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gr-lay input, .gr-lay-farb { margin-top:2px; } .gr-spar { font-family:var(--f-mono); font-size:11px; color:var(--ok); font-variant-numeric:tabular-nums; } /* Was weggelassen wurde — die Antwort auf „ggf. mit Info was entfernt wurde". */ .gr-weg { display:flex; gap:6px; align-items:baseline; margin-top:6px; } .gr-weg i { flex:none; } /* ─── Griffe: jedes Objekt wird IN der Zeichnung geändert ─── Quadrate wie im CAD, in fester Bildgröße (die Geometrie rechnet r/k, s. griffeHtml). Die Kantengriffe sind bewusst anders eingefärbt als die Eckgriffe: sie tun etwas anderes — der eine zieht einen Punkt, der andere eine ganze Kante. */ .gr-griff { fill:var(--card); stroke:var(--acc); stroke-width:1.6px; } .gr-griff:hover { fill:var(--acc); } .gr-griff.kante { fill:var(--acc); stroke:var(--card); } .gr-griff.kante:hover { fill:var(--card); stroke:var(--acc); } .gr-griff.dreh { fill:var(--acc); stroke:var(--card); stroke-width:1.4px; } /* ─── Fenster und Türen ─── Sie liegen IN der Wand und werden deshalb in Blattfarbe gezeichnet, nicht im Akzent: Farbe in der Fläche gehört in dieser App den Signalarten (§Design), und ein Fenster ist ein Bauteil, kein Signal. Markiert wird über den Akzent — wie bei allem anderen auch. */ .gr-oeff { fill:none; stroke:var(--gr-ink, var(--txt)); stroke-width:1.3px; stroke-linecap:round; pointer-events:none; } .gr-oeff.tuer { stroke-width:1.1px; } .gr-oeff.on { stroke:var(--acc); stroke-width:2px; } /* Die Trefferfläche liegt UNTER dem Symbol und ist unsichtbar — die Symbolstriche selbst sind 1 px breit und wären nicht zu treffen (dieselbe Lösung wie .we-hit). */ .gr-oeff-hit { fill:transparent; stroke:none; cursor:move; } .gr-oeff-hit:hover { fill:color-mix(in srgb, var(--acc) 14%, transparent); } /* Der Zeiger sagt, was passiert: über einem beweglichen Objekt der Verschiebe-Zeiger, über einem Griff der Richtungspfeil (der steht inline am Element, s. griffListe). */ #gr-svg .gr-wand, #gr-svg .gr-raum, #gr-svg .gr-dev, #gr-svg .gr-mass, #gr-svg .gr-txt, #gr-svg .gr-lb { cursor:move; } #gr-svg.zeichnen .gr-wand, #gr-svg.zeichnen .gr-raum, #gr-svg.zeichnen .gr-dev, #gr-svg.zeichnen .gr-oeff-hit { cursor:crosshair; } #gr-svg.greifen .gr-wand, #gr-svg.greifen .gr-raum, #gr-svg.greifen .gr-dev, #gr-svg.greifen .gr-oeff-hit { cursor:grab; } /* Ablageflaeche fuer Drag & Drop. Der Hinweis ist ein Pseudoelement — die Buehne baut ihr SVG bei jedem Zeichnen neu auf, ein eingesetztes Element waere beim naechsten Lauf weg (dieselbe Ueberlegung wie bei .ihint::after). */ .gr-stage.drop { outline:2px dashed var(--acc); outline-offset:-6px; } .gr-stage.drop::after { content:"Plan hier ablegen \2014 DXF, PDF oder Bild"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--card) 82%, transparent); font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:14px; color:var(--acc); pointer-events:none; z-index:5; } .gr-rein { border:1px solid var(--bdr); border-radius:var(--r); padding:10px 12px; margin-top:10px; background:var(--card-2); } .gr-rein[hidden] { display:none; } .gr-rein.laedt { opacity:.55; pointer-events:none; } .gr-rein-kopf { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } /* Umfang und Vorschau des Imports (seit 21.10.2026): die Vorschau zeigt die Pfade, die übernommen werden, im Planbereich. */ /* Raumvorschläge (Werkzeug „Raum aus Stempel"): gestrichelt im Akzent, nur solange das Werkzeug läuft. */ .gr-rvor { fill:color-mix(in srgb, var(--acc) 8%, transparent); stroke:var(--acc); stroke-width:1.2; stroke-dasharray:5 4; cursor:copy; } .gr-rvor:hover { fill:color-mix(in srgb, var(--acc) 22%, transparent); } .gr-umfang { margin-bottom:8px; } .gr-umfang .chk { margin-top:6px; } .gr-rein-vor { height:190px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); overflow:hidden; } .gr-rein-vor svg { display:block; width:100%; height:100%; } .gr-rein-vor .sub { display:block; padding:8px; } .gr-rein-det { margin-top:8px; } .gr-rein-det > summary { cursor:pointer; font-size:12px; color:var(--txt2); padding:4px 0; } .gr-rein-kopf b { font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:12px; } /* Der Speicherbalken ist die eigentliche Antwort auf „Speicher voll" — er steht VOR dem Uebernehmen, nicht als Fehlermeldung danach. */ .gr-rein-bar { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px; padding:6px 9px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); font-size:12px; } .gr-rein-bar b { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .gr-rein-bar.warn { border-color:var(--warn); } .gr-rein-bar.warn b { color:var(--warn); } label.chk { display:flex; align-items:center; gap:7px; font-size:12px; padding:2px 0; cursor:pointer; } label.chk input { flex:none; } /* Wird an mehreren Stellen benutzt (Import-Befund, Bereinigung) und fehlte bisher ganz — die Warnhinweise standen dadurch in normaler Textfarbe. */ .warn-t { color:var(--warn); } .gr-imp-vor { margin-top:10px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card-2); min-height:120px; max-height:300px; overflow:auto; display:flex; align-items:center; justify-content:center; padding:8px; } .gr-imp-vor img { max-width:100%; max-height:280px; display:block; background:#fff; } .inp.lese { background:var(--card-2); color:var(--mut); display:flex; align-items:center; } /* Auf dem Blatt gilt die helle Palette (s. §Plan als PDF) — dort wird die Zeichnung schwarz auf weiß gedruckt, unabhängig vom Thema der App. Der Hintergrund der Bühne entfällt. */ .pdf-blatt .gr-print { background:none; } .pdf-blatt .gr-print .gr-dev-t, .pdf-blatt .gr-print .gr-mass-t, .pdf-blatt .gr-print .gr-txt { stroke:#fff; } /* Schmale Monitore: die Palette rückt unter den Plan. Der Plan ist der Grund, hier zu sein — er behält die Breite. */ /* Schmale Monitore: die Werkzeuge bleiben links (sie sind der Grund für die Spalte), Palette und Eigenschaften rücken unter den Plan. */ /* Ein Grundriss ist BREIT — die Zeichenflaeche darf nicht die Restgroesse sein. Zwischen 1100 und 1400 px werden deshalb erst die beiden Randspalten schmaler, und erst darunter bricht die Palette nach unten um. Gemessen bei 1180 px: gestaffelt 726 px Planbreite, ungestaffelt waren es 346 px; und ein frueher Umbruch kostet 280 px Hoehe — genau das Mass, das die Werkzeugspalte gerade gewonnen hat. */ @media (max-width:1400px){ .gr-cols { grid-template-columns:minmax(0,1fr) 250px; } .gr-side { gap:10px; } } @media (max-width:1100px){ .gr-cols { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; } .gr-side { flex-direction:row; max-height:250px; } .gr-pal { max-height:none; flex:1 1 0; } .gr-props { flex:1 1 0; } } /* Kategoriesymbol auf dem Fußabdruck (seit 18.08.2026). Zeichen aus `AVP.KAT_ICON`, also dasselbe wie im Verdrahtungsblock. Es dreht sich nicht mit dem Gerät und trägt denselben Umriss-Halo wie die Beschriftung — sonst verschwindet es auf einem eingelesenen Bauplan, wo unter ihm Wandlinien und Maßketten liegen. */ .gr-sym { font-family:'tabler-icons'; fill:var(--sig); pointer-events:none; paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; } .gr-symg.dim { opacity:.28; } .gr-symg { pointer-events:none; } /* Gerät im falschen Raum (seit 22.10.2026): gelbes Warnzeichen, Statusfarbe mit Zeichen */ .gr-fremd path { fill:var(--gelb-f); stroke:var(--card); stroke-width:1.2; } .gr-fremd text { fill:var(--auf-st); font:700 10px var(--f-body); pointer-events:none; } .pdf-blatt .gr-print .gr-sym { stroke:#fff; } /* Befund des Vektor-Imports: was gefunden wurde und was nicht (seit 18.08.2026). */ .gr-bef { border:1px solid var(--bdr); border-radius:var(--r); padding:10px 12px; background:var(--card-2); margin:2px 0 10px; display:flex; flex-direction:column; gap:5px; } .gr-bef[hidden] { display:none; } .gr-bef-z { font-size:12px; } .gr-bef-t { width:100%; border-collapse:collapse; margin-top:6px; font-size:11px; } .gr-bef-t td { padding:2px 6px; border-top:1px solid var(--bdr); } .gr-bef-t td.num { font-family:var(--f-mono); text-align:right; white-space:nowrap; } .ok-t { color:var(--ok); } .gr-nur-bild[hidden] { display:none; } /* ---------- Wände als Objekte, Maße, Abstandsanzeige (seit 18.08.2026) ---------- */ /* Eine Wand wird als Band mit Kante gezeichnet — so, wie sie im Bauplan aussieht. Die Füllung ist bewusst neutral: Farbe in der Fläche gehört den Signalarten (s. §Design). */ .gr-wand { fill:var(--gr-ink); fill-opacity:.30; stroke:var(--gr-ink); stroke-width:1; stroke-opacity:.85; cursor:pointer; } .gr-wand:hover { fill-opacity:.42; } .gr-wand.on { stroke:var(--acc); stroke-width:2.4; fill:var(--acc); fill-opacity:.30; } /* Griffe an den Enden eines gewählten Maßes */ /* Live-Abstand zur nächsten Wand: dünn und im Akzent, damit er als Hilfe lesbar bleibt und sich nicht mit den Maßen des Plans verwechseln lässt. */ .gr-ab { stroke:var(--acc); stroke-width:1.2; fill:none; stroke-dasharray:4 3; } .gr-ab-t { fill:var(--acc); font-family:var(--f-mono); font-size:10px; paint-order:stroke; stroke:var(--gr-paper); stroke-width:3px; stroke-linejoin:round; } /* 3D-Raumansicht: liegt über der Zeichenfläche und füllt die Bühne. Sie bekommt KEINE eigene Höhe — die Bühne ist bereits eine 1fr-Zeile und misst die sichtbare Höhe; eine zweite Höhenrechnung wäre eine konkurrierende Wahrheit (Lehre aus `hoehe3d()`). */ /* Fluchtlinie des Achsenfangs: dünner und feiner gestrichelt als das Abstandsmaß daneben — sie ist eine Aussage über die Ausrichtung, keine über eine Länge. */ .gr-flucht { stroke:var(--acc); stroke-width:.9; fill:none; stroke-dasharray:2 4; stroke-opacity:.8; pointer-events:none; } /* Maße sind jetzt durchgezogen mit Endstrichen (Bauzeichnungs-Optik) statt gestrichelt — gestrichelt las sich wie eine Hilfslinie. */ .gr-mass { stroke:var(--gr-ink); stroke-width:1.1; fill:none; stroke-dasharray:none; cursor:pointer; opacity:.85; } .gr-mass.on { stroke:var(--acc); stroke-width:2; opacity:1; } .gr-mass-t { fill:var(--gr-ink); } .gr-mass.on + .gr-lb .gr-mass-t { fill:var(--acc); } .gr-rf { display:flex; align-items:center; gap:6px; } .gr-rf .inp { padding:3px 6px; font-size:11px; text-align:right; } .gr-rf .sub { font-size:10px; } /* ---------- Zeile ↔ Gerätestamm (seit 18.08.2026) ---------- Der Indikator ist eine Zustandsanzeige wie die drei im Gerätestamm und benutzt deren Sprache (.ind mit ok/mut/warn). Anklickbar ist er zusätzlich — er ist der kürzeste Weg zur Verknüpfung, und genau danach sucht man, wenn eine Zeile rot ist. */ .ind.stammdot { cursor:pointer; } .ind.stammdot:hover { color:var(--acc); } /* Zählzeile: „n ohne Stammdaten" ist ein Knopf, kein Text — ein Klick filtert die Tabelle auf genau diese Zeilen. Die Zahl allein ließe den offen, der wissen will, WELCHE es sind. */ .cz-offen { background:none; border:0; padding:0; margin-left:4px; cursor:pointer; color:var(--warn); font:inherit; font-size:12px; } .cz-offen:hover { text-decoration:underline; } .cz-ipk i { font-size:13px; margin-right:3px; vertical-align:-2px; } /* ---------- Karte mit den Kennzahlen der Darstellung (seit 05.10.2026) ---------- PoE-Budget und Beschaffungssummen standen in der Zählzeile und nahmen ihr den Platz (Rückmeldung Chris). In der Zeile bleibt eine Marke (`.cz-info`), die Karte erscheint beim Überfahren der linken Gruppe und liegt über der Tabelle; `.auf` ist der Tipp auf die Marke ohne Zeiger. */ .cz-info { display:inline-flex; align-items:center; gap:4px; margin-left:4px; color:var(--mut); font-size:12px; cursor:default; white-space:nowrap; } .cz-info i { font-size:14px; } .cz-info b { font-weight:600; } .cz-info.cz-info-warn { color:var(--warn); } .tb-mitte > .tb-l { position:relative; } .cz-pop { display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:30; min-width:360px; max-width:560px; background:var(--card); border:1px solid var(--ctl-bdr); border-radius:var(--r); box-shadow:var(--sh-2); padding:8px 12px 10px; font-size:13px; color:var(--txt); } .cz-pop[hidden] { display:none !important; } .tb-mitte > .tb-l:hover > .cz-pop, .cz-pop.auf { display:block; } .cz-pop-hd { font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--mut); margin-bottom:6px; } .cz-pop-z { display:grid; grid-template-columns:96px 1fr; gap:2px 12px; align-items:baseline; padding:4px 0; border-top:1px solid var(--bdr); } .cz-pop-z > span:first-child { color:var(--mut); font-size:12px; } .cz-pop-z > b { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; } .cz-pop-z > b.cz-pop-rest { font-family:var(--f-body); font-weight:500; } .cz-pop-z .cz-pop-h { grid-column:2; color:var(--mut); font-size:11.5px; line-height:1.35; } .cz-pop .cz-offen { font-size:13px; margin:0; } @media (hover:none){ .tb-mitte > .tb-l:hover > .cz-pop:not(.auf) { display:none; } } /* Netzwerkadresse bei LAN „Nein" (seit 18.09.2026): die Zelle ist schraffiert (`td.na`), ein alter Wert steht durchgestrichen in Warnfarbe — er gehört gelöscht, nicht übersehen. */ .tbl td.na .na-rest { color:var(--warn); } /* `.modal` davor, sonst gewinnt `.modal .inp[disabled]` (gleiche Spezifität, steht früher — aber die Füllung dort ist eine Farbe, die das Muster ersetzt). */ .inp[data-na], .modal .inp[data-na][disabled] { background:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--mut) 22%, transparent) 5px 6px) var(--card-2); color:var(--warn); text-decoration:line-through; cursor:not-allowed; } .inp[data-na]:placeholder-shown { text-decoration:none; } /* Adresskonflikt: Warnfarbe und Dreieck. Steht der Konflikt nur an einem Anschluss des Geräts (`am-port`), bleibt die eigene IP in normaler Farbe — nur das Dreieck sagt, dass etwas ist. */ .ip-konf { color:var(--warn); font-weight:600; } .ip-konf i { font-size:12px; margin-right:3px; vertical-align:-1px; } /* ---------- Beschaffung (Spaltengruppe der Geräteliste, seit 05.10.2026) ---------- Farbe nur für die Ausnahme (Festlegung 17.09.2026): teurer als kalkuliert und ein überfälliger Termin in Warnfarbe, „geliefert" grün, alles andere neutral. Die UVP ist kursiv und gedämpft — sie gehört dem Stamm, nicht der Zeile. */ .tbl td.uvp { color:var(--mut); font-style:italic; } .tbl td.teurer, .cat-zahl .teurer, .tbl tr.grp td.grp-sum.teurer { color:var(--warn); font-weight:600; } .tbl td.guenstiger, .cat-zahl .guenstiger, .tbl tr.grp td.grp-sum.guenstiger { color:var(--ok); font-weight:600; } .tbl td.ueber { color:var(--warn); font-weight:600; } .tbl td.ueber i { font-size:12px; margin-left:3px; vertical-align:-1px; } .tbl td.bst { font-size:12.5px; } .tbl td.bst .bst-dot { display:inline-block; box-sizing:border-box; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:0; background:var(--hover-bdr); } /* Farbstufen seit 18.10.2026 (Vorgabe Chris „nur geliefert ist grün, weitere Farben ergänzen"): offen = grauer Ring · Klärung = gestrichelter gelber Ring (dezent, Nachbesserung Chris) · angefragt = gelber Ring · bestellreif = halb gelb (seit 18.10.2026 spät) · bestellt = gelb · bestätigt = grüner Ring · geliefert = grün (auch der Text) · entfällt = gestrichelt. Ring vor Fläche: die Form trägt die Stufe mit, nicht nur die Farbe. Dieselben Stufen in der Leiste der Übersicht (`ub-g1`, `ub-ok1`). */ .tbl td.bst-offen .bst-dot { background:transparent; border:1.5px solid var(--aus-f); } .tbl td.bst-klaerung .bst-dot { background:transparent; border:1.5px dashed var(--gelb-f); } .tbl td.bst-bestellreif .bst-dot { background:linear-gradient(90deg, var(--gelb-f) 50%, transparent 50%); border:1.5px solid var(--gelb-f); } .tbl td.bst-angefragt .bst-dot { background:transparent; border:2px solid var(--gelb-f); } .tbl td.bst-bestellt .bst-dot { background:var(--gelb-f); } .tbl td.bst-bestaetigt .bst-dot { background:transparent; border:2px solid var(--ok-f); } .tbl td.bst-geliefert { color:var(--ok); } .tbl td.bst-geliefert .bst-dot { background:var(--ok-f); } .tbl td.bst-entfaellt .bst-dot { background:transparent; border:1px dashed var(--hover-bdr); } /* Dieselben Punkte in der aufgeklappten Liste (seit 18.10.2026, Vorgabe Chris „beim Dropdown auch die Indikatoren anzeigen") — in der Tabelle und im Geräte-Editor. Gezeichnet als ::before über `data-v`, damit `mkSel` nichts davon wissen muss. Eine neue Stufe braucht hier ihre Zeile. */ :is(.tbl td.bst, #drw-bestellstatus) .csel-opt::before { content:''; flex:none; box-sizing:border-box; width:9px; height:9px; border-radius:50%; background:var(--hover-bdr); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="offen"]::before { background:transparent; border:1.5px solid var(--aus-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="klaerung"]::before { background:transparent; border:1.5px dashed var(--gelb-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="angefragt"]::before { background:transparent; border:2px solid var(--gelb-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="bestellreif"]::before { background:linear-gradient(90deg, var(--gelb-f) 50%, transparent 50%); border:1.5px solid var(--gelb-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="bestellt"]::before { background:var(--gelb-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="bestaetigt"]::before { background:transparent; border:2px solid var(--ok-f); } :is(.tbl td.bst, #drw-bestellstatus) .csel-opt[data-v="geliefert"]::before { background:var(--ok-f); } .tbl td.bst .csel-opt { color:var(--txt); } /* Das Dropdown in der Statuszelle: jede Option in ihrer eigenen Bedeutungsfarbe (dieselbe Überlegung wie bei Status und Herkunft) — hier reicht Grün für „geliefert". */ .tbl td.bst .csel-opt { color:var(--txt); } .tbl td.na .na-txt { color:var(--mut); font-style:italic; } .tbl td.bedarf.on { color:var(--acc-t); font-weight:600; } .tbl td.bedarf i { font-size:13px; margin-right:4px; vertical-align:-1px; } /* Gruppensummen: Mono und rechtsbündig in der sonst versalen Gruppenzeile */ .tbl.v53 tr.grp td.grp-sum { font-family:var(--f-mono); font-stretch:normal; text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; text-align:right; color:var(--txt); font-variant-numeric:tabular-nums; } .tbl.v53 tr.grp.sub td.grp-sum { font-weight:500; } .cat-zahl .cz-besch b { font-size:13px; font-family:var(--f-mono); font-weight:600; color:var(--txt); } .ausw-bar .aw-inp { width:52px; height:24px; padding:0 6px; font-family:var(--f-mono); font-size:12px; text-align:right; } .ip-konf.am-port { color:inherit; font-weight:inherit; } .ip-konf.am-port i { color:var(--warn); } /* Statuszeile im Geräte-Editor */ .drw-stamm { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .st-badge { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:var(--r); border:1px solid currentColor; font-family:var(--f-display); font-stretch:87.5%; font-size:10px; text-transform:none; letter-spacing:0; cursor:help; } .st-badge.st-stamm, .st-badge.st-verknuepft { color:var(--ok); } .st-badge.st-eigen, .st-badge.st-ohne { color:var(--mut); } .st-badge.st-offen { color:var(--warn); } .drw-stamm .st-txt { font-size:12px; color:var(--mut); } /* Optionen im Verknüpfungs-Dialog */ /* Zuordnen (19.10.2026): je Typ eine Zeile — Liste, Eintrag im Stamm, Sicherheit, Aktionen. */ .modal.zuo-modal { max-width:1240px; width:calc(100vw - 48px); } .zuo-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:32px; } .zuo-knoepfe { display:flex; gap:8px; flex-wrap:wrap; } .tbl-wrap.zuo-wrap { flex:none; max-height:52vh; overflow:auto; } .zuo-tbl { border-collapse:separate; border-spacing:0; width:100%; } .zuo-tbl td { vertical-align:middle; } .zuo-tbl td:first-child { min-width:220px; } .zuo-tbl td .sub { margin:2px 0 0; font-size:12px; } .zuo-sel { width:400px; } .zuo-st { margin-top:5px; font-size:12px; } .zuo-sel .csel-btn { width:100%; } /* Der Eintrag steht im Knopf in EINER Zeile — eine lange Bezeichnung machte die Zeile dreistöckig. */ .zuo-sel .csel-btn > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .zuo-akt { white-space:nowrap; text-align:right; } .zuo-akt .btn[disabled] { opacity:.4; cursor:not-allowed; } .zuo-akt .btn[disabled]:hover { border-color:var(--ctl-bdr, var(--bdr)); color:inherit; } .zuo-akt .btn + .btn { margin-left:6px; } .zuo-tbl tr.zuo-eigen td { color:var(--mut); } .zuo-ki-kopf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; } .zuo-ki-kopf .btn { margin-left:auto; } .zuo-ki-tbl { width:100%; margin-top:6px; } .zuo-ki-tbl td { vertical-align:middle; } .dst-opt { display:flex; gap:18px; flex-wrap:wrap; margin-top:2px; } .dst-opt label { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; } .dst-punkte { font-family:var(--f-mono); font-size:10.5px; color:var(--mut); } /* ---------- Zellauswahl nach Excel-Art (seit 19.08.2026) ---------- Getönte Fläche statt Rahmen um jede Zelle: bei einem Bereich über zwanzig Zeilen wären das zwanzig Kästen. Die Bedeutungsfarben von Status und Herkunft bleiben darunter sichtbar — deshalb eine halbdurchsichtige Tönung im Akzent und keine deckende Fläche. */ .tbl td.sel { background:color-mix(in srgb, var(--acc) 14%, var(--card)); position:relative; } /* **Der Rahmen liegt um die GANZE Auswahl** (Vorgabe Chris 20.08.2026). Er entsteht aus vier Kantenklassen, die `ZellAuswahl.markiere()` je Zelle setzt: eine Zelle bekommt ihre obere Kante nur, wenn die Zelle darüber nicht gewählt ist. Innen liegende Kanten entfallen damit von selbst, und eine zusammengeklickte Auswahl bekommt genau ihren Umriss statt eines Kastens um ihre Hüllbox. **Border am Pseudoelement statt `box-shadow` an der Zelle**: die vier Kanten sind vier unabhängige Eigenschaften und kombinieren sich frei — `box-shadow` bräuchte für jede der 16 Kombinationen eine eigene Regel, und die Hover-Regel der bearbeitbaren Zelle liegt ebenfalls auf `box-shadow` (die Falle vom 19.08.2026). `pointer-events:none`, sonst fräße die Auflage den Klick (dieselbe Falle wie `.wp-dot` in der Verdrahtung). */ .tbl td.sel::before { content:''; position:absolute; inset:0; z-index:4; pointer-events:none; border:0 solid var(--acc); } .tbl td.sel-t::before { border-top-width:2px; } .tbl td.sel-b::before { border-bottom-width:2px; } .tbl td.sel-l::before { border-left-width:2px; } .tbl td.sel-r::before { border-right-width:2px; } /* Während des Bearbeitens trägt NUR die Eingabe einen Rahmen — dieselbe Festlegung wie beim Rahmen der aktiven Zelle weiter unten. */ .tbl td.cell-ed.sel::before { content:none; } .tbl td.fillvor { background:color-mix(in srgb, var(--acc) 7%, transparent); box-shadow:inset 0 -1px 0 var(--acc); } /* Die Zelle mit dem Kästchen muss positioniert sein, sonst hängt sich das Kästchen an den nächsten positionierten Vorfahren und landet irgendwo im Blatt (bekannte Falle, s. das Dreieck der Auswahlspalten). */ .tbl td.sel-eck { position:relative; } .fillgriff { position:absolute; right:0; bottom:0; width:7px; height:7px; background:var(--acc); border:1px solid var(--card); cursor:crosshair; z-index:6; } /* Während des Aufziehens darf der Browser keine Beschriftungen blau markieren. */ body.ausw-zug { user-select:none; } body.ausw-zug .tbl td { cursor:cell; } /* Leiste über der Tabelle: was ist gewählt, und was kann man damit tun. */ .ausw-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 10px; border:1px solid var(--acc); border-radius:var(--r); background:color-mix(in srgb, var(--acc) 8%, var(--card)); margin-top:8px; flex:none; } .ausw-bar[hidden] { display:none; } .ausw-bar b { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; text-transform:none; letter-spacing:0; } .ausw-bar .aw-txt { font-size:12px; color:var(--mut); } .ausw-bar .sp { flex:1; } /* **Beschriftung und Dropdown gehören zusammen, und die Aktionen bleiben rechts.** Mit einem reinen Abstandhalter (`.sp`) landete das Dropdown beim Umbruch am linken Rand der zweiten Zeile und die zugehörige Beschriftung blieb rechts auf der ersten stehen (am Bild gefunden, 20.08.2026). Der Aktionsblock wandert deshalb als Ganzes. */ .ausw-bar .aw-akt { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; justify-content:flex-end; } .ausw-bar .aw-grp { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; } /* Dropdown in der Leiste: setzt den Wert auf ALLE gewählten Zellen einer Auswahlspalte. Es klappt nach OBEN auf — die Leiste steht unter der Tabelle und damit am unteren Rand der Ansicht; nach unten läge die Liste außerhalb des Fensters. */ .ausw-bar .aw-set { min-width:190px; } .ausw-bar .csel-btn { padding:4px 9px; font-size:12.5px; } .ausw-bar .csel-pop { top:auto; bottom:calc(100% + 4px); } /* Stamm-Indikator in der Aktionsspalte: feste Breite, damit die Knöpfe aller Zeilen fluchten — auch bei Software und Lizenzen, wo gar kein Symbol steht. */ .akt-st { flex:none; width:16px; display:inline-flex; align-items:center; justify-content:center; } .akt-st .ind { font-size:13px; } /* Die aktive Zelle trägt den kräftigen Rahmen (Excel: der dicke Rand), die übrige Auswahl nur die Tönung. Innenliegender Schatten statt Rahmen, damit die Zeilenhöhe gleich bleibt. **Muss die Hover-Regel schlagen** (Rückmeldung Chris 19.08.2026: „wird sie grau gerahmt und erst wenn ich aus der Zelle bewege wird sie türkis"): `.tbl tbody td.editable:hover` hat mit 0-3-2 die höhere Spezifität als `.tbl td.sel-aktiv` (0-2-1) und übermalte den Akzentrahmen, solange der Zeiger noch in der Zelle stand — also genau im Moment des Klicks. Dasselbe gilt für die Tönung der übrigen Auswahl. */ .tbl tbody td.sel-aktiv.sel-eins, .tbl tbody td.editable.sel-aktiv.sel-eins:hover { box-shadow:inset 0 0 0 2px var(--acc); } /* **In einer Mehrfachauswahl bleibt die aktive Zelle UNGETÖNT statt gerahmt** (am Bild gefunden, 20.08.2026). Ihr eigener Rahmen lag mitten im Block und zerschnitt den Rahmen um die Auswahl — das Bild las sich wieder als „Rahmen nur um eine Zelle". Die fehlende Tönung ist die Excel-Konvention und der einzige Weg, der ohne eine zweite Linie auskommt. Die Hover-Regel der bearbeitbaren Zelle muss dabei geschlagen werden (0-4-2), deshalb die zweite Zeile — dieselbe Falle wie am 19.08.2026. */ .tbl tbody td.sel-aktiv.sel-mehr, .tbl tbody td.editable.sel-aktiv.sel-mehr:hover { background:transparent; } /* In einer FIXIERTEN Spalte heißt „ungetönt" die Kartenfläche, nicht durchsichtig — sonst scheint der Inhalt der darunter scrollenden Spalten durch (am Bild gefunden 18.09.2026: eine IP stand quer über der BMK). Dieselbe Regel wie „fixierte Zellen müssen DECKEND sein". */ .tbl.fixiert tbody td.fx.sel-aktiv.sel-mehr, .tbl.fixiert tbody td.fx.editable.sel-aktiv.sel-mehr:hover { background:var(--card); } /* **Während des Bearbeitens trägt NUR die Eingabe den Rahmen** (Rückmeldung Chris 19.08.2026: „beim Bearbeiten habe ich einen unschönen Doppelrahmen, auch bei Dropdowns"). Die Zelle hat ihren Akzentrahmen als inneren Schatten, das Eingabefeld und der Auswahlknopf haben je einen eigenen 2-px-Rahmen — zusammen sind das zwei Linien im selben Türkis, 2 px auseinander. Weg muss der ÄUSSERE: der innere zeigt, wo getippt wird, und er ist es auch, der beim Aufklappen der Liste weiterwandert. */ .tbl tbody td.cell-ed.sel-aktiv, .tbl tbody td.editable.cell-ed.sel-aktiv:hover { box-shadow:none; } .tbl tbody td.editable.sel:hover { background:color-mix(in srgb, var(--acc) 14%, transparent); } /* Die Gruppennummer sitzt in der LV-Pos.-Spalte und darf dort nicht abgeschnitten werden — sie ist kürzer als die Positionen der Gerätezeilen, aber sie soll mit ihnen fluchten. */ .tbl tr.grp td.grp-pos { overflow:visible; white-space:nowrap; } /* Während des Bearbeitens hat das Ausfüllkästchen nichts in der Zelle zu suchen — dort liegt gerade die Eingabe. */ .tbl td.cell-ed .fillgriff { display:none; } /* ---------- Unterlagen (Datenblatt, Anleitung) je Stamm-Eintrag, seit 21.08.2026 ---------- Aufbau wie der Port-Editor: eine Zeile je Unterlage, Art und Sprache als Auswahlfeld. Der Sprachchip trägt die eigentliche Aussage dieser Liste und steht deshalb weit vorn. */ .dok-row { display:grid; grid-template-columns:150px 128px 1fr 96px auto 30px; gap:6px; align-items:center; margin-top:6px; } .dok-row .inp, .dok-row .csel-btn { padding:5px 8px; font-size:13px; } .dok-head { margin-top:0; font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:0; font-size:11px; color:var(--mut); } .dok-head span { padding-left:2px; } .dok-meta { font-family:var(--f-mono); font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap; } .dok-meta i { font-size:13px; vertical-align:-2px; } /* Der Öffnen-Knopf ist ein mit target=_blank — als Knopf gestaltet, damit die Zeile nicht aus zwei verschiedenen Bedienelementen besteht. */ a.dok-auf { text-decoration:none; white-space:nowrap; } /* Offene Punkte: Arbeitsvorrat, nicht Warnung — deshalb gedämpft und ohne Warnfarbe. */ .dok-offen { margin:10px 0 0; font-size:12.5px; color:var(--mut); } .dok-offen b { color:var(--txt); font-weight:600; } /* Ausführungs-Wahl in der Stammzeile des Geräte-Editors: Beschriftung und Auswahlfeld nebeneinander, damit die Zeile eine Zeile bleibt. */ .drw-var { display:flex; align-items:center; gap:6px; } .drw-var > label { font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:.09em; font-size:11px; color:var(--mut); white-space:nowrap; } .drw-var .csel { min-width:210px; } .drw-var .csel-btn { padding:5px 8px; font-size:13px; } /* Ausführungen (`varianten`, seit 20.09.2026): dasselbe Rasterprinzip wie die Unterlagen, nur mit der Vorgabe-Wahl vorn. Die Bestellnummer steht in Mono — sie ist ein Kennzeichen (dieselbe Regel wie SN/IP/MAC in der Tabelle). */ .var-row { display:grid; grid-template-columns:62px 1fr 168px 112px 30px; gap:6px; align-items:center; margin-top:6px; } .var-row .inp { padding:5px 8px; font-size:13px; } .var-row .inp.mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .var-head { margin-top:0; font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:0; font-size:11px; color:var(--mut); } .var-head span { padding-left:2px; } .var-std { display:flex; justify-content:center; cursor:pointer; } .var-std input { accent-color:var(--acc); cursor:pointer; } /* Sprachchip: DE hervorgehoben, weil auf Deutsch geplant wird — alles andere neutral. Bewusst KEIN Akzentton: der gehört laut §Design der Primäraktion und dem aktiven Zustand, und eine Liste voller türkiser Chips nähme ihm genau die Bedeutung. */ .dok-spr { display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:1px 5px; border:1px solid var(--bdr); border-radius:var(--r); font-family:var(--f-display); font-stretch:87.5%; font-size:10.5px; letter-spacing:.06em; color:var(--mut); } .dok-spr.de { color:var(--txt); border-color:var(--mut, var(--mut)); font-weight:600; } /* Unterlagen am PROJEKTGERÄT: nur lesen und öffnen — gepflegt wird im Gerätestamm. Eine Zeile je Unterlage, kompakt, weil der Geräte-Editor ohnehin über 40 Felder trägt. */ .dev-doks { display:flex; flex-wrap:wrap; gap:6px; } a.dev-dok { display:inline-flex; align-items:center; gap:6px; text-decoration:none; padding:4px 9px; border:1px solid var(--bdr); border-radius:var(--r); font-size:12.5px; color:var(--txt); background:var(--card); } a.dev-dok:hover { border-color:var(--acc); color:var(--acc); } a.dev-dok i { font-size:14px; } a.dev-dok .dok-spr { min-width:22px; padding:0 4px; font-size:10px; } /* Platzhalter für den fehlenden Blenden-Knopf: nur Geräte mit ebener Front haben ihn, ohne Lücke rutschte der Löschen-Knopf in jeder zweiten Zeile nach links (Vorgabe Chris 21.08.2026: „alles in einer Flucht"). Breite = Knopfbreite eines Icon-Knopfs. **Es ist derselbe Knopf, nur ausgegraut und ohne Funktion** (Vorgabe Chris 21.08.2026) — so bleibt sichtbar, dass es die Blendenansicht gibt und sie hier nur nicht trägt; der Tooltip nennt den Grund. Gleiche Struktur heißt gleiche Breite, ohne sie zu kennen: eine hart gesetzte Breite war um 0,5 px daneben (Knopf real 28,5 px) und wäre bei der nächsten Änderung an `.btn` wieder falsch. Kein `pointer-events:none` — der Tooltip soll beim Überfahren erscheinen; dass nichts passiert, erledigt das fehlende `data-panel`. Die Hover-Regel von `.btn` wird deshalb zurückgenommen, sonst leuchtet ein toter Knopf im Akzent auf. */ .akt-b .akt-luecke { opacity:.28; cursor:default; } .akt-b .akt-luecke:hover { border-color:var(--hover-bdr); color:inherit; } /* ═══════════════════════════════════════════════════════════════════════════════ Bedienung mit dem Finger (Audit 10.09.2026, D-08 und D-09) ═══════════════════════════════════════════════════════════════════════════════ Die App ist Desktop-first und bleibt es (s. CLAUDE.md §Stack). Zwei Dinge waren aber nicht „schmaler", sondern **gar nicht bedienbar**, sobald kein Zeigegeraet mit Hover da ist: D-08 **Vier Bedienelemente erschienen ausschliesslich bei `:hover`** — das ×, mit dem ein Geraet aus dem Schema fliegt, der Pfeil, der eine Anschlussgruppe klappt, das × der Rack-Beschriftung und das Filtersymbol der schmalen Indikatorspalten. Auf einem Tablet gibt es sie damit nicht; die Funktion ist nicht schwer erreichbar, sie fehlt. D-09 **Zielgroessen von 13 bis 28 px.** WCAG 2.5.8 fordert 24, fuer den Finger gelten 44 als Richtwert. Betroffen sind genau die Stellen, an denen viele kleine Knoepfe dicht beieinanderstehen: Aktionsspalte, Spalten-Popover, Port-Editor. Beides haengt an `@media (hover:none)` bzw. `(pointer:coarse)` und aendert am Desktop **nichts** — die Abfragen treffen dort nicht zu. Eine Maus an einem Touchgeraet meldet `hover:hover`, ein Stift `pointer:fine`; die Abfragen beschreiben also das Eingabegeraet und nicht die Bildschirmgroesse, was hier genau richtig ist. */ @media (hover:none) { /* Ohne Hover gibt es keinen Zwischenschritt: was man braucht, muss dastehen. Gedaempft, damit der Plan nicht zum Knopfbrett wird — sichtbar ist etwas anderes als aufdringlich. */ .wn-x, .wg-tog, .rk-lg-x { opacity:.55; } .wn-x:active, .wg-tog:active, .rk-lg-x:active { opacity:1; } .th-flt { opacity:.9; } .tbl.v53 .akt-b .btn.zl-menu { opacity:.8; } .tbl th.ind .th-flt { display:inline-flex; position:absolute; inset:0; margin:auto; width:18px; height:18px; align-items:center; justify-content:center; padding:0; } } @media (pointer:coarse) { /* 36 px statt 28: das ist der Kompromiss zwischen der WCAG-Untergrenze von 24 und den 44, die eine Fingerkuppe braucht — bei sieben Knoepfen in einer Tabellenzeile waeren 44 px mehr Knopf als Zeile. */ .btn.sm { min-height:36px; min-width:36px; } .btn.icon { min-height:36px; min-width:36px; } .ord-btns button { width:24px; height:24px; } .th-rs { width:18px; right:-9px; } /* Spaltengriff: 10 px trifft niemand mit dem Finger */ .ihint { width:28px; height:28px; font-size:17px; } .akt-b { gap:6px; } /* Zeilenhoehe folgt der Knopfhoehe — ohne das schneidet die Zeile die groesseren Knoepfe an. */ .tbl tbody td { padding-top:7px; padding-bottom:7px; } .csel-opt { padding-top:9px; padding-bottom:9px; } .pn-tbl tbody td { padding-top:7px; padding-bottom:7px; } } /* ---------- Der Browser darf die Geste nicht vorher wegnehmen (D-01) ---------- Ohne `touch-action:none` deutet der Browser jede Fingerbewegung auf einer Flaeche zuerst als Bildlauf oder Kneifzoom der SEITE und bricht die Zeigergeste mit `pointercancel` ab — der Zug ist dann vorbei, bevor die App ihn gesehen hat. Gesetzt wird es genau auf den Zeichenflaechen, nicht global: ausserhalb soll die Seite normal blaettern. Ueberall gilt dieselbe Aufteilung: EIN Finger waehlt, zieht und zeichnet, ZWEI Finger zoomen und schieben. Die Rackbuehne schiebt dabei ueber ihren eigenen Bildlauf statt ueber eine Ansichtsmatrix — von aussen ist das dieselbe Geste. */ #wir-svg, #gr-svg, .pn-stage, .rk-stage, .rk-stage canvas, .gr-stage canvas, #pn-3d canvas { touch-action:none; } /* Frisch eingefuegter Block: kurz aufleuchten (H-03). Bei zwanzig gleich aussehenden Bloecken ist die Lage allein keine Antwort auf „welcher ist der neue?" — die Ansicht springt zu ihm, und er sagt kurz, dass er es ist. Bewegungsreduktion wird beachtet (s. Regel am Dateianfang). */ .wn.wn-neu .wn-rahmen { animation:wn-neu 1.3s ease; } @keyframes wn-neu { 0%, 55% { stroke:var(--acc); stroke-width:2.5; filter:drop-shadow(0 0 6px var(--acc)); } 100% { stroke:var(--bdr); stroke-width:1; filter:none; } } @media (prefers-reduced-motion:reduce) { .wn.wn-neu .wn-rahmen { animation:none; stroke:var(--acc); } } /* Dieselbe Antwort in der Geräteliste: eine Kopie aus der Verdrahtung leuchtet beim nächsten Öffnen kurz auf (seit 24.10.2026). Über box-shadow inset, weil fixierte Zellen ihren Grund mit !important tragen. */ #dev-tbl-wrap tr.tr-neu > td { animation:tr-neu 1.8s ease; } @keyframes tr-neu { 0%, 50% { box-shadow:inset 0 0 0 999px color-mix(in srgb, var(--acc) 22%, transparent); } 100% { box-shadow:inset 0 0 0 999px transparent; } } @media (prefers-reduced-motion:reduce) { #dev-tbl-wrap tr.tr-neu > td { animation:none; box-shadow:inset 3px 0 0 var(--acc); } } /* Waehrend der Import-Analyse (A2-15): gedaempft und gesperrt statt scheinbar bedienbar. Der Zeiger sagt es mit — eine Flaeche, die auf keinen Klick reagiert und dabei normal aussieht, wird als Fehler gelesen. */ .modal-bd.laedt { opacity:.55; pointer-events:none; cursor:progress; } /* ---------- PoE-Budget je Switch (Audit 10.09.2026, F-04) ---------- Ein Balken je speisendem Geraet, nicht eine Zahl: „wie viel Luft ist noch?" beantwortet er auf einen Blick, die Zahl daneben beantwortet „wie viel genau". **Die Farben kommen NICHT aus AVP.SIGNALS** — Farbe in der Flaeche gehoert in dieser App den Signalarten (s. §Design). Hier geht es um einen ZUSTAND, und dafuer gilt dieselbe Ausnahme wie bei Status und Herkunft in der Tabelle. */ .poe-leiste { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 6px; } .poe-leiste[hidden] { display:none; } .poe-kopf { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-stretch:87.5%; text-transform:none; letter-spacing:0; font-size:11px; color:var(--mut); margin-right:4px; } .poe-chip { position:relative; display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); font-size:12px; color:var(--txt); overflow:hidden; } .poe-chip b { font-family:var(--f-display); font-stretch:87.5%; font-weight:600; } .poe-chip .poe-w { font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--mut); } .poe-chip .ti { font-size:14px; color:var(--warn); } .poe-chip.on { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); } /* Der Balken liegt HINTER dem Text, nicht daneben: er ist eine Fuellstandsanzeige, kein zweites Bedienelement — und in einer Leiste mit fuenf Switches waere ein eigener Balken je Chip doppelt so breit. */ .poe-bar { position:absolute; inset:0; z-index:0; pointer-events:none; } .poe-bar i { display:block; height:100%; opacity:.16; } .poe-chip > b, .poe-chip > .poe-w, .poe-chip > .ti { position:relative; z-index:1; } .poe-ok .poe-bar i { background:var(--ok); } .poe-warnung .poe-bar i { background:var(--warn); } .poe-warnung { border-color:color-mix(in srgb, var(--warn) 45%, var(--bdr)); } .poe-fehler .poe-bar i { background:var(--warn); opacity:.30; } .poe-fehler { border-color:var(--warn); color:var(--warn); } .poe-fehler .poe-w { color:var(--warn); } /* ---------- Bedienung: Touchpanel-Oberflächen (gui.js, seit 26.09.2026) ---------- Drei Spalten: Seitenliste, Bühne, Bausteine + Eigenschaften — dieselben Karten wie Rack und Technikeinbau (`rk-cols`, `rk-stage`, `rk-pal`, `rk-info`), nur eine Spalte mehr. Das Panel selbst (`.gui-panel`) ist eine Fläche fester Pixelgröße, per transform skaliert; ihre Gestalt kommt aus den Stil-Token `--g-*`, die je Stil und Thema auf `.gui-panel` gesetzt sind. Die Bausteine (`.gb-*`) lesen NUR diese Token — deshalb verschiebt ein Stilwechsel nichts. `--kunde` ist die Kundenfarbe der GUI (inline gesetzt). `--g-akzent` ist die Akzentfarbe des Stils — `on`, `fill` und die aktive Menütaste hängen daran; eine GUI kann sie inline ersetzen (`stilAkzent`), `--g-akzenttx` ist die Textfarbe darauf. */ .gui-cols { grid-template-columns:200px minmax(0,1fr) 320px; } /* Schmaler Monitor: wie bei Rack und Technikeinbau rücken Bausteine und Eigenschaften unter die Bühne; die Seitenliste bleibt links. Unter 900 px Seitenlauf. */ @media (max-width:1360px){ .gui-cols { grid-template-columns:170px minmax(0,1fr); grid-template-rows:440px auto; } .gui-cols .rk-side { grid-column:1 / -1; } #view-gui { flex:0 0 auto; } .gui-pal { max-height:none; } .gui-pal #gui-pal-list { max-height:190px; } } @media (max-width:900px){ .gui-cols { display:block; } } .gui-stage { display:flex; } .gui-buehne { margin:auto; } .gui-seiten { overflow:auto; padding:8px; display:flex; flex-direction:column; gap:2px; min-height:0; } .gui-sl-hd { font-family:var(--f-display); font-stretch:87.5%; font-size:11px; text-transform:none; letter-spacing:0; color:var(--mut); padding:10px 6px 4px; display:flex; align-items:center; justify-content:space-between; } .gui-sl-hd .btn.sm.icon { padding:2px; min-height:0; height:20px; width:20px; } .gui-sl-leer { font-size:12px; color:var(--mut); padding:2px 8px; } .gui-sz { display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:none; background:none; border-radius:var(--r); text-align:left; font:inherit; font-size:13px; color:var(--txt); cursor:pointer; } .gui-sz:hover { background:var(--card-2); } .gui-sz.on { background:var(--card-2); box-shadow:inset 2px 0 0 var(--acc); color:var(--acc); } .gui-sz > i.ti:first-child { width:18px; text-align:center; color:var(--mut); } .gui-sz.on > i.ti:first-child { color:var(--acc); } .gui-sz span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gui-sz em { font-style:normal; font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; } .gui-stage { padding:0; display:block; } .gui-stage.greifen, .gui-stage.greifen * { cursor:grabbing !important; } .gui-buehne { position:relative; padding:20px; box-sizing:border-box; } .gui-skal { position:relative; overflow:hidden; background:#111114; box-shadow:0 0 0 1px var(--bdr), 0 8px 30px rgba(0,0,0,.25); border-radius:6px; } .gui-skal.raster::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.35; background-image:linear-gradient(to right, rgba(127,127,127,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(127,127,127,.35) 1px, transparent 1px); background-size:var(--g-raster) var(--g-raster); } .gui-ov { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none; z-index:3; } .gui-selbox { position:absolute; outline:2px solid var(--acc); outline-offset:1px; box-sizing:border-box; pointer-events:none; } /* Griffe und Auswahlrahmen in BILDSCHIRM-Größe (Stufe 3): die Ebene ist mit dem Panel skaliert, `--gr` = 12 px ÷ Zoom, `--z` teilt die Strichstärke — bei 0,3 Zoom bleiben die Griffe greifbar. */ .gui-griff { position:absolute; width:var(--gr, 12px); height:var(--gr, 12px); background:var(--card); border:calc(2px / var(--z, 1)) solid var(--acc); border-radius:2px; pointer-events:auto; box-sizing:border-box; } .gui-griff.nw { left:calc(var(--gr, 12px) / -2); top:calc(var(--gr, 12px) / -2); cursor:nwse-resize; } .gui-griff.se { right:calc(var(--gr, 12px) / -2); bottom:calc(var(--gr, 12px) / -2); cursor:nwse-resize; } .gui-griff.ne { right:calc(var(--gr, 12px) / -2); top:calc(var(--gr, 12px) / -2); cursor:nesw-resize; } .gui-griff.sw { left:calc(var(--gr, 12px) / -2); bottom:calc(var(--gr, 12px) / -2); cursor:nesw-resize; } .gui-griff.n { left:calc(50% - var(--gr, 12px) / 2); top:calc(var(--gr, 12px) / -2); cursor:ns-resize; } .gui-griff.s { left:calc(50% - var(--gr, 12px) / 2); bottom:calc(var(--gr, 12px) / -2); cursor:ns-resize; } .gui-griff.w { left:calc(var(--gr, 12px) / -2); top:calc(50% - var(--gr, 12px) / 2); cursor:ew-resize; } .gui-griff.e { right:calc(var(--gr, 12px) / -2); top:calc(50% - var(--gr, 12px) / 2); cursor:ew-resize; } .gui-selbox { outline-width:calc(2px / var(--z, 1)); } .gui-selbox.gruppe { outline-width:calc(1px / var(--z, 1)); } .gui-rubber { border-width:calc(1px / var(--z, 1)); } .gui-rubber { position:absolute; border:1px dashed var(--acc); background:rgba(200,16,46,.08); pointer-events:none; } .gui-pal { max-height:52%; } .gui-pal #gui-pal-list { overflow:auto; min-height:150px; } .gui-pal-kacheln { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:2px 0 8px; } .gui-pk { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--bdr); background:var(--card); border-radius:var(--r); font:inherit; font-size:11px; color:var(--txt); cursor:pointer; line-height:1.15; text-align:center; } .gui-pk i { font-size:20px; color:var(--mut); } .gui-pk:hover { border-color:var(--acc); color:var(--acc); } .gui-pk:hover i { color:var(--acc); } .gui-info { overflow:auto; } .gui-kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12.5px; margin:8px 0 10px; } .gui-kv span { color:var(--mut); } .gui-kv b { font-weight:500; overflow-wrap:anywhere; } .gui-frm { display:flex; flex-direction:column; gap:10px; margin-top:6px; } .gui-frm .field > .inp + .inp { margin-top:4px; } .gui-frm textarea.inp { min-height:70px; resize:vertical; font:inherit; } .gui-xy { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; } .gui-xy.drei { grid-template-columns:1fr 1fr 1fr auto; } .gui-xy .inp[type=color] { padding:2px; height:32px; } .gui-kn2 { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; } /* ---------- Das Panel ---------- */ .gui-panel { position:absolute; left:0; top:0; transform-origin:0 0; overflow:hidden; background:var(--g-bg); color:var(--g-tx); font-family:var(--g-font); font-stretch:100%; font-size:20px; line-height:1.2; user-select:none; -webkit-user-select:none; --g-frei-f:initial; --g-frei-t:initial; --g-frei-r:initial; } .gui-panel .ge { position:absolute; box-sizing:border-box; } .gui-panel .ge > * { width:100%; height:100%; box-sizing:border-box; } .gui-panel.editor .ge { cursor:move; } .gui-panel.editor .ge.ge-fremd { cursor:default; pointer-events:none; opacity:.85; } .gui-panel.editor .ge.zu-klein::after { content:''; position:absolute; inset:-2px; border:2px dashed var(--warn); pointer-events:none; border-radius:4px; } .gui-panel.editor .ge.ueber-rand::after { content:''; position:absolute; inset:-2px; border:2px solid var(--warn); pointer-events:none; border-radius:4px; } .gui-panel .ge.z-gesperrt { opacity:.45; } .gui-panel .ge.z-gedrueckt > * { filter:brightness(.85); } .gui-panel .ge-dunkel { position:absolute; inset:0; background:rgba(0,0,0,.45); } .gui-panel .ti { line-height:1; } /* Stil-Token: Klassisch (nach den Entwürfen Ismaning/Neckarpark) */ .gui-panel[data-stil="klassisch"] { --g-bg:#E4E6E9; --g-card:#FFFFFF; --g-card2:#D9DBDF; --g-tx:#1C1D20; --g-mut:#6B6F76; --g-kopf:#FFFFFF; --g-kopftx:#1C1D20; --g-akzent:#3DBE5A; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#C81E1E; --g-r:10px; --g-rb:8px; --g-font:"Bahnschrift","Segoe UI",sans-serif; --g-sh:none; --g-bd:transparent; --g-btn:#D9DBDF; --g-btntx:#1C1D20; --g-nav:#D9DBDF; --g-navtx:#5F6368; --g-navon:var(--g-akzent); --g-navontx:var(--g-akzenttx); --g-track:#C4C8CD; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#E9EAEC; } .gui-panel[data-stil="klassisch"][data-thema="dunkel"] { --g-bg:#1B1C1F; --g-card:#27292E; --g-card2:#33363C; --g-tx:#EDEEF0; --g-mut:#9A9EA5; --g-kopf:#111214; --g-kopftx:#FFFFFF; --g-btn:#3A3D44; --g-btntx:#EDEEF0; --g-nav:#33363C; --g-navtx:#9A9EA5; --g-track:#4A4E55; --g-reg:#33363C; } /* iOS (Apple Human Interface Guidelines, Systemblau) */ .gui-panel[data-stil="ios"] { --g-bg:#F2F2F7; --g-card:#FFFFFF; --g-card2:#E5E5EA; --g-tx:#000000; --g-mut:#8E8E93; --g-kopf:#F2F2F7; --g-kopftx:#000000; --g-akzent:#007AFF; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#FF3B30; --g-r:16px; --g-rb:12px; --g-font:-apple-system,"SF Pro Text","Segoe UI Variable","Segoe UI",system-ui,sans-serif; --g-sh:0 1px 2px rgba(0,0,0,.06); --g-bd:transparent; --g-btn:#E5E5EA; --g-btntx:#000000; --g-nav:transparent; --g-navtx:#8E8E93; --g-navon:transparent; --g-navontx:var(--g-akzent); --g-track:#E5E5EA; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#F2F2F7; } .gui-panel[data-stil="ios"][data-thema="dunkel"] { --g-bg:#000000; --g-card:#1C1C1E; --g-card2:#2C2C2E; --g-tx:#FFFFFF; --g-mut:#8E8E93; --g-kopf:#000000; --g-kopftx:#FFFFFF; --g-akzent:#0A84FF; --g-crit:#FF453A; --g-btn:#2C2C2E; --g-btntx:#FFFFFF; --g-track:#3A3A3C; --g-reg:#2C2C2E; } /* Fluent (Microsoft Fluent 2 / Teams Rooms) */ .gui-panel[data-stil="fluent"] { --g-bg:#F5F5F5; --g-card:#FFFFFF; --g-card2:#EBEBEB; --g-tx:#242424; --g-mut:#616161; --g-kopf:#FFFFFF; --g-kopftx:#242424; --g-akzent:#5B5FC7; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#C4314B; --g-r:8px; --g-rb:4px; --g-font:"Segoe UI Variable","Segoe UI","Bahnschrift",sans-serif; --g-sh:0 1px 2px rgba(0,0,0,.10); --g-bd:#E0E0E0; --g-btn:#FFFFFF; --g-btntx:#242424; --g-nav:transparent; --g-navtx:#616161; --g-navon:color-mix(in srgb, var(--g-akzent) 12%, #FFFFFF); --g-navontx:var(--g-akzent); --g-track:#E0E0E0; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#F5F5F5; } .gui-panel[data-stil="fluent"][data-thema="dunkel"] { --g-bg:#1F1F1F; --g-card:#292929; --g-card2:#333333; --g-tx:#FFFFFF; --g-mut:#ADADAD; --g-kopf:#292929; --g-kopftx:#FFFFFF; --g-akzent:#7F85F5; --g-crit:#E37D80; --g-bd:#3D3D3D; --g-btn:#333333; --g-btntx:#FFFFFF; --g-navtx:#ADADAD; --g-navon:color-mix(in srgb, var(--g-akzent) 30%, #1F1F1F); --g-navontx:color-mix(in srgb, var(--g-akzent) 70%, #FFFFFF); --g-track:#3D3D3D; --g-reg:#333333; } /* Freie Farben je Baustein (Entscheidung 3): Fläche, Text, Rahmen überschreiben den Stil */ .gui-panel .ge.frei-f > * { background:var(--g-frei-f) !important; } .gui-panel .ge.frei-t > * { color:var(--g-frei-t) !important; } .gui-panel .ge.frei-r > * { border:2px solid var(--g-frei-r) !important; } /* Bausteine */ border-radius:var(--g-rb); border:1px solid var(--g-bd); box-shadow:var(--g-sh); font-size:15px; text-align:center; padding:6px; position:relative; overflow:hidden; } .gui-panel .gb-led { position:absolute; left:6px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--g-on); box-shadow:0 0 0 2px var(--g-card); } .gui-panel .gb-led.aus { background:var(--g-crit); } .gui-panel .gb-ring { position:absolute; inset:3px; border-radius:inherit; border:2px dashed currentColor; opacity:.25; pointer-events:none; } .gui-panel .gb-umsch { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; background:var(--g-card); border-radius:var(--g-r); border:1px solid var(--g-bd); font-size:18px; } .gui-panel .gb-umsch .gb-tx:empty { display:none; } .gui-panel .gb-umsch .gb-tx:empty + .gb-switch { margin:0 auto; } .gui-panel .gb-switch { width:60px; height:34px; border-radius:17px; background:var(--g-track); position:relative; flex:none; } .gui-panel .gb-switch i { position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:var(--g-knob); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s; } .gui-panel .gb-switch.on { background:var(--g-on); } .gui-panel .gb-switch.on i { left:29px; } .gui-panel[data-stil="material"] .gb-switch.on i { background:var(--g-akzenttx); } /* Knopf = Akzent wäre auf der Akzentbahn unsichtbar */ .gui-panel .gb-text { display:flex; align-items:center; white-space:pre-wrap; overflow:hidden; line-height:1.25; } .gui-panel .gb-text.gb-1z { display:block; white-space:nowrap; text-overflow:ellipsis; line-height:28px; } /* Kartentitel: eine Zeile, sonst lief ein langer Name über den Kartenrand */ .gui-panel .gb-sym { display:grid; place-items:center; } .gui-panel .gb-sym .ti { font-size:inherit; } .gui-panel .gb-img { object-fit:contain; display:block; } .gui-panel .gb-img.leer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:2px dashed var(--g-mut); color:var(--g-mut); border-radius:var(--g-rb); font-size:14px; } .gui-panel .gb-img.leer .ti { font-size:32px; } .gui-panel .gb-linie { background:var(--g-mut); margin:auto; min-width:2px; min-height:2px; } .gui-panel .ge-linie > .gb-linie { width:100%; } /* Regler senkrecht: Name, Bahn, ▲ Norm ▼, Stumm, Akku */ .gui-panel .gb-pegel { display:flex; flex-direction:column; gap:2px; padding:4px; background:var(--g-card2); border-radius:var(--g-rb); } .gui-panel .gb-pegel i { flex:1; background:var(--g-track); border-radius:2px; } .gui-panel .gb-pegel i.an { background:var(--g-on); } .gui-panel .gb-pegel i.gelb { background:#E8B025; } .gui-panel .gb-pegel i.rot { background:var(--g-crit); } .gui-panel .gb-bildf { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:#0A0A0C; color:#DDD; border-radius:min(var(--g-r), 16px); font-size:18px; } /* nie die Tastenform: eine Pille (Material, Zoom, Webex) machte aus dem Bild ein Oval */ .gui-panel .gb-bildf .ti { font-size:28px; opacity:.6; } .gui-panel .gb-bildf { flex-direction:row; gap:10px; font-size:15px; } .gui-panel .gb-spr { display:inline-flex; gap:3px; font-size:15px; letter-spacing:.06em; border:1px solid currentColor; border-radius:min(var(--g-rb), 14px); padding:3px 5px; opacity:.9; } .gui-panel .gb-spr b { padding:5px 10px; border-radius:min(calc(var(--g-rb) - 2px), 11px); opacity:.5; font-weight:600; } .gui-panel .gb-spr b.on { opacity:1; background:currentColor; } .gui-panel .gb-spr b.on .ti, .gui-panel .gb-spr b.on { color:inherit; } .gui-panel .gb-spr b.on { color:var(--g-kopf); background:var(--g-kopftx); } .gui-panel .gb-inline { display:flex; align-items:center; justify-content:center; } .gui-panel .gb-inline .gb-spr { color:var(--g-tx); } .gui-panel .gb-inline .gb-spr b.on { color:var(--g-bg); background:var(--g-tx); } .gui-panel .gb-hg { background:linear-gradient(135deg, #2B3A55 0%, #6B7FA3 55%, #C9A25E 100%); } .gui-panel .ge-hintergrund .gb-img { object-fit:cover; } /* Auf einem dunklen Motiv stehen Uhr, Text und Symbole hell (seit 25.10.2026) */ .gui-panel .ge.auf-dunkel { color:#FFFFFF; } .gui-panel .gb-tx { min-width:0; overflow:hidden; text-overflow:ellipsis; } /* ---------- Vorführmodus ---------- */ .overlay.gui-vf { padding:0; flex-direction:column; background:#0B0B0D; } .gui-vf-kopf { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#1A1B1E; color:#E8E9EB; font-size:13px; width:100%; } .gui-vf-kopf .btn { color:#E8E9EB; border-color:#4A4E55; } .gui-vf-kopf .btn.gh { border-color:transparent; } .gui-vf-raum { font-size:12px; color:#9AA0A6; padding:2px 8px; border:1px solid #4A4E55; border-radius:99px; } .gui-vf-raum.an { color:#4CC97A; border-color:#2E6B45; } .gui-vf-raum[hidden] { display:none; } .gui-vf-buehne { flex:1; width:100%; display:grid; place-items:center; min-height:0; background:#0B0B0D; } .gui-vf-buehne .gui-skal { border-radius:10px; box-shadow:0 0 0 8px #1A1B1E, 0 20px 60px rgba(0,0,0,.6); cursor:pointer; } /* ---------- Bedienkonzept (Blatt) ---------- */ .pdf-mehr .pdf-blatt { page-break-after:always; break-after:page; } .pdf-mehr .pdf-blatt:last-child { page-break-after:auto; break-after:auto; } /* Blätter verschiedener Größe (planDruckenAlle): der Umbruch liegt an der Hülle `.pdf-seite` */ .pdf-mehr > .pdf-seite { break-after:page; } .pdf-mehr > .pdf-seite:last-child { break-after:auto; } .pdf-blatt .gkp { font-size:3mm; display:flex; flex-direction:column; gap:2mm; height:100%; } .pdf-blatt .gkp-titel { font-family:var(--f-display); font-stretch:87.5%; font-size:4mm; font-weight:600; } .pdf-blatt .gkp-titel .mut { font-weight:400; color:var(--mut); font-size:2.8mm; } .pdf-blatt .gkp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5mm 6mm; margin:1mm 0; } .pdf-blatt .gkp-z span { display:block; font-size:2.2mm; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; } .pdf-blatt .gkp-z b { font-size:3mm; font-weight:600; } .pdf-blatt .gkp-h { font-family:var(--f-display); font-stretch:87.5%; font-size:2.6mm; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin-top:2mm; } .pdf-blatt .gkp-fluss { display:flex; flex-wrap:wrap; align-items:center; gap:1.5mm; } .pdf-blatt .gkp-fl { border:.3mm solid var(--txt); border-radius:1.5mm; padding:1mm 2.5mm; font-size:2.8mm; } .pdf-blatt .gkp-fl.standby { border-style:dashed; } .pdf-blatt .gkp-fl.popup { border-radius:4mm; } .pdf-blatt .gkp-fluss i { font-style:normal; color:var(--mut); } .pdf-blatt .gkp-sub { font-size:2.6mm; color:var(--mut); margin:1mm 0 0; } .pdf-blatt .gkp-mitte { display:flex; gap:4mm; align-items:flex-start; flex:1; min-height:0; } .pdf-blatt .gkp-bild { position:relative; flex:none; overflow:hidden; border:.3mm solid var(--bdr); border-radius:1.5mm; background:#111; } .pdf-blatt .gkp-bild .gui-panel { font-stretch:100%; } .pdf-blatt .gkp-marke { position:absolute; width:5mm; height:5mm; margin:-1mm 0 0 -1mm; border-radius:50%; background:#26788E; color:#fff; font-family:var(--f-mono); font-size:2.6mm; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 .4mm #fff; font-style:normal; z-index:5; } .pdf-blatt .gkp-marke.r { background:#1C1D20; } .pdf-blatt .gkp-liste { flex:1; min-width:0; overflow:hidden; } .pdf-blatt .gkp-liste .ebp-tab { margin-top:0; font-size:2.5mm; } /* ---------- Bedienung, zweite Runde (26.09.2026): Elemente statt Verbundtypen ---------- Taste in sechs Formen (taste · kachel · nav · flach · crit · ok), Fläche in Varianten (karte · kopf · regler · dunkel · leer), dazu Lampe, Wert, Bahn, Uhr, PIN-Feld. Die Bausteine (Regler, Kopfzeile, Menü …) sind Gruppen daraus und haben KEIN eigenes CSS mehr. */ /* Symbol (--ik), Schrift (--tx) und Radiuskappe (--rmax) kommen je Taste aus ihrem Maß (gui.js `tastenMass`): eine Pille bleibt nur auf breiten Tasten eine Pille, quadratische Kacheln werden höchstens auf 22 % der kleineren Seite gerundet — sonst wird aus Material und Zoom ein Ei. */ .gui-panel .gb-taste { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--g-btn); color:var(--g-btntx); border-radius:min(var(--g-rb), var(--rmax, 999px)); border:1px solid var(--g-bd); box-shadow:var(--g-sh); font-size:var(--tx, 15px); text-align:center; padding:4px 6px; position:relative; overflow:hidden; line-height:1.15; } .gui-panel .gb-taste .gb-ik { font-size:var(--ik, 30px); display:grid; place-items:center; position:relative; line-height:1; } .gui-panel .gb-taste .gb-tx { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gui-panel .gb-taste small { font-size:calc(var(--tx, 15px) * .75); opacity:.75; } .gui-panel .gb-taste.on { background:var(--g-on); color:var(--g-ontx); border-color:transparent; } .gui-panel .gb-taste.f-kachel { background:transparent; border:none; box-shadow:none; color:var(--g-tx); padding:0; gap:6px; } .gui-panel .gb-taste.f-kachel .gb-ik { width:var(--ikw, 76px); height:var(--ikh, 64px); border-radius:min(var(--g-rb), var(--rmax2, 999px)); background:var(--g-btn); color:var(--g-btntx); border:1px solid var(--g-bd); box-shadow:var(--g-sh); } .gui-panel .gb-taste.f-kachel.on { background:transparent; color:var(--g-tx); } .gui-panel .gb-taste.f-kachel.on .gb-ik { background:var(--g-on); color:var(--g-ontx); border-color:transparent; } .gui-panel[data-stil="klassisch"] .gb-taste.f-kachel.on .gb-ik, .gui-panel[data-stil="ios"] .gb-taste.f-kachel.on .gb-ik, .gui-panel[data-stil="fluent"] .gb-taste.f-kachel.on .gb-ik, .gui-panel[data-stil="webex"] .gb-taste.f-kachel.on .gb-ik { background:var(--g-btn); color:var(--g-akzent); box-shadow:inset 0 0 0 3px var(--g-akzent), var(--g-sh); } .gui-panel .gb-taste.f-kachel.on .gb-tx { font-weight:600; } .gui-panel .gb-taste.f-nav { background:var(--g-nav); color:var(--g-navtx); } .gui-panel .gb-taste.f-nav .gb-tx { white-space:normal; line-height:1.1; max-height:2.3em; } .gui-panel .gb-taste.f-nav.on { background:var(--g-navon); color:var(--g-navontx); } .gui-panel .gb-taste.f-flach { background:transparent; border-color:transparent; box-shadow:none; color:inherit; } .gui-panel .gb-taste.f-glas { background:rgba(20,22,26,.34); color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none; backdrop-filter:blur(3px); } /* Glastaste über dem Kamerabild */ .gui-panel .gb-taste.f-glas.on, .gui-panel .gb-taste.f-glas:active { background:rgba(20,22,26,.58); } .gui-panel .gb-taste.f-crit, .gui-panel .gb-taste.f-crit.on { background:var(--g-crit); color:#fff; border-color:transparent; } .gui-panel .gb-taste.f-ok, .gui-panel .gb-taste.f-ok.on { background:var(--g-on); color:var(--g-ontx); border-color:transparent; } .gui-panel .ge-flaeche.v-kopf ~ .ge .gb-taste.f-flach { color:inherit; } .gui-panel .gb-led { position:absolute; left:6px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--g-on); box-shadow:0 0 0 2px var(--g-card); z-index:1; } .gui-panel .gb-led.aus { background:var(--g-crit); } /* rechte Lampe: „Quelle aktiv geschaltet" (Rückmeldung), Ring in Akzentfarbe */ .gui-panel .gb-led.r { left:auto; right:6px; background:var(--g-akzent); box-shadow:0 0 0 2px var(--g-card), 0 0 0 3px var(--g-akzent); } .gui-panel .gb-led.r.aus { background:var(--g-card2); box-shadow:0 0 0 2px var(--g-card), 0 0 0 3px var(--g-mut); } .gui-panel .gb-ring { position:absolute; inset:3px; border-radius:inherit; border:2px dashed currentColor; opacity:.25; pointer-events:none; } .gui-panel .gb-lampe { border-radius:50%; background:var(--g-on); box-shadow:0 0 0 2px var(--g-card); } .gui-panel .gb-lampe.aus { background:var(--g-crit); } .gui-panel .gb-card { border-radius:var(--g-r); box-sizing:border-box; } .gui-panel .gb-card.v-karte { background:var(--g-card); box-shadow:var(--g-sh); border:1px solid var(--g-bd); } .gui-panel .gb-card.v-kopf { background:var(--g-kopf); border-bottom:1px solid var(--g-bd); } .gui-panel .gb-card.v-regler { background:var(--g-reg); border:1px solid var(--g-bd); } .gui-panel .gb-card.v-dunkel { background:#0A0A0C; } .gui-panel .gb-card.v-leer { border:1px solid var(--g-mut); background:transparent; } /* Texte über einer Kopf/Fuß-Fläche nehmen deren Textfarbe: die Fläche liegt in der Gruppe darunter */ .gui-panel .ge-text, .gui-panel .ge-uhr, .gui-panel .ge-symbol, .gui-panel .ge-sprache, .gui-panel .ge-thema, .gui-panel .ge-bild { color:var(--g-tx); } .gui-panel .ge-flaeche.v-kopf ~ .ge-text, .gui-panel .ge-flaeche.v-kopf ~ .ge-uhr, .gui-panel .ge-flaeche.v-kopf ~ .ge-symbol, .gui-panel .ge-flaeche.v-kopf ~ .ge-sprache, .gui-panel .ge-flaeche.v-kopf ~ .ge-thema, .gui-panel .ge-flaeche.v-kopf ~ .ge-bild, .gui-panel .ge-flaeche.v-kopf ~ .ge-taste .gb-taste.f-flach { color:var(--g-kopftx); } /* Zustands-Chips (Board 2, Grundsatz 1 und 2): Wert und Status als Pille mit Punkt statt schwarzer Kästen */ .gui-panel .gb-wert { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--g-card2); color:var(--g-tx); border-radius:999px; font-size:14px; font-weight:600; padding:0 10px; white-space:nowrap; overflow:hidden; } .gui-panel .gb-wert span { font-weight:400; opacity:.8; } .gui-panel .gb-wert.gross { background:transparent; padding:0; justify-content:flex-start; font-size:var(--wg, 30px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.01em; } .gui-panel .gb-wert.gross b { font-weight:700; } .gui-panel .gb-status { display:flex; align-items:center; justify-content:center; gap:7px; background:var(--g-card2); color:var(--g-tx); border-radius:999px; font-size:14px; font-weight:600; padding:0 12px; white-space:nowrap; overflow:hidden; } .gui-panel .gb-status::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--g-akzent); flex:none; } .gui-panel .gb-status.aus { color:var(--g-mut); } .gui-panel .gb-status.aus::before { background:var(--g-mut); } .gui-panel .ge-flaeche.v-kopf ~ .ge-status .gb-status { background:color-mix(in srgb, var(--g-kopftx) 12%, transparent); color:var(--g-kopftx); } .gui-panel .ge-flaeche.v-kopf ~ .ge-status .gb-status.aus { opacity:.75; } .gui-panel .ge-flaeche.v-kopf ~ .ge-status .gb-status.aus::before { background:var(--g-kopftx); } .gui-panel[data-stil="klassisch"][data-thema="dunkel"] .ge-flaeche.v-kopf ~ .ge-status .gb-status::before { background:#fff; } /* Klassisch: Kopf und Fuß hell bzw. dunkel nach dem Thema, die Kundenfarbe als Kante oben (seit 25.10.2026, Rückmeldung Chris: „im Hellmodus sind Kopf und Fußzeile dunkel") — am Fuß ist die obere Kante die Trennlinie zum Inhalt */ .gui-panel[data-stil="klassisch"] .gb-card.v-kopf { border-top:4px solid var(--kunde); } .gui-panel[data-stil="klassisch"]:not([data-thema="dunkel"]) .gb-card.v-kopf { border-bottom-color:#D9DBDF; } .gui-panel .gb-bahn { position:relative; margin:0 auto; width:14px; height:100%; background:var(--g-track); border-radius:7px; } .gui-panel .gb-bahn i { position:absolute; left:0; right:0; bottom:0; background:var(--g-fill); border-radius:7px; } .gui-panel .gb-bahn b { position:absolute; left:50%; width:32px; height:32px; margin-left:-16px; margin-bottom:-16px; border-radius:50%; background:var(--g-knob); box-shadow:0 1px 3px rgba(0,0,0,.35); } .gui-panel .ge-bahn > .gb-bahn { width:14px; } .gui-panel .gb-bahnq { position:relative; height:12px; margin:auto 0; background:var(--g-track); border-radius:6px; top:50%; transform:translateY(-50%); } .gui-panel .gb-bahnq i { position:absolute; left:0; top:0; bottom:0; background:var(--g-fill); border-radius:6px; } .gui-panel .gb-bahnq b { position:absolute; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; background:var(--g-knob); box-shadow:0 1px 3px rgba(0,0,0,.35); } .gui-panel .ge-bahn > .gb-bahnq { height:12px; } .gui-panel .gb-uhr { display:flex; align-items:center; justify-content:flex-end; white-space:nowrap; opacity:.9; } .gui-panel .gb-uhr[style*="text-align:left"] { justify-content:flex-start; } .gui-panel .gb-uhr[style*="text-align:center"] { justify-content:center; } .gui-panel .gb-pinfeld { border-radius:var(--g-rb); background:var(--g-card2); color:var(--g-tx); display:grid; place-items:center; font-size:26px; letter-spacing:.3em; } .gui-panel .gb-pinfeld:empty::before { content:'••••'; opacity:.3; } .gui-panel .gb-spr b.on { color:var(--g-bg); background:var(--g-tx); } .gui-panel .ge-flaeche.v-kopf ~ .ge-sprache .gb-spr b.on, .gui-panel .ge-flaeche.v-kopf ~ .ge-thema .gb-spr b.on { color:var(--g-kopf); background:var(--g-kopftx); } .gui-selbox.gruppe { outline:1px dashed var(--acc); outline-offset:4px; } .gui-panel .ge.ge-rahmen { } /* Stil-Token: Material 3 (Android), Zoom Rooms, Webex — nach dem Entwurfsboard */ .gui-panel[data-stil="material"] { --g-bg:#F7F2FA; --g-card:#FFFFFF; --g-card2:#EADDFF; --g-tx:#1D1B20; --g-mut:#49454F; --g-kopf:#F7F2FA; --g-kopftx:#1D1B20; --g-akzent:#6750A4; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#B3261E; --g-r:20px; --g-rb:999px; --g-font:"Roboto","Segoe UI",sans-serif; --g-sh:0 1px 3px rgba(0,0,0,.12); --g-bd:transparent; --g-btn:#E8DEF8; --g-btntx:#1D192B; --g-nav:transparent; --g-navtx:#49454F; --g-navon:#E8DEF8; --g-navontx:#1D192B; --g-track:#E8DEF8; --g-fill:var(--g-akzent); --g-knob:var(--g-akzent); --g-reg:#F7F2FA; } .gui-panel[data-stil="material"][data-thema="dunkel"] { --g-bg:#141218; --g-card:#211F26; --g-card2:#2B2930; --g-tx:#E6E0E9; --g-mut:#CAC4D0; --g-kopf:#141218; --g-kopftx:#E6E0E9; --g-akzent:#D0BCFF; --g-akzenttx:#381E72; --g-crit:#F2B8B5; --g-btn:#4A4458; --g-btntx:#E8DEF8; --g-navtx:#CAC4D0; --g-navon:#4A4458; --g-navontx:#E8DEF8; --g-track:#4A4458; --g-reg:#2B2930; } .gui-panel[data-stil="zoom"] { --g-bg:#FFFFFF; --g-card:#F5F7FA; --g-card2:#E7EBF0; --g-tx:#232333; --g-mut:#6E7191; --g-kopf:#FFFFFF; --g-kopftx:#232333; --g-akzent:#0E72ED; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#E02828; --g-r:12px; --g-rb:999px; --g-font:"Lato","Segoe UI",sans-serif; --g-sh:none; --g-bd:#E7EBF0; --g-btn:#FFFFFF; --g-btntx:#232333; --g-nav:transparent; --g-navtx:#6E7191; --g-navon:var(--g-akzent); --g-navontx:var(--g-akzenttx); --g-track:#E7EBF0; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#F5F7FA; } .gui-panel[data-stil="zoom"][data-thema="dunkel"] { --g-bg:#1B2A44; --g-card:#243A5E; --g-card2:#2E4770; --g-tx:#FFFFFF; --g-mut:#A9B6CC; --g-kopf:#14213A; --g-kopftx:#FFFFFF; --g-akzent:#2D8CFF; --g-crit:#F26D6D; --g-bd:transparent; --g-btn:#2E4770; --g-btntx:#FFFFFF; --g-navtx:#A9B6CC; --g-track:#2E4770; --g-knob:#FFFFFF; --g-reg:#243A5E; } .gui-panel[data-stil="webex"] { --g-bg:#F7F7F7; --g-card:#FFFFFF; --g-card2:#EDEDED; --g-tx:#121212; --g-mut:#707070; --g-kopf:#FFFFFF; --g-kopftx:#121212; --g-akzent:#00AB50; --g-akzenttx:#FFFFFF; --g-on:var(--g-akzent); --g-ontx:var(--g-akzenttx); --g-crit:#D4371C; --g-r:14px; --g-rb:999px; --g-font:"Bahnschrift","Segoe UI",sans-serif; --g-sh:none; --g-bd:#E3E3E3; --g-btn:#EDEDED; --g-btntx:#121212; --g-nav:transparent; --g-navtx:#707070; --g-navon:#121212; --g-navontx:#FFFFFF; --g-track:#DEDEDE; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#F7F7F7; } .gui-panel[data-stil="webex"][data-thema="dunkel"] { --g-bg:#121212; --g-card:#1F1F1F; --g-card2:#2B2B2B; --g-tx:#FFFFFF; --g-mut:#A3A3A3; --g-kopf:#121212; --g-kopftx:#FFFFFF; --g-akzent:#00CF64; --g-akzenttx:#0A2A17; --g-crit:#FF5C4D; --g-bd:#333333; --g-btn:#2B2B2B; --g-btntx:#FFFFFF; --g-navtx:#A3A3A3; --g-navon:#FFFFFF; --g-navontx:#121212; --g-track:#3A3A3A; --g-fill:var(--g-akzent); --g-knob:#FFFFFF; --g-reg:#1F1F1F; } /* Palette mit zwei Reitern, Symbolbibliothek, Symbolfeld, Marken */ .gui-paltabs { margin:0 0 6px; } .gui-palhint { margin:0 0 6px; } /* Verknüpfen: Seitenreiter über der Vorschau (seit 25.10.2026) */ .gui-vk-seiten { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; } .gui-vk-sr { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); color:var(--txt); font:inherit; font-size:12px; cursor:pointer; } .gui-vk-sr:hover:not(:disabled) { border-color:var(--acc); } .gui-vk-sr.on { background:var(--acc-f); border-color:var(--acc-f); color:#fff; } .gui-vk-sr:disabled { opacity:.45; cursor:default; } .gui-vk-sr b { min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--gelb-f); color:var(--auf-st); font-size:10px; line-height:16px; text-align:center; } .gui-vk-sr .ti-check { color:var(--ok); } .gui-vk-sr.on .ti-check { color:#fff; } /* Verknüpfen: mehrere Ton-Geräte, was „Anlage aus" tut (seit 25.10.2026) */ .gui-vk-ton { display:flex; flex-wrap:wrap; gap:4px; } .gui-vk-ton span { display:inline-flex; align-items:center; gap:2px; padding-left:8px; border:1px solid var(--bdr); border-radius:var(--r); font-size:12px; } .gui-vk-ton em { font-style:normal; color:var(--mut); margin-left:4px; font-family:var(--f-mono); font-size:11px; } .gui-vk-tut { margin:0; padding:0; list-style:none; display:grid; gap:3px; font-size:12px; } .gui-vk-tut li { display:flex; gap:6px; align-items:center; } .gui-vk-tut .ti { color:var(--ok); } /* Motive des Hintergrundbilds (seit 25.10.2026) */ .gui-motive { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; } .gui-motiv { display:flex; flex-direction:column; gap:3px; padding:3px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); color:var(--txt); font:inherit; font-size:11px; cursor:pointer; text-align:center; } .gui-motiv i { display:block; height:40px; border-radius:4px; } .gui-motiv:hover { border-color:var(--acc); } .gui-motiv.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); } .gui-symfeld { display:grid; grid-template-columns:32px 1fr auto; gap:4px; align-items:center; } .gui-symvor { display:grid; place-items:center; font-size:20px; color:var(--mut); } .gui-info .tag { font-family:var(--f-display); font-stretch:87.5%; font-size:10px; letter-spacing:0; text-transform:none; color:var(--mut); border:1px solid var(--bdr); padding:1px 6px; border-radius:3px; margin-left:auto; } .gui-info .str-hd .tag + .tag { margin-left:4px; } .modal.sym-modal { max-width:820px; height:80vh; } .sym-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:4px; overflow:auto; flex:1; min-height:0; margin-top:10px; } .sym-k { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; border:1px solid var(--bdr); background:var(--card); border-radius:var(--r); font:inherit; font-size:10px; color:var(--mut); cursor:pointer; min-width:0; } .sym-k i { font-size:24px; color:var(--txt); } .sym-k span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sym-k:hover { border-color:var(--acc); color:var(--acc); } .sym-k:hover i { color:var(--acc); } .sym-k.on { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); } /* Stufe 3: Ziehen aus der Palette, eigene Symbolbilder, Haus-Stil-Marke */ .gui-pal-schatten { position:fixed; z-index:var(--z-drag); pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px; background:var(--card); border:1px solid var(--acc); border-radius:var(--r); box-shadow:var(--sh-2); font-size:11px; color:var(--acc); opacity:.92; } .gui-pal-schatten i { font-size:20px; } .gui-stage.drop .gui-skal { box-shadow:0 0 0 3px var(--acc), 0 8px 30px rgba(0,0,0,.25); } /* Ablaufbild (Board 2): Kästen = Seiten, Pfeile = Verweise */ .gui-stage .gui-ablauf { display:block; user-select:none; touch-action:none; } .gui-ablauf .ab-knoten rect { fill:var(--card); stroke:var(--txt); stroke-width:1.3; cursor:move; } .gui-ablauf .ab-knoten.art-standby rect { stroke-dasharray:5 4; } .gui-ablauf .ab-knoten.art-rahmen rect { fill:var(--card-2); } .gui-ablauf .ab-knoten.on rect { stroke:var(--acc); stroke-width:2.2; } .gui-ablauf .ab-knoten.ziel rect { stroke:var(--acc); stroke-width:2.2; stroke-dasharray:3 3; } .gui-ablauf .ab-knoten text { pointer-events:none; } .gui-ablauf .ab-name { font-family:var(--f-display); font-stretch:87.5%; font-size:15px; font-weight:600; fill:var(--txt); } .gui-ablauf .ab-sub { font-size:11px; fill:var(--mut); } .gui-ablauf .ab-griff { fill:var(--card); stroke:var(--mut); stroke-width:1.2; cursor:crosshair; } .gui-ablauf .ab-knoten:hover .ab-griff { stroke:var(--acc); fill:var(--acc); } .gui-ablauf .ab-plus { font-size:14px; font-weight:700; fill:var(--mut); pointer-events:none; } .gui-ablauf .ab-knoten:hover .ab-plus { fill:#fff; } .gui-ablauf .ab-pf { fill:none; stroke:var(--txt); stroke-width:1.5; marker-end:url(#ab-m); pointer-events:none; } .gui-ablauf .ab-hit { fill:none; stroke:transparent; stroke-width:14; cursor:pointer; } .gui-ablauf .ab-kante text { font-size:11px; fill:var(--mut); pointer-events:none; paint-order:stroke; stroke:var(--card); stroke-width:3px; } .gui-ablauf .ab-kante.menu .ab-pf { stroke:var(--mut); stroke-width:1; stroke-dasharray:3 4; marker-end:url(#ab-m-menu); } .gui-ablauf .ab-kante.impl .ab-pf { stroke-dasharray:6 3; } .gui-ablauf .ab-kante.on .ab-pf { stroke:var(--acc); stroke-width:2.5; marker-end:url(#ab-m-on); } .gui-ablauf .ab-kante.on text { fill:var(--acc); font-weight:600; } .gui-ablauf .ab-mk { fill:var(--txt); } .gui-ablauf .ab-mk.on { fill:var(--acc); } .gui-ablauf .ab-mk.menu { fill:var(--mut); } .gui-ablauf .ab-zug { fill:none; stroke:var(--acc); stroke-width:2; stroke-dasharray:6 4; pointer-events:none; } .gui-ab-hint { position:sticky; left:0; bottom:0; padding:6px 10px; font-size:12px; color:var(--mut); background:var(--card); border-top:1px solid var(--bdr); } #btn-gui-ablauf.on { color:var(--acc); border-color:var(--acc); } .gui-panel .gb-symbild { width:1em; height:1em; object-fit:contain; display:block; } .gui-panel .gb-taste .gb-ik .gb-symbild { width:var(--ik, 32px); height:var(--ik, 32px); } .gui-panel .gb-sym .gb-symbild { width:100%; height:100%; } .gui-ak-chips { display:flex; flex-wrap:wrap; gap:6px; } .gui-ak-chips .btn.icon i { margin-right:0; } /* Akzentfarbe: Fenster neben der Bühne, kein Modal — die Farbe steht live am Panel */ .gui-pop { position:absolute; right:334px; top:10px; width:300px; z-index:6; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); box-shadow:var(--sh-3); } .gui-pop-hd { display:flex; align-items:center; gap:8px; padding:8px 10px; font-family:var(--f-display); font-stretch:87.5%; font-weight:600; letter-spacing:.04em; border-bottom:1px solid var(--bdr); } .gui-pop-hd .sub { font-weight:400; letter-spacing:0; color:var(--mut); font-size:12px; } .gui-pop-hd .btn { margin-left:auto; } .gui-pop-bd { padding:10px; display:flex; flex-direction:column; gap:8px; } .gui-pop-bd .hint { margin:0; } .gui-pop-zeile { display:flex; gap:8px; align-items:center; } .gui-pop-zeile input[type="color"] { width:46px; height:34px; padding:2px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); flex:none; cursor:pointer; } .gui-pop-ft { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--bdr); } @media (max-width:1360px){ .gui-pop { right:10px; } } /* Menüleiste: Lage und Seiten */ .gui-lage { display:flex; gap:4px; flex-wrap:wrap; } .gui-lage .btn.on { border-color:var(--acc); color:var(--acc); } .gui-ml { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; } .gui-ml-z { display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--bdr); border-radius:var(--r); font-size:13px; cursor:pointer; } .gui-ml-z:has(:checked) { border-color:var(--acc); } .gui-ml-z i.ti { color:var(--mut); font-size:16px; } .gui-ml-z em { margin-left:auto; font-style:normal; font-size:11px; color:var(--mut); } /* Palette, Reiter Geräte: Gerät auf ein Bedienelement ziehen (24.10.2026) */ .gui-gz { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; margin-bottom:4px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); color:var(--txt); font:inherit; font-size:13px; text-align:left; cursor:grab; touch-action:none; } .gui-gz:hover { border-color:var(--acc); } .gui-gz > i.ti { color:var(--mut); font-size:18px; flex:none; } .gui-gz > span { display:flex; flex-direction:column; min-width:0; flex:1; } .gui-gz > span em { font-style:normal; font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gui-gz > b { flex:none; min-width:20px; padding:0 6px; border-radius:10px; background:var(--card-2); font-size:11px; font-weight:600; text-align:center; } .gui-gz.gebunden > i.ti { color:var(--acc); } #gui-stage .ge.gz-ziel { outline:3px solid var(--acc); outline-offset:2px; } /* Bedienung in drei Schritten: Bauen · Verknüpfen · Testen (24.10.2026, Board R2SsHXExfuM1gCELnuQnTG) */ .gui-schritte { display:flex; gap:2px; } .gui-schritt { gap:6px; } .gui-schritt > b { width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; background:var(--card-2); color:var(--mut); } .gui-schritt.on { color:var(--acc); border-color:var(--acc); } .gui-schritt.on > b { background:var(--acc-f); color:#fff; } .gui-schritt > em { font-style:normal; font-size:11px; font-weight:600; min-width:18px; padding:0 5px; border-radius:9px; background:color-mix(in srgb, var(--gelb-f) 20%, transparent); color:var(--gelb); } #view-gui .gui-cols[hidden], .gui-vk[hidden] { display:none; } /* Startfläche einer neuen GUI */ .gui-start { margin:auto; padding:24px; max-width:1100px; display:flex; flex-direction:column; gap:16px; } .gui-start h2 { margin:0; font-size:20px; } .gui-start-wege { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2.2fr) minmax(200px,1fr); gap:14px; align-items:stretch; } @media (max-width:1360px){ .gui-start-wege { grid-template-columns:1fr 1fr; } .gui-start-weg.breit { grid-column:1 / -1; order:3; } } .gui-start-weg { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--bdr); border-radius:var(--r-k); background:var(--card); } .gui-start-weg.empf { border-color:var(--acc); } .gui-start-weg h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; } .gui-start-weg h3 .ti { color:var(--acc); font-size:18px; } .gui-start-weg p { margin:0; font-size:13px; } .gui-start-weg .btn { margin-top:auto; align-self:flex-start; } .gui-start-vls { display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:10px; } .gui-start-vl { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); color:var(--txt); font:inherit; text-align:left; cursor:pointer; } .gui-start-vl:hover, .gui-start-vl:focus-visible { border-color:var(--acc); } .gui-start-vl b { font-size:13px; } .gui-start-vl small { font-size:11px; color:var(--mut); } .gui-vorschau { pointer-events:none; border-radius:4px; box-shadow:0 0 0 1px var(--bdr); } /* Verknüpfen */ .gui-vk { display:grid; grid-template-columns:minmax(260px, 1fr) minmax(0, 1.5fr) minmax(240px, 1fr); gap:12px; flex:1; min-height:0; } @media (max-width:1100px){ .gui-vk { grid-template-columns:1fr; } } .gui-vk > .card { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:12px; gap:8px; } .gui-vk .str-hd { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .gui-vk-filter { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); } .gui-vk-liste, .gui-vk-ziele { overflow:auto; display:flex; flex-direction:column; gap:4px; min-height:0; } .gui-vk-gr { font-size:11px; font-weight:600; color:var(--mut); margin:8px 0 2px; } .gui-vk-z { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--bdr); border-radius:var(--r); background:var(--card); color:var(--txt); font:inherit; font-size:13px; text-align:left; cursor:pointer; } .gui-vk-z > i.ti { color:var(--mut); font-size:17px; } .gui-vk-z > span { display:flex; flex-direction:column; min-width:0; } .gui-vk-z small { font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gui-vk-z.sel { border-color:var(--acc); box-shadow:inset 3px 0 0 var(--acc); } .gui-vk-z.gz-ziel, .gui-vk-vor.gz-ziel { outline:3px solid var(--acc); outline-offset:2px; } .vk-chip { font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; white-space:nowrap; } .vk-chip.fn { background:color-mix(in srgb, var(--acc) 14%, transparent); color:var(--acc); } .vk-chip.sz { background:color-mix(in srgb, #7A5BC2 16%, transparent); color:#7A5BC2; } .vk-chip.of { background:color-mix(in srgb, var(--gelb-f) 20%, transparent); color:var(--gelb); } .gui-vk-mitte { overflow:auto !important; } .gui-vk-vor { display:flex; justify-content:center; padding:6px; border-radius:var(--r); } .gui-vk-vor .gui-skal { cursor:pointer; } .gui-vk-box { position:absolute; z-index:3; border:3px solid var(--acc); border-radius:6px; box-shadow:0 0 0 9999px rgba(0,0,0,.18); pointer-events:none; } .gui-vk-det { display:flex; flex-direction:column; gap:10px; } .gui-vk-det h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; flex-wrap:wrap; } .gui-vk-det h3 span { font-weight:400; font-size:12px; color:var(--mut); } .gui-vk-art { display:flex; gap:4px; } .gui-vk-art .btn.on, .gui-vk-paar .btn.on { border-color:var(--acc); color:var(--acc); } .gui-vk-ziel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; } .gui-vk-bef { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; } .gui-vk-bef li { font-size:13px; } .gui-vk-bef li { display:list-item; } .gui-vk-bef li > span:first-child { margin-right:8px; } .gui-vk-paar, .gui-vk-zahl, .gui-vk-bk { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; } .gui-vk-zahl .inp { width:56px; height:26px; } .gui-vk-bk { margin-left:4px; } .gui-vk-msg { margin:auto 0 0; padding-top:8px; font-size:12px; color:var(--mut); min-height:1.5em; } /* Testen */ .gui-test { display:flex; flex-direction:column; gap:6px; } .gui-test-wege { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; } .gui-test-z { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--bdr); border-radius:var(--r); font-size:13px; } .gui-test-z > span:nth-child(2) { display:flex; flex-direction:column; min-width:0; } .gui-test-z small { font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Auswahlschritt „Was soll die Bedienung können?" (24.10.2026) */ #hk-modal.gui-aw-modal { width:min(760px, calc(100vw - 32px)); } #hk-modal .modal-bd.gui-aw { display:flex; flex-direction:column; gap:14px; max-height:min(68vh, 640px); overflow:auto; } .gui-aw-g h3 { display:flex; align-items:baseline; gap:8px; margin:0 0 6px; font-size:14px; } .gui-aw-g h3 .ti { color:var(--mut); font-size:16px; align-self:center; } .gui-aw-g h3 span { font-weight:400; font-size:12px; color:var(--mut); } .gui-aw-z { display:grid; grid-template-columns:auto auto minmax(140px, 220px) 1fr; align-items:center; gap:8px; padding:4px 8px; border:1px solid var(--bdr); border-radius:var(--r); margin-bottom:4px; font-size:13px; cursor:pointer; } .gui-aw-z:has(> input[type=checkbox]:checked) { border-color:var(--acc); } .gui-aw-z:not(:has(> input[type=checkbox]:checked)) { opacity:.6; } .gui-aw-z i.ti { color:var(--mut); font-size:16px; } .gui-aw-z .inp { height:28px; } .gui-aw-z em { font-style:normal; font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gui-ak-chips .btn i { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; vertical-align:-2px; border:1px solid rgba(0,0,0,.2); } .gui-panel[data-eigen="1"].editor::after { content:'Haus-Stil'; position:absolute; right:6px; top:6px; font:600 11px var(--f-display); letter-spacing:.08em; text-transform:uppercase; background:var(--acc-f); color:#fff; padding:2px 6px; border-radius:3px; opacity:.85; pointer-events:none; } /* RAUMPLAN:ANFANG — generiert von .claude/werkzeuge/port_raumplan.js aus ..WebAppavorge.css, nicht von Hand ändern */ /* Token-Brücke: AVmemora-Namen auf SEPP-Token — Farben folgen dem Thema der App, Abstände, Radien und Schriftgrößen bleiben die des Raumplans (Optik 1:1, Entscheidung Chris). */ #view-raum, .lay-wallmenu { --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:28px;--sp-8:32px; --fs-2xs:10px;--fs-xs:11px;--fs-s:12px;--fs-m:13px;--fs-l:15px;--fs-xl:18px;--fs-2xl:22px; --r-xs:4px;--r-s:6px;--r-m:8px;--r-l:12px;--r-xl:16px;--r-pill:999px; --bg-p:var(--card);--bg-s:var(--bg);--txt2:var(--mut);--txt3:var(--mut);--bdr2:var(--ctl-bdr); --shadow-pop:var(--sh-2);--shadow-s:var(--sh-1);--shadow-sheet:var(--sh-3);--acc-s:var(--acc);--acc-btn:var(--acc-f); --danger:var(--warn);--late:var(--warn);--ctl-h:34px; /* seit AVmemora 10.2026 (Design-Inventur) */ --lay-top:0px;--bg-t:var(--card-2);--ctl-h-s:28px;--f-code:var(--f-mono);--on-fill:var(--on-acc); --acc-sel:color-mix(in srgb,var(--acc) 20%,var(--card));--acc-btn-h:var(--acc-fh);--acc-btn-ring:transparent; --danger-fill:color-mix(in srgb,var(--rot-f) 14%,var(--card)); } /* ── Reiter „Layout" (Raumplan) ─────────────────────────────── */ #view-raum #blk-layout{position:relative;} /* Der Plan füllt den Platz unter der Kopfzeile bis zum Fensterrand, ohne Rahmen und Rundung (Chris 2026-10-04, „aus einem Guss"); --lay-top = Höhe von Brotkrume + Reitern (+ Sperr-Banner), gesetzt von _layTopSync in avorge.js. */ #view-raum #blk-layout .lay-wrap{display:flex;height:calc(100vh - var(--lay-top,102px));min-height:420px;background:var(--bg-p);overflow:hidden;} #view-raum .content.lay-wide .lock-banner{margin:0;} /* ohne Innenabstand der Spalte darf das Banner nicht überhängen */ #view-raum #blk-layout .lay-pal{width:174px;flex-shrink:0;background:var(--bg-p);border-right:0.5px solid var(--bdr);overflow-y:auto;} /* Rollbalken im Plan (Chris 2026-10-04: der weiße Balken neben der Palette): schmal, Daumen in Hairline-Ton, keine Bahn — den Grundton liefert color-scheme (avtokens.css), hier nur die Form. Firefox über scrollbar-*, WebKit über ::-webkit-scrollbar. */ #view-raum #blk-layout .lay-pal,#view-raum #blk-layout .lay-props,#view-raum #blk-layout .lay-show{scrollbar-width:thin;scrollbar-color:var(--bdr2) transparent;} #view-raum #blk-layout .lay-pal::-webkit-scrollbar,#view-raum #blk-layout .lay-props::-webkit-scrollbar,#view-raum #blk-layout .lay-show::-webkit-scrollbar{width:8px;} #view-raum #blk-layout .lay-pal::-webkit-scrollbar-track,#view-raum #blk-layout .lay-props::-webkit-scrollbar-track,#view-raum #blk-layout .lay-show::-webkit-scrollbar-track{background:transparent;} #view-raum #blk-layout .lay-pal::-webkit-scrollbar-thumb,#view-raum #blk-layout .lay-props::-webkit-scrollbar-thumb,#view-raum #blk-layout .lay-show::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:var(--r-pill);border:2px solid var(--bg-p);} #view-raum #blk-layout .lay-pal::-webkit-scrollbar-thumb:hover,#view-raum #blk-layout .lay-props::-webkit-scrollbar-thumb:hover,#view-raum #blk-layout .lay-show::-webkit-scrollbar-thumb:hover{background:var(--txt3);} #view-raum #blk-layout .lay-ps{padding:var(--sp-2) var(--sp-2) var(--sp-1);font-size:var(--fs-2xs);color:var(--txt3);font-weight:700;background:var(--bg-s);border-top:0.5px solid var(--bdr);border-bottom:0.5px solid var(--bdr);} #view-raum #blk-layout .lay-ps.lay-ps-tog{cursor:pointer;display:flex;align-items:center;gap:var(--sp-1);user-select:none;} #view-raum #blk-layout .lay-ps.lay-ps-tog::before{content:'▾';font-size:var(--fs-2xs);transition:transform .15s;display:inline-block;letter-spacing:0;} #view-raum #blk-layout .lay-ps.lay-ps-tog.collapsed::before{transform:rotate(-90deg);} #view-raum #blk-layout .lay-ps.lay-ps-tog:hover{color:var(--txt2);} .lay-wallmenu{position:fixed;z-index:650;background:var(--bg-p);border:0.5px solid var(--bdr);border-radius:var(--r-m);box-shadow:var(--shadow-pop);padding:var(--sp-1);min-width:160px;display:flex;flex-direction:column;gap:2px;} .lay-wallmenu .lwm-t{font-size:var(--fs-2xs);font-weight:700;color:var(--txt3);padding:var(--sp-1) var(--sp-2) var(--sp-1);} .lay-wallmenu .lwm-b{text-align:left;background:none;border:none;border-radius:var(--r-s);padding:var(--sp-2) var(--sp-2);font-size:var(--fs-m);color:var(--txt);cursor:pointer;font-family:inherit;} .lay-wallmenu .lwm-b:hover{background:var(--acc-l);color:var(--acc-t);} .lay-wallmenu .lwm-x{color:var(--txt3);font-size:var(--fs-s);} .lay-wallmenu .lwm-x:hover{background:var(--bg-s);color:var(--txt2);} .lay-wallmenu .lwm-sec{margin-top:var(--sp-1);border-top:0.5px solid var(--bdr);padding-top:var(--sp-2);} .lay-wallmenu .lwm-pick.on{color:var(--acc-t);font-weight:600;} .lay-wallmenu .lwm-pick i{color:var(--acc);font-size:var(--fs-m);} #view-raum #blk-layout .pi,#view-raum #blk-layout .dv{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);font-size:var(--fs-s);color:var(--txt);cursor:grab;border-left:3px solid transparent;user-select:none;-webkit-user-select:none;touch-action:none;} #view-raum #blk-layout .pi i,#view-raum #blk-layout .dv i{font-size:var(--fs-m);width:16px;text-align:center;color:var(--txt3);flex-shrink:0;} #view-raum #blk-layout .pi:hover{background:var(--hover);border-left-color:var(--acc);} #view-raum #blk-layout .pi .sh{font-size:var(--fs-2xs);color:var(--txt3);margin-left:auto;} #view-raum #blk-layout .dv{cursor:pointer;} #view-raum #blk-layout .dv .cnt{margin-left:auto;font-size:var(--fs-2xs);font-weight:600;} #view-raum #blk-layout .dv.open{background:var(--acc-l);border-left-color:var(--acc-s);} #view-raum #blk-layout .dv.open .cnt,#view-raum #blk-layout .dv.open i{color:var(--acc-t);} #view-raum #blk-layout .dv.done{color:var(--txt3);} #view-raum #blk-layout .dv.done .cnt{color:var(--ok);} #view-raum #blk-layout .dv:hover{background:var(--hover);} /* Geräteliste 2026-10-09 (Frage 1): Kopfknopf „N setzen", Summenzeile, Hinweis ohne Geräte (vorher Inline-Stil mit #bbb) */ #view-raum #blk-layout .dv-all{padding:var(--sp-2) var(--sp-2) var(--sp-1);} #view-raum #blk-layout .dv-all button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;border:0;border-radius:var(--r-pill);background:var(--acc-btn);color:var(--on-fill);font-family:var(--f-display);font-stretch:87.5%;font-size:var(--fs-xs);font-weight:600;cursor:pointer;white-space:nowrap;} #view-raum #blk-layout .dv-all button:hover{background:var(--acc-btn-h);outline:2px solid var(--acc-btn-ring);outline-offset:0;} #view-raum #blk-layout .dv-sum{padding:var(--sp-1) var(--sp-2) var(--sp-2);font-size:var(--fs-2xs);color:var(--txt3);} #view-raum #blk-layout .dv-sum b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt2);} #view-raum #blk-layout .dv-none{padding:var(--sp-2);font-size:var(--fs-2xs);color:var(--txt3);} #view-raum #blk-layout .lay-empty{position:absolute;inset:0;z-index:21;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:70px 60px;} #view-raum #blk-layout .lay-empty[hidden]{display:none;} #view-raum #blk-layout .lay-empty-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--txt3);font-size:var(--fs-m);cursor:pointer;display:flex;align-items:center;justify-content:center;} #view-raum #blk-layout .lay-empty-x:hover{background:var(--hover);color:var(--txt);} #view-raum #blk-layout .lay-empty-c{position:relative;pointer-events:auto;max-width:320px;text-align:center;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:var(--sp-4) var(--sp-5);animation:avPop .18s ease-out;} #view-raum #blk-layout .lay-empty-c>i{font-size:var(--fs-2xl);color:var(--acc);} #view-raum #blk-layout .lay-empty-c b{display:block;font-family:var(--f-display);font-stretch:87.5%;font-size:var(--fs-m);font-weight:600;margin:var(--sp-1) 0 2px;} #view-raum #blk-layout .lay-empty-c p{font-size:var(--fs-xs);color:var(--txt2);line-height:1.4;margin:0 0 var(--sp-3);} #view-raum #blk-layout .lay-empty-c button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:var(--acc-btn);color:var(--on-fill);font-family:var(--f-display);font-stretch:87.5%;font-size:var(--fs-s);font-weight:600;cursor:pointer;} #view-raum #blk-layout .lay-empty-c button:hover{background:var(--acc-btn-h);outline:2px solid var(--acc-btn-ring);outline-offset:0;} /* Objektebenen im Reiter „Ebenen" (Frage 3): Auge statt Schalter, Zähler je Ebene */ #view-raum #blk-layout .lvm-row.lvm-eye .lvm-n{font:500 var(--fs-2xs) var(--f-mono);font-variant-numeric:tabular-nums;color:var(--txt3);font-style:normal;margin-left:2px;} #view-raum #blk-layout .lvm-eyeb{width:26px;height:22px;border-radius:var(--r-s);border:0.5px solid var(--bdr2);background:var(--bg-p);display:inline-flex;align-items:center;justify-content:center;color:var(--txt2);font-size:var(--fs-s);flex-shrink:0;} #view-raum #blk-layout .lvm-row.lvm-eye:hover .lvm-eyeb{border-color:var(--acc);color:var(--acc-t);} #view-raum #blk-layout .lvm-row.lvm-eye.off{color:var(--txt3);} #view-raum #blk-layout .lvm-row.lvm-eye.off .lvm-eyeb{background:var(--bg-t);color:var(--txt3);} #view-raum #blk-layout .lvm-row.lvm-showall{color:var(--acc-t);font-weight:600;margin-top:2px;} #view-raum #blk-layout .lvm-row.lvm-showall .lvm-n{font:500 var(--fs-2xs) var(--f-mono);font-variant-numeric:tabular-nums;color:var(--txt3);font-style:normal;margin-left:2px;} #view-raum #blk-layout .lvm-row.lvm-showall:hover{text-decoration:underline;} #view-raum #blk-layout .lay-cwrap{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;container-type:inline-size;} /* Schwebende Bedienelemente über dem Canvas (Variante „Canvas-first") */ #view-raum #blk-layout .lay-fl{position:absolute;z-index:20;} #view-raum #blk-layout .lay-fl-bl{bottom:10px;left:10px;} #view-raum #blk-layout .lay-fl-br{bottom:10px;right:10px;} /* Kopfzeile des Plans (2026-10-05, Chris: Leisten nehmen zu viel Zeichenfläche — wieder Pillen): eine schwebende Ebene über dem Canvas ohne eigene Höhe, der Canvas füllt den ganzen Wrapper. Palettenknopf (mobil) | 2D/3D | Bearbeiten bzw. Präsentieren als drei Pillen; die Außengruppen sind gleich breit (flex:1), damit der Umschalter mittig steht. Die Ebene und ihre Gruppen lassen Zeiger durch (pointer-events:none), nur die Pillen selbst fangen ihn. */ #view-raum #blk-layout .lay-top{position:absolute;top:0;left:0;right:0;z-index:22;display:flex;align-items:flex-start;gap:var(--sp-2);padding:10px;pointer-events:none;} #view-raum #blk-layout .lay-top .lt-l,#view-raum #blk-layout .lay-top .lt-r{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-1);pointer-events:none;} #view-raum #blk-layout .lay-top .lt-r{justify-content:flex-end;} #view-raum #blk-layout .lay-top .lt-c{display:flex;align-items:center;pointer-events:none;} #view-raum #blk-layout .lay-top .pal-toggle,#view-raum #blk-layout .ldk .lbar{pointer-events:auto;} /* Andockbare Leisten (Chris 2026-10-14, wie in Zeichenprogrammen): vier Randzonen .ldk mit je drei Plätzen (Anfang · Mitte · Ende); oben ist #lay-top selbst die Zone. Lage der Zonen (Abstand zu Kopfzeile, Statuszeile, Würfel, Lineal) setzt layoutZones() in avlayout.js. In einer Zone steht jede Leiste im Fluss; links/rechts senkrecht (data-or="v"), oben/unten waagerecht (data-or="h"). Frei abgelegte Leisten hängen direkt am .lay-cwrap (left/top inline). */ #view-raum #blk-layout .ldk{position:absolute;z-index:22;display:flex;gap:var(--sp-2);padding:10px;pointer-events:none;box-sizing:border-box;} #view-raum #blk-layout .ldk[data-edge="bottom"]{left:0;right:0;bottom:0;align-items:flex-end;} #view-raum #blk-layout .ldk-v{flex-direction:column;top:0;bottom:0;} #view-raum #blk-layout .ldk[data-edge="left"]{left:0;align-items:flex-start;} #view-raum #blk-layout .ldk[data-edge="right"]{right:0;align-items:flex-end;} #view-raum #blk-layout .ldk[data-edge="bottom"] .ls-s,#view-raum #blk-layout .ldk[data-edge="bottom"] .ls-e{flex:1 1 0;min-width:min-content;display:flex;align-items:flex-end;gap:var(--sp-1);flex-wrap:wrap;pointer-events:none;} #view-raum #blk-layout .ldk[data-edge="bottom"] .ls-e{justify-content:flex-end;} #view-raum #blk-layout .ldk[data-edge="bottom"] .ls-c{display:flex;align-items:flex-end;gap:var(--sp-1);pointer-events:none;} #view-raum #blk-layout .ldk-v .ls-s,#view-raum #blk-layout .ldk-v .ls-c,#view-raum #blk-layout .ldk-v .ls-e{display:flex;flex-direction:column;gap:var(--sp-1);min-height:0;pointer-events:none;} #view-raum #blk-layout .ldk-v .ls-s,#view-raum #blk-layout .ldk-v .ls-e{flex:1 0 auto;} /* nie unter den Inhalt schrumpfen, sonst schieben sich Leisten übereinander */ #view-raum #blk-layout .ldk-v .ls-e{justify-content:flex-end;} #view-raum #blk-layout .ldk[data-edge="left"] .ls-s,#view-raum #blk-layout .ldk[data-edge="left"] .ls-c,#view-raum #blk-layout .ldk[data-edge="left"] .ls-e{align-items:flex-start;} #view-raum #blk-layout .ldk[data-edge="right"] .ls-s,#view-raum #blk-layout .ldk[data-edge="right"] .ls-c,#view-raum #blk-layout .ldk[data-edge="right"] .ls-e{align-items:flex-end;} #view-raum #blk-layout .lay-top .ls-s,#view-raum #blk-layout .lay-top .ls-e{flex:1 1 0;min-width:min-content;flex-wrap:wrap;box-sizing:border-box;} /* Außengruppen gleich breit (Segment mittig), aber nie schmaler als ihre breiteste Leiste; reicht die Breite nicht, bricht die Zone um */ #view-raum #blk-layout .lay-top,#view-raum #blk-layout .ldk[data-edge="bottom"]{flex-wrap:wrap;} /* Würfel-Abstand (3D) als padding-left im Anfang: border-box hält beide Außengruppen gleich breit, das Segment bleibt mittig */ /* Leiste in einer Zone: im Fluss (die alten Lagen der schwebenden Pillen gelten nicht); frei: absolut, Lage inline */ #view-raum #blk-layout .ldk .lbar{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;flex:0 0 auto;max-width:none;} /* max-width der schwebenden Pillen bezog sich auf den Rahmen, im Platz kappte es die Leiste */ #view-raum #blk-layout .lay-cwrap > .lbar{position:absolute;right:auto;bottom:auto;transform:none;z-index:25;} #view-raum #blk-layout .lay-cwrap > .lbar.dragging{z-index:60;opacity:.82;box-shadow:var(--shadow-sheet);transition:none;} /* Griff mit sechs Punkten: waagerechte Leiste → links, senkrechte → oben */ #view-raum #blk-layout .lgrip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--txt3);cursor:grab;touch-action:none;font-size:var(--fs-m);border-radius:var(--r-xs);user-select:none;-webkit-user-select:none;} #view-raum #blk-layout .lgrip:hover{color:var(--txt);background:var(--hover);} #view-raum #blk-layout .lbar[data-or="h"] > .lgrip{width:14px;align-self:stretch;min-height:28px;} #view-raum #blk-layout .lbar[data-or="v"] > .lgrip{height:14px;align-self:stretch;min-width:28px;} #view-raum #blk-layout .lbar.dragging > .lgrip,#view-raum body.lbar-drag,#view-raum body.lbar-drag *{cursor:grabbing!important;} /* Vorschau beim Ziehen: Platzhalter an der Stelle, an der die Leiste andocken wird, und ein Akzentstrich an der Zone */ #view-raum #blk-layout .ldk-ph{flex:0 0 auto;box-sizing:border-box;border:1.5px dashed var(--acc);background:var(--acc-sel);border-radius:var(--r-m);pointer-events:none;} #view-raum #blk-layout .ldk.hot::before{content:'';position:absolute;background:var(--acc-f);border-radius:var(--r-pill);opacity:.7;pointer-events:none;} #view-raum #blk-layout .ldk.hot[data-edge="top"]::before{top:3px;left:10px;right:10px;height:3px;} #view-raum #blk-layout .ldk.hot[data-edge="bottom"]::before{bottom:3px;left:10px;right:10px;height:3px;} #view-raum #blk-layout .ldk.hot[data-edge="left"]::before{left:3px;top:10px;bottom:10px;width:3px;} #view-raum #blk-layout .ldk.hot[data-edge="right"]::before{right:3px;top:10px;bottom:10px;width:3px;} /* Ausrichtung je Leiste */ #view-raum #blk-layout .lay-seg.lbar[data-or="v"],#view-raum #blk-layout .lay-pill.lbar[data-or="v"],#view-raum #blk-layout .lay-pres.lbar[data-or="v"],#view-raum #blk-layout .lay-bar.lbar[data-or="v"]{flex-direction:column;align-items:stretch;} #view-raum #blk-layout .lay-seg.lbar[data-or="v"] .lseg-t{display:none;} #view-raum #blk-layout .lay-pill.lbar[data-or="v"] .tb-sep{width:20px;height:1px;margin:2px auto;} #view-raum #blk-layout .lay-bar.lbar[data-or="v"]{border-radius:var(--r-m);} #view-raum #blk-layout .lay-bar.lbar[data-or="v"] button{border-radius:var(--r-s);} #view-raum #blk-layout .lay-show.lbar[data-or="h"]{flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;} #view-raum #blk-layout .lay-show.lbar[data-or="h"] > button{width:auto;padding:0 var(--sp-2);} #view-raum #blk-layout .lay-show.lbar[data-or="h"] > button span,#view-raum #blk-layout .lay-show.lbar[data-or="h"] .show-l span{display:none;} #view-raum #blk-layout .lay-show.lbar[data-or="h"] .show-sec{flex-direction:row;align-items:center;margin:0 0 0 var(--sp-1);padding:0 0 0 var(--sp-1);border-top:none;border-left:0.5px solid var(--bdr);} #view-raum #blk-layout .lay-show.lbar[data-or="h"] .ps-seg button{flex:0 0 28px;} #view-raum #blk-layout .lay-pill{display:flex;align-items:center;gap:2px;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-m);padding:3px;box-shadow:var(--shadow-pop);} /* Maßzeile (3D): kleine Pille mittig über der Standpunkt-Pille (nur 3D; in 2D steht der Raum in der Statuszeile) */ #view-raum #blk-layout .lay-fl-bc{display:none;bottom:60px;left:50%;transform:translateX(-50%);max-width:calc(100% - 20px);font-size:var(--fs-xs);color:var(--txt2);background:var(--bg-p);border:0.5px solid var(--bdr);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:var(--shadow-pop);} /* kein Flex: die Trennzeichen zwischen den Spans sind Textknoten */ /* Schnellleiste unten (2026-09-18): Übersicht · Beleben · Kameras · Mikrofone · Lautsprecher · Verdrahtung */ /* Schnellleiste nur in 3D (Chris 2026-09-28: 2D = Zeichnen, 3D = Visualisierung); die Maßzeile rückt in 2D nach unten */ #view-raum #blk-layout .lay-bar{bottom:12px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:2px;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-pill);padding:3px;box-shadow:var(--shadow-pop);max-width:calc(100% - 20px);} #view-raum #blk-layout .lay-bar button{border:none;background:transparent;border-radius:var(--r-pill);height:34px;padding:0 var(--sp-3);font-size:var(--fs-s);font-weight:600;color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);font-family:inherit;white-space:nowrap;} #view-raum #blk-layout .lay-bar button i{font-size:var(--fs-l);} #view-raum #blk-layout .lay-bar button:hover{background:var(--hover);} #view-raum #blk-layout .lay-bar button.on{background:var(--acc-btn);color:var(--on-fill);} #view-raum #blk-layout .lay-bar button.lvm-3donly{display:none;} #view-raum #blk-layout .lay-cwrap.v3d .lay-bar{display:flex;} /* 3D = Bühne (Paket A, 2026-09-28): Palette, Palettenknopf, Werkzeugpille, Ansicht-Menü und Eigenschaften gehören zum Zeichnen und verschwinden in 3D; dafür die Zeigen-Spalte rechts unten. */ #view-raum #blk-layout .lay-wrap.v3d .lay-pal{display:none;} #view-raum #blk-layout .lay-cwrap.v3d .pal-toggle,#view-raum #blk-layout .lay-cwrap.v3d #lay-edit,#view-raum #blk-layout .lay-cwrap.v3d .lay-viewmenu{display:none!important;} /* Das Panel ist ein Geschwister von .lay-cwrap (Kind von .lay-wrap) — die frühere Regel über .lay-cwrap traf nie, mit Auswahl blieb das Panel in 3D offen (Befund 2026-10-09). Die Auswahl selbst bleibt und steht nach dem Rückweg in 2D wieder im Panel. */ #view-raum #blk-layout .lay-wrap.v3d .lay-props{display:none!important;} #view-raum #blk-layout .lay-show{right:10px;bottom:10px;max-height:calc(100% - 70px);display:none;flex-direction:column;gap:2px;padding:3px;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-m);box-shadow:var(--shadow-pop);overflow-y:auto;} #view-raum #blk-layout .lay-cwrap.v3d .lay-show{display:flex;} #view-raum #blk-layout .lay-show button{border:none;background:transparent;border-radius:var(--r-s);height:32px;width:100%;padding:0 var(--sp-3) 0 var(--sp-2);font-size:var(--fs-s);font-weight:600;color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);font-family:inherit;text-align:left;white-space:nowrap;} #view-raum #blk-layout .lay-show button i{font-size:var(--fs-l);width:18px;text-align:center;} #view-raum #blk-layout .lay-show button:hover{background:var(--hover);} #view-raum #blk-layout .lay-show button.on{background:var(--acc-btn);color:var(--on-fill);} /* Personen-Segment in der Zeigen-Spalte (2026-10-05): Zeile mit Etikett + Drei-Wert-Symbol-Umschalter im Stil des Dashboard-view-toggle (Mulde, gewählter Knopf hebt sich hell ab) */ #view-raum #blk-layout .lay-show .show-sec{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-1);padding-top:var(--sp-2);border-top:0.5px solid var(--bdr);} #view-raum #blk-layout .lay-show .show-l{display:flex;align-items:center;gap:var(--sp-2);height:24px;padding:0 var(--sp-2);font-size:var(--fs-s);font-weight:600;color:var(--txt2);font-family:var(--f-display);font-stretch:87.5%;white-space:nowrap;} #view-raum #blk-layout .lay-show .show-l i{font-size:var(--fs-l);width:18px;text-align:center;} #view-raum #blk-layout .lay-show .ps-seg{margin:0 var(--sp-1);} #view-raum #blk-layout .lay-show .ps-seg button{width:auto;flex:1;height:28px;padding:0;justify-content:center;color:var(--txt3);} #view-raum #blk-layout .lay-show .ps-seg button:not(.on):hover{background:var(--hover);color:var(--txt);} #view-raum #blk-layout .lay-show .ps-seg button.on{background:var(--bg-p);color:var(--txt);box-shadow:var(--shadow-s);} #view-raum #blk-layout .lay-seg .lseg-t{margin-left:4px;font-weight:500;} /* Kopfpillen nach Breite der ZEICHENFLÄCHE, nicht des Fensters (2026-10-09, Frage 5): unter 900 px fallen die Untertitel „Zeichnen / Präsentation" und die Texte der Präsentieren-Pille, unter 700 px Zoomstufe und Einpassen (beides steht in der Statuszeile). Bei 1100 px Fenster mit Seitenleiste, Raumliste, Palette und Panel bleiben 532 px — dort überlappten Segment (234 px) und Bearbeiten-Pille (231 px). */ /* Die @container-Regeln dazu stehen vor dem Mobil-Block am Ende des Layout-Abschnitts — bei gleicher Spezifität gewinnt die spätere Regel. */ /* ── Paket B (2026-09-28): 2D-Werkbank ───────────────────────────────────────────────────────── */ #view-raum #blk-layout .tb-sep{width:1px;height:20px;background:var(--bdr2);margin:0 2px;} /* Werkzeugleiste: senkrecht (links/rechts/frei), waagerecht oben angedockt; Griff zum Ziehen */ #view-raum #blk-layout .lay-tools{position:absolute;z-index:25;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-m);padding:3px;box-shadow:var(--shadow-pop);user-select:none;-webkit-user-select:none;} #view-raum #blk-layout .lay-tools[data-or="h"]{flex-direction:row;} #view-raum #blk-layout .lay-tools[data-or="h"] .tl-sep{width:1px;height:20px;margin:0 2px;} #view-raum #blk-layout .tl-sep{width:20px;height:1px;background:var(--bdr2);margin:2px 0;} #view-raum #blk-layout .lay-tools .tl{width:32px;height:32px;border:none;background:transparent;border-radius:var(--r-s);color:var(--txt2);font-size:var(--fs-l);display:flex;align-items:center;justify-content:center;cursor:pointer;} #view-raum #blk-layout .lay-tools .tl:hover{background:var(--hover);} #view-raum #blk-layout .lay-tools .tl.on{background:var(--acc-btn);color:var(--on-fill);} #view-raum #blk-layout .lay-tools .tl.tl-mobile,#view-raum #blk-layout .ptab-x.tl-mobile{display:none;} #view-raum #blk-layout .lay-cwrap.v3d .lay-tools,#view-raum #blk-layout .lay-cwrap.v3d .lay-statusbar{display:none;} /* Statuszeile unten in voller Breite (nur 2D); die 3D-Maßzeile bleibt eine Pille */ #view-raum #blk-layout .lay-statusbar{position:absolute;left:0;right:0;bottom:0;height:24px;z-index:20;display:flex;align-items:center;background:var(--bg-p);border-top:0.5px solid var(--bdr);font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-2xs);color:var(--txt2);} #view-raum #blk-layout .lay-statusbar .sb{height:100%;display:flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-2);border-right:0.5px solid var(--bdr);white-space:nowrap;} #view-raum #blk-layout .lay-statusbar .sb-t{border:none;border-right:0.5px solid var(--bdr);background:transparent;font:inherit;color:inherit;cursor:pointer;} #view-raum #blk-layout .lay-statusbar .sb-t:hover{background:var(--hover);} #view-raum #blk-layout .lay-statusbar .sb-t.on{color:var(--acc-t);background:var(--acc-sel);} #view-raum #blk-layout .lay-statusbar .sb-xy{min-width:132px;} #view-raum #blk-layout .lay-statusbar .sb-hint{color:var(--acc-t);font-weight:600;} #view-raum #blk-layout .lay-statusbar .sb-hint[hidden]{display:none;} #view-raum #blk-layout .lay-statusbar .sb-room{margin-left:auto;border-right:none;} #view-raum #blk-layout .lay-statusbar .sb-help{border-right:none;border-left:0.5px solid var(--bdr);} #view-raum #blk-layout .lay-cwrap.v3d .lay-fl-bc{display:block;} /* Eigenschaften-Panel mit Reitern; am Desktop immer offen (Ebenen ohne Auswahl), mobil weiter als Overlay */ #view-raum #blk-layout .ptabs{display:flex;gap:2px;border-bottom:0.5px solid var(--bdr);margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-3);padding:0 var(--sp-2);} #view-raum #blk-layout .ptab{border:none;background:transparent;font-family:var(--f-display);font-stretch:87.5%;font-size:var(--fs-s);font-weight:600;color:var(--txt3);padding:var(--sp-2) var(--sp-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-0.5px;} #view-raum #blk-layout .ptab.on{color:var(--acc);border-bottom-color:var(--acc);} #view-raum #blk-layout .ptab-x{margin-left:auto;border:none;background:transparent;color:var(--txt3);font-size:var(--fs-l);cursor:pointer;} #view-raum #blk-layout .lay-layers{display:none;} #view-raum #blk-layout .lay-layers .lvm-sec{font-size:var(--fs-2xs);font-weight:700;color:var(--txt3);padding:var(--sp-2) 0 var(--sp-1);} #view-raum #blk-layout .pempty{display:none;font-size:var(--fs-xs);color:var(--txt3);line-height:1.4;} #view-raum #blk-layout .lay-props.tab-layers > *:not(.ptabs):not(.lay-layers){display:none!important;} #view-raum #blk-layout .lay-props.tab-layers .lay-layers{display:block;} #view-raum #blk-layout .lay-props.tab-props.no-sel > *:not(.ptabs):not(.pempty){display:none!important;} #view-raum #blk-layout .lay-props.tab-props.no-sel .pempty{display:block;} @media(min-width:900px){#view-raum #blk-layout .lay-wrap:not(.v3d) .lay-props{display:block;}} /* Paket C: Präsentieren + Bild speichern (oben rechts, nur 3D) */ #view-raum #blk-layout .lay-pres{display:none;gap:2px;background:var(--bg-p);border:0.5px solid var(--bdr2);border-radius:var(--r-m);padding:3px;box-shadow:var(--shadow-pop);} #view-raum #blk-layout .lay-cwrap.v3d .lay-pres{display:flex;} #view-raum #blk-layout .lay-pres button{border:none;background:transparent;border-radius:var(--r-s);height:32px;padding:0 var(--sp-3);font-size:var(--fs-s);font-weight:600;color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);font-family:inherit;white-space:nowrap;} #view-raum #blk-layout .lay-pres button i{font-size:var(--fs-l);} #view-raum #blk-layout .lay-pres button:hover{background:var(--hover);} /* Präsentationsmodus: der Rahmen legt sich über das ganze Fenster (dazu echtes Vollbild, wo der Browser es hergibt); alle schwebenden Bedienelemente sind weg, nur die Präsentations-Bedienung bleibt. */ #view-raum #blk-layout .lay-wrap.present{position:fixed;inset:0;z-index:1000;height:auto;min-height:0;border:0;border-radius:0;background:#1E2023;} #view-raum #blk-layout .lay-wrap.present .lay-top,#view-raum #blk-layout .lay-wrap.present .lay-fl,#view-raum #blk-layout .lay-wrap.present .lay-cube,#view-raum #blk-layout .lay-wrap.present .lay-wallbar,#view-raum #blk-layout .lay-wrap.present .lay-viewmenu,#view-raum #blk-layout .lay-wrap.present .lay-keys{display:none!important;} #view-raum #blk-layout .lay-presui{position:absolute;inset:0;z-index:20;pointer-events:none;} #view-raum #blk-layout .lay-presui[hidden]{display:none;} #view-raum #blk-layout .lay-presui .pu-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:36px;height:36px;border-radius:50%;border:0.5px solid rgba(255,255,255,.35);background:rgba(20,22,24,.65);color:#E6E6E2;font-size:var(--fs-l);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;opacity:.55;} #view-raum #blk-layout .lay-presui .pu-x:hover{opacity:1;} #view-raum #blk-layout .lay-presui .pu-bar{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:var(--sp-2);padding:4px;border-radius:var(--r-pill);border:0.5px solid rgba(255,255,255,.3);background:rgba(20,22,24,.65);pointer-events:auto;opacity:.6;transition:opacity .2s;} #view-raum #blk-layout .lay-presui .pu-bar:hover{opacity:1;} #view-raum #blk-layout .lay-presui .pu-bar button{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:#E6E6E2;font-size:var(--fs-l);display:flex;align-items:center;justify-content:center;cursor:pointer;} #view-raum #blk-layout .lay-presui .pu-bar button:hover{background:rgba(255,255,255,.12);} #view-raum #blk-layout .lay-presui .pu-bar button.on{background:#2DD4BF;color:#111;} #view-raum #blk-layout .lay-presui .pu-dots{display:flex;gap:8px;padding:0 var(--sp-2);} #view-raum #blk-layout .lay-presui .pu-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;pointer-events:auto;} #view-raum #blk-layout .lay-presui .pu-dots i.on{background:#2DD4BF;} @media(any-pointer:coarse){#view-raum #blk-layout .lay-presui .pu-bar button{width:44px;height:44px;} #view-raum #blk-layout .lay-presui .pu-x{width:44px;height:44px;} #view-raum #blk-layout .lay-presui .pu-dots i{width:10px;height:10px;}} #view-raum #blk-layout .lay-cwrap.v3d .lay-bar button.lvm-3donly{display:flex;} #view-raum #blk-layout .tb{min-width:32px;height:32px;border:0.5px solid var(--bdr2);border-radius:var(--r-s);background:var(--bg-p);color:var(--txt2);font-size:var(--fs-m);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 var(--sp-2);} #view-raum #blk-layout .tb:hover{background:var(--hover);} #view-raum #blk-layout .tb.on{background:var(--acc-btn);border-color:var(--acc-btn);color:var(--on-fill);} #view-raum #blk-layout .tb:disabled{opacity:.35;cursor:default;} #view-raum #blk-layout .tb:disabled:hover{background:transparent;} #view-raum #blk-layout .lay-pill .tb{border:none;background:transparent;} #view-raum #blk-layout .lay-pill .tb:hover{background:var(--hover);} #view-raum #blk-layout .lay-pill .tb.on{background:var(--acc-btn);color:var(--on-fill);} /* „Mehrere Objekte aufziehen" ist der Touch-Ersatz für das Ziehen ins Leere — mit Maus geht der Auswahlrahmen ohnehin immer. Auf reinen Zeigergeräten daher ausblenden. */ @media not all and (any-pointer:coarse){#view-raum #blk-layout .lay-tools .tl.tl-touch,#view-raum #blk-layout .lay-tools .tl-sep.tl-touch{display:none;}} @media(any-pointer:coarse){#view-raum #blk-layout .lay-tools .tl{width:44px;height:44px;} #view-raum #blk-layout .lay-statusbar{height:28px;}} #view-raum #blk-layout .lay-zoom{font-size:var(--fs-xs);min-width:46px;padding:0 var(--sp-1);white-space:nowrap;} /* 2D/3D-Segmentschalter */ #view-raum #blk-layout .lay-seg{display:flex;gap:2px;background:var(--bg-s);border:0.5px solid var(--bdr);border-radius:var(--r-m);padding:2px;} #view-raum #blk-layout .lay-seg.lbar{background:var(--bg-p);border-color:var(--bdr2);padding:3px;box-shadow:var(--shadow-pop);} #view-raum #blk-layout .lay-seg button{border:none;background:transparent;border-radius:var(--r-s);height:var(--ctl-h-s);padding:0 var(--sp-3);font-size:var(--fs-s);font-weight:500;color:var(--txt2);cursor:pointer;display:flex;align-items:center;gap:var(--sp-1);font-family:var(--f-body);font-stretch:normal;} #view-raum #blk-layout .lay-seg button i{font-size:var(--fs-m);} #view-raum #blk-layout .lay-seg button:hover{background:var(--hover);} #view-raum #blk-layout .lay-seg button.on{background:var(--acc-btn);color:var(--on-fill);} /* Leisten im CI (Chris 2026-10-04): Beschriftungen in der Auszeichnungsschrift wie Reiter und Kartenköpfe */ #view-raum #blk-layout .lay-bar button,#view-raum #blk-layout .lay-show button,#view-raum #blk-layout .lay-pres button{font-family:var(--f-display);font-stretch:87.5%;} /* Ansicht-Popover */ #view-raum #blk-layout .lay-viewmenu{position:absolute;top:52px;right:10px;z-index:40;background:var(--bg-p);border:0.5px solid var(--bdr);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:var(--sp-2) var(--sp-3) var(--sp-2);width:214px;display:none;} #view-raum #blk-layout .lay-viewmenu.open{display:block;} #view-raum #blk-layout .lvm-sec{font-size:var(--fs-2xs);font-weight:700;color:var(--txt3);padding:var(--sp-2) 2px 3px;} #view-raum #blk-layout .lvm-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-s);color:var(--txt);padding:var(--sp-1) 2px;cursor:pointer;user-select:none;-webkit-user-select:none;} #view-raum #blk-layout .lvm-sw{width:30px;height:18px;border-radius:var(--r-m);background:var(--bdr2);position:relative;flex-shrink:0;transition:background .15s;} #view-raum #blk-layout .lvm-sw i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:var(--shadow-s);} #view-raum #blk-layout .lvm-row.on .lvm-sw{background:var(--acc-f);} #view-raum #blk-layout .lvm-row.on .lvm-sw i{left:14px;} /* Wand-Glyph (Draufsicht): Balken = Wände, Kreis = Decke; an=Akzent, transparent=45 %, aus=grau */ /* Wand-Glyph (Draufsicht): Balken = Wände, Kreis = Decke; an=Akzent, transparent=40 %, aus=grau (Pille H L R V D am 2026-10-14 zurückgenommen, Chris) */ #view-raum #blk-layout .lvm-glyph{position:relative;width:104px;height:84px;margin:var(--sp-2) auto var(--sp-1);} #view-raum #blk-layout .lvm-glyph::before{content:'';position:absolute;inset:12px;background:var(--bg-s);border-radius:var(--r-xs);} #view-raum #blk-layout .wgl{position:absolute;border:0.5px solid var(--bdr2);border-radius:var(--r-xs);background:var(--bg-s);cursor:pointer;padding:0;} #view-raum #blk-layout .wgl.on{background:var(--acc-f);border-color:var(--acc-f);opacity:1;} #view-raum #blk-layout .wgl.semi{background:var(--acc-f);border-color:var(--acc-f);opacity:0.4;} #view-raum #blk-layout .wgl:hover{outline:2px solid var(--acc-s);} #view-raum #blk-layout .wgl-h{left:14px;right:14px;top:0;height:9px;} #view-raum #blk-layout .wgl-v{left:14px;right:14px;bottom:0;height:9px;} #view-raum #blk-layout .wgl-l{top:14px;bottom:14px;left:0;width:9px;} #view-raum #blk-layout .wgl-r{top:14px;bottom:14px;right:0;width:9px;} #view-raum #blk-layout .wgl-d{left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;font-size:var(--fs-xs);color:var(--txt2);font-family:inherit;} #view-raum #blk-layout .wgl-d.on{color:var(--on-fill);} #view-raum #blk-layout .lvm-hint{font-size:var(--fs-2xs);color:var(--txt3);text-align:center;justify-content:center;padding-bottom:2px;} /* Coverage-Legende (Farben = COVCOL in avlayout.js) */ /* Farbpunkt vor dem Namen der Abdeckbereich-Kategorie (ersetzt die frühere Legendenzeile) */ #view-raum #blk-layout .lvm-row > span:first-child{display:inline-flex;align-items:center;gap:var(--sp-1);} #view-raum #blk-layout .lvm-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;} /* ViewCube (nur 3D): CSS-Würfel, dreht mit der Kamera; Flächen klickbar */ #view-raum #blk-layout .lay-cube{position:absolute;top:14px;left:14px;z-index:20;width:76px;height:76px;display:none;} #view-raum #blk-layout .lay-cwrap.v3d .lay-cube{display:block;} #view-raum #blk-layout .lc-scene{width:100%;height:100%;perspective:340px;} #view-raum #blk-layout .lc-cube{position:relative;width:44px;height:44px;margin:var(--sp-4) auto;transform-style:preserve-3d;} #view-raum #blk-layout .lc-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4a4844;background:rgba(246,245,242,.9);border:1px solid rgba(0,0,0,.28);backface-visibility:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;} /* Flächen-Hover NICHT, wenn gerade eine Ecke gehovert wird (sonst frisst er das Eck-Highlight) */ #view-raum #blk-layout .lc-face:hover:not(:has(.lc-h:hover)){background:var(--acc-btn);color:var(--on-fill);border-color:var(--acc-btn);} #view-raum #blk-layout .lc-vorn{transform:translateZ(22px);} #view-raum #blk-layout .lc-hinten{transform:rotateY(180deg) translateZ(22px);} #view-raum #blk-layout .lc-rechts{transform:rotateY(90deg) translateZ(22px);} #view-raum #blk-layout .lc-links{transform:rotateY(-90deg) translateZ(22px);} #view-raum #blk-layout .lc-oben{transform:rotateX(90deg) translateZ(22px);} #view-raum #blk-layout .lc-unten{transform:rotateX(-90deg) translateZ(22px);cursor:default;} /* Eck-Hotspots IN den Würfelflächen (drehen mit) = Schrägansichten von oben */ #view-raum #blk-layout .lc-h{position:absolute;width:13px;height:13px;padding:0;background:transparent;border:none;cursor:pointer;z-index:2;backface-visibility:hidden;} #view-raum #blk-layout .lc-h::after{content:'';position:absolute;inset:2px;border-radius:var(--r-xs);background:rgba(0,0,0,.13);} /* Hover: die GANZE Würfel-Ecke leuchtet (JS setzt .hl auf alle Hotspots derselben iso-Richtung) */ #view-raum #blk-layout .lc-h:hover::after,#view-raum #blk-layout .lc-h.hl::after{background:var(--acc-f);inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);} #view-raum #blk-layout .lc-h-tl{top:0;left:0;} #view-raum #blk-layout .lc-h-tr{top:0;right:0;} #view-raum #blk-layout .lc-h-bl{bottom:0;left:0;} #view-raum #blk-layout .lc-h-br{bottom:0;right:0;} /* Dreh-Pfeile um den Würfel (90°-Schritte wie AutoCAD) */ #view-raum #blk-layout .lc-arr{position:absolute;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:rgba(246,245,242,.85);font-size:var(--fs-m);cursor:pointer;padding:0;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.5);} #view-raum #blk-layout .lc-arr:hover{color:var(--acc);} #view-raum #blk-layout .lc-a-l{left:-2px;top:50%;transform:translateY(-50%);} #view-raum #blk-layout .lc-a-r{right:-2px;top:50%;transform:translateY(-50%);} #view-raum #blk-layout .lc-a-u{top:-2px;left:50%;transform:translateX(-50%);} #view-raum #blk-layout .lc-a-d{bottom:-2px;left:50%;transform:translateX(-50%);} /* 3D-abhängige Sichtbarkeit über .v3d am Canvas-Wrapper */ #view-raum #blk-layout .lvm-3donly{display:none;} #view-raum #blk-layout .lay-cwrap.v3d .lvm-3donly{display:flex;} #view-raum #blk-layout .lay-cwrap.v3d .lvm-3donly.lvm-sec{display:block;} #view-raum #blk-layout .lay-cwrap.v3d .lay-fl-br{display:none;} #view-raum #blk-layout #cv{flex:1;display:block;touch-action:none;} #view-raum #blk-layout #c3d{flex:1;position:relative;} /* Bedienfeld in 3D (2026-10-21): steht über einer eingeschalteten Anzeige bzw. einem beschriebenen Whiteboard (avlayout hudPos), Inhalt je Fläche/Tafel, bei zwei Flächen „Ein Bild mittig | Je Fläche“. Klein, damit es das Bild kaum verdeckt. */ #view-raum #blk-layout .l3d-hud{position:absolute;z-index:6;min-width:176px;max-width:240px;padding:var(--sp-2);border-radius:var(--r-m); background:var(--bg-p);border:.5px solid var(--bdr2);box-shadow:var(--shadow-pop);font-size:var(--fs-xs);color:var(--txt);} #view-raum #blk-layout .l3d-hud[hidden]{display:none;} #view-raum #blk-layout .l3d-hd{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-1);} #view-raum #blk-layout .l3d-hd>.ti{color:var(--acc);font-size:var(--fs-l);} #view-raum #blk-layout .l3d-hd b{flex:1;font-weight:600;font-size:var(--fs-s);} #view-raum #blk-layout .l3d-x{border:0;background:none;color:var(--txt3);cursor:pointer;padding:2px;line-height:1;} #view-raum #blk-layout .l3d-row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);} #view-raum #blk-layout .l3d-l{width:44px;flex:none;color:var(--txt2);} #view-raum #blk-layout .l3d-dd{position:relative;flex:1;min-width:0;} #view-raum #blk-layout .l3d-dd>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1);height:28px;padding:0 var(--sp-2); border:.5px solid var(--bdr2);border-radius:var(--r-s);background:var(--bg-s);color:var(--txt);font:inherit;cursor:pointer;} #view-raum #blk-layout .l3d-ddl{display:none;position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:2;padding:2px;border-radius:var(--r-s); background:var(--bg-p);border:.5px solid var(--bdr2);box-shadow:var(--shadow-pop);} #view-raum #blk-layout .l3d-dd.open .l3d-ddl{display:block;} #view-raum #blk-layout .l3d-ddl button{display:block;width:100%;text-align:left;padding:5px var(--sp-2);border:0;border-radius:var(--r-xs);background:none;color:var(--txt);font:inherit;cursor:pointer;} #view-raum #blk-layout .l3d-ddl button:hover{background:var(--hover);} #view-raum #blk-layout .l3d-ddl button.on{background:var(--acc-sel);color:var(--acc);font-weight:600;} #view-raum #blk-layout .l3d-seg{display:flex;gap:2px;padding:2px;border-radius:var(--r-s);background:var(--bg-s);border:.5px solid var(--bdr);} #view-raum #blk-layout .l3d-seg button{flex:1;height:var(--ctl-h-s);border:0;border-radius:var(--r-xs);background:none;color:var(--txt2);font:inherit;font-family:var(--f-body);font-size:var(--fs-s);font-weight:500;cursor:pointer;white-space:nowrap;} #view-raum #blk-layout .l3d-seg button.on{background:var(--acc-btn);color:var(--on-fill);} #view-raum #blk-layout .l3d-off{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);border:0;background:none;color:var(--txt2);font:inherit;cursor:pointer;padding:2px 0;} #view-raum #blk-layout .l3d-off:hover{color:var(--txt);} @media (any-pointer:coarse){#view-raum #blk-layout .l3d-dd>button,#view-raum #blk-layout .l3d-seg button{height:36px;}} /* Vignette über der 3D-Ansicht (2026-09-06): leichte Randabdunklung, filmischer Eindruck. Kein Pointer-Ziel, sonst blockiert sie die OrbitControls. Der Export rechnet dieselbe Vignette in die PNGs (exportImages). */ #view-raum #blk-layout #c3d::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at center,rgba(0,0,0,0) 58%,rgba(0,0,0,.30) 100%);} #view-raum #blk-layout .lay-props{width:182px;flex-shrink:0;background:var(--bg-p);border-left:0.5px solid var(--bdr);padding:var(--sp-3);overflow-y:auto;display:none;} #view-raum #blk-layout .lay-props.on{display:block;} #view-raum #blk-layout .lay-ptitle{font-size:var(--fs-m);font-weight:600;color:var(--txt);margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:0.5px solid var(--bdr);} #view-raum #blk-layout .pcount{font-size:var(--fs-2xs);color:var(--txt2);font-weight:400;} #view-raum #blk-layout .pr{margin-bottom:var(--sp-2);} #view-raum #blk-layout .pr label{font-size:var(--fs-2xs);color:var(--txt3);display:block;margin-bottom:3px;} #view-raum #blk-layout .pr input,#view-raum #blk-layout .pr select{width:100%;padding:var(--sp-2);border:0.5px solid var(--bdr2);border-radius:var(--r-s);font-size:var(--fs-m);background:var(--bg-s);color:var(--txt);} #view-raum #blk-layout .pr-hint{font-size:var(--fs-2xs);line-height:1.35;color:var(--txt3);margin-top:var(--sp-1);text-transform:none;letter-spacing:0;} /* Kollisionsmeldung im Eigenschaften-Panel (Möbel höher als der Raum) — dieselbe rote Farbe wie der Rahmen im Grundriss (WARNCOL in avlayout.js), synchron halten. */ #view-raum #blk-layout .pr-warn{font-size:var(--fs-2xs);line-height:1.35;color:var(--late);font-weight:600;text-transform:none;letter-spacing:0; background:rgba(192,57,43,.10);border:1px solid rgba(192,57,43,.35);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);} #view-raum #blk-layout .pr input:disabled,#view-raum #blk-layout .pr select:disabled{opacity:.55;cursor:not-allowed;} #view-raum #blk-layout .prbtns{display:flex;gap:var(--sp-1);margin-top:var(--sp-1);} #view-raum #blk-layout .prbtn{flex:1;padding:var(--sp-2) 0;font-size:var(--fs-s);border-radius:var(--r-s);cursor:pointer;border:0.5px solid var(--bdr2);background:transparent;color:var(--txt2);} #view-raum #blk-layout .prbtn:hover{background:var(--hover);} #view-raum #blk-layout .prbtn.del{border-color:var(--danger);color:var(--danger);} /* Kamera-Zielverknüpfung: eigene Auswahlliste (natives