/* Sidebar (Content-Level 2) — 1:1 aus ERP mage-components.css (MageSidebar + MageOverlay). */ /* ── MageSidebar (rechts einschiebendes Panel) ── */ .mage-sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--scrim); z-index:var(--z-overlay); opacity: 0; transition: opacity var(--dur); } /* Abdunklung als Navy-Schleier mit leichter Unschärfe (Florian 2026-09-11, Vorschlag „Best-of"). */ .mage-sidebar-overlay.active { display: block; opacity: 1; background: color-mix(in srgb, color-mix(in srgb, var(--info) 22%, var(--grey-900)) 45%, transparent); backdrop-filter: blur(3px); } /* Breite systemweit wie ERP-MageSidebar (Default 72vw), auf grossen Screens gedeckelt. Ein-/Ausfahren via transform → breitenunabhängig (kein an die Breite gekoppeltes right:-Xpx). */ .mage-sidebar-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(72vw, 900px); max-width: 96vw; background: var(--surface); box-shadow:var(--shadow-md); z-index:var(--z-drawer); /* Einfahren mit leichtem Nachfedern (Überschwinger in der Kurve). */ transform: translateX(100%); transition: transform calc(var(--dur-slow) * 1.8) cubic-bezier(.22, 1.2, .36, 1); display: flex; flex-direction: column; overflow: hidden; } /* Die Abschnitte kommen nacheinander herein, sobald die Sidebar offen ist: der Abschnitt blendet NUR ein (opacity), gleiten tut allein sein KOPF. Grund: ein transform auf dem Abschnitt machte ihn zum containing block für position:fixed — das Picker-Panel im Abschnittskörper stand dann versetzt und schob den Inhalt seitlich weg (E2E „dropdown-panel in der sidebar"). Füllung nur rückwärts, damit nach dem Einblenden kein Animationswert hängen bleibt. */ /* Der Auftritt des INHALTS liegt seit 13.09.2026 beim animations-Modul (Welle von links nach rechts, beim Schliessen rückwärts, Reihenfolge aus der gemessenen Lage). Die frühere Staffelung über :nth-child stand hier — zwei Animationen auf derselben Fläche überlagern sich sichtbar, deshalb ist sie entfallen und NICHT zusätzlich zu setzen. Das Panel selbst fährt weiter hier ein. */ @media (prefers-reduced-motion: reduce) { .mage-sidebar-panel { transition: none; } } /* WICHTIG: im Ruhezustand `none`, NICHT translateX(0) — jeder transform ≠ none macht das Panel zum containing block für position:fixed. Dropdown-Panels (Picker) im Innern wären dann panel-relativ statt viewport-bezogen und stehen um die Sidebar-Position verschoben „im Nirvana". Die Transition bleibt: none interpoliert als Identitäts-Transform. */ .mage-sidebar-panel.open { transform: none; } /* BREITE Variante (Arbeits-Sidebar: Ticket, Mail-Detail …) — ERP-MageSidebar-Breite 72vw OHNE Deckel. Hier arbeitet man mit zwei Spalten, statt nur nachzuschlagen. Modul sagt es beim Öffnen: opts.wide. */ .mage-sidebar-panel.mage-sidebar-wide { width: 72vw; max-width: 96vw; } /* Kopf auf der RUHIGEN FLÄCHE --chrome mit dunkler Schrift — dieselbe Fläche wie die Fenster-Rail (Florian 13.09.2026: „linke sidebar in allen windows: background f6f6f7, genauso wie jeder sidebar header … typo farbe entsprechend anpassen, weil man sonst die texte nicht mehr sieht"). Vorher Navy mit heller Schrift — deshalb müssen Titel, Kennung, Symbol und die Kopf-Knöpfe hier alle mitwandern; jede Regel, die noch --surface als Schriftfarbe trug, wäre jetzt weiss auf weiss. */ .mage-sidebar-header { /* wie in der Fenster-Leiste: auf dieser Fläche ist --muted eine Stufe kräftiger (2,35 → 4,8) */ --muted: var(--grey-500); display: flex; align-items: center; justify-content: space-between; padding:var(--sp-7) var(--sp-8); flex-shrink: 0; background: var(--chrome); border-bottom: 1px solid var(--border); } .mage-sidebar-header .cc-sheet-title h2 { color: var(--ink); } .mage-sidebar-header .txt-mono { color: var(--grey-500); } /* --muted trüge auf --chrome nur Kontrast 2,35 */ .mage-sidebar-header .cc-sheet-ico:not(.cc-sheet-ico-media) { background: color-mix(in srgb, var(--ink) 8%, transparent); } /* ── LAYER 2: eine zweite, schmalere Sidebar ÜBER der aktiven (Zeiterfassung, Verschieben, Protokolle). Der Rest der Seite — auch die erste Sidebar — wird abgedunkelt; Klick daneben schliesst nur Layer 2. */ .mage-sidebar-overlay-2 { z-index: var(--z-modal); } .mage-sidebar-panel.mage-sidebar-layer2 { z-index: var(--z-popover); width: min(60vw, var(--sz-820)); max-width: 96vw; } /* Breite per Kopf-Umschalter (lightbox CC.ovsize: klein/mittel/gross/voll), gemerkt je Art — Vorgabe „mittel". */ .mage-sidebar-panel.mage-sidebar-layer2.cc-ov-s { width: min(40vw, var(--sz-640)); } .mage-sidebar-panel.mage-sidebar-layer2.cc-ov-m { width: min(60vw, var(--sz-820)); } .mage-sidebar-panel.mage-sidebar-layer2.cc-ov-l { width: 80vw; } .mage-sidebar-panel.mage-sidebar-layer2.cc-ov-full { width: 96vw; } .mage-sidebar-header .cc-ov-sizes { margin-left: var(--sp-3); } .mage-sidebar-header .cc-ov-sizes .ac-btn-action { color: var(--muted); } .mage-sidebar-header .cc-ov-sizes .ac-btn-action:hover, .mage-sidebar-header .cc-ov-sizes .ac-btn-action[aria-pressed="true"] { color: var(--ink); } /* Schubfach-Optik für modul-eigene Einschub-Rahmen (z.B. Termin-Panel des Kalenders), die NICHT das Sidebar-Verhalten wollen: nur Aussehen — Abdunklung bzw. Fläche + Schatten; Lage/Breite/Übergang bleiben beim Modul. */ .cc-drawer-scrim { background: var(--scrim); } .cc-drawer-surface { background: var(--surface); box-shadow: var(--shadow-lg); } /* GOLDENE REGEL G2 (Florian 12.09.2026): JEDE Sidebar hat einen FUSS — sticky, immer sichtbar, ganz unten. Dort stehen die Knöpfe, die für den ganzen Datensatz gelten („Kontakt löschen", „Monitoring entfernen", „Stufe löschen", „Öffnen", „Deaktivieren"). Genau diese Knöpfe machten den KOPF vorher zweizeilig; sidebar.js (liftHead) hebt die Aktionszeile des Datenblatts hierher. Er liegt ausserhalb des scrollenden Bodys und bleibt damit von sich aus stehen. */ .mage-sidebar-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-5) var(--sp-8); border-top: 1px solid var(--grey-200); background: var(--grey-50); flex-shrink: 0; flex-wrap: wrap; } .mage-sidebar-foot:empty { display: none; } /* Die hochgehobene Aktionszeile bringt ihre eigenen Abstände mit — im Fuss trägt sie keine. */ .mage-sidebar-foot .cc-sheet-actions { margin: 0; padding: 0; border-top: 0; width: 100%; justify-content: flex-end; } /* REICHER KOPF: das Datenblatt (Design::sheet) liefert Icon/Titel/Kennung/Plaketten/Einleitung/Aktionen — die Sidebar hebt den Block hierher (sidebar.js liftHead). Er steht fest, der Inhalt scrollt darunter. */ /* Titelzeile kompakt (Icon 28 px, Titel h4-Grösse, eine Zeile); darunter — wenn das Datenblatt sie mitbringt — die Einleitung (z.B. „Kunde: …") und die Aktionen. Sie gehören in den Kopf, nicht in einen Tab „Allgemein". */ .mage-sidebar-sheethead { flex: 1 1 auto; min-width: 0; display: none; } .mage-sidebar-header-rich { align-items: center; } .mage-sidebar-header-rich .mage-sidebar-sheethead { display: block; } .mage-sidebar-header-rich h4 { display: none; } .mage-sidebar-header-rich .mage-sidebar-header-act { flex: 0 1 auto; align-self: center; } .mage-sidebar-header-rich .mage-sidebar-close { align-self: center; } .mage-sidebar-sheethead .cc-sheet-head { margin: 0; align-items: center; gap: var(--sp-4); } .mage-sidebar-sheethead .cc-sheet-ico { flex-basis: var(--sz-28); width: var(--sz-28); height: var(--sz-28); font-size: var(--fs-md); } .mage-sidebar-sheethead .cc-sheet-title { min-height: var(--sz-28); flex-wrap: nowrap; } /* GOLDENE REGEL G1 (Florian 12.09.2026): der Sidebar-Kopf ist IMMER EINZEILIG — Symbol, Titel, Kennung, Plaketten, Schliessen. Sonst nichts. Die Einleitung wird deshalb hier NICHT mehr gezeigt; sie war die zweite Zeile. Ihr Text bleibt erreichbar: Design::sheetHead hängt ihn als Zeigetext an den Titel. Die Aktionen stehen gar nicht mehr im Kopf — sidebar.js hebt sie in den FUSS (G2). */ .mage-sidebar-sheethead .cc-sheet-intro { display: none; } /* Der Titel bleibt EINE Zeile: lange Titel werden gekürzt, der volle Text steht im Zeigetext (nur wenn gekürzt). */ .mage-sidebar-sheethead .cc-sheet-title h2 { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mage-sidebar-sheethead .cc-sheet-title > .txt-mono, .mage-sidebar-sheethead .cc-sheet-badges { flex: 0 0 auto; } .mage-sidebar-sheethead .cc-sheet-title h2 { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.3; } /* Der Datenblatt-Körper dockt randlos an den Kopf an (der Kopf steckt jetzt im Header, nicht mehr im Body). */ .mage-sidebar-header h4 { margin: 0; font-size:var(--fs-md); font-weight:var(--fw-bold); color: var(--ink); white-space: nowrap; } /* Titel in Mono (opts.mono) — wenn der Titel eine Kennung ist (z.B. die Ticketnummer). */ .mage-sidebar-mono .mage-sidebar-header h4 { font-family: var(--mono); } /* Aktionsfläche im Kopf (wie ERP setHeaderAction): Modul-Steuerung zwischen Titel und Schliessen — Kategorie/Eskalation/Termin … Leer = unsichtbar, damit der Titel wie gewohnt links steht. */ .mage-sidebar-header-act { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; margin: 0 var(--sp-5); } .mage-sidebar-header-act:empty { display: none; } .mage-sidebar-close { /* --grey-500 statt --grey-400/--muted: auf der hellen Kopffläche (--chrome) trägt --muted nur Kontrast 2,35 — das × war kaum noch zu sehen. */ background: none; border: none; font-size:var(--fs-xl); color: var(--grey-500); cursor: pointer; width:var(--sz-32); height:var(--sz-32); display: flex; align-items: center; justify-content: center; border-radius:var(--radius); line-height: 1; transition: transform var(--dur) ease, background var(--dur), color var(--dur); } /* Schliessen: beim Zeigen orange und eine Vierteldrehung. */ .mage-sidebar-close:hover { background: var(--o); color: var(--surface); transform: rotate(90deg); } .mage-sidebar-save { background: var(--o); color: var(--surface); border: none; border-radius:var(--radius); padding:var(--sp-2) var(--sp-7); font-size:var(--fs-sm); font-weight:var(--fw-bold); cursor: pointer; transition: background var(--dur-fast); white-space: nowrap; line-height: 1; } .mage-sidebar-save:hover { background: var(--o-h); } .mage-sidebar-save:disabled { opacity:var(--op-half); cursor: default; } /* overflow-x hidden: ein zu breites Kind (Dropdown-Panel, lange Tabelle) darf den Body NIE seitlich aufscrollen — sonst schiebt der Fokus-Sprung des Browsers den ganzen Inhalt nach links weg. */ .mage-sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-8); } /* GOLDENE REGEL G4: zwischen Kopf und erstem Akkordeon steht NIE weisser Raum. Ob der Inhalt oben anzudocken hat, MISST sidebar.js (flushTop) am ersten sichtbaren Kind und setzt diese Klasse — die alte :first-child/:empty-Kette darunter riss, sobald ein Modul irgendetwas davor rendert. */ .mage-sidebar-body.mage-sidebar-flushtop { padding-top: 0; } .mage-sidebar-body.mage-sidebar-flushtop > .cc-sheet > .cc-sheet-body, .mage-sidebar-body.mage-sidebar-flushtop > .acctab, .mage-sidebar-body.mage-sidebar-flushtop > .accordion-section { margin-top: 0; } /* Die frühere :first-child/:empty-Kette, die das erste Akkordeon per Negativ-Rand an den Kopf zog, ist ERSETZT durch die gemessene Klasse oben (sidebar.js flushTop). Sie riss, sobald ein Modul irgendetwas vor das Akkordeon rendert, und zog zusammen mit dem neuen padding-top:0 sogar 20 px zu weit. */ /* Zusatzinhalt eines Datenblatts (Design::sheet 'general') über den Abschnitten — mit Luft zum Akkordeon, aber nur wenn wirklich etwas SICHTBARES drinsteht. „cc-sheet-general-leer" setzt sidebar.js, wenn dort nach dem Hochheben des Kopfes nur noch Vorlagen (