/* ════════════════════════════════════════════════════════════════════════ Solveum · Prototyp (Arbeitstitel) · Thema „Liquid Glass" Layout: langsam fließender Farbverlauf aus den Markenfarben des Hauses als Grund, darüber klare Glasflächen in drei Stärken mit Lichtkante und Glanz. Keine Umrandungen: Ebenen trennen sich über Licht, Schatten und Füllung. Ecken bewusst knapp gehalten. ════════════════════════════════════════════════════════════════════════ */ @property --aur-l1 { syntax: ''; inherits: true; initial-value: #E6ECF5; } @property --aur-l2 { syntax: ''; inherits: true; initial-value: #EFEAE3; } @property --aur-l3 { syntax: ''; inherits: true; initial-value: #E3EEEC; } @property --aur-lb { syntax: ''; inherits: true; initial-value: #F2F4F8; } @property --aur-d1 { syntax: ''; inherits: true; initial-value: #1F2A3A; } @property --aur-d2 { syntax: ''; inherits: true; initial-value: #2A2620; } @property --aur-d3 { syntax: ''; inherits: true; initial-value: #1C2A29; } @property --aur-db { syntax: ''; inherits: true; initial-value: #0F1217; } @property --room { syntax: ''; inherits: true; initial-value: transparent; } :root { color-scheme: light; transition: --aur-l1 .9s var(--ease), --aur-l2 .9s var(--ease), --aur-l3 .9s var(--ease), --aur-lb .9s var(--ease), --aur-d1 .9s var(--ease), --aur-d2 .9s var(--ease), --aur-d3 .9s var(--ease), --aur-db .9s var(--ease), --room .9s var(--ease); /* Hausfarbe (White-Label). JS überschreibt --acc-* und --aur-* */ --acc-l: #2B4C7E; --acc-l-hover: #193969; --acc-l-weak: #EDF4FE; --acc-l-weak-2: #D4E4FD; --acc-l-text: #2B4C7E; --acc-l-tint: rgba(43, 76, 126, .22); --acc-d: #416498; --acc-d-hover: #5275AB; --acc-d-weak: #1A273B; --acc-d-weak-2: #25364F; --acc-d-text: #A5BFE8; --acc-d-tint: rgba(43, 76, 126, .22); --aur-l1: #B9CAE6; --aur-l2: #D9C9E6; --aur-l3: #C6E2DB; --aur-lb: #EEF1F7; --aur-d1: #22385E; --aur-d2: #2F2445; --aur-d3: #173A36; --aur-db: #0E1116; --accent: var(--acc-l); --accent-hover: var(--acc-l-hover); --accent-weak: var(--acc-l-weak); --accent-weak-2: var(--acc-l-weak-2); --accent-text: var(--acc-l-text); --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); --accent-soft-2: color-mix(in srgb, var(--accent) 20%, transparent); --on-accent: #FFFFFF; --aur-1: var(--aur-l1); --aur-2: var(--aur-l2); --aur-3: var(--aur-l3); --aur-base: var(--aur-lb); /* Glas in drei Stärken: Rahmen · Inhalt · Überlagerung. Bewusst klar, damit der Verlauf durchscheint */ --glass-1: rgba(255, 255, 255, .30); --glass-2: rgba(255, 255, 255, .42); --glass-3: rgba(255, 255, 255, .70); --glass-solid: rgba(255, 255, 255, .96); --blur: 22px; --sat: 200%; /* Licht statt Linie: weiche Lichtkante oben, innerer Schimmer an den Rändern */ --rim: inset 0 1px 1.5px rgba(255, 255, 255, .9), inset 0 -1px 2px rgba(255, 255, 255, .28), inset 0 0 22px rgba(255, 255, 255, .26); --rim-soft: inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 0 12px rgba(255, 255, 255, .18); --sheen: linear-gradient(155deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 20%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .16) 100%); --sheen-strong: linear-gradient(155deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .14) 100%); --spot: rgba(255, 255, 255, .42); /* Füllungen statt Linien */ --fill-1: rgba(22, 32, 54, .045); --fill-2: rgba(22, 32, 54, .075); --fill-3: rgba(22, 32, 54, .12); --field: rgba(22, 32, 54, .065); --field-focus: rgba(255, 255, 255, .95); --btn: rgba(255, 255, 255, .72); --btn-hover: rgba(255, 255, 255, .96); --seg-on: rgba(255, 255, 255, .95); --th-bg: rgba(246, 248, 252, .9); --zebra: rgba(22, 32, 54, .022); /* Text */ --text: #121722; --text-2: #3F4858; --text-3: #535C6B; --paper: #FFFFFF; --paper-text: #22262B; /* Status: immer mit Symbol und Wort */ --ok: #0E7A3D; --ok-bg: rgba(14, 122, 61, .11); --warn: #8A4B00; --warn-bg: rgba(199, 119, 0, .14); --warn-icon: #C77700; --bad: #B42318; --bad-bg: rgba(180, 35, 24, .10); --info: #1F5FBF; --info-bg: rgba(31, 95, 191, .10); --muted: #475061; --muted-bg: rgba(22, 32, 54, .06); /* Tiefe */ --sh-1: 0 1px 1px rgba(16, 24, 40, .04), 0 3px 10px rgba(16, 24, 40, .06); --sh-card: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 26px rgba(16, 24, 40, .08); --sh-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .13); --sh-float: 0 4px 12px rgba(16, 24, 40, .08), 0 26px 64px rgba(16, 24, 40, .17); --sh-modal: 0 10px 30px rgba(16, 24, 40, .14), 0 44px 110px rgba(16, 24, 40, .28); --scrim: rgba(18, 24, 36, .26); --focus-glow: color-mix(in srgb, var(--accent) 55%, transparent); /* Typografie: Systemschrift (SF Pro auf dem Mac, Segoe UI Variable auf Windows) */ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --font-paper: "Times New Roman", Georgia, serif; --fs-cap: .75rem; --fs-meta: .8125rem; --fs-ui: .9375rem; --fs-body: 1rem; --fs-sub: 1.0625rem; --fs-t3: 1.25rem; --fs-t2: 1.5rem; --fs-t1: 1.875rem; /* Maße: knappe Ecken */ /* Form: ein Grundradius für alles (Jasper: zuerst 1 px, jetzt 5 px). Änderbar hier oder in Verwaltung › Erscheinungsbild. Die Stufen bleiben als eigene Tokens, damit sich später wieder staffeln lässt. Rund bleiben nur Lichteffekte. */ --radius: 5px; /* Flächen: Karten, Felder, Knöpfe, Menüs, Zeilen */ --radius-pill: 999px; /* Chips, Pills, Zähler, Schalter, Fortschritt, Punkte, Feldmarken */ --radius-avatar: 50%; /* Avatare aus Initialen */ --radius-app: 24%; /* App-Symbole: Container-Plättchen, Zeichen von Mandat und Haus */ /* Symbole: Größe als Faktor, Farbe kräftig oder dezent (Verwaltung › Form & Symbole) */ --icon-scale: 1.1; /* Liquid Glass: Unschärfe hinter echtem Glas deutlich geringer als bei Milchglas, damit die Brechung sichtbar bleibt */ --lg-blur: 1px; --icon-fg: var(--text); --r-xs: var(--radius); --r-sm: var(--radius); --r-md: var(--radius); --r-lg: var(--radius); --r-xl: var(--radius); --r-full: var(--radius-pill); --control-h: 2.25rem; --row-h: 2.75rem; --pad: 1.25rem; --gap: 1rem; --sb-w: 15.75rem; --insp-w: 24rem; --ease: cubic-bezier(.2, 0, 0, 1); --t-fast: 140ms; --t-base: 220ms; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: var(--acc-d); --accent-hover: var(--acc-d-hover); --accent-weak: var(--acc-d-weak); --accent-weak-2: var(--acc-d-weak-2); --accent-text: var(--acc-d-text); --accent-soft: color-mix(in srgb, var(--acc-d-text) 15%, transparent); --accent-soft-2: color-mix(in srgb, var(--acc-d-text) 24%, transparent); --aur-1: var(--aur-d1); --aur-2: var(--aur-d2); --aur-3: var(--aur-d3); --aur-base: var(--aur-db); --glass-1: rgba(24, 28, 38, .36); --glass-2: rgba(22, 26, 36, .46); --glass-3: rgba(28, 32, 42, .78); --glass-solid: rgba(32, 37, 46, .97); --rim: inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 -1px 2px rgba(255, 255, 255, .05), inset 0 0 22px rgba(255, 255, 255, .05); --rim-soft: inset 0 1px 1px rgba(255, 255, 255, .14), inset 0 0 12px rgba(255, 255, 255, .04); --sheen: linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 24%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .04) 100%); --sheen-strong: linear-gradient(155deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 55%); --spot: rgba(255, 255, 255, .09); --fill-1: rgba(255, 255, 255, .055); --fill-2: rgba(255, 255, 255, .085); --fill-3: rgba(255, 255, 255, .13); --field: rgba(255, 255, 255, .07); --field-focus: rgba(255, 255, 255, .12); --btn: rgba(255, 255, 255, .09); --btn-hover: rgba(255, 255, 255, .15); --seg-on: rgba(255, 255, 255, .16); --th-bg: rgba(34, 39, 48, .94); --zebra: rgba(255, 255, 255, .025); --text: #ECEFF3; --text-2: #BAC1CB; --text-3: #9CA4AF; --paper: #F7F5F0; --paper-text: #1E2226; --ok: #5CC98A; --ok-bg: rgba(46, 160, 95, .18); --warn: #F2B65A; --warn-bg: rgba(242, 182, 90, .15); --warn-icon: #F2B65A; --bad: #FF8A80; --bad-bg: rgba(255, 107, 94, .15); --info: #8AB4F8; --info-bg: rgba(110, 160, 250, .15); --muted: #BAC1CB; --muted-bg: rgba(255, 255, 255, .07); --sh-1: 0 1px 1px rgba(0, 0, 0, .25), 0 3px 10px rgba(0, 0, 0, .25); --sh-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .32); --sh-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .42); --sh-float: 0 4px 12px rgba(0, 0, 0, .35), 0 28px 70px rgba(0, 0, 0, .5); --sh-modal: 0 10px 30px rgba(0, 0, 0, .4), 0 44px 110px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .42); } } :root[data-theme="dark"] { color-scheme: dark; --accent: var(--acc-d); --accent-hover: var(--acc-d-hover); --accent-weak: var(--acc-d-weak); --accent-weak-2: var(--acc-d-weak-2); --accent-text: var(--acc-d-text); --accent-soft: color-mix(in srgb, var(--acc-d-text) 15%, transparent); --accent-soft-2: color-mix(in srgb, var(--acc-d-text) 24%, transparent); --aur-1: var(--aur-d1); --aur-2: var(--aur-d2); --aur-3: var(--aur-d3); --aur-base: var(--aur-db); --glass-1: rgba(24, 28, 38, .36); --glass-2: rgba(22, 26, 36, .46); --glass-3: rgba(28, 32, 42, .78); --glass-solid: rgba(32, 37, 46, .97); --rim: inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 -1px 2px rgba(255, 255, 255, .05), inset 0 0 22px rgba(255, 255, 255, .05); --rim-soft: inset 0 1px 1px rgba(255, 255, 255, .14), inset 0 0 12px rgba(255, 255, 255, .04); --sheen: linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 24%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .04) 100%); --sheen-strong: linear-gradient(155deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 55%); --spot: rgba(255, 255, 255, .09); --fill-1: rgba(255, 255, 255, .055); --fill-2: rgba(255, 255, 255, .085); --fill-3: rgba(255, 255, 255, .13); --field: rgba(255, 255, 255, .07); --field-focus: rgba(255, 255, 255, .12); --btn: rgba(255, 255, 255, .09); --btn-hover: rgba(255, 255, 255, .15); --seg-on: rgba(255, 255, 255, .16); --th-bg: rgba(34, 39, 48, .94); --zebra: rgba(255, 255, 255, .025); --text: #ECEFF3; --text-2: #BAC1CB; --text-3: #9CA4AF; --paper: #F7F5F0; --paper-text: #1E2226; --ok: #5CC98A; --ok-bg: rgba(46, 160, 95, .18); --warn: #F2B65A; --warn-bg: rgba(242, 182, 90, .15); --warn-icon: #F2B65A; --bad: #FF8A80; --bad-bg: rgba(255, 107, 94, .15); --info: #8AB4F8; --info-bg: rgba(110, 160, 250, .15); --muted: #BAC1CB; --muted-bg: rgba(255, 255, 255, .07); --sh-1: 0 1px 1px rgba(0, 0, 0, .25), 0 3px 10px rgba(0, 0, 0, .25); --sh-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .32); --sh-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .42); --sh-float: 0 4px 12px rgba(0, 0, 0, .35), 0 28px 70px rgba(0, 0, 0, .5); --sh-modal: 0 10px 30px rgba(0, 0, 0, .4), 0 44px 110px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .42); } /* Persönliche Einstellungen */ :root[data-font="gross"] { font-size: 112.5%; } :root[data-density="kompakt"] { --control-h: 2rem; --row-h: 2.25rem; --pad: 1rem; --gap: .75rem; } /* ─────────────── Grundlagen ─────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-ui); line-height: 1.45; color: var(--text); background: var(--aur-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Farbiger Grund aus den Markenfarben, der ganz langsam fließt: über ihm wird das Glas sichtbar. Fünf weiche Flächen, je eigener Takt (40–64 s), nur transform wird animiert. */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--aur-base); transition: background .6s var(--ease); } .aurora i { position: absolute; width: 74vmax; height: 74vmax; border-radius: 50%; will-change: transform; background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 62%, transparent) 42%, transparent 100%); animation: drift1 var(--d) ease-in-out infinite alternate; transition: background .6s var(--ease); } .aurora i:nth-child(1) { --c: var(--aur-1); --d: 46s; left: -24vmax; top: -32vmax; } .aurora i:nth-child(2) { --c: var(--aur-2); --d: 58s; right: -28vmax; top: -22vmax; animation-name: drift2; } .aurora i:nth-child(3) { --c: var(--aur-3); --d: 52s; left: 4vmax; bottom: -42vmax; animation-name: drift3; } .aurora i:nth-child(4) { --c: var(--aur-1); --d: 64s; right: -22vmax; bottom: -36vmax; width: 58vmax; height: 58vmax; animation-name: drift2; animation-direction: alternate-reverse; } .aurora i:nth-child(5) { --c: var(--aur-3); --d: 40s; left: 34vw; top: 14vh; width: 42vmax; height: 42vmax; opacity: .75; animation-name: drift3; animation-direction: alternate-reverse; } @keyframes drift1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } 100% { transform: translate3d(15vmax, -3vmax, 0) scale(.94); } } @keyframes drift2 { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-11vmax, 8vmax, 0) scale(.92); } 100% { transform: translate3d(-5vmax, 15vmax, 0) scale(1.1); } } @keyframes drift3 { 0% { transform: translate3d(0, 0, 0) scale(.95); } 50% { transform: translate3d(12vmax, -9vmax, 0) scale(1.1); } 100% { transform: translate3d(-8vmax, -13vmax, 0) scale(1); } } :root[data-motion="aus"] .aurora i, :root[data-transparency="reduziert"] .aurora i { animation: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; letter-spacing: -.015em; } p { margin: 0; } .num, .tnum { font-variant-numeric: tabular-nums lining-nums; } .mono { font-family: var(--font-mono); font-size: .85em; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow) !important; } ::selection { background: var(--accent-soft-2); } .i { width: calc(1.25rem * var(--icon-scale)); height: calc(1.25rem * var(--icon-scale)); flex: none; display: inline-block; vertical-align: middle; fill: currentColor; } .i-sm { width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } .i-lg { width: calc(1.5rem * var(--icon-scale)); height: calc(1.5rem * var(--icon-scale)); } /* ─────────────── Glas-Materialien ─────────────── */ .sb, .topbar, .tabs, .cmdbar, .g-head, .as-banner, .ct-row, .prov { background: var(--sheen), var(--glass-1); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-1); } .card, .tile, .phases, .chain, .inbox { background: var(--sheen), var(--glass-2); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-card); } .insp, .glass-menu, .dialog, .sheet, .ql, .toast { background: var(--sheen-strong), var(--glass-3); -webkit-backdrop-filter: blur(36px) saturate(var(--sat)); backdrop-filter: blur(36px) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-float); } /* Lichtfleck, der dem Zeiger über das Glas folgt */ .card, .tile, .ct-row, .prov { position: relative; isolation: isolate; } .card::before, .tile::before, .ct-row::before, .prov::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, -20%), var(--spot), transparent 62%); transition: opacity .35s var(--ease); } .card:hover::before, .tile:hover::before, .ct-row:hover::before, .prov:hover::before { opacity: 1; } /* Glanz auf farbigen Symbolen (wie App-Icons) */ .plate, .mlogo, .tenant-logo, .mono-badge, .avatar { position: relative; overflow: hidden; isolation: isolate; } .plate::after, .mlogo::after, .tenant-logo::after, .mono-badge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .06) 48%, rgba(0, 0, 0, .06) 100%); } /* ─────────────── App-Rahmen ─────────────── */ .app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100%; } .sidebar { position: sticky; top: env(safe-area-inset-top, 0px); height: 100dvh; padding: .625rem 0 .625rem .625rem; z-index: 30; } .sb { height: 100%; display: flex; flex-direction: column; gap: .125rem; border-radius: var(--r-xl); padding: .875rem .625rem; overflow: auto; } .tenant { display: flex; align-items: center; gap: .625rem; padding: .25rem .375rem 1rem; } .tenant-logo { width: 2.375rem; height: 2.375rem; border-radius: var(--radius-app); display: grid; place-items: center; flex: none; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: .875rem; letter-spacing: .02em; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); } .tenant-name { font-weight: 680; font-size: .9375rem; line-height: 1.2; } .tenant-sub { color: var(--text-3); font-size: var(--fs-meta); } .nav-label { font-size: var(--fs-cap); font-weight: 650; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; padding: 1rem .625rem .375rem; } .nav-item { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.375rem; padding: .375rem .625rem; border-radius: var(--r-md); background: transparent; text-align: left; color: var(--text); font-size: var(--fs-ui); transition: background var(--t-fast) var(--ease); } .nav-item:hover { background: var(--fill-1); text-decoration: none; } .nav-item[aria-current="page"] { background: var(--sheen), var(--btn-hover); box-shadow: var(--rim-soft), var(--sh-1); font-weight: 650; } .nav-item[aria-current="page"] .i { color: var(--accent-text); } .nav-item .i { color: var(--icon-fg); } .nav-item .count { margin-left: auto; font-size: var(--fs-cap); font-weight: 700; min-width: 1.375rem; padding: 0 .375rem; height: 1.25rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); } .nav-item .count.soft { background: var(--fill-2); color: var(--text-2); } .mono-badge { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-app); display: grid; place-items: center; color: #fff; font-size: .6875rem; font-weight: 750; flex: none; } .sb-foot { margin-top: auto; padding-top: .75rem; display: grid; gap: .125rem; } .me { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--r-md); background: var(--fill-1); } .avatar { width: 2rem; height: 2rem; border-radius: var(--radius-avatar); display: grid; place-items: center; font-size: .75rem; font-weight: 680; color: #fff; flex: none; background: var(--text-3); } .avatar.sm { width: 1.625rem; height: 1.625rem; font-size: .6875rem; } .me-name { font-weight: 650; font-size: var(--fs-meta); line-height: 1.2; } .me-role { color: var(--text-3); font-size: var(--fs-cap); } .powered { color: var(--text-3); font-size: var(--fs-cap); padding: .375rem .625rem 0; } .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + .625rem); z-index: 25; display: flex; align-items: center; gap: .625rem; min-height: 3.5rem; padding: .5rem 1rem; margin: .625rem .625rem 0 .875rem; border-radius: var(--r-xl); background: var(--sheen), color-mix(in srgb, var(--glass-2) 90%, transparent); } .crumbs { display: flex; align-items: center; gap: .125rem; min-width: 0; color: var(--text-2); font-size: var(--fs-ui); } .crumbs a, .crumbs button { color: var(--text-2); background: none; padding: .3125rem .5rem; border-radius: var(--r-sm); white-space: nowrap; } .crumbs a:hover, .crumbs button:hover { background: var(--fill-1); color: var(--text); text-decoration: none; } .crumbs .here { color: var(--text); font-weight: 650; padding: .25rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs .i { color: var(--icon-fg); width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } .search { margin-left: auto; display: flex; align-items: center; gap: .5rem; width: min(26rem, 36vw); height: 2.25rem; padding: 0 .75rem; border-radius: var(--r-md); background: var(--field); color: var(--text-3); cursor: text; transition: background var(--t-fast) var(--ease); } .search:hover { background: var(--fill-2); } .search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } kbd { font-family: var(--font); font-size: var(--fs-cap); font-weight: 650; color: var(--text-2); background: var(--fill-2); border-radius: var(--r-sm); padding: 0 .375rem; line-height: 1.375rem; white-space: nowrap; } .icon-btn { position: relative; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: transparent; display: grid; place-items: center; color: var(--text-2); flex: none; transition: background var(--t-fast) var(--ease); } .icon-btn:hover { background: var(--fill-1); color: var(--text); } .icon-btn .dot { position: absolute; top: .4375rem; right: .5rem; width: .5rem; height: .5rem; border-radius: var(--r-full); background: var(--bad); } .icon-btn.pick { background: var(--fill-1); } .icon-btn.pick[aria-pressed="true"] { background: var(--accent-soft-2); color: var(--accent-text); } .menu-btn { display: none; } .page { padding: 1.25rem 1.25rem 3rem 1.375rem; min-width: 0; } .page-inner { max-width: 92rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } /* ─────────────── Typo-Bausteine ─────────────── */ .h1 { font-size: var(--fs-t1); line-height: 1.2; font-weight: 720; letter-spacing: -.022em; } .h2 { font-size: var(--fs-t2); line-height: 1.25; font-weight: 700; letter-spacing: -.018em; } .h3 { font-size: var(--fs-t3); line-height: 1.3; font-weight: 680; } .h4 { font-size: var(--fs-sub); line-height: 1.35; font-weight: 650; } .meta { color: var(--text-3); font-size: var(--fs-meta); } .muted { color: var(--text-2); } .lead { font-size: var(--fs-body); color: var(--text-2); max-width: 70ch; } /* ─────────────── Buttons ─────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; height: var(--control-h); padding: 0 .9375rem; border-radius: var(--r-md); background: var(--sheen), var(--btn); color: var(--text); box-shadow: var(--rim-soft), var(--sh-1); font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { background: var(--btn-hover); text-decoration: none; } .btn:active { transform: scale(.985); } .btn .i { color: var(--icon-fg); } .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff) 0%, var(--accent) 60%); color: var(--on-accent); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .14), 0 4px calc(var(--glow-r) * 1.5) color-mix(in srgb, var(--accent) var(--glow-a), transparent); } .btn.primary .i { color: var(--on-accent); } .btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 70%); } .btn.subtle { background: transparent; box-shadow: none; } .btn.subtle:hover { background: var(--fill-1); } .btn.danger { color: var(--bad); } .btn.danger .i { color: var(--bad); } .btn.sm { height: 1.875rem; padding: 0 .6875rem; font-size: var(--fs-meta); border-radius: var(--r-sm); } .btn.lg { height: 2.75rem; padding: 0 1.25rem; font-size: var(--fs-body); border-radius: var(--r-lg); } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; } .btn .kbd-hint { font-weight: 500; opacity: .78; font-size: var(--fs-cap); margin-left: .125rem; } .cmdbar { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; padding: .5rem; border-radius: var(--r-lg); } .cmdbar .sep { width: .5rem; } .cmdbar .spacer { flex: 1; } .cmdbar.selecting { background: var(--sheen), color-mix(in srgb, var(--accent) 12%, var(--glass-2)); } .cmdbar .sel-count { font-weight: 650; padding: 0 .5rem; } .seg { display: inline-flex; padding: .1875rem; gap: .125rem; background: var(--fill-1); border-radius: var(--r-md); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg > * { flex: none; } .seg button { background: transparent; height: calc(var(--control-h) - .375rem); padding: 0 .75rem; border-radius: var(--r-sm); color: var(--text-2); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; transition: background var(--t-fast) var(--ease); } .seg button:hover { color: var(--text); } .seg button[aria-pressed="true"], .seg a[aria-current="page"] { background: var(--sheen), var(--seg-on); color: var(--text); box-shadow: var(--rim-soft), var(--sh-1); } .seg a { height: calc(var(--control-h) - .375rem); padding: 0 .875rem; border-radius: var(--r-sm); color: var(--text-2); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; } .seg a:hover { color: var(--text); text-decoration: none; } .seg-lg { width: fit-content; max-width: 100%; overflow-x: auto; } .seg-lg a { height: 2.25rem; } .seg button .n { font-size: var(--fs-cap); color: var(--text-3); font-weight: 650; } /* ─────────────── Chips & Etiketten ─────────────── */ .chip { display: inline-flex; align-items: center; gap: .3125rem; height: 1.5rem; padding: 0 .5625rem; border-radius: var(--r-full); font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; background: var(--muted-bg); color: var(--muted); } .chip .i { width: calc(.9375rem * var(--icon-scale)); height: calc(.9375rem * var(--icon-scale)); } .chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.warn { background: var(--warn-bg); color: var(--warn); } .chip.warn .i { color: var(--warn-icon); } .chip.bad { background: var(--bad-bg); color: var(--bad); } .chip.info { background: var(--info-bg); color: var(--info); } .chip.accent { background: var(--accent-soft); color: var(--accent-text); } .chip.outline { background: var(--fill-1); color: var(--text-2); } button.chip:hover { filter: brightness(.97); } .vis { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.5rem; padding: .125rem .5rem; border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 560; line-height: 1.25; } .vis .i { width: calc(.9375rem * var(--icon-scale)); height: calc(.9375rem * var(--icon-scale)); } .vis.intern { background: var(--muted-bg); color: var(--text-2); } .vis.extern { background: var(--accent-soft); color: var(--accent-text); } .vis.sensibel { background: var(--warn-bg); color: var(--warn); } .vis.sensibel .i { color: var(--warn-icon); } /* ─────────────── Karten & Listen ─────────────── */ .card { border-radius: var(--r-lg); min-width: 0; } .card-head { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding: 1rem var(--pad) .5rem; } .card-head .h4 { display: flex; align-items: center; gap: .5rem; } .card-head .h4 .i { color: var(--text-3); } .card-head .right { margin-left: auto; display: flex; gap: .375rem; align-items: center; } .card-body { padding: 0 var(--pad) var(--pad); } .card-foot { padding: .25rem calc(var(--pad) - .5rem) .75rem; display: flex; gap: .5rem; align-items: center; } .plate { width: 2rem; height: 2rem; border-radius: var(--radius-app); display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .14), var(--glow-pc); } .plate.lg { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-app); } .plate.lg .i { width: calc(1.5rem * var(--icon-scale)); height: calc(1.5rem * var(--icon-scale)); } .plate.sm { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-app); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); } .plate.sm .i { width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } .list { list-style: none; margin: 0; padding: .25rem .5rem .625rem; display: grid; gap: .125rem; } .list > li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r-md); min-height: var(--row-h); transition: background var(--t-fast) var(--ease); } .list > li:hover { background: var(--fill-1); } .list .grow { flex: 1; min-width: 0; } .list .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .list .s { color: var(--text-3); font-size: var(--fs-meta); } .list .acts { display: flex; gap: .375rem; flex: none; } .list li.clickable { cursor: pointer; } .grid { display: grid; gap: var(--gap); } .cols-cockpit { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } .stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; } /* ─────────────── Mandatskopf, Phasen, Register ─────────────── */ .mhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .mhead.compact { gap: .875rem; } .mhead-top { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .mhead.compact .mhead-top { align-items: center; } .mlogo { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-app); display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 1.125rem; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .mhead.compact .mlogo { width: 2.625rem; height: 2.625rem; border-radius: var(--r-lg); font-size: .875rem; } .mtitle { min-width: 0; flex: 1; display: grid; gap: .3125rem; } .mhead.compact .mtitle { gap: .375rem; } .mfacts { display: flex; flex-wrap: wrap; gap: .375rem .875rem; color: var(--text-2); font-size: var(--fs-ui); align-items: center; } .mfacts b { color: var(--text); font-weight: 650; } .mactions { display: flex; gap: .5rem; flex-wrap: wrap; } .phases { display: flex; align-items: stretch; gap: .25rem; padding: .3125rem; border-radius: var(--r-lg); overflow-x: auto; } .ph { flex: 1 1 0; min-width: 9.75rem; padding: .625rem .75rem; border-radius: var(--r-md); display: grid; gap: .125rem; } .ph .row { display: flex; align-items: flex-start; gap: .5rem; } .ph .row .dot { margin-top: .0625rem; flex: none; } .ph .dot { width: 1.25rem; height: 1.25rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--fill-2); } .ph .n { font-weight: 650; font-size: var(--fs-ui); line-height: 1.3; } .ph .d { color: var(--text-3); font-size: var(--fs-meta); padding-left: 1.75rem; min-height: 1.15rem; } .ph.done .dot { background: var(--ok); color: #fff; } .ph.done .dot .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); } .ph.done .n { color: var(--text-2); font-weight: 560; } .ph.now { background: var(--accent-soft); } .ph.now .dot { background: var(--accent); box-shadow: var(--glow-acc); } .ph.now .dot::after { content: ""; width: .4375rem; height: .4375rem; border-radius: var(--r-full); background: #fff; } .ph.now .n { color: var(--accent-text); } .ph.next .n { color: var(--text-2); font-weight: 560; } .tabs { display: flex; gap: .125rem; padding: .25rem; border-radius: var(--r-lg); overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 2.375rem; padding: 0 .875rem; background: transparent; color: var(--text-2); font-weight: 600; white-space: nowrap; border-radius: var(--r-md); transition: background var(--t-fast) var(--ease); } .tab:hover { color: var(--text); background: var(--fill-1); text-decoration: none; } .tab .i { color: var(--tab-color, var(--text-3)); } .tab[aria-selected="true"] { color: var(--text); font-weight: 680; background: var(--seg-on); box-shadow: var(--sh-1); } .tab .count { font-size: var(--fs-cap); font-weight: 700; padding: 0 .375rem; min-width: 1.25rem; height: 1.25rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); } /* ─────────────── Tabellen (Excel-Muster, ohne Linien) ─────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); } table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); } table.t th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 650; font-size: var(--fs-cap); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--th-bg); height: 2.5rem; padding: 0 .75rem; white-space: nowrap; user-select: none; } table.t th button.sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; border-radius: var(--r-xs); } table.t th button.sort:hover { color: var(--text); } table.t th button.sort .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); color: var(--accent-text); } table.t th.r, table.t td.r { text-align: right; } table.t td { height: var(--row-h); padding: .4375rem .75rem; vertical-align: middle; transition: background var(--t-fast) var(--ease); } table.t tbody tr:nth-child(even) td { background: var(--zebra); } table.t tbody tr.click { cursor: pointer; } table.t tbody tr:hover td { background: var(--fill-1); } table.t tbody tr.sel td { background: color-mix(in srgb, var(--accent) 8%, transparent); } table.t tbody tr.active td { background: var(--accent-soft-2); } table.t tbody tr.blocked td { background: var(--bad-bg); } table.t tbody td:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); } table.t tbody td:last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); } table.t tfoot td { position: sticky; bottom: 0; background: var(--th-bg); font-weight: 680; height: 2.75rem; padding: 0 .75rem; } table.t .cb { width: 2.75rem; padding-right: 0; } table.t .name { font-weight: 600; } table.t .sub { display: block; color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; } .cbx { appearance: none; -webkit-appearance: none; width: 1.125rem; height: 1.125rem; margin: 0; border-radius: var(--r-sm); background: var(--fill-3); cursor: pointer; vertical-align: middle; display: inline-grid; place-items: center; transition: background var(--t-fast) var(--ease); } .cbx:hover { background: color-mix(in srgb, var(--text) 22%, transparent); } .cbx:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent); } .tbl-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .875rem var(--pad) .625rem; } .field-search { display: flex; align-items: center; gap: .375rem; height: var(--control-h); padding: 0 .75rem; border-radius: var(--r-md); background: var(--field); min-width: 14rem; color: var(--text-3); } .field-search input { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; color: var(--text); } .field-search:focus-within { background: var(--field-focus); box-shadow: 0 0 0 3px var(--focus-glow), var(--sh-1); } /* ─────────────── Inspector ─────────────── */ .split { display: grid; grid-template-columns: minmax(0, 1fr) var(--insp-w); gap: var(--gap); align-items: start; } .split.no-insp { grid-template-columns: minmax(0, 1fr); } .insp { position: sticky; top: 5.25rem; max-height: calc(100dvh - 6.25rem); overflow: auto; border-radius: var(--r-xl); } .insp.anim { animation: sheet3d .4s cubic-bezier(.16, 1, .3, 1); transform-origin: 100% 50%; } .insp-head { position: sticky; top: 0; z-index: 2; display: flex; gap: .625rem; align-items: flex-start; padding: 1rem 1rem .75rem; background: var(--glass-3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .insp-head .t { font-weight: 680; font-size: var(--fs-sub); line-height: 1.3; } .insp-sec { padding: .75rem 1rem; display: grid; gap: .625rem; } .insp-sec h5 { margin: 0; font-size: var(--fs-cap); font-weight: 700; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; } .kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .4375rem .75rem; font-size: var(--fs-ui); margin: 0; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .insp-actions { position: sticky; bottom: 0; padding: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; background: linear-gradient(to top, var(--glass-3) 65%, transparent); } @keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } /* ─────────────── Papier (Dokumentvorschau) ─────────────── */ .paper { aspect-ratio: 1 / 1.414; width: 100%; background: var(--paper); color: var(--paper-text); border-radius: var(--r-xs); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .10); padding: 9% 9% 7%; font-family: var(--font-paper); overflow: hidden; position: relative; font-size: .5rem; line-height: 1.5; } .paper .p-kopf { font-weight: 700; font-size: 1.15em; font-family: var(--font); letter-spacing: -.01em; } .paper .p-sub { color: #5A6068; font-family: var(--font); font-size: .82em; margin-bottom: 1.4em; } .paper .p-az { font-family: var(--font); font-size: .82em; margin-bottom: 1em; } .paper .p-betreff { font-weight: 700; margin-bottom: 1em; } .paper p { margin-bottom: .9em; } .paper .p-sig { margin-top: 2em; font-style: italic; color: #4B5157; } .paper .p-table { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: .9em; } .paper .p-table td { padding: .35em 0; } .paper .p-table tr:nth-child(even) td { background: #F4F3EF; } .paper .p-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .paper.big { font-size: clamp(.6875rem, 1.05vw, .9375rem); } .paper .wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .paper .wm span { transform: rotate(-32deg); font-family: var(--font); font-weight: 700; font-size: 1.5em; color: rgba(43, 76, 126, .12); white-space: nowrap; letter-spacing: .04em; } .paper .seal { position: absolute; right: 7%; bottom: 5%; display: flex; align-items: center; gap: .4em; font-family: var(--font); font-size: .78em; color: #2F6B45; border-radius: var(--r-md); padding: .3em .6em; background: rgba(231, 244, 236, .9); } .paper .ln { height: .55em; background: #E7E4DD; border-radius: var(--r-xs); margin: .6em 0; } .paper mark, .letter mark { background: var(--warn-bg); color: var(--warn); padding: 0 .2em; border-radius: var(--r-xs); } .thumb { width: 2.5rem; flex: none; } .thumb .paper { padding: 12% 10%; font-size: .14rem; border-radius: var(--r-xs); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); } /* ─────────────── Kacheln (Bereiche) ─────────────── */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--gap); } .tile { display: grid; gap: .875rem; align-content: start; text-align: left; padding: 1.125rem; min-height: 9rem; border-radius: var(--r-lg); color: var(--text); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-base) var(--ease); } .tile:hover { box-shadow: var(--rim), var(--sh-hover); transform: perspective(700px) translateY(-2px) rotateX(calc(var(--kx, 0deg) * var(--d3))) rotateY(calc(var(--ky, 0deg) * var(--d3))); text-decoration: none; } .tile.sel { background: var(--sheen), color-mix(in srgb, var(--accent) 14%, var(--glass-2)); } .tile-top { display: flex; align-items: flex-start; gap: .875rem; } .tile-name { font-weight: 680; font-size: var(--fs-body); line-height: 1.3; color: var(--text); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .tile-meta { color: var(--text-3); font-size: var(--fs-meta); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .125rem; } .tile-meta .new { color: var(--accent-text); font-weight: 700; } .tile.empty { background: var(--fill-1); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 6rem; } .tile.empty .plate { filter: grayscale(.75) opacity(.7); } .tile.empty:hover { transform: none; } /* ─────────────── Posteingang (Dreispalter) ─────────────── */ .inbox { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr) minmax(20rem, 25rem); height: calc(100dvh - 15.5rem); min-height: 30rem; border-radius: var(--r-xl); overflow: hidden; } .inbox > * { min-width: 0; overflow: auto; } .ib-list { background: var(--fill-1); padding: 0 .375rem .375rem; } .ib-tools { position: sticky; top: 0; z-index: 1; margin: 0 -.375rem; padding: .625rem .75rem; display: flex; gap: .375rem; flex-wrap: wrap; background: var(--glass-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .ib-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .625rem; width: 100%; text-align: left; padding: .75rem; margin-top: .25rem; background: transparent; border-radius: var(--r-md); transition: background var(--t-fast) var(--ease); } .ib-item:hover { background: var(--fill-1); } .ib-item[aria-selected="true"] { background: var(--btn-hover); box-shadow: var(--sh-1); } .ib-item .src { grid-row: span 3; width: 2rem; height: 2rem; border-radius: var(--r-md); display: grid; place-items: center; background: var(--fill-2); color: var(--text-2); } .ib-item[aria-selected="true"] .src { background: var(--accent-soft); color: var(--accent-text); } .ib-item .who { font-weight: 680; display: flex; gap: .5rem; justify-content: space-between; align-items: baseline; } .ib-item .who .meta { font-weight: 400; white-space: nowrap; } .ib-item .subj { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ib-item .hint { display: flex; align-items: center; gap: .3125rem; color: var(--text-3); font-size: var(--fs-meta); } .ib-item .hint .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); color: var(--accent-text); } .ib-item.leaving { animation: leave 260ms var(--ease) forwards; } @keyframes leave { to { opacity: 0; transform: translateX(-16px); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } } .ib-view { padding: 1.25rem 1.5rem; display: grid; gap: 1rem; align-content: start; } .ib-view .mailhead { display: grid; gap: .3125rem; padding-bottom: .5rem; } .ib-view .mailbody { display: grid; gap: .75rem; font-size: var(--fs-body); max-width: 68ch; line-height: 1.55; } .attach { display: inline-flex; align-items: center; gap: .5rem; padding: .4375rem .75rem; border-radius: var(--r-md); background: var(--fill-1); font-size: var(--fs-meta); } .ib-file { max-width: 26rem; } .ib-side { display: flex; flex-direction: column; background: color-mix(in srgb, var(--glass-3) 55%, transparent); } .ib-side .insp-sec { padding: .875rem 1.125rem; } .ai-card { border-radius: var(--r-lg); padding: .875rem; display: grid; gap: .5rem; background: linear-gradient(140deg, var(--accent-soft-2), var(--accent-soft) 55%, transparent); } .ai-tag { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--fs-meta); font-weight: 700; color: var(--accent-text); } .ai-target { display: flex; align-items: center; gap: .5rem; font-weight: 680; font-size: var(--fs-body); } .ai-why { color: var(--text-2); font-size: var(--fs-meta); } .conf { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--fs-meta); color: var(--text-2); } .conf i { display: inline-flex; gap: 2px; } .conf i b { width: .375rem; height: .75rem; border-radius: var(--r-xs); background: var(--fill-3); } .conf i b.on { background: var(--ok); } .conf.mittel i b.on { background: var(--warn-icon); } .conf.niedrig i b.on { background: var(--bad); } /* ─────────────── Formulare (gefüllte Felder statt Rahmen) ─────────────── */ .form { display: grid; gap: .75rem; } .fld { display: grid; gap: .3125rem; } .fld > label, .fld > .lbl { font-size: var(--fs-meta); font-weight: 650; color: var(--text-2); } input.inp, select.sel, textarea.ta { width: 100%; min-height: var(--control-h); padding: .4375rem .75rem; border: 0; border-radius: var(--r-md); background-color: var(--field); color: var(--text); transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } select.sel { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23727B89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .625rem center; background-size: 1rem; } textarea.ta { min-height: 7rem; resize: vertical; line-height: 1.5; } input.inp:hover, select.sel:hover, textarea.ta:hover { background-color: var(--fill-2); } input.inp:focus, select.sel:focus, textarea.ta:focus { outline: none; background-color: var(--field-focus); box-shadow: 0 0 0 3px var(--focus-glow), var(--sh-1); } .check { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-ui); } .check input { margin-top: .1875rem; } .switch { position: relative; width: 2.625rem; height: 1.5rem; flex: none; appearance: none; -webkit-appearance: none; border-radius: var(--r-full); background: var(--fill-3); cursor: pointer; transition: background var(--t-fast) var(--ease); margin: 0; } .switch::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: var(--r-full); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--t-base) var(--ease); } .switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(1.125rem); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } /* Hinweise (MailTips & Co.) */ .note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .625rem; align-items: start; padding: .6875rem .875rem; border-radius: var(--r-md); font-size: var(--fs-ui); } .note .i { margin-top: .0625rem; } .note b { font-weight: 680; } .note.info { background: var(--info-bg); } .note.info > .i { color: var(--info); } .note.warn { background: var(--warn-bg); } .note.warn > .i { color: var(--warn-icon); } .note.bad { background: var(--bad-bg); } .note.bad > .i { color: var(--bad); } .note.ok { background: var(--ok-bg); } .note.ok > .i { color: var(--ok); } .note.neutral { background: var(--fill-1); } .note.neutral > .i { color: var(--icon-fg); } .note.sm { padding: .4375rem .6875rem; font-size: var(--fs-meta); gap: .5rem; } .note.sm .i { width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } /* ─────────────── Fristen ─────────────── */ .due { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: .875rem; align-items: center; } .datebox { width: 3.25rem; border-radius: var(--r-md); text-align: center; overflow: hidden; background: var(--glass-solid); box-shadow: var(--sh-1); } .datebox .m { font-size: .6875rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--text-3); padding: .125rem 0; } .datebox .d { font-size: 1.125rem; font-weight: 700; line-height: 1.625rem; font-variant-numeric: tabular-nums; } .datebox.over .m { background: var(--bad); } .datebox.today .m { background: var(--warn-icon); } .datebox.soon .m { background: var(--accent); } .rel { font-size: var(--fs-meta); font-weight: 650; white-space: nowrap; } .rel.over { color: var(--bad); } .rel.today { color: var(--warn); } .typ { font-size: var(--fs-cap); font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } /* ─────────────── Freigabekette ─────────────── */ .chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .3125rem; border-radius: var(--r-lg); } .step { padding: .75rem .875rem; display: grid; gap: .25rem; border-radius: var(--r-md); } .step .top { display: flex; gap: .5rem; align-items: center; } .step .st { width: 1.5rem; height: 1.5rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--fill-2); color: var(--text-3); flex: none; font-size: .75rem; font-weight: 750; } .step .lbl { font-size: var(--fs-cap); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .step .who { font-weight: 650; } .step .when { color: var(--text-3); font-size: var(--fs-meta); min-height: 1.15rem; } .step.done .st { background: var(--ok); color: #fff; } .step.done .st .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); } .step.active { background: var(--accent-soft); } .step.active .st { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); } .step.active .lbl { color: var(--accent-text); } /* ─────────────── Aktivität ─────────────── */ .feed { list-style: none; margin: 0; padding: .25rem .5rem .625rem; display: grid; gap: .125rem; } .feed li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: .625rem .75rem; border-radius: var(--r-md); } .feed li:hover { background: var(--fill-1); } .feed .ic { width: 2rem; height: 2rem; border-radius: var(--radius-avatar); display: grid; place-items: center; background: var(--fill-2); color: var(--text-2); } .feed .ic.download { background: var(--info-bg); color: var(--info); } .feed .ic.upload { background: var(--ok-bg); color: var(--ok); } .feed .ic.comment { background: var(--warn-bg); color: var(--warn-icon); } .feed .ic.share { background: var(--accent-soft); color: var(--accent-text); } .feed .txt { font-size: var(--fs-ui); } .feed .txt b { font-weight: 650; } /* ─────────────── Überlagerungen ─────────────── */ .glass-menu { border-radius: var(--r-lg); } .popover { position: fixed; z-index: 60; width: min(24rem, calc(100vw - 2rem)); max-height: calc(100dvh - 5rem); overflow: auto; padding: .5rem; } .popover.anim { animation: pop3dMenu .3s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 0; } .popover .pop-sec { padding: .5rem .5rem .625rem; display: grid; gap: .5rem; } .popover h6 { margin: 0; font-size: var(--fs-cap); font-weight: 700; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; } .menu-item { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; background: transparent; border-radius: var(--r-md); text-align: left; } .menu-item:hover { background: var(--fill-2); } .menu-item.active { background: var(--accent-soft-2); } .menu-item .meta { margin-left: auto; } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .overlay { position: fixed; inset: 0; z-index: 70; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: start center; padding: 10vh 1rem 1rem; } .overlay.anim { animation: fade var(--t-fast) var(--ease); } .overlay.center { place-items: center; padding: 1rem; } .overlay.right { place-items: stretch end; padding: .625rem; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .palette { width: min(40rem, 100%); overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-modal); } .palette-in { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.125rem .75rem; color: var(--text-3); } .palette-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--fs-t3); color: var(--text); } .palette-list { max-height: 26rem; overflow: auto; padding: .25rem .5rem .5rem; } .palette-group { font-size: var(--fs-cap); font-weight: 700; color: var(--text-3); padding: .625rem .625rem .25rem; text-transform: uppercase; letter-spacing: .05em; } .palette-foot { display: flex; gap: 1rem; padding: .625rem 1.125rem; background: var(--fill-1); color: var(--text-3); font-size: var(--fs-meta); flex-wrap: wrap; } .dialog { width: min(34rem, 100%); max-height: calc(100dvh - 2rem); overflow: auto; border-radius: var(--r-xl); box-shadow: var(--sh-modal); } .dialog.anim { animation: pop3d .42s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 100%; } .dialog-head { padding: 1.5rem 1.5rem .5rem; display: grid; gap: .375rem; } .dialog-body { padding: .5rem 1.5rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; } .dialog-foot { padding: 1rem 1.5rem 1.25rem; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; background: var(--fill-1); } .passkey { display: grid; justify-items: center; gap: .75rem; padding: 1.75rem .75rem; text-align: center; } .passkey .ring { width: 4.75rem; height: 4.75rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .passkey .ring .i { width: calc(2.25rem * var(--icon-scale)); height: calc(2.25rem * var(--icon-scale)); } .passkey.wait .ring { animation: breathe 1.1s ease-in-out infinite; } .passkey.ok .ring { background: var(--ok-bg); color: var(--ok); } @keyframes breathe { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent); } } .sheet { width: min(52rem, 100%); height: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-modal); display: flex; flex-direction: column; overflow: hidden; } .sheet.wide { width: min(68rem, 100%); } .sheet.anim { animation: sheet3d .44s cubic-bezier(.16, 1, .3, 1); transform-origin: 100% 50%; } @keyframes sheetIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } .sheet-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; } .sheet-body { flex: 1; overflow: auto; } .sheet-foot { padding: .875rem 1.25rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: var(--fill-1); } .toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(34rem, calc(100vw - 2rem)); } .toast { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border-radius: var(--r-lg); animation: toast3d .46s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 100%; } .toast > .i { color: var(--ok); } .toast .grow { flex: 1; } .toast .progress { height: 3px; background: var(--accent); border-radius: var(--r-xs); transform-origin: left; } .ql { width: min(56rem, 100%); max-height: 90dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-modal); } .ql-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; } .ql-body { overflow: auto; background: var(--fill-1); padding: 1.5rem; display: grid; justify-items: center; } .ql-body .paper { width: min(38rem, 100%); } /* ─────────────── Composer ─────────────── */ .composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); min-height: 100%; } .cmp-main { padding: .5rem 1.25rem 1rem; display: grid; gap: .875rem; align-content: start; } .cmp-side { padding: 1rem 1.125rem; display: grid; gap: 1rem; align-content: start; background: var(--fill-1); } .rcpt { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; min-height: 2.75rem; padding: .375rem .5rem; border-radius: var(--r-md); background: var(--field); } .rcpt .tok { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .375rem 0 .625rem; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: var(--fs-meta); } .rcpt .tok.warn { background: var(--warn-bg); color: var(--warn); } .rcpt .tok button { background: transparent; color: inherit; width: 1.375rem; height: 1.375rem; border-radius: var(--r-full); display: grid; place-items: center; } .rcpt .tok button:hover { background: color-mix(in srgb, currentColor 16%, transparent); } .letter { background: var(--glass-solid); border-radius: var(--r-md); padding: 1rem 1.125rem; display: grid; gap: .625rem; font-size: var(--fs-body); line-height: 1.55; box-shadow: var(--sh-1); } .letter mark { font-weight: 650; } .att-row { display: flex; gap: .5rem; flex-wrap: wrap; } /* ─────────────── Leere Zustände ─────────────── */ .empty-state { display: grid; justify-items: center; gap: .75rem; text-align: center; padding: 3rem 1.5rem; color: var(--text-2); } .empty-state .plate { width: 3rem; height: 3rem; border-radius: var(--r-lg); } .empty-state ul { text-align: left; margin: .25rem 0 0; padding-left: 1.25rem; display: grid; gap: .25rem; } /* ─────────────── Vorschau-Banner (Ansicht als …) ─────────────── */ .as-banner { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem 1rem; background: rgba(18, 22, 30, .82); color: #F2F4F7; font-size: var(--fs-ui); } .as-banner .i { color: #F2B65A; } .as-banner .btn { height: 1.875rem; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; } .as-banner .btn:hover { background: rgba(255, 255, 255, .22); } .as-banner .btn .i { color: #fff; } /* ─────────────── Außensichten (Gericht, Geschäftsführung) ─────────────── */ .guest { min-height: 100%; font-size: var(--fs-body); } .g-head { position: sticky; top: 2.875rem; z-index: 20; margin: .625rem; border-radius: var(--r-xl); } .g-head-in { max-width: 62rem; margin: 0 auto; padding: .875rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .g-main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; gap: 1.5rem; } .g-title { display: grid; gap: .5rem; } .g-title .h1 { font-size: 2.125rem; } .g-case { display: flex; flex-wrap: wrap; gap: .25rem .875rem; color: var(--text-2); } .g-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .875rem 1rem; margin: 0 .5rem; border-radius: var(--r-md); } .g-doc:hover { background: var(--fill-1); } .g-doc .t { font-weight: 650; font-size: var(--fs-body); } .g-doc .acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .g-doc .btn { height: 2.75rem; } .g-group { font-size: var(--fs-cap); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 1.125rem 1.5rem .375rem; } .contact { display: grid; gap: .25rem; } .contact .phone { font-variant-numeric: tabular-nums; font-weight: 650; user-select: all; } .g-foot { color: var(--text-3); font-size: var(--fs-meta); display: grid; gap: .375rem; padding-top: .5rem; } .progress-bar { height: .5rem; border-radius: var(--r-full); background: var(--fill-2); overflow: hidden; } .progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 75%, #fff), var(--ok)); border-radius: inherit; transition: width var(--t-base) var(--ease); } .task { display: grid; gap: .75rem; padding: 1rem 1.25rem; margin: 0 .5rem .5rem; border-radius: var(--r-md); background: var(--fill-1); } .task-top { display: flex; gap: .5rem .75rem; align-items: flex-start; flex-wrap: wrap; } .task .t { font-weight: 680; font-size: var(--fs-sub); } .drop { position: relative; display: grid; justify-items: center; gap: .5rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--glass-solid); text-align: center; color: var(--text-2); cursor: pointer; box-shadow: var(--sh-1); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .drop > .i { color: var(--accent-text); } .drop:hover, .drop.over { background: color-mix(in srgb, var(--accent) 10%, var(--glass-solid)); } .drop.over { transform: scale(1.01); } .drop input { position: absolute; width: 1px; height: 1px; opacity: 0; } .receipt { display: grid; gap: .25rem; padding: .75rem .875rem; border-radius: var(--r-md); background: var(--ok-bg); font-size: var(--fs-meta); } .receipt .mono { word-break: break-all; } .viewer { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.25rem; align-items: start; } /* Vorschau-Rahmen in der Einladung */ .preview-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-float); background: var(--aur-base); } .pf-bar { display: flex; gap: .375rem; padding: .5rem .75rem; background: var(--fill-2); align-items: center; } .pf-bar > span:not(.meta) { width: .625rem; height: .625rem; border-radius: var(--r-full); } .pf-row { background: var(--btn); border-radius: var(--r-md); padding: .5rem .625rem; box-shadow: var(--sh-1); } /* ─────────────── Hilfslayouts ─────────────── */ .flex { display: flex; align-items: center; gap: .5rem; } .flex.wrap { flex-wrap: wrap; } .gap-lg { gap: 1rem; } .ml-auto { margin-left: auto; } .w-full { width: 100%; } .hr { height: .5rem; } .greet { display: grid; gap: .3125rem; padding: .25rem 0; } .legend { display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; color: var(--text-3); font-size: var(--fs-meta); } .colorpick { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .swatch { position: relative; width: 1.875rem; height: 1.875rem; border-radius: var(--r-full); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform var(--t-fast) var(--ease); } .swatch:hover { transform: scale(1.08); } .swatch[aria-pressed="true"] { transform: scale(1.12); } .swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6 5.4-5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; } .colorpick input[type="color"] { width: 1.875rem; height: 1.875rem; padding: 0; border: 0; background: none; border-radius: var(--r-full); cursor: pointer; } /* ─────────────── Segment-Pills (Freigaben je Gast-Segment) ─────────────── */ .pills { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; } .pills.nowrap { flex-wrap: nowrap; } .sp { display: inline-flex; align-items: center; gap: .25rem; height: 1.375rem; padding: 0 .4375rem; border-radius: var(--radius-pill); font-size: var(--fs-cap); font-weight: 650; white-space: nowrap; line-height: 1; background: color-mix(in srgb, var(--sc, #4A5361) 15%, transparent); color: color-mix(in oklab, var(--sc, #4A5361) 80%, #000); } .sp .i { width: calc(.8125rem * var(--icon-scale)); height: calc(.8125rem * var(--icon-scale)); } .sp.drop { background: color-mix(in srgb, var(--sc) 7%, transparent); color: color-mix(in oklab, var(--sc) 72%, #000); } .sp.intern { background: var(--muted-bg); color: var(--text-2); } .sp.sens { background: var(--warn-bg); color: var(--warn); } .sp.sens .i { color: var(--warn-icon); } .sp.more { background: var(--fill-2); color: var(--text-2); } .sp.tog { height: 1.875rem; padding: 0 .625rem; font-size: var(--fs-meta); cursor: pointer; background: var(--fill-1); color: var(--text-2); } .sp.tog:hover { background: var(--fill-2); } .sp.tog.on { background: color-mix(in srgb, var(--sc) 18%, transparent); color: color-mix(in oklab, var(--sc) 80%, #000); } .sp-lock { display: inline-grid; place-items: center; color: var(--text-3); opacity: .8; } .sp-lock .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); } .ct-pills { margin-left: auto; display: flex; gap: .1875rem; flex: none; } .ct-pills .sp { height: 1.0625rem; padding: 0 .25rem; font-size: .625rem; letter-spacing: .02em; border-radius: var(--radius-pill); gap: .125rem; } .ct-pills .sp .i { width: calc(.6875rem * var(--icon-scale)); height: calc(.6875rem * var(--icon-scale)); } /* ─────────────── Seitenleiste im Mandat ─────────────── */ .app.in-mandat { --sb-w: 19.5rem; } .sb.in-mandat { overflow: hidden; } .sb-scroll { flex: 1 1 auto; min-height: 4rem; overflow: auto; margin: 0 -.625rem; padding: .125rem .625rem .5rem; display: flex; flex-direction: column; gap: .125rem; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 .5rem, #000 calc(100% - 1.25rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 .5rem, #000 calc(100% - 1.25rem), transparent 100%); } .sb.in-mandat .sb-foot { padding-top: .375rem; } .sb-back { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; padding: .25rem .5rem .25rem .25rem; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-meta); font-weight: 600; } .sb-back:hover { background: var(--fill-1); color: var(--text); text-decoration: none; } .sb-back .i { width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } .sb-mhead { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .625rem; margin: .375rem 0 .625rem; border-radius: var(--r-lg); text-align: left; color: var(--text); background: var(--sheen), var(--btn); box-shadow: var(--rim-soft), var(--sh-1); transition: background var(--t-fast) var(--ease); } .sb-mhead:hover { background: var(--sheen), var(--btn-hover); } .sb-mhead .mono-badge { width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); font-size: .75rem; } .sb-mhead .grow { flex: 1; min-width: 0; display: grid; } .sb-mname { font-weight: 680; font-size: var(--fs-ui); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sb-msub { color: var(--text-3); font-size: var(--fs-cap); } .sb-mhead > .i { color: var(--icon-fg); } .nav-label.row { display: flex; align-items: center; gap: .25rem; padding-right: .25rem; } .nav-label.row a { color: inherit; display: inline-flex; gap: .375rem; align-items: center; padding: .125rem .375rem; margin-left: -.375rem; border-radius: var(--r-xs); } .nav-label.row a:hover { background: var(--fill-1); text-decoration: none; color: var(--text); } .nav-label.row a[aria-current="page"] { color: var(--accent-text); } .nav-label .n { font-weight: 700; color: var(--text-3); letter-spacing: 0; } .icon-btn.xs { width: 1.625rem; height: 1.625rem; margin-left: auto; border-radius: var(--r-sm); } .icon-btn.xs .i { width: calc(1rem * var(--icon-scale)); height: calc(1rem * var(--icon-scale)); } .nav-item.ct { min-height: 2.125rem; padding: .25rem .5rem; gap: .5rem; font-size: .84375rem; flex: none; } .ct-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-new { width: .4375rem; height: .4375rem; border-radius: var(--r-full); background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .plate.xs { width: 1.375rem; height: 1.375rem; border-radius: var(--radius-app); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); } .plate.xs .i { width: calc(.875rem * var(--icon-scale)); height: calc(.875rem * var(--icon-scale)); } .nav-item .plate .i, .nav-item[aria-current="page"] .plate .i { color: #fff; } .nav-hint { display: flex; align-items: center; gap: .375rem; padding: .375rem .625rem; color: var(--text-3); font-size: var(--fs-meta); border-radius: var(--r-md); } .nav-hint:hover { background: var(--fill-1); color: var(--text-2); text-decoration: none; } .sb-brand { display: flex; align-items: center; gap: .5rem; padding: .625rem .625rem .125rem; color: var(--text-3); font-size: var(--fs-cap); font-weight: 600; } .nav-item .nav-go { margin-left: auto; color: var(--text-3); opacity: 0; transition: opacity var(--t-fast) var(--ease); } .nav-item:hover .nav-go { opacity: 1; } /* Logo des Hauses */ .tenant-img { height: 2.375rem; width: 2.375rem; object-fit: contain; flex: none; border-radius: var(--radius-app); } .tenant-img.wide { width: auto; max-width: 100%; height: 2.5rem; border-radius: 0; } .tenant-img.on-plate { background: rgba(255, 255, 255, .92); padding: .25rem .375rem; border-radius: var(--r-md); box-shadow: var(--sh-1); } .tenant-logo.xs, .tenant-img.xs { width: 1.5rem; height: 1.5rem; font-size: .5625rem; border-radius: var(--radius-app); } .tenant-img.wide.xs { width: auto; height: 1.5rem; max-width: 11rem; } .tenant-img.wide.xs.on-plate { padding: .125rem .25rem; } .g-brand { color: inherit; display: block; border-radius: var(--r-md); } .g-brand:hover { text-decoration: none; } .g-brand .tenant { padding: 0; } /* Schlanker Seitenkopf auf Unterseiten eines Mandats */ .phead { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; } .phead .mtitle { gap: .25rem; } .ct-head .pills { margin-top: .125rem; } .tabs.m-only { display: none; } /* ─────────────── Mandanteneinstellungen: Container ─────────────── */ .ct-list { padding: .375rem; display: grid; gap: .375rem; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ct-list::before { display: none; } .ct-row { display: grid; grid-template-columns: auto auto minmax(10rem, 1fr) minmax(0, auto) auto; gap: .875rem; align-items: center; padding: .625rem .75rem .625rem .375rem; border-radius: var(--r-lg); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .ct-row.off { opacity: .62; } .ct-row.off .plate { filter: grayscale(.8); } .ct-row.dragging { opacity: .4; } .ct-row.drop-before { box-shadow: var(--rim), 0 -3px 0 0 var(--accent), var(--sh-1); } .ct-row .grip { color: var(--text-3); cursor: grab; display: grid; place-items: center; width: 1.25rem; } .ct-main { min-width: 0; } .ct-main .t { font-weight: 650; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .ct-main .s { color: var(--text-3); font-size: var(--fs-meta); } .ct-row .acts { display: flex; gap: .25rem; align-items: center; } table.t tbody tr.off td { opacity: .6; } table.matrix th.c, table.matrix td.c { text-align: center; padding: 0 .25rem; } table.matrix th.c { height: auto; padding: .5rem .25rem; text-transform: none; letter-spacing: 0; vertical-align: bottom; } table.matrix .mx-name { display: block; font-size: .6875rem; font-weight: 600; color: var(--text-3); margin-top: .25rem; white-space: normal; line-height: 1.2; } select.cell { appearance: none; -webkit-appearance: none; border: 0; font: inherit; font-size: var(--fs-meta); font-weight: 600; width: 100%; min-width: 6.5rem; height: 1.875rem; border-radius: var(--r-sm); padding: 0 .5rem; text-align: center; text-align-last: center; cursor: pointer; background: var(--fill-1); color: var(--text-3); } select.cell:hover { background: var(--fill-2); } select.cell.on { background: color-mix(in srgb, var(--sc) 16%, transparent); color: color-mix(in oklab, var(--sc) 80%, #000); } select.cell.drop { background: color-mix(in srgb, var(--sc) 8%, transparent); } select.cell:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); } /* Dialoge für Container */ .dialog.wide { width: min(46rem, 100%); } .ct-preview { display: flex; gap: .875rem; align-items: center; padding: .875rem 1rem; border-radius: var(--r-lg); background: var(--sheen), var(--glass-solid); box-shadow: var(--rim-soft), var(--sh-1); } .ct-preview .t { font-weight: 680; font-size: var(--fs-body); margin-bottom: .25rem; } .icon-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: .3125rem; max-height: 11.5rem; overflow: auto; padding: .25rem; margin-top: .375rem; border-radius: var(--r-md); background: var(--fill-1); } .icon-lib .icon-btn { width: 100%; height: 2.5rem; background: transparent; } .icon-lib .icon-btn:hover { background: var(--btn-hover); } .icon-lib .icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent); } .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem; } .tpl { display: flex; gap: .75rem; align-items: flex-start; text-align: left; padding: .75rem; border-radius: var(--r-lg); background: var(--fill-1); color: var(--text); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .tpl:hover { background: var(--fill-2); } .tpl.on { background: var(--sheen), color-mix(in srgb, var(--accent) 20%, var(--glass-solid)); box-shadow: var(--rim-soft), 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent); } .tpl.on .t { color: var(--accent-text); } .tpl[disabled] { opacity: .5; cursor: not-allowed; } .tpl-txt { display: grid; gap: .1875rem; min-width: 0; } .tpl-txt .t { font-weight: 650; } .tpl-txt .s { color: var(--text-3); font-size: var(--fs-meta); } .tpl .pills .sp { height: 1.0625rem; padding: 0 .25rem; font-size: .625rem; border-radius: var(--radius-pill); } /* Freigabe-Dialog (wie eine Ordnerfreigabe) */ .share-head { grid-template-columns: auto minmax(0, 1fr); display: grid; gap: .875rem; align-items: center; } .share-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; } .share-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem .625rem; border-radius: var(--r-md); transition: background var(--t-fast) var(--ease); } .share-row:hover { background: var(--fill-1); } .share-row.on { background: color-mix(in srgb, var(--sc) 9%, transparent); } .share-row.fixed { background: var(--fill-1); } .share-row .grow { flex: 1; min-width: 0; } .share-row .t { font-weight: 650; } .share-row .s { color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seg-plate { background: var(--sc); } .share-row:not(.on) .seg-plate { filter: saturate(.35) opacity(.75); } select.share-sel { width: 15.5rem; flex: none; min-height: 2rem; font-size: var(--fs-meta); font-weight: 600; } .share-row.on .share-sel { background-color: color-mix(in srgb, var(--sc) 14%, var(--glass-solid)); color: color-mix(in oklab, var(--sc) 78%, #000); } .share-sum { margin-right: auto; } /* Anmeldefenster des Mail-Anbieters (simuliert) */ .consent { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: 1rem; } .consent-top { display: flex; align-items: center; gap: .625rem; font-weight: 650; color: var(--text-2); } .consent-acc { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem .25rem; border-radius: var(--r-full); background: var(--fill-1); width: fit-content; font-size: var(--fs-meta); } .consent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; } .consent-list li { display: flex; gap: .75rem; align-items: flex-start; } .consent-list .i { color: var(--accent-text); margin-top: .0625rem; } .consent-list .meta { display: block; } .prov-logo { width: 1.75rem; height: 1.75rem; flex: none; } .passkey .ring .prov-logo { width: 2.25rem; height: 2.25rem; } /* ─────────────── Verwaltung ─────────────── */ .vw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); gap: var(--gap); align-items: start; } .vw-side { position: sticky; top: 5.25rem; } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .frow { display: flex; gap: .75rem; flex-wrap: wrap; } .logo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .logo-slot { display: grid; gap: .5rem; border-radius: var(--r-lg); } .logo-slot.over .logo-stage, .logo-slot.over .drop { transform: scale(1.01); background: color-mix(in srgb, var(--accent) 12%, var(--glass-solid)); } .logo-stage { display: grid; place-items: center; height: 7.5rem; padding: 1rem; border-radius: var(--r-lg); box-shadow: var(--rim-soft), var(--sh-1); background: repeating-conic-gradient(rgba(22, 32, 54, .045) 0 25%, transparent 0 50%) 0 0 / 14px 14px, #FFFFFF; transition: transform var(--t-fast) var(--ease); } .logo-slot.dunkel .logo-stage { background: repeating-conic-gradient(rgba(255, 255, 255, .045) 0 25%, transparent 0 50%) 0 0 / 14px 14px, #171B22; } /* Feste Höchstmaße statt Prozent: im Grid ist 100 % Höhe unbestimmt, SVG-Zeichen ohne eigene Größe liefen sonst über */ .logo-stage { overflow: hidden; } .logo-stage img { width: auto; height: auto; max-width: 100%; max-height: 5.5rem; object-fit: contain; } .logo-stage img.on-plate { max-height: 5.5rem; box-sizing: border-box; } .logo-stage img.on-plate { background: rgba(255, 255, 255, .92); padding: .375rem .5rem; border-radius: var(--r-md); } .logo-slot .drop { height: 7.5rem; align-content: center; } .logo-cap { display: flex; gap: .25rem .5rem; align-items: center; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--text-2); font-weight: 600; } .logo-cap > span:first-child { margin-right: auto; } .swatch.lg { width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); } .brand-row { display: flex; align-items: center; gap: .875rem; } .brand-row .grow { flex: 1; min-width: 0; } .brand-row .t { font-weight: 650; } .brand-row .s { color: var(--text-3); font-size: var(--fs-meta); } .swatch-in { position: relative; width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); flex: none; cursor: pointer; overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 3px 10px rgba(0, 0, 0, .18); } .swatch-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255, 255, 255, .38), transparent 55%); pointer-events: none; } .swatch-in input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } input.inp.hex { width: 7rem; flex: none; text-transform: uppercase; font-size: var(--fs-ui); } .aur-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .aur-prev { position: relative; height: 8.5rem; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; box-shadow: var(--sh-1); background: radial-gradient(70% 90% at 0% 0%, var(--a1), transparent 70%), radial-gradient(65% 85% at 100% 10%, var(--a2), transparent 70%), radial-gradient(80% 80% at 40% 110%, var(--a3), transparent 70%), var(--ab); } .aur-glass { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .875rem 1.25rem; border-radius: var(--r-lg); font-size: var(--fs-meta); font-weight: 650; -webkit-backdrop-filter: blur(14px) saturate(200%); backdrop-filter: blur(14px) saturate(200%); } .aur-glass.light { background: linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, .34); box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .9), inset 0 0 18px rgba(255, 255, 255, .3), 0 8px 24px rgba(16, 24, 40, .12); color: #121722; } .aur-glass.dark { background: linear-gradient(155deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%), rgba(24, 28, 38, .38); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), 0 8px 24px rgba(0, 0, 0, .3); color: #ECEFF3; } .aur-btn { color: #fff; padding: .3125rem .75rem; border-radius: var(--r-sm); font-weight: 650; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 3px 10px rgba(0, 0, 0, .2); } .palette-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .25rem; border-radius: var(--r-md); overflow: hidden; } .pal-sw { height: 2.5rem; display: flex; align-items: flex-end; padding: .25rem; } .pal-sw span { font-size: .5625rem; color: rgba(18, 23, 34, .7); } .pal-sw.dk span { color: rgba(255, 255, 255, .72); } .savebar { position: sticky; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 24; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem .875rem .75rem 1rem; border-radius: var(--r-xl); } .savebar > .i { color: var(--accent-text); } .savebar .grow { flex: 1 1 16rem; } /* Vorschau-Attrappen in der Verwaltung */ .mock { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; font-size: .75rem; min-height: 15rem; box-shadow: var(--sh-1); } .mock-aur { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 0% 0%, var(--aur-1), transparent 70%), radial-gradient(60% 70% at 100% 0%, var(--aur-2), transparent 70%), radial-gradient(80% 70% at 50% 110%, var(--aur-3), transparent 70%), var(--aur-base); } .mock-glass { background: var(--sheen), var(--glass-1); -webkit-backdrop-filter: blur(10px) saturate(200%); backdrop-filter: blur(10px) saturate(200%); box-shadow: var(--rim), var(--sh-1); border-radius: var(--r-md); } .mock.ws { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; padding: .5rem; } .mock-sb { display: flex; flex-direction: column; gap: .3125rem; padding: .5rem; } .mock-sb .tenant-img, .mock-sb .tenant-logo { margin-bottom: .375rem; } .mock-sb .tenant-img.wide.xs { max-width: 100%; height: 1.25rem; } .mock-nav { padding: .25rem .375rem; border-radius: var(--r-sm); color: var(--text-2); } .mock-nav.on { background: var(--sheen), var(--btn-hover); color: var(--text); font-weight: 650; box-shadow: var(--rim-soft); } .mock-main { display: grid; gap: .5rem; align-content: start; } .mock-top { height: 1.75rem; display: flex; align-items: center; padding: 0 .5rem; } .mock-search { background: var(--field); border-radius: var(--r-sm); padding: .125rem .5rem; color: var(--text-3); width: 60%; } .mock-card { padding: .625rem; display: grid; gap: .375rem; background: var(--sheen), var(--glass-2); } .mock-h { font-weight: 700; font-size: .8125rem; } .mock-l { height: .375rem; border-radius: var(--r-xs); background: var(--fill-3); } .mock-l.s { width: 60%; } .mock-btn { display: inline-flex; align-items: center; width: fit-content; padding: .25rem .625rem; border-radius: var(--r-sm); color: var(--on-accent); font-weight: 650; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 60%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 3px 8px color-mix(in srgb, var(--accent) 35%, transparent); } .mock-btn.sm { padding: .125rem .5rem; font-size: .6875rem; } .mock .sp { height: 1.125rem; font-size: .625rem; padding: 0 .3125rem; } .mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .mock-tile { display: flex; align-items: center; gap: .375rem; padding: .5rem; font-weight: 650; background: var(--sheen), var(--glass-2); } .mock.gast { display: grid; align-content: start; } .mock-ghead { margin: .5rem; padding: .5rem .625rem; display: flex; align-items: center; gap: .5rem; } .mock-ghead .tenant { padding: 0; gap: .375rem; } .mock-logo { display: flex; align-items: center; gap: .375rem; color: inherit; cursor: pointer; } .mock-pad { padding: .25rem .75rem .75rem; display: grid; gap: .375rem; } .mock-doc { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; background: var(--sheen), var(--glass-2); } .mock-paper { width: 1rem; height: 1.3rem; border-radius: var(--r-xs); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); flex: none; } .mock-foot { color: var(--text-3); font-size: .625rem; margin-top: .25rem; } .mailm { background: var(--fill-1); padding: .625rem; display: grid; gap: .5rem; box-shadow: none; min-height: 0; } .mail-meta { display: grid; color: var(--text-2); font-size: .6875rem; } .mail-card { background: #FFFFFF; color: #22262B; border-radius: var(--r-md); padding: 1rem 1.125rem; display: grid; gap: .5rem; box-shadow: var(--sh-1); font-size: .75rem; } .mail-card .mock-btn { margin: .25rem 0; } .mail-logo { display: flex; align-items: center; min-height: 1.75rem; } .mail-logo img { max-height: 2rem; max-width: 12rem; object-fit: contain; } .mail-h { font-weight: 700; font-size: .875rem; } .mail-foot { color: #6B7280; font-size: .625rem; padding-top: .625rem; margin-top: .25rem; } .logo-fallback { display: inline-flex; align-items: center; gap: .5rem; } .logo-fallback .tenant-logo { width: 1.5rem; height: 1.5rem; font-size: .5625rem; border-radius: var(--radius-app); box-shadow: none; } .paper.brief-prev { font-size: .5625rem; padding: 7% 8% 6%; } .bp-logo { display: flex; justify-content: flex-end; margin-bottom: 1.2em; } .bp-logo img { max-height: 3.2em; max-width: 45%; object-fit: contain; } .bp-abs { font-family: var(--font); font-size: .78em; color: #5A6068; margin-bottom: .4em; text-decoration: underline; text-decoration-color: #C9CDD3; } .bp-adr { font-family: var(--font); margin-bottom: 2em; line-height: 1.45; } .bp-foot { position: absolute; left: 8%; right: 8%; bottom: 4%; font-family: var(--font); font-size: .72em; color: #7A8088; text-align: center; } /* Anbieter-Karten und DNS */ .prov { border-radius: var(--r-lg); background: var(--sheen), var(--glass-2); } .prov.on { background: var(--sheen), color-mix(in srgb, var(--ok) 8%, var(--glass-2)); } .prov-head { display: flex; align-items: center; gap: .875rem; padding: 1.125rem var(--pad) .5rem; } .prov-head .grow { flex: 1; min-width: 0; } .prov-body { padding: .25rem var(--pad) var(--pad); display: grid; gap: .875rem; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; color: var(--text-2); } .ticks li { display: flex; gap: .5rem; align-items: center; } .ticks .i { color: var(--ok); } .dns { font-size: .78rem; overflow-wrap: anywhere; color: var(--text); } code.addr { font-size: 1rem; padding: .625rem .875rem; border-radius: var(--r-md); background: var(--fill-1); } code.addr b { color: var(--accent-text); } /* ─────────────── Raum des Mandats: eigene Farbwelt, getönte Seitenleiste ─────────────── */ .sb.in-mandat { background: var(--sheen), color-mix(in srgb, var(--room) 11%, var(--glass-1)); } .sb.in-mandat.anim { animation: drillIn .32s var(--ease); } .sb.anim:not(.in-mandat) { animation: drillOut .32s var(--ease); } .flex > .spacer { flex: 1; } @keyframes drillIn { from { opacity: .4; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes drillOut { from { opacity: .4; transform: translateX(-14px); } to { opacity: 1; transform: none; } } .sb-mhead { background: var(--sheen), color-mix(in srgb, var(--room) 16%, var(--btn)); } .sb-mhead:hover { background: var(--sheen), color-mix(in srgb, var(--room) 22%, var(--btn-hover)); } .app.in-mandat .topbar { background: var(--sheen), color-mix(in srgb, var(--room) 7%, color-mix(in srgb, var(--glass-2) 90%, transparent)); } .mono-badge.fav { background: #fff; padding: 0; } .mono-badge.fav img, .mlogo.fav img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; } .mono-badge.fav.pad img, .mlogo.fav.pad img { object-fit: contain; padding: 12%; } .mlogo.fav { background: #fff; padding: 0; } .crumb-m { display: inline-flex; align-items: center; gap: .375rem; } .crumb-m .mono-badge { border-radius: var(--radius-app); } .fav-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .fav-row > .grow { flex: 1 1 18rem; min-width: 0; } .fav-stage { width: 6.5rem; height: 6.5rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-app); box-shadow: var(--rim-soft), var(--sh-1); background: repeating-conic-gradient(rgba(22, 32, 54, .045) 0 25%, transparent 0 50%) 0 0 / 12px 12px, #FFFFFF; } .fav-stage img { width: 4rem; height: 4rem; object-fit: contain; border-radius: var(--radius-app); } .fav-stage .mono-badge { width: 4rem; height: 4rem; font-size: 1.25rem; border-radius: var(--radius-app); } .room-mock { position: relative; display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .5rem; padding: .5rem; height: 9.5rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); background: radial-gradient(70% 90% at 0% 0%, var(--a1), transparent 70%), radial-gradient(65% 85% at 100% 10%, var(--a2), transparent 70%), radial-gradient(80% 80% at 40% 110%, var(--a3), transparent 70%), var(--ab); } .rm-sb { display: flex; flex-direction: column; gap: .375rem; padding: .5rem; border-radius: var(--r-md); font-size: .6875rem; background: var(--sheen), color-mix(in srgb, var(--rt) 11%, var(--glass-1)); -webkit-backdrop-filter: blur(10px) saturate(200%); backdrop-filter: blur(10px) saturate(200%); box-shadow: var(--rim), var(--sh-1); } .rm-sb > :first-child { margin-bottom: .25rem; } .rm-sb b { font-size: .6875rem; display: block; margin-top: .125rem; } .rm-sb i { display: block; height: .3125rem; border-radius: var(--r-xs); background: var(--fill-3); } .rm-sb i:first-of-type { background: color-mix(in srgb, var(--rt) 35%, var(--fill-3)); } .rm-main { display: grid; gap: .375rem; align-content: start; } .rm-t { font-size: .6875rem; font-weight: 700; color: var(--text-2); padding: .125rem .25rem; } .rm-card { height: 2.5rem; border-radius: var(--r-md); background: var(--sheen), var(--glass-2); -webkit-backdrop-filter: blur(10px) saturate(200%); backdrop-filter: blur(10px) saturate(200%); box-shadow: var(--rim), var(--sh-1); } .rm-card.s { width: 70%; } /* ─────────────── Gast-Segmente ─────────────── */ .seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--gap); align-items: start; } .seg-card { padding: 1rem; display: grid; gap: .75rem; } .seg-top { display: flex; gap: .75rem; align-items: flex-start; } .seg-top .grow { flex: 1; min-width: 0; } .seg-top .t { font-weight: 680; font-size: var(--fs-body); display: flex; align-items: center; gap: .5rem; } .seg-top .s { color: var(--text-3); font-size: var(--fs-meta); } .seg-rights { display: flex; flex-wrap: wrap; gap: .3125rem; } .ct-chip { display: inline-flex; align-items: center; gap: .3125rem; height: 1.625rem; padding: 0 .4375rem 0 .1875rem; border-radius: var(--radius-pill); background: var(--fill-1); font-size: var(--fs-meta); font-weight: 560; } .ct-chip .plate.xs { width: 1.25rem; height: 1.25rem; } .ct-chip .lvl { color: color-mix(in oklab, var(--sc) 80%, #000); } .seg-opts { display: flex; flex-wrap: wrap; gap: .25rem; } .seg-foot { display: flex; align-items: center; gap: .625rem; } .seg-foot .grow { flex: 1; } .avs { display: flex; } .avs .avatar { margin-right: -.375rem; box-shadow: 0 0 0 2px var(--glass-solid), var(--glow-pc); } .avs .avatar:last-child { margin-right: 0; } .sp.custom { --sc: #6B7280; } .sp.pers { border-radius: var(--r-full); } .seg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; } .seg-tile { min-height: 0; padding: .75rem; gap: .375rem; } .seg-tile.sel { background: var(--sheen), color-mix(in srgb, var(--sc) 16%, var(--glass-solid)); box-shadow: var(--rim-soft), 0 6px 18px color-mix(in srgb, var(--sc) 22%, transparent); } .seg-tile.sel .tile-name { color: color-mix(in oklab, var(--sc) 80%, #000); } .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem; padding: 1.25rem; align-items: start; } .ed-grid select.cell { min-width: 9rem; } .tpl-diff ul { margin: .25rem 0 0; padding-left: 1.1rem; display: grid; gap: .125rem; } .seg-top .t .chip { height: 1.25rem; font-size: var(--fs-cap); padding: 0 .4375rem; } .cmdbar .btn .n { font-size: var(--fs-cap); font-weight: 700; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: var(--r-full); display: inline-grid; place-items: center; background: var(--fill-2); color: var(--text-2); } .share-sub { font-size: var(--fs-cap); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: .75rem .625rem .25rem; } select.cell.zseg { min-width: 9.5rem; text-align: left; text-align-last: left; padding: 0 .625rem; } /* ─────────────── Listen, Vollständigkeit, Suche, Schlagworte ─────────────── */ .sb-search { display: flex; align-items: center; gap: .5rem; margin: -.25rem 0 .5rem; padding: .5rem .625rem; border-radius: var(--r-md); background: var(--field); color: var(--text-3); font-size: var(--fs-meta); } .sb-search:hover { background: var(--fill-2); color: var(--text-2); text-decoration: none; } .sb-search[aria-current="page"] { background: var(--sheen), var(--btn-hover); color: var(--text); box-shadow: var(--rim-soft), var(--sh-1); } .sb-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-lock { color: var(--warn-icon); display: inline-grid; flex: none; } .ct-lock .i { width: calc(.8125rem * var(--icon-scale)); height: calc(.8125rem * var(--icon-scale)); } .sp.lockp { background: var(--warn-bg); color: var(--warn); } .sp.lockp .i { color: var(--warn-icon); } table.t.liste td { white-space: nowrap; } table.t.liste td:first-child { white-space: normal; min-width: 11rem; } .neg { color: var(--bad); } .pos { color: var(--ok); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem .75rem; } .form-grid .span2 { grid-column: 1 / -1; } .form-grid .inp, .form-grid .sel { min-height: 2rem; font-size: var(--fs-meta); } .umsatz { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; font-size: var(--fs-meta); } .umsatz li { display: flex; gap: .625rem; align-items: baseline; padding: .3125rem .5rem; border-radius: var(--r-sm); } .umsatz li:nth-child(odd) { background: var(--zebra); } .umsatz .grow { flex: 1; min-width: 0; } .verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--fs-meta); } .verlauf li { display: grid; gap: .0625rem; } .check-pct { font-family: var(--font-display); font-size: 1.75rem; font-weight: 720; color: var(--accent-text); letter-spacing: -.02em; } .check-pct.sm { font-size: var(--fs-sub); } .check-head .progress-bar { height: .625rem; } .check-list .chk-st { flex: none; min-width: 7.25rem; } .search-hero .field-search.big { height: 3rem; font-size: var(--fs-body); } .search-hero .field-search.big .i { width: calc(1.375rem * var(--icon-scale)); height: calc(1.375rem * var(--icon-scale)); } .ai-answer { background: var(--sheen), linear-gradient(140deg, var(--accent-soft-2), var(--accent-soft) 45%, var(--glass-2) 80%) !important; } .ai-text { font-size: var(--fs-body); line-height: 1.6; max-width: 72ch; margin: 0; } .ai-text sup { color: var(--accent-text); font-weight: 700; font-size: .7em; margin-left: .0625rem; } .quellen { margin: 0; padding-left: 1.4rem; display: grid; gap: .25rem; font-size: var(--fs-meta); } .quellen button { all: unset; cursor: pointer; display: inline; color: var(--accent-text); font-weight: 600; } .quellen button:hover { text-decoration: underline; } .quellen .meta { margin-left: .375rem; font-weight: 400; } .hits .snip { color: var(--text-2); font-size: var(--fs-meta); margin-top: .25rem; line-height: 1.5; } .hits mark, .hits .t mark { background: color-mix(in srgb, var(--warn-icon) 26%, transparent); color: inherit; border-radius: var(--r-xs); padding: 0 .125rem; } .hits > li { align-items: flex-start; } .chip.tag { padding-right: .1875rem; } .chip.tag button { background: transparent; color: inherit; width: 1.125rem; height: 1.125rem; border-radius: var(--r-full); display: grid; place-items: center; } .chip.tag button:hover { background: var(--fill-2); } .chip.tag-vor { background: var(--accent-soft); color: var(--accent-text); cursor: pointer; opacity: .85; } .chip.tag-vor:hover { opacity: 1; } input.inp.tag-in { width: 8.5rem; min-height: 1.5rem; height: 1.5rem; padding: 0 .5rem; border-radius: var(--r-full); font-size: var(--fs-meta); } /* ─────────────── Sprung ins Mandat (Übergang) ─────────────── Animiert werden nur transform und opacity (per Web Animations), als Kamerafahrt an den Glasflächen vorbei. */ .warp { position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden; } .warp.unten { z-index: -1; } .warp-old { position: fixed; inset: 0; } .warp-old * { animation: none !important; } /* Ebenen: Nur die fliegenden Flächen behalten Glas. Große Flächen verwischen, was darunter liegt; Zeilen sind deckende Streifen. */ .warp-old *:not(.glass-fly) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Fliegende Glasfläche = dieselbe Fläche wie vorher (eigene Füllung und Schatten), nur ohne Lichtbrechung */ .warp-old .glass-fly { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--sat)) brightness(1.04) !important; backdrop-filter: blur(var(--lg-blur)) saturate(var(--sat)) brightness(1.04) !important; } .warp-old .bar-fly { background: var(--sheen), var(--glass-solid) !important; box-shadow: var(--rim-soft), var(--sh-1) !important; } .warp-old .bar-fly > td, .warp-old .bar-fly > th { background: transparent !important; } .aurora.warp-in { transform-origin: 50% 50%; animation: auroraWarp 1s cubic-bezier(.3, 0, .2, 1); } /* Struktur im Hintergrund, nur auf Einstellungsseiten (Verwaltung, Mandanteneinstellungen): unterscheidet sie von den Arbeitsseiten und gibt der Lichtbrechung etwas zum Biegen. Wählbar unter Verwaltung › Form & Symbole. */ .aurora::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--struktur-deckung, .55); } :root[data-struktur="punkte"][data-ort="einstellungen"] .aurora::after { background-image: radial-gradient(circle at center, var(--struktur-farbe) 1.1px, transparent 1.4px); background-size: 22px 22px; } :root[data-struktur="linien"][data-ort="einstellungen"] .aurora::after { background-image: linear-gradient(var(--struktur-farbe) 1px, transparent 1px), linear-gradient(90deg, var(--struktur-farbe) 1px, transparent 1px); background-size: 28px 28px; } :root { --struktur-farbe: rgba(40, 30, 32, .16); } /* Echtes Glas ist klarer als Milchglas: weniger Füllung, damit Brechung und Hintergrund durchscheinen */ :root[data-glas="echt"] { --glass-1: rgba(255, 255, 255, .20); --glass-2: rgba(255, 255, 255, .30); } :root[data-glas="echt"][data-theme="dark"] { --glass-1: rgba(24, 28, 38, .26); --glass-2: rgba(22, 26, 36, .34); } @media (prefers-color-scheme: dark) { :root[data-glas="echt"]:not([data-theme="light"]) { --glass-1: rgba(24, 28, 38, .26); --glass-2: rgba(22, 26, 36, .34); } } :root[data-theme="dark"] { --struktur-farbe: rgba(255, 255, 255, .10); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --struktur-farbe: rgba(255, 255, 255, .10); } } @keyframes auroraWarp { 0% { transform: scale(1.12); } 100% { transform: none; } } .mono-badge.hop, .mlogo.hop { animation: hop .7s cubic-bezier(.34, 1.4, .64, 1) .75s both; } @keyframes hop { 0% { transform: none; } 40% { transform: translateY(-3px) scale(1.06); box-shadow: 0 6px 16px color-mix(in srgb, var(--room) 40%, transparent); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .warp { display: none; } .hop { animation: none !important; } } /* ─────────────── Transparenz reduzieren ─────────────── */ :root[data-transparency="reduziert"] { --glass-1: var(--glass-solid); --glass-2: var(--glass-solid); --glass-3: var(--glass-solid); } :root[data-transparency="reduziert"] .sb, :root[data-transparency="reduziert"] .topbar, :root[data-transparency="reduziert"] .card, :root[data-transparency="reduziert"] .tile, :root[data-transparency="reduziert"] .insp, :root[data-transparency="reduziert"] .glass-menu, :root[data-transparency="reduziert"] .inbox, :root[data-transparency="reduziert"] .tabs, :root[data-transparency="reduziert"] .cmdbar, :root[data-transparency="reduziert"] .phases, :root[data-transparency="reduziert"] .chain, :root[data-transparency="reduziert"] .dialog, :root[data-transparency="reduziert"] .sheet, :root[data-transparency="reduziert"] .ct-row, :root[data-transparency="reduziert"] .prov { -webkit-backdrop-filter: none; backdrop-filter: none; } @media (prefers-reduced-transparency: reduce) { :root { --glass-1: var(--glass-solid); --glass-2: var(--glass-solid); --glass-3: var(--glass-solid); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-1: var(--glass-solid); --glass-2: var(--glass-solid); --glass-3: var(--glass-solid); } } @media (forced-colors: active) { .sb, .topbar, .card, .tile, .insp, .glass-menu, .inbox, .tabs, .cmdbar, .dialog, .sheet, .ct-row, .prov { background: Canvas; outline: 1px solid CanvasText; box-shadow: none; } .aurora { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } .aurora i { animation: none !important; } } /* Pills im Dunkeln: helle Schrift auf getönter Fläche */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp, :root:not([data-theme="light"]) select.cell.on, :root:not([data-theme="light"]) .sp.tog.on { background: color-mix(in srgb, var(--sc, #8A93A3) 30%, transparent); color: color-mix(in oklab, var(--sc, #8A93A3) 40%, #fff); } :root:not([data-theme="light"]) .sp.drop { background: color-mix(in srgb, var(--sc) 16%, transparent); } :root:not([data-theme="light"]) .share-row.on .share-sel { background-color: color-mix(in srgb, var(--sc) 28%, transparent); color: color-mix(in oklab, var(--sc) 40%, #fff); } } :root[data-theme="dark"] .sp, :root[data-theme="dark"] select.cell.on, :root[data-theme="dark"] .sp.tog.on { background: color-mix(in srgb, var(--sc, #8A93A3) 30%, transparent); color: color-mix(in oklab, var(--sc, #8A93A3) 40%, #fff); } :root[data-theme="dark"] .sp.drop { background: color-mix(in srgb, var(--sc) 16%, transparent); } :root[data-theme="dark"] .sb.in-mandat { background: var(--sheen), color-mix(in srgb, var(--room) 16%, var(--glass-1)); } :root[data-theme="dark"] .seg-tile.sel .tile-name, :root[data-theme="dark"] .ct-chip .lvl { color: color-mix(in oklab, var(--sc) 45%, #fff); } :root[data-theme="dark"] .share-row.on .share-sel { background-color: color-mix(in srgb, var(--sc) 28%, transparent); color: color-mix(in oklab, var(--sc) 40%, #fff); } .sp.intern, :root .sp.intern { background: var(--muted-bg); color: var(--text-2); } .sp.sens, :root .sp.sens { background: var(--warn-bg); color: var(--warn); } .sp.more, :root .sp.more { background: var(--fill-2); color: var(--text-2); } /* ─────────────── Responsiv ─────────────── */ /* ─────────────── Eingangsverarbeitung: lesen, prüfen, einsortieren ─────────────── */ .vb-card .card-head { flex-wrap: wrap; } .vb-card.over { background: var(--sheen), color-mix(in srgb, var(--accent) 10%, var(--glass-2)); } .vb-list { list-style: none; margin: 0; padding: .25rem .5rem .5rem; display: grid; gap: .125rem; } .vb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .5rem .625rem; border-radius: var(--r-md); animation: vb-in .35s var(--ease) both; } .vb-row .src { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--r-md); background: var(--fill-1); color: var(--text-2); } .vb-row .t { font-weight: 600; font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vb-steps { display: flex; gap: .1875rem; margin-top: .3125rem; } .vb-steps i { width: 1.5rem; height: .25rem; border-radius: var(--r-full); background: var(--fill-2); transition: background .25s var(--ease); } .vb-steps i.on { background: var(--accent); } .vb-steps i.now { background: linear-gradient(90deg, var(--fill-2) 0%, var(--accent) 50%, var(--fill-2) 100%); background-size: 200% 100%; animation: vb-now .9s linear infinite; } .vb-row.done .vb-steps i { background: color-mix(in srgb, var(--accent) 55%, var(--fill-2)); } .vb-res { display: flex; gap: .375rem; flex-wrap: wrap; justify-content: flex-end; } .vb-now { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes vb-in { from { opacity: 0; transform: translateY(4px); } } @keyframes vb-now { from { background-position: 100% 0; } to { background-position: -100% 0; } } .vb-leer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: center; color: var(--text-2); font-size: var(--fs-ui); padding-top: var(--pad); } .vb-leer > .i { color: var(--accent-text); } .vb-sum { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .625rem var(--pad); font-size: var(--fs-ui); color: var(--text-2); } .vb-sum > span { display: inline-flex; align-items: center; gap: .375rem; margin-right: auto; } .vb-sum > span > .i { color: var(--ok); } .auto-list { padding: 0 .5rem .5rem; } .auto-list .acts { display: flex; gap: .25rem; flex-wrap: wrap; } /* Erkannter Text mit markierten Werten; sensible Werte lassen sich für die Ansicht Externer schwärzen */ .ocr { border-radius: var(--r-lg); background: var(--glass-solid); box-shadow: var(--sh-1); overflow: hidden; } .ocr-head { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: .625rem .875rem; background: var(--fill-1); } .ocr-body { padding: .875rem 1rem; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.65; max-height: 22rem; overflow: auto; } .ocr-body p { margin: 0 0 .5rem; } mark.ent { border-radius: var(--r-xs); padding: 0 .125rem; color: inherit; transition: background .2s var(--ease), color .2s var(--ease); } mark.ent.geld { background: color-mix(in srgb, #0F7B45 20%, transparent); } mark.ent.datum { background: color-mix(in srgb, #1F5FBF 18%, transparent); } mark.ent.az { background: color-mix(in srgb, #6D4AC8 18%, transparent); } mark.ent.konto { background: color-mix(in srgb, #00727A 20%, transparent); } mark.ent.person { background: color-mix(in srgb, #9A5B2B 18%, transparent); } mark.ent.frist { background: color-mix(in srgb, #C2410C 20%, transparent); } mark.ent.sens { background: color-mix(in srgb, #C62828 20%, transparent); } mark.ent.black { background: var(--text); color: transparent; user-select: none; } .ki-kv dd.sens-v { color: var(--bad); font-weight: 600; } .ki-kv dd.sens-v .i { vertical-align: -.15rem; } input.range { width: 100%; accent-color: var(--accent); margin: .25rem 0; } .optlist { display: grid; gap: .375rem; } .opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .625rem; align-items: start; width: 100%; text-align: left; padding: .625rem .75rem; border-radius: var(--r-md); background: var(--fill-1); color: var(--text); font-size: var(--fs-ui); transition: background var(--t-fast) var(--ease); } .opt:hover { background: var(--fill-2); } .opt[aria-pressed="true"] { background: var(--sheen), color-mix(in srgb, var(--accent) 14%, var(--glass-2)); box-shadow: var(--rim-soft), var(--sh-1); } .opt b { display: block; font-weight: 650; } .opt .meta { display: block; margin: .125rem 0 0; } .opt .dot { width: 1rem; height: 1rem; border-radius: var(--r-full); background: var(--fill-3); margin-top: .125rem; transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .opt[aria-pressed="true"] .dot { background: #fff; box-shadow: inset 0 0 0 .3rem var(--accent); } .riegel > li { align-items: flex-start; } /* ─────────────── Gast-Ansicht: geteilte Ablage (wie ein freigegebenes Drive) ─────────────── */ .gd { max-width: 76rem; margin: 0 auto; padding: .5rem 1.25rem 1rem; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; } .gd-rail { position: sticky; top: 7.75rem; display: grid; gap: .125rem; padding: .625rem; border-radius: var(--r-xl); max-height: calc(100dvh - 8.75rem); overflow: auto; background: var(--sheen), var(--glass-1); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-1); } .gd-mand { display: flex; align-items: center; gap: .625rem; padding: .375rem .5rem .625rem; } .gd-mand .t { font-weight: 680; font-size: var(--fs-ui); line-height: 1.25; } .gd-mand .meta { margin: 0; } .gd-nav { display: grid; gap: .125rem; } .gd-nav .lbl-k { display: none; } .gd-mini { display: grid; color: var(--text-3); } .gd-mini .i { color: var(--text-3) !important; } .gd-kontakt { display: grid; gap: .5rem; margin-top: .75rem; padding: .875rem; border-radius: var(--r-lg); background: var(--fill-1); font-size: var(--fs-ui); } .gd-kontakt .meta { margin: 0; } .gd-main { min-width: 0; } .gd-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; padding-top: .5rem; } .gd-crumbs { margin-left: -.5rem; } .gd-tools { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .gd-search { flex: 1 1 16rem; max-width: 30rem; } .gd-zugriff { flex: 1 1 14rem; margin: 0; } /* ─────────────── Gläubiger: bei offenem Detailbereich nur die Spalten für den Abgleich ─────────────── */ .split:not(.no-insp) .gl-opt { display: none; } /* ─────────────── Symbolfarbe: dezent = zweite Textfarbe ─────────────── */ :root[data-icon-farbe="dezent"] { --icon-fg: var(--text-2); } /* ─────────────── Container als Ordner wie in macOS ─────────────── */ .ordner { width: calc(2.5rem * var(--ordner-groesse)); height: auto; aspect-ratio: 64 / 50; flex: none; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .18)) drop-shadow(0 2px calc(var(--glow-r) * .6) color-mix(in srgb, var(--fc) var(--glow-a), transparent)); } .ordner.xs { width: calc(1.625rem * var(--ordner-groesse-klein)); } .ordner.sm { width: calc(2rem * var(--ordner-groesse)); } .ordner.lg { width: calc(3.5rem * var(--ordner-groesse)); } .ordner .o-back { fill: color-mix(in oklab, var(--fc) 78%, #000); } .ordner .o-front { fill: color-mix(in oklab, var(--fc) 90%, #fff); } .ordner .o-glanz { fill: #fff; opacity: .28; } /* Symbol weiß und groß, damit man den Container sofort erkennt */ .ordner .o-sym { fill: #fff; opacity: .96; filter: drop-shadow(0 .5px .5px rgba(0, 0, 0, .25)); } .form-sym { gap: .75rem; } .fs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; } .fs-row .lbl { font-size: var(--fs-ui); color: var(--text-2); } .fs-probe { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .875rem; border-radius: var(--r-md); background: var(--fill-1); } .count-probe { font-size: var(--fs-cap); font-weight: 700; min-width: 1.375rem; padding: 0 .375rem; height: 1.25rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); } @media (max-width: 520px) { .fs-row { grid-template-columns: minmax(0, 1fr); gap: .375rem; } } /* ─────────────── Unterordner ─────────────── */ .ct-zeile { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); align-items: center; gap: .125rem; } .ct-tog { width: 1.125rem; height: 1.75rem; display: grid; place-items: center; background: transparent; color: var(--icon-fg); border-radius: var(--r-xs); } .ct-tog:hover { background: var(--fill-1); } .ct-tog.leer { pointer-events: none; } .ct-zeile { position: relative; } /* Plus zum Anlegen eines Unterordners: schwebt beim Überfahren über dem Zeilenende, nimmt sonst keinen Platz */ .ct-plus { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--glass-solid); color: var(--icon-fg); box-shadow: var(--sh-1); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); } .ct-zeile:hover .ct-plus, .ct-plus:focus-visible { opacity: 1; pointer-events: auto; } .ct-zeile:hover .ct-pills { visibility: hidden; } .ct-plus:hover { background: var(--accent-soft); color: var(--accent-text); } .ct-zeile.sub1 { padding-left: 1.125rem; } .ct-zeile.sub2 { padding-left: 2.25rem; } .nav-item.ct.sub { min-height: 1.875rem; font-size: .8125rem; } .uo-card .card-head .seg { margin-left: .5rem; } .uo-tiles { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .uo-marke { display: inline-grid; place-items: center; vertical-align: -.15rem; } .uo-marke.er .i { color: var(--warn-icon); } .uo-marke.ein .i { color: var(--info); } .uo-marke.aus .i { color: var(--bad); } .uo-aus { margin: 0; } .uo-aus li { gap: .75rem; padding-left: 0; padding-right: 0; } .uo-list .pills { max-width: 16rem; } .uo-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: var(--fs-meta); color: var(--text-2); } .uo-pfad a { color: var(--text-2); } .uo-pfad a:hover { color: var(--text); } .uo-matrix { display: grid; gap: .375rem; } .uo-row { display: grid; grid-template-columns: minmax(0, 1fr) 12rem 7rem; gap: .5rem; align-items: center; } .uo-row .sp { width: fit-content; } .uo-rel { font-size: var(--fs-meta); color: var(--text-3); } .uo-rel.ein { color: var(--info); font-weight: 600; } .uo-rel.er { color: var(--warn); font-weight: 600; } @media (max-width: 520px) { .uo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .uo-rel { grid-column: 1 / -1; } } /* ─────────────── Ordnerinhalt wie im Finder ─────────────── */ .ordner.xl { width: calc(4.75rem * var(--ordner-groesse)); } .finder-bar .seg button { padding: 0 .625rem; } .finder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; padding: 1rem; } .f-item { display: grid; justify-items: center; align-content: start; gap: .375rem; padding: .875rem .5rem .75rem; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: center; transition: background var(--t-fast) var(--ease); } .f-item:hover { background: var(--fill-1); text-decoration: none; } .f-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); } .f-item .ordner { margin-bottom: .125rem; } .f-papier { width: 3.25rem; display: block; margin: .25rem 0 .375rem; } .f-papier .paper { padding: 12% 10%; font-size: .17rem; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .1); } .f-titel { font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .f-meta { font-size: var(--fs-meta); color: var(--text-3); } .finder-t .f-name { display: flex; align-items: center; gap: .5rem; padding-left: calc(var(--tiefe, 0) * 1.5rem); } .finder-t .f-name .sub { display: block; } .f-dreieck { width: 1.25rem; height: 1.25rem; flex: none; display: grid; place-items: center; background: transparent; color: var(--icon-fg); border-radius: var(--r-xs); } button.f-dreieck:hover { background: var(--fill-2); } .finder-t tr.f-ordner .name { font-weight: 650; } .f-neu { color: var(--text-2); } .f-neu-plus { width: 4.75rem; aspect-ratio: 64 / 50; display: grid; place-items: center; border-radius: var(--r-md); background: var(--fill-1); color: var(--accent-text); margin-bottom: .125rem; } .f-neu:hover .f-neu-plus { background: var(--accent-soft); } .f-neu-plus.sm { width: 2rem; margin: 0; } .f-neu-zeile .name { color: var(--accent-text); font-weight: 600; } .f-neu-zeile .meta { margin-left: .5rem; } .finder-t tbody tr:nth-child(even):not(.active) { background: color-mix(in srgb, var(--fill-1) 60%, transparent); } /* Demo-Hinweis bei echten Firmennamen */ .demo-hinweis { display: flex; gap: .375rem; align-items: flex-start; max-width: 62ch; } .demo-hinweis .i { flex: none; margin-top: .0625rem; } /* ─────────────── Post & Eingang ─────────────── */ .post-adr { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .post-adr code { font-size: 1.0625rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .post-schritte { margin: 0; padding: .875rem var(--pad) .25rem 2.25rem; display: grid; gap: .5rem; font-size: var(--fs-ui); color: var(--text-2); } .post-meta { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .75rem; border-radius: var(--r-md); background: var(--fill-1); font-size: var(--fs-meta); color: var(--text-2); } .post-meta .i { margin-top: .0625rem; flex: none; } .vb-list { max-height: 28rem; overflow: auto; } /* ─────────────── Neue Liste: Vorlage wählen, Spalten festlegen ─────────────── */ .lv-grid { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .lv-grid.edit { grid-template-columns: minmax(0, 1fr); } .lv-vorl { display: grid; gap: .375rem; max-height: 26rem; overflow: auto; padding: .125rem; } .lv-vorl .tpl { width: 100%; } .lv-form { display: grid; gap: 1rem; min-width: 0; } .lv-felder { display: grid; gap: .375rem; } .lv-feld { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem auto; gap: .375rem; align-items: center; } .lv-feld .lv-opt { grid-column: 1 / 3; } .lv-feld input[readonly] { color: var(--text-2); } @media (max-width: 720px) { .lv-grid { grid-template-columns: minmax(0, 1fr); } .lv-vorl { max-height: 14rem; } } /* ─────────────── Vorlagen: Bibliothek ─────────────── */ .vl-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; } .vl-nav { display: grid; gap: .125rem; position: sticky; top: 5rem; } .vl-nav .nav-item .count { margin-left: auto; } /* ─────────────── Vorlagen: Editor mit Seite wie in Word ─────────────── */ .ved-head .mtitle { gap: .375rem; } .ved-name { font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); background: transparent; border: 0; padding: .125rem .375rem; margin-left: -.375rem; border-radius: var(--r-sm); width: 100%; max-width: 40rem; } .ved-name:hover { background: var(--fill-1); } .ved-name:focus { outline: none; background: var(--field-focus); box-shadow: 0 0 0 3px var(--focus-glow); } .ved-status { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ved { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; } .ved-main { display: grid; gap: .75rem; min-width: 0; } .ved-bar { position: sticky; top: 4.75rem; z-index: 5; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem; border-radius: var(--r-lg); background: var(--sheen), var(--glass-2); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-1); } .ved-fmt, .ved-rcpt { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .ved-fmt select.sel, .ved-rcpt select.sel { min-height: 2rem; height: 2rem; width: auto; max-width: 16rem; } .ved-fmt .sep { width: 1px; height: 1.25rem; background: var(--fill-3); margin: 0 .25rem; } .ved-k { min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: var(--r-sm); background: transparent; color: var(--text); font-family: var(--font-paper); font-size: .9375rem; display: inline-grid; place-items: center; } .ved-k:hover { background: var(--fill-2); } .ved-canvas { background: var(--surface-3); border-radius: var(--r-lg); padding: 2rem 1.5rem; display: grid; justify-items: center; overflow: auto; } .ved-page { width: min(42rem, 100%); min-height: 54rem; background: #fff; color: #1d2128; border-radius: var(--r-xs); padding: 3rem 3.25rem 2.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .12); font-family: var(--font-paper); font-size: .95rem; line-height: 1.55; display: flex; flex-direction: column; } .ved-page.mail { min-height: 0; font-family: var(--font); font-size: .9375rem; } .ved-kopf { align-self: flex-end; text-align: right; font-family: var(--font); margin-bottom: 2rem; } .ved-haus { font-weight: 700; font-size: 1.05rem; color: var(--accent-text); letter-spacing: -.01em; } .ved-kopf { display: flex; align-items: center; gap: .625rem; } .ved-kopf img { width: 2.25rem; height: 2.25rem; object-fit: contain; } .ved-zusatz { font-size: .75rem; color: #6b7280; } .ved-abs { font-family: var(--font); font-size: .625rem; color: #6b7280; border-bottom: .5px solid #c9ced6; padding-bottom: .125rem; margin-bottom: .5rem; align-self: flex-start; } .ved-an { min-height: 6.5rem; } .ved-datum { align-self: flex-end; margin: .75rem 0 1.75rem; } .ved-mailhead { font-family: var(--font); display: grid; gap: .25rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; } .ved-betreff { font-weight: 700; margin-bottom: 1.25rem; min-height: 1.5em; } .ved-body { flex: 1; min-height: 12rem; } .ved-body p { margin: 0 0 .9rem; } .ved-body h3 { font-family: var(--font); font-size: .95rem; font-weight: 700; margin: 1.25rem 0 .5rem; } .ved-body ul, .ved-body ol { margin: 0 0 .9rem; padding-left: 1.25rem; } .ved-betreff[contenteditable], .ved-body[contenteditable] { outline: none; border-radius: var(--r-xs); transition: background var(--t-fast) var(--ease); } .ved-betreff[contenteditable]:hover, .ved-body[contenteditable]:hover { background: rgba(43, 76, 126, .03); } .ved-betreff[contenteditable]:focus, .ved-body[contenteditable]:focus { background: rgba(43, 76, 126, .045); } .ved-fuss { font-family: var(--font); font-size: .625rem; color: #6b7280; margin-top: 2rem; padding-top: .5rem; border-top: .5px solid #d6dae0; } .ved-page mark { background: #fdf0d5; color: #8a4b00; padding: 0 .2em; border-radius: var(--r-xs); font-family: var(--font); font-size: .85em; } /* Seriendruckfelder: getönte Marken im Text, keine Rahmen */ .vph { display: inline-block; padding: 0 .3em; margin: 0 .05em; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 14%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); font-family: var(--font); font-size: .82em; font-weight: 600; line-height: 1.5; white-space: nowrap; user-select: all; vertical-align: baseline; } .ved-side { display: grid; gap: 1rem; position: sticky; top: 4.75rem; max-height: calc(100dvh - 6rem); overflow: auto; } .ved-felder-wrap { display: grid; gap: .75rem; } .ved-grp { display: grid; gap: .375rem; } .ved-grp .lbl { font-size: var(--fs-cap); font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .ved-felder { display: flex; flex-wrap: wrap; gap: .3125rem; } .vph-btn { display: inline-grid; gap: .0625rem; text-align: left; padding: .25rem .5rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-meta); font-weight: 600; transition: background var(--t-fast) var(--ease); } .vph-btn:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 22%, transparent); } .vph-btn[disabled] { cursor: default; background: var(--fill-1); color: var(--text-2); } .vph-btn .w { font-weight: 450; color: var(--text); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ved-luecken { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: var(--fs-ui); } .ved-luecken li { display: flex; gap: .5rem; justify-content: space-between; } .linkish { background: none; padding: 0; color: var(--accent-text); font: inherit; text-align: left; } .linkish:hover { text-decoration: underline; } .ved-versionen .vv { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-avatar); display: grid; place-items: center; background: var(--fill-2); font-size: var(--fs-meta); font-weight: 700; flex: none; } @media (max-width: 1100px) { .ved { grid-template-columns: minmax(0, 1fr); } .ved-side { position: static; max-height: none; } } @media (max-width: 900px) { .vl-grid { grid-template-columns: minmax(0, 1fr); } .vl-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; } .vl-nav .nav-item { width: auto; white-space: nowrap; flex: none; } } @media (max-width: 520px) { .ved-canvas { padding: .75rem .5rem; } .ved-page { padding: 1.5rem 1.25rem; min-height: 0; font-size: .875rem; } .ved-kopf { margin-bottom: 1rem; } .ved-an { min-height: 0; } .ved-bar { top: .5rem; } } .gd-tools .seg button { padding: 0 .625rem; } .gd-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .875rem; } .gd-folder { gap: .25rem; min-height: 8.25rem; } .gd-folder-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .625rem; } .gd-folder .t { font-weight: 680; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } .gd-folder .meta { margin: 0; } .gd-folder .meta .neu { color: var(--accent-text); font-weight: 700; } .chip.gd-acc { white-space: nowrap; } .chip.gd-acc.ansehen { background: var(--fill-1); color: var(--text-2); } .chip.gd-acc.laden { background: var(--info-bg); color: var(--info); } .chip.gd-acc.hochladen { background: var(--ok-bg); color: var(--ok); } .chip.gd-acc.einreichen { background: var(--warn-bg); color: var(--warn); } .gd-guide { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.125rem; border-radius: var(--r-lg); background: var(--sheen), color-mix(in srgb, var(--accent) 12%, var(--glass-2)); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: var(--rim), var(--sh-card); } .gd-guide .grow { flex: 1 1 16rem; min-width: 0; display: grid; gap: .25rem; } .gd-guide .t { font-weight: 700; font-size: var(--fs-body); } .gd-guide .meta { margin: 0; } .gd-guide .progress-bar { margin-top: .375rem; max-width: 22rem; } .gd-file .t { font-weight: 600; } .gd-file .meta { margin: 0; } .gd-file .acts { display: flex; gap: .375rem; flex-wrap: wrap; justify-content: flex-end; } .gd-ohead { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .gd-ohead .grow { flex: 1 1 18rem; min-width: 0; display: grid; gap: .5rem; } .gd-ohead .h2 { margin: 0; } .gd-paper { background: var(--surface-3); border-radius: var(--r-lg); padding: 1.25rem; display: grid; justify-items: center; } .gd-fuss { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem 2.5rem; } .as-switch select.sel { height: 1.875rem; min-height: 0; border: 0; border-radius: var(--r-md); background-color: rgba(255, 255, 255, .14); color: #fff; max-width: min(22rem, 60vw); font-size: var(--fs-ui); padding-left: .625rem; } .as-switch select.sel option { color: #111; } :root[data-transparency="reduziert"] .gd-rail, :root[data-transparency="reduziert"] .gd-guide { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); } @media (max-width: 900px) { .gd { grid-template-columns: minmax(0, 1fr); padding: .25rem 1rem 1rem; gap: .75rem; } .gd-rail { position: static; max-height: none; overflow: visible; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .gd-mand { padding: .25rem; flex: 1 1 12rem; min-width: 0; } .gd-nav { display: flex; gap: .25rem; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } .gd-nav .nav-item { flex: 1 1 auto; justify-content: center; } .gd-nav .lbl-l { display: none; } .gd-nav .lbl-k { display: inline; } .gd-nav .ct, .gd-nav .nav-label, .gd-kontakt { display: none; } .gd-nav .nav-item { width: auto; white-space: nowrap; } .gd-fuss { padding: 0 1rem 2rem; } .vb-row { grid-template-columns: auto minmax(0, 1fr); } .vb-res { grid-column: 2; justify-content: flex-start; } } @media (max-width: 520px) { .gd-folders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem; } .gd-folder { min-height: 7.5rem; padding: .875rem; } .gd-folder-top .chip { display: none; } .as-banner > span { flex: 1 1 100%; } .as-banner { position: static; } } @media (max-width: 1280px) { :root { --insp-w: 21rem; } .inbox { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(18rem, 21rem); } } @media (max-width: 1100px) { .cols-cockpit { grid-template-columns: minmax(0, 1fr); } .inbox { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); } .inbox .ib-view { display: none; } .composer { grid-template-columns: minmax(0, 1fr); } .viewer { grid-template-columns: minmax(0, 1fr); } .vw-grid { grid-template-columns: minmax(0, 1fr); } .vw-side { position: static; } .ed-grid { grid-template-columns: minmax(0, 1fr); } .ct-row { grid-template-columns: auto auto minmax(0, 1fr) auto; } .ct-row > .pills { grid-column: 3 / -1; grid-row: 2; } } @media (max-width: 900px) { .inv-final { grid-template-columns: minmax(0, 1fr) !important; } .app { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; inset: 0 auto 0 0; width: min(18rem, 86vw); transform: translateX(-105%); transition: transform var(--t-base) var(--ease); padding: .625rem; } .app.nav-open .sidebar { transform: none; } .app.nav-open::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 29; } .menu-btn { display: grid; } .tabs.m-only { display: flex; width: 100%; } .cols-2 { grid-template-columns: minmax(0, 1fr); } .app.in-mandat .sidebar { width: min(20rem, 88vw); } .topbar { margin: .5rem .5rem 0; padding: .375rem .5rem; gap: .375rem; } .search { width: auto; flex: 1; min-width: 0; } .search kbd { display: none; } .crumbs { display: none; } .page { padding: 1rem 1rem 3rem; } .split { grid-template-columns: minmax(0, 1fr); } .insp { position: fixed; z-index: 65; inset: auto .5rem .5rem .5rem; top: auto; max-height: 78dvh; box-shadow: var(--sh-modal); } .inbox { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; } .inbox .ib-list { max-height: 22rem; } .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-head { position: static; } .task { padding: 1rem; margin: 0 .25rem .5rem; } .g-doc { grid-template-columns: auto minmax(0, 1fr); } .g-doc .acts { grid-column: 1 / -1; justify-content: flex-start; } .h1 { font-size: 1.5rem; } .g-title .h1 { font-size: 1.625rem; } .kv { grid-template-columns: minmax(0, 1fr); gap: .125rem; } .kv dd { margin-bottom: .375rem; } } @media (max-width: 520px) { .tiles { grid-template-columns: minmax(0, 1fr); } .mhead-top .mactions { width: 100%; } .cmdbar .btn .lbl-opt { display: none; } .chain { grid-template-columns: minmax(0, 1fr); } .field-search { min-width: 0; flex: 1; } .due { grid-template-columns: 3rem minmax(0, 1fr); } .due > :last-child { grid-column: 2; justify-self: start; } .ct-row { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; padding: .75rem; } .ct-row .grip { display: none; } .ct-row > .pills, .ct-row > .acts { grid-column: 1 / -1; grid-row: auto; } .logo-slots, .aur-previews { grid-template-columns: minmax(0, 1fr); } .palette-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .share-row { flex-wrap: wrap; } select.share-sel { width: 100%; } .brand-row { flex-wrap: wrap; } .tpl-grid { grid-template-columns: minmax(0, 1fr); } .list > li { flex-wrap: wrap; } .list > li > .grow { flex: 1 1 12rem; } .list > li > .acts { margin-left: auto; } .list > li > .chip { white-space: normal; height: auto; min-height: 1.5rem; } .legend .flex { flex-wrap: wrap; } } /* Mandanteneinstellungen › Unternehmen (Stammdaten) */ .stamm-kopf { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: var(--gap, 1rem); } .stamm-kopf .grow { flex: 1 1 18rem; } .fld-hint { font-size: var(--fs-cap); color: var(--text-3); } .fld-hint.bad { color: var(--bad); } .inp[aria-invalid="true"] { background: color-mix(in srgb, var(--bad) 7%, var(--glass-solid)); } .gr-list li { display: flex; align-items: center; gap: .375rem .75rem; flex-wrap: wrap; } .gr-list .gr-lbl { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; cursor: text; min-width: 0; flex: 1 1 100%; } .gr-list .t { font-weight: 560; white-space: normal; } .gr-list .s { font-size: var(--fs-cap); color: var(--text-3); } .gr-in { display: inline-flex; align-items: center; gap: .375rem; } .gr-in .inp { width: 8.5rem; text-align: right; min-height: 2rem; font-size: var(--fs-meta); } .gr-st { width: 6.5rem; text-align: right; font-size: var(--fs-meta); color: var(--text-3); flex: none; } .gr-st.ja { color: var(--text); font-weight: 600; } .gr-in { flex: 1 1 auto; } .gr-in .inp { flex: 1 1 auto; max-width: 11rem; } /* Leuchten farbiger Elemente (Form & Symbole › Leuchten). Farbe kommt vom Element selbst: --pc bei Plättchen und Avataren, --accent bei Knöpfen, Zählern und Schaltern, --sc bei Segment-Pills, --fc bei Ordnern. Graue Elemente leuchten nicht. Deckkraft --glow-a (getönte Flächen --glow-a2), Weite --glow-r. */ :root { --glow-a: 34%; --glow-a2: 16%; --glow-r: 12px; --glow-pc: 0 3px var(--glow-r) -2px color-mix(in srgb, var(--pc, transparent) var(--glow-a), transparent); --glow-acc: 0 2px var(--glow-r) -2px color-mix(in srgb, var(--accent) var(--glow-a), transparent); } .avatar { box-shadow: var(--glow-pc); } .seg-plate { --pc: var(--sc); } .nav-item .count, .tab .count, .count-probe { box-shadow: var(--glow-acc); } .nav-item .count.soft { box-shadow: none; } .switch:checked { box-shadow: var(--glow-acc); } .opt[aria-pressed="true"] .dot { box-shadow: inset 0 0 0 .3rem var(--accent), var(--glow-acc); } .sp { box-shadow: 0 1px calc(var(--glow-r) * .75) -2px color-mix(in srgb, var(--sc, transparent) var(--glow-a2), transparent); } .sp.drop { box-shadow: none; } .seg-tile.sel { box-shadow: var(--rim-soft), 0 6px calc(var(--glow-r) * 1.5) color-mix(in srgb, var(--sc) var(--glow-a2), transparent); } .chip.ok { box-shadow: 0 1px calc(var(--glow-r) * .75) -2px color-mix(in srgb, var(--ok) var(--glow-a2), transparent); } .chip.warn { box-shadow: 0 1px calc(var(--glow-r) * .75) -2px color-mix(in srgb, var(--warn) var(--glow-a2), transparent); } .chip.bad { box-shadow: 0 1px calc(var(--glow-r) * .75) -2px color-mix(in srgb, var(--bad) var(--glow-a2), transparent); } .form-grid .fld { align-content: start; } /* ─────────────── Raum: 3D-Effekte (Form & Symbole › 3D-Effekte, --d3: 0 aus, 1 dezent, 1,6 deutlich) ─────────────── Dialoge richten sich von unten auf, Seitenblätter schwingen wie eine Tür herein, Menüs klappen von oben auf, Meldungen stellen sich auf. Kacheln neigen sich zum Zeiger, Ordner öffnen beim Zeigen leicht ihre Vorderseite. */ :root { --d3: 1; } @keyframes pop3d { from { opacity: 0; transform: perspective(900px) translate3d(0px, 14px, calc(var(--d3) * -70px)) rotateX(calc(var(--d3) * 11deg)); } to { opacity: 1; transform: perspective(900px) translate3d(0px, 0px, 0px) rotateX(0deg); } } @keyframes sheet3d { from { opacity: 0; transform: perspective(1100px) translate3d(36px, 0px, 0px) rotateY(calc(var(--d3) * -16deg)); } to { opacity: 1; transform: perspective(1100px) translate3d(0px, 0px, 0px) rotateY(0deg); } } @keyframes pop3dMenu { from { opacity: 0; transform: perspective(600px) translate3d(0px, -4px, 0px) rotateX(calc(var(--d3) * -18deg)); } to { opacity: 1; transform: perspective(600px) translate3d(0px, 0px, 0px) rotateX(0deg); } } @keyframes toast3d { from { opacity: 0; transform: perspective(600px) translate3d(0px, 12px, 0px) rotateX(calc(var(--d3) * 38deg)); } to { opacity: 1; transform: perspective(600px) translate3d(0px, 0px, 0px) rotateX(0deg); } } .f-item { transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--ease); } .f-item:hover { transform: perspective(500px) rotateX(calc(var(--kx, 0deg) * var(--d3))) rotateY(calc(var(--ky, 0deg) * var(--d3))); } .ordner .o-vorn { transform-box: view-box; transform-origin: 32px 48px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } :is(.f-item, .tile, .ct-zeile, .ct-row, tr):hover .ordner .o-vorn { transform: scaleY(calc(1 - .1 * var(--d3))); } @media (prefers-reduced-motion: reduce) { .tile:hover, .f-item:hover { transform: none; } .ordner .o-vorn { transition: none; } } :root[data-motion="aus"] .tile:hover, :root[data-motion="aus"] .f-item:hover { transform: none; } /* Glas ohne Lichtbrechung, solange Flächen fliegen (siehe glasRuhe in app.js) */ :root.lg-flug :is(.sb, .topbar, .card, .tile, .insp, .dialog, .sheet, .glass-menu, .ved-bar, .gd-rail, .g-head, .gd-guide, .inbox, .ct-row, .tabs) { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--sat)) brightness(1.04) !important; backdrop-filter: blur(var(--lg-blur)) saturate(var(--sat)) brightness(1.04) !important; } /* Zurück eine Ebene höher (Finder-Leiste); der Pfad im Ordnerkopf nur dort, wo die obere Pfadleiste fehlt (schmal) */ .f-zurueck { gap: .25rem; padding-left: .5rem; max-width: 16rem; } .f-zurueck .lbl-opt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Lange Pfade (Container › Ordner › Unterordner) kürzen sich mit „…“, statt in die Suche zu laufen; die aktuelle Ebene bleibt am längsten lesbar */ .topbar .crumbs { flex: 1 .01 auto; min-width: 0; overflow: hidden; } .topbar .crumbs > a { flex: 0 1 auto; min-width: 2.75rem; overflow: hidden; text-overflow: ellipsis; } .topbar .crumbs > .i { flex: none; } .topbar .crumbs > .here { flex: 0 0 auto; max-width: 16rem; } .topbar .crumbs > a:first-child { flex-shrink: 4; } .topbar .search { flex-shrink: 40; min-width: 12rem; } @media (max-width: 900px) { .topbar .search { min-width: 0; } } .crumbs .crumb-mehr { flex: none; min-width: 2rem; font-weight: 650; letter-spacing: .05em; cursor: pointer; } .popover .menu-item .ordner.xs { width: calc(1.375rem * var(--ordner-groesse-klein)); } /* Seitenleiste der Kanzlei: alle laufenden Mandate (aufklappbar) und Archiv */ .sb-abschnitt { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: .125rem .375rem .125rem .125rem; margin-left: -.25rem; border-radius: var(--r-xs); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .sb-abschnitt:hover { background: var(--fill-1); color: var(--text-2); } .sb-abschnitt .n { font-weight: 600; color: var(--text-3); margin-left: .125rem; } .sb-archiv { color: var(--text-3); } .sb-archiv .i { color: var(--text-3); } /* Archivierte Mandate in der Liste: gedämpft */ table.t tr.arch .name, table.t tr.arch .sub { color: var(--text-2); } table.t tr.arch .mono-badge, table.t tr.arch .mlogo { filter: grayscale(.7); opacity: .8; } /* Obere Leiste: auf breiten Bildschirmen nur noch der Pfad; Suche, Darstellung und Hilfe sitzen in der Seitenleiste */ .topbar .search.m-only-flex { display: none; } @media (max-width: 900px) { .topbar .search.m-only-flex { display: flex; } } .topbar { min-height: 3rem; } /* Werkzeuge unten in der Seitenleiste */ .sb-tools { display: inline-flex; gap: .125rem; flex: none; margin-left: auto; } .icon-btn.sm { width: 1.875rem; height: 1.875rem; border-radius: var(--r-sm); } .icon-btn.sm .i { width: calc(1.0625rem * var(--icon-scale)); height: calc(1.0625rem * var(--icon-scale)); } .me .sb-tools { margin-right: -.25rem; } .sb-brand .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-brand .sb-tools { color: var(--text-2); } button.sb-search { width: 100%; border: 0; font: inherit; font-size: var(--fs-meta); text-align: left; cursor: pointer; margin: 0 0 .5rem; } .sb-search kbd { font-size: var(--fs-cap); color: var(--text-3); } /* Obere Leiste entfällt auf breiten Bildschirmen ganz (Jasper, 04.10.2026). Navigation, Suche, Darstellung und Hilfe liegen in der Seitenleiste, der Ordnerpfad im Ordnerkopf. Auf schmalen Bildschirmen bleibt sie für Menü und Suche. */ @media (min-width: 901px) { .topbar { display: none; } .insp, .vw-side { top: 1rem; max-height: calc(100dvh - 2rem); } .vl-nav { top: 1rem; } .ved-bar { top: .75rem; } .ved-side { top: .75rem; max-height: calc(100dvh - 1.5rem); } .page { padding-top: 1.25rem; } } .ved-zurueck { justify-self: start; margin: 0 0 -.25rem -.5rem; } /* Plattform-Logo: Maske aus der austauschbaren Datei, Farbe aus dem Design */ :root { --logo-ratio: 5.417; } .wortmarke { display: inline-block; height: .6875rem; width: calc(.6875rem * var(--logo-ratio)); vertical-align: -.0625rem; background: currentColor; -webkit-mask: var(--logo-url) no-repeat center / contain; mask: var(--logo-url) no-repeat center / contain; } .powered .wortmarke, .g-foot .wortmarke { color: var(--text-2); } .powered .meta { font-size: inherit; } /* Größe der Ordner und ihrer Symbole (Form & Symbole). In Seitenleiste und Menüs wächst der Ordner nur halb so stark mit, damit die Zeilen ruhig bleiben. Das Symbol skaliert um die Mitte der Vorderseite. */ :root { --ordner-groesse: 1.2; --ordner-groesse-klein: 1.1; --ordner-symbol: 1.15; } .ordner .o-sym-g { transform-box: view-box; transform-origin: 32px 31px; transform: scale(var(--ordner-symbol)); } /* Vorhang beim Öffnen: Wortmarke richtet sich auf, der Punkt fällt in der Hausfarbe hinein, dann fährt die Kamera hindurch. Die Ansicht ist bis dahin unsichtbar, liegt aber schon fertig im Dokument. */ :root.intro #app { opacity: 0; pointer-events: none; } .vorhang { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; overflow: hidden; } .vh-logo { position: relative; width: min(24rem, 62vw); color: var(--text); } .vh-g { position: absolute; display: block; transform-origin: 50% 100%; will-change: transform, opacity; } .vh-g > svg { display: block; width: 100%; height: 100%; overflow: visible; } .vh-g > svg * { fill: currentColor; stroke: none; } .vh-g > .wortmarke { width: 100%; height: 100%; vertical-align: top; } .vh-g.punkt { color: var(--accent); filter: drop-shadow(0 0 calc(var(--glow-r) * .9) color-mix(in srgb, var(--accent) calc(var(--glow-a) * 1.6), transparent)); } /* Fristen: Titel öffnet die Frist, Menü für Verschieben und Ignorieren, Vorschläge und ignorierte Fristen */ .fr-t { all: unset; display: block; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .fr-t:hover { color: var(--accent-text); } .fr-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fr-more { opacity: .55; } .list > li:hover .fr-more, .fr-more:focus-visible, .fr-more[aria-expanded="true"] { opacity: 1; } .fr-acts { display: flex; flex-direction: column; gap: .3125rem; align-items: flex-end; } .fr-hinweis { margin: -.25rem var(--pad) .5rem; } .fr-ign .list > li { opacity: .78; } .fr-ign .card-head .meta { margin-left: .375rem; } .fr-verlauf li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; } @media (max-width: 600px) { .fr-verlauf li { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* Schmal: Vorschlags-Knöpfe bekommen eine eigene Zeile über die ganze Breite (sonst zu eng in der Textspalte) */ @media (max-width: 520px) { .due > .fr-acts { grid-column: 1 / -1; justify-self: stretch; } .fr-acts > .flex { flex-wrap: wrap; justify-content: flex-end; } } .fr-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; } /* ─────────────── Zahllisten Woche für Woche (15.10.2026) ─────────────── */ .zl-tab-t .sub.zq { display: flex; align-items: center; gap: .25rem; color: var(--text-3); } .zl-tab-t td.acts-c { width: 2.75rem; text-align: right; padding-left: 0; } /* Druckfassung: Seiten als echtes A4 (mm), am Bildschirm verkleinert */ .zl-druck { padding: 1.25rem 1rem; } .druck-rahmen { width: min(62rem, 100%); height: min(92dvh, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-modal); background: var(--sheen), var(--glass-solid); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); } .druck-kopf { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; flex-wrap: wrap; } .druck-seiten { overflow: auto; background: var(--fill-2); padding: 1.5rem 1rem 2rem; display: grid; justify-items: center; align-content: start; gap: 1.25rem; --dr-zoom: .78; } @media (max-width: 900px) { .druck-seiten { --dr-zoom: .5; } } @media (max-width: 520px) { .druck-seiten { --dr-zoom: .4; } } .dr-seite { width: 210mm; height: 297mm; position: relative; overflow: hidden; background: #fff; color: #1C1F23; padding: 16mm 16mm 20mm; font-family: var(--font); font-size: 9.5pt; line-height: 1.45; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .14); color-scheme: light; } .dr-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8mm; align-items: start; margin-bottom: 7mm; } .dr-haus { font-size: 7.6pt; color: #6B7178; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2mm; } .dr-titel { font-size: 20pt; font-weight: 700; margin: 0 0 1.5mm; letter-spacing: -.01em; } .dr-sub { font-size: 8.4pt; color: #4B5157; } .dr-meta { display: grid; grid-template-columns: auto auto; gap: .6mm 4mm; font-size: 7.8pt; margin: 0; } .dr-meta dt { color: #6B7178; } .dr-meta dd { margin: 0; font-weight: 600; } .dr-tab { width: 100%; border-collapse: collapse; font-size: 7.4pt; font-variant-numeric: tabular-nums; } .dr-tab th { text-align: left; font-weight: 600; color: #6B7178; text-transform: uppercase; font-size: 6.2pt; letter-spacing: .05em; padding: 0 1.3mm 1.4mm; border-bottom: .35mm solid #1C1F23; } .dr-tab td { padding: 1.5mm 1.3mm; border-bottom: .2mm solid #D9DCE0; vertical-align: top; } .dr-tab .r { text-align: right; white-space: nowrap; } .dr-tab tr.aus td { color: #9AA0A6; } .dr-tab tr.aus td:nth-child(7) { text-decoration: line-through; } .dr-summen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 5mm 0 8mm; } .dr-summen div { display: grid; gap: .5mm; padding-top: 2mm; border-top: .35mm solid #1C1F23; font-size: 7.6pt; color: #4B5157; } .dr-summen b { font-size: 12pt; color: #1C1F23; font-variant-numeric: tabular-nums; } .dr-h { font-size: 8.4pt; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2.5mm; } .dr-kette { display: grid; grid-template-columns: repeat(2, 62mm); gap: 8mm; } .dr-kette div { display: grid; gap: .4mm; font-size: 7.8pt; border-bottom: .2mm solid #9AA0A6; padding-bottom: 2mm; align-content: start; } .dr-kette .lbl { font-size: 6.2pt; text-transform: uppercase; letter-spacing: .06em; color: #6B7178; font-weight: 600; } .dr-seite .meta { color: #6B7178; font-size: 7pt; } .dr-kette .nz, .stempel .nz { font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 14pt; color: #233F8C; min-height: 7mm; line-height: 1.1; } .dr-hinweis { margin-top: 6mm; font-size: 7.4pt; color: #6B7178; } .dr-fuss { position: absolute; left: 16mm; right: 16mm; bottom: 9mm; display: flex; justify-content: space-between; gap: 4mm; font-size: 6.6pt; color: #8A9099; border-top: .2mm solid #D9DCE0; padding-top: 2mm; } .re-kopf { margin-bottom: 12mm; max-width: 120mm; } .re-firma { font-size: 15pt; font-weight: 700; } .re-adr { font-size: 7.6pt; color: #6B7178; margin-top: 1mm; } .re-an { font-size: 9pt; line-height: 1.4; margin-bottom: 12mm; } .re-titel { font-size: 13pt; margin: 0 0 4mm; } .re-daten { display: grid; grid-template-columns: 34mm 1fr; gap: 1mm 4mm; font-size: 8.6pt; margin: 0 0 8mm; } .re-daten dt { color: #6B7178; } .re-daten dd { margin: 0; } .re-pos { width: 100%; border-collapse: collapse; font-size: 8.8pt; font-variant-numeric: tabular-nums; } .re-pos th { text-align: left; font-size: 6.6pt; text-transform: uppercase; letter-spacing: .05em; color: #6B7178; border-bottom: .35mm solid #1C1F23; padding: 0 1.5mm 1.5mm; font-weight: 600; } .re-pos td { padding: 2mm 1.5mm; border-bottom: .2mm solid #D9DCE0; } .re-pos .r { text-align: right; } .re-pos tfoot td { border-bottom: none; padding-top: 1.2mm; padding-bottom: 1.2mm; } .re-pos tr.sum td { font-weight: 700; border-top: .35mm solid #1C1F23; } .re-zahl { margin-top: 8mm; font-size: 8.4pt; } /* Stempel wie auf Papier: Eingangsstempel oben, Prüfstempel mit Namenszeichen (Termin 07.10.: „Stempel“, „kleines Zeichen“) */ .stempel { position: absolute; display: grid; justify-items: center; gap: .4mm; padding: 2.4mm 4mm; border: .7mm solid currentColor; border-radius: 1.4mm; color: #2B4C9E; text-transform: uppercase; text-align: center; line-height: 1.2; opacity: .86; mix-blend-mode: multiply; font-family: var(--font); } .stempel b { font-size: 15pt; letter-spacing: .14em; font-weight: 800; } .stempel span { font-size: 6.6pt; letter-spacing: .05em; font-weight: 600; } .stempel .nz { text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 0; color: inherit; font-size: 13pt; } .stempel.eingang { top: 14mm; right: 16mm; transform: rotate(4deg); color: #6A4C9C; padding: 1.8mm 3.2mm; } .stempel.eingang b { font-size: 10pt; } .stempel.pruef { right: 22mm; top: 158mm; transform: rotate(-7deg); } .stempel.rot { color: #B3261E; } .stempel.grau { color: #8A9099; border-style: dashed; } @media (prefers-reduced-motion: no-preference) { .zl-druck .stempel.pruef { animation: stempelIn .55s cubic-bezier(.2, .9, .3, 1.2) .25s both; } } @keyframes stempelIn { from { opacity: 0; transform: rotate(-7deg) scale(1.7); } 60% { opacity: .95; } to { opacity: .86; transform: rotate(-7deg) scale(1); } } .xml-vorschau { margin: 0; max-height: 15rem; overflow: auto; padding: .75rem .875rem; border-radius: var(--r-md); background: var(--fill-1); font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .75rem; line-height: 1.5; white-space: pre; color: var(--text-2); } /* Drucken: nur die Seiten der Druckfassung, ohne Rahmen und Hintergrund */ @media print { @page { size: A4; margin: 0; } html, body { background: #fff !important; } body > *:not(#ov) { display: none !important; } #ov > *:not(.zl-druck) { display: none !important; } .zl-druck { position: static !important; inset: auto !important; display: block !important; padding: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .druck-rahmen { display: block !important; width: auto !important; height: auto !important; box-shadow: none !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; border-radius: 0 !important; } .druck-kopf { display: none !important; } .druck-seiten { display: block !important; overflow: visible !important; padding: 0 !important; background: none !important; --dr-zoom: 1; } .dr-platz { width: auto !important; height: auto !important; position: static !important; break-after: page; page-break-after: always; } .dr-platz:last-child { break-after: auto; page-break-after: auto; } .dr-seite { position: relative !important; box-shadow: none !important; } .stempel { animation: none !important; } /* Einblend-Animationen und Glas-Effekte nie mitdrucken (sonst bleiben die Seiten auf Deckkraft 0 stehen) */ #ov *, #ov { animation: none !important; transition: none !important; } .zl-druck, .druck-rahmen, .druck-seiten, .dr-seite { opacity: 1 !important; filter: none !important; transform: none !important; } .dr-seite .stempel.pruef { transform: rotate(-7deg) !important; } .dr-seite .stempel.eingang { transform: rotate(4deg) !important; } } .zl-tab-t td:nth-child(3) { min-width: 14rem; } /* Zahlliste: Rechnung als kleine Vorschau je Zeile, Klick vergrößert (Jasper, 16.10.2026). Die Vorschau ist dieselbe A4-Seite wie in der Druckfassung, nur verkleinert (46 px breit = 210 mm × 0,058). */ .zl-tab-t td.zl-vs, .zl-tab-t th.zl-vs { width: 3.75rem; padding-left: .25rem; padding-right: .375rem; } .zl-thumb { all: unset; box-sizing: border-box; display: block; width: 46px; height: 65px; overflow: hidden; position: relative; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .08); cursor: zoom-in; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .zl-thumb:hover { transform: translateY(-1px) scale(1.08); box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 8px 18px rgba(0, 0, 0, .16); } .zl-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .zl-thumb .dr-seite.mini { position: absolute; top: 0; left: 0; display: block; transform: scale(.058); transform-origin: 0 0; box-shadow: none; pointer-events: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Die Mini-Rechnung steckt in der Tabelle der Zahlliste: deren Zeilenstile (sticky Kopf, Zebra, Auswahl) hier abschirmen */ .zl-thumb .re-pos th { position: static; z-index: auto; height: auto; background: none; text-transform: uppercase; font-size: 6.6pt; letter-spacing: .05em; color: #6B7178; font-weight: 600; padding: 0 1.5mm 1.5mm; border-bottom: .35mm solid #1C1F23; white-space: normal; } .zl-thumb .re-pos td { position: static; height: auto; background: none !important; padding: 2mm 1.5mm; border-radius: 0 !important; transition: none; vertical-align: top; } .zl-thumb .re-pos tfoot td { padding-top: 1.2mm; padding-bottom: 1.2mm; font-weight: 400; } .zl-thumb .re-pos tr.sum td { font-weight: 700; } .zl-thumb .re-pos .r { text-align: right; } /* Spaltenköpfe der Zahlliste dürfen umbrechen („Rechnung vom“ zweizeilig), damit alles in die Breite passt */ .zl-tab-t > thead > tr > th { white-space: normal; line-height: 1.2; } .zl-tab-t td .sub .btn { white-space: normal; text-align: left; line-height: 1.3; } /* Zahllisten: Übersicht als Tabelle nach Monaten, Detail mit Pfeilen zur vorherigen und nächsten Woche (Jasper, 16.10.2026) */ .zl-intro { margin: 0; } .zl-uebersicht tr.monat td { height: auto; padding: 1.125rem .75rem .375rem; font-size: var(--fs-cap); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: none !important; } .zl-uebersicht tbody:first-of-type tr.monat td { padding-top: .5rem; } .zl-uebersicht tbody tr.click { cursor: pointer; } .zl-uebersicht tbody tr.click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .zl-uebersicht tbody tr.jetzt td { background: color-mix(in srgb, var(--accent) 8%, transparent); } .zl-uebersicht tbody tr.jetzt .name { color: var(--accent-text); } .zl-uebersicht td.zl-weiter { color: var(--text-3); width: 2.5rem; } .zl-uebersicht tbody tr.click:hover td.zl-weiter { color: var(--accent-text); } .zl-kopf { display: flex; align-items: center; gap: .75rem; } .zl-titel { min-width: 0; flex: 1; display: grid; gap: .1875rem; } .zl-pfeil { flex: none; } .zl-pfeil.aus { opacity: .3; pointer-events: none; } .zl-uebersicht .zl-schmal { display: none; } @media (max-width: 600px) { .zl-uebersicht .zl-breit { display: none; } .zl-uebersicht .zl-schmal { display: block; } .zl-uebersicht td.zl-weiter { width: 1.5rem; padding-left: 0; } } @media (max-width: 600px) { .zl-uebersicht .zl-schmal .chip { white-space: normal; height: auto; min-height: 1.5rem; } .zl-uebersicht td { padding-left: .5rem; padding-right: .5rem; } } /* Seiten der Druckansicht: ein Platzhalter in verkleinerter Größe, die A4-Seite darin per transform verkleinert. So bleibt das Verhältnis von Schrift und Stempel in jedem Browser gleich, auch mit Mindestschriftgröße. */ .dr-platz { width: calc(210mm * var(--dr-zoom)); height: calc(297mm * var(--dr-zoom)); position: relative; flex: none; } .dr-platz > .dr-seite { position: absolute; top: 0; left: 0; transform: scale(var(--dr-zoom)); transform-origin: 0 0; } /* Nach „Zur Bezahlung freigeben“: Ergebnis mit PDF und SEPA-Datei, Versand an die Sachwalterin (16.10.2026) */ .zl-fertig .card-body { display: grid; gap: .875rem; padding-top: var(--pad); } .zl-fertig-kopf { display: flex; gap: .75rem; align-items: flex-start; } .zl-fertig-kopf > .i { color: var(--ok); width: 1.5rem; height: 1.5rem; flex: none; margin-top: .0625rem; } .zl-dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; } .zl-dateien li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r-md); background: var(--fill-1); } .zl-dateien .t { font-weight: 600; overflow-wrap: anywhere; } .zl-dateien .s { font-size: var(--fs-meta); color: var(--text-2); } .zl-fertig-fuss { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; } .zl-dateien .grow { flex: 1; min-width: 0; } /* ── Handy-Durchlauf 23.10.2026 ── */ /* Raster mit festen Mindestbreiten dürfen auf schmalen Geräten nicht über den Rand laufen */ .seg-grid { grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); } .zl-fertig .card-body, .seg-card { grid-template-columns: minmax(0, 1fr); } .card-head .right { flex-wrap: wrap; } /* Seitenkopf: Titel behält Platz, Aktionen rutschen bei wenig Breite in die nächste Zeile */ .phead > .mtitle { flex: 1 1 12rem; min-width: 0; } @media (max-width: 900px) { /* Detailblatt über der Liste: fast deckend, damit nichts durchscheint */ .insp { background: var(--sheen-strong), var(--glass-solid); } } @media (max-width: 600px) { /* Dialogköpfe: Titel und Schließen oben, Schritte in eigener Zeile */ .sheet-head { flex-wrap: wrap; } .sheet-head > .h4 { flex: 1; min-width: 0; } .sheet-head > .inv-schritte { order: 3; flex-basis: 100%; flex-wrap: wrap; margin: 0 !important; } .card-head .right { margin-left: 0; } .seg-top .t { flex-wrap: wrap; row-gap: .25rem; } .zl-dateien li { flex-wrap: wrap; } .zl-dateien li .grow { flex: 1 1 10rem; } .zl-fertig-fuss .btn { white-space: normal; height: auto; min-height: var(--control-h); padding-block: .5rem; text-align: left; } /* Zahlliste als Karten: Firma und Betrag oben, Daten darunter, Einordnung und Aktionen unten */ .zl-tab-t > thead { display: none; } .zl-tab-t, .zl-tab-t > tbody, .zl-tab-t > tfoot { display: block; } .zl-tab-t > tbody > tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'cb vs name betrag' 'cb vs d1 d1' 'cb vs d2 d2' 'cb vs d3 d3' 'cb vs ein acts'; gap: .25rem .625rem; padding: .75rem .625rem; border-radius: var(--r-md); } .zl-tab-t > tbody > tr > td:nth-child(4) { margin-top: .25rem; } .zl-tab-t > tbody > tr:nth-child(even) { background: var(--zebra); } .zl-tab-t > tbody > tr.sel { background: color-mix(in srgb, var(--accent) 8%, transparent); } .zl-tab-t > tbody > tr.blocked { background: var(--bad-bg); } .zl-tab-t > tbody > tr > td { display: block; height: auto; padding: 0; min-width: 0 !important; width: auto; background: none !important; border-radius: 0 !important; } .zl-tab-t > tbody > tr > td.cb, .zl-tab-t > tbody > tr > td.zl-vs { width: auto; padding: 0; } .zl-tab-t > tbody > tr > td:nth-child(3) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .zl-tab-t > tbody > tr > td:nth-child(1) { grid-area: cb; } .zl-tab-t > tbody > tr > td:nth-child(2) { grid-area: vs; } .zl-tab-t > tbody > tr > td:nth-child(3) { grid-area: name; } .zl-tab-t > tbody > tr > td:nth-child(4) { grid-area: d1; } .zl-tab-t > tbody > tr > td:nth-child(5) { grid-area: d2; } .zl-tab-t > tbody > tr > td:nth-child(6) { grid-area: d3; } .zl-tab-t > tbody > tr > td:nth-child(7) { grid-area: betrag; font-weight: 650; text-align: right; } .zl-tab-t > tbody > tr > td:nth-child(8) { grid-area: ein; } .zl-tab-t > tbody > tr > td:nth-child(9) { grid-area: acts; } .zl-tab-t > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(6)) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; font-size: var(--fs-meta); } .zl-tab-t > tbody > tr > td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before { flex: none; width: 4.5rem; font-size: var(--fs-cap); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .zl-tab-t > tbody > tr > td:is(:nth-child(5), :nth-child(6)) > .sub { margin: 0; } .zl-tab-t > tbody > tr > td:nth-child(8) { margin-top: .25rem; } .zl-tab-t > tbody > tr > td:nth-child(9) { margin-top: .25rem; } .zl-tab-t > tbody > tr > td:nth-child(4)::before { content: 'Rechnung'; } .zl-tab-t > tbody > tr > td:nth-child(5)::before { content: 'Leistung'; } .zl-tab-t > tbody > tr > td:nth-child(6)::before { content: 'Fällig'; } .zl-tab-t > tfoot > tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .75rem .625rem; } .zl-tab-t > tfoot > tr > td { display: block; height: auto; padding: 0; position: static; background: none; } .zl-tab-t > tfoot > tr > td:empty { display: none; } } /* Demo-Fassung */ .powered.demo-fuss { margin-top: -.25rem; opacity: .75; }