/* ==========================================================================
Kontor · Design A „Kontor mit Charakter“ – lokales Stylesheet (kein CDN)
Verspielt-professionell: Groschen (Hamster) als Sticker-Maskottchen, Bricolage
Grotesque als Stimme, ein kräftiges Pastellfeld pro Bereich, Druck-Tinte als
Konturfarbe, Knöpfe mit „Lippe“. Ausführlich beschrieben in docs/DESIGN.md.
Regeln: Inline-Styles und Inline-Skripte sind per CSP gesperrt – alles Layout
steht hier. Bestehende Klassennamen bleiben gültig (Feature-Pakete nutzen sie).
Feature-Pakete hängen eigene Abschnitte ganz am ENDE dieser Datei an; neue
Design-System-Abschnitte stehen deshalb VOR den responsiven Media-Blöcken.
Schriften (alle SIL Open Font License 1.1, Lizenzen in static/fonts/):
Bricolage Grotesque (Atelier Triay), Figtree (Erik Kennedy), Shantell Sans (Arrow Type)
========================================================================== */
/* --- Schriften ------------------------------------------------------------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
src: url("../fonts/BricolageGrotesque-latin.c47ac31e5437.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
src: url("../fonts/BricolageGrotesque-latin-ext.b21945eb5067.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 850; font-display: swap;
src: url("../fonts/Figtree-latin.392aed3eb142.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 850; font-display: swap;
src: url("../fonts/Figtree-latin-ext.8811e895c448.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 400 650; font-display: swap;
src: url("../fonts/ShantellSans-latin.4af18bcd639d.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 400 650; font-display: swap;
src: url("../fonts/ShantellSans-latin-ext.94278a088c00.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* --- Design-Tokens: hell ------------------------------------------------------ */
:root {
/* Druckfarben – in beiden Modi gleich (Sticker, Maskottchen, Chips) */
--print-ink: #1F1A14;
--sticker: #FFFDF7;
--fur: #F5A65B;
--blush: #FF9C86;
/* Neutrale: warmes Papier statt kaltem Grau */
--paper: #FBF6EC;
--paper-2: #F3EBDC;
--paper-3: #EADFCB;
--card: #FFFDF9;
--ink: #1F1A14;
--ink-2: #574E43;
--ink-3: #6E6357;
--line: rgba(31, 26, 20, .10);
--line-2: rgba(31, 26, 20, .20);
--edge: #1F1A14;
--lip: #1F1A14;
--focus: #2E86D6;
--shadow-card: 0 1px 0 rgba(31, 26, 20, .04), 0 22px 44px -30px rgba(70, 45, 10, .35);
--shadow-pop: 0 2px 0 rgba(31, 26, 20, .06), 0 28px 60px -24px rgba(50, 30, 5, .38);
/* Bereichsfarben: Feld (Pastell) · Solid (Füllungen, Linien) · Deep (Text auf Feld/Papier, AA) */
--sand: #F2E4C9; --sand-solid: #E0BF85; --sand-deep: #6A4B17;
--mint: #C6EFD4; --mint-solid: #3DBE78; --mint-deep: #0F6B3E;
--coral: #FFD8CE; --coral-solid: #FF7A5C; --coral-deep: #A3311A;
--lav: #DFD7FF; --lav-solid: #8C6DF2; --lav-deep: #4A2DB2;
--sky: #CDE7FB; --sky-solid: #3D9AE6; --sky-deep: #145A94;
--butter: #FFEAA3; --butter-solid: #F4C030; --butter-deep: #735100;
--rose: #F9DAEA; --rose-solid: #E066A6; --rose-deep: #8C2257;
/* Sticker-Palette (immer hell, auch im Dunkelmodus) */
--st-mint: #C6EFD4; --st-coral: #FFC9BC; --st-lav: #DFD7FF; --st-sky: #CDE7FB;
--st-butter: #FFEAA3; --st-sand: #F2E4C9; --st-rose: #F9D3E6;
--brand: #F5A65B;
/* Schrift */
--font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
--font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-hand: "Shantell Sans", "Figtree", cursive;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Typo-Skala */
--fs-display-xl: clamp(46px, 6.2vw, 84px);
--fs-display-l: clamp(38px, 4.6vw, 62px);
--fs-display-m: clamp(26px, 2.6vw, 34px);
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body: 15px;
--fs-small: 13px;
/* Radien, Abstände, Bewegung */
--r-xl: 36px; --r-l: 26px; --r-m: 20px; --r-s: 14px; --r-xs: 10px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
--ease-pop: cubic-bezier(.3, .7, .4, 1.5);
--ease-out: cubic-bezier(.2, .8, .2, 1);
--sidebar-w: 264px;
--tabbar-h: 78px;
--topbar-h: 72px;
/* Bereich (Standard: Übersicht/Sand) – wird pro Seite über body[data-section] gesetzt */
--a: var(--sand); --a-solid: var(--sand-solid); --a-deep: var(--sand-deep); --st: var(--st-sand);
/* Alte Token-Namen (für bestehende Feature-Pakete) → neue Werte */
--bg: var(--paper);
--surface: var(--card);
--sunken: var(--paper-2);
--hover: var(--paper-2);
--rule: var(--line);
--rule-strong: var(--line-2);
--text: var(--ink);
--muted: var(--ink-2);
--faint: var(--ink-3);
--ok: var(--mint-deep); --ok-tint: var(--mint);
--warn: var(--butter-deep); --warn-tint: var(--butter);
--danger: var(--coral-deep); --danger-tint: var(--coral);
--on-accent: var(--paper);
--radius: 12px;
--radius-lg: var(--r-m);
--shadow-sm: var(--shadow-card);
--font: var(--font-ui);
--mono: var(--font-mono);
color-scheme: light;
}
/* --- Design-Tokens: dunkel (Systemeinstellung oder Umschalter) ---------------- */
:root[data-theme="dark"] {
--paper: #16130F; --paper-2: #1D1914; --paper-3: #2A241D; --card: #221D17;
--ink: #F6EFE3; --ink-2: #D2C6B6; --ink-3: #B3A593;
--line: rgba(246, 239, 227, .10); --line-2: rgba(246, 239, 227, .22);
--edge: #F6EFE3; --lip: #000000; --focus: #7DBEF5;
--shadow-card: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -28px rgba(0, 0, 0, .7);
--shadow-pop: 0 2px 0 rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .75);
--sand: #30281D; --sand-solid: #D4B27A; --sand-deep: #F2DDB6;
--mint: #173628; --mint-solid: #4ED08A; --mint-deep: #A3EBC3;
--coral: #40211A; --coral-solid: #FF8A6E; --coral-deep: #FFBCAB;
--lav: #2A2347; --lav-solid: #A28BFF; --lav-deep: #D3C7FF;
--sky: #152D43; --sky-solid: #5AAEF0; --sky-deep: #ADD6FA;
--butter: #372B10; --butter-solid: #F4C030; --butter-deep: #FFDF8A;
--rose: #3A1D2D; --rose-solid: #F07CB8; --rose-deep: #F8C3DE;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #16130F; --paper-2: #1D1914; --paper-3: #2A241D; --card: #221D17;
--ink: #F6EFE3; --ink-2: #D2C6B6; --ink-3: #B3A593;
--line: rgba(246, 239, 227, .10); --line-2: rgba(246, 239, 227, .22);
--edge: #F6EFE3; --lip: #000000; --focus: #7DBEF5;
--shadow-card: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -28px rgba(0, 0, 0, .7);
--shadow-pop: 0 2px 0 rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .75);
--sand: #30281D; --sand-solid: #D4B27A; --sand-deep: #F2DDB6;
--mint: #173628; --mint-solid: #4ED08A; --mint-deep: #A3EBC3;
--coral: #40211A; --coral-solid: #FF8A6E; --coral-deep: #FFBCAB;
--lav: #2A2347; --lav-solid: #A28BFF; --lav-deep: #D3C7FF;
--sky: #152D43; --sky-solid: #5AAEF0; --sky-deep: #ADD6FA;
--butter: #372B10; --butter-solid: #F4C030; --butter-deep: #FFDF8A;
--rose: #3A1D2D; --rose-solid: #F07CB8; --rose-deep: #F8C3DE;
color-scheme: dark;
}
}
/* --- Bereiche: body[data-section] (Kontext-Prozessor) und .area-* ---------------
Übersicht = Sand · Verkauf = Mint · Geld = Himmel · Ausgaben = Koralle ·
Steuern = Lavendel · Auswertung = Butter · Einstellungen = Rosé */
body[data-section="uebersicht"], .area-sand { --a: var(--sand); --a-solid: var(--sand-solid); --a-deep: var(--sand-deep); --st: var(--st-sand); }
body[data-section="verkauf"], .area-mint { --a: var(--mint); --a-solid: var(--mint-solid); --a-deep: var(--mint-deep); --st: var(--st-mint); }
body[data-section="geld"], .area-sky { --a: var(--sky); --a-solid: var(--sky-solid); --a-deep: var(--sky-deep); --st: var(--st-sky); }
body[data-section="ausgaben"], .area-coral { --a: var(--coral); --a-solid: var(--coral-solid); --a-deep: var(--coral-deep); --st: var(--st-coral); }
body[data-section="steuern"], .area-lav { --a: var(--lav); --a-solid: var(--lav-solid); --a-deep: var(--lav-deep); --st: var(--st-lav); }
body[data-section="auswertung"], .area-butter { --a: var(--butter); --a-solid: var(--butter-solid); --a-deep: var(--butter-deep); --st: var(--st-butter); }
body[data-section="einstellungen"], .area-rose { --a: var(--rose); --a-solid: var(--rose-solid); --a-deep: var(--rose-deep); --st: var(--st-rose); }
/* Akzent folgt dem Bereich (muss dort neu berechnet werden, wo --a gesetzt wird) */
body, .area-sand, .area-mint, .area-sky, .area-coral, .area-lav, .area-butter, .area-rose {
--accent: var(--a-deep); --accent-hover: var(--ink); --accent-tint: var(--a);
}
/* --- Basis ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; font-weight: 500;
font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* Papierkorn – kaum sichtbar, macht Flächen „gedruckt“ */
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .04;
background-image: url("data:image/svg+xml;utf8,");
}
:root[data-theme="dark"] body::after { opacity: .08; filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { opacity: .08; filter: invert(1); } }
a { color: var(--a-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .2s, color .2s; font-weight: 650; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--font-display); font-optical-sizing: auto; color: var(--ink); }
h1 { font-size: var(--fs-display-m); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 780; letter-spacing: -.022em; }
h3 { font-size: var(--fs-h3); font-weight: 750; letter-spacing: -.015em; }
p { margin: 0 0 .7rem; }
small, .muted { color: var(--ink-2); }
ul, ol { padding-left: 1.2rem; }
code { font-family: var(--font-mono); font-size: .85em; background: var(--paper-2); padding: .1em .4em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--st-butter); color: var(--print-ink); }
.sr-only, .sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; box-shadow: none !important; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 300; border-radius: 12px; text-decoration: none; }
.skip-link:focus { left: 1rem; }
.num, .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: .8rem; word-break: break-all; color: var(--ink-2); }
.docno { font-weight: 800; letter-spacing: -.02em; }
a.docno { color: var(--ink); }
.icon { width: 19px; height: 19px; flex: none; display: inline-block; vertical-align: -4px; }
img { max-width: 100%; }
hr { border: 0; border-top: 1.5px dashed var(--line-2); margin: 1.25rem 0; }
/* --- Typografie (Design-System) ------------------------------------------------ */
.display-xl, .display-l, .display-m { font-family: var(--font-display); font-weight: 800; margin: 0; font-optical-sizing: auto; }
.display-xl { font-size: var(--fs-display-xl); line-height: .92; letter-spacing: -.04em; }
.display-l { font-size: var(--fs-display-l); line-height: .95; letter-spacing: -.036em; }
.display-m { font-size: var(--fs-display-m); line-height: 1.04; letter-spacing: -.028em; }
.overline { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a-deep); }
.lede { margin: 0; font-size: 17.5px; line-height: 1.45; color: var(--ink-2); max-width: 54ch; font-weight: 500; }
.lede b, .lede strong { color: var(--ink); font-weight: 750; }
.hand { font-family: var(--font-hand); font-weight: 500; letter-spacing: -.005em; }
.money { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.money { font-size: clamp(28px, 3vw, 40px); }
.amount-big .money, .kpi .value .money { font-size: inherit; }
.money .c { font-size: .46em; letter-spacing: -.01em; vertical-align: .86em; margin-left: .04em; font-weight: 750; }
.amount-display { font-family: var(--font-display); font-weight: 750; letter-spacing: -.01em; }
/* --- App-Rahmen ----------------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
padding: 18px 14px 16px; background: var(--paper-2); scrollbar-width: none; z-index: 5; view-transition-name: sidebar;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-head { display: flex; align-items: center; gap: .5rem; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 4px; height: 52px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.brand img { width: 48px; height: 40px; flex: none; transition: transform .35s var(--ease-pop); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 29px; letter-spacing: -.045em; line-height: 1; }
.brand-word i { font-style: normal; color: var(--fur); }
.tenant { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.tenant:hover { background: var(--paper-3); }
.tenant-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
font-family: var(--font-display); font-weight: 800; font-size: 14px; background: var(--st-butter); color: var(--print-ink); border: 1.5px solid var(--print-ink); }
.tenant-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tenant-text strong { font-size: 14px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-text span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.primary.btn-new { width: 100%; justify-content: flex-start; margin: 2px 0 6px; --lipc: var(--brand); }
.btn-new kbd { margin-left: auto; }
.new-menu { position: relative; }
.new-menu > .menu-list { left: 0; right: 0; min-width: 0; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.nav-group:first-child { margin-top: 0; }
.nav-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding: 4px 12px; }
.nav-title::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--a-solid); border: 1.5px solid var(--print-ink); transform: rotate(12deg); flex: none; }
.nav a {
position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px 0 12px; border-radius: 13px;
font-size: 15px; font-weight: 620; color: var(--ink-2); text-decoration: none; transition: background-color .2s, color .2s;
}
.nav a .icon { color: var(--ink-3); transition: transform .25s var(--ease-pop), color .2s; }
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav a:hover .icon { transform: rotate(-8deg) scale(1.08); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--a); color: var(--ink); font-weight: 760; }
.nav a[aria-current="page"] .icon { color: var(--a-deep); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 5px; border-radius: 0 4px 4px 0; background: var(--a-solid); }
.nav a .nav-count { margin-left: auto; font-size: 11px; font-weight: 800; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--print-ink); color: var(--sticker); }
.nav-bottom { margin-top: auto; padding-top: 10px; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: 10px; border-top: 1.5px dashed var(--line-2); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 14px; text-decoration: none; }
.who:hover { background: var(--paper-3); }
.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: var(--topbar-h);
padding: 12px 36px 12px 30px; background: color-mix(in srgb, var(--paper) 88%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
transition: box-shadow .25s var(--ease-out), border-color .25s; border-bottom: 1.5px solid transparent;
}
.topbar.is-stuck { box-shadow: 0 10px 30px -22px rgba(31, 26, 20, .45); border-bottom-color: var(--line); }
.topbar-tenant { display: none; }
.topbar-title { display: none; }
.env { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.env-chip { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: 0 11px; height: 28px; border-radius: 999px;
background: var(--st-butter); color: var(--print-ink); border: 1.5px dashed var(--print-ink); font-size: 12.5px; font-weight: 750; }
.env-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral-solid); border: 1.5px solid var(--print-ink); }
.env-chip a { color: inherit; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar-new { display: none; }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--st-butter); color: var(--print-ink); border: 1.5px solid var(--print-ink);
display: inline-grid; place-items: center; font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; flex: none; }
.avatar.small { width: 30px; height: 30px; border-radius: 10px; font-size: 11.5px; }
.avatar .icon { width: 17px; height: 17px; }
.avatar-btn { list-style: none; cursor: pointer; border-radius: 13px; display: block; transition: transform .2s var(--ease-pop); }
.avatar-btn::-webkit-details-marker { display: none; }
.avatar-btn:hover { transform: rotate(-4deg); }
.content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 6px 36px 80px 30px; flex: 1; }
.tabbar { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 13px; background: none; color: var(--ink-2);
cursor: pointer; transition: background-color .2s, color .2s, transform .15s var(--ease-pop); padding: 0; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.sidebar .sidebar-close { display: none; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline-block; }
:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}
kbd { font-family: var(--font-ui); font-size: 11px; font-weight: 750; min-width: 21px; height: 21px; padding: 0 5px; display: inline-grid; place-items: center;
border-radius: 6px; border: 1.5px solid currentColor; opacity: .55; line-height: 1; }
/* --- Seitenkopf: Farbfeld mit großem Titel ------------------------------------------ */
.page-head {
position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between;
margin: 0 0 26px; padding: 34px 40px 32px; min-height: 172px; background: var(--a); border-radius: var(--r-xl);
view-transition-name: page-head;
}
.page-head > div:first-child, .page-head > h1:first-child { flex: 1 1 480px; min-width: 0; }
.page-head h1 { font-size: var(--fs-display-l); line-height: .98; letter-spacing: -.038em; overflow-wrap: anywhere; hyphens: auto; }
.page-head h1 .muted { color: color-mix(in srgb, var(--ink) 55%, var(--a)); }
.page-head .sub, .page-head p.muted, .page-head .lede { margin: 14px 0 0; font-size: 17px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 80%, var(--a)); max-width: 58ch; }
.page-head p.row { margin: 14px 0 0; }
.page-head .row .muted { color: color-mix(in srgb, var(--ink) 78%, var(--a)); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; position: relative; z-index: 3; }
.page-head .actions form { margin: 0; }
.page-head:has(> .page-art) { padding-right: clamp(40px, 21vw, 262px); margin-bottom: 34px; }
.page-head .page-art { position: absolute; right: 30px; bottom: -28px; width: clamp(130px, 15vw, 200px); height: auto; z-index: 2; pointer-events: none; }
.page-head .stats { flex-basis: 100%; }
.head-swoosh { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.head-swoosh svg { position: absolute; right: -40px; top: -30px; width: 520px; height: 320px; }
.head-swoosh path { fill: none; stroke: var(--a-solid); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.page-head .state-line { margin-top: 14px; }
/* Kennzahlen im Seitenkopf (wie Prototyp) */
.stats { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 26px; padding-top: 20px; border-top: 2px dashed color-mix(in srgb, var(--print-ink) 16%, transparent); }
.stat { padding: 0 26px; border-left: 2px dashed color-mix(in srgb, var(--print-ink) 22%, transparent); min-width: 0; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a-deep); }
.stat .k.late { color: var(--coral-deep); }
.stat .money { font-size: clamp(28px, 3vw, 40px); display: block; margin-top: 8px; }
.stat .sub, .stat .note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 8px; font-weight: 600; }
.stat .badge { margin-top: 10px; }
:root[data-theme="dark"] .stats, :root[data-theme="dark"] .stat { border-color: var(--line-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stats, :root:not([data-theme="light"]) .stat { border-color: var(--line-2); } }
/* --- Flächen ------------------------------------------------------------------ */
.card, .section, .panel {
position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card);
padding: 24px 26px; margin: 0 0 22px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card > h2:first-child, .section > h2:first-child, .panel > h2:first-child { margin-bottom: 14px; }
.card h3, .section h3 { margin-bottom: 8px; }
.card.lift:hover, .section.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.card-field { background: var(--a); border-color: transparent; box-shadow: none; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card-head > a, .see-all { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 750; color: var(--a-deep); text-decoration: none;
border-radius: 10px; padding: 6px 8px; margin: -6px -8px; transition: gap .2s var(--ease-pop), background-color .2s; }
.card-head > a::after, .see-all::after { content: "→"; font-weight: 800; }
.card-head > a:hover, .see-all:hover { gap: 9px; background: color-mix(in srgb, var(--a-solid) 16%, transparent); }
.card > :last-child, .section > :last-child, .panel > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 22px; margin-bottom: 22px; }
.grid > .card, .grid > .section, .grid > form.card { margin: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.split-main > * > .card:last-child, .split-main > * > .section:last-child { margin-bottom: 0; }
h2.group-title { margin: 2rem 0 .85rem; font-size: 12px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 800; }
/* Kennzahlen: einzelne Karten mit Überzeile */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 22px; }
.figure { min-width: 0; margin: 0; padding: 18px 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card);
transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.figure:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.figure dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a-deep); }
.figure dd { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.figure .note { display: block; margin-top: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; }
.figure.alert-figure { background: var(--coral); border-color: transparent; box-shadow: none; }
.figure.alert-figure dt, .figure.alert-figure dd { color: var(--coral-deep); }
.page-head .figures { flex-basis: 100%; margin: 6px 0 0; gap: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-top: 20px;
border-top: 2px dashed color-mix(in srgb, var(--print-ink) 16%, transparent); }
.page-head .figure { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 4px 22px 2px; border-left: 2px dashed color-mix(in srgb, var(--print-ink) 20%, transparent); transform: none; }
.page-head .figure:first-child { border-left: 0; padding-left: 0; }
.page-head .figure.alert-figure dt, .page-head .figure.alert-figure dd { color: var(--coral-deep); }
.kpi .label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a-deep); }
.kpi .value { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 8px 0 6px; }
/* --- Tabellen --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); margin: 0 0 22px; padding: 6px 12px 10px; }
.card .table-wrap, .section .table-wrap, .panel .table-wrap, .settings-section .table-wrap, .auth-panel .table-wrap { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 -14px; padding: 0 2px; }
.card > .table-wrap:last-child, .section > .table-wrap:last-child { margin-bottom: -10px; }
.card > table, .section > table { margin: 0 -12px; width: calc(100% + 24px); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 14px; padding-bottom: 12px; background: none; border-bottom: 1.5px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody td { transition: background-color .2s; }
tbody tr:hover td { background: var(--paper); }
tbody tr:hover td:first-child { border-radius: 16px 0 0 16px; }
tbody tr:hover td:last-child { border-radius: 0 16px 16px 0; }
tr[data-href] { cursor: pointer; }
td.num, th.num { text-align: right; }
td.actions { white-space: nowrap; text-align: right; }
th a { color: inherit; }
td a { font-weight: 700; }
tfoot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; background: none; font-family: var(--font-display); }
.table-empty { padding: 2.5rem 1.25rem !important; text-align: center; color: var(--ink-2); }
tbody tr.is-overdue td { background: color-mix(in srgb, var(--coral) 60%, transparent); }
tbody tr.is-overdue:hover td { background: color-mix(in srgb, var(--coral) 90%, transparent); }
tr.is-overdue td:first-child { box-shadow: inset 5px 0 0 var(--coral-solid); border-radius: 14px 0 0 14px; }
tr.is-overdue td:last-child { border-radius: 0 14px 14px 0; }
td[data-m="a"], td.amount-cell { font-family: var(--font-display); font-weight: 750; font-size: 16.5px; letter-spacing: -.01em; }
.who-cell { display: flex; align-items: center; gap: 13px; min-width: 0; }
.who-cell .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-cell .t > a, .who-cell .t > strong { color: var(--ink); font-weight: 750; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.who-cell .t > a:hover { text-decoration: underline; text-decoration-color: var(--a-solid); }
.who-cell .t small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
/* Avatare bekommen reihum eine Stickerfarbe */
tbody tr:nth-child(6n+1) .avatar { background: var(--st-butter); }
tbody tr:nth-child(6n+2) .avatar { background: var(--st-sand); }
tbody tr:nth-child(6n+3) .avatar { background: var(--st-sky); }
tbody tr:nth-child(6n+4) .avatar { background: var(--st-lav); }
tbody tr:nth-child(6n+5) .avatar { background: var(--st-mint); }
tbody tr:nth-child(6n+6) .avatar { background: var(--st-coral); }
tbody tr:hover .avatar { transform: rotate(-5deg); }
.who-cell .avatar { transition: transform .25s var(--ease-pop); }
@media (hover: none) { a:hover { text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); } }
.late-text { color: var(--coral-deep); font-weight: 750; }
.ok-text { color: var(--mint-deep); font-weight: 750; }
.doc-lines td { padding-top: 12px; padding-bottom: 12px; }
.doc-lines td strong { font-weight: 700; }
.m-only { display: none; }
/* --- Status als Sticker-Chips --------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 10px; border-radius: 999px; vertical-align: middle;
font-size: 12.5px; font-weight: 780; line-height: 1; white-space: nowrap; color: var(--print-ink); background: var(--sticker);
border: 1.5px solid var(--print-ink); box-shadow: 0 0 0 2.5px var(--sticker), 0 3px 0 2.5px rgba(31, 26, 20, .16);
transform: rotate(var(--tilt, -2deg)); transition: transform .25s var(--ease-pop);
}
.badge a { color: inherit; }
.badge.ok { background: var(--st-mint); }
.badge.ok::before { content: ""; width: 11px; height: 11px; flex: none; margin-left: -2px; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.badge.warn { background: var(--st-butter); }
.badge.danger { background: var(--st-coral); }
.badge.info { background: var(--st-sky); }
.badge.draft { background: var(--sticker); border-style: dashed; }
.badge.unclear { background: var(--st-butter); border-style: dashed; }
.badge.flat { transform: none; }
tbody tr:nth-child(even) .badge, .state-line > span:nth-child(even) .badge { --tilt: 1.5deg; }
tbody tr:hover .badge, .badge:hover { transform: rotate(0) scale(1.06); }
:root[data-theme="dark"] .badge { box-shadow: 0 0 0 2.5px var(--sticker), 0 3px 0 2.5px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge { box-shadow: 0 0 0 2.5px var(--sticker), 0 3px 0 2.5px rgba(0, 0, 0, .5); } }
.state-line { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; margin-top: 12px; align-items: center; }
.state-line > span { display: inline-flex; gap: 8px; align-items: center; }
.state-line .k { color: color-mix(in srgb, var(--ink) 72%, var(--a)); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* --- Hinweise --------------------------------------------------------------- */
.alert {
--alert-bg: var(--card); --alert-st: var(--st-sky); --alert-icon: url("data:image/svg+xml;utf8,");
position: relative; border: 1.5px solid var(--line-2); background: var(--alert-bg); border-radius: var(--r-m); padding: 14px 18px 14px 60px; margin: 0 0 18px;
font-size: 14.5px; line-height: 1.5; color: var(--ink); min-height: 58px;
}
.alert::before { content: ""; position: absolute; left: 15px; top: 13px; width: 32px; height: 32px; border-radius: 11px; border: 2px solid var(--print-ink);
background: var(--alert-icon) center/19px no-repeat, var(--alert-st); transform: rotate(-6deg); box-shadow: 0 2px 0 var(--print-ink); }
.alert strong:first-child { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 16px; font-weight: 780; letter-spacing: -.01em; }
.alert.success { --alert-bg: var(--mint); --alert-st: var(--st-mint); border-color: transparent;
--alert-icon: url("data:image/svg+xml;utf8,"); }
.alert.error { --alert-bg: var(--coral); --alert-st: var(--st-coral); border-color: transparent;
--alert-icon: url("data:image/svg+xml;utf8,"); }
.alert.warning { --alert-bg: var(--butter); --alert-st: var(--st-butter); border: 2px dashed color-mix(in srgb, var(--butter-deep) 45%, transparent);
--alert-icon: url("data:image/svg+xml;utf8,"); }
.alert.info { --alert-bg: var(--sky); --alert-st: var(--st-sky); border-color: transparent; }
.alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.alert a { color: inherit; }
.messages { list-style: none; margin: 0 0 18px; padding: 0; }
.messages .toast-face { display: none; }
.messages .toast-close { display: none; }
/* --- Knöpfe zum Drücken ------------------------------------------------------------- */
.btn {
--lipc: var(--lip);
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 17px;
border-radius: var(--r-s); border: 2px solid var(--edge); background: var(--card); color: var(--ink);
font: inherit; font-size: 14.5px; font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none;
box-shadow: 0 4px 0 var(--lipc); transform: translateY(0);
transition: transform .14s var(--ease-pop), box-shadow .14s var(--ease-pop), background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--lipc); color: var(--ink); text-decoration: none; }
.btn:active, .btn.is-pressed { transform: translateY(4px); box-shadow: 0 0 0 var(--lipc); transition-duration: .06s; }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); --lipc: var(--a-solid); }
.btn.primary:hover { color: var(--paper); }
.btn.danger { color: var(--coral-deep); border-color: var(--coral-deep); --lipc: var(--coral-deep); }
.btn.danger:hover { background: var(--coral); color: var(--coral-deep); }
.btn.small { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; box-shadow: 0 3px 0 var(--lipc); }
.btn.small:hover { box-shadow: 0 4px 0 var(--lipc); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 0 0 var(--lipc); }
.btn.large, .btn.xl { height: 58px; padding: 0 26px; font-size: 17px; border-radius: 18px; box-shadow: 0 5px 0 var(--lipc); }
.btn.large:hover, .btn.xl:hover { box-shadow: 0 6px 0 var(--lipc); }
.btn.large:active, .btn.xl:active { transform: translateY(5px); box-shadow: 0 0 0 var(--lipc); }
.btn.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.quiet:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); transform: none; }
.btn.quiet:active { transform: scale(.97); }
.btn.sticker { background: var(--sticker); color: var(--print-ink); border-color: var(--print-ink); --lipc: var(--print-ink); }
.btn.link { border: 0; background: none; box-shadow: none; color: var(--a-deep); padding: 0; height: auto; font-weight: 750; text-decoration: underline;
text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transform: none; }
.btn.link:hover { text-decoration-color: currentColor; transform: none; box-shadow: none; }
.btn .icon { width: 18px; height: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--lipc); }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.btn.menu-toggle { display: none; }
form.inline { display: inline; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row form { margin: 0; }
/* Schnellaktionen */
.quick { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; }
.quick .btn { border-radius: 999px; }
.qtile {
position: relative; display: flex; flex-direction: column; width: 214px; min-height: 120px; padding: 14px 16px; border-radius: 22px;
background: var(--a); color: var(--print-ink); border: 2px solid var(--print-ink); box-shadow: 0 5px 0 var(--print-ink); text-decoration: none;
transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop);
}
.qtile:nth-child(1) { --rot: -1.2deg; } .qtile:nth-child(2) { --rot: .8deg; } .qtile:nth-child(3) { --rot: -.6deg; } .qtile:nth-child(4) { --rot: 1deg; }
.qtile:hover { transform: translateY(-3px) rotate(var(--rot)); box-shadow: 0 8px 0 var(--print-ink); color: var(--print-ink); }
.qtile:active { transform: translateY(5px); box-shadow: 0 0 0 var(--print-ink); transition-duration: .06s; }
.qtile .doodle { width: 46px; height: 46px; margin: -2px 0 10px -4px; transition: transform .35s var(--ease-pop); }
.qtile:hover .doodle { transform: rotate(-10deg) scale(1.1); }
.qtile-t { font-family: var(--font-display); font-weight: 780; font-size: 19px; letter-spacing: -.02em; line-height: 1.05; }
.qtile-s { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--print-ink) 74%, transparent); margin-top: 4px; }
.qtile kbd { position: absolute; top: 14px; right: 14px; opacity: .45; color: var(--print-ink); }
:root[data-theme="dark"] .qtile { background: var(--st); box-shadow: 0 5px 0 #000; }
:root[data-theme="dark"] .qtile:hover { box-shadow: 0 8px 0 #000; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .qtile { background: var(--st); box-shadow: 0 5px 0 #000; }
:root:not([data-theme="light"]) .qtile:hover { box-shadow: 0 8px 0 #000; }
}
/* --- Formulare: freundlich statt technisch ---------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field .label, .label { font-weight: 720; font-size: 14px; color: var(--ink); }
.field .req { color: var(--coral-deep); margin-left: 2px; }
.field .help { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ink-2); font-weight: 550; }
.field .help::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: var(--a-solid);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.field .errors, .errorlist { color: var(--coral-deep); font-size: 13.5px; font-weight: 700; margin: 0; padding: 0; list-style: none; }
.field .errors li, .errorlist li { display: flex; gap: 7px; align-items: flex-start; }
.field .errors li::before, .errorlist li::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
background: var(--st-coral); color: var(--print-ink); border: 1.5px solid var(--print-ink); font-size: 11px; font-weight: 900; transform: rotate(-6deg); }
.field:has(.errors) > label { color: var(--coral-deep); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], input[type=url], input[type=tel], input:not([type]), select, textarea {
font: inherit; font-size: 15px; font-weight: 550; color: var(--ink); background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-s);
padding: 0 14px; width: 100%; height: 46px; box-shadow: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select { padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer;
background: var(--card) url("data:image/svg+xml;utf8,") right 12px center/18px no-repeat; }
select[multiple] { height: auto; padding: 8px; background-image: none; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .85; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--edge); box-shadow: 0 3px 0 var(--lip), 0 0 0 4px color-mix(in srgb, var(--focus) 28%, transparent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--coral-deep); background-color: color-mix(in srgb, var(--coral) 45%, var(--card)); }
input[type=date], input[type=month] { min-width: 0; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
input[type=radio] { accent-color: var(--a-solid); width: 1.1rem; height: 1.1rem; }
/* Checkbox = Schalter (role="switch" kommt aus dem Widget-Template) */
input[type=checkbox] {
appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer;
border: 2px solid var(--print-ink); background: var(--paper-3); transition: background-color .25s; vertical-align: middle;
}
input[type=checkbox]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
background: var(--sticker); border: 2px solid var(--print-ink); box-sizing: border-box; transition: transform .3s var(--ease-pop); }
input[type=checkbox]:checked { background: var(--mint-solid); }
input[type=checkbox]:checked::before { transform: translateX(20px); }
input[type=checkbox]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[type=checkbox][aria-invalid="true"] { border-color: var(--coral-deep); }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
:root[data-theme="dark"] input[type=checkbox] { border-color: var(--ink); background: var(--paper-3); }
:root[data-theme="dark"] input[type=checkbox]:checked { background: var(--mint-solid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type=checkbox] { border-color: var(--ink); } :root:not([data-theme="light"]) input[type=checkbox]:checked { background: var(--mint-solid); } }
/* Auswahl- und Bestätigungskästchen (von Hand gebaut, ohne role="switch"): Häkchen statt Schalter – ein Schalter
heißt „sofort an/aus“, eine Zeile auswählen ist eine Auswahl. :where hält die Spezifität niedrig. */
input[type=checkbox]:where(:not([role=switch])) { width: 24px; height: 24px; border-radius: 7px; }
input[type=checkbox]:where(:not([role=switch]))::before { top: 1px; left: 6px; width: 8px; height: 13px; border: solid var(--print-ink);
border-width: 0 3px 3px 0; border-radius: 0; background: none; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease-pop); }
input[type=checkbox]:where(:not([role=switch])):checked::before { transform: rotate(45deg) scale(1); }
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; color: var(--ink-2); }
input[type=file]::file-selector-button { font: inherit; font-weight: 750; font-size: 13.5px; height: 36px; padding: 0 13px; margin-right: 10px; border-radius: 11px;
border: 2px solid var(--edge); background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--lip); cursor: pointer; }
.choice { display: flex; gap: 12px; align-items: center; font-weight: 600 !important; font-size: 14.5px !important; cursor: pointer; }
.choice input { margin-top: 0; }
/* Schalterzeile (field.html) */
.toggle-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--r-m);
background: var(--paper); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s; }
.toggle-row:hover { border-color: var(--ink-3); }
.toggle-row .toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toggle-row .toggle-text b { font-size: 14.5px; font-weight: 740; line-height: 1.3; }
.toggle-row .toggle-text small { font-size: 13px; color: var(--ink-2); line-height: 1.4; font-weight: 550; }
.field:has(.toggle-row) > .help { display: none; }
/* Auswahlkarten (RadioSelect / kurze Auswahl) */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.choice-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--line-2);
background: var(--card); cursor: pointer; font-weight: 700; font-size: 14.5px; line-height: 1.35; transition: transform .2s var(--ease-pop), border-color .2s, background-color .2s, box-shadow .2s; }
.choice-card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card .cc-dot { flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--card); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.choice-card:has(input:checked) { background: var(--st); color: var(--print-ink); border-color: var(--print-ink); box-shadow: 0 4px 0 var(--print-ink); }
.choice-card:has(input:checked) .cc-dot { border-color: var(--print-ink); background: var(--print-ink); box-shadow: inset 0 0 0 4px var(--sticker); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Segmente */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 8%, transparent); max-width: 100%; }
.segmented label { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 12px; font-size: 14px; font-weight: 720; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s, transform .15s var(--ease-pop); }
.segmented label:hover { color: var(--ink); }
.segmented label:active { transform: scale(.96); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 rgba(31, 26, 20, .12), 0 0 0 1.5px var(--edge); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Betragsfelder mit € */
.affix { position: relative; display: flex; align-items: center; }
.affix input { padding-right: 40px; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.affix::after { content: attr(data-affix); position: absolute; right: 14px; color: var(--ink-3); font-weight: 750; pointer-events: none; }
fieldset { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); padding: 22px 26px 26px; margin: 0 0 22px; min-width: 0; }
legend { float: left; width: 100%; padding: 0; margin: 0 0 16px; font-family: var(--font-display); font-size: 21px; font-weight: 780; letter-spacing: -.02em; }
legend + * { clear: both; }
.radio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.radio-list label { display: flex; gap: 12px; align-items: flex-start; font-weight: 650; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card); cursor: pointer; transition: border-color .2s, background-color .2s; }
.radio-list label:hover { border-color: var(--ink-3); }
.radio-list label:has(input:checked) { background: var(--st); color: var(--print-ink); border-color: var(--print-ink); }
.radio-list label:has(input:checked) small { color: color-mix(in srgb, var(--print-ink) 70%, transparent); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; align-items: center; }
.form-actions > a:not(.btn) { color: var(--ink-2); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.toolbar .field { min-width: 160px; }
.toolbar .field label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
details.filters > summary { display: none; }
/* --- Listen: Reiter, Suche, Menüs -------------------------------------------------- */
.listbar { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; justify-content: space-between; margin: 0 0 18px; }
.listbar > .tabs, .listbar > .searchrow { margin: 0; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--paper-2); border-radius: 17px; margin: 0 0 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 12px; color: var(--ink-2); font-size: 14.5px; font-weight: 720; white-space: nowrap; text-decoration: none;
transition: background-color .2s, color .2s, transform .15s var(--ease-pop); }
.tabs a:hover { color: var(--ink); background: var(--paper-3); }
.tabs a:active { transform: scale(.96); }
.tabs a[aria-current="true"], .tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.tabs .n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--card); color: var(--ink-2); margin-left: 0; }
.tabs a[aria-current="true"] .n, .tabs a[aria-current="page"] .n { background: var(--a-solid); color: var(--print-ink); }
.searchrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.search-field { position: relative; width: 320px; flex: 0 1 auto; min-width: 0; }
.listbar .searchrow { flex-wrap: nowrap; }
.search-field .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.search-field input { padding-left: 42px; height: 46px; border-radius: 15px; }
.searchrow > input[type=search] { max-width: 320px; height: 46px; }
.searchrow .choice { font-size: 14px !important; }
.subnav { display: flex; gap: 4px; padding: 5px; background: var(--paper-2); border-radius: 17px; margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 12px; color: var(--ink-2); font-size: 14.5px; font-weight: 720; white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s; }
.subnav a:hover { color: var(--ink); background: var(--paper-3); }
.subnav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.crumbs { margin: 4px 0 12px; font-size: 14px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 700; text-decoration: none; padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 12px; transition: background-color .2s, color .2s, gap .2s var(--ease-pop); }
.crumbs a::before { content: ""; width: 8px; height: 8px; border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(45deg); margin: 0 2px 0 6px; }
.crumbs a:hover { color: var(--ink); background: var(--paper-2); gap: 3px; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > .menu-list { display: block; animation: pop .3s var(--ease-pop) both; }
.menu-list { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 16rem; background: var(--card); color: var(--ink); border: 2px solid var(--print-ink);
border-radius: 20px; box-shadow: 0 5px 0 var(--print-ink), 0 30px 50px -20px rgba(0, 0, 0, .35); padding: 8px; z-index: 40; }
:root[data-theme="dark"] .menu-list { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 30px 50px -20px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-list { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 30px 50px -20px rgba(0, 0, 0, .7); } }
.menu-list > a, .menu-list > button, .menu-list > form > button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 8px 11px; border-radius: 13px;
color: var(--ink); background: none; border: 0; font: inherit; font-size: 14.5px; font-weight: 680; text-align: left; cursor: pointer; text-decoration: none; transition: background-color .15s; }
.menu-list > a:hover, .menu-list > button:hover, .menu-list > form > button:hover { background: var(--a); }
.menu-list > form { margin: 0; }
.menu-list .icon { width: 18px; height: 18px; color: var(--ink-2); }
.menu-list .doodle { width: 30px; height: 30px; flex: none; }
.menu-head { display: flex; flex-direction: column; padding: 8px 11px 10px; margin-bottom: 6px; border-bottom: 1.5px dashed var(--line-2); line-height: 1.35; }
.menu-head strong { font-family: var(--font-display); font-size: 16px; }
.menu-head span { font-size: 13px; color: var(--ink-2); }
.menu-list.menu-pad { padding: 18px; width: min(23rem, calc(100vw - 2rem)); }
.pagination { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
/* --- Beleg-/Rechnungskopf ------------------------------------------------------- */
.doc-head {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end;
margin: 0 0 26px; padding: 32px 40px 30px; background: var(--a); border-radius: var(--r-xl); view-transition-name: page-head;
}
.doc-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-display-l); line-height: 1; letter-spacing: -.038em; }
.doc-head .meta { color: color-mix(in srgb, var(--ink) 80%, var(--a)); font-size: 16px; margin-top: 10px; }
.doc-head .meta a { color: var(--ink); }
.doc-head .row.end { flex-wrap: nowrap; }
.amount-big { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; text-align: right; line-height: 1; }
.amount-big small { display: block; font-family: var(--font-ui); font-size: 13.5px; font-weight: 650; color: color-mix(in srgb, var(--ink) 75%, var(--a)); letter-spacing: 0; margin-top: 8px; }
.page-head .amount-big { align-self: flex-end; }
/* --- Rechnungseditor ---------------------------------------------------------------- */
.line-items { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: pos; }
.line-item { counter-increment: pos; position: relative; border: 1.5px solid var(--line-2); border-radius: var(--r-m); padding: 16px 16px 16px 54px; margin-bottom: 12px; background: var(--paper);
display: grid; gap: 12px 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.line-item:focus-within { border-color: var(--a-solid); background: color-mix(in srgb, var(--a) 40%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-solid) 25%, transparent); }
.line-item::before { content: counter(pos); position: absolute; left: 14px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--sticker); color: var(--print-ink);
border: 2px solid var(--print-ink); font-family: var(--font-display); font-size: 13px; font-weight: 800; display: grid; place-items: center; transform: rotate(-6deg); box-shadow: 0 2px 0 var(--print-ink); }
.line-item label { font-size: 12px; font-weight: 750; color: var(--ink-2); }
.line-item input, .line-item select, .line-item textarea { height: 40px; padding: 0 11px; border-radius: 11px; font-size: 14.5px; }
.line-item select { padding-right: 32px; background-position: right 8px center; }
.line-item textarea { height: auto; min-height: 40px; padding: 9px 11px; }
.line-item .choice { font-size: 13.5px !important; }
.li-name { grid-column: span 7; } .li-item { grid-column: span 5; } .li-desc { grid-column: 1 / -1; }
.li-qty { grid-column: span 2; } .li-unit { grid-column: span 2; } .li-price { grid-column: span 2; } .li-disc { grid-column: span 2; }
.li-cat { grid-column: span 4; } .li-rate { grid-column: span 2; } .li-reason { grid-column: span 6; }
.li-del { grid-column: span 4; align-self: end; font-size: .86rem; }
.line-errors { grid-column: 1 / -1; }
@media (max-width: 1100px) { .li-name, .li-item, .li-reason, .li-del { grid-column: 1 / -1; } .li-qty, .li-unit, .li-price, .li-disc { grid-column: span 3; } .li-cat, .li-rate { grid-column: span 6; } }
[data-add-row] { border-style: dashed !important; box-shadow: none !important; background: transparent !important; }
[data-add-row]:hover { border-style: solid !important; background: var(--a) !important; }
.totals { margin-left: auto; max-width: 360px; width: 100%; font-variant-numeric: tabular-nums; }
.totals dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 1.5rem; margin: 0; }
.totals dt { color: var(--ink-2); font-weight: 600; }
.totals dd { margin: 0; text-align: right; font-weight: 650; }
.totals .grand { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 20px; letter-spacing: -.02em; padding: 10px 0 0; margin-top: 6px; border-top: 2px solid var(--ink); }
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.editor .live { display: none; }
.editor .live { background: var(--a); border-radius: var(--r-l); padding: 18px 18px 20px;
background-image: radial-gradient(color-mix(in srgb, var(--a-deep) 18%, transparent) 1.3px, transparent 1.6px); background-size: 22px 22px; }
.editor .live .card-head { margin-top: 4px; }
.sticky-actions {
position: sticky; bottom: 14px; z-index: 10; display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 18px; padding: 12px 14px;
background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 2px solid var(--print-ink); border-radius: var(--r-m); box-shadow: 0 5px 0 var(--print-ink), 0 26px 40px -24px rgba(0, 0, 0, .4);
}
.sticky-actions .btn.primary { margin-left: auto; order: 2; }
.sticky-actions .small-note { flex: 1 1 260px; }
:root[data-theme="dark"] .sticky-actions { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 26px 40px -24px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticky-actions { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 26px 40px -24px rgba(0, 0, 0, .7); } }
/* --- Beleg prüfen und hochladen ------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.split .preview { position: sticky; top: calc(var(--topbar-h) + 10px); border-radius: var(--r-l); background: var(--paper-2); padding: 22px;
background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1.2px, transparent 1.5px); background-size: 20px 20px; border: 0; box-shadow: none; }
.split .preview img { max-width: 100%; display: block; margin: 8px auto 4px; border-radius: 4px; background: #fff; transform: rotate(-1.4deg);
box-shadow: 0 18px 22px -8px rgba(40, 25, 5, .3), 0 2px 2px rgba(40, 25, 5, .12); transition: transform .5s var(--ease-pop); }
.split .preview img:hover { transform: rotate(0) scale(1.01); }
.ocr-text { white-space: pre-wrap; font-family: var(--font-mono); font-size: .78rem; max-height: 260px; overflow: auto; background: var(--card); padding: 12px; border-radius: 12px; }
.suggestion { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.suggestion.uncertain { color: var(--butter-deep); font-family: var(--font-hand); font-size: 14px; }
.field.uncertain input, .field.uncertain select { border: 2px dashed color-mix(in srgb, var(--butter-deep) 60%, transparent); background: var(--butter); }
.dropzone { display: grid; place-items: center; text-align: center; gap: 10px; border: 2.5px dashed var(--line-2); border-radius: var(--r-l); padding: 2.5rem 1rem; background: var(--card); cursor: pointer; transition: border-color .2s, background-color .2s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--a-solid); background: color-mix(in srgb, var(--a) 50%, var(--card)); }
.dropzone strong { font-family: var(--font-display); font-size: 20px; }
.dropzone input[type=file] { max-width: 100%; font-size: .88rem; }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pick-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 20px 22px; min-height: 190px; background: var(--card); color: var(--ink);
border: 2px solid var(--print-ink); border-radius: 24px; box-shadow: 0 5px 0 var(--print-ink); cursor: pointer; transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background-color .2s; }
.pick-tile:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 8px 0 var(--print-ink); }
.pick-tile:active { transform: translateY(5px); box-shadow: 0 0 0 var(--print-ink); }
.pick-tile:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.pick-tile strong { font-family: var(--font-display); font-size: 21px; font-weight: 780; letter-spacing: -.02em; }
.pick-tile .muted { font-size: 14px; }
.pick-tile.has-file { background: var(--st-mint); color: var(--print-ink); }
.pick-tile.has-file .muted { color: var(--mint-deep); font-weight: 750; }
.pick-tile input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 12px; transition: transform .35s var(--ease-pop); }
.pick-tile:hover .pick-icon { transform: rotate(-10deg) scale(1.08); }
.pick-icon img { width: 56px; height: 56px; }
.pick-icon .icon { width: 26px; height: 26px; }
.primary-tile { background: var(--a); color: var(--print-ink); }
.primary-tile .muted { color: color-mix(in srgb, var(--print-ink) 72%, transparent); }
:root[data-theme="dark"] .pick-tile { border-color: var(--ink); box-shadow: 0 5px 0 #000; }
:root[data-theme="dark"] .primary-tile { background: var(--st); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pick-tile { border-color: var(--ink); box-shadow: 0 5px 0 #000; } :root:not([data-theme="light"]) .primary-tile { background: var(--st); } }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { counter-increment: s; padding-left: 44px; position: relative; color: var(--ink-2); min-height: 30px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; border-radius: 50%; background: var(--st); color: var(--print-ink);
border: 2px solid var(--print-ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; font-weight: 800; transform: rotate(-6deg); box-shadow: 0 2px 0 var(--print-ink); }
/* --- Verschiedenes --------------------------------------------------------------- */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 14.5px; }
.dl dt { color: var(--ink-2); font-weight: 600; }
.dl dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.stack > * + * { margin-top: 16px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 0; border-bottom: 1.5px dashed var(--line-2); font-size: 14.5px; }
.timeline li:last-child { border-bottom: 0; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px 0; border-bottom: 1.5px dashed var(--line-2); }
.todo li:last-child { border-bottom: 0; }
.todo li > a { font-weight: 700; color: var(--ink); text-decoration: none; }
.todo li > a:hover { text-decoration: underline; text-decoration-color: var(--a-solid); }
.todo .count { min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--st-sky); color: var(--print-ink); border: 1.5px solid var(--print-ink);
font-weight: 800; font-size: 13px; display: inline-grid; place-items: center; transform: rotate(-3deg); }
.todo .quiet { color: var(--ink-2); font-size: 13.5px; }
.todo .count.danger { background: var(--st-coral); }
.todo .count.warn { background: var(--st-butter); }
.todo .count.quiet { background: var(--sticker); border-style: dashed; }
.empty { padding: 28px 0 22px; color: var(--ink-2); text-align: center; }
.empty .empty-art { display: block; width: 128px; height: auto; margin: 0 auto 8px; }
.empty .empty-title { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 780; letter-spacing: -.02em; color: var(--ink); margin: 6px 0 4px; }
.empty p { margin: 0 auto; max-width: 46ch; }
.empty .btn { margin-top: 16px; }
.card.empty { padding: 32px 24px; }
.codes { font-family: var(--font-mono); font-size: 1rem; columns: 2; list-style: none; padding: 16px 20px; background: var(--paper-2); border-radius: var(--r-m); }
.codes li { padding: 4px 0; }
.qr img { width: 216px; height: 216px; background: #fff; padding: 10px; border-radius: 18px; border: 2px solid var(--print-ink); box-shadow: 0 4px 0 var(--print-ink); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 9px 0 9px 36px; position: relative; font-weight: 600; }
.checklist li + li { border-top: 1.5px dashed var(--line); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 24px; height: 24px; border-radius: 50%; border: 2px dashed var(--line-2); background: var(--card); }
.checklist .ok::before, .checklist .bad::before, .checklist .warn::before { border: 2px solid var(--print-ink); box-shadow: 0 2px 0 var(--print-ink); background-position: center; background-size: 14px; background-repeat: no-repeat; }
.checklist .ok::before { background-color: var(--mint-solid); background-image: url("data:image/svg+xml;utf8,"); }
.checklist .bad::before { background-color: var(--coral-solid); background-image: url("data:image/svg+xml;utf8,"); }
.checklist .warn::before { background-color: var(--butter-solid); background-image: url("data:image/svg+xml;utf8,"); }
details.disclosure > summary { cursor: pointer; font-weight: 750; color: var(--a-deep); list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: ""; width: 8px; height: 8px; border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(-45deg); transition: transform .25s var(--ease-pop); }
details.disclosure[open] > summary::before { transform: rotate(45deg); }
.mail-preview { background: var(--paper-2); border-radius: var(--r-s); padding: 14px 16px; white-space: pre-wrap; color: var(--ink); font-size: 14.5px; }
iframe.pdf { width: 100%; height: 72vh; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(31, 26, 20, .08), 0 30px 60px -26px rgba(30, 40, 20, .45); }
.lifecycle { list-style: none; margin: 0; padding: 0; }
.lifecycle li { position: relative; padding: 0 0 18px 40px; font-size: 14.5px; font-weight: 650; min-height: 28px; }
.lifecycle li::before { content: ""; position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--mint-solid) url("data:image/svg+xml;utf8,") center/14px no-repeat;
border: 2px solid var(--print-ink); box-shadow: 0 2px 0 var(--print-ink); z-index: 1; }
.lifecycle li::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 3px; border-radius: 3px; background: var(--mint-solid); }
.lifecycle li:last-child { padding-bottom: 0; }
.lifecycle li:last-child::after { display: none; }
.lifecycle li.pending { color: var(--ink-3); font-weight: 600; }
.lifecycle li.pending::before { background: var(--card); border: 2px dashed var(--line-2); box-shadow: none; }
.lifecycle li.pending::after, .lifecycle li:has(+ .pending)::after { background: none; border-left: 2.5px dashed var(--line-2); width: 0; left: 12px; }
.lifecycle li.bad::before { background: var(--coral-solid) url("data:image/svg+xml;utf8,") center/13px no-repeat; }
.lifecycle .when { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.settings-section { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 16px 34px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); padding: 26px 28px; margin: 0 0 22px; }
.settings-section > header h2 { font-size: 21px; }
.settings-section > header p { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; line-height: 1.45; }
.settings-section > header .doodle { width: 44px; height: 44px; margin-bottom: 12px; }
.settings-section .card, .settings-section fieldset { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
/* --- Anmeldung -------------------------------------------------------------------- */
.auth { position: relative; max-width: 460px; margin: 0 auto; padding: 8vh 1rem 3rem; }
.auth:has(.wide-form) { max-width: 920px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; color: var(--ink); text-decoration: none; }
.auth-brand .brand-word { font-size: 34px; }
.auth-brand img { width: 54px; height: 45px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.auth-hero { position: relative; display: flex; justify-content: center; margin: 6px 0 -34px; z-index: 2; pointer-events: none; }
.auth-hero img { width: 156px; height: auto; }
.auth-hero .bubble { left: calc(50% + 70px); top: 6px; }
.auth-panel { position: relative; background: var(--card); border: 2px solid var(--print-ink); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--print-ink), var(--shadow-pop); padding: 46px 34px 32px; }
:root[data-theme="dark"] .auth-panel { border-color: var(--ink); box-shadow: 0 6px 0 #000, var(--shadow-pop); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-panel { border-color: var(--ink); box-shadow: 0 6px 0 #000, var(--shadow-pop); } }
.auth-panel .card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.auth-panel > .env-chip { margin-bottom: 1rem; }
.auth h1 { font-size: 34px; margin-bottom: 8px; letter-spacing: -.035em; }
.auth h1 + p.muted { margin-bottom: 18px; }
.auth .form-actions .btn.primary { flex: 1 1 100%; height: 52px; font-size: 16px; }
.auth .form-actions > a { font-size: 14px; }
.error-page { max-width: 680px; margin: 6vh auto 0; text-align: center; padding: 34px 32px 36px; }
.error-page .error-art { width: 170px; margin: -90px auto 8px; }
.error-page h1 { font-size: var(--fs-display-m); margin-bottom: 12px; }
.error-page .lede { margin: 0 auto 22px; }
.auth-foot { text-align: center; margin-top: 22px; font-family: var(--font-hand); color: var(--ink-2); font-size: 14.5px; }
/* --- Hilfsklassen (statt Inline-Styles, die die CSP blockiert) ---------------------- */
.mt-025 { margin-top: .25rem; } .mt-05 { margin-top: .5rem; } .mt-075 { margin-top: .75rem; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.mb-05 { margin-bottom: .5rem; } .my-05 { margin-top: .5rem; margin-bottom: .5rem; }
.narrow { max-width: 720px; } .wide-form { max-width: 920px; } .grow { flex: 1; } .w-auto { width: auto; } .pre { white-space: pre-wrap; }
.menu-pad { padding: 18px; min-width: 18rem; } .small-note { font-size: 13.5px; color: var(--ink-2); }
.end { justify-content: flex-end; } .addr { font-style: normal; line-height: 1.6; }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ==========================================================================
Design-System A: neue Bausteine (Groschen, Übersicht, Toasts, Bewegung)
========================================================================== */
/* --- Illustrationen ------------------------------------------------------- */
.illu { display: block; height: auto; user-select: none; -webkit-user-drag: none; }
.doodle { display: inline-block; width: 44px; height: 44px; flex: none; }
.bubble {
position: absolute; z-index: 3; font-family: var(--font-hand); font-weight: 550; font-size: 15.5px; line-height: 1.3; color: var(--print-ink); white-space: nowrap;
background: var(--sticker); border: 2px solid var(--print-ink); border-radius: 18px; padding: 9px 14px; box-shadow: 0 4px 0 rgba(31, 26, 20, .18); transform: rotate(-3deg);
}
.bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--sticker); border: 2px solid var(--print-ink); border-top: 0; border-left: 0; transform: rotate(45deg); bottom: -9px; right: 34px; }
.bubble.tail-left::after { right: auto; left: 30px; }
.tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 14px 10px; border-radius: 18px; background: var(--st-butter); color: var(--print-ink); border: 2px solid var(--print-ink); }
.tip img { width: 56px; height: auto; flex: none; margin: -20px 0 0 -2px; }
.tip p { margin: 0; font-family: var(--font-hand); font-size: 14.5px; line-height: 1.38; }
/* --- Toasts für Django-Messages (mit JS: schwebend; ohne JS: im Fluss) ----------- */
html:not(.no-js) .messages {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column-reverse; gap: 10px;
width: min(560px, calc(100vw - 32px)); margin: 0; pointer-events: none;
}
html:not(.no-js) .messages .alert {
pointer-events: auto; display: flex; align-items: center; gap: 12px; margin: 0; min-height: 0; padding: 10px 10px 10px 10px; border: 0; border-radius: 18px;
background: var(--print-ink); color: #FFFDF7; font-weight: 700; font-size: 14.5px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5);
animation: toastIn .5s var(--ease-pop) both;
}
html:not(.no-js) .messages .alert::before { display: none; }
html:not(.no-js) .messages .alert.is-leaving { animation: toastOut .35s var(--ease-out) forwards; }
html:not(.no-js) .messages .toast-face { display: block; width: 42px; height: auto; flex: none; }
html:not(.no-js) .messages .toast-text { flex: 1; min-width: 0; }
html:not(.no-js) .messages .toast-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; border: 0; background: rgba(255, 255, 255, .1); color: #FFFDF7; cursor: pointer; font-size: 18px; line-height: 1; }
html:not(.no-js) .messages .toast-close:hover { background: rgba(255, 255, 255, .2); }
html:not(.no-js) .messages .alert.error { box-shadow: inset 6px 0 0 var(--coral-solid), 0 20px 40px -14px rgba(0, 0, 0, .5); }
html:not(.no-js) .messages .alert.warning { box-shadow: inset 6px 0 0 var(--butter-solid), 0 20px 40px -14px rgba(0, 0, 0, .5); }
html:not(.no-js) .messages .alert.success { box-shadow: inset 6px 0 0 var(--mint-solid), 0 20px 40px -14px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .messages .alert { box-shadow: 0 0 0 1.5px rgba(255, 253, 247, .25), 0 20px 40px -14px rgba(0, 0, 0, .7); }
@keyframes toastIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(20px) scale(.96); } }
/* --- Übersicht (Dashboard) ---------------------------------------------------- */
.home-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 318px; margin: 0 0 26px; padding: 40px 28px 40px 48px;
background: var(--a); border-radius: var(--r-xl); view-transition-name: page-head; }
.home-hero .overline { margin-bottom: 12px; }
.home-hero h1 { font-size: var(--fs-display-xl); line-height: .92; letter-spacing: -.045em; margin-top: 2px; overflow-wrap: anywhere; }
.home-hero .lede { margin-top: 18px; color: color-mix(in srgb, var(--ink) 80%, var(--a)); }
.home-hero .quick { margin: 28px 0 0; }
.home-art { position: relative; }
.home-art .illu { position: absolute; width: 280px; right: -18px; bottom: -70px; z-index: 2; }
.home-art .bubble { top: 0; right: 140px; }
.hint-line { display: flex; gap: 8px; align-items: center; font-family: var(--font-hand); font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }
.hint-line img { width: 30px; height: auto; }
/* Startklar-Pfad */
.setup { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 26px 22px 28px; }
.setup h2 { font-size: 24px; }
.setup p { margin: 4px 0 10px; font-size: 14px; color: var(--ink-2); }
.seg-progress { display: flex; gap: 5px; }
.seg-progress i { height: 8px; flex: 1; border-radius: 6px; background: var(--paper-3); border: 1.5px solid transparent; }
.seg-progress i.on { background: var(--mint-solid); border-color: var(--print-ink); }
.trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.trail::before { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; border-top: 2.5px dashed var(--line-2); }
.trail::after { content: ""; position: absolute; left: 10%; top: 20px; height: 3.5px; width: 0; border-radius: 3px; background: var(--mint-solid); }
.trail.done-1::after { width: 20%; } .trail.done-2::after { width: 40%; } .trail.done-3::after { width: 60%; } .trail.done-4::after, .trail.done-5::after { width: 80%; }
.trail li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.trail li a { display: contents; color: inherit; text-decoration: none; }
.trail .node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px dashed var(--line-2); color: var(--ink-3); transition: transform .25s var(--ease-pop); }
.trail li:hover .node { transform: scale(1.08) rotate(-6deg); }
.trail li.done .node { background: var(--mint-solid); border: 2px solid var(--print-ink); color: var(--print-ink); box-shadow: 0 3px 0 var(--print-ink); }
.trail li.now .node { position: relative; background: var(--st-coral); border: 2px solid var(--print-ink); color: var(--print-ink); box-shadow: 0 3px 0 var(--print-ink); width: 50px; height: 50px; margin: -3px 0; }
.trail li.now .node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2.5px solid var(--coral-solid); animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.trail .t { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.trail li.done .t { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--mint-solid); text-decoration-thickness: 2.5px; }
.trail li.now .t { font-weight: 800; }
.trail .s { font-size: 12px; color: var(--ink-3); margin-top: -4px; }
.trail li.now .s { color: var(--coral-deep); font-weight: 700; }
.home-grid-a { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.home-grid-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-bottom: 22px; align-items: start; }
.home-grid-a > *, .home-grid-b > * { margin: 0; }
/* Gewinnkurve */
.profit { padding-bottom: 18px; }
.profit-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 8px; }
.profit .money { font-size: clamp(44px, 5.4vw, 66px); }
.profit-top .meta { padding-bottom: 6px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profit-top .meta span { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.chart-wrap { position: relative; margin-top: 16px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: color-mix(in srgb, var(--ink) 15%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .lbl { font-size: 12px; font-weight: 700; fill: var(--ink-2); font-family: var(--font-ui); }
.chart .lbl.tick { font-size: 11px; opacity: .8; }
.chart .lbl.now { fill: var(--ink); font-weight: 850; }
.chart .area { fill: var(--a-solid); opacity: .5; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-prev { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .8; }
.chart .zero { stroke: var(--ink-2); stroke-width: 1.2; opacity: .5; }
.chart .now-line { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.chart .dot { fill: var(--sticker); stroke: var(--print-ink); stroke-width: 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .tip-box { fill: var(--sticker); stroke: var(--print-ink); stroke-width: 1.5; }
.chart .tip-k { font-size: 11.5px; font-weight: 700; fill: var(--print-ink); font-family: var(--font-ui); }
.chart .tip-v { font-size: 15px; font-weight: 800; fill: var(--print-ink); font-family: var(--font-display); letter-spacing: -.01em; }
.chart .tip { transition: transform .15s var(--ease-out); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 650; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 20px; height: 0; border-top: 3.5px solid var(--ink); vertical-align: middle; margin-right: 7px; border-radius: 2px; }
.legend i.prev { border-top: 2.5px dashed var(--ink-2); }
/* Rücklage */
.reserve { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 6px 10px; overflow: visible; }
.reserve h2 { font-size: clamp(25px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.03em; margin-top: 8px; font-weight: 800; }
.reserve .hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--a-solid) 55%, transparent) 58%, color-mix(in srgb, var(--a-solid) 55%, transparent) 92%, transparent 92%); padding: 0 2px; }
.reserve p { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.reserve p b { color: var(--ink); }
.reserve-art { position: relative; grid-row: 1 / span 2; grid-column: 2; align-self: end; min-height: 200px; }
.reserve-art .jar { position: absolute; right: -6px; bottom: 0; width: 126px; }
.reserve-art .face { position: absolute; width: 92px; left: -38px; bottom: -14px; z-index: 2; }
.reserve .actions { grid-column: 1 / span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.rs-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.rs-list li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.rs-list b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 750; }
.rs-list .rs-sum { border-top: 2px dashed color-mix(in srgb, var(--a-deep) 35%, transparent); padding-top: 8px; margin-top: 2px; color: var(--ink); font-weight: 750; }
/* Fristen mit Kalenderblatt */
.deadlines .dl-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; }
.deadlines .dl-row + .dl-row { border-top: 1.5px dashed var(--line-2); }
.cal { position: relative; grid-row: span 2; width: 62px; height: 68px; border-radius: 13px; background: var(--sticker); border: 2px solid var(--print-ink); box-shadow: 0 3px 0 var(--print-ink);
display: flex; flex-direction: column; overflow: visible; color: var(--print-ink); transform: rotate(-2deg); transition: transform .25s var(--ease-pop); }
.dl-row:hover .cal { transform: rotate(2deg) scale(1.05); }
.cal-m { height: 24px; padding-top: 2px; background: var(--st); border-bottom: 2px solid var(--print-ink); border-radius: 11px 11px 0 0; font-size: 11px; font-weight: 850; letter-spacing: .1em; display: grid; place-items: center; text-transform: uppercase; }
.cal-d { flex: 1; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: -.04em; line-height: 1; }
.cal::before, .cal::after { content: ""; position: absolute; top: -5px; width: 6px; height: 10px; border-radius: 3px; background: var(--print-ink); }
.cal::before { left: 15px; } .cal::after { right: 15px; }
.dl-row .what b { display: block; font-size: 15.5px; font-weight: 760; line-height: 1.25; }
.dl-row .what span { font-size: 13px; color: var(--ink-2); }
.dl-row .amt { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.dl-row .amt .amount { font-family: var(--font-display); font-weight: 750; font-size: 19px; }
.dl-row .amt small { font-size: 12px; font-weight: 750; padding: 2px 8px; border-radius: 999px; background: var(--st-lav); color: var(--print-ink); }
/* Forderungen */
.recv .money { display: block; font-size: clamp(38px, 4vw, 50px); margin: 10px 0 8px; }
.recv .late-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.stackbar { display: flex; height: 16px; border-radius: 999px; border: 2px solid var(--print-ink); overflow: hidden; margin: 18px 0 14px; background: var(--sticker); }
.stackbar i { display: block; height: 100%; }
.stackbar i + i { border-left: 2px solid var(--print-ink); }
.stackbar .ok { background: var(--mint-solid); } .stackbar .late { background: var(--coral-solid); }
.stackbar .w-0 { display: none; }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; }
.w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.person { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: inherit; text-decoration: none; }
.person + .person { border-top: 1.5px dashed color-mix(in srgb, var(--print-ink) 18%, transparent); }
.person .avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 12.5px; }
.person:nth-child(3n+1) .avatar { background: var(--st-lav); } .person:nth-child(3n+2) .avatar { background: var(--st-sand); } .person:nth-child(3n) .avatar { background: var(--st-sky); }
.person .n { flex: 1; min-width: 0; }
.person .n b { display: block; font-size: 14.5px; font-weight: 740; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .n span { font-size: 12.5px; color: var(--ink-2); }
.person .n span.late { color: var(--coral-deep); font-weight: 750; }
.person .amount { font-family: var(--font-display); font-weight: 750; font-size: 15.5px; }
:root[data-theme="dark"] .person + .person { border-top-color: var(--line-2); }
/* Zuletzt */
.recent .rrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; margin: 0 -10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .2s; }
.recent .rrow:hover { background: var(--paper); }
.recent .rrow:hover .badge { transform: rotate(0) scale(1.06); }
.recent .rrow .avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 12.5px; }
.recent .rrow:nth-child(4n+1) .avatar { background: var(--st-butter); } .recent .rrow:nth-child(4n+2) .avatar { background: var(--st-sand); }
.recent .rrow:nth-child(4n+3) .avatar { background: var(--st-sky); } .recent .rrow:nth-child(4n) .avatar { background: var(--st-mint); }
.recent .rrow b { display: block; font-size: 14.5px; font-weight: 720; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent .rrow .sub { font-size: 12.5px; color: var(--ink-2); }
.recent .rrow .r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.recent .rrow .amount { font-family: var(--font-display); font-weight: 750; font-size: 15px; }
/* --- Bewegung: Seitenwechsel (View Transitions), Einblenden ------------------- */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .18s var(--ease-out) both; }
::view-transition-new(root) { animation: vtIn .32s var(--ease-out) both; }
::view-transition-group(page-head) { animation-duration: .38s; animation-timing-function: var(--ease-out); }
.content > * { animation: rise .5s var(--ease-out) both; }
.content > *:nth-child(2) { animation-delay: .04s; } .content > *:nth-child(3) { animation-delay: .08s; }
.content > *:nth-child(4) { animation-delay: .12s; } .content > *:nth-child(5) { animation-delay: .16s; }
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* --- Breite Bildschirme ------------------------------------------------------ */
@media (min-width: 1360px) {
.editor.with-preview { grid-template-columns: minmax(0, 1fr) 520px; }
.editor .live { display: block; position: sticky; top: calc(var(--topbar-h) + 8px); align-self: start; }
.editor .live iframe { height: calc(100vh - 9rem); }
}
/* --- Tablet ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
.home-hero { grid-template-columns: minmax(0, 1fr) 200px; padding-left: 36px; }
.home-art .illu { width: 210px; bottom: -54px; right: -10px; }
.home-art .bubble { right: 90px; top: -6px; }
.setup { grid-template-columns: minmax(0, 1fr) auto; }
.setup .trail { grid-column: 1 / -1; grid-row: 2; }
.home-grid-a { grid-template-columns: minmax(0, 1fr); }
}
/* --- Tablet und Smartphone ------------------------------------------------------ */
@media (max-width: 900px) {
:root { --topbar-h: 60px; }
.app { grid-template-columns: 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px); height: 100%; transform: translateX(-104%); transition: transform .3s var(--ease-out);
box-shadow: var(--shadow-pop); padding-bottom: calc(16px + env(safe-area-inset-bottom)); view-transition-name: none; }
.sidebar.open { transform: none; }
.sidebar.open + .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 8, 6, .45); }
.sidebar .sidebar-close { display: inline-grid; }
.no-js .sidebar { position: static; transform: none; width: auto; height: auto; box-shadow: none; }
.topbar { flex-wrap: wrap; padding: 8px 14px; min-height: var(--topbar-h); gap: 8px; }
.topbar-tenant { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--ink); text-decoration: none; }
.topbar-tenant strong { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-tenant img { width: 38px; height: 32px; }
.topbar.has-title .topbar-tenant strong { display: none; }
.topbar-title { position: absolute; left: 64px; right: 120px; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--font-display); font-weight: 780; font-size: 17px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; pointer-events: none; display: block; }
.topbar.has-title .topbar-title { opacity: 1; }
.topbar .env { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.topbar .env::-webkit-scrollbar { display: none; }
.env-chip { white-space: nowrap; flex: none; }
.topbar-new { display: block; }
.topbar-new > summary.btn { width: 42px; height: 42px; padding: 0; border-radius: 13px; }
.topbar-new > summary.btn span { display: none; }
.quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 18px; padding: 0 16px 10px; }
.quick::-webkit-scrollbar { display: none; }
.quick .btn { flex: none; }
.topbar-actions { margin-left: 0; }
.account-menu { display: none; }
.content { padding: 4px 16px calc(var(--tabbar-h) + 2rem + env(safe-area-inset-bottom)); }
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
padding: 10px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent);
-webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-top: 1.5px solid var(--line); view-transition-name: tabbar; }
.tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 2px 0; border: 0; background: none; color: var(--ink-3);
font: inherit; font-size: 11px; font-weight: 720; cursor: pointer; text-decoration: none; }
.tabbar a:hover { color: var(--ink); }
.tabbar .icon { width: 24px; height: 24px; }
.tabbar [aria-current="page"] { color: var(--ink); }
.tabbar [aria-current="page"] .icon { color: var(--a-deep); }
.tabbar .tabbar-main { color: var(--ink); }
.tabbar .tabbar-main .icon { box-sizing: content-box; width: 26px; height: 26px; padding: 15px; margin-top: -30px; border-radius: 22px; background: var(--st-coral); color: var(--print-ink);
border: 2px solid var(--print-ink); box-shadow: 0 5px 0 var(--print-ink); transform: rotate(-4deg); transition: transform .2s var(--ease-pop); }
.tabbar .tabbar-main:active .icon { transform: rotate(-4deg) translateY(4px); box-shadow: 0 1px 0 var(--print-ink); }
.sticky-actions { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
html:not(.no-js) .messages { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } /* Hinweise über der Tab-Leiste */
.grid-2, .grid-3, .grid-4, .split-main, .split { grid-template-columns: minmax(0, 1fr); }
.split .preview { position: static; }
.split .preview img { max-height: 46vh; width: auto; }
.settings-section { grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Große Titel wie auf dem iPhone: Farbfeld bis an den Rand */
.page-head, .doc-head, .home-hero { margin: -4px -16px 24px; border-radius: 0 0 34px 34px; padding: 22px 22px 26px; min-height: 0; }
.page-head h1, .doc-head h1 { font-size: clamp(32px, 9vw, 44px); }
.page-head:has(> .page-art) { padding-right: 132px; margin-bottom: 34px; }
.page-head .page-art { width: 118px; right: 10px; bottom: -24px; }
.page-head .sub, .page-head p.muted, .page-head .lede { font-size: 15.5px; }
.doc-head { grid-template-columns: 1fr; }
.doc-head .amount-big { text-align: left; }
.home-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
.home-hero h1 { font-size: clamp(38px, 11vw, 52px); padding-right: 110px; }
.home-hero .lede { font-size: 15.5px; }
.home-art { position: absolute; right: 0; top: 0; width: 140px; height: 160px; }
.home-art .illu { width: 128px; right: 8px; bottom: auto; top: 30px; }
.home-art .bubble { display: none; }
.home-hero .quick { margin: 20px -22px 0; padding: 0 22px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; }
.qtile { width: auto; min-height: 0; padding: 10px; border-radius: 18px; box-shadow: 0 4px 0 var(--print-ink); }
.qtile .doodle { width: 34px; height: 34px; margin: 0 0 6px; }
.qtile-t { font-size: 14.5px; }
.qtile-s, .qtile kbd { display: none; }
.setup { grid-template-columns: 1fr; padding: 20px; }
.setup .trail { grid-row: auto; }
.setup .btn { justify-self: start; }
.trail .t { font-size: 12px; } .trail .s { display: none; }
.profit .money { font-size: 46px; }
}
@media (max-width: 760px) {
.doc-head .row.end { justify-content: flex-start; flex-wrap: wrap; }
.stats .stat { padding: 0 16px; }
}
@media (max-width: 700px) {
.form-grid { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listbar { flex-direction: column; align-items: stretch; }
.listbar .searchrow { flex-wrap: wrap; }
.tabs { display: flex; }
.search-field { width: auto; flex: 1 1 auto; }
.card, .section, .panel, fieldset, .settings-section { padding: 18px; border-radius: var(--r-m); }
.card .table-wrap, .section .table-wrap, .panel .table-wrap, .settings-section .table-wrap { margin: 0 -12px; }
.card > .table-wrap:last-child, .section > .table-wrap:last-child { margin-bottom: -8px; }
.card > table, .section > table { margin: 0 -10px; width: calc(100% + 20px); }
th:first-child, td:first-child { padding-left: 12px; }
th:last-child, td:last-child { padding-right: 12px; }
.line-item { padding-left: 14px; padding-top: 52px; }
.line-item::before { top: 14px; left: 14px; }
.li-qty, .li-unit, .li-price, .li-disc, .li-cat, .li-rate { grid-column: span 6; }
.toolbar .field { min-width: 0; flex: 1 1 45%; }
details.filters > summary { display: inline-flex; list-style: none; cursor: pointer; font-weight: 750; color: var(--a-deep); margin-bottom: .75rem; }
details.filters:not([open]) > .toolbar { display: none; }
.pick { grid-template-columns: 1fr; }
.pick-tile { min-height: 0; }
.figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.figure { padding: 14px 16px; }
.page-head .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-head .figure { padding: 10px 14px; border-left: 0; }
.page-head .figure:nth-child(even) { border-left: 2px dashed color-mix(in srgb, var(--print-ink) 20%, transparent); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
.choice-cards { grid-template-columns: 1fr; }
.btn { height: 46px; }
.table-wrap { padding: 4px 4px 6px; }
/* Listen als zweizeilige Zellen: Titel links, Betrag und Status rechts */
table.list thead { display: none; }
table.list, table.list tbody, table.list tfoot { display: block; }
table.list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "t s"; align-items: center; gap: 6px 12px; padding: 13px 12px; border-bottom: 1.5px dashed var(--line); border-radius: 16px; }
table.list tbody tr:last-child { border-bottom: 0; }
table.list td { display: none; padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
table.list td[data-m] { display: block; }
table.list td[data-m="t"] { grid-area: t; min-width: 0; }
table.list td[data-m="a"] { grid-area: a; text-align: right; }
table.list td[data-m="s"] { grid-area: s; text-align: right; }
table.list td.table-empty { display: block; grid-column: 1 / -1; padding: 1.5rem 0 !important; }
table.list tr.is-overdue { background: color-mix(in srgb, var(--coral) 60%, transparent); box-shadow: inset 5px 0 0 var(--coral-solid); }
table.list .m-only { display: inline; }
/* Übrige Tabellen: Beschriftung und Wert je Zeile */
table.responsive thead { display: none; }
table.responsive, table.responsive tbody, table.responsive tfoot { display: block; }
table.responsive tr { display: block; border-bottom: 1.5px dashed var(--line); padding: 10px 12px; }
table.responsive tbody tr:last-child { border-bottom: 0; }
table.responsive td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 3px 0 !important; text-align: right; background: none !important; border-radius: 0 !important; }
table.responsive td { flex-wrap: wrap; overflow-wrap: anywhere; }
table.responsive td > * { min-width: 0; }
table.responsive td::before { content: attr(data-label); color: var(--ink-2); font-size: 13px; font-weight: 650; text-align: left; flex: none; max-width: 45%; }
table.responsive td:first-child { font-weight: 700; }
table.responsive td.actions { justify-content: flex-end; }
table.responsive td.actions::before { content: none; }
tbody tr:hover td { background: none; }
tr.is-overdue td:first-child { box-shadow: none; }
}
@media (max-width: 420px) {
.page-head, .doc-head, .home-hero { padding-left: 18px; padding-right: 18px; }
.page-head:has(> .page-art) { padding-right: 110px; }
.page-head .page-art { width: 100px; }
.page-head .actions { width: 100%; }
.home-hero .quick { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
.stat .money { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ==========================================================================
Feature-Pakete (Welle 1) – eigene Abschnitte, nutzen die Design-Tokens/Aliase
========================================================================== */
/* --- Einnahmen ohne Rechnung --- */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1180px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; min-height: 9.5rem; padding: 1rem 1.05rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; }
.cat-card:hover { border-color: var(--rule-strong); background: var(--hover); }
.cat-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cat-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cat-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; background: var(--accent-tint); color: var(--accent); }
.cat-card .cat-icon { margin-bottom: .35rem; }
.cat-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.cat-text { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.kz-chip { display: inline-flex; align-items: center; margin-top: auto; padding: .05rem .5rem; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.cat-summary { display: flex; align-items: center; gap: .85rem; }
.cat-summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.cat-summary-text .muted { font-size: .86rem; }
.cat-summary-text .kz-chip { margin-top: .2rem; }
.inc-line .il-desc { grid-column: span 12; }
.inc-line .il-amount { grid-column: span 4; }
.inc-line .il-mode { grid-column: span 3; }
.inc-line .il-tax { grid-column: span 5; }
.inc-line .il-reason, .inc-line .il-basis { grid-column: span 6; }
.inc-line .il-flat { grid-column: span 6; align-self: end; font-size: .86rem; }
.inc-line .il-del { grid-column: 1 / -1; font-size: .86rem; }
.inc-line .help { font-size: .76rem; color: var(--muted); }
.inc-form .is-hidden { display: none; }
.receipt-box { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.receipt-box img { width: 96px; max-height: 128px; object-fit: contain; border-radius: 6px; border: 1px solid var(--rule); background: #fff; flex: none; }
.receipt-preview { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; border-radius: 6px; border: 1px solid var(--rule); background: #fff; }
@media (max-width: 700px) {
.cat-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.cat-card { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .15rem; padding: .85rem; }
.cat-card .cat-icon { grid-row: span 3; margin: 0; }
.cat-card .kz-chip { justify-self: start; margin-top: .2rem; }
.cat-summary { align-items: flex-start; }
.inc-line .il-amount, .inc-line .il-mode { grid-column: span 6; }
.inc-line .il-tax, .inc-line .il-reason, .inc-line .il-basis, .inc-line .il-flat { grid-column: 1 / -1; }
}
/* --- Exporte (DATEV, Excel, PDF) --- */
.segmented:has(> .segment) { margin: 0 0 1rem; } /* Optik des Containers: Design A (.segmented oben) */
.segment { position: relative; cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segment span { display: block; padding: .32rem .8rem; border-radius: 7px; color: var(--muted); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.segment:hover span { color: var(--text); }
.segment input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.period-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1rem; }
.period-fields [hidden] { display: none; }
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: 1rem; }
.preset-row .small-note { margin-right: .15rem; }
.preset-row [hidden] { display: none; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 .75rem; border-radius: 999px; background: var(--sunken); color: var(--text); font-size: .8rem; font-weight: 500; }
.chip:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
.option-list { display: grid; gap: .6rem; }
.option-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.option-card:has(input[name="inhalt"]:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px var(--accent-tint); }
.option-main { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1rem; cursor: pointer; }
.option-main input { margin: 0; }
.option-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); color: var(--text); }
.option-card:has(input[name="inhalt"]:checked) .option-icon { background: var(--accent); color: var(--on-accent); }
.option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.option-text strong { font-size: .95rem; }
.option-text small { color: var(--muted); font-size: .84rem; }
.option-format { font-size: .7rem; font-weight: 650; letter-spacing: .05em; color: var(--muted); background: var(--sunken); border-radius: 6px; padding: .15rem .45rem; }
.option-extra { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding: .65rem 1rem .8rem 4.95rem; border-top: 1px dashed var(--rule); font-size: .86rem; }
.export-summary { position: sticky; top: 76px; }
.summary-period { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .85rem; }
.summary-period strong { font-size: 1.15rem; letter-spacing: -.01em; }
.summary-list { margin-bottom: .9rem; font-size: .9rem; }
.summary-list dd { text-align: right; }
.summary-hints { margin: 0 0 1rem; font-size: .86rem; }
.export-submit { width: 100%; height: 40px; margin: .25rem 0 .5rem; }
.run-progress { display: flex; flex-direction: column; gap: .3rem; min-width: 150px; }
.run-progress progress { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.run-progress progress::-webkit-progress-bar { background: var(--sunken); border-radius: 999px; }
.run-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.run-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.run-progress small { font-size: .76rem; }
.run-notes { margin-top: .35rem; font-size: .84rem; }
.run-notes summary { font-size: .82rem; font-weight: 500; }
.account-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 900px) { .export-summary { position: static; } }
@media (max-width: 700px) {
.option-main { grid-template-columns: auto auto minmax(0, 1fr); gap: .7rem; padding: .8rem; }
.option-format { display: none; }
.option-extra { padding-left: .8rem; }
.run-progress { min-width: 0; align-items: flex-end; }
.account-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .option-card, .run-progress progress::-webkit-progress-value { transition: none; } }
/* --- Steuern-Kern --- */
.tax-state { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; margin: 0 0 1rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.tax-state .icon { width: 22px; height: 22px; color: var(--ok); }
.tax-state.warn .icon { color: var(--warn); }
.tax-state.danger .icon { color: var(--danger); }
.tax-state > div { flex: 1; min-width: 0; }
.tax-state strong { display: block; font-size: .95rem; }
.tax-state span { color: var(--muted); font-size: .86rem; }
.tax-state .btn { margin-left: auto; }
.ob-list { list-style: none; margin: 0 -1.25rem -1.1rem; padding: 0; }
.ob { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto auto auto; gap: .35rem 1rem; align-items: center; padding: .8rem 1.25rem; border-top: 1px solid var(--rule); }
.ob:hover { background: var(--hover); }
.ob-date { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 10px; background: var(--sunken); color: var(--text); line-height: 1.1; text-align: center; }
.ob-date b { font-size: 1.05rem; font-weight: 700; }
.ob-date small { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ob.danger .ob-date { background: var(--danger-tint); color: var(--danger); }
.ob.warn .ob-date { background: var(--warn-tint); color: var(--warn); }
.ob.ok .ob-date { background: var(--ok-tint); color: var(--ok); }
.ob-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ob-main > a { color: var(--text); font-weight: 600; }
.ob-main small { font-size: .8rem; }
.ob-amount { text-align: right; font-weight: 650; white-space: nowrap; }
.ob-amount small { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); }
.ob-amount.refund { color: var(--ok); }
.ob-action .btn { min-width: 7.5rem; }
.meter { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; margin: .5rem 0 .35rem; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter.warn > span { background: var(--warn); }
.meter.danger > span { background: var(--danger); }
.meter .w-0 { width: 0; } .meter .w-10 { width: 10%; } .meter .w-20 { width: 20%; } .meter .w-30 { width: 30%; } .meter .w-40 { width: 40%; } .meter .w-50 { width: 50%; }
.meter .w-60 { width: 60%; } .meter .w-70 { width: 70%; } .meter .w-80 { width: 80%; } .meter .w-90 { width: 90%; } .meter .w-100 { width: 100%; }
.breakdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.25rem; margin: .5rem 0 0; font-size: .9rem; }
.breakdown dt { color: var(--muted); }
.breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.breakdown .sum { font-weight: 650; color: var(--text); border-top: 1px solid var(--rule-strong); padding-top: .4rem; }
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; counter-reset: st; }
.stepper li { counter-increment: st; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; font-weight: 500; }
.stepper li::before { content: counter(st); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--muted); font-size: .78rem; font-weight: 650; }
.stepper li.done::before { content: "✓"; background: var(--ok-tint); color: var(--ok); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 650; }
.stepper li[aria-current="step"]::before { background: var(--accent); color: var(--on-accent); }
.stepper a { color: inherit; }
.choice-cards .radio-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.choice-cards .radio-list label { padding: .7rem .85rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.choice-cards .radio-list label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
.kz-list { list-style: none; margin: 0 -1.25rem; padding: 0; }
.kz-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 8.5rem 8.5rem; gap: .25rem 1rem; align-items: start; padding: .75rem 1.25rem; border-top: 1px solid var(--rule); }
.kz-row.head { padding-top: .5rem; padding-bottom: .5rem; font-size: .76rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--sunken) 55%, var(--surface)); }
.kz-row.total { font-weight: 650; background: color-mix(in srgb, var(--sunken) 40%, var(--surface)); }
.kz-no { font-family: var(--mono); font-size: .85rem; font-weight: 650; color: var(--accent); padding-top: .1rem; }
.kz-label small { display: block; color: var(--muted); font-size: .78rem; }
.kz-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kz-val small { display: block; font-size: .74rem; color: var(--muted); }
.kz-val small.m-only { display: none; }
.kz-docs { grid-column: 2 / -1; font-size: .86rem; }
.kz-docs summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .82rem; }
.kz-docs ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.kz-docs li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--rule); }
.kz-docs li:last-child { border-bottom: 0; }
.copy-btn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; padding: .1rem .3rem; margin: -.1rem -.3rem; cursor: pointer; }
.copy-btn:hover { border-color: var(--rule-strong); background: var(--surface); }
.copy-btn .icon { width: 14px; height: 14px; color: var(--faint); }
.copy-btn.copied .icon { color: var(--ok); }
html:not(.can-copy) .copy-btn .icon, html:not(.can-copy) [data-copy-all] { display: none; }
html:not(.can-copy) .copy-btn { cursor: text; }
.selectable { user-select: all; -webkit-user-select: all; }
.status-steps { list-style: none; margin: 0 0 .75rem; padding: 0; }
.status-steps li { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; color: var(--muted); font-size: .9rem; }
.status-steps li::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule-strong); flex: none; }
.status-steps li.done { color: var(--text); }
.status-steps li.done::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.status-steps li.now { color: var(--text); font-weight: 600; }
.status-steps li.now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.status-form + .status-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.period-nav { display: inline-flex; gap: .35rem; align-items: center; }
.period-nav .btn { width: 34px; padding: 0; }
@media (max-width: 900px) {
.ob { grid-template-columns: 3.1rem minmax(0, 1fr) auto; }
.ob-status { grid-column: 2; }
.ob-action { grid-column: 3; grid-row: 2; }
}
@media (max-width: 700px) {
.ob-list, .kz-list { margin-left: -1rem; margin-right: -1rem; }
.ob, .kz-row { padding-left: 1rem; padding-right: 1rem; }
.ob { grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; }
.ob-date { grid-row: span 4; width: 2.9rem; height: 2.9rem; }
.ob-amount, .ob-status, .ob-action { grid-column: 2; grid-row: auto; text-align: left; }
.ob-amount small { display: inline; margin-left: .35rem; }
.ob-amount.empty { display: none; }
.ob-action .btn { width: 100%; }
.kz-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.kz-row .kz-val.base:empty { display: none; }
.kz-row .kz-val.tax { grid-column: 3; }
.kz-row .kz-val small.m-only { display: block; }
.kz-row.head { display: none; }
.kz-docs { grid-column: 1 / -1; }
.tax-state { flex-wrap: wrap; align-items: flex-start; }
.tax-state form { flex-basis: 100%; }
.tax-state .btn { margin-left: 0; }
}
/* --- Einkommensteuer --- */
.tax-flow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.tax-steps { position: sticky; top: 76px; }
.tax-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tax-steps a { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: var(--radius); color: var(--muted); font-size: .88rem; font-weight: 500; }
.tax-steps a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.tax-steps .dot { width: 1.45rem; height: 1.45rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--sunken); color: var(--muted); font-size: .72rem; font-weight: 650; }
.tax-steps .dot .icon { width: 13px; height: 13px; }
.tax-steps .is-done .dot { background: var(--ok-tint); color: var(--ok); }
.tax-steps .is-current a { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.tax-steps .is-current .dot { background: var(--accent); color: var(--on-accent); }
.tax-step-title { font-size: 1.15rem; margin: 0 0 1rem; }
.tax-group-title { margin: 1.25rem 0 .5rem; font-size: .95rem; }
.tax-main fieldset fieldset, .tax-main fieldset.plain { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 1rem; }
.tax-main fieldset.plain > .tax-persons > fieldset { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); padding: 1.1rem 1.25rem 1.25rem; }
.tax-persons.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tax-persons.two .form-grid { grid-template-columns: minmax(0, 1fr); }
.tax-persons > fieldset { margin: 0; }
.tax-rows { list-style: none; margin: 0 0 .75rem; padding: 0; }
.tax-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .8rem; padding: .85rem .9rem; margin-bottom: .6rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.tax-row .wide { grid-column: span 2; }
.tax-row .wide-all { grid-column: 1 / -1; }
.tax-row .errors { color: var(--danger); font-size: .84rem; }
.tax-panel { position: sticky; top: 76px; }
.tax-estimate { transition: opacity .15s ease-out; }
.tax-panel.is-loading .tax-estimate { opacity: .6; }
.tax-panel.is-stale .tax-estimate-amount { color: var(--faint); }
.tax-estimate-label { margin: 0; font-size: .86rem; font-weight: 600; color: var(--muted); }
.tax-estimate-amount { margin: .2rem 0 0; font-size: 1.9rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.tax-estimate-amount.danger { color: var(--danger); }
.tax-estimate-amount.ok { color: var(--ok); }
.tax-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; margin: .9rem 0 0; font-size: .86rem; }
.tax-lines dt { color: var(--muted); }
.tax-lines dd { margin: 0; text-align: right; white-space: nowrap; }
.tax-lines .sum { color: var(--text); font-weight: 650; border-top: 1px solid var(--rule); padding-top: .4rem; }
.tax-calc tr.sum td { font-weight: 650; background: color-mix(in srgb, var(--sunken) 45%, var(--surface)); }
.tax-figures { margin-bottom: .9rem; }
.tax-figures .note a { font-weight: 500; }
.tax-reserve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.tax-reserve dt { font-size: .82rem; color: var(--muted); font-weight: 500; }
.tax-reserve dd { margin: .3rem 0 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }
.tax-reserve .note { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tax-elster td small:not(.m-only) { display: block; }
.tax-elster td .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sticky-actions .grow { flex: 1; }
@media (max-width: 1180px) {
.tax-flow { grid-template-columns: minmax(0, 1fr) 280px; }
.tax-steps { grid-column: 1 / -1; position: static; min-width: 0; }
.tax-steps ol { position: relative; } /* hält absolut gesetzte .sr-only-Texte in der scrollbaren Leiste */
.tax-steps ol { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tax-steps ol::-webkit-scrollbar { display: none; }
.tax-steps a { white-space: nowrap; }
}
@media (max-width: 900px) {
.tax-flow { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.tax-steps { order: -2; }
.tax-panel { position: static; order: -1; }
.tax-panel .tax-lines, .tax-panel .small-note { display: none; }
.tax-panel .tax-estimate { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; margin: 0; }
.tax-estimate-amount { font-size: 1.35rem; margin: 0; }
.tax-persons.two, .tax-reserve { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.tax-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tax-row .wide { grid-column: 1 / -1; }
}
html:not(.no-js) .tax-row.is-extra { display: none; }
@media (prefers-reduced-motion: reduce) { .tax-estimate { transition: none; } }
/* --- ELSTER-Übermittlung ------------------------------------------------------- */
.kz-cell { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.kz-cell .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.kz-cell .t small { font-size: .78rem; }
.kz { flex: none; min-width: 2.7rem; padding: .1rem .4rem; border-radius: 6px; background: var(--sunken); color: var(--text); font-size: .78rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.kz-table tr.kz-total td { background: var(--accent-tint); font-weight: 650; }
.kz-table tr.kz-total .kz { background: var(--accent); color: var(--on-accent); }
.elster-copy[hidden] { display: none; }
.elster-copy.copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.path { display: flex; flex-wrap: wrap; gap: .2rem 0; color: var(--text); font-size: .88rem; margin-bottom: .2rem; }
.path > span + span::before { content: "›"; margin: 0 .4rem; color: var(--faint); }
.elster-forms .who-cell .t > a { white-space: normal; }
.kz-entry input { text-align: right; max-width: 12rem; margin-left: auto; height: 34px; }
.kz-entry td.num { width: 13rem; }
.kz-entry th small { display: block; font-weight: 500; color: var(--faint); }
@media (max-width: 700px) {
.kz-table td[data-m="s"] { justify-self: end; }
.kz-table .elster-copy span { display: none; }
.kz-entry td.num { width: auto; }
.kz-entry input { width: 10rem; flex: none; }
table.responsive.kz-entry td.kz-label { display: block; text-align: left; padding-bottom: .35rem !important; }
table.responsive.kz-entry td.kz-label::before { content: none; }
table.responsive.kz-entry td:empty { display: none; }
}
/* --- Rechnungsdesign --- */
/* Gestaltung im Editor, Vorlagen, Logo, Textbausteine, Textblöcke. Vorbilder (Mobbin): Xero „Branding theme“
(Einstellungen links, Vorschau rechts), PandaDoc „Design“-Leiste, Mercury Farbpunkte. */
@font-face { font-family: "KontorInter"; src: url("../fonts/Inter-Regular.4145168e5230.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "KontorSourceSans"; src: url("../fonts/SourceSans3-Regular.c056d313af09.ttf") format("truetype"); font-display: swap; }
html.no-js .js-only { display: none !important; }
html:not(.no-js) [data-noscript-only] { display: none !important; }
.editor-tabs a { display: inline-flex; align-items: center; gap: .4rem; }
.editor-tabs .icon { width: 16px; height: 16px; }
.editor-main { min-width: 0; }
.editor[data-tab="gestaltung"] .live { display: block; }
.style-panel > .section, .editor-panel > .section { margin-bottom: 1rem; }
.style-group > h2 { margin-bottom: .8rem; }
.preset-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.style-state { margin-top: .8rem; }
.style-state [hidden] { display: none; }
.style-state p { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .55rem; color: var(--muted); font-size: .88rem; }
.new-preset input { max-width: 18rem; height: 32px; }
.layout-card input, .font-card input, .swatch input, .seg input, .switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.layout-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.layout-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: .7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.layout-card:hover, .font-card:hover { border-color: var(--faint); }
.layout-card:has(input:checked), .font-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.layout-card:has(input:focus-visible), .font-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.layout-text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.layout-text strong { font-size: .9rem; font-weight: 600; }
.layout-text small { font-size: .78rem; }
.layout-thumb { position: relative; display: block; height: 84px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; overflow: hidden; }
.layout-thumb i { position: absolute; display: block; border-radius: 2px; background: #d9d9de; }
.thumb-einfach .t1 { left: 9%; top: 10%; width: 20%; height: 9%; background: #a1a1aa; }
.thumb-einfach .t2 { left: 9%; top: 28%; width: 34%; height: 18%; }
.thumb-einfach .t3 { left: 9%; top: 56%; width: 82%; height: 5%; background: #3f3f46; }
.thumb-einfach .t4 { left: 9%; top: 66%; width: 82%; height: 22%; background: #ececf0; }
.thumb-din .t1 { right: 9%; top: 8%; width: 18%; height: 10%; background: #a1a1aa; }
.thumb-din .t2 { left: 9%; top: 26%; width: 38%; height: 22%; background: none; border: 1px dashed #a1a1aa; }
.thumb-din .t3 { right: 9%; top: 30%; width: 30%; height: 18%; }
.thumb-din .t4 { left: 0; top: 52%; width: 5%; height: 1.5px; background: #71717a; border-radius: 0; }
.thumb-abgerundet .t1 { left: 9%; top: 10%; width: 20%; height: 9%; background: #a1a1aa; }
.thumb-abgerundet .t2 { right: 9%; top: 26%; width: 36%; height: 22%; border-radius: 5px; background: var(--accent-tint); }
.thumb-abgerundet .t3 { left: 9%; top: 56%; width: 82%; height: 9%; border-radius: 5px; background: var(--accent-tint); }
.thumb-abgerundet .t4 { right: 9%; top: 74%; width: 34%; height: 12%; border-radius: 5px; background: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.swatch { position: relative; display: inline-flex; cursor: pointer; }
.swatch-dot { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-strong); }
.swatch-dot svg { display: block; width: 100%; height: 100%; }
.swatch input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch input:focus-visible + .swatch-dot { outline: 2px solid var(--focus); outline-offset: 4px; }
.swatch-dot.is-custom { position: relative; }
.swatch-dot.is-custom::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid #fff; }
.swatch-dot.is-empty { box-shadow: inset 0 0 0 1.5px var(--faint); }
.swatch-dot.is-empty svg { visibility: hidden; }
.swatch-dot.is-empty::after { display: none; }
.color-pick { display: inline-flex; align-items: center; gap: .45rem; margin-left: .25rem; color: var(--muted); font-size: .86rem; font-weight: 500; cursor: pointer; }
.color-pick input[type=color] { width: 40px; height: 30px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.font-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.font-card { position: relative; display: flex; align-items: center; gap: .8rem; padding: .65rem .85rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.font-sample { width: 2.4rem; font-size: 1.65rem; line-height: 1; color: var(--text); }
.font-name { font-size: .9rem; font-weight: 500; }
.sample-inter { font-family: "KontorInter", var(--font); }
.sample-source-sans { font-family: "KontorSourceSans", var(--font); }
.seg-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .4rem 0; }
.seg-row .label { color: var(--muted); font-size: .88rem; font-weight: 500; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: 10px; max-width: 100%; overflow-x: auto; }
.seg label { position: relative; margin: 0; cursor: pointer; }
.seg label span { display: block; padding: .3rem .85rem; border-radius: 7px; color: var(--muted); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.toggles li { display: flex; flex-direction: column; gap: .2rem; }
.toggles small { padding-left: 3.05rem; color: var(--muted); font-size: .8rem; }
.switch { position: relative; display: inline-flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 500; cursor: pointer; }
.switch .track { position: relative; flex: none; width: 2.35rem; height: 1.35rem; border-radius: 999px; background: var(--rule-strong); transition: background .15s ease-out; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.35rem - 4px); height: calc(1.35rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease-out; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(1rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.logo-preview { flex: none; display: grid; place-items: center; width: 9.5rem; height: 4.75rem; padding: .45rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: #fff; }
.logo-preview img { max-width: 100%; max-height: 100%; }
.logo-preview span { font-size: .82rem; color: #65656f; }
.logo-actions { flex: 1 1 14rem; min-width: 0; }
.terms { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.terms-custom { min-width: 10rem; }
.block-items { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .6rem; }
.block-item { display: grid; gap: .55rem; padding: .75rem .9rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.block-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.block-head .field { min-width: 10rem; }
.block-head .block-order { min-width: 6rem; max-width: 8rem; }
.block-item .field label { font-size: .76rem; font-weight: 500; color: var(--muted); }
.block-item select, .block-item input[type=number] { height: 34px; }
.block-tools { display: flex; gap: .2rem; margin-left: auto; }
.block-item[data-kind="divider"] .block-text-field { display: none; }
.snippet-pick { width: auto; max-width: 100%; height: 32px; margin-top: .4rem; color: var(--muted); font-size: .84rem; }
.stack > .snippet-pick { margin-top: .4rem; }
.style-avatar { overflow: hidden; background: none; box-shadow: 0 0 0 1px var(--rule-strong); }
.style-avatar svg { display: block; width: 100%; height: 100%; }
.snippet-text { max-width: 32rem; color: var(--muted); white-space: normal; }
@media (max-width: 1100px) { .layout-cards { grid-template-columns: minmax(0, 1fr); } .layout-card { flex-direction: row; align-items: center; } .layout-thumb { flex: none; width: 92px; height: 64px; } }
@media (max-width: 700px) { .font-cards { grid-template-columns: minmax(0, 1fr); } .snippet-text { display: none; } }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; } }
/* --- Fahrzeuge & Fahrtenbuch --- */
.trip-form { display: grid; gap: 1rem; }
.trip-form input[type=text], .trip-form input[type=number], .trip-form input[type=date], .trip-form select { height: 46px; font-size: 1rem; }
.trip-form input.big { height: 56px; font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }
.trip-form .sticky-actions { margin-top: .25rem; }
.trip-form details.disclosure > summary { font-size: .92rem; }
.trip-km { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.trip-distance { margin: -.35rem 0 0; font-weight: 600; color: var(--accent); }
fieldset.seg-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0; background: var(--sunken); border: 0; border-radius: 12px; box-shadow: none; }
.seg { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .5rem; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: .9rem; text-align: center; line-height: 1.2; }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.timeline li.superseded .old { text-decoration: line-through; color: var(--muted); }
table.trips .avatar.small { font-size: .62rem; }
a.pick-tile { color: var(--text); }
a.pick-tile:hover { text-decoration: none; border-color: var(--accent); }
@media (max-width: 700px) {
.trip-form .sticky-actions .btn { flex: 1 1 auto; height: 46px; }
.seg span { font-size: .84rem; }
}
/* --- Belegimport per E-Mail & lernende Kategorien --- */
.no-js .mi-js-only { display: none; }
@media (hover: none), (max-width: 900px) { .mi-desktop-only { display: none; } } /* Ziehen & Tastenkürzel: nicht in der Handy-Ansicht */
.mi-count { margin-left: .15rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--warn-tint); color: var(--warn); font-size: .76rem; display: inline-grid; place-items: center; }
.mi-banner { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.mi-banner > div { flex: 1 1 22rem; min-width: 0; }
.mi-banner form { margin: 0; }
.mi-rule strong { display: flex; align-items: center; gap: .4rem; }
.mi-rule strong .icon { width: 16px; height: 16px; color: var(--accent); }
.suggestion.rule { display: inline-block; margin-top: .25rem; color: var(--accent); }
.suggestion.rule::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: currentColor; vertical-align: .05rem; }
.mi-reviewbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.mi-reviewbar .crumbs { margin-bottom: 0; }
.mi-queue { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 0; }
.mi-queue .small-note { margin-right: .35rem; }
.state-line .muted .icon { width: 15px; height: 15px; margin-right: .3rem; }
.mi-keys { margin-left: auto; font-size: .84rem; }
.mi-keys > summary { font-weight: 500; color: var(--muted); }
.mi-keys .dl { font-size: .84rem; gap: .3rem 1rem; }
.mi-keys kbd { font-family: var(--mono); font-size: .76rem; padding: .05rem .38rem; border-radius: 5px; background: var(--sunken); border: 1px solid var(--rule-strong); box-shadow: inset 0 -1px 0 var(--rule-strong); color: var(--text); }
table.list tbody tr.is-active td { background: var(--accent-tint); }
table.list tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.mi-drop-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.mi-drop-overlay[hidden] { display: none; }
.mi-drop-inner { display: grid; justify-items: center; gap: .5rem; text-align: center; width: min(32rem, 100%); padding: 3rem 1.5rem; border: 2px dashed var(--accent); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-pop); }
.mi-drop-inner .icon { width: 40px; height: 40px; color: var(--accent); }
.mi-drop-inner strong { font-size: 1.15rem; }
.mi-drop-inner span { color: var(--muted); font-size: .9rem; }
.mi-upload .checklist li { font-size: .9rem; word-break: break-word; }
.mi-badges { gap: .4rem; }
.mi-notes { margin: .35rem 0 0 2.6rem; font-size: .84rem; }
.mi-notes .checklist li { padding-top: .15rem; padding-bottom: .15rem; }
.mi-notes .checklist li::before { top: .6rem; }
.mi-search { margin: 0; }
.card-head h2 .muted { font-weight: 500; }
form[data-bulk] .who-cell input[type=checkbox] { width: 1.1rem; height: 1.1rem; flex: none; }
form[data-bulk] .sticky-actions .choice { font-size: .86rem !important; }
@media (max-width: 700px) {
.mi-keys { display: none; }
.mi-queue .small-note { display: none; }
.mi-notes { margin-left: 0; }
.card-head:has(.mi-search) { flex-wrap: wrap; }
.mi-search, .mi-search .search-field { width: 100%; }
}
/* --- Dokumentenablage --- */
.vault-drop-form { margin: 0 0 1rem; }
.vault-drop { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-lg); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.vault-drop:hover, .vault-drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
.vault-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.vault-drop.is-busy { opacity: .7; pointer-events: none; }
.vault-drop .pick-icon { margin: 0; flex: none; }
.vault-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vault-drop-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vault-drop-text strong { font-size: .98rem; }
.vault-drop-text > span { font-size: .84rem; color: var(--muted); }
.vault-drop-options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .6rem; font-size: .86rem; }
.vault-drop-options label { color: var(--muted); font-weight: 500; }
.vault-drop-options select { width: auto; min-width: 12rem; height: 32px; font-size: .86rem; }
html:not(.no-js) .vault-drop-options .vault-submit { display: none; }
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunken); border-radius: 10px; }
.view-toggle a { display: inline-grid; place-items: center; width: 30px; height: 28px; border-radius: 7px; color: var(--muted); }
.view-toggle a:hover { color: var(--text); text-decoration: none; }
.view-toggle a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.view-toggle .icon { width: 16px; height: 16px; }
.vault-hint { margin: -.25rem 0 1rem; }
.vault-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: .9rem; }
.vault-card { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.vault-card:hover { border-color: var(--rule-strong); box-shadow: 0 6px 18px rgba(17, 17, 26, .08); }
.vault-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.vault-card > a:hover { text-decoration: none; }
.vault-card > a:focus-visible { outline-offset: -2px; border-radius: var(--radius-lg); }
.vault-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sunken); border-bottom: 1px solid var(--rule); overflow: hidden; }
.vault-thumb.has-img { place-items: start center; padding: .9rem .9rem 0; }
.vault-thumb img { display: block; width: 84%; height: auto; background: #fff; border-radius: 3px 3px 0 0; box-shadow: 0 1px 4px rgba(17, 17, 26, .18); }
.vault-type { display: inline-grid; place-items: center; min-width: 3.2rem; padding: .4rem .6rem; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.t-pdf { color: var(--danger); }
.t-doc, .t-docx, .t-odt { color: var(--accent); }
.t-xls, .t-xlsx, .t-ods, .t-csv { color: var(--ok); }
.vault-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .7rem .85rem .8rem; }
.vault-body strong { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-body > small { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-body > small.vault-snippet { white-space: normal; }
.vault-snippet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: var(--muted); }
.vault-snippet mark { background: var(--warn-tint); color: var(--text); border-radius: 3px; padding: 0 .1em; }
.vault-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.vault-flags .badge { font-size: .72rem; }
.badge.lock { background: var(--sunken); color: var(--muted); gap: .3rem; }
.badge.lock::before { display: none; }
.badge.lock .icon { width: 12px; height: 12px; vertical-align: 0; }
.tag-chip { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.55; }
.avatar.vault-avatar { border-radius: 8px; font-size: .58rem; letter-spacing: 0; }
.vault-pages { display: grid; gap: .9rem; }
.vault-page { margin: 0; }
.vault-page img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.vault-page figcaption { margin-top: .35rem; text-align: center; font-size: .78rem; color: var(--muted); }
.vault-noprev { display: grid; justify-items: center; gap: .75rem; padding: 3rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.vault-noprev .vault-type { min-width: 4.5rem; padding: .9rem 1rem; font-size: 1.05rem; }
.vault-noprev > span:not(.vault-type) { max-width: 34ch; }
.ocr-text.vault-textprev { max-height: 70vh; }
.split .preview.vault-preview { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.retention-box { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 10px; background: var(--sunken); font-size: .9rem; }
.retention-box > .icon { margin-top: .1rem; color: var(--muted); }
.retention-box strong { display: block; }
.retention-box.locked { background: var(--accent-tint); }
.retention-box.locked > .icon { color: var(--accent); }
.retention-box.expired { background: var(--warn-tint); }
.retention-box.expired > .icon { color: var(--warn); }
.vault-links li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.vault-linkforms { display: grid; gap: .75rem; margin-top: .75rem; }
.vault-linkform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.vault-linkform .field { min-width: 0; }
.vault-linkform .field.grow { flex: 1 1 14rem; }
.vault-linkform.vault-taxform { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 9.5rem auto; }
.vault-panel-item { display: flex; gap: .65rem; align-items: center; }
@media (max-width: 900px) { .split .preview.vault-preview { max-height: none; overflow: visible; } }
@media (max-width: 700px) {
.vault-drop { padding: .9rem 1rem; gap: .75rem; }
.vault-drop-text > span { display: none; }
.vault-drag-only { display: none; }
.vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.vault-body { padding: .6rem .7rem .7rem; }
.listbar .vault-searchrow { flex-wrap: wrap; }
.vault-links li { align-items: flex-start; }
.vault-linkform.vault-taxform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vault-linkform.vault-taxform .field.grow { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .vault-drop, .vault-card { transition: none; } }
/* --- KI-Assistent --- */
html:not(.no-js) .nojs-only { display: none; }
.assistant-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.assistant-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: .85rem; }
.assistant-new { width: 100%; }
.side-title { margin: 1.1rem .25rem .4rem; font-size: .76rem; font-weight: 600; color: var(--faint); }
.chat-list, .reminder-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.chat-list a { display: flex; flex-direction: column; gap: .05rem; min-width: 0; padding: .45rem .55rem; border-radius: var(--radius); color: var(--text); line-height: 1.3; }
.chat-list a:hover { background: var(--hover); text-decoration: none; }
.chat-list a[aria-current="page"] { background: var(--accent-tint); }
.chat-list .t { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list small { font-size: .76rem; }
.reminder-list li { padding: .55rem; border-radius: var(--radius); background: var(--sunken); margin-bottom: .35rem; font-size: .86rem; }
.reminder-text { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.reminder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; margin-top: .35rem; font-size: .82rem; }
.reminder-actions .btn.link { font-size: .82rem; font-weight: 500; }
.btn.link.danger { color: var(--danger); }
.assistant-main { min-width: 0; }
.assistant-welcome { max-width: 720px; margin: 0 auto; padding: 2.5rem 0 1rem; text-align: center; }
.assistant-welcome h2 { font-size: 1.45rem; font-weight: 650; letter-spacing: -.015em; margin: .75rem 0 .4rem; }
.assistant-welcome > p.muted { max-width: 56ch; margin: 0 auto 1.25rem; }
.assistant-mark { width: 48px; height: 48px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.assistant-mark .icon { width: 24px; height: 24px; }
.assistant-setup { text-align: left; }
.starters { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; text-align: left; }
.starter { display: flex; flex-direction: column; gap: .15rem; width: 100%; height: 100%; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.starter:hover { border-color: var(--rule-strong); background: var(--hover); }
.starter strong { font-size: .8rem; font-weight: 600; color: var(--accent); }
.starter span { font-size: .88rem; line-height: 1.4; }
.composer { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: var(--shadow-sm); padding: .55rem .6rem .5rem; text-align: left; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.composer textarea { border: 0; box-shadow: none; min-height: 52px; max-height: 40vh; padding: .35rem .4rem; resize: none; background: transparent; }
.composer textarea:focus { box-shadow: none; }
.composer-bar { display: flex; align-items: center; gap: .5rem; }
.composer-attach { position: relative; cursor: pointer; }
.composer-attach input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.composer-attach:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.composer-file { font-size: .82rem; color: var(--ok); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-hint { flex: 1; font-size: .78rem; color: var(--faint); min-width: 0; }
.composer-file:not(:empty) + .composer-hint { display: none; }
.composer-bar .btn { margin-left: auto; }
.composer-wait { margin: 0 0 .5rem; padding: .7rem .9rem; border-radius: var(--radius-lg); background: var(--sunken); color: var(--muted); font-size: .9rem; }
.chat-disclaimer { margin: .55rem 0 0; font-size: .76rem; color: var(--faint); text-align: center; }
.chat { max-width: 780px; margin: 0 auto; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: 0 0 1rem; }
.chat-head h1 { font-size: 1.3rem; overflow-wrap: anywhere; }
.chat-head .small-note { margin: .2rem 0 0; }
.chat-log { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1rem; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.msg.user .bubble { max-width: 85%; padding: .6rem .9rem; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--on-accent); overflow-wrap: anywhere; }
.msg.bot { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .65rem; align-items: start; }
.bot-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.bot-mark .icon { width: 17px; height: 17px; }
.bot-body { min-width: 0; display: flex; flex-direction: column; gap: .6rem; padding-top: .2rem; }
.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 .7rem; }
.md ul, .md ol { padding-left: 1.25rem; }
.md li + li { margin-top: .2rem; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-size: 1rem; font-weight: 650; margin: 1rem 0 .4rem; }
.md blockquote { border-left: 3px solid var(--rule-strong); padding-left: .8rem; color: var(--muted); }
.md pre { background: var(--sunken); border-radius: var(--radius); padding: .7rem .8rem; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { display: block; overflow-x: auto; width: auto; font-size: .88rem; }
.md th, .md td { padding: .4rem .6rem; border-bottom: 1px solid var(--rule); }
.md th:first-child, .md td:first-child { padding-left: .6rem; }
.md hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }
.thinking { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--muted); font-size: .92rem; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: assistant-dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes assistant-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.chat-status { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: var(--radius-lg); background: var(--accent-tint); font-size: .9rem; }
.chat-foot { position: sticky; bottom: 0; z-index: 5; padding: .75rem 0 .5rem; background: linear-gradient(to bottom, transparent, var(--bg) 1.25rem); }
.chat-error { margin-bottom: .5rem; }
.consent-card, .action-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .65rem; }
.consent-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); box-shadow: 0 0 0 3px var(--accent-tint); }
.msg.user .attach-card { width: min(100%, 520px); text-align: left; }
.consent-head { display: flex; gap: .7rem; align-items: flex-start; }
.consent-head > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.consent-head > div > span { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.consent-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.consent-icon .icon { width: 16px; height: 16px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.data-details > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); }
.data-preview { margin: .5rem 0 0; max-height: 280px; overflow: auto; padding: .65rem .75rem; border-radius: var(--radius); background: var(--sunken); font-family: var(--mono); font-size: .76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.attach-preview { display: block; max-width: 100%; max-height: 260px; border-radius: var(--radius); border: 1px solid var(--rule); background: #fff; }
.attach-chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 85%; padding: .35rem .7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); font-size: .82rem; }
.attach-chip .icon { width: 15px; height: 15px; color: var(--muted); }
.attach-chip .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-chip small { color: var(--muted); white-space: nowrap; }
.tool-line { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.tool-icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--sunken); }
.tool-icon .icon { width: 13px; height: 13px; }
.tool-text { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.tool-text .data-details { flex-basis: 100%; }
.dl.compact { gap: .3rem 1rem; font-size: .88rem; }
.consent-list { list-style: none; margin: 0 0 .5rem; padding: 0; }
.consent-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.consent-list li:last-child { border-bottom: 0; }
.consent-label { display: flex; flex-direction: column; min-width: 12rem; flex: 1; }
.consent-label small { font-size: .8rem; }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: .3rem .7rem; border-radius: 7px; font-size: .82rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--rule); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 900px) {
.assistant-layout { grid-template-columns: minmax(0, 1fr); }
.assistant-side { position: static; max-height: none; order: 2; }
.assistant-side.has-current { display: none; }
.chat-foot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
.starters { grid-template-columns: minmax(0, 1fr); }
.assistant-welcome { padding-top: 1rem; }
.msg.user .bubble, .attach-chip { max-width: 92%; }
.composer-hint { display: none; }
.segmented { width: 100%; }
.seg { flex: 1; }
.seg span { text-align: center; padding: .35rem .3rem; }
}
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .7; } }
/* --- Steuerberater-Zugang & Passkeys --- */
.acc-list { list-style: none; margin: 0; padding: 0; }
.acc-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .85rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.acc-list > li:first-child { padding-top: 0; }
.acc-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.acc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--sunken); color: var(--muted); display: grid; place-items: center; }
.acc-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.acc-text strong { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.acc-text small { font-size: .82rem; }
.acc-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.acc-actions .menu-list { width: min(18rem, calc(100vw - 2rem)); }
.or-divider { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--faint); font-size: .8rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.passkey-btn { width: 100%; height: 40px; }
.passkey-status { margin: .6rem 0 0; font-size: .84rem; color: var(--muted); }
.passkey-status:empty { display: none; }
.passkey-status.is-error { color: var(--danger); }
.copy-field { display: flex; gap: .5rem; }
.copy-field input { font-family: var(--mono); font-size: .82rem; }
.env-chip.advisor-chip { background: var(--accent-tint); color: var(--accent); }
.invite-steps fieldset { margin: 0; box-shadow: none; }
.invite-steps .qr img { width: 176px; height: 176px; }
details.disclosure-section > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
details.disclosure-section > summary::-webkit-details-marker { display: none; }
details.disclosure-section > summary .n { color: var(--faint); font-weight: 500; }
details.disclosure-section[open] > summary { margin-bottom: .85rem; }
/* Steuerberatung: Schreibaktionen ausblenden (serverseitig ohnehin gesperrt) */
.role-advisor form[method="post" i]:not([data-advisor-ok]):not([action*="/konto/"]):not([action*="export"]) :is(button, input[type="submit"], input[type="file"], .sticky-actions),
.role-advisor a.btn:is([href*="/neu/"], [href*="/bearbeiten/"], [href*="/hochladen/"], [href*="/kopieren/"], [href*="/manuell/"], [href*="/produktiv/"], [href*="/versand/rechnung/"], [href*="/mahnwesen/rechnung/"]):not([href*="/konto/"]),
.role-advisor [data-advisor-hide] { display: none !important; }
.role-advisor form.advisor-locked :is(input, select, textarea):disabled { background: var(--sunken); color: var(--text); opacity: 1; cursor: default; }
@media (max-width: 700px) {
.acc-list > li { grid-template-columns: auto minmax(0, 1fr); }
.acc-actions { grid-column: 2; justify-content: flex-start; }
.copy-field { flex-direction: column; }
}
/* --- iPhone-App (mobile) --- */
/* Geräte koppeln: QR-Code links, Schritte und Code rechts (mobil untereinander) */
.pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2rem; align-items: center; }
.pair-qr img { width: 232px; height: 232px; }
.pair-body { display: grid; gap: 1rem; min-width: 0; }
.pair-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; align-items: baseline; margin: 0; }
.pair-facts > div { display: contents; }
.pair-facts dt { color: var(--muted); font-size: .84rem; }
.pair-facts dd { margin: 0; min-width: 0; }
.pair-code { font-family: var(--mono); font-size: 1.6rem; font-weight: 650; letter-spacing: .14em; color: var(--text); }
.pair-wait { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--muted); font-size: .88rem; }
.pair-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pair-pulse 1.4s ease-in-out infinite; }
@keyframes pair-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pair-dot { animation: none; } }
@media (max-width: 700px) {
.pair { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pair-body { justify-self: stretch; }
.pair-qr img { width: 200px; height: 200px; }
}
/* Seite „Mehr“ (Tab der iPhone-App): Bereiche als gruppierte Liste */
.more-menu { display: grid; gap: 1.25rem; max-width: 640px; }
.more-menu .nav { margin: 0; gap: 1.25rem; }
.more-menu .nav-group { gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.more-menu .nav-bottom { margin-top: 0; }
.more-menu .nav-title { padding: .75rem 1rem .4rem; }
.more-menu .nav a, .more-menu .nav button { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 48px; padding: .7rem 1rem; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; }
.more-menu .nav a:hover, .more-menu .nav button:hover { background: var(--hover); text-decoration: none; }
.more-menu .nav a[aria-current="page"] { background: none; box-shadow: none; font-weight: 500; }
.more-menu .nav .icon, .more-menu .nav a .icon { width: 20px; height: 20px; color: var(--accent); }
.more-menu .nav a::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-top: 1.8px solid var(--faint); border-right: 1.8px solid var(--faint); transform: rotate(45deg); }
.more-menu .more-note { margin-left: auto; color: var(--muted); font-size: .84rem; text-align: right; }
.more-menu .nav a:has(.more-note)::after { margin-left: .6rem; }
.more-menu .nav form { margin: 0; }
html:not(.iosapp) .iosapp-only { display: none; }
/* App-Modus: Die native Hülle setzt class="iosapp" auf sowie --app-inset-top und
--app-inset-bottom (Statusleiste bzw. native Tab-Leiste). Die eigene Tab-Leiste und die
Seitenleiste entfallen, weil die App eine native Tab-Leiste und den Tab „Mehr“ hat. */
html.iosapp .tabbar, html.iosapp .sidebar, html.iosapp .scrim, html.iosapp .skip-link { display: none; }
html.iosapp .app { grid-template-columns: minmax(0, 1fr); }
html.iosapp body { -webkit-tap-highlight-color: transparent; }
html.iosapp .topbar { padding-top: calc(.55rem + var(--app-inset-top, env(safe-area-inset-top))); }
html.iosapp .content { padding-bottom: calc(2rem + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
html.iosapp .sticky-actions { bottom: calc(.5rem + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
html.iosapp .auth { padding-top: calc(2rem + var(--app-inset-top, env(safe-area-inset-top))); padding-bottom: calc(2rem + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
/* Kompakte Kopfzeile: Logo und Hell/Dunkel übernimmt die App (Symbol, Systemdarstellung); Suche, Glocke
und „Neu“ bleiben. Von den Umgebungs-Chips bleibt nur der erste als kleiner Hinweis links. */
html.iosapp .topbar { min-height: 0; padding-bottom: 6px; flex-wrap: nowrap; gap: 6px; }
html.iosapp .topbar-tenant, html.iosapp .topbar .theme-toggle { display: none; }
html.iosapp .topbar .env { order: 0; flex: 1 1 auto; width: auto; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
html.iosapp .topbar .env-chip { height: 24px; padding: 0 9px; font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 21px; }
html.iosapp .topbar .env-chip ~ .env-chip { display: none; }
html.iosapp .topbar .env-chip::before { display: inline-block; margin-right: 6px; vertical-align: 0; }
html.iosapp .topbar .env-chip a { text-decoration: none; }
html.iosapp .topbar-actions { margin-left: auto; }
html.iosapp .topbar-title { left: 16px; right: 150px; top: auto; bottom: 6px; transform: none; line-height: 42px; text-align: left; }
html.iosapp .topbar.has-title .env { visibility: hidden; }
/* Nichts hinter der nativen Tab-Leiste: Toasts und Rückgängig-Leiste darüber */
html.iosapp:not(.no-js) .messages { bottom: calc(12px + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
/* --- Design A: Segment-Reiter der Pakete (Exporte, KI-Assistent) ------------------
Die Optik liefert .segmented label aus dem Design-System; die Spans tragen nur Text. */
.segmented > :is(.segment, .seg) > input ~ span { padding: 0; border-radius: 0; background: none; box-shadow: none; outline: none; font-size: inherit; font-weight: inherit; color: inherit; }
.segmented > :is(.segment, .seg) { justify-content: center; }
/* --- Stammdaten (Firmenprofil, Kunden, Lieferanten, Katalog, Datenübernahme, Fragebogen) --- */
.catalog-group-title { font-size: var(--fs-h3); margin: 6px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.catalog-group-title .muted { font-size: 14px; font-weight: 600; }
.vat-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 14.5px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini th, table.mini td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px dashed var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.mini th { color: var(--ink-2); font-weight: 650; }
.contact-actions { margin-top: 6px; gap: 6px; }
.akte .tabs { flex-wrap: wrap; }
.akte .table-wrap { box-shadow: none; border: 0; padding: 0; margin-bottom: 0; }
.import-sheet table.mapping select { width: 100%; max-width: 28rem; }
.lede-small { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.path { display: flex; flex-wrap: wrap; gap: 4px 6px; font-weight: 650; font-size: 14.5px; }
.path span { background: var(--paper-2); border-radius: var(--r-s); padding: 3px 8px; }
.fill-table th { width: 40%; font-weight: 650; color: var(--ink-2); text-align: left; }
.fill-table td { overflow-wrap: anywhere; }
.li-item .save-item { margin-top: 6px; }
.save-item-status { display: block; margin-top: 4px; }
tr.is-reversal td { color: var(--ink-2); }
@media (max-width: 700px) {
.fill-table th { width: auto; }
.import-sheet table.mapping select { max-width: 100%; }
.contact-actions { flex-wrap: wrap; }
}
/* --- Rechnungen (Steuerfall, Serien, Projekte, Import, Sammel-Download) --- */
.row.between { justify-content: space-between; align-items: flex-start; }
.taxcase-card h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: var(--fs-h2); }
.taxcase-card .alert { margin-top: 10px; }
.vat-check .badge { margin: 4px 6px 0 0; }
.listbar .bulkbar { margin-left: auto; }
table.list th.sel, table.list td.sel { width: 36px; padding-right: 0; }
table.list td.sel input { width: 18px; height: 18px; accent-color: var(--a-solid); }
tbody tr.is-cancelled td { color: var(--ink-3); }
tbody tr.is-cancelled [data-m="a"] { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.inline-reverse { display: inline-flex; gap: 6px; margin-left: 8px; }
.inline-reverse input { max-width: 150px; }
.import-group + .import-group { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--line-2); }
.import-preview { display: block; width: 100%; height: auto; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.ocr-text { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--ink-2); }
.dropzone-field input[type="file"] { width: 100%; padding: 22px 14px; border: 2px dashed var(--line-2); border-radius: var(--r-m); background: var(--card); }
@media (max-width: 700px) {
table.list th.sel, table.list td.sel, .listbar .bulkbar, table.list .badge.unsent { display: none; }
.inline-reverse { display: flex; margin: 6px 0 0; }
.inline-reverse input { max-width: none; flex: 1; }
}
/* --- Rechnungs-Editor --- */
/* Rechnung und Angebot direkt auf dem A4-Blatt bearbeiten (templates/invoicing/partials/ed_*.html,
static/js/editor.js). Das Blatt übernimmt Layout, Schrift, Größe, Dichte, Tabellenrahmen und Akzentfarbe
der Vorlage wie pdf/document.html; Maße in em, damit es mit der Breite mitskaliert (1 mm ≈ 0,3 em).
Vorbilder (Mobbin): HoneyBook Invoice-Editor https://mobbin.com/screens/666df4b6-5da3-4d08-ae9b-e1c9daad0f14,
Square „New invoice“ https://mobbin.com/screens/c70df137-fb09-4dda-8c8b-9da3cba51deb,
Shopify „Create order“ (mobil) https://mobbin.com/screens/529e6922-7507-444d-a06a-c32e1a6b375e. */
@font-face { font-family: "KontorSourceSans"; src: url("../fonts/SourceSans3-Semibold.6af56149587c.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "KontorSourceSans"; src: url("../fonts/SourceSans3-Bold.a7e469a26b59.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "KontorInter"; src: url("../fonts/Inter-SemiBold.a757947dee36.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "KontorInter"; src: url("../fonts/Inter-Bold.c7b5fabc34e7.ttf") format("truetype"); font-weight: 700; font-display: swap; }
.content:has(> .ed) { max-width: 1640px; }
.ed { position: relative; }
/* Kopfleiste: Zurück, Titel mit Speicherstand, Ansicht, Aktionen */
.ed-bar { position: sticky; top: var(--topbar-h); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 16px; padding: 12px 14px 12px 10px;
background: var(--a); border-radius: var(--r-l); box-shadow: 0 14px 30px -26px rgba(50, 30, 5, .5); }
.ed-back { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 6px; border-radius: 12px; color: var(--ink-2); font-weight: 720; font-size: 14px; text-decoration: none; }
.ed-back:hover { background: color-mix(in srgb, var(--card) 60%, transparent); color: var(--ink); }
.ed-back .icon { width: 18px; height: 18px; }
.ed-title { flex: 1 1 280px; min-width: 0; }
.ed-title .overline { margin: 0 0 2px; }
.ed-title h1 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.ed-for { font-family: var(--font-ui); font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.ed-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.ed-save { display: inline-flex; align-items: center; gap: 7px; }
.ed-save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-solid) 25%, transparent); flex: none; }
.ed-save:is([data-state="dirty"], [data-state="saving"], [data-state="waiting"])::before { background: var(--butter-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--butter-solid) 25%, transparent); }
.ed-save[data-state="saving"]::before { animation: pair-pulse 1s ease-in-out infinite; }
.ed-save:is([data-state="invalid"], [data-state="conflict"], [data-state="error"], [data-state="offline"]) { color: var(--coral-deep); }
.ed-save:is([data-state="invalid"], [data-state="conflict"], [data-state="error"], [data-state="offline"])::before { background: var(--coral-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral-solid) 25%, transparent); }
.ed-save a { font-weight: 800; color: inherit; }
.ed-note { color: var(--ink-2); }
.ed-views { margin: 0; background: color-mix(in srgb, var(--card) 55%, transparent); }
.ed-views .icon, .ed-tabs .icon { width: 17px; height: 17px; }
.ed-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ed-actions .menu > summary.btn { width: 44px; padding: 0; }
.ed > .alert { margin: 0 0 14px; }
/* Arbeitsfläche: Blatt links auf gepunktetem Schreibtisch, Seitenleiste rechts */
.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.ed-form { display: contents; }
.ed-desk { grid-column: 1; grid-row: 1; min-width: 0; container-type: inline-size; padding: 28px clamp(12px, 3cqw, 40px) 40px; border-radius: var(--r-l); background: var(--a);
background-image: radial-gradient(color-mix(in srgb, var(--a-deep) 18%, transparent) 1.3px, transparent 1.6px); background-size: 22px 22px; }
.ed-desk > .alert { max-width: 794px; margin: 0 auto 14px; }
.ed-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar-h) + 104px); max-height: calc(100vh - var(--topbar-h) - 120px); display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); overflow: hidden; }
.ed-side[hidden] { display: none; }
.ed-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; margin: 12px 12px 0; }
.ed-tabs a { justify-content: center; }
.ed-side-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 20px; }
.ed-side-body .style-panel > .section, .ed-side-body > .section { padding: 0 0 18px; margin: 0 0 18px; background: none; border: 0; border-bottom: 1.5px dashed var(--line-2); border-radius: 0; box-shadow: none; }
.ed-side-body .layout-cards { grid-template-columns: minmax(0, 1fr); }
.ed-side-body .layout-card { flex-direction: row; align-items: center; }
.ed-side-body .layout-thumb { flex: none; width: 84px; height: 60px; }
.ed-side-body .font-cards { grid-template-columns: minmax(0, 1fr); }
.ed-sec { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1.5px dashed var(--line-2); display: grid; gap: 12px; }
.ed-sec:last-of-type { border-bottom: 0; }
.ed-h { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 780; letter-spacing: -.02em; }
.ed-sub { margin: -6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ed-sec .choice-cards { grid-template-columns: minmax(0, 1fr); }
.ed-sec .terms { display: grid; gap: 10px; }
.ed-sec .tip[hidden] { display: none; }
.ed-sec .tip p { font-size: 14px; }
.ed-side-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 14px 18px; border-top: 1.5px solid var(--line); background: var(--paper); }
.ed-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-sum span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ed-sum strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-keys summary { font-size: 13.5px; }
.ed-keylist { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 13px; }
.ed-keylist dt { white-space: nowrap; }
.ed-keylist dd { margin: 0; color: var(--ink-2); }
.ed-keylist kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1.5px solid var(--line-2); border-bottom-width: 3px; border-radius: 7px; background: var(--card); font: inherit; font-size: 12px; font-weight: 750; text-align: center; }
.ed-mobilebar { display: none; }
.ed-pdf { max-width: 794px; margin: 0 auto; }
.ed-pdf[hidden] { display: none; }
.ed-pdf iframe { display: block; width: 100%; height: calc(100vh - var(--topbar-h) - 170px); min-height: 540px; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -30px rgba(40, 25, 5, .45); }
.ed-pdf .small-note { text-align: center; margin-top: 10px; }
/* Das Blatt (immer hell wie Papier, auch im Dunkelmodus) */
.pp { --pp-scale: 1; --pp-accent: #18181B; --pp-accent-text: #18181B; --pp-accent-tint: #F3F3F3; --pp-accent-rule: #9C9CA0; --pp-on-accent: #FFFFFF;
--pp-ink: #111111; --pp-ink-2: #444444; --pp-ink-3: #666666; --pp-line: #CCCCCC; --pp-edit: color-mix(in srgb, var(--mint-solid) 16%, #FFFFFF);
position: relative; box-sizing: border-box; width: 100%; max-width: 794px; aspect-ratio: 210 / 297; margin: 0 auto; padding: 4.5em 6em 6.5em 7.4em;
background: #FFFFFF; color: var(--pp-ink); color-scheme: light; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 30px 60px -30px rgba(40, 25, 5, .45);
font-family: "KontorSourceSans", var(--font-ui); font-weight: 400; line-height: 1.35; font-size: calc(12.67px * var(--pp-scale));
font-size: calc(clamp(10.5px, 1.596cqw, 12.67px) * var(--pp-scale)); }
.pp.size-s { --pp-scale: .921; }
.pp.size-l { --pp-scale: 1.105; }
.pp.font-inter { font-family: "KontorInter", var(--font-ui); }
.pp[hidden] { display: none; }
.pp strong, .pp b { font-weight: 700; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; min-height: 8em; }
.pp-logo { min-width: 0; }
.pp-logo img { display: block; max-height: 6.5em; max-width: 17.9em; }
.pp:not(.has-logo) .pp-logo img { display: none; }
.pp-logo-add { display: inline-flex; align-items: center; gap: .5em; padding: .55em .8em; border: 1.5px dashed #BBBBBB; border-radius: .6em; color: var(--pp-ink-3); font-size: .9em; font-weight: 600; text-decoration: none; font-family: var(--font-ui); }
.pp-logo-add .icon { width: 1.2em; height: 1.2em; }
.pp-logo-add:hover { border-color: var(--pp-ink-2); color: var(--pp-ink); text-decoration: none; }
.pp.has-logo .pp-logo-add.has-logo-file { display: none; }
.pp-seller { text-align: right; font-size: .9em; color: #333333; }
.pp-seller strong { font-size: 1.1em; color: var(--pp-ink); }
.pp.has-footer .pp-ids-head { display: none; }
.pp-address { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; margin-top: 2.4em; min-height: 13.4em; }
.pp-recipient { position: relative; width: 25.3em; max-width: 55%; }
.pp-sender-line { font-size: .74em; color: #555555; border-bottom: .5pt solid #999999; padding-bottom: .15em; margin-bottom: .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-addr { display: flex; flex-direction: column; font-size: 1.05em; line-height: 1.4; cursor: pointer; border-radius: .35em; }
.pp-addr span:first-child { font-weight: 600; }
.pp-info { width: 21.5em; max-width: 45%; margin: 0; font-size: .93em; }
.pp-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; padding: .12em 0; }
.pp-row[hidden] { display: none; }
.pp-row dt { color: #555555; white-space: nowrap; }
.pp-row dt label { font-weight: inherit; font-size: inherit; color: inherit; }
.pp-row dd { margin: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .15em; min-width: 0; }
.pp-number { font-weight: 700; color: var(--pp-ink-3); }
.pp-row small, .pp-same { font-size: .78em; color: var(--pp-ink-3); }
.pp-same[hidden] { display: none; }
.pp-dates { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .2em .35em; }
.pp-to[hidden] { display: none; }
.pp-same-text { display: none; color: var(--pp-ink); }
.pp-service.is-same .pp-dates, .pp-service.is-same .pp-same { display: none; }
.pp-service.is-same .pp-same-text { display: inline; }
.pp-title { margin: 1.8em 0 .5em; font-family: inherit; font-size: 1.58em; font-weight: 700; letter-spacing: 0; color: var(--pp-accent-text); }
.pp.layout-din .pp-title { color: #111111; }
.pp-reference { margin: 0 0 .8em; font-size: .95em; color: #333333; }
.pp-subject input[type=text] { font-weight: 700; }
.pp-muted { color: #555555; }
.pp-notes { margin-top: 1.4em; }
.pp-notes p { margin: 0 0 .6em; font-weight: 700; }
.pp-notes:empty { display: none; }
/* Felder auf dem Blatt: sehen aus wie Text, zeigen beim Zeigen und im Fokus, dass man sie ändern kann */
.pp :is(input[type=text], input[type=date], input:not([type]), textarea, select) { width: 100%; height: auto; min-height: 0; padding: .18em .3em; margin: 0; border: 0; border-radius: .3em;
background-color: transparent; color: inherit; font: inherit; font-size: 1em; line-height: 1.35; box-shadow: inset 0 -1px 0 transparent; transition: background-color .15s, box-shadow .15s; }
.pp :is(input, textarea, select):hover { background-color: #F7F5F0; box-shadow: inset 0 -1.5px 0 #CFC6B6; }
.pp :is(input, textarea, select):focus { outline: none; background-color: var(--pp-edit); box-shadow: inset 0 -2px 0 var(--mint-solid); }
.pp :is(input, textarea, select)[aria-invalid="true"] { background-color: #FFE9E3; box-shadow: inset 0 -2px 0 var(--coral-solid); }
.pp textarea { resize: none; overflow: hidden; white-space: pre-wrap; field-sizing: content; min-height: 1.8em; }
.pp select { padding-right: 1.3em; background-position: right .1em center; background-size: .95em; }
.pp input[type=date] { width: auto; max-width: 9.6em; text-align: right; font-variant-numeric: tabular-nums; }
.pp input::placeholder, .pp textarea::placeholder { color: #A39A8D; opacity: 1; }
.pp .errors, .pp .ed-err { display: block; margin: .25em 0 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--coral-deep); text-align: left; }
.pp .errors li::before { content: "! "; }
.pp-errors { margin: .4em 0 0; }
/* Bearbeitbare Zonen mit Sticker-Etikett (wie im Prototyp „Kunde“, „Titel“) */
.ed-zone { position: relative; border-radius: .5em; transition: box-shadow .2s, background-color .2s; }
.ed-zone:focus-within, .ed-zone.is-picking { box-shadow: 0 0 0 2px var(--mint-solid); background: color-mix(in srgb, var(--mint) 22%, #FFFFFF); }
.ed-zone.has-error { box-shadow: 0 0 0 2px var(--coral-solid); }
.ed-tag { position: absolute; left: .6em; top: -1.05em; z-index: 2; padding: .12em .55em; border-radius: .5em; background: var(--st-mint); color: var(--print-ink); border: 1.5px solid var(--print-ink);
font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s; pointer-events: none; }
.ed-zone:focus-within > .ed-tag, .ed-zone.is-picking > .ed-tag, .ed-zone:hover > .ed-tag { opacity: 1; transform: none; }
.pp-block-text > .ed-tag { top: -1.25em; }
.pp-subject, .pp-intro, .pp-closing { margin: 0 -.3em .5em; }
.pp-recipient.ed-zone { padding: .2em .3em; margin: -.2em -.3em; }
.pp-recipient:hover .pp-addr { background: #F7F5F0; }
/* Kundenauswahl */
.ed-customer { display: grid; gap: 4px; margin-top: .8em; font-family: var(--font-ui); }
.ed-customer label { font-size: 12px; font-weight: 750; color: var(--ink-2); }
.ed-customer select { border: 1.5px solid #D8D0C2; height: 36px; font-size: 14px; }
.ed-customer.is-enhanced { display: none; }
.ed-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 13px; font-weight: 750; color: var(--mint-deep); text-decoration: none; }
.ed-link .icon { width: 15px; height: 15px; }
.ed-hint { margin: .6em 0 0; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); }
.ed-pick-btn { position: absolute; right: .3em; bottom: .3em; padding: 4px 9px; border: 1.5px solid var(--print-ink); border-radius: 9px; background: var(--sticker); color: var(--print-ink);
font: 750 12px/1.2 var(--font-ui); cursor: pointer; opacity: 0; transition: opacity .15s; }
.pp-recipient:hover .ed-pick-btn, .ed-pick-btn:focus-visible, .pp-recipient.is-picking .ed-pick-btn { opacity: 1; }
.ed-pop { position: absolute; left: -.4em; top: calc(100% + 8px); z-index: 30; width: min(360px, 88vw); padding: 10px; background: var(--card); color: var(--ink); font-family: var(--font-ui); font-size: 14px;
border: 2px solid var(--print-ink); border-radius: 18px; box-shadow: 0 5px 0 var(--print-ink), 0 30px 50px -20px rgba(0, 0, 0, .35); animation: pop .25s var(--ease-pop) both; }
.ed-pop[hidden] { display: none; }
.ed-pop .ed-pop-search input { height: 42px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 15px; }
.ed-listbox { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.ed-listbox[hidden] { display: none; }
.ed-listbox [role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 12px; cursor: pointer; }
.ed-listbox [role=option][aria-selected="true"] { background: var(--mint); color: var(--print-ink); }
.ed-listbox [role=option][aria-selected="true"] .ed-opt-main span, .ed-listbox [role=option][aria-selected="true"] .ed-opt-side { color: var(--print-ink); }
.ed-listbox .avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; border-radius: 10px; }
.ed-listbox .avatar.is-new { background: var(--sticker); border-style: dashed; font-size: 18px; }
.ed-opt-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ed-opt-main b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-opt-main span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-opt-side { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ed-listbox mark { background: var(--st-butter); color: var(--print-ink); border-radius: 3px; padding: 0 1px; }
/* Schnellwahl-Chips (Leistungszeitraum, Gültigkeit) */
.ed-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: .2em; font-family: var(--font-ui); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .15s; }
.pp-row:focus-within .ed-chips, .pp-row:hover .ed-chips { opacity: 1; max-height: 6em; }
.ed-chips button { padding: 2px 8px; border: 1.5px solid #DDD5C7; border-radius: 999px; background: #FFFFFF; color: #574E43; font: 700 11.5px/1.5 var(--font-ui); cursor: pointer; }
.ed-chips button:hover { border-color: var(--print-ink); color: var(--print-ink); }
/* Positionstabelle */
.pp-items-zone { margin: 1.4em -.6em 0; padding: .3em .6em .6em; }
.pp .pp-items { width: 100%; border-collapse: collapse; margin-top: .6em; font-size: 1em; }
.pp .pp-items th { padding: .42em .36em; font-size: .82em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #444444; border-bottom: .8pt solid var(--pp-accent); background: none; white-space: nowrap; }
.pp .pp-items td { padding: .45em .2em; border-bottom: .4pt solid var(--pp-line); vertical-align: top; background: none; border-radius: 0; }
.pp .pp-items tbody tr:hover td { background: none; border-radius: 0; }
.pp .pp-items .num { text-align: right; }
.pp .pp-items .num :is(input, select) { text-align: right; }
.pp .c-pos { width: 2.6em; color: #555555; position: relative; white-space: nowrap; }
.pp .c-qty { width: 4em; }
.pp .c-unit { width: 5.4em; }
.pp .c-price { width: 6.6em; }
.pp .c-vat { width: 4.2em; }
.pp .c-amount { width: 6.4em; padding-top: .63em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp .pp-items select { background-image: none; padding-right: .3em; }
.pp .pp-items select:is(:hover, :focus) { background-image: url("data:image/svg+xml;utf8,"); padding-right: 1.3em; }
.pp .pp-items td.c-item { position: relative; }
.pp .pp-items td.c-tools, .pp .pp-items th.c-tools { width: 4.4em; padding-left: 0; padding-right: 0; text-align: right; }
html:not(.no-js) .pp .pp-items :is(td, th).c-tools { width: 0; position: relative; }
.ed-tools { position: absolute; left: .5em; top: .3em; display: flex; gap: .15em; }
.pp [data-lines] { counter-reset: pos; }
.pp-line { counter-increment: pos; position: relative; }
.pp-line[hidden] { display: none; }
.pp-num::before { content: counter(pos); display: inline-block; padding-top: .2em; }
.pp-line td.c-item input[name$="-name"] { font-weight: 600; }
.pp-line td.c-item textarea { font-size: .9em; color: #444444; }
.pp-eur { display: flex; align-items: baseline; gap: .15em; }
.pp-eur input { flex: 1; min-width: 0; }
.pp-line.is-nonstd .c-vat select { display: none; }
.pp-cat { display: block; padding-top: .2em; font-size: .9em; color: var(--pp-ink-2); }
.pp-cat:empty { display: none; }
.ed-line-flags { display: block; padding: 0 .3em; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; color: var(--mint-deep); }
.ed-line-flags[hidden], .ed-line-flags:empty { display: none; }
.ed-grip { position: absolute; left: -2.1em; top: .35em; display: grid; place-items: center; width: 1.8em; height: 1.8em; padding: 0; border: 0; border-radius: .4em; background: none; color: #A39A8D;
cursor: grab; touch-action: none; opacity: 0; transition: opacity .15s; }
.ed-grip .icon { width: 1.15em; height: 1.15em; }
.pp-line:hover .ed-grip, .pp-line:focus-within .ed-grip, .ed-grip:focus-visible { opacity: 1; }
.ed-grip:hover { background: #F2EEE6; color: var(--pp-ink); }
.ed-grip:focus-visible { outline: 2px solid var(--focus); }
.pp .pp-items .pp-line.is-dragging td { background: var(--pp-edit); }
.pp-line.is-dragging { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); }
[data-lines].is-sorting, [data-lines].is-sorting * { cursor: grabbing; user-select: none; }
.pp .c-tools .icon-btn { width: 1.9em; height: 1.9em; border-radius: .45em; color: #A39A8D; opacity: 0; transition: opacity .15s; }
.pp .c-tools .icon-btn .icon { width: 1.15em; height: 1.15em; }
.pp-line:hover .c-tools .icon-btn, .pp-line:focus-within .c-tools .icon-btn { opacity: 1; }
.pp .c-tools .icon-btn:hover { background: #F2EEE6; color: var(--pp-ink); }
.pp .c-tools .icon-btn[data-del]:hover { background: #FFE3DB; color: var(--coral-deep); }
.pp .ed-del-box { font-family: var(--font-ui); font-size: 12px; gap: 6px; justify-content: flex-end; }
.pp .ed-del-box span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.no-js .ed-more > summary { position: static; background: none; }
.pp .pp-items .pp-line.has-error td { background: #FFF4F1; }
.ed-more { margin: 0; font-family: var(--font-ui); }
.ed-more > summary { position: absolute; right: 0; top: .45em; z-index: 2; background: #FFFFFF; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #8C8273; cursor: pointer; list-style: none; opacity: 0; transition: opacity .15s; }
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more > summary::after { content: "▾"; font-size: 10px; }
.ed-more[open] > summary, .pp-line:hover .ed-more > summary, .pp-line:focus-within .ed-more > summary, html.no-js .ed-more > summary { opacity: 1; }
.ed-more > summary:hover { background: #F2EEE6; color: var(--pp-ink); }
.ed-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 6px 0 4px; padding: 10px; border-radius: 12px; background: #F7F5F0; }
.ed-more-grid .field { gap: 3px; }
.ed-more-grid .field > label { font-size: 11.5px; font-weight: 750; color: #6E6357; }
.pp .ed-more-grid :is(input[type=text], input:not([type]), select) { min-height: 32px; background-color: #FFFFFF; border: 1px solid #DDD5C7; font-family: var(--font-ui); font-size: 13px; padding: 4px 8px; }
.pp .ed-more-grid select { padding-right: 24px; background-position: right 6px center; background-size: 14px; }
.ed-more-grid .ed-reason[hidden] { display: none; }
.ed-more-grid .affix { display: flex; }
/* Position hinzufügen, Katalogsuche, Schnellwahl */
.ed-addline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: .8em; font-family: var(--font-ui); font-size: 14px; }
.ed-addline .btn.small { height: 36px; border-style: dashed; box-shadow: none; background: transparent; color: var(--print-ink); border-color: var(--print-ink); }
.ed-addline .btn.small:hover { border-style: solid; background: var(--mint); box-shadow: 0 3px 0 var(--print-ink); }
.ed-catsearch { position: relative; display: flex; align-items: center; flex: 1 1 200px; max-width: 260px; }
.ed-catsearch > .icon { position: absolute; left: 10px; width: 16px; height: 16px; color: #8C8273; pointer-events: none; z-index: 1; }
.pp .ed-catsearch input[type=search] { height: 36px; padding: 0 10px 0 32px; border: 1.5px solid #E2DACB; border-radius: 11px; font-size: 14px; background: #FFFFFF; color: var(--pp-ink); }
.ed-catsearch .ed-listbox { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(400px, 80vw); margin: 0; padding: 6px; background: var(--card); color: var(--ink);
border: 2px solid var(--print-ink); border-radius: 16px; box-shadow: 0 5px 0 var(--print-ink), 0 30px 50px -20px rgba(0, 0, 0, .35); }
.ed-quick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-quick .small-note { color: #6E6357; }
.ed-pill { padding: 5px 11px; border: 0; border-radius: 999px; background: #EFEAE0; color: #3A3229; font: 700 12.5px/1.3 var(--font-ui); cursor: pointer; transition: background-color .15s, transform .15s var(--ease-pop); }
.ed-pill:hover { background: var(--mint); transform: translateY(-1px); }
/* Summen */
.pp .pp-totals { width: 25.3em; max-width: 100%; margin: 1.2em 0 0 auto; border-collapse: collapse; font-size: 1em; }
.pp .pp-totals td { padding: .3em .36em; border: 0; background: none; border-radius: 0; font-variant-numeric: tabular-nums; }
.pp .pp-totals td.num { text-align: right; white-space: nowrap; }
.pp .pp-totals tr.grand td { font-weight: 700; font-size: 1.16em; border-top: .8pt solid var(--pp-accent); padding-top: .5em; }
.pp .pp-totals tbody tr:hover td { background: none; }
.ed.totals-incomplete .pp-totals tr.grand td.num::after { content: " *"; color: var(--coral-deep); }
/* Textblöcke und Trennlinien */
.pp-blocks { display: grid; gap: .4em; }
.pp-blocks:empty { display: none; }
.pp-block { margin: 0 -.3em; }
.pp-block[hidden] { display: none; }
.pp-block .pp-divider { display: none; height: 0; margin: .9em .3em 1.2em; border-top: .8pt solid var(--pp-accent-rule); }
.pp-block[data-kind="divider"] .pp-block-text { display: none; }
.pp-block[data-kind="divider"] .pp-divider { display: block; }
.pp .snippet-pick { width: auto; min-height: 0; height: 28px; margin: .2em 0 0 .3em; padding: 0 26px 0 8px; border: 1px solid #E2DACB; border-radius: 8px;
font-family: var(--font-ui); font-size: 12px; color: #574E43; background-color: #FFFFFF; background-position: right 6px center; background-size: 14px; opacity: 0; transition: opacity .15s; }
.ed-zone:focus-within .snippet-pick, .ed-zone:hover .snippet-pick { opacity: 1; }
.ed-block-tools { position: absolute; right: .3em; top: -1.15em; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: #FFFDF9; color: var(--print-ink); border: 1.5px solid var(--print-ink);
box-shadow: 0 3px 0 var(--print-ink); font-family: var(--font-ui); opacity: 0; pointer-events: none; transition: opacity .15s; }
.pp-block:hover .ed-block-tools, .pp-block:focus-within .ed-block-tools { opacity: 1; pointer-events: auto; }
.ed-block-tools .icon-btn { width: 28px; height: 28px; border-radius: 8px; color: #574E43; }
.ed-block-tools .icon-btn .icon { width: 15px; height: 15px; }
.ed-block-tools .btn.small { height: 28px; padding: 0 9px; font-size: 12px; box-shadow: none; border-width: 0; background: #FFFDF9; color: var(--print-ink); }
.ed-block-ctl { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-bottom: 4px; border-radius: 10px; background: #F7F5F0; font-family: var(--font-ui); font-size: 13px; }
.ed-block-ctl .field { min-width: 7rem; flex: 1; }
.pp .ed-block-ctl :is(input, select) { background-color: #FFFFFF; border: 1px solid #DDD5C7; }
.ed-addblock { display: flex; gap: 6px; margin: .4em 0 .6em; font-family: var(--font-ui); opacity: 0; transition: opacity .15s; }
.ed-addblock button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1.5px dashed #D8D0C2; border-radius: 999px; background: none; color: #8C8273; font: 700 12px/1.4 var(--font-ui); cursor: pointer; }
.ed-addblock button .icon { width: 13px; height: 13px; }
.ed-addblock button:hover { border-style: solid; border-color: var(--print-ink); color: var(--print-ink); background: var(--mint); }
.pp:hover .ed-addblock, .ed-addblock:focus-within { opacity: 1; }
/* Zahlungshinweis, GiroCode, Fußzeile */
.pp-payment { display: flex; gap: 1.8em; align-items: flex-start; margin-top: 1.4em; }
.pp-payment-text { flex: 1; min-width: 0; }
.pp-payment p { margin: 0 0 .7em; }
.pp:not(.has-bank) .pp-bank { display: none; }
.pp-giro { flex: none; display: grid; place-items: center; width: 7.8em; height: 7.8em; padding: .6em; box-sizing: border-box; border: .6pt dashed #999999; color: #666666; font-size: .72em; text-align: center; }
.pp-giro[hidden] { display: none; }
.pp-footer { display: none; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 1em; margin-top: 3em; padding-top: .6em; border-top: .5pt solid var(--pp-accent-rule); font-size: .78em; color: #444444; }
.pp.has-footer .pp-footer { display: grid; }
/* Layout „Abgerundet“ (wie static/pdf/design.css) */
.pp.layout-abgerundet .pp-info { padding: .75em 1.05em; border-radius: .9em; background: var(--pp-accent-tint); }
.pp.layout-abgerundet .pp-items th { background: var(--pp-accent-tint); color: #222222; border-bottom: 0; }
.pp.layout-abgerundet .pp-items th:first-child { border-radius: .6em 0 0 .6em; }
.pp.layout-abgerundet .pp-items th:last-child { border-radius: 0 .6em .6em 0; }
.pp.layout-abgerundet .pp-totals tr.grand td { background: var(--pp-accent); color: var(--pp-on-accent); border-top: 0; }
.pp.layout-abgerundet .pp-totals tr.grand td:first-child { border-radius: .6em 0 0 .6em; padding-left: .9em; }
.pp.layout-abgerundet .pp-totals tr.grand td:last-child { border-radius: 0 .6em .6em 0; padding-right: .9em; }
.pp.layout-abgerundet .pp-block .pp-divider { border-top-width: 1.2pt; }
/* Layout „DIN 5008“: Briefkopf 45 mm, Logo rechts, Anschriftfeld 80 × 45 mm, Informationsblock rechts, Falzmarken */
.pp.layout-din { padding-top: 0; }
.pp.layout-din .pp-head { min-height: 13.4em; padding-top: 3.6em; flex-direction: row-reverse; }
.pp.layout-din .pp-seller { text-align: left; }
.pp.layout-din .pp-address { margin-top: 0; }
.pp.layout-din .pp-recipient { width: 23.8em; min-height: 13.4em; }
.pp.layout-din .pp-sender-line { font-size: .68em; }
.pp.layout-din .pp-addr { margin-top: 2.6em; }
.pp.layout-din .pp-info { width: 19.4em; margin-top: 1.5em; }
.pp.layout-din::before, .pp.layout-din::after { content: ""; position: absolute; left: 0; width: 1.5em; border-top: .6pt solid #888888; }
.pp.layout-din::before { top: 35.4%; }
.pp.layout-din::after { top: 70.7%; }
/* Dichte und Tabellenrahmen */
.pp.density-eng .pp-title { margin: 1.2em 0 .4em; }
.pp.density-eng .pp-items td { padding-top: .25em; padding-bottom: .25em; }
.pp.density-luftig .pp-title { margin: 2.4em 0 .9em; }
.pp.density-luftig .pp-items td { padding-top: .75em; padding-bottom: .75em; }
.pp.density-luftig .pp-payment { margin-top: 2em; }
.pp.borders-keine .pp-items :is(th, td) { border-bottom: 0; }
.pp.borders-tabelle .pp-items :is(th, td) { border: .5pt solid #B5B5B5; }
.pp.borders-tabelle .pp-items th { border-bottom: .8pt solid var(--pp-accent); }
/* Entfernt – Rückgängig */
.ed-undo { position: fixed; left: 50%; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; transform: translateX(-50%);
background: var(--ink); color: var(--paper); border-radius: 16px; box-shadow: 0 5px 0 var(--a-solid), var(--shadow-pop); font-weight: 700; font-size: 14.5px; animation: pop .25s var(--ease-pop) both; }
.ed-undo[hidden] { display: none; }
.ed-undo .btn { height: 34px; background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
/* Neuer Kunde (ohne JavaScript unten auf der Seite, mit JavaScript als Dialog) */
.ed-newcust { margin-top: 22px; }
.ed-newcust[hidden] { display: none; }
.ed-newcust-error { color: var(--coral-deep); font-weight: 700; font-size: 14px; margin: 10px 0 0; }
.ed-newcust-error[hidden] { display: none; }
.ed-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 2px solid var(--print-ink); border-radius: var(--r-l); background: var(--card); color: var(--ink);
box-shadow: 0 6px 0 var(--print-ink), 0 40px 80px -30px rgba(0, 0, 0, .5); }
.ed-dialog::backdrop { background: rgba(20, 15, 8, .45); }
.ed-dialog .ed-newcust { margin: 0; border: 0; box-shadow: none; }
.ed-dialog[open] { animation: pop .3s var(--ease-pop) both; }
/* Fehler in der Seitenleiste */
.ed-side .ed-err { display: block; color: var(--coral-deep); font-size: 13px; font-weight: 700; }
/* Schmalere Bildschirme: Seitenleiste unter das Blatt */
@media (max-width: 1180px) {
.ed-body { grid-template-columns: minmax(0, 1fr); }
.ed-side { grid-column: 1; grid-row: auto; position: static; max-height: none; }
.ed-side-body { overflow: visible; }
.ed-bar { position: static; }
}
/* Smartphone: gestapelter Karten-Editor statt A4-Blatt */
@media (max-width: 700px) {
.ed-bar { margin: 0 0 12px; padding: 10px; border-radius: var(--r-m); gap: 8px 10px; }
.ed-back span { display: none; }
.ed-title { flex-basis: calc(100% - 60px); }
.ed-views { order: 3; }
.ed-actions { order: 4; margin-left: auto; }
.ed-actions .btn.primary { display: none; }
.ed-desk { padding: 0; background: none; border-radius: 0; container-type: normal; }
.pp { aspect-ratio: auto; padding: 18px 14px 20px; border-radius: var(--r-m); font-size: 15px; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.pp.size-s, .pp.size-l { --pp-scale: 1; }
.pp-head { min-height: 0; gap: 12px; }
.pp.layout-din .pp-head { min-height: 0; padding-top: 0; }
.pp.layout-din::before, .pp.layout-din::after { display: none; }
.pp-logo img { max-height: 48px; max-width: 140px; }
.pp-seller { font-size: 12.5px; }
.pp-address { flex-direction: column; margin-top: 18px; min-height: 0; gap: 16px; }
.pp-recipient, .pp.layout-din .pp-recipient { width: auto; max-width: none; min-height: 0; }
.pp.layout-din .pp-addr { margin-top: 0; }
.pp-info, .pp.layout-din .pp-info { width: auto; max-width: none; margin: 0; font-size: 14px; padding: 10px 12px; border-radius: 14px; background: #F7F5F0; }
.pp-row { padding: 4px 0; }
.ed-chips { opacity: 1; max-height: none; }
.pp :is(input[type=text], input[type=date], input:not([type]), textarea, select) { min-height: 40px; padding: 8px 10px; border-radius: 10px; background-color: #F7F5F0; font-size: 16px; }
.pp textarea { min-height: 44px; }
.pp input[type=date] { max-width: none; }
.ed-tag { opacity: 1; position: static; display: inline-block; margin: 0 0 4px; transform: none; }
.pp-recipient > .ed-tag, .pp-items-zone > .ed-tag { display: none; }
.ed-pick-btn { position: static; opacity: 1; margin-top: 8px; padding: 8px 12px; font-size: 13px; }
.ed-pop { left: 0; width: 100%; }
.pp-subject, .pp-intro, .pp-closing { margin: 0 0 12px; }
.ed-zone:focus-within { box-shadow: none; background: none; }
.pp-items-zone { margin: 16px 0 0; padding: 0; }
.pp .pp-items, .pp .pp-items tbody { display: block; }
.pp .pp-items thead { display: none; }
.pp-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 12px; border: 1.5px solid var(--line-2); border-radius: 18px; background: #FFFFFF; }
.pp-line:focus-within { border-color: var(--mint-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-solid) 25%, transparent); }
.pp .pp-items td, .pp .pp-items td.c-tools { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
.pp .pp-items td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 750; color: #6E6357; text-align: left; }
.pp .pp-items td.c-pos { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: 4px; }
.pp .pp-items td.c-item { grid-column: 1 / -1; grid-row: 2; }
.pp .pp-items td.c-tools { grid-column: 3 / -1; grid-row: 1; display: flex; justify-content: flex-end; gap: 4px; width: auto; }
html:not(.no-js) .pp .pp-items td.c-tools { width: auto; }
.ed-tools { position: static; gap: 4px; }
.pp .pp-items td.c-qty { grid-column: span 2; }
.pp .pp-items td.c-unit { grid-column: span 4; }
.pp .pp-items td.c-price { grid-column: span 3; }
.pp .pp-items td.c-vat { grid-column: span 3; }
.pp .pp-items td.c-amount { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1.5px dashed var(--line-2); font-family: var(--font-display); font-size: 18px; }
.pp .pp-items td.c-amount::before { margin: 0; }
.pp-num::before { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--sticker); color: var(--print-ink); border: 2px solid var(--print-ink);
font-family: var(--font-display); font-size: 12px; font-weight: 800; transform: rotate(-6deg); }
.ed-grip { position: static; opacity: 1; width: 34px; height: 34px; }
.pp .c-tools .icon-btn { opacity: 1; width: 38px; height: 38px; }
.ed-more > summary { position: static; opacity: 1; padding: 6px 8px; font-size: 12.5px; background: none; }
.ed-more-grid { grid-template-columns: 1fr; }
.ed-addline { flex-direction: column; align-items: stretch; }
.ed-addline .btn.small { height: 46px; }
.ed-catsearch { max-width: none; }
.pp .ed-catsearch input[type=search] { height: 44px; font-size: 16px; }
.ed-quick { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.ed-pill { flex: none; padding: 8px 12px; }
.pp .pp-totals { width: 100%; }
.ed-addblock { opacity: 1; flex-wrap: wrap; }
.ed-addblock button { padding: 7px 12px; font-size: 13px; }
.ed-block-tools { position: static; opacity: 1; pointer-events: auto; box-shadow: none; border-width: 1px; margin-top: 4px; width: max-content; max-width: 100%; flex-wrap: wrap; }
.pp .snippet-pick { opacity: 1; }
.pp-payment { flex-direction: column; }
.pp-footer { grid-template-columns: 1fr 1fr; }
.ed-side-foot { display: none; }
.ed-mobilebar { position: sticky; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 14px 0 0; padding: 10px 12px 10px 16px; background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 2px solid var(--print-ink); border-radius: var(--r-m); box-shadow: 0 5px 0 var(--print-ink), 0 26px 40px -24px rgba(0, 0, 0, .4); }
.ed-mobilebar .btn { height: 44px; }
.ed-undo { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); justify-content: space-between; }
.ed-pdf iframe { height: 70vh; min-height: 420px; }
}
html.iosapp .ed-mobilebar { bottom: calc(.5rem + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
html.iosapp .ed-undo { bottom: calc(5rem + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
@media (prefers-reduced-motion: reduce) { .ed-pop, .ed-undo, .ed-dialog[open] { animation: none; } .ed-save[data-state="saving"]::before { animation: none; } }
:root[data-theme="dark"] :is(.ed-mobilebar, .ed-pop, .ed-dialog, .ed-catsearch .ed-listbox) { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 30px 50px -20px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.ed-mobilebar, .ed-pop, .ed-dialog, .ed-catsearch .ed-listbox) { border-color: var(--ink); box-shadow: 0 5px 0 #000, 0 30px 50px -20px rgba(0, 0, 0, .7); } }
/* --- Integration Editor × Rechnungen: Zusatzangaben in der Seitenleiste „Details“ --- */
.ed-extras fieldset { padding: 0; margin: 0 0 14px; border: 0; background: none; box-shadow: none; }
.ed-extras legend { font-size: 15px; margin: 0 0 8px; }
.ed-extras .form-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ed-deductions { margin: 0; padding-left: 18px; font-size: 14px; }
/* --- Angebote, Aufträge, Lieferscheine, Proforma, Briefe (Paket angebote) --- */
.li-source { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.source-note { display: flex; align-items: center; gap: .45rem; margin: .4rem 0 0; font-size: .9rem; }
.source-note .icon { width: 16px; height: 16px; flex: none; }
.sig-pad { display: grid; gap: .5rem; justify-items: start; margin-bottom: 1rem; }
.sig-pad canvas { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; border: 2px dashed var(--line-2); border-radius: var(--r-m);
background: var(--card); color: var(--ink); touch-action: none; cursor: crosshair; }
.sig-view svg { display: block; width: 100%; max-width: 360px; height: auto; color: var(--ink); border-bottom: 1.5px solid var(--line-2); }
.public-page { background: var(--paper); }
.public-main { max-width: 760px; margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) 16px calc(2rem + env(safe-area-inset-bottom)); display: grid; gap: 1.25rem; }
.public-head { background: var(--a); border-radius: var(--r-xl); padding: 1.6rem 1.5rem; }
.public-head h1 { font-family: var(--font-display); font-size: clamp(30px, 6vw, 46px); line-height: 1.05; letter-spacing: -.03em; margin: .2rem 0 .4rem; overflow-wrap: anywhere; }
.public-head .lede { margin: 0; }
.public-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); padding: 1.25rem; min-width: 0; }
.public-card h1 { font-family: var(--font-display); margin: .5rem 0; }
.public-art { width: 120px; height: auto; }
.public-decide { display: grid; gap: 1rem; }
.public-foot, .public-seller { font-size: .85rem; color: var(--ink-3); margin: 0; text-align: center; }
@media (max-width: 700px) {
.public-head { padding: 1.2rem 1rem; border-radius: var(--r-l); }
.public-card { padding: 1rem; }
.public-decide .btn.large { width: 100%; justify-content: center; }
}
/* --- Projekte, Zeiterfassung & Aufgaben (Paket projekte) ------------------------------ */
input[type=time] { font: inherit; font-size: 15px; font-weight: 550; color: var(--ink); background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-s);
padding: 0 14px; width: 100%; min-width: 0; height: 46px; transition: border-color .2s, box-shadow .2s; }
input[type=time]:focus { outline: none; border-color: var(--edge); box-shadow: 0 3px 0 var(--lip), 0 0 0 4px color-mix(in srgb, var(--focus) 28%, transparent); }
.tabs a .icon { width: 17px; height: 17px; }
.full-width { width: 100%; justify-content: center; }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.row-actions { white-space: nowrap; width: 1%; }
.row-actions form { display: inline; margin: 0; }
.row-actions .icon-btn { width: 36px; height: 36px; }
/* Stoppuhr */
.timer-card { background: var(--a); border-color: transparent; }
.timer-card.is-running { background: var(--card); border: 2px solid var(--print-ink); box-shadow: 0 5px 0 var(--print-ink); }
.timer-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.timer-face { min-width: 0; }
.timer-clock { display: block; font-family: var(--font-display); font-size: clamp(40px, 7vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 6px 0 8px; }
.timer-what { margin: 0; overflow-wrap: anywhere; }
.timer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.timer-actions form { margin: 0; }
.timer-head h2 { margin: 0 0 14px; }
.timer-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.timer-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.timer-go .field { margin: 0; flex: 1 1 220px; }
.timer-card.is-running .timer-clock::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--coral-solid); border: 2px solid var(--print-ink); margin-right: 12px; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .timer-card.is-running .timer-clock::before { animation: pair-pulse 1.4s ease-in-out infinite; } }
/* Woche */
.week-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 16px; }
.week-label { font-family: var(--font-display); font-size: 19px; font-weight: 780; letter-spacing: -.01em; }
.week-csv { margin-left: auto; }
.week-days { display: grid; gap: 14px; margin-bottom: 22px; }
.day-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); padding: 14px 18px; min-width: 0; }
.day-card.is-today { border: 2px solid var(--a-solid); }
.day-head { display: flex; align-items: center; gap: 12px; }
.day-head h2 { font-size: 17px; margin: 0; flex: 1; min-width: 0; }
.day-short { display: none; }
.day-sum { font-family: var(--font-display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.day-list { margin-top: 6px; }
.day-empty { margin: 6px 0 0; font-size: 14px; }
.customer-split { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.customer-split li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1.5px dashed var(--line); }
.customer-split li:last-child { border-bottom: 0; }
.customer-split strong { font-variant-numeric: tabular-nums; }
/* Abrechnen */
.billing-filter .row { align-items: flex-end; }
.billing-filter .field { margin: 0; min-width: 0; }
.pick-row { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.pick-row input[type=checkbox] { flex: none; }
.pick-row .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pick-row .t small { color: var(--ink-3); font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; }
.billing-panel .stack > .field { margin: 0; }
.preview-lines { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.preview-lines li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1.5px dashed var(--line); }
.preview-lines .t { display: flex; flex-direction: column; min-width: 0; }
.preview-lines small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.preview-lines .v { font-family: var(--font-display); font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preview-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.preview-total .money { font-size: 30px; }
/* Projekte */
.budget-cell { min-width: 140px; }
.budget-cell .meter { margin: 0 0 4px; }
.link-groups { display: grid; gap: 18px; }
.link-group h3 { font-size: 16px; margin: 0 0 8px; }
.link-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.link-items li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1.5px dashed var(--line); }
.link-items .t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.link-items .t small { color: var(--ink-3); font-size: 12.5px; }
.link-items .v { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.link-items form { margin: 0; }
.link-add { display: flex; gap: 10px; align-items: center; }
.link-add select { flex: 1; min-width: 0; }
.kv-list { display: grid; gap: 6px; margin: 0; }
.kv-list > div { display: flex; justify-content: space-between; gap: 12px; }
.kv-list dt { color: var(--ink-2); font-size: 14px; }
.kv-list dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* Aufgaben */
.task-add { padding: 18px 20px; }
.task-add-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: end; }
.task-add-grid .field { margin: 0; }
.task-check { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 9px; border: 2px solid var(--print-ink); background: var(--sticker); cursor: pointer;
display: inline-grid; place-items: center; transition: transform .2s var(--ease-pop), background-color .2s; }
.task-check:hover { transform: rotate(-6deg) scale(1.06); background: var(--st-mint); }
.task-check.is-done { background: var(--st-mint); }
.task-check.is-done::after, .task-check:hover::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--print-ink); border-bottom: 2.5px solid var(--print-ink); transform: translateY(-2px) rotate(-45deg); }
.task-list form { margin: 0; }
.task-list tr.is-done .t > a { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }
.task-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.task-mini li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1.5px dashed var(--line); min-width: 0; }
.task-mini li:last-child { border-bottom: 0; }
.task-mini li > a, .task-mini li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-mini form { margin: 0; }
.task-mini small { color: var(--ink-3); font-weight: 650; white-space: nowrap; }
.task-mini li.is-late small { color: var(--coral-deep); }
.task-quick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.task-quick input[name=title] { grid-column: 1 / -1; }
.feed-url { font-family: var(--mono); font-size: 13px; margin-top: 10px; }
@media (max-width: 1100px) {
.timer-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-add-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.task-add-grid .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 700px) {
.timer-fields, .task-add-grid { grid-template-columns: minmax(0, 1fr); }
.timer-actions, .timer-go { width: 100%; }
.timer-actions .btn.primary, .timer-go .btn.primary { flex: 1; justify-content: center; }
.day-card { padding: 12px 12px; }
.day-head h2 { font-size: 16px; }
table.list td.row-actions { display: none; }
.budget-cell { min-width: 0; }
.link-add { flex-wrap: wrap; }
.link-add .btn { flex: 1; }
.week-csv { margin-left: 0; }
}
/* --- Versand, Vorlagen, Kundenportal & E-Rechnung (Paket versand) ----------------------------------- */
.checklist-plain { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.checklist-plain .choice { align-items: flex-start; }
.checklist-plain .choice span { overflow-wrap: anywhere; }
.attach-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.attach-pick legend { font-weight: 700; padding: 0; }
.placeholder-help summary { font-weight: 650; }
.placeholder-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: .6rem 0 0; font-size: 14px; }
.placeholder-list dt code { font-size: 13px; background: var(--paper-2); border-radius: 8px; padding: 1px 6px; }
.placeholder-list dd { margin: 0; color: var(--ink-2); }
.letterhead-preview { width: 6.3rem; height: 8.9rem; }
.custom-fields-panel .form-grid { margin-top: .25rem; }
.compose-grid aside { display: grid; gap: 1rem; align-content: start; }
.portal-url { word-break: break-all; background: var(--card); border: 1.5px dashed var(--line-2); border-radius: var(--r-s); padding: 12px 14px; }
table.list tr.is-highlight td { background: var(--a); }
/* Kundenportal (öffentliche Seiten ohne App-Rahmen) */
body.portal { background: var(--paper); }
.portal-main { width: 100%; max-width: 980px; margin: 0 auto; padding: 24px 24px 64px; display: grid; gap: 20px; }
.portal-brand { display: flex; align-items: center; gap: 14px; }
.portal-brand strong { display: block; font-family: var(--font-display); font-size: 20px; }
.portal-brand small { display: block; }
.portal-logo { max-height: 48px; max-width: 160px; }
.portal-card { min-width: 0; }
.portal-girocode { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.portal-girocode img { width: 140px; height: 140px; background: #fff; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line-2); }
.portal-foot { border-top: 1.5px dashed var(--line-2); padding-top: 16px; color: var(--ink-2); font-size: 14px; }
@media (max-width: 700px) {
.portal-main { padding: 16px 16px 48px; }
.placeholder-list { grid-template-columns: minmax(0, 1fr); }
.placeholder-list dd { margin-bottom: 6px; }
.portal-girocode { flex-direction: column; align-items: flex-start; }
}
/* --- Mahnwesen & Online-Zahlung --- */
.paylinks-panel .paylink-url { overflow-wrap: anywhere; word-break: break-all; font-size: 13.5px; }
.paylinks-panel select, .paylinks-panel input[type="date"] { max-width: 100%; }
nav.tabs[aria-label="Mahnwesen-Einstellungen"] { margin: 0 0 18px; }
.notice-actions { flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
/* --- Bankkonten, FinTS & Abgleich (Paket bank) --- */
.bank-notes { margin-bottom: 22px; }
.bank-accounts { margin-top: -6px; }
.bank-pick { display: inline-flex; align-items: center; flex: none; }
.bank-pick input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; position: static; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none; accent-color: var(--a-solid); cursor: pointer; }
.bank-pick input[type=checkbox]::before { content: none; }
.bank-pick input[type=checkbox]:checked { background: none; }
.bank-best { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--a-deep); font-weight: 700; font-size: 12.5px; }
.bank-best .icon { width: 14px; height: 14px; }
.bank-bulk { gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px; border-radius: var(--r-m); background: var(--paper-2); }
.bank-bulk select { width: auto; max-width: 100%; }
.bank-sugg { gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 0; border-bottom: 1.5px dashed var(--line-2); }
.bank-sugg:last-of-type { border-bottom: 0; }
.bank-sugg form { margin: 0; }
.bank-ticks { margin: 8px 0; }
.bank-ticks label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.bank-preview tr.is-excluded td { opacity: .55; }
.bank-preview tr.is-excluded td.actions, .bank-preview tr.is-excluded td[data-label="Status"] { opacity: 1; }
.split-rows { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.split-row { padding: 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r-m); }
.bank-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.bank-account-card { display: grid; gap: 10px; color: var(--ink); text-decoration: none; }
.bank-account-card:hover { text-decoration: none; }
.bank-account-top { display: flex; gap: 12px; align-items: center; }
.bank-account-top img { width: 44px; height: auto; flex: none; }
.bank-account-top span { display: grid; min-width: 0; }
.bank-account-top strong { overflow-wrap: anywhere; }
.bank-account-balance { font-family: var(--font-display); font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bank-account-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.bank-account-actions { gap: 8px; flex-wrap: wrap; }
.bank-account-actions form { margin: 0; }
.bank-chart { margin-bottom: 16px; }
.bank-spark { display: block; width: 100%; height: 90px; color: var(--a-solid); }
.bank-conn, .bank-link { gap: 10px; flex-wrap: wrap; align-items: center; }
.bank-link select { width: auto; max-width: 100%; }
.bank-challenge { padding: 12px 14px; border-radius: var(--r-s); background: var(--paper-2); overflow-wrap: anywhere; }
.bank-diff-notes { padding-left: 1.1rem; margin: 10px 0; display: grid; gap: 4px; }
.inline-form { display: inline; margin: 0; }
.field[hidden], .bank-pick[hidden] { display: none; }
.bank-expense-panel { margin-top: 16px; }
@media (max-width: 700px) {
.bank-account-grid { grid-template-columns: minmax(0, 1fr); }
.bank-sugg > .grow { flex-basis: 100%; }
.bank-bulk input.grow { flex-basis: 100%; }
.bank-account-balance { font-size: 24px; }
}
/* --- Belege & Ausgaben --- */
.bl-subnav { margin-top: -6px; }
.bl-subnav a { gap: 7px; }
.bl-subnav .icon { width: 17px; height: 17px; }
.bl-subnav .mi-count { margin-left: 2px; }
.bl-filter { width: min(560px, calc(100vw - 32px)); }
.bl-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 16px; }
.bl-chip { gap: 2px; padding-right: 2px; }
.bl-chip a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.bl-chip .icon { width: 14px; height: 14px; }
.bl-chip form { margin: 0; }
.bl-chip .icon-btn { width: 24px; height: 24px; }
.bl-savefilter { display: flex; gap: 6px; align-items: center; }
.bl-savefilter input { height: 32px; min-width: 0; width: 200px; }
table.list .bl-check { width: 64px; text-align: center; }
.bl-icon .icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--a-deep); }
.bl-bulk { margin-top: 14px; }
.bl-bulk-go { align-self: end; }
.bl-fx-options { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bl-fx-options li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); }
.bl-fx-options form { margin: 0; }
.bl-attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-checks h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h3); }
.bl-check-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.bl-check-list li { display: grid; gap: 2px; padding: 9px 12px; border-radius: var(--r-s); border-left: 4px solid var(--line-2); background: var(--paper-2); }
.bl-check-list li span { color: var(--ink-2); font-size: 14px; }
.bl-check-list .bl-check-warn { border-left-color: var(--coral-solid); background: var(--coral); }
.bl-check-list .bl-check-warn span, .bl-check-list .bl-check-warn strong { color: var(--coral-deep); }
.bl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.bl-actions details { flex: 1 1 100%; }
.bl-lines { display: grid; gap: 10px; margin-top: 12px; }
.bl-line { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-s); background: var(--card); }
.bl-line-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.bl-line-grid > .field:nth-child(-n+2) { grid-column: span 6; }
.bl-line-grid > .field:nth-child(3) { grid-column: span 3; }
.bl-line-grid > .field:nth-child(4) { grid-column: span 5; }
.bl-line-grid > .field:nth-child(5) { grid-column: span 4; }
.bl-line-grid > .bl-line-del { grid-column: 1 / -1; justify-self: end; }
.bl-line-del .toggle-row { padding: 0; gap: 10px; }
.bl-cat-help { padding: 10px 12px; border-radius: var(--r-s); background: var(--a); color: var(--a-deep); }
.bl-cat-help:empty { display: none; }
.bl-cat-help p { margin: 4px 0; color: var(--ink); }
.bl-cat-help small { color: var(--ink-2); }
.bl-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.bl-split .icon { width: 18px; height: 18px; color: var(--a-deep); }
.bl-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.bl-row-actions form, .bl-inline-upload { margin: 0; }
.bl-warn { display: block; color: var(--coral-deep); font-weight: 650; }
.bl-giro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; }
.bl-qr { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: var(--r-s); border: 2px solid var(--print-ink); }
.bl-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.bl-cat { display: grid; gap: 8px; align-content: start; }
.bl-cat.is-archived { opacity: .65; }
.bl-cat-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bl-cat-head h2 { font-size: var(--fs-h3); margin: 0; }
.bl-cat p { margin: 0; }
.bl-cat-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-cat .row form { margin: 0; }
.bl-bank-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-bank-actions .small-note { flex: 1 1 100%; margin: 0; }
.bl-bank-actions form { margin: 0; }
@media (max-width: 700px) {
.bl-line-grid > .field:nth-child(-n+2) { grid-column: 1 / -1; }
.bl-line-grid > .field:nth-child(3) { grid-column: 1 / -1; }
.bl-line-grid > .field:nth-child(4), .bl-line-grid > .field:nth-child(5) { grid-column: span 6; }
.bl-fx-options li { grid-template-columns: minmax(0, 1fr) auto; }
.bl-fx-options li form { grid-column: 1 / -1; }
.bl-giro { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.bl-savefilter input { width: 100%; }
.bl-savefilter { flex: 1 1 100%; }
.bl-row-actions { justify-content: flex-start; }
}
/* --- Buchhaltung (Anlagen, Reisen, Homeoffice, Kassenbuch, Journal) ---------------------------------- */
.bk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0 0 28px; }
.bk-tiles .qtile { min-width: 0; }
.bk-inline { display: inline; margin: 0 0 0 .4rem; }
.bk-subrow > td { padding-top: 0; }
table.list tr.is-reversed td { color: var(--ink-3); }
table.list tr.is-reversed td strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-storno { margin-top: .35rem; font-size: .88rem; }
.bk-storno input { min-width: 0; flex: 1 1 10rem; }
/* Gestellte Mahlzeiten, Monate und Kalendertage: Kästchen statt Schalter (Eingabe bleibt ein echtes Kontrollkästchen) */
.bk-meals, .bk-months { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-meal, .bk-month, .bk-day { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bk-meal input[type=checkbox], .bk-month input[type=checkbox], .bk-day input[type=checkbox],
.bk-meal input[type=checkbox]:disabled, .bk-day input[type=checkbox]:disabled { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.bk-meal input::before, .bk-month input::before, .bk-day input::before { display: none; }
.bk-meal span, .bk-month span { padding: .3rem .7rem; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--card); font-size: .86rem; font-weight: 600; transition: background .15s var(--ease-out), border-color .15s var(--ease-out); }
.bk-meal:has(input:checked) span, .bk-month:has(input:checked) span { background: var(--st); border-color: var(--print-ink); color: var(--print-ink); }
.bk-days select { min-width: 10rem; max-width: 16rem; }
.bk-meal:has(input:focus-visible) span, .bk-month:has(input:focus-visible) span, .bk-day:has(input:focus-visible) span { outline: 3px solid var(--focus); outline-offset: 2px; }
.bk-meal:has(input:disabled), .bk-day:has(input:disabled) { cursor: default; }
.bk-meal:has(input:disabled) span { opacity: .75; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.bk-cal { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); scroll-margin-top: 90px; }
.bk-cal.is-room { background: var(--paper-2); }
.bk-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bk-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.bk-dow { font-size: .72rem; font-weight: 700; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.bk-day { aspect-ratio: 1; min-height: 30px; }
.bk-day span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 9px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.bk-day.is-weekend span { color: var(--ink-3); }
.bk-day:hover span { background: var(--paper-3); }
.bk-day:has(input:checked) span { background: var(--a-solid); color: var(--print-ink); font-weight: 700; }
.bk-day:has(input:disabled) span { opacity: .35; }
.bk-day.is-out { visibility: hidden; }
.bk-cal .btn { justify-self: start; }
/* Kassensturz: Zählprotokoll */
.bk-denoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.bk-denom { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.bk-denom input { width: 100%; min-width: 0; }
.bk-count-total { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bk-count-total:empty { display: none; }
.bk-journal td, .bk-journal th { white-space: nowrap; }
.bk-journal td[data-label="Text"] { white-space: normal; min-width: 14rem; }
@media (max-width: 700px) {
.bk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-cal-grid { grid-template-columns: minmax(0, 1fr); }
.bk-denoms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-journal td, .bk-journal th { white-space: normal; }
.bk-journal td[data-label="Text"] { min-width: 0; }
.bk-storno form { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .bk-meal span, .bk-month span { transition: none; } }
/* --- Umsatzsteuer & Steuer-Cockpit (ustcockpit) ---------------------------------------- */
.cockpit-nav .icon { width: 18px; height: 18px; margin-right: 6px; }
.cockpit-nav .n { margin-left: 6px; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--st); color: var(--print-ink); font-size: 12px; font-weight: 800; text-align: center; }
.cockpit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 22px; }
.cockpit-cards > .section { margin: 0; }
.cockpit-cards h2 { font-family: var(--font-display); }
.check-summary { padding: 12px 14px; border-radius: var(--r-s); border: 2px solid var(--print-ink); background: var(--st-mint); color: var(--print-ink); }
.check-summary.is-warn { background: var(--st-butter); border-style: dashed; }
.check-summary.is-error { background: var(--st-coral); }
.check-summary .checklist li { font-weight: 600; }
.check-summary a { color: var(--print-ink); }
.ack-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 14px; cursor: pointer; }
.ack-row input { margin-top: 3px; flex: none; }
.pay-box { display: grid; gap: 14px; margin: 0 0 14px; }
.pay-box .qr img { width: 180px; height: 180px; }
.bank-pick { border: 1.5px dashed var(--line-2); border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 8px; }
.bank-pick legend { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0 4px; }
.status-panel details.reopen > summary { list-style: none; cursor: pointer; }
.status-panel details.reopen > summary::-webkit-details-marker { display: none; }
.annual-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.annual-steps a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 700; text-decoration: none; }
.annual-steps a:hover { background: var(--paper-3); }
.annual-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--st); color: var(--print-ink); border: 1.5px solid var(--print-ink); font-size: 12px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1.5px dashed var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-item p { margin: 4px 0 0; font-size: 14px; }
.letter-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; background: var(--paper-2); border-radius: var(--r-s); padding: 14px 16px; margin: 0; }
.tip-card.is-note { border-style: dashed; }
.tip-card .row form { display: inline-flex; gap: 6px; margin: 0; }
table.compare tr.sum td { border-top: 2px solid var(--line-2); }
body[data-section="steuern"] .doc-head h1 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 700px) {
.check-item { grid-template-columns: minmax(0, 1fr); }
.check-item .btn { justify-self: start; }
.cockpit-cards { grid-template-columns: minmax(0, 1fr); }
.pay-box .qr img { width: 160px; height: 160px; }
.annual-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
/* --- Jahreserklärungen & ELSTER (Paket erklaerungen) ------------------------------
Gruppenüberschriften der Ausfüllhilfe, Filter im ELSTER-Verlauf, Zusatzangaben je Kind. */
.kz-group { margin: 1.1rem 0 .4rem; font-size: var(--fs-h3, 1.05rem); color: var(--a-deep, var(--ink)); }
.kz-group:first-of-type { margin-top: .2rem; }
.elster-year { display: block; margin-top: .2rem; font-size: .76rem; }
.elster-filter { flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.elster-filter .field { min-width: 0; }
.declarations td[data-m="s"] .badge { white-space: nowrap; }
.tax-row .kind-more { margin-top: .2rem; }
.tax-row .kind-more > summary { cursor: pointer; font-weight: 600; }
.kind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .8rem; margin-top: .7rem; }
.kind-grid .wide-all { grid-column: 1 / -1; }
form.inline { display: inline; margin-left: .4rem; }
@media (max-width: 700px) {
.kind-grid { grid-template-columns: minmax(0, 1fr); }
.elster-filter .field, .elster-filter select { width: 100%; }
}
/* --- Startseite & Auswertungen --- */
/* Arbeitsablauf je Voranmeldungszeitraum (Startseite): nutzt .trail aus dem Design-System, 6 bis 8 Schritte */
.flow-card { padding: 22px 26px 20px; }
.flow-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 22px; margin-bottom: 20px; }
.flow-head > div { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.flow-head h2 { font-size: 24px; margin-top: 2px; }
.flow-meta { margin: 4px 0 10px; font-size: 14px; color: var(--ink-2); }
.flow-trail.steps-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flow-trail.steps-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.flow-trail.steps-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.flow-trail.steps-6::before { left: 8.33%; right: 8.33%; }
.flow-trail.steps-7::before { left: 7.14%; right: 7.14%; }
.flow-trail.steps-8::before { left: 6.25%; right: 6.25%; }
.flow-trail li { padding: 0 3px; }
.flow-trail .s { margin-top: -2px; overflow-wrap: anywhere; }
.flow-action { margin: 4px 0 0; }
.flow-action .btn { height: auto; min-height: 34px; padding: 6px 10px; font-size: 12.5px; line-height: 1.2; white-space: normal; }
.flow-done { margin: -6px 0 14px; }
.flow-notes { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--line-2); }
.flow-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.flow-note .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--a-deep); }
.flow-note.warn .icon { color: var(--coral-deep); }
.flow-note a { font-weight: 750; }
/* Verlauf auf der Startseite */
.trend-tabs { margin: 0 0 6px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.trend-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--a-deep) 30%, transparent); }
.trend-kpis div { min-width: 0; }
.trend-kpis dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a-deep); }
.trend-kpis dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 780; font-size: 18px; overflow-wrap: anywhere; }
.trend-years { margin: 10px 0 0; font-size: 13.5px; }
.trend-years a { font-weight: 750; color: var(--a-deep); }
/* Auswertungsseiten: Unterreiter, Zeitraumwahl */
.reports-nav { margin-bottom: 16px; }
.period-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; margin: 0 0 18px; }
.period-bar .tabs { margin: 0; }
.period-more { flex: 1 1 100%; }
.period-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 8px; padding: 14px 16px; background: var(--paper-2); border-radius: var(--r-m); }
.period-form .field { margin: 0; min-width: 0; flex: 0 1 170px; }
.period-form .btn { margin-bottom: 2px; }
.period-form [data-when][hidden] { display: none; }
.view-tabs { margin-bottom: 18px; }
.head-total { font-family: var(--font-display); font-weight: 800; font-size: 22px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Ranglisten mit Balken */
.rank-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rank-cell > a, .rank-cell > strong { color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
.rank-cell small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.rank-table td[data-m="t"] { min-width: 220px; }
.hbar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; max-width: 340px; }
.hbar i { display: block; height: 100%; border-radius: 999px; background: var(--a-solid); }
.budget-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.budget-cell small, .block-note { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.budget-list { margin: 0; }
.stat-grid { align-items: start; }
.report-tiles { margin-bottom: 8px; }
.report-tile { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; margin: 0; }
.report-tile .doodle { width: 44px; height: 44px; }
.report-tile strong { font-family: var(--font-display); font-size: 19px; }
.report-tile span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
/* Balkendiagramme (SVG) */
.chart.bars .bar { stroke: var(--print-ink); stroke-width: 1.2; }
.chart .bar-in { fill: var(--mint-solid); }
.chart .bar-out { fill: var(--coral-solid); }
.chart .bar-cur { fill: var(--a-solid); }
.chart .bar-prev { fill: var(--paper-3); stroke-dasharray: 3 3; }
.legend .sw { width: 14px; height: 12px; border: 1.5px solid var(--print-ink); border-radius: 3px; border-top-width: 1.5px; }
.legend .sw-in { background: var(--mint-solid); } .legend .sw-out { background: var(--coral-solid); }
.legend .sw-cur { background: var(--a-solid); } .legend .sw-prev { background: var(--paper-3); border-style: dashed; }
/* BWA und EÜR */
.bwa-table td:first-child { min-width: 220px; }
.bwa-table tr.bwa-sum td { font-weight: 800; background: color-mix(in srgb, var(--a) 45%, transparent); }
.bwa-table tr.bwa-result td, tr.bwa-result td { font-family: var(--font-display); font-weight: 800; font-size: 16px; border-top: 2px solid var(--ink); }
.bwa-kz { display: block; font-size: 12px; color: var(--ink-3); font-weight: 650; margin-top: 2px; }
.bwa-kz a { color: var(--a-deep); }
.euer-kz-table td:first-child a { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 6px; border-radius: 9px; background: var(--paper-2);
color: var(--ink); font-weight: 800; font-size: 13px; text-decoration: none; transition: background-color .2s; }
.euer-kz-table td:first-child a:hover { background: var(--a); }
/* Liquidität */
td.num.out { color: var(--coral-deep); }
td.num.in { color: var(--mint-deep); }
tr.is-muted td { opacity: .55; }
@media (max-width: 900px) {
.flow-trail .s { display: block; }
}
@media (max-width: 700px) {
.flow-card { padding: 18px; }
.flow-trail, .flow-trail.steps-6, .flow-trail.steps-7, .flow-trail.steps-8 { grid-template-columns: minmax(0, 1fr); gap: 0; }
.flow-trail::before, .flow-trail::after { display: none; }
.flow-trail li { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n t" "n s" "n f"; align-items: center; text-align: left; gap: 0 12px; padding: 8px 0; }
.flow-trail li + li { border-top: 1.5px dashed var(--line-2); }
.flow-trail li .node { grid-area: n; width: 40px; height: 40px; }
.flow-trail li.now .node { width: 44px; height: 44px; margin: 0; }
.flow-trail li .t { grid-area: t; font-size: 14.5px; }
.flow-trail li .s { grid-area: s; margin: 0; font-size: 12.5px; }
.flow-trail .flow-action { grid-area: f; margin-top: 6px; }
.trend-kpis dd { font-size: 15.5px; }
.period-form .field { flex: 1 1 140px; }
.rank-table td[data-m="t"] { min-width: 0; }
.hbar { max-width: none; }
.head-total { font-size: 18px; }
.bwa-table td:first-child { min-width: 0; }
.bwa-table tr.bwa-sum td { background: none; }
.bwa-table td:first-child, .bwa-rec td:first-child { justify-content: flex-start; text-align: left; font-weight: 750; }
}
/* --- KI-Assistent & MCP-Server --- */
.composer-mic.is-recording { background: var(--coral-solid); color: var(--print-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral-solid) 35%, transparent); }
.composer-mic.is-recording .icon { animation: ki-pulse 1.1s ease-in-out infinite; }
@keyframes ki-pulse { 50% { transform: scale(1.15); } }
.ki-side-links { display: grid; gap: 2px; margin-top: .6rem; }
.ki-side-links a { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: var(--radius); color: var(--text); font-size: .88rem; font-weight: 600; }
.ki-side-links a:hover { background: var(--hover); text-decoration: none; }
.ki-side-links .icon { width: 17px; height: 17px; color: var(--a-deep); }
.ki-hint-teaser { margin: 1.5rem 0 0; padding: 18px 20px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.ki-hint-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ki-hint-mini li { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ki-hint-mini li > :last-child { min-width: 0; overflow-wrap: anywhere; }
.ki-hints { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.ki-hint { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--sky-solid); border-radius: var(--r-l); box-shadow: var(--shadow-card); padding: 18px 20px; display: grid; gap: 10px; scroll-margin-top: 90px; }
.ki-hint.sev-warn { border-left-color: var(--butter-solid); }
.ki-hint.sev-danger { border-left-color: var(--coral-solid); }
.ki-hint-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ki-hint-head h2 { font-size: var(--fs-h3); margin: 0; overflow-wrap: anywhere; }
.ki-hint p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.ki-hint-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.letter-card { gap: .8rem; }
.letter-summary { margin: 0; line-height: 1.55; }
.letter-apply { display: grid; gap: .8rem; }
.ki-checks { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.ki-checks legend { font-weight: 750; font-size: .86rem; margin-bottom: 4px; color: var(--ink-2); }
.ki-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: var(--r-s); background: var(--paper-2); cursor: pointer; min-width: 0; }
.ki-check input { flex: none; }
.ki-check > span:first-of-type { flex: 1; min-width: 10rem; font-weight: 600; }
.ki-change { font-size: .86rem; overflow-wrap: anywhere; }
.ki-change s { color: var(--ink-3); }
.ki-notes { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: var(--ink-2); }
.ki-deadlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ki-deadlines li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-m); background: var(--paper-2); }
.ki-deadlines li.is-overdue { background: color-mix(in srgb, var(--coral) 70%, transparent); box-shadow: inset 5px 0 0 var(--coral-solid); }
.ki-date { display: grid; place-items: center; padding: 6px 0; border-radius: var(--r-s); background: var(--sticker); border: 2px solid var(--print-ink); color: var(--print-ink); line-height: 1.05; text-align: center; }
.ki-date b { font-family: var(--font-display); font-size: 22px; }
.ki-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ki-deadline-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ki-deadline-text strong { overflow-wrap: anywhere; }
.ki-deadline-text > span { font-size: .84rem; }
.ki-tax-deadlines .card-head .overline { margin: 0 0 2px; }
.ki-bookings { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 280px; overflow-y: auto; font-size: .82rem; }
.ki-bookings li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ki-bookings .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-token { display: grid; gap: 8px; }
.ki-token-value { display: block; padding: 10px 12px; border-radius: var(--r-s); background: var(--sticker); color: var(--print-ink); border: 2px dashed var(--print-ink); font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; user-select: all; }
.ki-token .btn { justify-self: start; }
.ki-rule { border: 0; border-top: 1.5px dashed var(--line); margin: 4px 0; }
.ki-steps { margin-top: 14px; }
.ki-steps code, .settings-section .checklist code { overflow-wrap: anywhere; }
.ki-letter-grid { align-items: start; }
.ki-text-bar { display: flex; justify-content: flex-end; margin-top: 4px; }
.ki-text-menu > .menu-list { right: 0; left: auto; min-width: 14rem; }
.ki-text-menu .menu-list button { width: 100%; text-align: left; }
.ki-text-btn { gap: 4px; font-weight: 750; }
.ki-text-note { display: block; padding: 6px 12px 4px; color: var(--ink-3); font-size: .76rem; line-height: 1.35; }
.ki-text-result { margin-top: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--st-lav); color: var(--print-ink); border: 2px solid var(--print-ink); display: grid; gap: 8px; }
.ki-text-result[hidden] { display: none; }
.ki-text-status { margin: 0; font-size: .84rem; font-weight: 700; }
.ki-text-proposal { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: .92rem; }
@media (max-width: 700px) {
.ki-hint, .ki-hint-teaser { padding: 16px; }
.ki-hint-actions .btn, .ki-hint-actions form { flex: 1 1 auto; }
.ki-hint-actions form .btn { width: 100%; }
.ki-check > span:first-of-type { min-width: 0; flex-basis: calc(100% - 64px); }
.ki-bookings li { grid-template-columns: minmax(0, 1fr) auto; }
.ki-bookings li > span:first-child { grid-column: 1 / -1; color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) { .composer-mic.is-recording .icon { animation: none; } }
/* --- Export, Steuerberater, Archiv & Sicherheit (Paket exportarchiv) ---------------------------------------
Kanzlei (Rückfragen, Prüfliste), GoBD & Archiv, Prüferansicht (/pruefung/), API-Schlüssel. */
.archive-tabs { margin-top: 4px; }
.archive-lock { margin-bottom: 18px; }
.archive-history .timeline li, .kanzlei-panel .timeline li { font-size: 14px; }
.kanzlei-thread li { padding: 14px 0; }
.kanzlei-thread li.from-advisor { padding-left: 14px; border-left: 3px solid var(--a-solid); }
.kanzlei-text { margin: 6px 0 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.kanzlei-panel .row form { margin: 0; }
td.pick { width: 44px; vertical-align: middle; }
td.pick input { width: 20px; height: 20px; }
.invite-scope { margin-top: 18px; }
.invite-scope .row > .field { flex: 1 1 160px; }
.code-block { margin: 0; padding: 12px 14px; background: var(--paper-2); border-radius: var(--r-s); font-family: var(--font-mono); font-size: 13px;
white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
/* Prüferansicht: eigene, schlichte Seite ohne Navigation der App */
.audit-body { min-height: 100vh; background: var(--paper); }
.audit-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
padding: 10px 22px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.audit-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.audit-brand img { width: 44px; height: auto; flex: none; }
.audit-brand span { display: grid; min-width: 0; }
.audit-brand strong { font-family: var(--font-display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-brand small { color: var(--a-deep); font-weight: 750; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.audit-actions { display: flex; gap: 8px; align-items: center; }
.audit-actions form { margin: 0; }
.audit-content { max-width: 1280px; margin: 0 auto; padding: 24px 22px 48px; }
.audit-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.audit-grid th, .audit-grid td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.audit-grid td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.audit-grid th a { color: var(--ink); font-weight: 750; text-decoration: none; }
.audit-grid th a:hover { text-decoration: underline; }
.audit-grid tbody tr:hover { background: var(--paper-2); }
@media (max-width: 700px) {
.audit-bar { padding: 10px 16px; }
.audit-content { padding: 18px 16px 40px; }
.audit-actions .btn span { display: none; }
.kanzlei-thread li.from-advisor { padding-left: 10px; }
td.pick { width: 34px; }
}
/* --- Plattform: Benachrichtigungen, Suche, Hilfe, Team, Firmenwechsel --- */
/* Kopfzeile: Suche als Pille (⌘K), Hilfe, Glocke mit Zähler */
.search-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 13px; border-radius: 14px; background: var(--paper-2);
border: 1.5px solid var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 650; text-decoration: none; min-width: 0; transition: background-color .2s, border-color .2s; }
.search-pill:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-3); }
.search-pill .icon { width: 18px; height: 18px; flex: none; }
.search-pill-text { min-width: 7.5rem; }
.notif-bell { position: relative; }
.notif-bell > summary { position: relative; }
.notif-count { position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
background: var(--st-coral); color: var(--print-ink); border: 1.5px solid var(--print-ink); font-size: 10.5px; font-weight: 850; line-height: 1; pointer-events: none; }
.notif-count[hidden] { display: none; }
.notif-menu { width: min(25rem, calc(100vw - 2rem)); padding: 10px; }
.notif-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1.5px dashed var(--line-2); }
.notif-menu-head strong { font-family: var(--font-display); font-size: 17px; }
.notif-menu-head form { margin: 0; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 13px; color: var(--ink); text-decoration: none; }
.notif-item:hover { background: var(--paper-2); }
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-text b { font-weight: 720; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.notif-text small { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.notif-text .notif-when { color: var(--ink-3); }
.notif-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; }
.is-unread > .notif-dot { border-color: var(--print-ink); background: var(--sky-solid); }
.is-unread.lvl-warn > .notif-dot { background: var(--butter-solid); }
.is-unread.lvl-danger > .notif-dot { background: var(--coral-solid); }
.is-unread.lvl-success > .notif-dot { background: var(--mint-solid); }
.notif-item:not(.is-unread) b { font-weight: 600; color: var(--ink-2); }
.notif-empty { margin: 8px; color: var(--ink-2); font-size: 14px; }
.notif-menu-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 8px 2px; margin-top: 4px; border-top: 1.5px dashed var(--line-2); font-size: 14px; font-weight: 700; }
/* Benachrichtigungszentrale */
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px 18px; border-radius: var(--r-m);
background: var(--card); box-shadow: var(--shadow-card); border: 1.5px solid var(--line); }
.notif-row.is-unread { border-color: var(--line-2); background: color-mix(in srgb, var(--card) 80%, var(--a)); }
.notif-row .notif-text a { color: var(--ink); text-decoration: none; }
.notif-row .notif-text a:hover b { text-decoration: underline; }
.notif-row .notif-text p { margin: 2px 0 4px; color: var(--ink-2); }
.notif-act { margin: 0; }
.channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.channel-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.channel-list li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-matrix { display: grid; gap: 0; }
.nm-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 84px); gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.nm-row:first-child { border-top: 0; }
.nm-head { padding-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nm-head span:not(:first-child), .nm-cell { text-align: center; justify-self: center; }
.nm-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Firmenwechsel in der Seitenleiste */
.tenant-menu { flex: 1; min-width: 0; }
.tenant-menu > summary.tenant { list-style: none; cursor: pointer; }
.tenant-menu > summary.tenant::-webkit-details-marker { display: none; }
.tenant-chevron { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .2s var(--ease-pop); }
.tenant-menu[open] .tenant-chevron { transform: rotate(180deg); }
.tenant-menu > .tenant-list { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; width: min(15rem, calc(100vw - 2rem)); min-width: 0; }
.tenant-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; border-radius: 13px; text-align: left; }
.menu-list > .tenant-option.is-current { background: var(--paper-2); }
.tenant-option .icon { margin-left: auto; color: var(--mint-deep); }
.tenant-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tenant-option-text b { font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-option-text small { color: var(--ink-2); font-size: 12.5px; }
.tenant-mark.small { width: 30px; height: 30px; border-radius: 10px; font-size: 11.5px; }
/* Befehlspalette (⌘K) */
.cmdk { width: min(640px, calc(100vw - 32px)); max-height: min(78vh, 680px); margin: 10vh auto auto; padding: 0; border: 2px solid var(--print-ink); border-radius: var(--r-l);
background: var(--card); color: var(--ink); box-shadow: 0 6px 0 var(--print-ink), var(--shadow-pop); overflow: hidden; }
.cmdk[open] { display: flex; flex-direction: column; animation: pop .25s var(--ease-pop) both; }
.cmdk::backdrop { background: rgba(20, 15, 8, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmdk-form { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1.5px dashed var(--line-2); margin: 0; }
.cmdk-form > .icon { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.cmdk-form input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; font-size: 18px; font-weight: 600; padding: 8px 0; height: auto; }
.cmdk-form input:focus { outline: none; box-shadow: none; }
.cmdk-results { overflow-y: auto; padding: 6px 8px 10px; }
.cmdk-results:empty { display: none; }
.cmdk-group h3 { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmdk-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.cmdk-item b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item small { grid-column: 1; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cmdk-meta { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.cmdk-item[aria-selected="true"], .cmdk-item:hover { background: var(--a); }
.cmdk-more { display: block; padding: 6px 10px; font-size: 13px; font-weight: 700; }
.cmdk-hint { margin: 0; padding: 10px 16px 14px; color: var(--ink-3); font-size: 13px; }
.cmdk-hint kbd { margin: 0 2px; }
.cmdk-empty { padding: 14px 10px; color: var(--ink-2); }
/* Einführungstour */
.tour { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: min(390px, calc(100vw - 32px)); }
.tour-card { position: relative; padding: 22px 22px 18px; border-radius: var(--r-l); background: var(--st-butter); color: var(--print-ink); border: 2px solid var(--print-ink);
box-shadow: 0 5px 0 var(--print-ink), var(--shadow-pop); animation: pop .35s var(--ease-pop) both; }
.tour-card .overline { color: var(--print-ink); opacity: .75; margin: 0 0 6px; }
.tour-face { position: absolute; top: -34px; right: 18px; width: 64px; height: auto; }
.tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tour-steps h2 { font-size: 20px; margin: 0 0 4px; color: var(--print-ink); }
.tour-steps p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.tour-steps kbd { opacity: .8; }
.tour.is-stepping [data-tour-step]:not(.is-active) { display: none; }
.tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.tour-actions form { margin: 0; }
.tour-actions [hidden] { display: none; }
/* „?“-Erklärung an Feldern und Überschriften */
.help-pop { position: relative; display: inline-block; vertical-align: middle; }
.help-pop > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 3px 6px; }
.help-pop > summary::-webkit-details-marker { display: none; }
.help-pop > summary:hover { color: var(--ink); background: var(--paper-2); }
.help-pop > summary .icon { width: 18px; height: 18px; }
.help-pop-body { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(20rem, calc(100vw - 2.5rem)); padding: 14px 16px; border-radius: 16px; background: var(--card);
border: 2px solid var(--print-ink); box-shadow: 0 4px 0 var(--print-ink), var(--shadow-pop); font-size: 14px; line-height: 1.45; }
.help-pop-body p { margin: 4px 0 8px; color: var(--ink-2); }
.category-hint { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.category-hint a { font-weight: 700; margin-left: 4px; }
.context-hint { margin-top: 10px; }
/* Suche und Hilfe-Center */
.search-big { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; max-width: 760px; }
.search-big .search-field { flex: 1; min-width: 0; }
.search-big input[type=search] { max-width: none; width: 100%; }
.hit-list { list-style: none; margin: 0; padding: 0; }
.hit-list li + li { border-top: 1px solid var(--line); }
.hit-list a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; color: var(--ink); text-decoration: none; border-radius: 10px; }
.hit-list a:hover { background: var(--paper-2); }
.hit-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hit-title { font-weight: 720; overflow-wrap: anywhere; }
.hit-main small { overflow-wrap: anywhere; }
.hit-meta { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-group .card-head h2 { display: flex; align-items: center; gap: 8px; }
.search-group .card-head h2 .icon { width: 20px; height: 20px; color: var(--a-deep); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-bottom: 22px; }
.help-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.help-links a { font-weight: 650; }
.help-layout { align-items: start; }
.help-article { font-size: 16px; line-height: 1.6; min-width: 0; }
.help-article h2 { font-size: var(--fs-h2); margin: 1.4em 0 .4em; }
.help-article h2:first-child { margin-top: 0; }
.help-article table { width: 100%; border-collapse: collapse; margin: .8em 0; font-size: 15px; display: block; overflow-x: auto; }
.help-article th, .help-article td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.help-article blockquote { margin: 1.2em 0 0; padding: 10px 14px; border-left: 4px solid var(--a-solid); background: var(--paper-2); border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: 14.5px; }
.help-article blockquote p { margin: 0; }
.help-meta { margin-top: 24px; padding-top: 14px; border-top: 1.5px dashed var(--line-2); font-size: 14px; }
.help-sources { padding-left: 1.1rem; overflow-wrap: anywhere; color: var(--ink-2); }
.help-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Team: Rechte als Sticker in der Tabelle */
.team-level { white-space: nowrap; }
/* Mitarbeit: Bereiche ohne Leserecht in der Navigation ausblenden (gesperrt ist serverseitig) */
.member-no-verkauf .nav-group.area-mint, .member-no-geld .nav-group.area-sky, .member-no-ausgaben .nav-group.area-coral,
.member-no-steuern .nav-group.area-lav, .member-no-auswertung .nav-group.area-butter, .role-member .nav-group.nav-bottom { display: none; }
.member-no-verkauf .menu-list a[href*="/rechnungen/"], .member-no-verkauf .menu-list a[href*="/angebote/"], .member-no-verkauf .menu-list a[href*="/kunden/"],
.member-no-ausgaben .menu-list a[href*="/ausgaben/"], .member-no-geld .menu-list a[href*="/zahlungen/"] { display: none; }
@media (max-width: 1180px) { .search-pill-text { min-width: 0; } .search-pill kbd { display: none; } }
@media (max-width: 900px) {
.search-pill { width: 42px; height: 42px; padding: 0; justify-content: center; border: 0; background: none; color: var(--ink-2); }
.search-pill-text, .search-pill kbd, .help-btn { display: none; }
.tour { left: 16px; right: 16px; width: auto; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
.help-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.notif-row { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
.notif-act { grid-column: 2; }
.channel-list li { grid-template-columns: auto minmax(0, 1fr); }
.channel-list li .badge { grid-column: 2; justify-self: start; }
.nm-head { display: none; }
.nm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nm-label { grid-column: 1 / -1; }
.nm-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nm-cell::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.cmdk { margin-top: 12px; max-height: calc(100vh - 24px); }
.search-big { flex-wrap: wrap; }
.search-big .btn { width: 100%; }
.hit-list a { flex-wrap: wrap; }
.team-level { white-space: normal; }
.help-article table { display: block; overflow: visible; }
.help-article thead { display: none; }
.help-article tbody, .help-article tr, .help-article td { display: block; }
.help-article tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
.help-article td { border: 0; padding: 2px 0; }
.help-article td:first-child { font-weight: 720; }
.channel-list strong { overflow-wrap: anywhere; }
}
html.iosapp .tour { bottom: calc(16px + var(--app-inset-bottom, env(safe-area-inset-bottom))); }
@media (prefers-reduced-motion: reduce) { .cmdk[open], .tour-card { animation: none; } .tenant-chevron { transition: none; } }
/* --- Nahtstellen Verkauf --- */
.vat-state-box.is-needed { border-left: 4px solid var(--coral-solid); padding-left: 12px; }
.vat-state-box .vat-state { margin: 6px 0; }
.ed-line-source { margin: 4px 0 0; padding: 0 .3em; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-delivery-note { margin: 14px 0; }
@media (max-width: 700px) {
.ed-line-source { padding: 0; }
}
/* --- Kontor für Freunde (Paket freunde) --- */
.legal-text { max-width: 72ch; font-size: 15px; line-height: 1.6; }
.legal-text h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 22px 0 6px; }
.legal-text h3 { font-size: 15.5px; font-weight: 760; margin: 18px 0 4px; }
.legal-text ul { padding-left: 1.2em; margin: 6px 0 10px; }
.legal-text li { margin: 4px 0; }
.legal-text p { margin: 6px 0 10px; overflow-wrap: anywhere; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; }
.signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.sign-line { border-bottom: 1.5px solid var(--ink); height: 40px; margin: 0; }
.quota-cell { min-width: 140px; }
.quota-cell .meter { max-width: 180px; }
.welcome-totp[hidden] { display: none; }
.auth-foot a { color: inherit; }
@media (max-width: 700px) {
.signatures { grid-template-columns: minmax(0, 1fr); }
.quota-cell { min-width: 0; }
.legal-links { flex-direction: column; }
}
/* --- KI pro Nutzer & Remote-MCP (Paket ki2) --- */
.kv-group { border: 0; margin: 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper-2); display: grid; gap: 10px; min-width: 0; }
.kv-group[hidden] { display: none; }
.kv-group legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-weight: 800; font-size: .92rem; color: var(--ink); }
.kv-group .checklist { margin: 0; }
.kv-login { display: grid; gap: 10px; }
.kv-code { font-family: var(--font-display); font-size: 28px; letter-spacing: .12em; text-align: center; justify-self: start; padding: 10px 18px; }
.kv-sub { font-size: var(--fs-h3); margin: 8px 0 0; }
.kv-teaser .row { flex-wrap: wrap; gap: 8px; }
.oa-facts { display: grid; gap: 8px; margin: 0; }
.oa-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 10px; }
.oa-facts dt { font-weight: 750; color: var(--ink-2); font-size: .88rem; }
.oa-facts dd { margin: 0; overflow-wrap: anywhere; }
.oa-host { font-family: var(--mono); font-size: .95rem; }
.ki-check small { flex-basis: 100%; }
.oa-actions { gap: 10px; }
@media (max-width: 700px) {
.oa-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kv-code { font-size: 22px; justify-self: stretch; }
.oa-actions .btn { flex: 1 1 auto; }
}
/* --- UX-Feinschliff & Navigation (Paket ux) --- */
/* Seitenleiste: Suche, Favoriten, auf-/zuklappbare Gruppen, „Weitere“ je Gruppe */
.nav-search { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 12px; border: 1.5px solid var(--line-2); border-radius: 13px;
background: var(--card); color: var(--ink-3); font-size: 14.5px; font-weight: 620; text-decoration: none; transition: border-color .2s, color .2s; }
.nav-search:hover { color: var(--ink); border-color: var(--ink-3); }
.nav-search kbd { margin-left: auto; }
.nav-item { position: relative; }
.nav .nav-item > a { padding-right: 40px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pin { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
border: 0; border-radius: 9px; background: none; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .15s, background-color .2s, color .2s; }
.nav-pin[hidden] { display: none; }
.nav-item:hover .nav-pin, .nav-pin:focus-visible { opacity: 1; }
.nav-pin:hover { background: var(--paper-3); color: var(--ink); }
.nav-pin .icon { width: 16px; height: 16px; vertical-align: 0; }
.nav-pin .pin-on, .nav-pin[aria-pressed="true"] .pin-off { display: none; }
.nav-pin[aria-pressed="true"] .pin-on { display: inline-block; color: var(--a-deep); }
.nav-favorites[hidden] { display: none; }
.nav-favorites .nav-title::before { background: var(--fur); border-radius: 50%; }
details.nav-group { display: block; }
details.nav-group > * + *, .nav-more > * + * { margin-top: 2px; }
details.nav-group > summary.nav-title { list-style: none; cursor: pointer; border-radius: 10px; user-select: none; transition: color .2s, background-color .2s; }
details.nav-group > summary.nav-title::-webkit-details-marker, .nav-more > summary::-webkit-details-marker { display: none; }
details.nav-group > summary.nav-title:hover { color: var(--ink); background: var(--paper-3); }
.nav-chevron { width: 14px; height: 14px; margin-left: auto; transition: transform .2s var(--ease-out), opacity .2s; }
details.nav-group > summary .nav-chevron { opacity: 0; }
details.nav-group > summary:hover .nav-chevron, details.nav-group > summary:focus-visible .nav-chevron,
details.nav-group:not([open]) > summary .nav-chevron { opacity: 1; }
details.nav-group:not([open]) > summary .nav-chevron, .nav-more:not([open]) > summary .nav-chevron { transform: rotate(-90deg); }
.nav-more > summary { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 42px; border-radius: 13px; list-style: none; cursor: pointer;
font-size: 13.5px; font-weight: 700; color: var(--ink-3); transition: background-color .2s, color .2s; }
.nav-more > summary:hover { background: var(--paper-3); color: var(--ink); }
.nav-more-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800;
background: var(--paper-3); color: var(--ink-2); }
.nav-more[open] > summary .nav-more-n { visibility: hidden; }
.nav-more .nav-item > a { min-height: 36px; font-size: 14.5px; }
/* Mehr-Blatt auf dem Handy: Bereiche als Kacheln, Favoriten zuerst */
.more-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; margin: 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom));
overflow-y: auto; border: 0; border-top: 2px solid var(--print-ink); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--paper); color: var(--ink); }
.more-sheet[open] { animation: ux-sheet-up .3s var(--ease-out) both; }
.more-sheet::backdrop { background: rgba(10, 8, 6, .45); }
@keyframes ux-sheet-up { from { transform: translateY(48px); opacity: 0; } }
.more-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; background: var(--paper); }
.more-sheet-head strong { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sheet-search { margin-bottom: 16px; }
.more-sheet .nav-sheet { gap: 18px; }
.more-sheet .nav-sheet .nav-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.more-sheet .nav-sheet .nav-title { grid-column: 1 / -1; padding: 0 2px; }
.more-sheet .nav-sheet a { flex-direction: column; justify-content: center; gap: 7px; min-height: 86px; padding: 10px 6px; text-align: center; border: 1.5px solid var(--line); border-radius: 18px;
background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 720; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.more-sheet .nav-sheet a::before { display: none; }
.more-sheet .nav-sheet a .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border: 1.5px solid var(--print-ink); border-radius: 12px; background: var(--a); color: var(--print-ink); }
.more-sheet .nav-sheet a[aria-current="page"] { border-color: var(--print-ink); background: var(--a); }
.more-sheet .nav-sheet a[aria-current="page"] .icon { background: var(--card); }
.more-sheet .nav-sheet .nav-bottom { margin-top: 0; padding-top: 0; }
.more-sheet-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1.5px dashed var(--line-2); }
@media (min-width: 901px) { .more-sheet { display: none; } }
/* Navigation einstellen */
.nav-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; }
.nav-pick .choice { display: flex; align-items: center; gap: 10px; }
.nav-pick .choice .icon { color: var(--ink-3); }
/* Ein Speichermodell: Stand neben dem Speichern-Knopf */
.save-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.save-state:empty { display: none; }
.save-state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--print-ink); background: var(--paper-3); flex: none; }
.save-state.is-dirty { color: var(--ink); }
.save-state.is-dirty::before { background: var(--st-butter); }
.save-state.is-saved::before { background: var(--st-mint); }
.save-state.is-saving::before { background: var(--st-sky); }
.sticky-actions .save-state { order: 1; }
.form-actions .save-state { margin-left: 4px; }
/* Variablen-Chips (Platzhalter per Klick einfügen) */
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.var-chips button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 1.5px solid var(--line-2); border-radius: 999px;
background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background-color .15s; }
.var-chips button:hover { border-color: var(--print-ink); background: var(--a); }
.var-chips button code { font-size: 11.5px; color: var(--ink-3); background: none; padding: 0; }
.var-chips-note { margin: 4px 0 0; }
/* Zweiteilige Hilfe: allgemein + „bei dir“ */
.help-two .help-mine { margin: 6px 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.help-two .help-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.help-two .help-links:empty { display: none; }
.figure dt .help-pop, .card-head .help-pop { margin-left: 2px; }
.figure dt .help-pop-body { left: 0; right: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* „Das steht an“ als feste Reihenfolge */
.pipeline-meter { margin-top: 10px; }
.pipeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pipeline li { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pipe-dot { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--print-ink);
background: var(--sticker); color: var(--print-ink); font-size: 12px; font-weight: 800; }
.pipe-dot .icon { width: 14px; height: 14px; vertical-align: 0; }
.pipeline .is-done { color: var(--ink-3); }
.pipeline .is-done .pipe-dot { background: var(--st-mint); }
.pipeline .is-open > a:not(.pipe-all) { font-weight: 720; color: var(--ink); }
.pipe-all { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
/* Steuern: Kartenmenü je Pflicht, Vorauszahlungen klar ansagen, „Für wen passt das?“ */
.ob-action { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ob-menu > summary.btn { min-width: 0; width: auto; padding-inline: 8px; }
.ob-menu .menu-list { right: 0; left: auto; min-width: 14rem; }
.ob-menu .menu-list form { margin: 0; }
.pp-table td small { display: block; }
.pp-compare .card-head h2 { display: inline-block; margin-right: 4px; }
.pp-say { flex: 1 1 280px; margin: 0; font-weight: 700; color: var(--ink); }
.pp-say::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--print-ink); background: var(--st-sky); vertical-align: 1px; }
.pp-say.warn::before { background: var(--st-butter); }
.pp-say.danger::before { background: var(--st-coral); }
.pp-say.ok::before { background: var(--st-mint); }
.fit-link { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.fit-link .icon { color: var(--a-deep); }
.step-problems { margin-left: auto; transform: none; }
.audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.audit-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.audit-list li div { display: flex; flex-direction: column; min-width: 0; }
.checks-passed > summary { cursor: pointer; }
.euer-empty td { color: var(--ink-3); }
/* Fehlende Angaben: Sticker mit Sprung zum Feld, Ziel hervorheben */
.missing-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.missing-chips a.badge { text-decoration: none; }
.field:has(:target) { border-radius: var(--r-s); outline: 2.5px dashed var(--coral-solid); outline-offset: 6px; }
/* Belege: Steuerwirkung, Kategorie-Dialog, Ableitungen am Feld, Beispiel */
.tax-effect { margin-top: 14px; }
.tax-effect > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.te-teaser { margin-left: auto; font-size: 13px; font-weight: 750; color: var(--a-deep); }
.te-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 8px; }
.te-tiles > div { padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-m); background: var(--card); }
.te-tiles dt { font-size: 12.5px; font-weight: 750; color: var(--ink-2); }
.te-tiles dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.te-tiles dd small { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.te-tiles .te-saving { background: var(--a); border-color: var(--print-ink); }
.cat-open { margin-top: 6px; }
.cat-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border: 2px solid var(--print-ink); border-radius: var(--r-l); background: var(--paper); color: var(--ink);
box-shadow: 0 5px 0 var(--print-ink), var(--shadow-pop); }
.cat-dialog[open] { display: flex; flex-direction: column; animation: pop .25s var(--ease-pop) both; }
.cat-dialog::backdrop { background: rgba(20, 15, 8, .45); }
.cat-head .icon-btn { font-size: 26px; line-height: 1; }
.cat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; font-family: var(--font-display); font-size: 20px; }
.cat-search { margin: 6px 16px 10px; width: auto; }
.cat-suggest { margin: 0 16px 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--a); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cat-suggest[hidden] { display: none; }
.cat-suggest small { flex-basis: 100%; color: var(--ink-2); }
.cat-body { overflow-y: auto; padding: 0 16px 16px; }
.cat-group h3 { margin: 12px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cat-group[hidden], .cat-card[hidden] { display: none; }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.cat-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-m); background: var(--card); color: var(--ink);
font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s var(--ease-pop); }
.cat-card:hover, .cat-card:focus-visible { border-color: var(--print-ink); transform: translateY(-1px); }
.cat-card[aria-pressed="true"] { border-color: var(--print-ink); background: var(--a); }
.cat-card b { font-weight: 750; }
.cat-card small { font-size: 12px; font-weight: 700; color: var(--a-deep); }
.cat-card span { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.derived { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.derived:empty { display: none; }
.lines-sum.is-ok::before { content: "✓ "; color: var(--mint-deep); }
.lines-sum.is-off { color: var(--coral-deep); }
.bl-line .line-gross { grid-column: 1 / -1; }
.sample-link { margin: 6px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cat-dialog[open], .more-sheet[open] { animation: none; } .cat-card:hover { transform: none; } }
@media (max-width: 700px) {
.audit-list li { grid-template-columns: minmax(0, 1fr); }
.ob-action .ob-menu > summary.btn { width: auto; }
.te-tiles dd { font-size: 19px; }
.cat-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Review: offene Hilfe liegt über den Folgeabschnitten (Seitenkopf isoliert seine Ebenen), Stern auf Touch und als
Favorit sichtbar, Schublade ohne Öffner auf dem Handy aus Tab-Reihenfolge und Vorlesebaum nehmen */
.page-head:has(.help-pop[open]), .section:has(.help-pop[open]) { position: relative; z-index: 15; }
.nav-pin[aria-pressed="true"] { opacity: .7; }
@media (hover: none) { .nav-pin { opacity: .6; } }
@media (max-width: 900px) { html:not(.no-js) .sidebar:not(.open) { visibility: hidden; } }
.more-sheet .nav-sheet a .icon, .more-sheet .nav-sheet a:hover .icon { color: var(--a-deep); } /* lesbar hell und dunkel */
/* --- QA-Durchgang --- */
/* Hinweise und Chips mit festem Butter-Grund: Links in Druckfarbe, sonst im Dunkelmodus hell auf hell */
.tip a { color: inherit; }
.missing-chips a.badge { color: var(--print-ink); }
/* Auf dem Blatt (immer hell) nicht die Farben des Dunkelmodus nehmen */
.pp .ed-delivery-note { color: var(--pp-ink-3); }
.pp .ed-link { color: #0F6B3E; }
/* .ki-checks setzt margin: 0 und verliert damit den Abstand der .stack (Rechte klebte am Feld darüber) */
.stack > * + .ki-checks { margin-top: 16px; }
/* Kennzahlen: Notizen umbrechen (dd.num vererbt nowrap), lange Überschriften wie „Betriebseinnahmen“ trennen */
.figure .note { white-space: normal; }
.figure dt, .figure dd, .stat .k { hyphens: auto; overflow-wrap: break-word; }
/* Offene Menüs im Seitenkopf liegen über den folgenden Karten (der Kopf isoliert seine Ebenen); das Menü am ersten
Knopf klappt nach rechts auf statt über die Seitenleiste */
.page-head:has(.menu[open]) { z-index: 15; }
.page-head .actions > .menu:first-child > .menu-list { left: 0; right: auto; }
/* Belegprüfung: Tastenkürzel hinter die Knöpfe, damit „Bestätigen & ablegen“ neben „Später“ bleibt */
.sticky-actions .mi-keys { order: 3; }
/* Toasts: die Einblend-Animation von .content > * überschrieb translateX(-50%) – Toasts saßen rechts (Handy: abgeschnitten) */
html:not(.no-js) .content > .messages { animation: none; }
@media (max-width: 900px) {
/* Mitlaufender Seitentitel im Fluss zwischen Logo und Knöpfen, statt absolut darunter (überlappte „+“ und Suche) */
.topbar.has-title .topbar-tenant { flex: none; }
.topbar.has-title .topbar-title { position: static; transform: none; flex: 1; min-width: 0; text-align: left; }
}
@media (max-width: 700px) {
/* Menüs im Seitenkopf links an der Aktionszeile ausrichten, sonst ragen sie links aus dem Bildschirm */
.page-head .actions > .menu { position: static; }
.page-head .actions > .menu > .menu-list { left: 0; right: auto; max-width: calc(100vw - 2rem); }
/* Längerer Text in der Statusspalte: eigene Zeile unter dem Titel statt einer schmalen Titelspalte */
table.list td[data-m="s"].m-wide { grid-area: auto; grid-column: 1 / -1; text-align: left; }
/* Lange Kategorienamen in der Lieferantenliste kürzen, statt den Namen zu verdrängen */
table.list td.cat-cell { max-width: 42vw; }
table.list td.cat-cell .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 22px; }
}
/* --- Steuern vervollständigen (Paket steuer4) --- */
/* Steuertipps am Beleg (taxes/partials/receipt_tips.html) */
.receipt-tips h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h3); }
.receipt-tip-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.receipt-tip { padding: 12px 14px; border-radius: var(--r-s); background: var(--paper-2); border-left: 4px solid var(--a-solid); }
.receipt-tip p { margin: 4px 0 8px; color: var(--ink-2); font-size: 14px; }
.receipt-tip.is-warnung { border-left-color: var(--coral-solid); background: var(--coral); }
.receipt-tip.is-warnung strong, .receipt-tip.is-warnung p { color: var(--coral-deep); }
.receipt-tip.is-hinweis { border-left-style: dashed; }
.receipt-tip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.receipt-tip-actions form { margin: 0; }
.line-items small { display: block; }
/* Homeoffice-Tipp mit Tageszahl (taxes/tips.html) */
.tip-apply { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tip-apply .tip-days { width: 5.5em; }
/* Branchenvergleich (reports/benchmark.html) */
.bench-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bench-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bench-row:last-child { border-bottom: 0; }
.bench-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bench-head small { color: var(--ink-3); }
.bench-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.bench-own { font-family: var(--font-display); font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.bench-range { color: var(--ink-2); font-size: 14px; }
.bench-scale { position: relative; height: 14px; margin: 10px 0 4px; border-radius: 999px; background: var(--paper-3); }
.bench-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--a); border: 1px solid var(--a-solid); }
.bench-mark { position: absolute; top: -4px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.bench-band.from-0 { left: 0%; } .bench-band.from-5 { left: 5%; } .bench-band.from-10 { left: 10%; } .bench-band.from-15 { left: 15%; } .bench-band.from-20 { left: 20%; } .bench-band.from-25 { left: 25%; } .bench-band.from-30 { left: 30%; } .bench-band.from-35 { left: 35%; } .bench-band.from-40 { left: 40%; } .bench-band.from-45 { left: 45%; } .bench-band.from-50 { left: 50%; } .bench-band.from-55 { left: 55%; } .bench-band.from-60 { left: 60%; } .bench-band.from-65 { left: 65%; } .bench-band.from-70 { left: 70%; } .bench-band.from-75 { left: 75%; } .bench-band.from-80 { left: 80%; } .bench-band.from-85 { left: 85%; } .bench-band.from-90 { left: 90%; } .bench-band.from-95 { left: 95%; } .bench-band.from-100 { left: 100%; }
.bench-mark.pos-0 { left: 0%; } .bench-mark.pos-5 { left: 5%; } .bench-mark.pos-10 { left: 10%; } .bench-mark.pos-15 { left: 15%; } .bench-mark.pos-20 { left: 20%; } .bench-mark.pos-25 { left: 25%; } .bench-mark.pos-30 { left: 30%; } .bench-mark.pos-35 { left: 35%; } .bench-mark.pos-40 { left: 40%; } .bench-mark.pos-45 { left: 45%; } .bench-mark.pos-50 { left: 50%; } .bench-mark.pos-55 { left: 55%; } .bench-mark.pos-60 { left: 60%; } .bench-mark.pos-65 { left: 65%; } .bench-mark.pos-70 { left: 70%; } .bench-mark.pos-75 { left: 75%; } .bench-mark.pos-80 { left: 80%; } .bench-mark.pos-85 { left: 85%; } .bench-mark.pos-90 { left: 90%; } .bench-mark.pos-95 { left: 95%; } .bench-mark.pos-100 { left: 100%; }
.bench-pick select { max-width: 100%; }
@media (max-width: 700px) {
.bench-own { font-size: var(--fs-h3); }
.receipt-tip-actions .btn { white-space: normal; }
}
/* --- Steuerberater, Exporte, API, Team & Kanzlei (Paket export4) --- */
/* Kommentare mit @-Erwähnungen (apps.collab) */
.comment-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .75rem; }
.comment { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-bottom: .35rem; }
.comment-meta .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.comment-meta form { margin-left: auto; }
.comment-text { overflow-wrap: anywhere; line-height: 1.5; }
.mention { font-weight: 700; color: var(--a-deep); background: var(--st); border-radius: 6px; padding: 0 .25rem; }
/* Webhooks: lange Adressen umbrechen statt die Tabelle zu verbreitern */
.webhook-url { overflow-wrap: anywhere; word-break: break-all; }
/* Mandantenübersicht der Kanzlei */
table.list.mandate-list tr.needs-attention td:first-child { box-shadow: inset 4px 0 0 var(--a-solid); }
/* Andere Programme (Übergaben) */
.handover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.handover-grid > .section { margin: 0; }
@media (max-width: 700px) {
.handover-grid { grid-template-columns: minmax(0, 1fr); }
.comment-meta form { margin-left: 0; }
}
/* --- Anbindungen (Paket anbindungen4) --- */
.cx-card .card-head { align-items: flex-start; gap: 12px; }
.cx-title { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cx-title h3 { margin: 0; font-size: var(--fs-h3); }
.cx-title p { margin: 2px 0 0; overflow-wrap: anywhere; }
.lx-card { margin-top: 18px; }
.lx-price { font-family: var(--font-display); font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
.cx-card .card-head { flex-wrap: wrap; }
.cx-card .card-head .badge { margin-left: 52px; }
}
/* --- Verkauf vervollständigen (Paket verkauf4) --- */
/* Editor: Vorschläge im Feld „Leistung“ (Katalog und frühere Positionen) */
.pp .ed-name-suggest { position: absolute; left: 0; right: 0; top: 2.3em; z-index: 30; margin: 0; padding: 6px; background: var(--card);
color: var(--ink); font-family: var(--font-ui); font-size: 14px; border: 2px solid var(--print-ink); border-radius: 16px;
box-shadow: 0 4px 0 var(--print-ink), 0 24px 40px -20px rgba(0, 0, 0, .35); }
.pp .ed-name-suggest[hidden] { display: none; }
/* Sammellieferschein: offene Positionen je Auftrag */
.collective-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.collective-lines small { white-space: nowrap; }
/* Wiedervorlage an Rechnung, Angebot, Beleg und Kunde */
.task-quick { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-top: 12px; }
.task-quick input[type="text"], .task-quick input[type="date"] { min-width: 0; }
/* Leistungsnachweis als Anlage, KI-Auslesen, nächste Schritte nach der Übernahme */
.timesheet-option { display: grid; gap: 8px; justify-items: start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.timesheet-option p { margin: 0; }
.import-next .row, .ai-import form { margin-top: 10px; }
.price-list td.actions { text-align: right; }
/* Offline-Stoppuhr: versteckte Blöcke bleiben versteckt, auch wenn ihre Klasse ein display setzt */
[data-timer-card] [hidden] { display: none !important; }
.timer-offline { margin: 0 0 10px; padding: 8px 12px; border: 1.5px dashed var(--line-2); border-radius: var(--r-s); background: var(--paper-2); }
@media (max-width: 700px) {
.task-quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.task-quick input[type="text"] { grid-column: 1 / -1; }
.collective-lines small { white-space: normal; }
}
/* --- Englische Oberfläche (sprache4) --- */
/* Sprachumschalter unter dem Anmeldefeld (Kontomenü nutzt die vorhandenen .menu-list-Stile) */
.auth-lang { display: flex; justify-content: center; margin-top: 12px; }
.auth-lang .btn { gap: 6px; }
/* --- QA Welle 4 --- */
/* Datumswerte in Kennzahlen nicht mitten im Datum umbrechen (Handy: „01.01.20 / 26“) */
.figure dd.date { white-space: nowrap; }
/* KI-Verbindung: Gruppen in der Einstellungsfläche wurden vom fieldset-Reset geschluckt (kein Abstand, kein Feld) */
.settings-section fieldset.kv-group { padding: 14px 16px; background: var(--paper-2); }
.settings-section .stack > * + fieldset.kv-group { margin-top: 16px; }
/* Kundenauswahl neben dem Knopf (Sammelrechnung, Sammellieferschein): Auswahl nicht auf Knopfbreite quetschen */
.pick-row > .grow { flex: 1 1 14rem; }
@media (max-width: 700px) {
.figure dd.date { font-size: clamp(19px, 5.4vw, 26px); }
/* Kennzahlen im Seitenkopf: lange Beträge liefen in die Nachbarspalte („21.739,74 €19.406,94 €“) */
.page-head .figure dd { font-size: clamp(19px, 5.6vw, 24px); }
/* Startseite: Einleitung lief unter Groschen durch */
.home-hero .lede { padding-right: 112px; }
}
/* --- Handy: kompakte Seitenköpfe -------------------------------------------------------------------------
Die Liste soll im ersten Bildschirm beginnen (Vorbild: Listenköpfe bei Shopify „Draft orders“, Public „Bonds“).
Groschen sitzt klein neben dem Titel statt unten überlappend; Titel, Einleitung und Knöpfe enger. */
@media (max-width: 600px) {
.page-head { gap: 12px; padding: 16px 18px 18px; margin-bottom: 18px; }
.page-head:has(> .page-art) { padding-right: 18px; margin-bottom: 18px; }
.page-head:has(> .page-art) > div:first-child, .page-head:has(> .page-art) > h1:first-child { padding-right: 78px; }
.page-head .page-art { width: 72px; top: 8px; right: 10px; bottom: auto; }
.page-head h1 { font-size: clamp(28px, 8.2vw, 34px); }
.page-head .sub, .page-head p.muted, .page-head .lede { margin-top: 8px; font-size: 14.5px; }
.page-head p.row { margin-top: 8px; }
.page-head .actions .btn { height: 40px; padding: 0 10px; font-size: 14px; }
.page-head .actions { gap: 6px; }
.page-head .actions .btn.quiet { padding: 0 6px; } /* Nebenaktionen schmaler, damit alles in eine Zeile passt */
.page-head .actions a.btn.quiet > .icon:first-child { display: none; } /* Text reicht; das Symbol bleibt bei der Hauptaktion */
.page-head .actions .menu > summary .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* nur „…“, Name bleibt für Screenreader */
}
/* Beleg prüfen ohne Datei: Groschen im Leerzustand nicht wie ein Belegfoto (weiß, schräg, volle Breite) darstellen */
.split .preview .empty .empty-art { width: 112px; max-width: 40%; margin: 0 auto 8px; background: none; transform: none; border-radius: 0; box-shadow: none; }
.split .preview .empty .empty-art:hover { transform: none; }
@media (max-width: 900px) { .split .preview:has(> .empty) { position: static; padding: 14px; } .split .preview .empty { padding: 8px 0 10px; } }
/* --- Landingpage (templates/core/landing.html) ------------------------------------------------------------
design-taste-frontend (asymmetrischer Hero, Bento mit echten Bildschirmen), impeccable/bolder (ein Höhepunkt: der
Screenshot bricht aus dem Hero und richtet sich beim Scrollen auf), apple-design (Druck-Feedback, Bewegung nur mit
Zweck, reduzierte Bewegung = still, durchscheinende Navigation). Ein Thema für die ganze Seite (hell/dunkel automatisch). */
.lp { --lp-max: 1240px; --lp-ease: cubic-bezier(.16, 1, .3, 1); min-height: 100dvh; background: var(--paper); color: var(--ink); overflow-x: clip; }
.lp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
height: 68px; padding: 0 max(20px, calc((100% - var(--lp-max)) / 2)); background: color-mix(in srgb, var(--paper) 72%, transparent);
-webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
@media (prefers-reduced-transparency: reduce) { .lp-nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.lp-brand img { width: 38px; height: auto; }
.lp-brand .brand-word { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.03em; }
.lp-btn:active { transform: translateY(3px) scale(.97); transition-duration: 90ms; } /* Feedback beim Drücken, nicht erst beim Loslassen */
.lp-btn .icon { width: 18px; height: 18px; }
/* Hero: großer Titel links, Groschen rechts; der Screenshot darunter überlappt die Unterkante */
.lp-hero { position: relative; isolation: isolate; padding: 80px max(20px, calc((100% - var(--lp-max)) / 2)) 210px; }
.lp-hero-copy { max-width: 980px; }
.lp-hero::before { content: ""; position: absolute; inset: 0 0 0 0; z-index: -1; background: var(--sand);
border-radius: 0 0 56px 56px / 0 0 140px 140px; }
.lp-hero .overline { color: var(--sand-deep); }
.lp-hero h1 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6.2vw, 90px);
line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.lp-hero h1 em { font-style: normal; color: color-mix(in srgb, var(--ink) 58%, var(--sand-deep)); }
.lp-sub { margin: 24px 0 0; max-width: 44ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: color-mix(in srgb, var(--ink) 80%, var(--sand)); }
.lp-cta { margin-top: 32px; height: 56px; padding: 0 26px; font-size: 16.5px; gap: 10px; }
/* Groschen hockt oben auf dem Fensterrand des Screenshots */
.lp-shot-groschen { position: absolute; right: 9%; top: -118px; z-index: 3; width: clamp(120px, 12vw, 168px); height: auto; pointer-events: none; }
.lp-shot-wrap { position: relative; z-index: 2; max-width: calc(var(--lp-max) - 40px); margin: -168px auto 0; padding: 0 20px; perspective: 1600px; }
.lp-shot { border-radius: 22px; overflow: hidden; background: var(--card); border: 2px solid var(--print-ink);
box-shadow: 0 10px 0 var(--print-ink), 0 50px 80px -30px rgba(40, 25, 5, .45); transform-origin: 50% 0; }
.lp-shot img { display: block; width: 100%; height: auto; }
/* Laufband: die Breite des Funktionsumfangs, einmal pro Seite */
.lp-marquee { display: flex; overflow: hidden; margin: 88px 0 0; padding: 22px 0; border-block: 2px solid var(--print-ink);
background: var(--mint); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-marquee-track { display: flex; flex: none; gap: 44px; margin: 0; padding: 0 22px; list-style: none;
font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.02em; white-space: nowrap; }
/* Editor: großes Bild, Text daneben (eigene Layoutfamilie: Bild bricht nach rechts aus) */
.lp-editor { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 56px;
max-width: var(--lp-max); margin: 0 auto; padding: 120px 20px 40px; }
.lp-editor h2, .lp-bento h2, .lp-privacy h2, .lp-invite h2 { margin: 0; font-family: var(--font-display); font-weight: 800;
font-size: clamp(32px, 4.2vw, 58px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.lp-editor p { margin: 18px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.lp-editor-shot { width: calc(100% + 40px); max-width: none; height: auto; border-radius: 18px; border: 2px solid var(--print-ink);
box-shadow: 0 8px 0 var(--print-ink); transform: rotate(-1.2deg); }
/* Bento: fünf Zellen, fünf Inhalte, unterschiedliche Größen und Tönungen */
.lp-bento { max-width: var(--lp-max); margin: 0 auto; padding: 120px 20px 0; }
.lp-bento-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 18px; margin-top: 40px; }
.lp-cell { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 26px;
border: 2px solid var(--print-ink); box-shadow: 0 6px 0 var(--print-ink); color: var(--print-ink); }
.lp-cell h3 { margin: 0; color: inherit; font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; }
.lp-cell p { margin: 0; max-width: 34ch; line-height: 1.45; }
.lp-cell .doodle { width: 56px; height: 56px; }
.lp-cell-belege { grid-column: span 2; grid-row: span 2; background: var(--st-mint); }
.lp-cell-belege img { width: 72%; height: auto; margin: auto auto -40% ; border-radius: 26px; border: 2px solid var(--print-ink); }
.lp-cell-steuern { grid-column: span 4; background: var(--st-lav); flex-direction: row; align-items: flex-start; }
.lp-cell-steuern > div { flex: 0 0 36%; }
.lp-cell-steuern img { flex: 1; min-width: 0; height: auto; margin: 0 -60px -70px 0; border-radius: 14px; border: 2px solid var(--print-ink); }
.lp-cell-erechnung { grid-column: span 2; background: var(--st-coral); justify-content: flex-end; }
.lp-stamp-big { position: absolute; top: 24px; right: 18px; padding: 8px 18px; border: 3px solid var(--print-ink); border-radius: 999px;
background: #FFFDF7; color: var(--print-ink); font-family: var(--font-display); font-weight: 800; font-size: 22px; transform: rotate(8deg); box-shadow: 0 4px 0 var(--print-ink); }
.lp-cell-bank { grid-column: span 1; background: var(--st-sky); justify-content: space-between; }
.lp-cell-kanzlei { grid-column: span 1; background: var(--st-sand); justify-content: space-between; }
/* Datenschutz: großer Satz, darunter vier Aussagen in Reihe */
.lp-privacy { max-width: var(--lp-max); margin: 0 auto; padding: 140px 20px 0; text-align: center; }
.lp-privacy h2 { font-size: clamp(40px, 6vw, 84px); }
.lp-facts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; text-align: left; }
.lp-facts li { display: grid; gap: 12px; align-content: start; font-size: 17px; line-height: 1.45; font-weight: 650; }
.lp-facts .doodle { width: 52px; height: 52px; }
/* Einladung: Groschen mit Brief, eine Aktion */
.lp-invite { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px;
max-width: 980px; margin: 140px auto 0; padding: 48px 56px; border-radius: 40px; background: var(--sand); border: 2px solid var(--print-ink);
box-shadow: 0 8px 0 var(--print-ink); }
.lp-invite-groschen { width: 180px; height: auto; }
.lp-invite p { margin: 14px 0 24px; max-width: 46ch; font-size: 18px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 82%, var(--sand)); }
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: var(--lp-max);
margin: 0 auto; padding: 72px 20px 40px; color: var(--ink-2); font-size: 14px; }
.lp-foot > span { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.lp-foot nav { display: flex; gap: 20px; }
.lp-foot a { color: inherit; }
.lp-foot form { margin: 0; }
/* Bewegung: nur mit Zweck und nur, wenn erwünscht */
@media (prefers-reduced-motion: no-preference) {
.lp-in { animation: lp-rise .9s var(--lp-ease) both; }
.lp-d2 { animation-delay: 80ms; } .lp-d3 { animation-delay: 160ms; } .lp-d4 { animation-delay: 240ms; }
@supports (animation-timeline: view()) {
/* Laufband bewegt sich nur mit dem Scrollen (kein Endlos-Autoplay, WCAG 2.2.2) */
.lp-marquee-track { animation: lp-marquee linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
/* Der Screenshot liegt erst schräg im Raum und richtet sich beim Scrollen auf: erzählt „vom Versprechen zum Produkt“ */
.lp-shot { animation: lp-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
.lp-reveal { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lp-tilt { from { transform: rotateX(22deg) scale(.9) translateY(30px); } to { transform: none; } }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-45%); } }
.lp h2 { scroll-margin-top: 84px; }
.lp-nav { padding-inline: max(20px, env(safe-area-inset-left), calc((100% - var(--lp-max)) / 2)); }
@media (prefers-reduced-motion: reduce) { .lp-marquee-track:last-child { display: none; } .lp-marquee { flex-wrap: wrap; } .lp-marquee-track { flex-wrap: wrap; white-space: normal; row-gap: 8px; } }
@media (max-width: 900px) {
.lp-nav { height: 60px; }
.lp-hero { padding: 40px 20px 130px; }
.lp-hero::before { border-radius: 0 0 36px 36px / 0 0 70px 70px; }
.lp-shot-groschen { right: 22px; top: -74px; width: 86px; }
.lp-shot-wrap { margin-top: -100px; }
.lp-shot { border-radius: 14px; box-shadow: 0 6px 0 var(--print-ink), 0 30px 50px -24px rgba(40, 25, 5, .45); }
.lp-marquee { margin-top: 56px; }
.lp-editor { grid-template-columns: 1fr; gap: 28px; padding-top: 80px; }
.lp-editor-shot { width: 100%; transform: none; }
.lp-bento { padding-top: 80px; }
.lp-bento-grid { grid-template-columns: 1fr 1fr; }
.lp-cell-belege, .lp-cell-steuern, .lp-cell-erechnung { grid-column: span 2; grid-row: auto; }
.lp-cell-belege img { width: 60%; margin-bottom: -30%; }
.lp-cell-steuern { flex-direction: column; }
.lp-cell-steuern img { width: 120%; margin: 4px -60px -50px 0; }
.lp-cell-bank, .lp-cell-kanzlei { grid-column: span 1; }
.lp-stamp-big { position: static; align-self: flex-start; margin-bottom: 18px; font-size: 18px; transform: rotate(-4deg); }
.lp-privacy { padding-top: 96px; }
.lp-facts { grid-template-columns: 1fr 1fr; }
.lp-invite { grid-template-columns: 1fr; margin: 96px 16px 0; padding: 32px 24px; gap: 16px; }
.lp-invite-groschen { width: 120px; }
}
@media (max-width: 480px) { .lp-facts { grid-template-columns: 1fr; } .lp-cell-bank, .lp-cell-kanzlei { grid-column: span 2; } }
/* --- Landingpage, Bewegung Stufe 2 -------------------------------------------------------------------------
Titel aus Wortmasken (static/js/landing.js), Monatsablauf als gestapelte Karten (CSS sticky), Tiefe im Bento,
Lichtschein unter dem Zeiger, Glas-Navigation erst beim Scrollen, Symbole springen herein. Alles still bei
„Bewegung reduzieren“; ohne JavaScript bleibt der Titel normaler Text. */
.lp-month { max-width: var(--lp-max); margin: 0 auto; padding: 120px 20px 0; }
.lp-month h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.2vw, 58px); line-height: 1; letter-spacing: -.04em; }
.lp-stack { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 32px; }
.lp-card { position: sticky; top: calc(92px + var(--n) * 22px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center;
gap: 36px; min-height: 440px; padding: 36px; border-radius: 30px; border: 2px solid var(--print-ink); box-shadow: 0 8px 0 var(--print-ink);
color: var(--print-ink); }
.lp-card-beleg { --n: 0; background: var(--st-coral); }
.lp-card-bank { --n: 1; background: var(--st-sky); transform: rotate(-.5deg); }
.lp-card-ustva { --n: 2; background: var(--st-lav); transform: rotate(.5deg); }
.lp-card h3 { margin: 0; color: inherit; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.03em; }
.lp-card p { margin: 14px 0 0; max-width: 32ch; font-size: 18px; line-height: 1.5; }
.lp-card img { width: 100%; height: auto; border-radius: 16px; border: 2px solid var(--print-ink); background: #fff; }
.lp-cell::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 62%); }
.lp-cell:hover::after { opacity: 1; }
.lp-invite-groschen { transition: transform .5s var(--lp-ease); }
.lp-invite:hover .lp-invite-groschen { transform: rotate(-6deg) translateY(-8px); }
@media (prefers-reduced-motion: no-preference) {
[data-lp-split]:not(.lp-split) { animation: lp-show 1ms 1.2s both; } /* falls das Skript fehlt: nach 1,2 s einfach zeigen */
.lp-split:not(.lp-split-static) .lp-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em 0 .16em; margin: -.04em 0 -.16em; }
.lp-split:not(.lp-split-static) .lp-w > span { display: inline-block; animation: lp-word .95s var(--lp-ease) both; animation-delay: calc(60ms + var(--i) * 75ms); }
@supports (animation-timeline: view()) {
.lp-cell img { animation: lp-depth linear both; animation-timeline: view(); animation-range: cover; }
.lp-facts .doodle { animation: lp-pop linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
.lp-facts li:nth-child(2) .doodle { animation-range: entry 20% entry 90%; }
.lp-facts li:nth-child(3) .doodle { animation-range: entry 30% entry 100%; }
.lp-facts li:nth-child(4) .doodle { animation-range: entry 40% cover 30%; }
.lp-card img { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@supports (animation-timeline: scroll()) {
.lp-nav { animation: lp-nav linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
}
}
@keyframes lp-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-word { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lp-depth { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
@keyframes lp-pop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } 70% { opacity: 1; transform: scale(1.12) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes lp-nav { from { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 900px) {
.lp-month { padding-top: 80px; }
.lp-card { top: calc(68px + var(--n) * 14px); grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 22px; border-radius: 22px; }
.lp-card p { font-size: 16px; }
}
/* --- Landingpage, Hero Stufe 3: Zettelchaos fliegt in Kontor -------------------------------------------------
Erzählt den Titel: rechts liegen Rechnung, Beleg, Bank … durcheinander; beim Scrollen fliegen sie in den Screenshot.
Je Zettel: Lage (--l/--t), Drehung (--r), Tiefe für den Zeiger (--z), Ziel beim Einfliegen (--tx). */
.lp-hero-copy { position: relative; z-index: 2; }
.lp-chaos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-chaos-item { position: absolute; left: var(--l); top: var(--t); width: var(--w, 72px); }
.lp-chaos-item img { display: block; width: 100%; height: auto; rotate: var(--r); filter: drop-shadow(0 6px 0 rgba(40, 25, 5, .14));
translate: calc(var(--px, 0px) * var(--z)) calc(var(--py, 0px) * var(--z)); transition: translate .7s var(--lp-ease); }
.lp-chaos-item:nth-child(1) { --l: 57%; --t: 15%; --r: -12deg; --z: 1.2; --w: 92px; --tx: -120px; --d: 0; }
.lp-chaos-item:nth-child(2) { --l: 74%; --t: 9%; --r: 11deg; --z: .6; --w: 70px; --tx: -360px; --d: 1; }
.lp-chaos-item:nth-child(3) { --l: 67%; --t: 40%; --r: -7deg; --z: 1.6; --w: 84px; --tx: -260px; --d: 2; }
.lp-chaos-item:nth-child(4) { --l: 86%; --t: 27%; --r: 15deg; --z: .8; --w: 66px; --tx: -520px; --d: 3; }
.lp-chaos-item:nth-child(5) { --l: 58%; --t: 60%; --r: 9deg; --z: 1; --w: 70px; --tx: -60px; --d: 4; }
.lp-chaos-item:nth-child(6) { --l: 76%; --t: 29%; --r: -15deg; --z: 1.4; --w: 88px; --tx: -420px; --d: 5; }
.lp-chaos-item:nth-child(7) { --l: 92%; --t: 6%; --r: 6deg; --z: .5; --w: 58px; --tx: -640px; --d: 6; }
.lp-chaos-item:nth-child(8) { --l: 93%; --t: 46%; --r: -9deg; --z: .9; --w: 64px; --tx: -600px; --d: 7; }
/* Markerstrich unter „Endlich aufgeräumt.“ */
.lp-hero h1 em { background: linear-gradient(var(--mint-solid), var(--mint-solid)) 0 92% / 100% .12em no-repeat;
-webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
.lp-hero h1 em { background-size: 0% .12em; animation: lp-mark .9s 1.15s var(--lp-ease) forwards; }
.lp-chaos-item img { animation: lp-drop 1s var(--lp-ease) both; animation-delay: calc(350ms + var(--d) * 90ms); }
@supports (animation-timeline: scroll()) {
/* beim Scrollen fliegen die Zettel nach unten links in den Screenshot und verschwinden darin */
.lp-chaos-item { animation: lp-sweep linear both; animation-timeline: scroll(root); animation-range: 0 560px; }
}
}
@keyframes lp-mark { to { background-size: 100% .12em; } }
@keyframes lp-drop { from { opacity: 0; scale: .3; rotate: calc(var(--r) - 50deg); translate: 0 -60px; } }
@keyframes lp-sweep { to { transform: translate(var(--tx), 420px) scale(.2); opacity: 0; } }
@media (max-width: 1100px) { .lp-chaos-item:nth-child(n+7) { display: none; } }
@media (max-width: 900px) { .lp-chaos { display: none; } }
/* --- Landingpage Stufe 4: Editor gestapelt im Browserfenster, Datenschutz als dunkles Band ---------------------- */
.lp-editor { display: block; padding-top: 130px; }
.lp-editor-copy { max-width: 760px; }
.lp-editor-copy p { max-width: 52ch; }
.lp-browser { margin-top: 40px; border-radius: 20px; overflow: hidden; border: 2px solid var(--print-ink); background: var(--card);
box-shadow: 0 10px 0 var(--print-ink), 0 60px 90px -40px rgba(40, 25, 5, .45); }
.lp-browser-bar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 2px solid var(--print-ink); background: var(--paper-2); }
.lp-browser-bar i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--print-ink); background: var(--st-coral); }
.lp-browser-bar i:nth-child(2) { background: var(--st-sand, #F7E7C4); } .lp-browser-bar i:nth-child(3) { background: var(--st-mint); }
.lp-browser-bar span { margin: 0 auto; padding: 4px 16px; border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 650; }
.lp-browser img { display: block; width: 100%; height: auto; }
.lp-privacy { max-width: none; margin-top: 140px; padding: 0 12px; text-align: left; }
.lp-privacy-inner { max-width: var(--lp-max); margin: 0 auto; padding: 96px clamp(24px, 5vw, 72px); border-radius: 44px; background: #1F1A14; color: #FFFDF7; }
.lp-privacy h2 { color: #FFFDF7; font-size: clamp(44px, 7vw, 104px); max-width: 12ch; }
.lp-privacy .lp-facts { margin-top: 64px; gap: 36px; }
.lp-privacy .lp-facts li { font-weight: 400; gap: 10px; }
.lp-privacy .lp-facts strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; }
.lp-privacy .lp-facts span { color: rgba(255, 253, 247, .72); line-height: 1.5; }
.lp-privacy .doodle { width: 60px; height: 60px; }
@media (max-width: 900px) {
.lp-editor { padding-top: 88px; }
.lp-browser { margin-top: 24px; border-radius: 14px; }
.lp-browser-bar { height: 32px; } .lp-browser-bar span { display: none; }
.lp-privacy { margin-top: 96px; }
.lp-privacy-inner { padding: 56px 24px; border-radius: 32px; }
.lp-privacy .lp-facts { margin-top: 40px; }
}
/* --- Landingpage Hero Stufe 5: Live-Meldungen, wandernde Farbflächen, stempelnder Groschen -------------------------
Meldungen erzählen „Kontor arbeitet von selbst“ (einmalige Abfolge, kein Endlos-Loop). Farbflächen: sehr langsam,
nur Transform. Alles still bei „Bewegung reduzieren“ (dann stehen Meldungen und Flächen einfach da). */
.lp-blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none;
border-radius: 0 0 56px 56px / 0 0 140px 140px; }
.lp-blobs i { position: absolute; width: 46vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; }
.lp-blobs i:nth-child(1) { left: -10%; top: -30%; background: var(--st-mint); }
.lp-blobs i:nth-child(2) { right: -12%; top: 10%; background: var(--st-coral); opacity: .45; }
.lp-blobs i:nth-child(3) { left: 35%; bottom: -45%; background: var(--st-lav); opacity: .4; }
.lp-toasts { position: absolute; left: clamp(28px, 6%, 80px); top: 3%; z-index: 3; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; width: min(360px, 42%); }
.lp-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #FFFDF7; color: var(--print-ink);
border: 2px solid var(--print-ink); box-shadow: 0 5px 0 var(--print-ink), 0 24px 40px -18px rgba(40, 25, 5, .45); }
.lp-toast .doodle { width: 40px; height: 40px; flex: none; }
.lp-toast span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.lp-toast strong { font-size: 15.5px; } .lp-toast small { font-size: 13px; color: #574E43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-toast > .icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--mint-solid); color: #fff; box-sizing: border-box; }
.lp-toast:nth-child(2) { margin-left: 34px; } .lp-toast:nth-child(3) { margin-left: 12px; }
.lp-shot-groschen { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
.lp-blobs i { animation: lp-blob 22s ease-in-out infinite alternate; }
.lp-blobs i:nth-child(2) { animation-duration: 27s; animation-direction: alternate-reverse; }
.lp-blobs i:nth-child(3) { animation-duration: 31s; }
.lp-toast { animation: lp-toast .7s cubic-bezier(.34, 1.4, .64, 1) both; }
.lp-toast:nth-child(1) { animation-delay: 1.5s; } .lp-toast:nth-child(2) { animation-delay: 2.4s; } .lp-toast:nth-child(3) { animation-delay: 3.3s; }
.lp-toast > .icon { animation: lp-tick .45s ease-out both; }
.lp-toast:nth-child(1) > .icon { animation-delay: 2.05s; } .lp-toast:nth-child(2) > .icon { animation-delay: 2.95s; } .lp-toast:nth-child(3) > .icon { animation-delay: 3.85s; }
.lp-shot-groschen { animation: lp-rise .9s var(--lp-ease) .24s both, lp-stamp .9s 4.2s var(--lp-ease) both; }
.lp-shot-wrap:hover .lp-shot-groschen { animation: lp-stamp .9s var(--lp-ease) both; }
@supports (animation-timeline: scroll()) {
.lp-toasts { animation: lp-toasts-out linear both; animation-timeline: scroll(root); animation-range: 200px 700px; }
}
}
@keyframes lp-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.15); } 100% { transform: translate(-4vw, 10vh) scale(.95); } }
@keyframes lp-toast { from { opacity: 0; transform: translate(-40px, 18px) scale(.85) rotate(-3deg); } }
@keyframes lp-tick { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25); } }
@keyframes lp-stamp { 0% { transform: none; } 30% { transform: translateY(-26px) rotate(-8deg); } 55% { transform: translateY(10px) scale(1.06, .9); } 75% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes lp-toasts-out { to { opacity: 0; transform: translateY(-40px); } }
@media (max-width: 900px) {
.lp-toasts { left: 14px; top: auto; bottom: -26px; width: min(300px, 78%); gap: 8px; }
.lp-toast:nth-child(n+2) { display: none; }
.lp-toast { padding: 9px 11px; } .lp-toast .doodle { width: 32px; height: 32px; }
}
/* Landingpage, iPhone: Navigation reicht unter Statusleiste/Notch (viewport-fit=cover), sonst scrollt Inhalt dort durch.
Meldung auf dem Handy nicht beim Scrollen ausblenden (wirkte halbtransparent wie ein Fehler). */
.lp-nav { box-sizing: content-box; padding-top: env(safe-area-inset-top); }
/* iPhone-Safari (ab iOS 26) zeigt Seiteninhalt immer verschwommen unter der Statusleiste und lässt die Seite dort nichts
abdecken. Ein festgepinnter Kopf ergäbe ein „Sandwich“ (Inhalt über dem Kopf). Darum auf dem Handy: Kopf scrollt mit. */
@media (max-width: 900px) {
.lp { padding-top: calc(61px + env(safe-area-inset-top)); }
.lp-nav { position: absolute; left: 0; right: 0; top: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
animation: none !important; border-bottom-color: transparent; }
}
html:has(.lp) { background: var(--paper); }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) { .lp-toasts { animation: none; } }
}
@media (max-width: 900px) { .lp-toast { background: #FFFDF7; opacity: 1; } }
/* --- Home-Bildschirm-App (display-mode: standalone) und Safari ab iOS 26 -------------------------------------------
Als App: Statusleiste mit eigener Farbe (status-bar-style default + theme-color; „black-translucent“ legte ab iOS 26 einen
Unschärfe-Verlauf über den Kopf), App beginnt darunter; Tab-Leiste
über den Home-Balken. Im Safari-Tab (iOS 26 zeigt Inhalt unter Status- und Adressleiste) pinnt Kontor den Kopf auf dem
Handy nicht fest, sonst entstünde ein „Sandwich“ mit Inhalt über dem Kopf. */
@media (display-mode: standalone) {
.topbar { padding-top: calc(12px + env(safe-area-inset-top)); background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth { padding-top: calc(2rem + env(safe-area-inset-top)); }
.tabbar { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none;
/* näher an den Rand: Beschriftung darf in den oberen Teil der Home-Balken-Zone (wie iOS-Tab-Leisten) */
padding-top: 8px; padding-bottom: max(6px, calc(env(safe-area-inset-bottom) - 16px)); }
.content { padding-bottom: calc(var(--tabbar-h) + 1.5rem + max(6px, calc(env(safe-area-inset-bottom) - 16px))); }
.lp-nav { position: fixed; background: var(--paper); }
.pwa-hint { display: none !important; }
}
@media (display-mode: browser) and (max-width: 900px) {
.topbar { position: relative; }
}
/* Tipp „Zum Home-Bildschirm“ – nur auf dem Handy im Browser, schließbar (static/js/app.js) */
.pwa-hint { display: none; }
@media (display-mode: browser) and (max-width: 900px) and (hover: none) {
.pwa-hint:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-m);
border: 2px solid var(--print-ink); background: var(--st-sky); color: var(--print-ink); font-size: 14px; line-height: 1.35; }
.pwa-hint img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.pwa-hint p { margin: 0; flex: 1; }
.pwa-hint button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(31, 26, 20, .08); color: inherit; font-size: 18px; cursor: pointer; }
}
/* --- Zugang anfragen (tenancy:access_request, Betreiberansicht „Anfragen“) --------------------------------------- */
.ar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: start;
max-width: var(--lp-max); margin: 0 auto; padding: 72px 20px 24px; }
.ar-intro { position: relative; }
.ar-intro h1 { margin: 6px 0 16px; font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.035em; }
.ar-lede { max-width: 42ch; margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.ar-art { display: block; width: 200px; height: auto; margin-top: 36px; }
.ar-panel { background: var(--card); border: 2px solid var(--print-ink); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--print-ink), var(--shadow-pop);
padding: 32px 28px 28px; }
.ar-panel .form-actions { margin-top: 22px; }
.ar-privacy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ar-privacy.full { grid-column: 1 / -1; }
.ar-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ar-done h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; }
.ar-done p { margin: 0 0 22px; font-size: 18px; line-height: 1.5; }
.ar-note { max-width: 36ch; white-space: normal; overflow-wrap: anywhere; }
.ar-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) {
.ar { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
.ar-art { display: none; }
.ar-panel { padding: 24px 18px 20px; }
}
.lp-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lp-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }