/* Schaltungs-Planer — Grundgerüst-Styles (Schritt 1) Design orientiert an PM Manager: dunkles Header-Blau, oranger Akzent, helle Arbeitsfläche. Hell-/Dunkelmodus über [data-theme]. */ :root{ --bg-canvas:#eef1f8; --bg-panel:#ffffff; --bg-app:#e4e8f2; --text-main:#1b2440; --text-muted:#6b7590; --border:#d7dcea; --header-bg:#122048; --header-bg-2:#0d1836; --accent:#e8940c; --accent-contrast:#1b2440; --node-bg:#ffffff; --node-border:#c4cbdf; --node-title-bg:#f4f6fb; --io-cell-bg:#f7f9fd; --grid-dot:#c7cee3; --shadow: 0 2px 10px rgba(20,30,60,.08); /* Aktuelle Breite der einklappbaren Modulliste (siehe .panel) — von app.js beim Ein-/Ausklappen aktualisiert (270px/44px). Nur vom Editor (index.html, .topbar-2row) für die Werkzeugleisten-Ausrichtung gebraucht, siehe dort. */ --panel-width:270px; } [data-theme="dark"]{ --bg-canvas:#0e1730; --bg-panel:#141f3d; --bg-app:#0a1226; --text-main:#e7ebf7; --text-muted:#93a0c4; --border:#26335c; --header-bg:#0a1230; --header-bg-2:#070c1e; --accent:#e8940c; --accent-contrast:#0a1226; --node-bg:#182446; --node-border:#31406e; --node-title-bg:#1c2a52; --io-cell-bg:#141f3d; --grid-dot:#26335c; --shadow: 0 2px 14px rgba(0,0,0,.4); } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg-app); color:var(--text-main); display:flex; flex-direction:column; } button{font-family:inherit;cursor:pointer;} input{font-family:inherit;} input[type=checkbox], input[type=range]{accent-color:#2f6fed;} /* CI-Blauton für Schieberegler/Checkboxen */ /* ---------- Topbar ---------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; background:linear-gradient(180deg,var(--header-bg),var(--header-bg-2)); color:#fff; flex:0 0 auto; } .brand{display:flex;align-items:center;gap:10px;} .brand-badge{ width:32px;height:32px;border-radius:8px;flex:0 0 auto; /* nie gestaucht, siehe @media unten */ background:var(--accent);color:#1b2440; display:flex;align-items:center;justify-content:center; font-weight:700; } .brand-title{font-weight:700;font-size:15px;} .brand-sub{font-size:12px;color:#b7c0dd;} /* Zweizeilige Topbar (siehe index.html) — inzwischen zu viele Funktionen für eine einzelne Zeile. Eigene Klasse statt die Basis-.topbar-Regel zu ändern: public.html nutzt dieselbe .topbar-Klasse für seine schlankere, einzeilige Kopfzeile und soll davon unberührt bleiben. Das Farbverlauf/ Padding der Kopfzeile bleibt an .topbar selbst (eine durchgehende Fläche über beide Zeilen, keine sichtbare Naht) — .topbar-row ist innen nur ein schlichter, transparenter Flex-Container je Zeile. */ .topbar.topbar-2row{flex-direction:column;align-items:stretch;gap:8px;} .topbar-row{display:flex;align-items:center;justify-content:space-between;gap:16px;} .topbar-row-secondary{justify-content:flex-end;} /* Werkzeugleisten des Editors (nur .topbar-2row, siehe index.html) bündig mit dem rechten Rand der einklappbaren Modulliste ausrichten, statt rechtsbündig/hinter der (unterschiedlich breiten) Marke zu hängen — UND das Profil-Icon garantiert ganz rechts, egal wie viele Buttons umbrechen. Ein gemeinsames CSS-Grid über BEIDE Zeilen hinweg (nicht zwei unabhängige) statt absoluter Positionierung — eine frühere Version mit position:absolute brach bei mittleren Fensterbreiten zusammen (Marke/ Avatar/Buttons überlappten sich, siehe Bug-Report), weil nichts die tatsächlich benötigte Breite der Marke oder das Umbrechen der Buttons berücksichtigte. Mit einem Grid übernimmt der Browser das automatisch: Spalte 1 (Marke) ist NIE schmaler als --panel-width, wächst aber mit, falls Marke/Projektname mehr Platz braucht (nie abgeschnitten/verdeckt); Spalte 2 (Werkzeugleisten) bekommt den Rest und darf intern umbrechen (siehe flex-wrap an .topbar-actions unten) — die Zeilenhöhe wächst dafür automatisch mit; Spalte 3 (Avatar) ist genau avatar-breit und bleibt dadurch immer ganz rechts. Die Zeilen-Wrapper (.topbar-row) werden dafür per display:contents transparent — ihre Kinder werden direkt zu Grid-Items von .topbar selbst, wodurch Spalte 1 automatisch für BEIDE Zeilen gleich breit ist (Zeile 2 hat dort keinen sichtbaren Inhalt, aber dieselbe Spaltenbreite wie die Marke in Zeile 1 — sonst wären die Werkzeugleisten beider Zeilen nicht bündig zueinander, sobald die Marke breiter als --panel-width wird). Bewusst nur für .topbar-2row (den Editor) — .topbar wird unverändert auch von public.html/den übrigen Seiten mit ihrer schlankeren, einzeiligen Kopfzeile genutzt und soll davon unberührt bleiben. Auf schmalen Fenstern/Mobilgeräten (siehe @media weiter unten) wieder ein einfacher Flex-Stapel, da dort ohnehin nur Marke/Avatar/Hamburger-Umschalter sichtbar sind (die Werkzeugleisten selbst werden zum Dropdown). */ .topbar.topbar-2row{ display:grid; grid-template-columns:minmax(var(--panel-width),max-content) minmax(0,1fr) auto; align-items:center; column-gap:16px; row-gap:8px; } .topbar.topbar-2row .topbar-row{display:contents;} /* align-self:start statt der geerbten vertikalen Zentrierung — Zeile 1 kann höher werden, als Marke/Avatar selbst brauchen (wenn die Werkzeugleiste bei schmalen Fenstern intern umbricht, siehe .topbar-actions unten); Marke und Avatar sollen dabei oben in der Zeile "kleben" bleiben, statt mit nach unten in die Mitte zu rutschen. */ .topbar.topbar-2row .brand{grid-row:1;grid-column:1;min-width:0;align-self:start;padding-top:3px;} .topbar.topbar-2row .topbar-row:not(.topbar-row-secondary) .topbar-actions{grid-row:1;grid-column:2;min-width:0;} .topbar.topbar-2row .avatar{grid-row:1;grid-column:3;align-self:start;} .topbar.topbar-2row .topbar-row-secondary .topbar-actions{grid-row:2;grid-column:2;min-width:0;} .topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} /* Sprache/Hell-Dunkel/Einstellungen/Hilfe im Editor: als Gruppe ans rechte Ende der Zeile, direkt links vom Profil-Icon (margin-left:auto schiebt sie auch nach einem Umbruch rechtsbündig). */ .topbar-end{display:flex;align-items:center;gap:8px;margin-left:auto;} .btn{ background:#1c2c5c; color:#fff; border:1px solid #2b3d75; border-radius:8px; padding:7px 12px; font-size:13px; text-decoration:none; /* .btn wird auch als genutzt (Topbar-Navigation) */ display:inline-block; } .btn:hover{background:#25397a;} .btn-pill{border-radius:999px;} .btn-small{padding:4px 10px;font-size:12px;} .save-status{font-size:12px;color:#9fd8a6;padding:0 4px;} .save-status.saving{color:#f0c264;} .divider{width:1px;height:22px;background:#2b3d75;margin:0 4px;} /* .status-row/.status-item/.status-badge (z. B. "aktiv"/"abgelaufen" bei Freigabe-Links, siehe share-dialog.js/dashboard.js) — hierher (statt pages.css) verschoben, weil auch der Editor (index.html, lädt nur diese Datei) sie braucht; vorher dort komplett unstilisiert (kein Hintergrund/ keine Farbe/keine Abstände), siehe Teilen-Dialog. */ .status-row{display:flex;flex-direction:column;gap:10px;font-size:12.5px;} .status-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--bg-canvas);border-radius:8px;} .status-badge{padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;} .status-badge.ok{background:#e3f6e6;color:#1e7d34;} .status-badge.warn{background:#fdf1de;color:#a15c00;} [data-theme="dark"] .status-badge.ok{background:#123822;color:#7ee0a0;} [data-theme="dark"] .status-badge.warn{background:#3a2c10;color:#f0c264;} .lang-switch{display:flex;border:1px solid #2b3d75;border-radius:8px;overflow:hidden;} .lang-btn{background:transparent;color:#b7c0dd;border:none;padding:6px 10px;font-size:12px;} .lang-btn.active{background:var(--accent);color:#1b2440;font-weight:600;} .avatar{ width:32px;height:32px;border-radius:999px;background:var(--accent);flex:0 0 auto; color:#1b2440;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:12px; } /* Hamburger-Umschalter für die Topleiste — per Default unsichtbar (rein CSS-getrieben ab welcher Breite er auftaucht, siehe @media unten); das Auf-/Zuklappen selbst übernimmt js/topbar-menu.js, seitenübergreifend. */ .topbar-menu-toggle{ display:none;background:transparent;border:1px solid #2b3d75;border-radius:8px; width:38px;height:38px;font-size:17px;color:#fff;cursor:pointer;flex:0 0 auto; align-items:center;justify-content:center; } /* ---------- Topbar: schmale Fenster/Mobilgeräte ---------- Ab hier reicht ein einfaches Umbrechen (flex-wrap, siehe .topbar-actions oben) nicht mehr aus — zu viele Buttons für auch nur zwei/drei Zeilen. Die Aktionen klappen stattdessen in ein Dropdown unterhalb der Kopfzeile, aufgerufen über einen Hamburger-Umschalter neben der Marke. */ @media (max-width:760px){ /* Aufgeklappt: Logo, Profil und Umschalter bleiben oben in einer Zeile, darunter stehen ALLE Buttons (beide Editor-Zeilen) in einem einzigen Fluss nebeneinander und rücken erst in die nächste Zeile, wenn eine Zeile voll ist. Technik: Die Kopfzeile wird ein umbrechender Flex- Container, die Zeilen-/Gruppen-Wrapper (.topbar-row, .topbar-actions, .topbar-end, .tool-group) per display:contents transparent — dadurch werden die Buttons selbst zu Geschwistern und brechen gemeinsam um. Früher lagen die Aktionen als eigene Spalte zwischen Logo und Profil und haben beide Kreise gestaucht; die Klasse .menu-open setzt topbar-menu.js auf die Kopfzeile. */ .topbar-menu-toggle{display:flex;} .topbar, .topbar.topbar-2row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:8px;row-gap:8px;} .topbar .topbar-row{display:contents;} .topbar .brand{order:-4;flex:1 1 auto;min-width:0;padding-top:0;} .topbar .avatar{order:-3;margin-left:auto;} .topbar .topbar-menu-toggle{order:-2;} .topbar-actions{display:none;} .topbar.menu-open .topbar-actions, .topbar.menu-open .topbar-end, .topbar.menu-open .tool-group{display:contents;} /* Trennlinie zwischen Kopfzeile und Buttons, erzwingt zugleich den Zeilenumbruch nach dem Umschalter. */ .topbar.menu-open::after{content:"";order:-1;flex:0 0 100%;height:0;border-top:1px solid #2b3d75;margin:2px 0;} .topbar-actions .divider{display:none;} /* senkrechter Trenner ergibt zwischen Kacheln keinen Sinn */ } /* ---------- Touch-Bedienung ---------- Größere Tippflächen für alle interaktiven Steuerelemente der Kopfzeile/ Werkzeugleiste auf Geräten mit grobem Zeigegerät (Finger statt Maus) — unabhängig von der Fensterbreite, ein Tablet im Querformat ist z. B. durchaus breiter als 760px, aber trotzdem Touch-bedient. 44px orientiert sich an der gängigen Mindestgröße für Tippziele (Apple HIG/Material Design). */ @media (pointer:coarse){ .btn, .tool-btn, .view-btn, .lang-btn, .panel-collapse, .topbar-menu-toggle, .widget-collapse-btn, .widget-drag-handle{ min-height:40px; } .btn, .tool-btn{padding-top:10px;padding-bottom:10px;} .avatar{width:38px;height:38px;} .widget-resize-handle{width:26px;height:26px;} } /* Sämtliche per Finger/Maus per Pointer Events gezogenen Elemente (Module, Kabel-Griffe, Bereiche/Textfelder samt Resize-Ecken, die Arbeitsfläche selbst zum Verschieben/Aufziehen, Dashboard-Widgets) — ohne touch-action: none würde der Browser den ersten Finger-Zug erst einmal als Seiten- Scrollen/Pinch-Zoom deuten, bevor überhaupt ein pointermove beim eigenen JS ankommt. Siehe js/canvas.js, js/cables.js, js/areas-textfields.js, js/dashboard-widgets.js (alle inzwischen auf Pointer statt Maus-Events). */ .canvas-scroll, .node, .cable-hit, .cable-label-group, .area-box, .area-resize, .text-field-box, .tf-resize, .tf-grip, .widget-drag-handle, .widget-resize-handle{ touch-action:none; } /* ---------- Workspace layout ---------- */ .workspace{ flex:1 1 auto; display:flex; min-height:0; } /* ---------- Module panel ---------- */ .panel{ width:270px; background:var(--bg-panel); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:width .15s ease; flex:0 0 auto; } .panel.collapsed{width:44px;} .panel.collapsed .panel-body, .panel.collapsed .panel-title, .panel.collapsed .view-toggle{display:none;} .panel-header{ display:flex;align-items:center;gap:8px; padding:12px;border-bottom:1px solid var(--border); } .panel-title{font-weight:700;font-size:14px;flex:1;} .view-toggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;} .view-btn{background:var(--bg-panel);color:var(--text-muted);border:none;padding:5px 8px;font-size:11px;} .view-btn.active{background:var(--accent);color:#1b2440;font-weight:600;} .panel-collapse{background:transparent;border:1px solid var(--border);border-radius:6px;width:26px;height:26px;color:var(--text-muted);} .panel-body{padding:12px;overflow-y:auto;flex:1;} .search-input{ width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px; background:var(--bg-canvas);color:var(--text-main);font-size:13px;margin-bottom:10px; } .scope-toggle{display:flex;gap:6px;margin-bottom:12px;} .scope-btn{ flex:1;padding:6px;font-size:11px;border-radius:8px;border:1px solid var(--border); background:var(--bg-canvas);color:var(--text-muted); } .scope-btn.active{background:var(--header-bg);color:#fff;border-color:var(--header-bg);} .module-list{display:flex;flex-direction:column;gap:2px;} .module-category-body.list-view{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;} .module-category-body.grid-view{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;} .module-category-header{ display:flex;align-items:center;gap:6px;padding:6px 2px;margin-top:4px; font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase; color:var(--text-muted);cursor:pointer;user-select:none; } .module-category-header:hover{color:var(--text-main);} .module-category-header .cat-toggle{width:10px;flex:0 0 auto;font-size:10px;} .module-category-header .cat-name{flex:1;} .module-category-header .cat-count{ background:var(--bg-canvas);border:1px solid var(--border);border-radius:10px; padding:1px 7px;font-size:10.5px;font-weight:700;color:var(--text-muted); } .module-item{ border:1px solid var(--border);border-radius:8px;background:var(--bg-canvas); padding:8px 10px;font-size:12.5px;font-weight:600;cursor:grab; display:flex;align-items:center;gap:8px; } .module-item:active{cursor:grabbing;} .module-category-body.grid-view .module-item{ flex-direction:column;align-items:flex-start;justify-content:flex-end; height:74px;padding:8px;background-size:cover;background-position:center; } .module-swatch{width:14px;height:14px;border-radius:4px;flex:0 0 auto;} /* Modul-Foto/Icon (siehe module-editor-modal.js) als Kachel-Hintergrund in der "Bild"-Ansicht — Titel als abgesetztes Label, damit er über einem beliebigen Foto lesbar bleibt. */ .module-grid-label{ background:rgba(0,0,0,.6);color:#fff;padding:2px 6px;border-radius:5px; font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .legend-toggle{ margin-top:14px;width:100%;text-align:left;background:none;border:none; color:var(--text-muted);font-size:12px;font-weight:700;letter-spacing:.03em;padding:6px 0; border-top:1px solid var(--border); } .cable-legend{display:flex;flex-direction:column;gap:6px;margin-top:6px;} .cable-legend.hidden{display:none;} .legend-row{display:flex;align-items:center;gap:8px;font-size:12px;} .legend-swatch{width:20px;height:3px;border-radius:2px;} /* ---------- Canvas ---------- */ .canvas-area{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;} /* #list-panel liegt bei geschlossenem Zustand per transform:translateX(100%) knapp außerhalb dieser Box (siehe .list-panel) — ohne overflow:hidden hier vergrößerte das die Seitenbreite und ließ sich per horizontaler Scrollleiste sichtbar machen, obwohl "Listen" nicht angeklickt wurde */ .canvas-scroll{ /* --bg-canvas-custom wird nur gesetzt, wenn der Nutzer (oder global der Admin) eine eigene Hintergrundfarbe für den aktuellen Hell-/Dunkelmodus hinterlegt hat — siehe applyCanvasBgColor() in app.js; sonst greift wie bisher --bg-canvas. Punktraster als background-image, siehe Canvas.updateGridBackground() — kachelt unbegrenzt mit, kein SVG-Rand. overflow:hidden statt auto: die Fläche wird nicht mehr nativ gescrollt, sondern per CSS-Transform verschoben (siehe Canvas.applyTransform()) — dadurch keine Scrollleisten mehr und kein Rand, an den man beim Verschieben stoßen könnte (echtes endloses Canvas, panX/panY sind unbegrenzt). */ flex:1;overflow:hidden;position:relative;background-color:var(--bg-canvas-custom, var(--bg-canvas)); } .canvas-transform{ position:relative; width:4000px;height:3000px; /* wächst per JS (Canvas.updateCanvasSize) mit dem Inhalt — dient nur noch als Klickfläche/Containing-Block, nicht mehr als Scroll-Begrenzung */ transform-origin:0 0; } .area-drag-preview{border-style:solid;pointer-events:none;background:rgba(242,168,29,.12);border-color:var(--accent);z-index:5;} /* Auswahlrahmen des Mehrfachauswahl-Werkzeugs (siehe Canvas.startMarqueeDrag) — eigenständige Klasse statt .area-box, da hier kein Titel/keine Resize-Ecke gebraucht wird, nur das reine Rechteck während des Ziehens. */ .marquee-preview{position:absolute;pointer-events:none;border:1px dashed var(--accent);background:rgba(47,111,237,.1);z-index:6;} .grid-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;} /* Layer-Container selbst transparent für Maus-Events (sonst blockiert die volldeckende, unsichtbare Fläche alle darunterliegenden Layer/Ports — z. B. text-fields-layer über nodes-layer/cables-svg); nur die tatsächlich interaktiven Kind-Elemente nehmen Klicks wieder an. z-index hier ist wichtig: erst dadurch bildet jede Ebene ihren EIGENEN Stapelkontext, sodass die per Modul-Kontextmenü ("Nach vorne/hinten") gesetzten z-index-Werte einzelner .node-Elemente auf diese Ebene begrenzt bleiben — ohne eigenen Stapelkontext würde ein "nach hinten" verschobenes Modul (negativer z-index) sonst hinter das Raster (#grid-svg) rutschen. */ .nodes-layer{position:absolute;inset:0;pointer-events:none;z-index:1;} .nodes-layer > *{pointer-events:auto;} #areas-layer.nodes-layer{z-index:1;} #nodes-layer.nodes-layer{z-index:2;} #text-fields-layer.nodes-layer{z-index:4;} .canvas-toolbar{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:8px 16px;background:var(--bg-panel);border-top:1px solid var(--border); font-size:12px;color:var(--text-muted);flex-wrap:wrap; } .grid-controls{display:flex;align-items:center;gap:8px;} .grid-controls input[type=number]{ width:60px;padding:4px 6px;border:1px solid var(--border);border-radius:6px; background:var(--bg-canvas);color:var(--text-main); } .checkbox-label{display:flex;align-items:center;gap:5px;} .zoom-controls{display:flex;align-items:center;gap:8px;} .zoom-btn{ width:26px;height:26px;border-radius:6px;border:1px solid var(--border); background:var(--bg-canvas);color:var(--text-main);font-size:14px;line-height:1; } #zoom-slider{width:120px;} #zoom-label{min-width:44px;text-align:right;} /* ---------- Module node ---------- */ .node{ position:absolute; min-width:170px; background:var(--node-bg); border:1px solid var(--node-border); border-radius:6px; box-shadow:var(--shadow); user-select:none; cursor:grab; } .node.dragging{cursor:grabbing;opacity:.9;z-index:50;} .node.selected{outline:2px solid var(--accent);outline-offset:1px;} .node-io-row{display:flex;} .node-io-row.stacked{flex-direction:column;} /* Ausrichtung „Hochformat" — je Feld eine eigene volle Zeile */ .node-io-cell{ flex:1;background:var(--node-bgfarbe, var(--io-cell-bg)); border-bottom:3px solid #888; font-size:10.5px;font-weight:700;text-align:center; padding:5px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--text-main); } .node-io-row.outputs .node-io-cell{border-bottom:none;border-top:3px solid #888;} .node-io-row.stacked .node-io-cell{border-bottom:1px solid var(--border);border-left:3px solid #888;text-align:left;} .node-io-row.stacked.outputs .node-io-cell{border-top:none;border-bottom:1px solid var(--border);border-left:none;border-right:3px solid #888;text-align:right;} /* Beschriftung „Senkrecht" (Modul-Einstellung io_beschriftung, siehe node-visual.js): Name um 90° gedreht, von unten nach oben zu lesen und in der Zelle waagerecht wie senkrecht zentriert. Die Zeile wird so hoch wie der längste Name, höchstens 140 px — darüber wird mit „…" gekürzt. */ .node-io-row.io-vertikal .node-io-cell{ display:flex;align-items:center;justify-content:center; min-width:0;padding:6px 1px; } .node-io-text{ writing-mode:vertical-rl;transform:rotate(180deg); max-height:140px;line-height:1.15; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* I/O-Anordnung „Links/Rechts": Eingänge links, Ausgänge rechts, Titel mittig */ .node.io-lr{display:flex;flex-direction:row;align-items:stretch;} .node.io-lr .node-title{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;} .node-io-col{display:flex;flex-direction:column;justify-content:center;min-width:64px;} .node-io-cell-lr{ flex:0 0 auto;background:var(--node-bgfarbe, var(--io-cell-bg));color:var(--text-main); font-size:10.5px;font-weight:700;text-align:center; padding:6px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border-bottom:1px solid var(--border); } .node-io-col.inputs .node-io-cell-lr{border-right:3px solid #888;} .node-io-col.outputs .node-io-cell-lr{border-left:3px solid #888;} /* Ein-/Ausgangszeilen tragen die (meist helle) Hintergrundfarbe des Moduls selbst (--node-bgfarbe), nicht die Theme-Hintergrundfarbe — im Dunkelmodus wäre der von dort geerbte helle Text (--text-main) auf diesem hellen Untergrund praktisch unlesbar, siehe Nutzer-Feedback. */ [data-theme="dark"] .node-io-cell, [data-theme="dark"] .node-io-cell-lr{color:#1b2440;} .node-io-col .node-io-cell-lr:last-child{border-bottom:none;} .node-title{ background:var(--node-title-bg); padding:10px 8px;text-align:center; position:relative; /* Anker für .node-photo — bewusst absolut positioniert, damit die zentrierte Schrift daneben unangetastet bleibt */ } /* Titel liegt auf der (meist dunklen) Highlight-Farbe — Text bewusst fest hell statt themeabhängig, sonst unlesbar auf dunklem Hintergrund. */ .node-title .name{font-weight:700;font-size:13px;letter-spacing:.01em;color:#fff;} .node-title .type{font-size:10px;color:#c8d0ea;letter-spacing:.05em;margin-top:2px;} /* Foto/Icon des Geräts (siehe module-editor-modal.js) — kleiner Kasten rechts neben der weiterhin zentrierten Schrift, nicht als Ersatz dafür. */ .node-photo{ position:absolute;right:8px;top:50%;transform:translateY(-50%); width:28px;height:28px;border-radius:6px;object-fit:cover; border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 3px rgba(0,0,0,.3); pointer-events:none; } .node.orientation-quer{min-width:220px;} .node.orientation-hoch{min-width:130px;} /* scrollbars a bit slimmer */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--node-border);border-radius:6px;} /* ---------- S/W-Modus & Barrierefreiheits-Filter ---------- */ body[data-darstellung="sw"] .canvas-area{ filter:grayscale(1) contrast(1.05); } body[data-farbprofil="hochkontrast"] .node{ border-width:2px; } body[data-farbprofil="hochkontrast"]{ --node-border:#000; } [data-theme="dark"] body[data-farbprofil="hochkontrast"]{ --node-border:#fff; } /* ---------- Toolbar: zusätzliche Werkzeuge ---------- */ /* flex-wrap: .tool-group ist innerhalb von .topbar-actions ein einzelnes Flex-Item — ohne eigenes Umbrechen wurde bei bestimmten Fensterbreiten nur die GANZE Gruppe als Block auf eine neue Zeile geschoben (oder, wenn kein Platz mehr blieb, über den Rand hinaus abgeschnitten, z. B. das "Wegpunkte"-Label). Jetzt bricht die Gruppe intern um wie .topbar-actions selbst. */ .tool-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:8px;} .tool-btn{ background:var(--bg-canvas);color:var(--text-muted);border:1px solid var(--border); border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px; } .tool-btn.active{background:var(--accent);color:#1b2440;border-color:var(--accent);} .tool-btn:hover{filter:brightness(0.97);} /* Pill-Schalter "Wegpunkte" — blendet nur die Greifpunkte an Kabelecken ein/aus (siehe cables.js, Cables.waypointsVisible); die Kabelführung selbst bleibt in beiden Zuständen unverändert. */ .wp-switch{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;margin-left:2px;} .wp-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} .wp-switch-track{position:relative;width:34px;height:18px;background:#5a6382;border-radius:999px;flex:none;transition:background .15s ease;} .wp-switch input:checked + .wp-switch-track{background:var(--accent);} .wp-switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:left .15s ease;} .wp-switch input:checked + .wp-switch-track .wp-switch-thumb{left:18px;} .wp-switch-label{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;} .wp-switch input:focus-visible + .wp-switch-track{outline:2px solid var(--accent);outline-offset:2px;} /* ---------- Modals (Modul-Editor, Teilen, Import, Export) ---------- Design dieser Popup-Fenster (und des Kontextmenüs weiter unten) an das Projekt „Neue Webseite" (live-stream.hamburg) angeglichen: Marine-Blau + Gold-Akzent, 6px-Radius, gleiche Schriftfamilie — siehe dort shared.css/ page-builder.css (--navy, --gold, --radius:6px). Über lokale Custom-Property-Overrides auf .modal-overlay bleibt der Rest der App (Topbar, Dashboard, Editor-Werkzeuge) bewusst unverändert. */ .modal-overlay{ position:fixed;inset:0;background:rgba(7,19,53,.6); display:flex;align-items:flex-start;justify-content:center; padding:40px 16px;overflow-y:auto;z-index:200; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'; --accent:#F2A81D; --accent-hover:#FFBB3D; --nw-radius:6px; } .modal-overlay.hidden{display:none;} .modal{ background:var(--bg-panel);border-radius:var(--nw-radius);max-width:920px;width:100%; box-shadow:0 20px 50px rgba(7,19,53,.35); } .modal.modal-narrow{max-width:520px;} /* Teilen-Dialog (share-dialog.js) — breiter als .modal-narrow, damit die Freigabe-Link-URL einzeilig Platz hat (kein Umbruch/Abschneiden, siehe dort) und Rolle/Ablaufdatum/Passwort-Button in der Bearbeitungszeile nebeneinander passen, ohne umzubrechen. */ .modal.modal-share{max-width:800px;} .modal-header{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:18px 22px;border-bottom:1px solid var(--border); } .modal-header h2{margin:0;font-size:18px;font-weight:800;} .modal-header p{margin:4px 0 0;font-size:12.5px;color:var(--text-muted);} .modal-close{background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;line-height:1;} .modal-body{padding:20px 22px;} .modal-footer{ display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border); } .modal-overlay .btn{border-radius:var(--nw-radius);font-weight:700;transition:filter .15s ease;} .modal-overlay .btn:hover{filter:brightness(1.04);} /* Foto-Galerie ("Fotos anzeigen" im Kontextmenü, siehe photo-gallery.js) — eigenes, dunkles Vollbild-Overlay statt der normalen .modal-Karte, damit Fotos möglichst groß und ohne störenden Rahmen zur Geltung kommen. Höherer z-index als .modal-overlay (200), damit sich die Galerie z. B. auch über den Modul-Editor legen kann. */ .photo-gallery-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300; display:flex;align-items:center;justify-content:center; } .photo-gallery-overlay .pg-image{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px;} .photo-gallery-overlay .pg-close{ position:absolute;top:16px;right:20px;background:rgba(255,255,255,.12);border:none;color:#fff; width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer; } .photo-gallery-overlay .pg-close:hover{background:rgba(255,255,255,.22);} .photo-gallery-overlay .pg-nav{ position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff; width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1; } .photo-gallery-overlay .pg-nav:hover{background:rgba(255,255,255,.22);} .photo-gallery-overlay .pg-prev{left:16px;} .photo-gallery-overlay .pg-next{right:16px;} .photo-gallery-overlay .pg-counter{ position:absolute;bottom:18px;left:50%;transform:translateX(-50%); color:#fff;font-size:12.5px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:12px; } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;} .form-field{display:flex;flex-direction:column;gap:6px;} .form-field[hidden]{display:none;} .form-field label{font-size:12px;color:var(--text-muted);font-weight:600;} .form-field input[type=text], .form-field input[type=number], .form-field input[type=password], .form-field select, .form-field textarea{ padding:8px 10px;border:1px solid var(--border);border-radius:var(--nw-radius, 8px); background:var(--bg-canvas);color:var(--text-main);font-size:13px; } .form-field.color-field{flex-direction:row;align-items:center;gap:8px;} .color-swatch-btn{ width:34px;height:34px;border:1px solid var(--border);border-radius:var(--nw-radius, 8px); padding:0;cursor:pointer; } /* Segmentierter Umschalter (z. B. Fehler/Featurewunsch im Melden-Dialog, Hell/Dunkel/S/W in den Einstellungen) — bewusst hier statt in pages.css: wird auch aus feedback-dialog.js heraus gebraucht, das auch im Editor (index.html, lädt nur style.css, nicht pages.css) verfügbar sein muss. */ .seg-control{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;} .seg-control button{padding:6px 12px;font-size:12px;background:var(--bg-canvas);color:var(--text-muted);border:none;border-right:1px solid var(--border);} .seg-control button:last-child{border-right:none;} .seg-control button.active{background:var(--accent);color:#1b2440;font-weight:700;} .io-editor-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:14px;} .io-editor-col h4{font-size:12px;color:var(--text-muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em;} .io-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;} .io-row input[type=text]{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-canvas);color:var(--text-main);font-size:12px;} .io-row select{padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--bg-canvas);color:var(--text-main);font-size:12px;} /* Auswahlfeld mit Suche (js/search-select.js) — gleiche Optik wie das