:root{ --bg:#0a0d14; --panel:#111722; --panel-2:#161d2b; --line:#232c3d; --txt:#e6ecf5; --txt-dim:#8a97ad; --txt-mute:#5d6a80; --acc:#3b82f6; --acc-2:#60a5fa; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --sdi:#16a34a; --hdmi:#2563eb; --fiber:#ea580c; --audio:#9333ea; --eth:#64748b; --r:10px; --rs:7px; --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font);background:var(--bg);color:var(--txt); font-size:14px;line-height:1.5;overflow:hidden; -webkit-font-smoothing:antialiased; } button,input,textarea,select{font:inherit;color:inherit} /* ------------------------------------------------------------- Topbar */ .topbar{ /* gap 20→12 und schrumpffähige Mitte: bei 1600 px Fensterbreite war die Zeile breiter als das Fenster — das Projektfeld fiel auf Briefmarken- grösse, der Baustand wurde abgeschnitten und das Zahnrad lag GANZ ausserhalb. Gemessen am 22.08.2026 mit dem Prüfbrowser. */ height:56px;display:flex;align-items:center;gap:12px;padding:0 16px; background:linear-gradient(180deg,#131a27,#0f1420); border-bottom:1px solid var(--line);position:relative;z-index:20; } .brand{display:flex;align-items:center;gap:11px;min-width:150px} .logo{ width:32px;height:32px;display:grid;place-items:center;border-radius:9px; background:linear-gradient(135deg,var(--acc),#8b5cf6); font-size:17px;color:#fff;box-shadow:0 2px 12px rgba(59,130,246,.4); } .brand-name{font-weight:700;letter-spacing:.4px;font-size:15px;line-height:1.1} .brand-sub{font-size:11px;color:var(--txt-mute);line-height:1.3} .project{flex:1 1 130px;min-width:0;display:flex;justify-content:center} /* Dateiname, nicht Knopf: keine Fläche, kein umlaufender Rahmen — nur eine Grundlinie, die beim Tippen zur Akzentfarbe wechselt. */ .projbox{ display:inline-flex;align-items:center;gap:8px; width:min(420px,100%);min-width:110px;padding:5px 8px 4px; border-radius:var(--rs) var(--rs) 0 0;border-bottom:1px dashed var(--line); transition:background .15s,border-color .15s; } .projbox{border-bottom-color:transparent} .projbox:hover{background:var(--panel)} /* **Der Name schrumpft zuletzt.** Ohne `flex` war er das einzige Kind mit `overflow:hidden` — und damit das einzige, das der Flex-Umbruch beliebig klein rechnen durfte. Gemessen am 26.08.2026 im Prüfbrowser: Breite 0, der Name stand im DOM und war unsichtbar, während „.ptch" und der Speicherstand daneben ihren Platz behielten. Jetzt ist es umgekehrt: der Name bekommt den Platz, der Stand weicht. */ #projname{ flex:1 1 auto;min-width:5ch;max-width:280px; font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .proj-icon{ width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--txt-dim); stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round; } .projbox:focus-within .proj-icon{stroke:var(--acc-2)} .project input{ flex:1 1 auto;min-width:0;background:none;border:0;padding:1px 0; text-align:left;font-weight:600;text-overflow:ellipsis; } .project input:focus{outline:none} .proj-ext{flex:0 0 auto;font-size:11px;color:var(--txt-mute);letter-spacing:.2px} /* Bei schmalem Fenster zuerst den Speicherstand opfern, nicht den Namen. */ @media (max-width:1500px){ .proj-stand{display:none} } .actions{display:flex;gap:7px;align-items:center} .btn{ background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rs); padding:7px 13px;cursor:pointer;transition:.15s;font-size:13px;font-weight:500; display:inline-flex;align-items:center;gap:7px;white-space:nowrap; } .btn:hover{background:#1d2636;border-color:#2f3b52} /* Ein gesperrter Knopf muss auch gesperrt AUSSEHEN — sonst klickt man ihn und hält die Anwendung für kaputt. Betrifft seit 28.08.2026 die Listen-Ausgabe und die Nummernschalter, solange nichts gezeichnet ist. */ .btn:disabled{opacity:.42;cursor:not-allowed} .btn:disabled:hover{background:var(--panel-2);border-color:var(--line)} .schalter input:disabled + .gleis{opacity:.42;cursor:not-allowed} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--acc);border-color:var(--acc);color:#fff} .btn-primary:hover{background:var(--acc-2);border-color:var(--acc-2)} .btn-icon{padding:7px 10px;font-size:15px} .btn.wide{width:100%;justify-content:center} .badge{ background:rgba(255,255,255,.25);border-radius:20px;padding:1px 7px; font-size:11px;font-weight:700; } .dot{width:7px;height:7px;border-radius:50%;background:var(--err);display:inline-block} /* ------------------------------------------------------------- Layout */ .layout{display:flex;height:calc(100% - 56px)} .panel{ width:420px;min-width:420px;background:var(--panel); border-right:1px solid var(--line);display:flex;flex-direction:column; } .editor{flex:1;position:relative;background:#fff} .editor iframe{width:100%;height:100%;border:0;display:block} .editor-loading{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; gap:12px;background:var(--bg);color:var(--txt-dim);z-index:5; } .spinner{ width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--acc); border-radius:50%;animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* --------------------------------------------------------------- Tabs */ .tabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel-2)} .tab{ flex:1;background:none;border:0;padding:12px 8px;cursor:pointer; color:var(--txt-dim);font-size:13px;font-weight:600;position:relative; display:flex;align-items:center;justify-content:center;gap:6px; } .tab:hover{color:var(--txt)} .tab.active{color:var(--txt)} .tab.active::after{ content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px; background:var(--acc);border-radius:2px; } .tabpane{display:none;flex:1;min-height:0;flex-direction:column} .tabpane.active{display:flex} /* --------------------------------------------------------------- Chat */ .messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px} .msg{display:flex} .msg.user{justify-content:flex-end} .bubble{ max-width:92%;padding:11px 14px;border-radius:14px;font-size:13.5px; white-space:pre-wrap;word-wrap:break-word; } .msg.assistant .bubble{background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px} .msg.user .bubble{background:var(--acc);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap} .bubble p+p{margin-top:8px} .bubble ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:5px} .bubble li{font-size:12.5px;color:var(--txt-dim)} .welcome .bubble{background:transparent;border:1px dashed var(--line)} .hint{font-size:12px;color:var(--txt-mute);margin-top:8px} .msg .status{ font-size:12px;color:var(--txt-mute);display:flex;align-items:center;gap:7px; margin-top:8px;padding-top:8px;border-top:1px solid var(--line); } .msg .status .spinner{width:12px;height:12px} .err-box{ background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35); color:#fca5a5;border-radius:var(--rs);padding:10px 12px;font-size:12.5px; } .attachments{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px} .attachments:not(:empty){padding-bottom:10px} .chip{ background:var(--panel-2);border:1px solid var(--line);border-radius:20px; padding:4px 10px;font-size:11.5px;display:flex;align-items:center;gap:6px; } .chip button{background:none;border:0;cursor:pointer;color:var(--txt-mute);font-size:14px;line-height:1} .chip button:hover{color:var(--err)} .composer{ display:flex;gap:8px;align-items:flex-end;padding:12px 16px 16px; border-top:1px solid var(--line);background:var(--panel); } .composer textarea{ flex:1;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--r);padding:10px 12px;resize:none;max-height:160px; font-size:13.5px;line-height:1.45;transition:border-color .15s; } .composer textarea:focus{outline:none;border-color:var(--acc)} .attach,.send{ width:38px;height:38px;flex:0 0 38px;border-radius:var(--rs);cursor:pointer; border:1px solid var(--line);background:var(--panel-2);font-size:16px; display:grid;place-items:center;transition:.15s; } .attach:hover{background:#1d2636} .send{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700} .send:hover{background:var(--acc-2)} .send:disabled{opacity:.4;cursor:not-allowed} /* ------------------------------------------------------------- Geräte */ .searchbox{padding:12px 14px;border-bottom:1px solid var(--line)} .searchbox input{ width:100%;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--rs);padding:9px 12px;font-size:13px; } .searchbox input:focus{outline:none;border-color:var(--acc)} .devlist{flex:1;overflow-y:auto;padding:8px} .dev{ border:1px solid var(--line);border-radius:var(--r);padding:10px 12px; margin-bottom:7px;cursor:pointer;transition:.13s;background:var(--panel-2); } .dev:hover{border-color:var(--acc);background:#1a2436;transform:translateX(2px)} .dev-top{display:flex;align-items:center;gap:9px} .dev-icon{ width:28px;height:28px;flex:0 0 28px;border-radius:7px;display:grid; place-items:center;background:#0f1826;font-size:14px;border:1px solid var(--line); } .dev-name{font-weight:600;font-size:13px;flex:1;line-height:1.25} .dev-cat{font-size:10.5px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.5px} .dev-ports{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .pill{ font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600; background:#0f1826;border:1px solid var(--line); } .pill.in::before{content:"▸ ";opacity:.6} .pill.out::before{content:"◂ ";opacity:.6} .empty{padding:26px 16px;text-align:center;color:var(--txt-mute);font-size:13px} /* -------------------------------------------------------------- Check */ .check-head{padding:14px;border-bottom:1px solid var(--line)} .findings{flex:1;overflow-y:auto;padding:10px} .finding{ border:1px solid var(--line);border-left-width:3px;border-radius:var(--rs); padding:11px 13px;margin-bottom:8px;background:var(--panel-2); } .finding.error{border-left-color:var(--err)} .finding.warning{border-left-color:var(--warn)} .finding.info{border-left-color:var(--acc)} .f-head{display:flex;align-items:center;gap:8px;margin-bottom:5px} .f-sev{ font-size:9.5px;font-weight:800;letter-spacing:.7px;padding:2px 6px; border-radius:4px;text-transform:uppercase; } .finding.error .f-sev{background:rgba(239,68,68,.18);color:#fca5a5} .finding.warning .f-sev{background:rgba(245,158,11,.18);color:#fcd34d} .finding.info .f-sev{background:rgba(59,130,246,.18);color:#93c5fd} .f-title{font-weight:650;font-size:13px} .f-detail{font-size:12.5px;color:var(--txt-dim)} .f-fix{font-size:12px;color:var(--txt-mute);margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)} .f-fix::before{content:"→ "} .all-good{ text-align:center;padding:34px 18px;color:var(--ok); } .all-good .big{font-size:36px;display:block;margin-bottom:8px} /* ------------------------------------------------------------- Modals */ .modal{ position:fixed;inset:0;background:rgba(3,6,12,.78);display:grid;place-items:center; z-index:100;backdrop-filter:blur(3px); } .modal-box{ --modal-pad:22px; background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:var(--modal-pad);width:min(460px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.6); /* **Hoher Inhalt muss scrollen können.** Ohne diese zwei Zeilen wächst der Kasten in einem `place-items:center`-Raster über das Fenster hinaus und wird oben UND unten abgeschnitten — ohne Scrollbalken, weil nichts überläuft, was scrollen könnte. Gemessen am 28.08.2026 im Prüfbrowser bei 1600×1000 (ein gewöhnlicher Laptop): der Knopf „Übernehmen" in „Seite einrichten" lag ausserhalb des Fensters und war nicht anklickbar — die Funktion war auf so einem Schirm nicht bedienbar. `.modal-insert` hatte das für sich allein schon gelöst; hier gilt es für jedes Fenster. */ max-height:min(90vh, calc(100vh - 32px)); overflow-y:auto; } .modal-box h3{margin-bottom:16px;font-size:16px} .modal-box label{display:block;margin-bottom:14px;font-size:12.5px;color:var(--txt-dim)} .modal-box input,.modal-box select{ width:100%;margin-top:6px;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--rs);padding:9px 11px;font-size:13px;color:var(--txt); } .modal-box input:focus,.modal-box select:focus{outline:none;border-color:var(--acc)} .modal-actions{ display:flex;gap:8px;justify-content:flex-end;margin-top:18px; /* **Die Knöpfe bleiben stehen.** Seit die Fenster scrollen (28.08.2026), wandert „Übernehmen" bei einem langen Dialog aus dem Bild — in „Seite einrichten" liegt es hinter Plankopf-Auswahl und zwölf Feldern, und wer nicht scrollt, hält den Dialog für kaputt. Als klebende Fussleiste ist der Abschluss immer sichtbar, ohne dass der Inhalt beschnitten wird. Der Schatten nach oben zeigt, dass darunter noch etwas kommt. */ position:sticky;bottom:calc(-1 * var(--modal-pad, 22px)); margin-bottom:calc(-1 * var(--modal-pad, 22px)); padding:12px 0 var(--modal-pad, 22px); background:linear-gradient(to bottom, transparent, var(--panel) 22%); } /* Stil-Editor (23.08.2026): gestapelte Beschriftungen, zwei Spalten. */ #modal-stil label{display:flex;flex-direction:column;gap:4px;font-size:12px; color:var(--txt-mute);margin:0 0 10px} #modal-stil input,#modal-stil select{background:var(--panel-2); border:1px solid var(--line);border-radius:var(--rs);padding:7px 10px; color:inherit;font-size:13px} #modal-stil input:focus,#modal-stil select:focus{outline:none;border-color:var(--acc)} .zeile2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .projlist{max-height:320px;overflow-y:auto} .proj{ padding:11px 13px;border:1px solid var(--line);border-radius:var(--rs); margin-bottom:7px;cursor:pointer;display:flex;justify-content:space-between; align-items:center;background:var(--panel-2); } .proj:hover{border-color:var(--acc)} .proj small{color:var(--txt-mute);font-size:11.5px} /* -------------------------------------------------------------- Toast */ .toast{ position:fixed;bottom:22px;left:50%;transform:translateX(-50%); background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rs); padding:11px 18px;font-size:13px;z-index:200;box-shadow:0 8px 30px rgba(0,0,0,.5); animation:rise .2s ease; } .toast.err{border-color:rgba(239,68,68,.5);color:#fca5a5} .toast.ok{border-color:rgba(34,197,94,.5);color:#86efac} @keyframes rise{from{opacity:0;transform:translate(-50%,10px)}} .hidden{display:none !important} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#232c3d;border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:#2f3b52} /* Kompaktmodus der Kopfzeile. Bei 1600 px Fensterbreite überlappte das Projektfeld den Prüfen-Knopf — elf Einzelknöpfe plus Konto plus Baustand sind schlicht breiter als das Fenster. Unterhalb 1780 px rücken die Knöpfe zusammen, statt dass rechts etwas abgeschnitten wird oder links etwas übereinanderliegt. Gemessen mit dem Prüfbrowser, 22.08.2026. */ @media(max-width:1780px){ .topbar{gap:9px} .topbar .btn{padding:6px 9px;font-size:12.5px;gap:5px} .stilwahl{max-width:110px} .konto-mail{max-width:150px} .brand{min-width:0} .brand-sub{display:none} } @media(max-width:1100px){ .panel{width:340px;min-width:340px} /* **Der Dateiname bleibt.** Bis 28.08.2026 verschwand er hier ganz — bei 1024 px stand in der Kopfzeile kein Hinweis mehr darauf, welcher Plan offen ist. Das ist die wichtigste Angabe der Zeile, wichtiger als jede Knopfbeschriftung. Stattdessen fallen die Beschriftungen der Knöpfe weg; ihre Symbole bleiben, und der `title` erklärt sie beim Zeigen. */ .project{max-width:150px} /* Nur die Beschriftungen — der Pfeil eines Aufklappknopfs bleibt, sonst sieht man einem Menü nicht mehr an, dass es eines ist. Die Menüeinträge selbst (`.mi span`) stecken nicht in `.btn` und bleiben ohnehin. */ .topbar .btn > span:not(.caret){display:none} .topbar .btn{gap:0} .topbar .btn{padding:6px 8px} } @media(max-width:900px){ /* Noch schmaler: dann doch der Name weg — sonst bleibt für die Knöpfe nichts übrig. */ .project{display:none} } /* ---------------------------------------------------------- Stückliste */ .cnt{ background:var(--panel);border:1px solid var(--line);border-radius:20px; padding:1px 7px;font-size:10.5px;font-weight:700;color:var(--txt-dim); } .bom-head{display:flex;flex-direction:column} .bomlist{flex:1;overflow-y:auto;padding:10px} .btnrow{display:flex;gap:7px;margin-top:7px} .btnrow .btn{flex:1;justify-content:center} /* Stücklisten-Tabelle */ .bomtable{width:100%;border-collapse:collapse;font-size:12.5px} .bomtable thead th{ position:sticky;top:0;background:var(--panel-2);z-index:2; text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase; color:var(--txt-mute);font-weight:700;padding:9px 8px; border-bottom:1px solid var(--line); } .bomtable td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top} .bomtable tbody tr:hover{background:#16203040} .bomtable .c-qty{ text-align:center;font-weight:800;font-size:14px;white-space:nowrap;width:44px; } .bomtable .c-icon{width:30px;padding-right:0} .bomtable .c-model{font-weight:650;line-height:1.3} .bomtable .c-vendor{font-size:11px;color:var(--txt-mute);margin-top:2px} .bomtable .c-pos{width:96px} .bomtable tr.missing{background:rgba(245,158,11,.08)} .bomtable tr.missing .c-vendor{color:var(--warn)} .bomtable tfoot td{ padding:11px 8px;font-weight:700;border-top:2px solid var(--line); background:var(--panel-2); } .ico{ width:24px;height:24px;border-radius:6px;display:grid;place-items:center; background:#0f1826;border:1px solid var(--line);font-size:13px; } .tblhead{ padding:11px 10px 7px;font-size:10.5px;letter-spacing:.6px; text-transform:uppercase;color:var(--txt-mute);font-weight:700; } .bom-group{ border:1px solid var(--line);border-radius:var(--rs);background:var(--panel-2); padding:10px 12px;margin-bottom:7px;display:flex;gap:11px;align-items:flex-start; } .bom-qty{ flex:0 0 40px;height:40px;border-radius:9px;display:grid;place-items:center; background:#0f1826;border:1px solid var(--line);font-weight:800;font-size:15px; } .bom-main{flex:1;min-width:0} .bom-model{font-size:13px;font-weight:650;line-height:1.3} .bom-vendor{font-size:11px;color:var(--txt-mute);margin-top:1px} .bom-pos{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .posnr{ background:var(--err);color:#fff;border-radius:50%;width:19px;height:19px; display:grid;place-items:center;font-size:10.5px;font-weight:700; } .bom-missing{border-color:rgba(245,158,11,.5)} .bom-missing .bom-qty{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4)} .bom-sum{ border-top:1px solid var(--line);margin-top:10px;padding:12px 4px 4px; display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--txt-dim); } .bom-sum b{color:var(--txt);font-size:14px} .cable-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0} .cable-bar{height:7px;border-radius:20px;flex:0 0 auto} /* ------------------------------------------------------------ Vorlagen */ .tpllist{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto} .tpl{ border:1px solid var(--line);border-radius:var(--r);padding:13px 15px; cursor:pointer;background:var(--panel-2);transition:.13s; display:flex;align-items:center;gap:13px; } .tpl:hover{border-color:var(--acc);background:#1a2436} .tpl-thumb{ flex:0 0 62px;height:44px;border-radius:5px;background:#fff;position:relative; border:1px solid #d4d4d8; } .tpl-thumb::after{ content:"";position:absolute;right:4px;bottom:4px;width:26px;height:13px; border:1px solid #71717a;background:#f4f4f5; } .tpl-thumb.blank::after{display:none} .tpl-name{font-weight:650;font-size:13.5px} .tpl-desc{font-size:11.5px;color:var(--txt-mute);margin-top:2px} /* ---------------------------------------------------------- Kabelnorm */ .modal-wide{width:min(680px,94vw)} .ktable{max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--rs)} .krow{ display:grid;grid-template-columns:22px 1fr 96px 118px 62px;gap:9px; align-items:center;padding:7px 10px;border-bottom:1px solid var(--line); } .krow:last-child{border-bottom:0} .krow:hover{background:#16203050} .kdot{width:16px;height:16px;border-radius:4px;border:1px solid var(--line)} .kname{font-size:12.5px;font-weight:600;line-height:1.2} .knote{font-size:10.5px;color:var(--txt-mute);margin-top:1px} .krow input[type=color]{ width:100%;height:26px;padding:0;border:1px solid var(--line); border-radius:5px;background:var(--panel-2);cursor:pointer; } .krow select,.krow input[type=number]{ width:100%;background:var(--panel-2);border:1px solid var(--line); border-radius:5px;padding:4px 6px;font-size:11.5px; } .kprev{height:0;border-top-width:2px;border-top-style:solid;width:100%} .stilwahl{ background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rs); padding:7px 9px;font-size:12.5px;max-width:190px;cursor:pointer; } .stilwahl:focus{outline:none;border-color:var(--acc)} /* ------------------------------------------------- Neue Zeichnung */ .feld{margin-bottom:16px} .feld>label{ display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase; color:var(--txt-mute);font-weight:700;margin-bottom:7px; } .chips{display:flex;gap:7px;flex-wrap:wrap} .chip-btn{ background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rs); padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600; display:inline-flex;align-items:center;gap:8px;transition:.13s; } .chip-btn:hover{border-color:#2f3b52} .chip-btn.active{background:var(--acc);border-color:var(--acc);color:#fff} .oriicon{display:inline-block;border:1.5px solid currentColor;border-radius:2px} .oriicon.quer{width:17px;height:12px} .oriicon.hoch{width:12px;height:17px} /* Plankopf-Kacheln, seit 03.09.2026 kleiner und in zwei Gruppen (Standard / Benutzerdefiniert — `benutzerdefiniert` aus /api/plankoepfe). `.kopfgrid` ist jetzt nur noch der senkrechte Stapel der Gruppen, das Karten-Raster selbst liegt in `.kopfgrid-inner` — mit vielen Köpfen (Birdsong & Co. kommen dazu) wäre eine einzelne 3er-Spalte sonst ellenlang. */ .kopfgrid{display:flex;flex-direction:column;gap:12px} .kopfgruppe-titel{ font-size:10px;letter-spacing:.5px;text-transform:uppercase; color:var(--txt-mute);font-weight:700;margin-bottom:6px; } .kopfgrid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px} .kopfkarte{ border:2px solid var(--line);border-radius:var(--r);padding:6px;cursor:pointer; background:var(--panel-2);transition:.13s;text-align:center; } .kopfkarte:hover{border-color:#2f3b52} .kopfkarte.active{border-color:var(--acc);background:#1a2436} .kopfkarte img{ width:100%;height:44px;object-fit:contain;border-radius:4px; display:block;background:#fff; } .kopfkarte .kn{font-size:11px;font-weight:650;margin-top:6px} .kopfkarte .kb{font-size:9.5px;color:var(--txt-mute);margin-top:2px;line-height:1.25} /* ------------------------------------------------- Auswahlfragen im Chat */ .frage{ border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2); padding:12px 13px;margin-top:10px; } .frage h4{font-size:12px;font-weight:700;margin-bottom:10px;color:var(--txt)} .frage .gruppe{margin-bottom:11px} .frage .gruppe:last-of-type{margin-bottom:0} .frage .glabel{ font-size:10px;letter-spacing:.5px;text-transform:uppercase; color:var(--txt-mute);font-weight:700;margin-bottom:6px; } .frage .opts{display:flex;gap:6px;flex-wrap:wrap} .fopt{ background:var(--panel);border:1px solid var(--line);border-radius:6px; padding:6px 12px;font-size:12.5px;cursor:pointer;transition:.12s;font-weight:600; } .fopt:hover{border-color:#2f3b52} .fopt.active{background:var(--acc);border-color:var(--acc);color:#fff} .fkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .fkarte{ border:2px solid var(--line);border-radius:8px;padding:6px;cursor:pointer; background:var(--panel);text-align:center;transition:.12s; } .fkarte:hover{border-color:#2f3b52} .fkarte.active{border-color:var(--acc);background:#1a2436} .fkarte img{width:100%;border-radius:3px;display:block;background:#fff} .fkarte .fn{font-size:10.5px;font-weight:650;margin-top:5px;line-height:1.2} .frage .senden{margin-top:11px;width:100%;justify-content:center} /* Verbrauchsanzeige */ .verbrauch{ font-size:10.5px;color:var(--txt-mute);margin-top:7px;padding-top:7px; border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap; } .verbrauch b{color:var(--txt-dim);font-weight:700} /* ---- Klappmenü „Zuletzt" ------------------------------------------------ */ .dropdown{position:relative;display:inline-block} .menu{ position:absolute;top:calc(100% + 6px);right:0;min-width:230px;z-index:60; background:var(--panel-2);border:1px solid var(--line);border-radius:var(--rs); box-shadow:0 12px 32px rgba(0,0,0,.45);padding:5px;overflow:hidden; } .menu.hidden{display:none} .menu .mi{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px; } .menu .mi:hover{background:#1d2636} .menu .mi small{color:var(--muted);font-size:11px;white-space:nowrap} .menu .mi.leer{cursor:default;color:var(--muted);justify-content:center} .menu .mi.leer:hover{background:none} /* Menüpunkt während eines Downloads: sichtbar beschäftigt, nicht klickbar. */ .menu .mi.busy{opacity:.55;pointer-events:none} .frage .feingabe{ width:100%;background:var(--panel);border:1px solid var(--line); border-radius:8px;padding:8px 10px;color:var(--txt);font:inherit;font-size:13px; } .frage .feingabe:focus{outline:none;border-color:var(--acc)} /* ---- Gerätetabelle ------------------------------------------------------ */ .devtab{width:100%;border-collapse:collapse;font-size:12.5px} .devtab thead th{ position:sticky;top:0;z-index:2;background:var(--panel); text-align:left;font-weight:600;color:var(--muted);font-size:11px; letter-spacing:.03em;text-transform:uppercase; padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap; } .devtab td{padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top} .devtab tbody tr{cursor:pointer} .devtab tbody tr:hover{background:#1a2231} .devtab .c-name{min-width:190px;font-weight:500;color:var(--txt)} .devtab .c-cat{color:var(--muted);white-space:nowrap} .devtab .c-num{width:38px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} .devtab .dico{margin-right:7px} .devtab .chip{ display:inline-block;margin:1px 3px 1px 0;padding:1px 6px;border-radius:5px; border:1px solid var(--line);color:var(--muted);font-size:10.5px;white-space:nowrap; } .devtab .chip.warn{border-color:#f59e0b55;color:#fcd34d;background:rgba(245,158,11,.10)} /* ---- Gerätetabelle im Reiter „Geräte" ------------------------------------ Eigene Klasse statt der geteilten .devtab: die teilen sich auch zwei Firmen-Tabellen im Cockpit (index.html), die dürfen die Kompaktregeln hier nicht mitbekommen. Phil, 03.09.2026: Badges brachen um (Zeilen bis 250 px hoch), die Spalte rechts war abgeschnitten, das Panel scrollte seitwärts. Feste Spaltenbreiten (table-layout:fixed) plus nowrap zwingen jede Zeile auf eine Höhe; was nicht mehr reinpasst, steht im Titel. */ .devtab-geraete{table-layout:fixed} .devtab-geraete th,.devtab-geraete td{white-space:nowrap;overflow:hidden} /* Zeilenhöhe: im Prüfbrowser gemessen 34 px mit dem Basis-Padding von .devtab — Phil will „kompakt". 4 px oben/unten und 18 px Zeilenhöhe ergeben 26–27 px, das Badge (16 px) passt ohne zu drücken. */ .devtab-geraete td{padding:4px 6px;line-height:18px;vertical-align:middle} .devtab-geraete th{padding:4px 6px;line-height:16px} .devtab-geraete th.sortierbar{cursor:pointer;user-select:none} .devtab-geraete th.sortierbar .pfeil{margin-left:3px;opacity:.35;font-size:9px} .devtab-geraete th.sortierbar.aktiv .pfeil{opacity:1;color:var(--acc)} .devtab-geraete th.sortierbar:hover{color:var(--txt)} .devtab-geraete .c-name{width:27%} .devtab-geraete .c-name .c-name-txt{ display:inline-block;max-width:calc(100% - 18px);overflow:hidden; text-overflow:ellipsis;vertical-align:middle; } .devtab-geraete .c-cat{width:13%;text-overflow:ellipsis} .devtab-geraete .c-num{width:28px;padding-left:3px;padding-right:3px;text-align:right} .devtab-geraete .c-sig{width:23%} .devtab-geraete .c-con{width:20%} /* Badges in einer Reihe statt umbrechend — der Grund für die 250-px-Zeilen. */ .devtab-geraete .badges{display:inline-flex;align-items:center;gap:3px;max-width:100%;overflow:hidden;vertical-align:middle} .devtab-geraete .chip{ flex:0 0 auto;font-size:9.5px;line-height:15px;height:16px; padding:0 4px;border-radius:4px;margin:0; } .devtab-geraete .chip.more{color:var(--muted);background:var(--panel);cursor:default} .build{color:var(--muted);font-size:10.5px;letter-spacing:.02em;padding:0 4px;white-space:nowrap} .build.alt{color:#fcd34d} /* Kontingent in der Kopfzeile. Aus dem SaaS-Konzept: der sichtbare Zähler „12 / 15 Pläne" ist ein gewollter Aufstiegsanlass — er muss auffallen, wenn es eng wird, und ansonsten ruhig bleiben. */ .kontingent{ color:var(--muted);font-size:11px;white-space:nowrap;padding:3px 8px; border:1px solid var(--line);border-radius:20px; } .kontingent.knapp{color:#fcd34d;border-color:rgba(245,158,11,.45)} .kontingent.voll {color:#fca5a5;border-color:rgba(239,68,68,.45)} /* Konto-Auskunft (E-Mail · Tarif) in der Kopfzeile — leer bei der Einzelpasswort-Sitzung, dort gibt es kein Konto zu nennen. */ .konto-info{color:var(--txt-mute);font-size:11px;white-space:nowrap;padding:0 4px;display:inline-flex;align-items:center;gap:4px;min-width:0} .konto-mail{max-width:190px;overflow:hidden;text-overflow:ellipsis;display:inline-block} /* Schlanker Link-Knopf ("Passwort vergessen?") ohne Rahmen/Füllung des normalen .btn — braucht trotzdem