/* ============================================================ flex-admin · eigenes Design-System (Blaupause: Limitless, neu gebaut) Themes: nocturne (Standard) · daylight · terminal Live-Regler überschreiben einzelne Tokens auf . ============================================================ */ *,*::before,*::after{box-sizing:border-box} :root{ /* ——— Regler-Tokens (nocturne) ——— */ --olive-hue:64; --olive-sat:17%; --ground-l:12.5%; --accent:#4a86ff; --accent2:#cf6bb8; --good:#37d6b0; --warn:#f7b23e; --crit:#f04438; --info:#5aa9ff; --space:1; --radius:13px; --depth:1; --glow:1; --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* ——— abgeleitete Flächen (dunkel-Formel) ——— */ --bg:hsl(var(--olive-hue) var(--olive-sat) var(--ground-l)); --panel:hsl(var(--olive-hue) calc(var(--olive-sat) - 1%) calc(var(--ground-l) + 4.5%)); --panel-2:hsl(var(--olive-hue) calc(var(--olive-sat) - 2%) calc(var(--ground-l) + 8%)); --panel-3:hsl(var(--olive-hue) calc(var(--olive-sat) - 3%) calc(var(--ground-l) + 12%)); --line:hsl(var(--olive-hue) calc(var(--olive-sat) - 4%) calc(var(--ground-l) + 15%)); --line-soft:hsl(var(--olive-hue) calc(var(--olive-sat) - 5%) calc(var(--ground-l) + 10%)); --text:hsl(48 22% 94%); --muted:hsl(56 12% 64%); --dim:hsl(58 9% 48%); --on-accent:#fff; --pad:calc(20px * var(--space)); --pad-sm:calc(13px * var(--space)); --gap:calc(16px * var(--space)); --gap-lg:calc(20px * var(--space)); --shadow:0 calc(2px*var(--depth)) calc(6px*var(--depth)) rgba(0,0,0,calc(.16*var(--depth))), 0 calc(10px*var(--depth)) calc(34px*var(--depth)) rgba(0,0,0,calc(.24*var(--depth))); --neon:0 0 calc(18px*var(--glow)) color-mix(in srgb, var(--accent) calc(30%*var(--glow)), transparent); } /* ——— DAYLIGHT (hell) ——— */ :root[data-theme="daylight"]{ --olive-hue:60; --olive-sat:24%; --ground-l:95%; --accent:#2f6bf0; --accent2:#b8479e; --good:#12a683; --warn:#c07d10; --crit:#dd4529; --info:#2f6bf0; --glow:0; --on-accent:#fff; --bg:hsl(56 30% 95%); --panel:hsl(56 42% 99%); --panel-2:hsl(56 24% 96%); --panel-3:hsl(56 20% 93%); --line:hsl(56 16% 83%); --line-soft:hsl(56 18% 89%); --text:hsl(70 20% 14%); --muted:hsl(64 10% 40%); --dim:hsl(60 8% 56%); --shadow:0 calc(1px*var(--depth)) calc(2px*var(--depth)) rgba(60,58,20,calc(.05*var(--depth))), 0 calc(9px*var(--depth)) calc(26px*var(--depth)) rgba(60,55,20,calc(.09*var(--depth))); } /* ——— TERMINAL (maximal, mono, scharf) ——— */ :root[data-theme="terminal"]{ --olive-hue:66; --olive-sat:20%; --ground-l:9%; --accent:#25d6e6; --accent2:#e05bd0; --good:#8ce99a; --warn:#ffb84d; --crit:#ff5c5c; --info:#25d6e6; --radius:3px; --depth:.6; --glow:1.7; --font-body:var(--font-mono); --shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent), 0 calc(8px*var(--depth)) calc(26px*var(--depth)) rgba(0,0,0,calc(.5*var(--depth))); } /* ============================ Base ============================ */ html,body{margin:0} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;min-height:100vh} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: linear-gradient(color-mix(in srgb,var(--line) 40%,transparent) 1px,transparent 1px) 0 0/100% 44px, linear-gradient(90deg,color-mix(in srgb,var(--line) 40%,transparent) 1px,transparent 1px) 0 0/44px 100%, radial-gradient(1200px 600px at 82% -12%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%); opacity:.5} :root[data-theme="terminal"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.4;mix-blend-mode:multiply} a{color:var(--accent);text-decoration:none} h1,h2,h3,h4{margin:0} ::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* scrollbar */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--line-soft)} /* ============================ App-Layout ============================ */ .app{position:relative;z-index:1;display:grid;grid-template-columns:230px 1fr;min-height:100vh} .app.collapsed{grid-template-columns:66px 1fr} /* Sidebar */ .side{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 82%,#000)); border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;padding:14px 12px; position:sticky;top:0;height:100vh;overflow-y:auto} .side-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 14px;margin-bottom:6px} .brandmark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none; background:color-mix(in srgb,var(--accent) 20%,var(--panel));color:var(--accent); font-family:var(--font-mono);font-weight:700;font-size:15px; box-shadow:var(--neon);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .side-brand b{font-family:var(--font-body);font-size:15px;letter-spacing:.3px;white-space:nowrap} .side-brand small{display:block;font-size:10px;color:var(--dim);letter-spacing:.4px} .side-sec{font-family:var(--font-body);font-size:10px;letter-spacing:.6px;text-transform:uppercase; color:var(--dim);padding:14px 10px 6px} .nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--muted); cursor:pointer;transition:.16s;border:1px solid transparent;font-size:13.5px;white-space:nowrap} .nav-item svg{width:19px;height:19px;flex:none} .nav-item:hover{color:var(--text);background:var(--panel-2)} .nav-item.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent); border-color:color-mix(in srgb,var(--accent) 32%,transparent)} .nav-item .tag{margin-left:auto;font-family:var(--font-body);font-size:10px;padding:1px 6px;border-radius:999px; background:color-mix(in srgb,var(--crit) 22%,transparent);color:var(--crit)} .app.collapsed .side-brand b,.app.collapsed .side-brand small,.app.collapsed .side-sec, .app.collapsed .nav-item span,.app.collapsed .nav-item .tag{display:none} .app.collapsed .nav-item{justify-content:center;padding:9px!important} /* mehrstufiges Menü */ .nav-parent{cursor:pointer} .nav-caret{margin-left:auto;width:14px;height:14px;transition:.2s;color:var(--dim);flex:none} .nav-group.open > .nav-parent .nav-caret{transform:rotate(90deg)} .nav-group.open > .nav-parent{color:var(--text)} .nav-sub{overflow:hidden;max-height:0;transition:max-height .28s ease} .nav-group.open > .nav-sub{max-height:1200px} .nav-sub .nav-item{font-size:13px} .nav-sub{position:relative} .nav-sub::before{content:"";position:absolute;left:19px;top:0;bottom:6px;width:1px;background:var(--line-soft)} .app.collapsed .nav-caret,.app.collapsed .nav-sub{display:none} /* Main + Topbar */ .main{display:flex;flex-direction:column;min-width:0} .topbar{display:flex;align-items:center;gap:var(--gap);padding:11px var(--pad);border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(7px);position:sticky;top:0;z-index:30} .burger{all:unset;cursor:pointer;color:var(--muted);display:grid;place-items:center;width:34px;height:34px;border-radius:9px} .burger:hover{background:var(--panel-2);color:var(--text)} .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)} .crumb b{color:var(--text);font-weight:600} .crumb .sep{color:var(--dim)} .search{flex:1;max-width:360px;display:flex;align-items:center;gap:8px;color:var(--dim); background:var(--bg);border:1px solid var(--line-soft);border-radius:999px;padding:7px 14px;font-size:13px} .search input{all:unset;flex:1;color:var(--text)} .topbar .spring{flex:1} .search-wrap{flex:1;max-width:360px;min-width:0} .live{display:flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:11px;letter-spacing:.6px; color:var(--crit);padding:4px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--crit) 40%,transparent); background:color-mix(in srgb,var(--crit) 12%,transparent)} .live .dot{width:7px;height:7px;border-radius:50%;background:var(--crit);box-shadow:0 0 8px var(--crit);animation:pulse 1.8s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .icon-btn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:10px;display:grid;place-items:center; color:var(--muted);position:relative} .icon-btn:hover{background:var(--panel-2);color:var(--text)} .icon-btn .badge-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--crit)} .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-body); font-size:12px;background:color-mix(in srgb,var(--accent2) 22%,var(--panel));color:var(--accent2); border:1px solid color-mix(in srgb,var(--accent2) 40%,transparent)} /* ——— Dropdowns / Popups (Navbar) ——— */ .dropdown{position:relative} .dd-trigger{cursor:pointer} .dropdown-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:320px;background:var(--panel-3); border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);z-index:80;overflow:hidden; opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:.16s} .dropdown-menu.open{opacity:1;transform:none;pointer-events:auto} .dd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line-soft)} .dd-head b{font-size:14px} .dd-head .mono{font-size:11px;color:var(--dim)} .dd-scroll{max-height:344px;overflow:auto} .dd-item{display:flex;gap:11px;align-items:flex-start;padding:11px 16px;cursor:pointer;transition:.12s;border-bottom:1px solid var(--line-soft)} .dd-item:last-child{border-bottom:0} .dd-item:hover{background:var(--panel-2)} .dd-item .rel{position:relative;flex:none} .dd-item .online{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid var(--panel-3)} .dd-item .body{flex:1;min-width:0} .dd-item .body .top{display:flex;justify-content:space-between;gap:8px} .dd-item .body .top b{font-size:13.5px} .dd-item .body .top .t{font-family:var(--font-body);font-size:10px;color:var(--dim);white-space:nowrap} .dd-item .body .prev{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dd-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none} .dd-foot{padding:11px 16px;text-align:center;border-top:1px solid var(--line-soft)} .dd-foot a{font-family:var(--font-body);font-size:12px} .dd-menu a{display:flex;align-items:center;gap:11px;padding:10px 16px;color:var(--text);font-size:13.5px;cursor:pointer;transition:.12s} .dd-menu a:hover{background:var(--panel-2)} .dd-menu a svg{width:17px;height:17px;color:var(--muted);flex:none} .dd-menu a .badge{margin-left:auto} .dd-menu .div{height:1px;background:var(--line-soft);margin:6px 0} .dd-user-head{display:flex;gap:11px;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line-soft)} .dd-search-opts{padding:14px 16px;left:0;right:auto;min-width:320px} .dd-search-opts .chk{margin:4px 12px 4px 0} .content{padding:var(--pad);display:flex;flex-direction:column;gap:var(--gap-lg);max-width:1320px;width:100%} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap} .page-head h1{font-size:22px;font-weight:660;letter-spacing:-.3px} .page-head .sub{font-family:var(--font-body);font-size:12px;color:var(--muted);margin-top:4px;letter-spacing:.3px} /* ============================ Karten ============================ */ .card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--pad-sm) var(--pad); border-bottom:1px solid var(--line-soft)} .card-head h3{font-size:14px;font-weight:620} .card-head .meta{font-family:var(--font-body);font-size:11px;color:var(--muted);letter-spacing:.3px} .card-body{padding:var(--pad)} .grid{display:grid;gap:var(--gap-lg)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .g-main{grid-template-columns:1.7fr 1fr;align-items:start} .g-main2{grid-template-columns:1fr 1.4fr;align-items:start} .stack{display:flex;flex-direction:column;gap:var(--gap-lg)} .row{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap} /* 12-Spalten-Raster (für präzise Modul-Breiten) */ .grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-lg)} .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3} .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6} .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9} .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12} @media (max-width:1080px){ .grid-12 > [class*="col-"]{grid-column:span 6} } @media (max-width:640px){ .grid-12 > [class*="col-"]{grid-column:span 12} } /* ——— Karten-Layouts ——— */ .card-h{display:grid;grid-template-columns:190px 1fr;align-items:stretch;overflow:hidden} .card-h.rev{grid-template-columns:1fr 190px} .card-h .ch-media{background:var(--panel-3);display:grid;place-items:center;color:#fff;min-height:150px;overflow:hidden} .card-h .ch-media img{width:100%;height:100%;object-fit:cover;display:block} .card-split{display:grid;grid-template-columns:1fr 1fr} .card-split > *{padding:var(--pad)} .card-split > * + *{border-left:1px solid var(--line-soft)} .card-iconcol{display:grid;grid-template-columns:66px 1fr;overflow:hidden} .card-iconcol .ic{display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)} .list-group{display:flex;flex-direction:column} .list-group > *{padding:12px var(--pad);border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;transition:.12s} .list-group > *:first-child{border-top:0} .list-group > *:hover{background:var(--panel-2)} .card-foot{padding:12px var(--pad);border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between; gap:10px;font-family:var(--font-body);font-size:11.5px;color:var(--muted);flex-wrap:wrap} .stat-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr} .stat-row > *{padding:var(--pad);text-align:center} .stat-row > * + *{border-left:1px solid var(--line-soft)} .deck{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);align-items:stretch} .deck > .card{display:flex;flex-direction:column} .deck > .card > .card-body{flex:1} .masonry{columns:3;column-gap:var(--gap-lg)} .masonry > *{break-inside:avoid;margin-bottom:var(--gap-lg);display:inline-block;width:100%} .card-cover{position:relative;min-height:210px;display:flex;align-items:flex-end;overflow:hidden} .card-cover .bg{position:absolute;inset:0} .card-cover .bg img{width:100%;height:100%;object-fit:cover;display:block} .card-cover .txt{position:relative;padding:var(--pad);width:100%;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))} @media (max-width:860px){ .card-h,.card-h.rev{grid-template-columns:1fr} .card-split{grid-template-columns:1fr} .card-split > * + *{border-left:0;border-top:1px solid var(--line-soft)} .deck{grid-template-columns:1fr} .masonry{columns:1} .stat-row{grid-auto-flow:row} .stat-row > * + *{border-left:0;border-top:1px solid var(--line-soft)} } /* Karten-Kopfzeile: Werkzeugleiste rechts */ .card-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap} .card-head .tabs{border:0;margin-left:auto;gap:0} .card-head .tab{padding:6px 12px;font-size:13px;border-bottom-width:2px} .card-head .search{padding:5px 11px;max-width:210px;font-size:12.5px} .card-head .seg button{padding:4px 11px} .card-link{font-family:var(--font-body);font-size:11.5px;color:var(--accent);display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .card-link:hover{text-decoration:underline} .card-tools .icon-btn{width:32px;height:32px} /* Aufklappbare Karte */ .card.collapsible > .card-head{cursor:pointer;user-select:none} .card-caret{transition:.22s;color:var(--muted);display:inline-flex;flex:none} .card.collapsed .card-caret{transform:rotate(-90deg)} .card.collapsible > .card-body,.card.collapsible > .tbl-wrap{overflow:hidden;transition:max-height .3s ease,padding .3s ease;max-height:900px} .card.collapsed > .card-body,.card.collapsed > .tbl-wrap{max-height:0;padding-top:0;padding-bottom:0} .card.collapsed > .card-head{border-bottom-color:transparent} /* Karten-Varianten */ .card-accent{position:relative;overflow:hidden} .card-accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)} .card-accent.is-ok::before{background:var(--good)}.card-accent.is-warn::before{background:var(--warn)}.card-accent.is-crit::before{background:var(--crit)} .card-glow{border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:var(--shadow),0 0 28px color-mix(in srgb,var(--accent) 20%,transparent)} .card-gradient{position:relative;border-color:transparent} .card-gradient::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .card-ribbon{position:relative;overflow:hidden} /* 45°-Eckband: Mitte liegt bei 25px/25px von der Ecke → symmetrischer Beschnitt */ .card-ribbon .ribbon{position:absolute;top:14px;right:-30px;width:110px;padding:4px 0;text-align:center; transform:rotate(45deg);transform-origin:center;background:var(--accent);color:var(--on-accent); font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:1px;line-height:1.5;z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.28)} .card-media .media{height:132px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 40%,var(--panel-3)),color-mix(in srgb,var(--accent2) 34%,var(--panel-3)))} .card.dense .card-body{padding:12px 14px} .card-overlay{position:relative;overflow:hidden} .card-overlay .ov{position:absolute;inset:auto 0 0 0;padding:12px 14px;display:flex;gap:8px;justify-content:flex-end; background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:.18s} .card-overlay:hover .ov{opacity:1} /* ============================ KPI ============================ */ .tile{padding:var(--pad-sm) var(--pad);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden} .tile .lbl{font-family:var(--font-body);font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase} .tile .val{font-size:26px;font-weight:680;letter-spacing:-.5px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px} .tile .val small{font-size:13px;font-weight:600;color:var(--muted)} .delta{font-family:var(--font-body);font-size:12px;display:inline-flex;align-items:center;gap:3px} .delta.up{color:var(--good)} .delta.down{color:var(--crit)} .tile.alert .val{color:var(--crit)} .tile .spark{position:absolute;right:10px;bottom:8px;width:92px;height:38px;opacity:.9} .tile-badge{position:absolute;top:12px;right:12px;font-family:var(--font-body);font-size:10px;padding:2px 7px; border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);letter-spacing:.4px} /* ============================ Buttons ============================ */ .btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px; font-family:var(--font-body);font-size:13.5px;font-weight:560;padding:9px 15px;border-radius:calc(var(--radius) - 3px); border:1px solid var(--line);color:var(--text);background:var(--panel-2);transition:.15s;white-space:nowrap;line-height:1} .btn:hover{border-color:var(--line-soft);background:var(--panel-3)} .btn svg{width:16px;height:16px} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--neon)} .btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#fff);border-color:transparent} .btn-ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn-ghost:hover{background:var(--panel-2);color:var(--text)} .btn-outline{background:transparent;border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)} .btn-outline:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)} .btn-danger{background:color-mix(in srgb,var(--crit) 90%,#000);border-color:transparent;color:#fff} .btn-danger:hover{background:var(--crit)} .btn-success{background:color-mix(in srgb,var(--good) 90%,#000);border-color:transparent;color:#04231c} .btn-sm{padding:6px 11px;font-size:12.5px} .btn-lg{padding:12px 20px;font-size:15px} .btn-icon{padding:8px;width:auto} .btn[disabled]{opacity:.5;cursor:not-allowed} .btn-group{display:inline-flex} .btn-group .btn{border-radius:0;margin-left:-1px} .btn-group .btn:first-child{border-radius:calc(var(--radius) - 3px) 0 0 calc(var(--radius) - 3px);margin-left:0} .btn-group .btn:last-child{border-radius:0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0} /* Segmented */ .seg{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:999px;padding:3px} .seg button{all:unset;font-family:var(--font-body);font-size:12px;color:var(--muted);padding:5px 13px;border-radius:999px;cursor:pointer} .seg button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} /* ============================ Badges / Pills ============================ */ .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:11px;padding:2px 8px; border-radius:6px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line-soft)} .pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:11px;padding:3px 10px; border-radius:999px;white-space:nowrap;border:1px solid transparent} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .pill.ok,.pill.paid{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent);border-color:color-mix(in srgb,var(--good) 32%,transparent)} .pill.info,.pill.ship{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,transparent)} .pill.warn,.pill.open{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent);border-color:color-mix(in srgb,var(--warn) 32%,transparent)} .pill.crit{color:var(--crit);background:color-mix(in srgb,var(--crit) 13%,transparent);border-color:color-mix(in srgb,var(--crit) 32%,transparent)} .pill.void{color:var(--dim);background:color-mix(in srgb,var(--dim) 12%,transparent);border-color:var(--line)} .pill.plain::before{display:none} /* ============================ Forms ============================ */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--gap)} .field:last-child{margin-bottom:0} label,.lbl{font-family:var(--font-body);font-size:11px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase} .field label{display:flex;align-items:center;gap:6px;justify-content:space-between} .inp,input[type=text].inp,input[type=email].inp,input[type=number].inp,textarea.inp,select.inp{ all:unset;box-sizing:border-box;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px; padding:9px 12px;color:var(--text);font-family:var(--font-body);font-size:13.5px;transition:.15s} textarea.inp{min-height:90px;line-height:1.55} .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .inp::placeholder{color:var(--dim)} select.inp{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px} .field.locked .inp{color:var(--muted);background:color-mix(in srgb,var(--line-soft) 40%,transparent);border-style:dashed;cursor:not-allowed} .lockhint{font-family:var(--font-body);font-size:10px;color:var(--dim);display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0} .lockhint svg{width:12px;height:12px} .hintline{font-family:var(--font-body);font-size:11px;color:var(--dim);display:flex;align-items:center;gap:7px} .hintline svg{width:13px;height:13px;color:var(--muted)} /* Toggle */ .switch{position:relative;display:inline-block;width:40px;height:22px;flex:none;cursor:pointer} .switch input{display:none} .switch i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.2s} .switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s} .switch input:checked + i{background:color-mix(in srgb,var(--good) 75%,transparent)} .switch input:checked + i::after{left:20px} /* Check/radio */ .chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--text);font-size:13px} .chk input{width:16px;height:16px;accent-color:var(--accent)} /* ============================ Tabellen ============================ */ .tbl-wrap{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.4px;text-transform:uppercase; color:var(--muted);text-align:left;padding:11px var(--pad);border-bottom:1px solid var(--line-soft);white-space:nowrap; position:sticky;top:0;background:var(--panel);cursor:pointer;user-select:none} .tbl th.no-sort{cursor:default} .tbl th .arr{opacity:.4;font-size:9px} .tbl th.sorted .arr{opacity:1;color:var(--accent)} .tbl td{padding:11px var(--pad);border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums;vertical-align:middle} .tbl tbody tr{transition:.13s} .tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)} .tbl tbody tr.sel{background:color-mix(in srgb,var(--accent) 11%,transparent)} .tbl .num{text-align:right;font-family:var(--font-body)} .tbl .mono{font-family:var(--font-mono);color:var(--muted)} .tbl .row-act{display:flex;gap:4px;opacity:0;transition:.13s} .tbl tbody tr:hover .row-act{opacity:1} .tbl.compact td,.tbl.compact th{padding:7px var(--pad-sm)} .avatar-cell{display:flex;align-items:center;gap:10px} .avatar-sm{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-family:var(--font-body); background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent)} .stockbar{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;min-width:80px} .stockbar > i{display:block;height:100%;border-radius:3px;background:var(--good)} .tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);border-top:1px solid var(--line-soft); font-family:var(--font-body);font-size:12px;color:var(--muted)} .pager{display:flex;gap:4px} .pager button{all:unset;cursor:pointer;min-width:30px;height:30px;padding:0 8px;display:grid;place-items:center;border-radius:8px; border:1px solid var(--line-soft);color:var(--muted);font-family:var(--font-body);font-size:12px} .pager button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .pager button:hover:not(.on){background:var(--panel-2);color:var(--text)} /* ============================ Alerts / Toasts ============================ */ .alert{display:flex;gap:11px;padding:12px 15px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--panel-2);align-items:flex-start} .alert svg{width:18px;height:18px;flex:none;margin-top:1px} .alert b{display:block;margin-bottom:2px} .alert.ok{border-color:color-mix(in srgb,var(--good) 35%,transparent);background:color-mix(in srgb,var(--good) 9%,transparent);color:var(--good)} .alert.info{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)} .alert.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent);color:var(--warn)} .alert.crit{border-color:color-mix(in srgb,var(--crit) 35%,transparent);background:color-mix(in srgb,var(--crit) 9%,transparent);color:var(--crit)} .alert .alert-body{color:var(--text)} .alert.ok .alert-body b,.alert.info .alert-body b,.alert.warn .alert-body b,.alert.crit .alert-body b{color:inherit} #toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:10px} .toast{display:flex;align-items:center;gap:11px;background:var(--panel-3);border:1px solid var(--line);border-radius:12px; padding:12px 15px;box-shadow:var(--shadow);min-width:250px;animation:toastIn .25s} .toast svg{width:18px;height:18px;flex:none} .toast.ok{border-left:3px solid var(--good)} .toast.info{border-left:3px solid var(--accent)} .toast.warn{border-left:3px solid var(--warn)} .toast.crit{border-left:3px solid var(--crit)} @keyframes toastIn{from{transform:translateY(12px);opacity:0}} /* ============================ Modal / Drawer ============================ */ .backdrop{position:fixed;inset:0;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(3px);z-index:100; display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s;padding:20px} .backdrop.open{opacity:1;pointer-events:auto} .modal{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 3px);width:min(520px,100%); max-height:88vh;overflow:auto;box-shadow:var(--shadow);transform:translateY(14px) scale(.98);transition:.2s} .backdrop.open .modal{transform:none} .modal.lg{width:min(760px,100%)} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);border-bottom:1px solid var(--line-soft)} .modal-head h3{font-size:16px} .modal-body{padding:var(--pad)} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px var(--pad);border-top:1px solid var(--line-soft)} .x{all:unset;cursor:pointer;color:var(--muted);width:30px;height:30px;display:grid;place-items:center;border-radius:8px} .x:hover{background:var(--panel-2);color:var(--text)} /* Drawer (rechts) */ .drawer{position:fixed;top:0;right:0;height:100vh;width:min(440px,100%);background:var(--panel);border-left:1px solid var(--line); box-shadow:var(--shadow);z-index:100;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column} .drawer.open{transform:none} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);border-bottom:1px solid var(--line-soft)} .drawer-body{padding:var(--pad);overflow:auto;flex:1} /* Steps */ .steps{display:flex;gap:0;margin-bottom:var(--gap-lg)} .step{flex:1;text-align:center;position:relative;font-family:var(--font-body);font-size:11px;color:var(--dim)} .step .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;border:1px solid var(--line);background:var(--panel-2)} .step.done .dot,.step.active .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .step.active{color:var(--accent)} .step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:1px;background:var(--line)} .step:first-child::before{display:none} .step.done::before,.step.active::before{background:var(--accent)} /* ============================ Tabs ============================ */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-soft)} .tab{all:unset;cursor:pointer;padding:10px 15px;color:var(--muted);font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px} .tab:hover{color:var(--text)} .tab.on{color:var(--accent);border-bottom-color:var(--accent)} .tabpane{display:none;padding-top:var(--gap-lg)} .tabpane.on{display:block} /* Accordion */ .accordion{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .acc-item{border-top:1px solid var(--line-soft)} .acc-item:first-child{border-top:0} .acc-head{display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;font-weight:560;font-size:14px;transition:.13s;user-select:none} .acc-head:hover{background:var(--panel-2)} .acc-head .acc-ico{color:var(--muted);flex:none;display:inline-flex} .acc-head .acc-caret{margin-left:auto;transition:.2s;color:var(--muted);flex:none} .acc-item.open > .acc-head .acc-caret{transform:rotate(90deg)} .acc-item.open > .acc-head{color:var(--accent)} .acc-item.open > .acc-head .acc-ico{color:var(--accent)} .acc-body{max-height:0;overflow:hidden;transition:max-height .28s ease} .acc-item.open > .acc-body{max-height:600px} .acc-body-inner{padding:2px 16px 16px 43px;color:var(--muted);font-size:13.5px;line-height:1.65} /* ============================ Charts ============================ */ .chart{width:100%;height:auto;display:block;overflow:visible} .chart .grid line{stroke:var(--line-soft)} .chart text{fill:var(--dim);font-family:var(--font-body);font-size:11px} .chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-body);font-size:11px;color:var(--muted);margin-top:10px} .chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle} .chart-tip{position:fixed;z-index:130;pointer-events:none;background:var(--panel-3);border:1px solid var(--line);border-radius:9px; padding:7px 10px;font-size:12px;box-shadow:var(--shadow);opacity:0;transition:.08s;font-variant-numeric:tabular-nums;white-space:nowrap} .heat rect{stroke:var(--panel);stroke-width:2} .legend-scale{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11px;color:var(--muted)} .legend-scale .bar{width:120px;height:10px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--accent))} /* ============================ Chat / Kommunikation ============================ */ .chat{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 128px);min-height:480px; border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .chat-list{border-right:1px solid var(--line-soft);display:flex;flex-direction:column;background:var(--panel)} .chat-list-head{padding:13px 15px;border-bottom:1px solid var(--line-soft)} .conv{display:flex;gap:11px;padding:12px 15px;cursor:pointer;border-bottom:1px solid var(--line-soft);transition:.13s} .conv:hover{background:var(--panel-2)} .conv.active{background:color-mix(in srgb,var(--accent) 10%,transparent);border-left:2px solid var(--accent)} .conv .who{display:flex;justify-content:space-between;gap:8px} .conv .who b{font-size:13.5px} .conv .who .t{font-family:var(--font-body);font-size:10px;color:var(--dim)} .conv .prev{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px} .conv .unread{margin-left:auto;background:var(--accent);color:var(--on-accent);font-family:var(--font-body);font-size:10px; min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px} .chat-main{display:flex;flex-direction:column;min-width:0} .chat-head{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-soft)} .chat-scroll{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background: radial-gradient(600px 300px at 50% 0%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%)} .msg{max-width:70%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;position:relative} .msg .m-t{font-family:var(--font-body);font-size:10px;color:var(--dim);margin-top:5px} .msg.in{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line-soft);border-bottom-left-radius:4px} .msg.out{align-self:flex-end;background:color-mix(in srgb,var(--accent) 20%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-bottom-right-radius:4px} .msg.sys{align-self:center;background:transparent;border:1px dashed var(--line);color:var(--muted);font-family:var(--font-body);font-size:11px;max-width:none} .day-div{align-self:center;font-family:var(--font-body);font-size:10px;color:var(--dim);padding:2px 10px;border-radius:999px;background:var(--panel-2)} .typing-indicator{display:inline-flex;gap:4px;align-items:center;padding:10px 13px} .typing-indicator i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite} .typing-indicator i:nth-child(2){animation-delay:.2s} .typing-indicator i:nth-child(3){animation-delay:.4s} @keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .composer{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line-soft)} .composer .inp{min-height:42px;max-height:120px;resize:none} /* ============================ MD-Editor ============================ */ .editor{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft); border-radius:var(--radius);overflow:hidden;min-height:520px} .editor .pane{background:var(--panel);display:flex;flex-direction:column} .editor .pane-head{padding:9px 14px;border-bottom:1px solid var(--line-soft);font-family:var(--font-body);font-size:11px; color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;justify-content:space-between} .editor textarea{all:unset;flex:1;padding:16px;font-family:var(--font-body);font-size:13px;line-height:1.7;color:var(--text);white-space:pre-wrap} .md-prev{padding:16px 20px;overflow:auto;line-height:1.65} .md-prev h1,.md-prev h2,.md-prev h3{margin:18px 0 8px;line-height:1.25} .md-prev h1{font-size:22px;border-bottom:1px solid var(--line-soft);padding-bottom:6px} .md-prev h2{font-size:18px} .md-prev h3{font-size:15px} .md-prev p{margin:8px 0} .md-prev ul,.md-prev ol{margin:8px 0;padding-left:22px} .md-prev code{font-family:var(--font-mono);font-size:12px;background:var(--panel-2);padding:1px 6px;border-radius:5px} .md-prev pre{background:var(--bg);border:1px solid var(--line-soft);border-radius:9px;padding:13px;overflow:auto} .md-prev pre code{background:none;padding:0} .md-prev blockquote{border-left:3px solid var(--accent);margin:10px 0;padding:2px 14px;color:var(--muted)} .md-prev a{border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)} .md-prev table{border-collapse:collapse;margin:10px 0;width:100%} .md-prev th,.md-prev td{border:1px solid var(--line-soft);padding:6px 10px;text-align:left} .md-toolbar{display:flex;gap:3px;padding:8px 10px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap} .md-toolbar button{all:unset;cursor:pointer;font-family:var(--font-body);font-size:12px;color:var(--muted);padding:4px 9px;border-radius:7px} .md-toolbar button:hover{background:var(--panel-2);color:var(--text)} /* ============================ Regler-Panel ============================ */ .fab{position:fixed;right:20px;bottom:20px;z-index:70;width:52px;height:52px;border-radius:50%;background:var(--accent); color:var(--on-accent);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow),var(--neon)} .fab svg{width:24px;height:24px} .reg-panel{position:fixed;right:20px;bottom:84px;z-index:70;width:290px;max-height:80vh;overflow:auto; background:color-mix(in srgb,var(--panel) 95%,#000);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); padding:16px;transform:translateY(12px) scale(.97);opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(8px)} .reg-panel.open{transform:none;opacity:1;pointer-events:auto} .reg-panel h4{font-size:13px;display:flex;align-items:center;gap:7px;margin-bottom:3px} .reg-panel .hint{font-family:var(--font-body);font-size:10px;color:var(--dim);margin-bottom:14px} .reg{margin-bottom:13px} .reg > span{font-family:var(--font-body);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:6px;letter-spacing:.3px} .reg input[type=range]{width:100%;accent-color:var(--accent);height:4px} .reg input[type=color]{width:100%;height:30px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer} .themes{display:flex;gap:6px;margin-bottom:14px} .themes button{all:unset;cursor:pointer;flex:1;text-align:center;font-family:var(--font-body);font-size:11px;padding:7px 0;border-radius:9px; border:1px solid var(--line-soft);color:var(--muted)} .themes button.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} .swatches{display:flex;gap:6px;margin-top:7px} .sw{width:22px;height:22px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.15)} .reg select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:var(--font-body);font-size:12px} .mini-btn{all:unset;font-family:var(--font-body);font-size:11px;color:var(--accent);cursor:pointer;padding:4px 0} /* Utilities */ .mono{font-family:var(--font-mono)} .muted{color:var(--muted)} .dim{color:var(--dim)} .right{text-align:right} .center{text-align:center} .tnum{font-variant-numeric:tabular-nums} .divider{height:1px;background:var(--line-soft);margin:var(--gap) 0} .tag-good{color:var(--good)} .tag-crit{color:var(--crit)} .tag-warn{color:var(--warn)} .hidden{display:none!important} /* Tree (verschachtelt) */ .tree,.tree ul{list-style:none;margin:0;padding:0} .tree ul{margin-left:9px;border-left:1px solid var(--line-soft);padding-left:8px;display:none} .tree-node.open > ul{display:block} .tree-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13.5px} .tree-row:hover{background:var(--panel-2)} .tree-row.sel{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)} .tree-toggle{width:14px;display:inline-flex;justify-content:center;color:var(--muted);transition:.15s;font-size:10px} .tree-node.open > .tree-row .tree-toggle{transform:rotate(90deg)} .tree-leaf > .tree-row .tree-toggle{visibility:hidden} .tree-ico{width:17px;height:17px;flex:none} .tree-ico.folder{color:var(--warn)} .tree-ico.file{color:var(--muted)} .tree-meta{margin-left:auto;font-family:var(--font-body);font-size:10px;color:var(--dim)} /* Table-Tree */ table.tree-table td{vertical-align:middle} .tt-name{display:flex;align-items:center;gap:8px} .tt-toggle{display:inline-flex;width:14px;justify-content:center;color:var(--muted);transition:.15s;font-size:10px;flex:none} .tt-row.open > td .tt-toggle{transform:rotate(90deg)} .tt-file .tt-toggle{visibility:hidden} .tt-folder .tt-name{cursor:pointer;font-weight:560} .tt-ico{width:17px;height:17px;flex:none} .tt-ico.folder{color:var(--warn)} .tt-ico.file{color:var(--muted)} .tt-hidden{display:none} .tt-bar{display:flex;align-items:center;gap:12px;padding:10px var(--pad);background:color-mix(in srgb,var(--accent) 9%,transparent);border-top:1px solid var(--line-soft)} /* ——— Datepicker (einfach & Zeitraum) ——— */ .dp{position:absolute;z-index:120;background:var(--panel-3);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow);padding:14px;display:none;user-select:none} .dp.open{display:block} .dp-wrap{display:flex;gap:14px} .dp-presets{display:flex;flex-direction:column;gap:2px;min-width:158px;border-right:1px solid var(--line-soft);padding-right:12px} .dp-presets button{all:unset;cursor:pointer;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--muted);white-space:nowrap} .dp-presets button:hover{background:var(--panel-2);color:var(--text)} .dp-presets button.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)} .dp-cals{display:flex;gap:18px} .dp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .dp-nav button{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted)} .dp-nav button:hover{background:var(--panel-2);color:var(--text)} .dp-mh{text-align:center;font-size:13px;font-weight:620;flex:1} .dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px} .dp-dow span{text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--dim);padding:2px 0} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dp-day{all:unset;cursor:pointer;height:30px;width:100%;display:grid;place-items:center;border-radius:8px; font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text);box-sizing:border-box} .dp-day:hover{background:var(--panel-2)} .dp-day.out{color:var(--dim);opacity:.45} .dp-day.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)} .dp-day.in{background:color-mix(in srgb,var(--accent) 17%,transparent);border-radius:0} .dp-day.sel{background:var(--accent);color:var(--on-accent)} .dp-day.sel.start{border-radius:8px 0 0 8px} .dp-day.sel.end{border-radius:0 8px 8px 0} .dp-day.sel.start.end{border-radius:8px} .dp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)} .dp-info{font-family:var(--font-body);font-size:11.5px;color:var(--muted)} .dp-field{position:relative} .dp-field .dp-ico{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:inline-flex} @media (max-width:760px){ .dp-wrap{flex-direction:column} .dp-cals{flex-direction:column} .dp-presets{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 10px;flex-direction:row;flex-wrap:wrap;min-width:0} } /* ——— Lightbox (Bilder / Video / iframe) ——— */ .lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);backdrop-filter:blur(4px); display:grid;place-items:center;opacity:0;pointer-events:none;transition:.22s;padding:20px} .lb.open{opacity:1;pointer-events:auto} .lb-stage{max-width:min(1200px,94vw);display:flex;flex-direction:column;gap:12px;transform:scale(.96);transition:.22s;align-items:center} .lb.open .lb-stage{transform:none} .lb-media{max-width:100%;border-radius:12px;overflow:hidden;background:#000;display:grid;place-items:center;box-shadow:0 20px 60px rgba(0,0,0,.6)} .lb-media img,.lb-media video{max-width:100%;max-height:74vh;display:block} .lb-media iframe{width:min(1100px,92vw);height:68vh;border:0;display:block;background:var(--bg)} .lb-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;font-size:13.5px;width:100%;max-width:900px} .lb-cap .idx{font-family:var(--font-body);font-size:11px;opacity:.55;white-space:nowrap} .lb-close{position:fixed;top:18px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2} .lb-close:hover{background:rgba(255,255,255,.16)} .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2} .lb-nav.prev{left:18px} .lb-nav.next{right:18px} .lb-nav:hover{background:rgba(255,255,255,.16)} .lb-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:100%} .lb-thumbs img{width:56px;height:40px;object-fit:cover;border-radius:6px;opacity:.42;cursor:pointer;border:2px solid transparent;transition:.15s} .lb-thumbs img.on,.lb-thumbs img:hover{opacity:1;border-color:var(--accent)} .lb-trigger{cursor:zoom-in;display:block;position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--panel-3)} .lb-trigger img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:.25s} .lb-trigger:hover img{transform:scale(1.06)} .lb-badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;border-radius:6px;padding:3px 8px; font-family:var(--font-body);font-size:10px;display:flex;align-items:center;gap:5px} .lb-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;pointer-events:none} .lb-play span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.7);display:grid;place-items:center} /* ——— Melde-Dialoge (SweetAlert-Stil) ——— */ .sw-back{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.58);backdrop-filter:blur(3px); display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s;padding:20px} .sw-back.open{opacity:1;pointer-events:auto} .sw{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); width:min(420px,100%);padding:28px 26px 22px;text-align:center;transform:scale(.9);transition:.22s} .sw-back.open .sw{transform:none} .sw-ico{width:78px;height:78px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;border:3px solid;animation:swPop .38s} @keyframes swPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}} .sw-ico svg{width:38px;height:38px} .sw-ico.ok{border-color:var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)} .sw-ico.err{border-color:var(--crit);color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent)} .sw-ico.warn{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)} .sw-ico.info{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} .sw-ico.ask{border-color:var(--accent2);color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent)} .sw h3{font-size:20px;margin-bottom:8px;letter-spacing:-.2px} .sw p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:20px} .sw-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .sw-timer{height:3px;background:var(--line);border-radius:2px;margin-top:18px;overflow:hidden} .sw-timer i{display:block;height:100%;background:var(--accent);transform-origin:left;animation:swBar linear forwards} @keyframes swBar{from{transform:scaleX(1)}to{transform:scaleX(0)}} /* Uploader / Dropzone / Progress */ .dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:38px 20px;text-align:center;cursor:pointer;transition:.15s;color:var(--muted)} .dropzone:hover,.dropzone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)} .dropzone .dz-ico{width:44px;height:44px;margin:0 auto 12px;color:var(--accent)} .progress{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden} .progress > i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s;border-radius:3px} .progress.done > i{background:var(--good)} .upl-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft)} .upl-thumb{width:40px;height:40px;border-radius:8px;background:var(--panel-3);display:grid;place-items:center;color:var(--dim);flex:none;overflow:hidden} .upl-thumb img{width:100%;height:100%;object-fit:cover} /* Drag & Drop (Sortable / Kanban) */ .drag-item{cursor:grab;transition:.12s} .drag-item.dragging{opacity:.4;cursor:grabbing} .drag-over{outline:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px} .kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);align-items:start} .kcol{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px;min-height:120px} .kcol.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)} .kcol-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:10px;padding:0 4px} .kcard{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;margin-bottom:9px;box-shadow:var(--shadow)} .kcard .khandle{color:var(--dim)} /* Image-Cropper (MEDIA) — Vollausbau 24.07.2026 */ .cropframe{position:relative;width:100%;aspect-ratio:4/3;margin-inline:auto;user-select:none; border-radius:var(--radius);overflow:hidden;background: repeating-conic-gradient(var(--panel-3) 0% 25%, var(--panel-2) 0% 50%) 50%/22px 22px;touch-action:none} .cropframe.mode-move{cursor:grab} .cropframe.mode-move.zieht{cursor:grabbing} .cropstage{position:absolute;inset:0;overflow:hidden} .cropstage img{position:absolute;left:50%;top:50%;transform-origin:center;pointer-events:none; max-width:none;image-rendering:auto} .cropsel{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);cursor:move;box-sizing:border-box} .cropsel::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:33.33% 33.33%;background-position:0 0} .cropsel.aus{display:none} .crophandle{position:absolute;width:13px;height:13px;background:#fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.35);z-index:2} /* Achtung: eigene Präfixe — .sw/.n/.e/.w sind im System anderweitig belegt (.sw = Melde-Dialog). Ohne Präfix erbt der Anfasser fremde Maße. */ .crophandle.h-nw{left:-7px;top:-7px;cursor:nwse-resize} .crophandle.h-ne{right:-7px;top:-7px;cursor:nesw-resize} .crophandle.h-sw{left:-7px;bottom:-7px;cursor:nesw-resize} .crophandle.h-se{right:-7px;bottom:-7px;cursor:nwse-resize} .crophandle.h-n{left:50%;top:-7px;margin-left:-6.5px;cursor:ns-resize} .crophandle.h-s{left:50%;bottom:-7px;margin-left:-6.5px;cursor:ns-resize} .crophandle.h-w{left:-7px;top:50%;margin-top:-6.5px;cursor:ew-resize} .crophandle.h-e{right:-7px;top:50%;margin-top:-6.5px;cursor:ew-resize} /* Größe hart setzen, damit keine fremde Regel sie überschreiben kann */ .crophandle{width:13px!important;height:13px!important;padding:0!important;box-sizing:border-box} /* Werkzeugleiste */ .croptools{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:7px 9px; border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel-2);margin-bottom:var(--gap)} .croptools button{all:unset;cursor:pointer;min-width:32px;height:32px;padding:0 9px;display:inline-flex; align-items:center;justify-content:center;gap:6px;border-radius:8px;color:var(--muted);font-size:12.5px;transition:.12s} .croptools button:hover{background:var(--panel-3);color:var(--text)} .croptools button.on{background:color-mix(in srgb,var(--accent) 17%,transparent);color:var(--accent)} .croptools button svg{width:16px;height:16px} .croptools .sep{width:1px;height:19px;background:var(--line-soft);margin:0 5px;flex:none} .croptools .rechts{margin-left:auto;display:flex;gap:3px;align-items:center} /* Steuerkreuz */ .croppad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:3px;justify-content:center} .croppad button{all:unset;cursor:pointer;display:grid;place-items:center;border-radius:8px; border:1px solid var(--line-soft);color:var(--muted);transition:.12s} .croppad button:hover{background:var(--panel-2);color:var(--accent);border-color:var(--accent)} .croppad button svg{width:15px;height:15px} .croppad .mitte{border-style:dashed;font-family:var(--font-body);font-size:10px} /* Zahlenwerte */ .cropdata{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} .cropdata label{display:flex;flex-direction:column;gap:4px} .cropdata input{all:unset;box-sizing:border-box;width:100%;background:var(--bg);border:1px solid var(--line); border-radius:8px;padding:6px 10px;color:var(--text);font-family:var(--font-mono);font-size:12.5px} .cropdata input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)} .cropdata input[readonly]{color:var(--muted);background:color-mix(in srgb,var(--line-soft) 35%,transparent);border-style:dashed} /* Vorschauen in festen Größen */ .croppreviews{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .croppreviews figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px} .croppreviews .box{overflow:hidden;border:1px solid var(--line-soft);background:var(--panel-3);flex:none} .croppreviews .box.rund{border-radius:50%} .croppreviews .box canvas{display:block;width:100%;height:100%} .croppreviews figcaption{font-family:var(--font-body);font-size:10px;color:var(--dim)} /* Aktivitäts-Feed / Timeline (Prozessanzeigen) */ .feed{position:relative} .feed-day{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 12px;display:flex;align-items:center;gap:10px} .feed-day::after{content:"";flex:1;height:1px;background:var(--line-soft)} .feed-item{display:flex;gap:14px;position:relative;padding-bottom:18px} .feed-item::before{content:"";position:absolute;left:19px;top:42px;bottom:-2px;width:2px;background:var(--line-soft)} .feed-item:last-child::before{display:none} .feed-node{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--panel);z-index:1;position:relative} .feed-node svg{width:19px;height:19px} .feed-body{flex:1;min-width:0;padding-top:2px} .feed-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .feed-head b{font-size:13.5px} .feed-head .who{color:var(--accent);font-weight:560} .feed-time{font-family:var(--font-body);font-size:11px;color:var(--dim);margin-left:auto} .feed-text{font-size:13.5px;color:var(--muted);margin-top:2px} .feed-card{margin-top:9px;padding:11px 13px;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);font-size:13px} .feed-live{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 1.6s infinite} /* Uptime / Status-Page */ .status-banner{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--good) 35%,transparent); background:color-mix(in srgb,var(--good) 10%,transparent);color:var(--good);font-weight:600} .status-banner.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn)} .uptime-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)} .uptime-row:first-child{border-top:0} .uptime-info{width:170px;flex:none} .uptime-info b{font-size:13.5px} .uptime-info .mono{font-size:11px;color:var(--dim)} .uptime-strip{flex:1;display:flex;gap:2px;height:30px;min-width:0} .uptime-strip i{flex:1;border-radius:2px;min-width:2px;transition:transform .1s;cursor:default} .uptime-strip i:hover{transform:scaleY(1.2)} .u-ok{background:var(--good)} .u-warn{background:var(--warn)} .u-down{background:var(--crit)} .u-none{background:var(--panel-3)} .uptime-pct{width:64px;text-align:right;font-family:var(--font-body);font-weight:600;font-size:14px} .uptime-scale{display:flex;justify-content:space-between;font-family:var(--font-body);font-size:10px;color:var(--dim);margin-left:186px;margin-top:6px} /* Pipelines (Prozess-Schritte) */ .pipeline{display:flex;align-items:flex-start;overflow-x:auto;padding:8px 2px 4px} .pl-stage{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:100px;text-align:center;flex:none} .pl-node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--panel);font-family:var(--font-body);font-size:13px;color:var(--muted)} .pl-node svg{width:18px;height:18px} .pl-stage.done .pl-node{background:color-mix(in srgb,var(--good) 88%,#000);border-color:var(--good);color:#04231c} .pl-stage.run .pl-node{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--neon)} .pl-stage.fail .pl-node{background:var(--crit);border-color:var(--crit);color:#fff} .pl-label{font-size:12px;font-weight:560}.pl-stage.run .pl-label{color:var(--accent)} .pl-meta{font-family:var(--font-body);font-size:10px;color:var(--dim)} .pl-conn{flex:1;height:2px;min-width:22px;background:var(--line);margin-top:18px} .pl-conn.done{background:var(--good)} .pl-conn.run{background:linear-gradient(90deg,var(--accent) 40%,var(--line))} /* Log-Viewer (mit Selektion) */ .logbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px var(--pad);border-bottom:1px solid var(--line-soft)} .logview{font-family:var(--font-mono);font-size:12.5px;max-height:520px;overflow:auto} .log-row{display:flex;gap:12px;padding:5px 16px;cursor:pointer;border-left:2px solid transparent;align-items:baseline} .log-row:hover{background:var(--panel-2)} .log-row.sel{background:color-mix(in srgb,var(--accent) 12%,transparent);border-left-color:var(--accent)} .log-time{color:var(--dim);flex:none} .log-lvl{flex:none;width:48px;font-weight:700;font-size:11px} .log-lvl.info{color:var(--accent)} .log-lvl.warn{color:var(--warn)} .log-lvl.err{color:var(--crit)} .log-lvl.ok{color:var(--good)} .log-lvl.debug{color:var(--dim)} .log-src{color:var(--accent2);flex:none} .log-msg{color:var(--text);white-space:pre-wrap;word-break:break-word} .log-selbar{display:flex;align-items:center;gap:12px;padding:10px var(--pad);background:color-mix(in srgb,var(--accent) 9%,transparent);border-top:1px solid var(--line-soft)} /* Code / Syntax-Highlighter */ .codeblock{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--bg)} .cb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel)} .cb-lang{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .cb-copy{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--muted);padding:4px 9px;border-radius:7px} .cb-copy:hover{background:var(--panel-2);color:var(--text)} .codeblock pre{margin:0;padding:14px 16px;overflow:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--text)} .codeblock code{font-family:var(--font-mono);white-space:pre} .cb-body{display:flex} .cb-gutter{flex:none;padding:14px 10px;text-align:right;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--dim); white-space:pre;background:color-mix(in srgb,var(--panel) 55%,transparent);border-right:1px solid var(--line-soft);user-select:none} .cb-body pre{flex:1;min-width:0} .tok-key{color:var(--accent2);font-weight:560} .tok-str{color:var(--good)} .tok-com{color:var(--dim);font-style:italic} .tok-num{color:var(--warn)} .tok-fn{color:var(--accent)} .tok-tag{color:var(--accent)} .tok-attr{color:var(--accent2)} .tok-var{color:var(--info)} .tok-bool{color:var(--warn)} .tok-punct{color:var(--muted)} /* ——— Animationen (CSS3) ——— */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes slideRight{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}} @keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} @keyframes popk{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}} @keyframes spink{to{transform:rotate(360deg)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes ringk{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 16px transparent}} @keyframes shimmerk{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}} .anim-fade{animation:fadeIn .55s both} .anim-up{animation:slideUp .55s cubic-bezier(.2,.7,.3,1) both} .anim-right{animation:slideRight .55s cubic-bezier(.2,.7,.3,1) both} .anim-scale{animation:scaleIn .45s cubic-bezier(.2,.7,.3,1) both} .anim-pop{animation:popk .45s ease} .anim-wiggle{animation:wiggle .5s ease} .spin{animation:spink 1s linear infinite} .floaty{animation:floaty 3s ease-in-out infinite} .pulse-ring{animation:ringk 1.5s ease-out infinite} .stagger > *{animation:slideUp .5s both} .stagger > *:nth-child(1){animation-delay:.04s}.stagger > *:nth-child(2){animation-delay:.10s} .stagger > *:nth-child(3){animation-delay:.16s}.stagger > *:nth-child(4){animation-delay:.22s} .stagger > *:nth-child(5){animation-delay:.28s}.stagger > *:nth-child(6){animation-delay:.34s} .skeleton{background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 37%,var(--panel-2) 63%); background-size:200% 100%;animation:shimmerk 1.4s infinite;border-radius:8px;color:transparent!important} .hover-lift{transition:transform .18s,box-shadow .18s} .hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .hover-grow{transition:transform .18s}.hover-grow:hover{transform:scale(1.04)} /* Modul-Katalog */ .mod{position:relative} .mod-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px var(--pad);border-bottom:1px solid var(--line-soft)} .mod-code{font-family:var(--font-mono);font-size:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:3px 9px;border-radius:7px;cursor:pointer;transition:.13s} .mod-code:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)} .mod-code::before{content:"#"} .mod-name{font-size:13.5px;font-weight:560} .mod-why{font-size:12.5px;color:var(--muted)} .mod-w{margin-left:auto;font-family:var(--font-body);font-size:10px;color:var(--dim);border:1px solid var(--line-soft);padding:2px 7px;border-radius:6px} .mod-demo{padding:var(--pad)} .catnav{position:sticky;top:60px;display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;z-index:10} .catnav a{font-family:var(--font-body);font-size:11px;color:var(--muted);border:1px solid var(--line-soft);background:var(--panel); padding:5px 11px;border-radius:999px} .catnav a:hover{border-color:var(--accent);color:var(--accent)} .matrix{border-collapse:separate;border-spacing:5px} .matrix td,.matrix th{text-align:center;padding:0} .matrix .cell{min-width:52px;height:44px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:13px;border:1px solid var(--line-soft)} .matrix .cell small{font-size:9px;color:var(--dim)} .matrix .cell.zero{color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent);border-color:color-mix(in srgb,var(--crit) 30%,transparent)} .matrix .cell.low{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} .matrix .cell.ok{color:var(--good);background:color-mix(in srgb,var(--good) 9%,transparent)} .thumb{width:44px;height:44px;border-radius:9px;background:linear-gradient(135deg,var(--panel-3),var(--panel-2));display:grid;place-items:center;color:var(--dim);flex:none} .gallery{display:flex;gap:10px;flex-wrap:wrap} .gallery .thumb{width:74px;height:74px} .sec-title{font-family:var(--font-body);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin:6px 0} /* ——— Overflow-Schutz (Grid-/Flex-Blowout verhindern) ——— */ .grid > *,.stack > *{min-width:0} .main,.content,.card,.tbl-wrap,.card-body,.chat-main{min-width:0} .search input{min-width:0} .card-head{flex-wrap:wrap} .tbl-wrap{max-width:100%} .mod-demo{overflow-x:auto} .chart{max-width:100%} @media (max-width:1080px){.g-4{grid-template-columns:repeat(2,1fr)}.g-main,.g-main2,.g-3{grid-template-columns:1fr}.editor{grid-template-columns:1fr}} @media (max-width:860px){ .app{grid-template-columns:1fr} .side{position:fixed;left:0;top:0;z-index:90;width:230px;transform:translateX(-100%);transition:.25s} .app.nav-open .side{transform:none} .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:89} .g-2{grid-template-columns:1fr}.chat{grid-template-columns:1fr}.chat-list{display:none} .g-3,.g-4{grid-template-columns:repeat(2,1fr)} .kanban{grid-template-columns:1fr} .content{padding:14px;gap:14px} .topbar{padding:10px 12px;gap:9px} .topbar .crumb,.topbar .live{display:none} .topbar .search{flex:1;max-width:none;min-width:0;padding:6px 11px} .search-wrap{max-width:none;min-width:0} .search-wrap .search input{width:0;min-width:0;flex:1 1 0} .dropdown-menu{right:0} .dd-search-opts{left:auto;right:0;min-width:min(320px,calc(100vw - 24px))} .tabs{overflow-x:auto;flex-wrap:nowrap} .tab{flex:none;white-space:nowrap;padding:10px 12px} .uptime-strip{gap:1px} .uptime-strip i{min-width:1px} .matrix{display:block;overflow-x:auto;white-space:nowrap} .main{overflow-x:hidden} .page-head h1{font-size:19px} .tile-badge{position:static;order:-1;align-self:flex-start;margin-bottom:2px} .tile .val{font-size:22px} .dropdown-menu{min-width:min(320px,calc(100vw - 24px));right:-4px} .uptime-row{flex-wrap:wrap} .uptime-info{width:100%} .uptime-scale{margin-left:0} .modal,.drawer{width:100%} .chat{height:calc(100vh - 170px)} .ico-grid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))} .editor{min-height:420px} .feed-item::before{left:19px} } @media (max-width:430px){ .seg button{padding:5px 10px;font-size:11px} .btn{padding:8px 12px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============================================================ APPS · Arbeitsansichten (24.07.2026) Bausteine für durchgespielte Vorgänge statt Baustein-Galerien. Katalog-Codes: record.head · form.savebar · view.split · table.bulkbar list.history · state.empty/loading/error · flow.wizard form.matrixedit · doc.print ============================================================ */ /* ——— record.head — Kopfbereich eines Datensatzes ——— */ .rec-head{display:flex;gap:var(--gap);align-items:flex-start;flex-wrap:wrap;padding:var(--pad)} .rec-head .rec-id{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.5px} .rec-head h2{font-size:20px;font-weight:660;letter-spacing:-.3px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rec-head .rec-sub{font-size:13px;color:var(--muted);margin-top:5px} .rec-head .rec-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .rec-figs{display:flex;flex-wrap:wrap;border-top:1px solid var(--line-soft)} .rec-figs > div{flex:1 1 140px;padding:12px var(--pad);border-left:1px solid var(--line-soft)} .rec-figs > div:first-child{border-left:0} .rec-figs .lbl{display:block;margin-bottom:3px} .rec-figs b{font-size:17px;font-weight:660;font-variant-numeric:tabular-nums} /* ——— form.savebar — mitlaufende Speichern-Leiste ——— */ .savebar{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px var(--pad);border:1px solid var(--line);border-radius:var(--radius); background:color-mix(in srgb,var(--panel-3) 94%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow)} .savebar .sb-state{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11.5px;color:var(--dim)} .savebar .sb-state .dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none} .savebar.dirty{border-color:color-mix(in srgb,var(--warn) 45%,transparent)} .savebar.dirty .sb-state{color:var(--warn)} .savebar.dirty .sb-state .dot{background:var(--warn);animation:pulse 1.8s infinite} .savebar.saved .sb-state{color:var(--good)} .savebar.saved .sb-state .dot{background:var(--good)} .savebar .sb-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} /* ——— view.split — Liste links, Detail rechts ——— */ .split{display:grid;grid-template-columns:300px 1fr;gap:var(--gap-lg);align-items:start} .split-list{position:sticky;top:66px;max-height:calc(100vh - 92px);display:flex;flex-direction:column;overflow:hidden} .split-list .sl-scroll{overflow-y:auto;flex:1;min-height:0} .sl-item{display:flex;gap:11px;align-items:center;padding:11px var(--pad-sm);cursor:pointer; border-bottom:1px solid var(--line-soft);transition:.13s;border-left:2px solid transparent} .sl-item:hover{background:var(--panel-2)} .sl-item.on{background:color-mix(in srgb,var(--accent) 11%,transparent);border-left-color:var(--accent)} .sl-item .sl-body{flex:1;min-width:0} .sl-item .sl-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .sl-item .sl-top b{font-size:13.5px} .sl-item .sl-top .t{font-family:var(--font-body);font-size:10px;color:var(--dim);white-space:nowrap} .sl-item .sl-prev{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ——— table.bulkbar — Sammelaktionen bei Mehrfachauswahl ——— */ .bulkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px var(--pad); background:color-mix(in srgb,var(--accent) 10%,transparent);border-top:1px solid var(--line-soft)} .bulkbar .bb-count{font-family:var(--font-body);font-size:12px;color:var(--accent)} .bulkbar .bb-act{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap} /* ——— list.history — Verlauf/Protokoll an einem Datensatz ——— */ .hist{display:flex;flex-direction:column} .hist-item{display:flex;gap:12px;padding:11px 0;position:relative} .hist-item::before{content:"";position:absolute;left:9px;top:30px;bottom:-4px;width:2px;background:var(--line-soft)} .hist-item:last-child::before{display:none} .hist-dot{width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px;display:grid;place-items:center; border:2px solid var(--panel);background:var(--panel-3);color:var(--muted);z-index:1} .hist-dot svg{width:11px;height:11px} .hist-dot.ok{background:color-mix(in srgb,var(--good) 24%,var(--panel));color:var(--good)} .hist-dot.info{background:color-mix(in srgb,var(--accent) 24%,var(--panel));color:var(--accent)} .hist-dot.warn{background:color-mix(in srgb,var(--warn) 24%,var(--panel));color:var(--warn)} .hist-dot.crit{background:color-mix(in srgb,var(--crit) 24%,var(--panel));color:var(--crit)} .hist-body{flex:1;min-width:0;font-size:13.5px} .hist-body .hist-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .hist-body .who{color:var(--accent);font-weight:560;font-size:12.5px} .hist-body .t{font-family:var(--font-body);font-size:11px;color:var(--dim);margin-left:auto;white-space:nowrap} .hist-body .what{color:var(--muted);font-size:12.5px;margin-top:1px} .hist-body .diff{font-family:var(--font-body);font-size:11.5px;margin-top:5px;padding:7px 10px;border-radius:8px; background:var(--panel-2);border:1px solid var(--line-soft);overflow-x:auto} .hist-body .diff .old{color:var(--crit);text-decoration:line-through} .hist-body .diff .new{color:var(--good)} /* ——— state.empty / loading / error — die drei Zustände ——— */ .state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:52px 24px} .state .st-ico{width:62px;height:62px;border-radius:50%;display:grid;place-items:center; background:var(--panel-2);border:1px solid var(--line-soft);color:var(--dim)} .state .st-ico svg{width:27px;height:27px} .state h3{font-size:16px;font-weight:620} .state p{color:var(--muted);font-size:13.5px;max-width:400px;line-height:1.6;margin:0} .state .st-act{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:4px} .state.err .st-ico{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 35%,transparent); background:color-mix(in srgb,var(--crit) 9%,transparent)} .state.err h3{color:var(--crit)} .state .st-code{font-family:var(--font-body);font-size:11px;color:var(--dim); border:1px solid var(--line-soft);border-radius:7px;padding:4px 9px;margin-top:2px} .skel-list{display:flex;flex-direction:column;gap:11px;padding:var(--pad)} .skel-row{display:flex;align-items:center;gap:12px} .skel-row .skeleton{height:13px;border-radius:6px} .skel-row .sk-av{width:34px;height:34px;border-radius:50%;flex:none} /* ——— flow.wizard — Schritt-Assistent ——— */ .wiz{display:grid;grid-template-columns:212px 1fr;gap:var(--gap-lg);align-items:start} .wiz-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:66px} .wiz-step{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:10px;cursor:pointer; transition:.14s;border:1px solid transparent;text-align:left} .wiz-step:hover{background:var(--panel-2)} .wiz-step.on{background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .wiz-step .n{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center; font-family:var(--font-body);font-size:11px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted)} .wiz-step.on .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .wiz-step.done .n{background:color-mix(in srgb,var(--good) 85%,#000);border-color:transparent;color:#04231c} .wiz-step .wt{font-size:13.5px;font-weight:560;line-height:1.3} .wiz-step .wd{font-size:11.5px;color:var(--dim);margin-top:2px;font-family:var(--font-body)} .wiz-step.on .wt{color:var(--accent)} .wiz-pane{display:none} .wiz-pane.on{display:block;animation:fadeIn .3s} .wiz-bar{height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden;margin-bottom:var(--gap)} .wiz-bar > i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .3s;box-shadow:var(--neon)} /* Pflichtfeld / Fehler am Feld */ .field .req{color:var(--crit);margin-left:2px} .field.bad .inp{border-color:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 18%,transparent)} .field .errmsg{display:none;font-family:var(--font-body);font-size:11px;color:var(--crit); align-items:center;gap:5px;text-transform:none;letter-spacing:0} .field.bad .errmsg{display:flex} /* ——— form.matrixedit — bearbeitbare Varianten-Matrix ——— */ .mx{border-collapse:separate;border-spacing:4px} .mx th{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500;padding:0 4px;white-space:nowrap} .mx th.rowh{text-align:right;padding-right:8px} .mx input{all:unset;box-sizing:border-box;width:66px;height:38px;text-align:center;border-radius:9px; border:1px solid var(--line-soft);background:var(--bg);color:var(--text); font-family:var(--font-mono);font-size:13px;transition:.14s} .mx input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)} .mx input.zero{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent); background:color-mix(in srgb,var(--crit) 8%,transparent)} .mx input.low{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent); background:color-mix(in srgb,var(--warn) 8%,transparent)} .mx input.off{opacity:.35} .mx .mx-sum{font-family:var(--font-mono);font-size:12px;color:var(--muted);padding-left:6px;white-space:nowrap} /* ——— doc.print — Druckansicht (Rechnung / Lieferschein) ——— */ .doc{background:#fff;color:#15170f;border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow); max-width:820px;margin-inline:auto;font-size:13px;line-height:1.6} .doc *{border-color:#d8d8cd!important} .doc .doc-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px} .doc .doc-brand{font-family:var(--font-body);font-size:19px;font-weight:700;letter-spacing:-.3px} .doc .doc-brand small{display:block;font-size:10.5px;font-weight:400;color:#6a6c5c;letter-spacing:.3px;margin-top:3px} .doc .doc-meta{text-align:right;font-size:12px;color:#55574a} .doc .doc-meta b{color:#15170f} .doc h4{font-size:15px;margin-bottom:6px} .doc .doc-addr{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:26px} .doc .doc-addr .lbl{color:#7a7c6a;font-size:10px} .doc table{width:100%;border-collapse:collapse;margin:14px 0} .doc th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#6a6c5c; border-bottom:1px solid #d8d8cd;padding:7px 0} .doc td{padding:9px 0;border-bottom:1px solid #ebebe2;vertical-align:top} .doc .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .doc .doc-sum{margin-left:auto;width:min(280px,100%);margin-top:10px} .doc .doc-sum div{display:flex;justify-content:space-between;gap:20px;padding:5px 0} .doc .doc-sum .total{border-top:2px solid #15170f;margin-top:6px;padding-top:9px;font-weight:700;font-size:16px} .doc .doc-foot{margin-top:34px;padding-top:14px;border-top:1px solid #d8d8cd; font-size:10.5px;color:#6a6c5c;display:flex;gap:30px;flex-wrap:wrap} .doc .doc-foot > div{flex:1 1 150px} @media print{ body::before,body::after,.side,.topbar,.fab,.reg-panel,.page-head,.no-print,#toasts{display:none!important} .app{display:block} .content{padding:0;max-width:none;gap:0} .doc{box-shadow:none;border-radius:0;padding:0;max-width:none} @page{margin:16mm} } /* ——— Apps: mobil ——— */ @media (max-width:1080px){ .wiz{grid-template-columns:1fr} .wiz-nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px} .wiz-step{flex:none;min-width:172px} } @media (max-width:860px){ .split{grid-template-columns:1fr} .split-list{position:static;max-height:none} .split-list .sl-scroll{max-height:280px} .rec-head .rec-act{margin-left:0;width:100%} .rec-figs > div{flex:1 1 45%;border-left:0;border-top:1px solid var(--line-soft)} .doc{padding:22px 18px} .doc .doc-addr{gap:18px} .savebar{padding:10px 12px} .savebar .sb-act{margin-left:0;width:100%} .savebar .sb-act .btn{flex:1} .mx-wrap{overflow-x:auto} } /* Korrekturen aus der Sichtprüfung 24.07. */ .tbl .num{white-space:nowrap} /* Beträge nie umbrechen ("91,60 / €") */ /* ============================================================ Inhaltspflege · 24.07.2026 Katalog-Codes: form.combo · form.richtext · form.i18n ============================================================ */ /* ——— form.combo — durchsuchbare Auswahl (statt Liste mit hunderten Einträgen) ——— */ .combo{position:relative} .combo-field{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line); border-radius:9px;padding:8px 12px;cursor:pointer;transition:.15s;min-height:39px} .combo-field:hover{border-color:var(--line-soft)} .combo.open .combo-field{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)} .combo-field .cf-val{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .combo-field .cf-val.leer{color:var(--dim)} .combo-field .cf-x{color:var(--dim);flex:none;display:none} .combo-field .cf-x:hover{color:var(--crit)} .combo.gewaehlt .cf-x{display:inline-flex} .combo-field svg{width:15px;height:15px;color:var(--muted);flex:none} .combo-pop{position:absolute;z-index:70;left:0;right:0;top:calc(100% + 5px);background:var(--panel-3); border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:none} .combo.open .combo-pop{display:block} .combo-search{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line-soft)} .combo-search input{all:unset;flex:1;min-width:0;font-size:13.5px;color:var(--text)} .combo-search svg{width:14px;height:14px;color:var(--dim);flex:none} .combo-list{max-height:262px;overflow-y:auto} .combo-opt{padding:8px 12px;cursor:pointer;font-size:13.5px;display:flex;align-items:center;gap:9px;transition:.1s} .combo-opt:hover,.combo-opt.mark{background:var(--panel-2)} .combo-opt.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)} .combo-opt .oid{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);margin-left:auto;flex:none} .combo-opt b{font-weight:600;color:var(--accent)} .combo-none{padding:16px 12px;text-align:center;color:var(--dim);font-size:12.5px} .combo-foot{padding:7px 12px;border-top:1px solid var(--line-soft);font-family:var(--font-body); font-size:10.5px;color:var(--dim);display:flex;justify-content:space-between;gap:8px} /* ——— form.richtext — Textfeld mit Werkzeugleiste, Quelltext und Vorschau ——— */ .rte{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)} .rte-bar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px 8px; border-bottom:1px solid var(--line-soft);background:var(--panel-2)} .rte-bar button{all:unset;cursor:pointer;min-width:28px;height:28px;padding:0 8px;display:inline-flex; align-items:center;justify-content:center;gap:5px;border-radius:7px;color:var(--muted); font-size:12.5px;transition:.12s} .rte-bar button:hover{background:var(--panel-3);color:var(--text)} .rte-bar button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .rte-bar button svg{width:15px;height:15px} .rte-bar .sep{width:1px;height:18px;background:var(--line-soft);margin:0 5px;flex:none} .rte-bar .modes{margin-left:auto;display:flex;gap:2px;background:var(--bg);border-radius:8px;padding:2px} .rte-bar .modes button{font-family:var(--font-body);font-size:11px;height:24px} .rte-body{min-height:230px;max-height:520px;overflow:auto} .rte-edit{padding:14px 16px;outline:none;font-size:13.5px;line-height:1.65;min-height:230px} .rte-edit:focus{background:color-mix(in srgb,var(--accent) 3%,transparent)} .rte-edit b,.rte-edit strong{font-weight:680} .rte-edit a{border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)} .rte-edit ul,.rte-edit ol{padding-left:22px;margin:8px 0} .rte-edit:empty::before{content:attr(data-ph);color:var(--dim)} .rte-src{all:unset;box-sizing:border-box;display:block;width:100%;min-height:230px;padding:14px 16px; font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--text);white-space:pre-wrap;resize:vertical} .rte-prev{padding:14px 16px;font-size:13.5px;line-height:1.65} .rte-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:7px 12px; border-top:1px solid var(--line-soft);background:var(--panel-2); font-family:var(--font-body);font-size:10.5px;color:var(--dim)} .rte-foot .warn{color:var(--warn)} /* ——— form.i18n — Sprachumschaltung mit Vollständigkeitsanzeige ——— */ .langbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .langbar .lb-tabs{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line-soft); border-radius:999px;padding:3px} .langbar .lb-tabs button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px; font-family:var(--font-body);font-size:12px;color:var(--muted);padding:5px 13px;border-radius:999px} .langbar .lb-tabs button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} .langbar .lb-tabs button i{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none} .langbar .lb-tabs button i.teil{background:var(--warn)} .langbar .lb-tabs button i.leer{background:var(--crit)} .langpane{display:none} .langpane.on{display:block} /* Seiten-Adresse: Vorschau der vollen Adresse */ .urlprev{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-family:var(--font-body); font-size:11px;color:var(--dim);margin-top:5px} .urlprev b{color:var(--accent);font-weight:500} @media (max-width:860px){ .rte-bar{gap:1px} .rte-bar .modes{margin-left:0;width:100%;margin-top:4px} .combo-pop{left:0;right:0} } /* Speichern-Leiste kollidierte mit dem Design-Regler unten rechts (Sichtprüfung 24.07.) */ .savebar{padding-right:calc(var(--pad) + 58px)} @media (max-width:860px){ .savebar{padding-right:12px} .savebar .sb-act{padding-right:58px} } /* ============================================================ Korrekturen 24.07. (Rückmeldung Oliver): Innenabstände + Schriftgrößen ============================================================ */ /* 1) Reiter-Inhalte in einer Karte hatten nur oben Abstand, seitlich keinen — die Felder klebten am Kartenrand. Panes, die schon ein .card-body enthalten, bekommen weiterhin padding:0 (inline gesetzt). */ .card > .tabpane{padding:var(--gap-lg) var(--pad) var(--pad)} /* Reiterleiste bündig zum Karteninhalt (der Tab bringt selbst 15px mit) */ .card > .card-head .tabs{padding-left:calc(var(--pad) - 15px)} /* 2) Schriftgrößen im Formularbereich auf zwei Stufen reduziert: Label-Ebene 11px · Hilfstext-Ebene 11.5px · Eingaben 13.5px. Vorher lagen dort 10 / 10.5 / 11 / 11.5 / 12 / 12.5 px nebeneinander. */ .lockhint{font-size:11px} .hintline,.urlprev,.errmsg,.rte-foot,.combo-foot,.field .hintline{font-size:11.5px} .hintline svg{width:14px;height:14px} .rte-foot,.combo-foot{letter-spacing:.2px} /* 3) etwas mehr Luft zwischen den Feldern — vorher standen Label, Eingabe und Hilfstext dreier Felder fast ohne Trennung untereinander */ .field{margin-bottom:calc(var(--gap) * 1.35)} .field .hintline{margin-top:2px} .grid > .field{margin-bottom:0} /* 4) Label-Zeile linksbündig: Beschriftung, Pflicht-Stern und Feld-Zusatz stehen beieinander. Vorher schob space-between sie an die gegenüberliegenden Ränder — bei breiten Karten wirkte die Zeile dadurch auseinandergerissen. Soll etwas rechts stehen: margin-left:auto. */ .field label{justify-content:flex-start;gap:7px} .field label .req{margin:0 0 0 -4px} .field label .lockhint{margin:0} /* 5) Felder in einem Raster tragen ihren Abstand über den Raster-Zwischenraum (siehe 3), dadurch fehlte der Abstand zum Element NACH dem Raster. */ .grid + .field,.grid + .hintline,.grid + .row,.grid + .sec-title{margin-top:calc(var(--gap) * 1.35)} /* ——— preview.share — wie der Link beim Teilen aussieht (Open Graph) ——— */ .share{display:flex;gap:0;flex-direction:column;max-width:460px;border:1px solid var(--line); border-radius:11px;overflow:hidden;background:var(--panel-2)} .share-img{aspect-ratio:1200/630;background:var(--panel-3);display:grid;place-items:center; color:var(--dim);position:relative;overflow:hidden} .share-img img{width:100%;height:100%;object-fit:cover;display:block} .share-img .leer{display:flex;flex-direction:column;align-items:center;gap:7px; font-family:var(--font-body);font-size:11px;text-align:center;padding:14px} .share-img .leer svg{width:26px;height:26px;opacity:.6} .share-txt{padding:10px 13px;border-top:1px solid var(--line-soft)} .share-txt .dom{font-family:var(--font-body);font-size:10.5px;color:var(--dim); text-transform:uppercase;letter-spacing:.5px} .share-txt .tit{font-size:14px;font-weight:620;margin-top:3px;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .share-txt .des{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .share-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px} /* ============================================================ Dokument-Editor (Belege) · 24.07.2026 — Katalog: doc.editor Vorbild: CKEditor-Dokumentvariante, eigenständig gebaut. ============================================================ */ .doced{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--radius); overflow:hidden;background:var(--panel-2)} .doced-bar{position:sticky;top:56px;z-index:20;display:flex;align-items:center;gap:2px;flex-wrap:wrap; padding:7px 9px;background:var(--panel-3);border-bottom:1px solid var(--line-soft)} .doced-bar button,.doced-bar select{all:unset;cursor:pointer;min-width:30px;height:30px;padding:0 8px; display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:7px; color:var(--muted);font-size:12.5px;transition:.12s;box-sizing:border-box} .doced-bar button:hover,.doced-bar select:hover{background:var(--panel-2);color:var(--text)} .doced-bar button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .doced-bar button svg{width:15px;height:15px} .doced-bar select{border:1px solid var(--line-soft);background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:11.5px;padding:0 7px} .doced-bar .sep{width:1px;height:18px;background:var(--line);margin:0 5px;flex:none} .doced-bar .rechts{margin-left:auto;display:flex;gap:4px;align-items:center} /* Papierfläche */ .doced-flaeche{background:color-mix(in srgb,#000 22%,var(--panel-2));padding:26px 16px;overflow:auto;max-height:74vh} .blatt{background:#fff;color:#16180f;width:794px;max-width:100%;min-height:1123px;margin:0 auto; padding:64px 68px;box-shadow:0 6px 26px rgba(0,0,0,.35);transform-origin:top center; font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.62;outline:none} .blatt:focus{box-shadow:0 6px 26px rgba(0,0,0,.35),0 0 0 2px var(--accent)} .blatt h1{font-size:25px;margin:0 0 10px;line-height:1.2} .blatt h2{font-size:19px;margin:22px 0 8px} .blatt h3{font-size:15px;margin:18px 0 6px} .blatt p{margin:0 0 9px} .blatt table{width:100%;border-collapse:collapse;margin:14px 0;font-size:12.5px} .blatt th{text-align:left;border-bottom:1.5px solid #16180f;padding:7px 6px;font-size:10.5px; text-transform:uppercase;letter-spacing:.5px;color:#5c5e4e} .blatt td{padding:8px 6px;border-bottom:1px solid #e4e4d8;vertical-align:top} .blatt td.num,.blatt th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .blatt hr{border:0;border-top:1px solid #d8d8cd;margin:18px 0} .blatt ul,.blatt ol{margin:0 0 9px;padding-left:22px} .blatt a{color:#1a56c4} .blatt .kopf{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:30px} .blatt .marke{font-family:ui-monospace,monospace;font-size:19px;font-weight:700} .blatt .marke small{display:block;font-size:10.5px;font-weight:400;color:#6a6c5c;margin-top:3px} .blatt .meta{text-align:right;font-size:11.5px;color:#55574a} .blatt .summe{margin-left:auto;width:min(290px,100%);margin-top:12px} .blatt .summe div{display:flex;justify-content:space-between;gap:18px;padding:4px 0} .blatt .summe .gesamt{border-top:2px solid #16180f;margin-top:6px;padding-top:8px;font-weight:700;font-size:15px} .blatt .fuss{margin-top:38px;padding-top:12px;border-top:1px solid #d8d8cd;font-size:10.5px;color:#6a6c5c; display:flex;gap:26px;flex-wrap:wrap} .blatt .fuss > div{flex:1 1 150px} .blatt .umbruch{display:block;height:0;border-top:1px dashed #b9b9a8;margin:26px 0;position:relative} .blatt .umbruch::after{content:"Seitenumbruch";position:absolute;right:0;top:-8px;background:#fff; padding:0 6px;font-family:ui-monospace,monospace;font-size:9px;color:#9a9a88} /* Platzhalter */ .blatt .ph{background:color-mix(in srgb,#4a86ff 16%,#fff);border:1px solid color-mix(in srgb,#4a86ff 40%,#fff); border-radius:5px;padding:0 5px;font-family:ui-monospace,monospace;font-size:11.5px;color:#1a4fb4;white-space:nowrap} .blatt.gefuellt .ph{background:none;border-color:transparent;color:inherit;font-family:inherit;font-size:inherit;padding:0} .ph-liste{display:flex;gap:6px;flex-wrap:wrap} .ph-liste button{all:unset;cursor:pointer;font-family:var(--font-body);font-size:11px;padding:4px 9px; border-radius:7px;border:1px solid var(--line-soft);color:var(--muted);transition:.12s} .ph-liste button:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} @media print{ .doced-bar,.doced-flaeche{padding:0;max-height:none;overflow:visible;background:none} .doced{border:0} .blatt{box-shadow:none;width:auto;min-height:0;padding:0;margin:0} .blatt .umbruch{break-after:page;border:0;margin:0} .blatt .umbruch::after{display:none} } @media (max-width:860px){ .doced-flaeche{padding:12px 8px} .blatt{padding:26px 20px;min-height:0} .doced-bar{top:52px} } /* ============================================================ Badges · Vollausbau 24.07.2026 — Katalog: ui.badge Formen: badge-fill · badge-soft · badge-stripe · badge-round · badge-dot · badge-count Farben: badge-ok · badge-info · badge-warn · badge-crit · badge-akz · badge-neutral (eigene Präfixe — kurze Namen sind im System belegt) ============================================================ */ .badge-fill,.badge-soft,.badge-stripe{display:inline-flex;align-items:center;gap:5px; font-family:var(--font-body);font-size:11px;padding:3px 9px;border-radius:6px; border:1px solid transparent;white-space:nowrap;line-height:1.45} .badge-round{border-radius:999px;padding-inline:11px} .badge-fill svg,.badge-soft svg,.badge-stripe svg{width:12px;height:12px;flex:none} /* gefüllt */ .badge-fill{background:var(--panel-3);color:var(--text)} .badge-fill.badge-ok{background:var(--good);color:#04231c} .badge-fill.badge-info{background:var(--accent);color:var(--on-accent)} .badge-fill.badge-warn{background:var(--warn);color:#241a02} .badge-fill.badge-crit{background:var(--crit);color:#fff} .badge-fill.badge-akz{background:var(--accent2);color:#fff} .badge-fill.badge-neutral{background:var(--dim);color:var(--panel)} /* abgeschwächt */ .badge-soft{background:var(--panel-2);color:var(--muted);border-color:var(--line-soft)} .badge-soft.badge-ok{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);border-color:color-mix(in srgb,var(--good) 32%,transparent)} .badge-soft.badge-info{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 32%,transparent)} .badge-soft.badge-warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)} .badge-soft.badge-crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 32%,transparent)} .badge-soft.badge-akz{background:color-mix(in srgb,var(--accent2) 16%,transparent);color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 32%,transparent)} /* gestreift — farbiger Balken links, Text neutral */ .badge-stripe{background:var(--panel-2);color:var(--text);border-color:var(--line-soft); border-left-width:3px;border-left-style:solid;border-radius:0 6px 6px 0;padding-left:9px} .badge-stripe.badge-ok{border-left-color:var(--good)} .badge-stripe.badge-info{border-left-color:var(--accent)} .badge-stripe.badge-warn{border-left-color:var(--warn)} .badge-stripe.badge-crit{border-left-color:var(--crit)} .badge-stripe.badge-akz{border-left-color:var(--accent2)} /* nur Punkt (Statusmarker vor Text) */ .badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none; vertical-align:middle;margin-right:6px} .badge-dot.badge-ok{background:var(--good)} .badge-dot.badge-info{background:var(--accent)} .badge-dot.badge-warn{background:var(--warn)} .badge-dot.badge-crit{background:var(--crit)} .badge-dot.puls{animation:pulse 1.8s infinite} /* Zähler an Symbol/Schaltfläche */ .badge-anker{position:relative;display:inline-flex} .badge-count{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 5px; border-radius:999px;background:var(--crit);color:#fff;font-family:var(--font-body);font-size:10px; display:grid;place-items:center;border:2px solid var(--panel);line-height:1} .badge-count.badge-ok{background:var(--good);color:#04231c} .badge-count.badge-info{background:var(--accent);color:var(--on-accent)} .badge-count.leer{min-width:10px;height:10px;padding:0;top:-3px;right:-3px} /* an einer Karte / einem Bild positioniert */ .badge-ecke{position:absolute;top:10px;right:10px;z-index:2} .badge-ecke.links{right:auto;left:10px} .badge-ecke.unten{top:auto;bottom:10px} /* Größen */ .badge-lg{font-size:12.5px;padding:5px 12px} .badge-lg svg{width:14px;height:14px} .badge-sm{font-size:10px;padding:1px 7px} /* .alert b war pauschal ein Block (für die Titelzeile gedacht) — dadurch brachen fette Wörter mitten im Fließtext um. Nur das erste b bleibt Block. */ .alert .alert-body b:not(:first-child){display:inline} /* ============================================================ Programme an Fachseiten · 24.07.2026 — Katalog: job.card · job.list ============================================================ */ /* — Einzelne Programm-Karte (großzügig, wenn es nur eines gibt) — */ .prog{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel); box-shadow:var(--shadow);overflow:hidden;position:relative} .prog::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)} .prog.ok::before{background:var(--good)} .prog.fehler::before{background:var(--crit)} .prog.laeuft::before{background:var(--accent)} .prog.nie::before{background:var(--warn)} .prog-kopf{display:flex;align-items:flex-start;gap:13px;padding:14px var(--pad) 0} .prog-ico{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)} .prog-ico svg{width:19px;height:19px} .prog.laeuft .prog-ico svg{animation:spink 1.6s linear infinite} .prog-txt{flex:1;min-width:0} .prog-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .prog-name .kennung{font-family:var(--font-mono);font-size:11px;color:var(--dim); border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px} .prog-zweck{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5} .prog-akt{display:flex;gap:8px;align-items:center;flex:none} /* Zeile mit Kennzahlen zum letzten Lauf */ .prog-fakten{display:flex;flex-wrap:wrap;gap:0;margin-top:13px;border-top:1px solid var(--line-soft)} .prog-fakten > div{flex:1 1 150px;padding:9px var(--pad);border-left:1px solid var(--line-soft)} .prog-fakten > div:first-child{border-left:0} .prog-fakten .lbl{display:block;margin-bottom:2px} .prog-fakten b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} /* Fortschritt */ .prog-lauf{padding:11px var(--pad);border-top:1px solid var(--line-soft); background:color-mix(in srgb,var(--accent) 7%,transparent);display:none} .prog.laeuft .prog-lauf{display:block} .prog-lauf .zeile{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-body); font-size:11.5px;color:var(--accent);margin-bottom:7px} /* Protokoll */ .prog-log{border-top:1px solid var(--line-soft);display:none} .prog.log-offen .prog-log{display:block} .prog-log .zeile{display:flex;align-items:center;gap:11px;padding:8px var(--pad); border-top:1px solid var(--line-soft);font-size:12.5px} .prog-log .zeile:first-child{border-top:0} .prog-log .t{font-family:var(--font-body);font-size:11px;color:var(--dim);white-space:nowrap} .prog-log .erg{margin-left:auto;font-family:var(--font-body);font-size:11px;color:var(--muted);text-align:right} /* — Kompakte Liste (mehrere Programme an einer Seite) — */ .joblist{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel); box-shadow:var(--shadow);overflow:hidden} .joblist-kopf{display:flex;align-items:center;gap:11px;padding:11px var(--pad);cursor:pointer;user-select:none} .joblist-kopf:hover{background:var(--panel-2)} .joblist-kopf h3{font-size:13.5px;font-weight:620} .joblist-kopf .zusammenfassung{font-family:var(--font-body);font-size:11.5px;color:var(--muted); display:flex;align-items:center;gap:13px;margin-left:auto;flex-wrap:wrap} .joblist-kopf .caret{transition:.22s;color:var(--muted);flex:none;display:inline-flex} .joblist.offen .joblist-kopf .caret{transform:rotate(90deg)} .joblist-koerper{max-height:0;overflow:hidden;transition:max-height .3s ease} .joblist.offen .joblist-koerper{max-height:1400px} .jobzeile{display:flex;align-items:center;gap:12px;padding:11px var(--pad); border-top:1px solid var(--line-soft);transition:.13s;position:relative} .jobzeile:hover{background:var(--panel-2)} .jobzeile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent} .jobzeile.ok::before{background:var(--good)} .jobzeile.fehler::before{background:var(--crit)} .jobzeile.laeuft::before{background:var(--accent)} .jobzeile.nie::before{background:var(--warn)} .jobzeile .jz-ico{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--panel-2);color:var(--muted)} .jobzeile .jz-ico svg{width:15px;height:15px} .jobzeile.laeuft .jz-ico{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .jobzeile.laeuft .jz-ico svg{animation:spink 1.6s linear infinite} .jobzeile .jz-txt{flex:1;min-width:0} .jobzeile .jz-name{font-size:13.5px;font-weight:560;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .jobzeile .jz-sub{font-size:12px;color:var(--muted);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jobzeile .jz-stand{font-family:var(--font-body);font-size:11px;color:var(--dim); text-align:right;flex:none;min-width:118px} .jobzeile .jz-stand b{display:block;font-size:11.5px;font-weight:500} .jobzeile.fehler .jz-stand b{color:var(--crit)} .jobzeile.ok .jz-stand b{color:var(--good)} .jobzeile .jz-fortschritt{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line-soft);display:none} .jobzeile.laeuft .jz-fortschritt{display:block} .jobzeile .jz-fortschritt i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s} @media (max-width:860px){ .prog-kopf{flex-wrap:wrap} .prog-akt{width:100%;margin-top:10px} .prog-akt .btn{flex:1} .prog-fakten > div{flex:1 1 46%;border-left:0;border-top:1px solid var(--line-soft)} .jobzeile{flex-wrap:wrap} .jobzeile .jz-stand{text-align:left;min-width:0;width:100%;margin-left:40px} .jobzeile .jz-akt{margin-left:auto} .joblist-kopf .zusammenfassung{width:100%;margin-left:0} } /* ============================================================ Buttons · Solid-Familie 24.07.2026 — Katalog: ui.button Vorbild: Vorlagen-Abschnitte „Solid button / with icon / with menu / sizes / with label". Baut auf dem vorhandenen .btn auf. ============================================================ */ /* — Farben (gefüllt) — */ .btn-warn{background:var(--warn);border-color:transparent;color:#241a02} .btn-warn:hover{background:color-mix(in srgb,var(--warn) 86%,#fff)} .btn-info{background:var(--info);border-color:transparent;color:var(--on-accent)} .btn-info:hover{background:color-mix(in srgb,var(--info) 86%,#fff)} .btn-akz{background:var(--accent2);border-color:transparent;color:#fff} .btn-akz:hover{background:color-mix(in srgb,var(--accent2) 86%,#fff)} .btn-neutral{background:var(--panel-3);border-color:var(--line);color:var(--text)} .btn-neutral:hover{background:var(--line-soft)} .btn-success:hover{background:var(--good)} /* — Größen (Ergänzung zu btn-sm / btn-lg) — */ .btn-xs{padding:4px 9px;font-size:11.5px} .btn-xs svg{width:13px;height:13px} .btn-lg svg{width:18px;height:18px} .btn-block{display:flex;width:100%} /* — Mit abgesetztem Symbolfeld (wie im CRM: „⚙ | Programm laufen lassen") — */ /* Achtung: NICHT .lb verwenden — das ist die Lightbox (bildschirmfüllend). */ .btn-labeled{padding:0;overflow:hidden;gap:0} .btn-labeled > .btn-lb{display:grid;place-items:center;align-self:stretch;padding:0 11px; background:rgba(0,0,0,.18);flex:none} .btn-labeled > .btn-lb svg{width:16px;height:16px} .btn-labeled > .btn-tx{padding:9px 15px} .btn-labeled.btn-sm > .btn-tx{padding:6px 11px} .btn-labeled.btn-sm > .btn-lb{padding:0 9px} .btn-labeled.btn-lg > .btn-tx{padding:12px 20px} .btn-labeled.btn-lg > .btn-lb{padding:0 14px} .btn-labeled.btn-neutral > .btn-lb,.btn-labeled.btn-warn > .btn-lb{background:rgba(0,0,0,.12)} /* Symbolfeld rechts */ .btn-labeled.rechts{flex-direction:row-reverse} /* — Mit Aufklappmenü — */ .btn-menu{position:relative} .btn-menu > .pfeil{display:inline-flex;margin-left:2px;opacity:.8} .btn-menu > .pfeil svg{width:14px;height:14px} /* geteilt: Hauptaktion + eigener Aufklappteil */ .btn-split{display:inline-flex} .btn-split > .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0} .btn-split > .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0; padding-inline:8px;margin-left:1px;position:relative} .btn-split > .btn:last-child::before{content:"";position:absolute;left:0;top:6px;bottom:6px; width:1px;background:rgba(255,255,255,.28)} /* — Ladezustand — */ .btn.laedt{pointer-events:none;position:relative;color:transparent!important} .btn.laedt > *{opacity:0} .btn.laedt::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; animation:spink .7s linear infinite;color:var(--on-accent);opacity:1} .btn-neutral.laedt::after,.btn-ghost.laedt::after,.btn-outline.laedt::after{color:var(--accent)} /* mit Fortschritt im Knopf */ .btn-fortschritt{position:relative;overflow:hidden} .btn-fortschritt > i.bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.22); transition:width .3s;pointer-events:none} /* — Deaktiviert mit Begründung — */ .btn[disabled]{opacity:.45} .btn-warum{position:relative;display:inline-flex} .btn-warum > .grund{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%); background:var(--panel-3);border:1px solid var(--line);border-radius:8px;padding:6px 10px; font-family:var(--font-body);font-size:11px;color:var(--muted);white-space:nowrap;box-shadow:var(--shadow); opacity:0;pointer-events:none;transition:.15s;z-index:40} .btn-warum:hover > .grund{opacity:1} /* — Umschalt-Knopf (gedrückt / nicht gedrückt) — */ .btn-toggle.an{background:color-mix(in srgb,var(--accent) 17%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)} /* .hintline war ein Flex-Container — dadurch wurden fette oder mono-ausgezeichnete Wörter im Fließtext zu eigenen Flex-Elementen und sprangen aus der Zeile. Jetzt normaler Textfluss, das Symbol wird per Grundlinie ausgerichtet. */ .hintline{display:block} .hintline > svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px} .hintline > svg:not(:first-child){margin-left:4px} /* ============================================================ Gefüllte Buttons: dunkler Rand (Oliver, 24.07. — Variante C) Nicht Schwarz, sondern je eine dunklere Fassung der eigenen Farbe — dadurch harmonisch und in allen drei Themes tragfähig. ============================================================ */ .btn-primary,.btn-primary:hover{border-color:color-mix(in srgb,var(--accent) 52%,#000)} .btn-danger,.btn-danger:hover{border-color:color-mix(in srgb,var(--crit) 48%,#000)} .btn-success,.btn-success:hover{border-color:color-mix(in srgb,var(--good) 45%,#000)} .btn-warn,.btn-warn:hover{border-color:color-mix(in srgb,var(--warn) 48%,#000)} .btn-info,.btn-info:hover{border-color:color-mix(in srgb,var(--info) 52%,#000)} .btn-akz,.btn-akz:hover{border-color:color-mix(in srgb,var(--accent2) 50%,#000)} .btn-neutral,.btn-neutral:hover{border-color:color-mix(in srgb,var(--line) 55%,#000)} /* Im hellen Theme darf die Kante etwas weicher sein, sonst wirkt sie hart */ :root[data-theme="daylight"] .btn-primary,:root[data-theme="daylight"] .btn-primary:hover{border-color:color-mix(in srgb,var(--accent) 68%,#000)} :root[data-theme="daylight"] .btn-danger,:root[data-theme="daylight"] .btn-danger:hover{border-color:color-mix(in srgb,var(--crit) 64%,#000)} :root[data-theme="daylight"] .btn-success,:root[data-theme="daylight"] .btn-success:hover{border-color:color-mix(in srgb,var(--good) 60%,#000)} :root[data-theme="daylight"] .btn-warn,:root[data-theme="daylight"] .btn-warn:hover{border-color:color-mix(in srgb,var(--warn) 62%,#000)} :root[data-theme="daylight"] .btn-info,:root[data-theme="daylight"] .btn-info:hover{border-color:color-mix(in srgb,var(--info) 68%,#000)} :root[data-theme="daylight"] .btn-akz,:root[data-theme="daylight"] .btn-akz:hover{border-color:color-mix(in srgb,var(--accent2) 64%,#000)}