/* LAMA – Oberfläche. Tokens aus dem Design System (tokens.css), Aufbau wie eqon. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-sans);font-size:14px;line-height:1.45;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.punkt{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--blue);margin-left:.05em;vertical-align:baseline}
.punkt.navy{background:var(--navy)}
.lama-wort{font-weight:700;color:var(--blue);white-space:nowrap}
.muted{color:var(--muted)}.ink2{color:var(--ink-2)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.error{color:var(--error)}
.right{text-align:right}.nowrap{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Layout */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;transition:grid-template-columns .2s cubic-bezier(.2,0,0,1)}
.sidebar{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;height:var(--header-h)}
.sidebar .brand img{height:28px;display:block}.sidebar .brand .ic{display:none;height:30px}
.nav{padding:8px 8px 16px;flex:1}
.nav .group{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:rgba(255,255,255,.82);font-weight:500;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.nav a.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav svg{width:18px;height:18px;flex:none;opacity:.9}
.nav a .l,.sidebar .it .l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fuß der Seitenleiste: Einklappen, Benutzer, Abmelden (Aufbau wie eqon) */
.sidebar .ft{border-top:1px solid rgba(255,255,255,.1);padding:10px 8px 12px;display:flex;flex-direction:column;gap:2px}
.sidebar .it{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:var(--radius-sm);border:0;background:none;width:100%;text-align:left;color:rgba(255,255,255,.72);font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none}
.sidebar .it:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.sidebar .it svg{width:18px;height:18px;flex:none}
.sidebar .it.out{color:rgba(255,255,255,.85)}
.sidebar .it.out:hover{background:rgba(192,57,43,.28)}
.sidebar .me{display:flex;align-items:center;gap:10px;padding:8px 10px}
.sidebar .me .nm{min-width:0}
.sidebar .avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.sidebar .me .name{font-weight:600;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .me .role{font-size:11px;color:rgba(255,255,255,.55)}
/* Eingeklappt: nur Symbole */
.app.c{grid-template-columns:64px 1fr}
.app.c .sidebar .brand{justify-content:center;padding:0}.app.c .sidebar .brand .lk{display:none}.app.c .sidebar .brand .ic{display:block}
.app.c .nav .group,.app.c .nav a .l,.app.c .sidebar .it .l,.app.c .sidebar .me .nm{display:none}
.app.c .nav{padding:8px}.app.c .nav a,.app.c .sidebar .it{justify-content:center;padding:0;min-height:36px}
.app.c .nav .group{display:block;height:1px;padding:0;margin:10px 6px;background:rgba(255,255,255,.1);font-size:0}
.app.c .sidebar .me{justify-content:center;padding:8px 0}
.app.c .sidebar [data-einklappen] svg{transform:scaleX(-1)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--header-h);background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 24px;position:sticky;top:0;z-index:5}
.topbar .crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.topbar .crumbs b{color:var(--ink);font-weight:600}
.topbar .spacer{flex:1}
.content{padding:32px;max-width:1440px;width:100%;display:flex;flex-direction:column;gap:24px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.h1{font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.015em}
.h2{font-size:24px;line-height:1.2;font-weight:700}
.h3{font-size:16px;font-weight:700}
.titel{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.titel .text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:240px}
.titel .sub{color:var(--ink-2);font-size:14px}
.titel .actions{display:flex;gap:8px;align-items:center}

/* Karten, Kennzahlen */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.card .head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card .head .h3{flex:1}
.card .body{padding:18px}
.grid{display:grid;gap:16px}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:1fr}}
.stat{padding:18px;display:flex;flex-direction:column;gap:6px}
.stat .label{font-size:13px;font-weight:600;color:var(--ink-2)}
.stat .value{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.stat .hint{font-size:12px;color:var(--muted)}
.lama-box{display:flex;gap:20px;align-items:center;background:var(--blue-light);border-radius:var(--radius-lg);padding:20px 24px}
.lama-box img{height:88px;flex:none}
.lama-box .spruch{font-size:18px;font-weight:600;line-height:1.4;text-wrap:pretty}
.lama-box .text{color:var(--ink-2);margin-top:4px}
.lama-spruch{font-size:18px;font-weight:600;line-height:1.4}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:8px;height:var(--control-h);padding:0 14px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--blue);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.btn:hover{background:var(--navy);text-decoration:none}
.btn.secondary{background:var(--white);color:var(--ink);border-color:var(--line-strong)}.btn.secondary:hover{background:var(--blue-light)}
.btn.ghost{background:transparent;color:var(--blue)}.btn.ghost:hover{background:var(--blue-light)}
.btn.danger{background:var(--white);color:var(--error);border-color:var(--line-strong)}.btn.danger:hover{background:#fbeeec}
.btn.sm{height:var(--control-h-sm);padding:0 10px;font-size:13px}
.btn svg{width:16px;height:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--blue)}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--blue-light);color:var(--blue)}.icon-btn svg{width:18px;height:18px}

/* Formulare */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{height:var(--control-h);padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;width:100%}
textarea.input{height:auto;padding:8px 10px;min-height:72px}
.input.sm{height:var(--control-h-sm);font-size:13px}
.input[aria-invalid=true]{border-color:var(--error)}
.field .error{color:var(--error);font-size:12px}
.field .help{color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px}
.form-grid>.field{grid-column:span 4}.form-grid>.span6{grid-column:span 6}.form-grid>.span12{grid-column:span 12}.form-grid>.span3{grid-column:span 3}.form-grid>.span8{grid-column:span 8}
.check{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--blue)}
.segment{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;height:var(--control-h)}
.segment label{display:flex;align-items:center;padding:0 14px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.segment input{position:absolute;opacity:0}
.segment label:has(input:checked){background:var(--blue);color:#fff}
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolbar .field{min-width:140px}
/* Combobox (Kategorie mit Suche) */
.combo{position:relative}
.combo .list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:260px;overflow:auto;display:none}
.combo.open .list{display:block}
.combo .opt{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer}
.combo .opt:hover,.combo .opt.sel{background:var(--blue-light)}
.combo .opt .k{font-weight:700;min-width:30px;color:var(--blue)}
.combo .opt .g{margin-left:auto;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--blue-light);color:var(--ink)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.badge.ok::before{background:var(--ok)}.badge.warn::before{background:var(--warn)}.badge.error::before{background:var(--error)}.badge.navy::before{background:var(--navy)}
.badge.plain::before{display:none}
.kat{display:inline-flex;align-items:baseline;gap:6px}.kat b{color:var(--blue)}

/* Tabellen */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;background:var(--canvas);color:var(--ink-2);font-weight:600;font-size:12px;padding:0 12px;height:36px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:0 12px;height:var(--row-h);border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:#fafbfd}
.table tr.klick{cursor:pointer}
.table .num{text-align:right;white-space:nowrap}
.table tfoot td{border-top:1px solid var(--line-strong);font-weight:700;height:40px;background:var(--canvas)}
.table .ellipsis{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.table .inline{height:var(--control-h-sm);padding:0 8px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;width:100%}
.table .inline:hover,.table .inline:focus{border-color:var(--line-strong);background:#fff}
.table-wrap{overflow:auto;border-radius:var(--radius-md)}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;text-align:center;color:var(--ink-2)}
.empty img{height:140px}

/* Balken */
.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:200px 1fr 110px;gap:12px;align-items:center;font-size:13px}
.bar .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .n b{color:var(--blue);margin-right:6px}
.bar .t{height:16px;background:var(--canvas);border-radius:4px;overflow:hidden}
.bar .f{height:100%;background:var(--blue);border-radius:4px;min-width:2px}
.bar.einnahme .f{background:var(--ok)}
.bar .v{text-align:right;font-weight:600;white-space:nowrap}
.delta{height:8px;border-radius:4px;background:var(--canvas);overflow:hidden;position:relative}
.delta .f{position:absolute;left:0;top:0;height:100%;background:var(--blue)}
.delta .f.over{background:var(--error)}

/* Dialog + Toast */
dialog.dlg{border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:0;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
dialog.dlg::backdrop{background:rgba(10,18,40,.45)}
dialog.dlg .head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
dialog.dlg .head .h3{flex:1}
dialog.dlg .body{padding:20px}
dialog.dlg .foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);background:var(--canvas);border-radius:0 0 var(--radius-md) var(--radius-md)}
dialog.dlg .foot .links{margin-right:auto}
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:50}
.toast{display:flex;gap:12px;align-items:center;background:var(--navy);color:#fff;border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-lg);min-width:280px;max-width:420px;animation:in .18s cubic-bezier(.2,0,0,1)}
.toast img{height:40px;flex:none}
.toast .t{font-weight:700}.toast .s{color:rgba(255,255,255,.75);font-size:13px}
.toast.success{border-left:4px solid var(--ok)}.toast.danger{border-left:4px solid var(--error)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.htmx-request .spin{display:inline-block}.spin{display:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;border-bottom:2px solid transparent;color:var(--ink-2);font-weight:600;margin-bottom:-1px}
.tabs a.active{color:var(--blue);border-color:var(--blue)}
.tabs a:hover{text-decoration:none;color:var(--blue)}
.matrix td select{height:var(--control-h-sm);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;padding:0 6px}
.note{background:var(--blue-light);border-radius:var(--radius-md);padding:12px 16px;color:var(--ink-2);font-size:13px}

/* Anmeldung */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .dark{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:48px}
.login .dark img.lama{height:240px}
.login .dark .spruch{font-size:22px;font-weight:600;text-align:center;max-width:420px;text-wrap:pretty}
.login .light{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px;background:var(--white)}
.login .box{width:min(400px,100%);display:flex;flex-direction:column;gap:20px}
.login .box img.logo{height:56px;align-self:flex-start}
.ms-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-weight:600;font-size:15px}
.ms-btn:hover{background:var(--navy);text-decoration:none}
@media (max-width:900px){.login{grid-template-columns:1fr}.login .dark{display:none}.app,.app.c{grid-template-columns:64px 1fr}.sidebar .brand{justify-content:center;padding:0}.sidebar .brand .lk{display:none}.sidebar .brand .ic{display:block}.nav .group{display:block;height:1px;padding:0;margin:10px 6px;background:rgba(255,255,255,.1);font-size:0}.nav a .l,.sidebar .it .l,.sidebar .me .nm,[data-einklappen]{display:none!important}.nav{padding:8px}.nav a,.sidebar .it{justify-content:center;padding:0}.sidebar .me{justify-content:center;padding:8px 0}.content{padding:16px}.form-grid>.field,.form-grid>.span6,.form-grid>.span3,.form-grid>.span8{grid-column:span 12}.bar{grid-template-columns:120px 1fr 90px}}

/* Buchhaltung: Erfassen (Felder untereinander) + Kennzahlen, darunter die Einträge mit Suche */
.bh-oben{display:grid;grid-template-columns:minmax(380px,520px) minmax(0,1fr);gap:24px;align-items:start}
.bh-oben.ohne-form{grid-template-columns:1fr}
.bh-zahlen{display:flex;flex-direction:column;gap:16px;min-width:0}
.card.erfassen .foot,.card .foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);background:var(--canvas);border-radius:0 0 var(--radius-md) var(--radius-md)}
.stapel{display:flex;flex-direction:column;gap:12px}
.stapel .zeile{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:start}
.stapel .zeile>label,.stapel .zeile>.lbl{font-size:13px;font-weight:600;color:var(--ink-2);padding-top:9px}
.stapel .zeile .check{min-height:var(--control-h)}
.stapel .zeile .help{margin-top:4px;font-size:12px;color:var(--muted)}
.stapel .zeile .error{color:var(--error);font-size:12px;margin-top:4px}
.stapel .segment{display:flex;width:max-content;max-width:100%}
.eintraege>.head{border-bottom:0}
.eintraege>.toolbar{padding-top:0;border-bottom:1px solid var(--line)}
.eintraege .table-wrap{border-radius:0 0 var(--radius-md) var(--radius-md)}
.toolbar .suche{flex:2;min-width:220px}
.eintraege .toolbar .field:not(.suche) select{max-width:190px}
.eintraege .table .ellipsis{max-width:200px}
.such-input{position:relative}.such-input svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}.such-input .input{padding-left:34px}
@media (max-width:1100px){.bh-oben{grid-template-columns:1fr}}
@media (max-width:600px){.stapel .zeile{grid-template-columns:1fr;gap:4px}.stapel .zeile>label,.stapel .zeile>.lbl{padding-top:0}}

/* Verwaltung – Bausteine nach dem Vorbild eqon */
.card.pad{padding:20px}
.f{display:flex;flex-direction:column;gap:16px}
.kt{font-size:16px;font-weight:700;margin:0 0 14px}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px 20px}
.fg .breit{grid-column:1/-1}
.fg .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field .req{color:var(--error);margin-left:2px}
.field .lbl{font-size:13px;font-weight:600}
.fa{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;padding:12px 16px;margin:0 -16px;background:rgba(247,248,250,.92);backdrop-filter:blur(4px);border-top:1px solid var(--line)}
.savebar .sp{flex:1}
.table tr.go{cursor:pointer}
.table tr.sel td{background:var(--blue-light)!important}
table.rechte th.mitte,table.rechte td.mitte{text-align:center;width:150px}
table.rechte td{vertical-align:top;height:auto;padding-top:10px;padding-bottom:10px}
table.rechte tr.erste td{border-top:1px solid var(--line-strong)}
.rk{display:inline-flex;padding:6px;cursor:pointer}.rk input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}.rk input:disabled{cursor:not-allowed}
.note{display:flex;gap:10px;align-items:flex-start}.note>svg{width:16px;height:16px;margin-top:2px;flex:none;color:var(--blue)}.note p{margin:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:10px 12px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--ink)}.tab[aria-current]{color:var(--ink);border-bottom-color:var(--blue)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools select.input{width:auto}
.seiten{display:flex;gap:12px;align-items:center;justify-content:center}
.split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.tree{padding:8px;display:flex;flex-direction:column;gap:2px}
.tree .grp-t{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:8px 8px 6px}
.tree a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;font-weight:600;font-size:13px;color:var(--ink);text-decoration:none!important}
.tree a svg{width:16px;height:16px;flex:none;color:var(--muted)}
.tree a:hover{background:var(--canvas)}
.tree a[aria-current]{background:var(--blue-light);color:var(--blue)}.tree a[aria-current] svg{color:var(--blue)}
.tree .c{margin-left:auto;color:var(--muted);font-weight:500;font-size:12px}
.wert-form{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.table tr.aus td{color:var(--muted)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.badge{white-space:nowrap}
.savebar{margin-top:8px}

/* Budget: Jahresleiste (zentral oben) und Jahresvergleich */
.jahresleiste{display:flex;gap:16px;align-items:center;padding:12px;flex-wrap:wrap}
.jahresleiste .jahre{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.jahresleiste .jahr{display:flex;flex-direction:column;gap:2px;min-width:132px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none!important;transition:border-color .15s,background .15s}
.jahresleiste .jahr:hover{border-color:var(--blue);background:var(--blue-light)}
.jahresleiste .jahr .j{font-size:22px;font-weight:700;line-height:1.1}
.jahresleiste .jahr .t{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jahresleiste .jahr .p{font-size:13px;color:var(--ink-2)}
.jahresleiste .jahr.aktiv{background:var(--blue);border-color:var(--blue);color:#fff}
.jahresleiste .jahr.aktiv .t,.jahresleiste .jahr.aktiv .p{color:rgba(255,255,255,.85)}
.jahresleiste .kopie{display:flex;flex-direction:column;gap:4px;align-items:flex-end;max-width:340px;text-align:right}
:root{--c-plan:var(--zahl-plan);--c-aus:var(--zahl-minus);--c-ein:var(--zahl-plus)}
.vergleich .legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.vergleich .legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vergleich .body{position:relative}
.saeulen{display:flex;gap:28px;align-items:stretch;height:290px;padding:22px 8px 0;overflow-x:auto}
.sjahr{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:110px;flex:1;max-width:220px}
.sjahr .stapel3{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--line-strong)}
.sjahr .s{width:26%;max-width:32px;border-radius:4px 4px 0 0;min-height:1px;position:relative;cursor:default}
.sjahr .s.plan{background:var(--c-plan)}.sjahr .s.aus{background:var(--c-aus)}.sjahr .s.ein{background:var(--c-ein)}
.sjahr .s .wert{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sjahr .s:hover{filter:brightness(1.12)}
.sjahr .sj{font-weight:700;color:var(--ink-2);padding:2px 8px;border-radius:6px;text-decoration:none!important}
.sjahr.aktiv .sj{background:var(--blue-light);color:var(--blue)}
.vergleich .tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;white-space:nowrap;z-index:5;box-shadow:var(--shadow-lg)}
.vergleich th.aktiv{color:var(--blue)}
.vergleich .table-wrap{border-top:1px solid var(--line)}
.stapel .zeile .check input{width:20px;height:20px}
.tools .check{white-space:nowrap}

/* Lämi fragt beim Erfassen; Lämi und das Geld */
.laemi-frage{display:flex;align-items:flex-end;gap:12px;padding:14px 18px 0}
.laemi-frage img{height:76px;flex:none}
.laemi-frage .blase{position:relative;background:var(--blue-light);color:var(--ink);font-weight:600;font-size:15px;padding:10px 14px;border-radius:14px 14px 14px 4px;margin-bottom:22px}
.laemi-geld{padding:14px 18px}.laemi-geld img{height:84px}
.laemi-geld.arm{background:#fbeeec}
.login .box{width:min(460px,100%)}
.login .box img.logo{height:auto;width:100%;max-width:460px}

/* Buchhaltung v4 (14.10.2026): Jahreszahlen oben über die ganze Breite, Tabelle ohne Querscrollen, ruhige Farben */
:root{--zahl-plus:var(--ok);--zahl-minus:#a8473d;--zahl-plan:var(--blue);--betrag-aus:var(--zahl-minus);--betrag-ein:var(--zahl-plus)}
.plus{color:var(--zahl-plus)}.minus{color:var(--zahl-minus)}.neutral{color:var(--zahl-plan)}
.bh-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:16px}
.bh-kopf .stat .value{font-size:28px}
.bh-kopf .stat.ergebnis.mit-laemi{flex-direction:row;align-items:center;gap:16px;padding:12px 18px}
.bh-kopf .stat.ergebnis img{height:92px;flex:none}
.bh-kopf .stat.ergebnis>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.bh-kopf .stat.ergebnis .hint b{font-size:14px;font-weight:600;color:var(--ink-2)}
.bh-kopf .stat.ergebnis.arm{background:#fbeeec}
@media (max-width:1100px){.bh-kopf{grid-template-columns:1fr 1fr}.bh-kopf .ergebnis{grid-column:1/-1}}
@media (max-width:600px){.bh-kopf{grid-template-columns:1fr}}
.table.bh-tabelle{table-layout:fixed;font-size:13px}
.table.bh-tabelle th,.table.bh-tabelle td{padding:0 8px}
.table.bh-tabelle .ellipsis{max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table.bh-tabelle .mitte{text-align:center}
.table.bh-tabelle .akt{padding:0 4px;text-align:right}
.table.bh-tabelle .akt .icon-btn{width:28px;height:28px}
.bh-tabelle .c-datum{width:88px}.bh-tabelle .c-rnr{width:104px}.bh-tabelle .c-betrag{width:98px}
.bh-tabelle .c-zweck{width:58%}.bh-tabelle .c-empf{width:42%}.bh-tabelle .c-zm{width:84px}
.bh-tabelle .c-check{width:58px}.bh-tabelle .c-kat{width:52px}.bh-tabelle .c-akt{width:68px}
.table .betrag-aus{color:var(--betrag-aus)}.table .betrag-ein{color:var(--betrag-ein)}.table .betrag-neutral{color:var(--zahl-plan)}
.table tfoot .betrag-aus,.table tfoot .betrag-ein{font-weight:700}
@media (max-width:900px){.table.bh-tabelle{table-layout:auto;min-width:900px}}
/* Lämi im Speichern-Hinweis größer (14.10.2026) */
.toast{gap:16px;padding:14px 20px 14px 14px;min-width:340px;max-width:520px;align-items:flex-end}
.toast img{height:120px;margin:-34px 0 -6px}
.toast .t{font-size:16px}.toast .s{font-size:15px;color:rgba(255,255,255,.88);margin-top:2px;line-height:1.35}
.toast>div{padding-bottom:6px}

/* Budget v5 (14.10.2026): Kopfboxen, waagrechte Vergleichsgrafik, farbige und einklappbare Kostengruppen */
.vergleich .hvergleich{display:flex;flex-direction:column;gap:14px}
.hjahr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:10px 12px;border-radius:var(--radius-md)}
.hjahr.aktiv{background:var(--blue-light)}
.hjahr .hj{font-size:18px;font-weight:700;color:var(--ink);text-decoration:none!important}
.hjahr.aktiv .hj{color:var(--blue)}
.hjahr .bars{gap:6px}
.hjahr .bar{grid-template-columns:130px 1fr 120px}
.hjahr .bar .n{color:var(--ink-2)}
.hjahr .bar.plan .f{background:var(--zahl-plan)}.hjahr .bar.aus .f{background:var(--zahl-minus)}.hjahr .bar.ein .f{background:var(--zahl-plus)}
.hjahr .bar .t{background:#fff}
.gruppen-leiste{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.gruppen-leiste form{margin:0}
.gruppen-leiste label.btn{cursor:pointer}
.import-form label.btn{cursor:pointer}
.bgruppe{--g:#004aad;--g-hell:#eef3fb;border-left:5px solid var(--g);overflow:hidden}
.bgruppe.f1{--g:#004aad;--g-hell:#edf2fa}.bgruppe.f2{--g:#5c5fb0;--g-hell:#f0f0f9}.bgruppe.f3{--g:#2b8a9b;--g-hell:#ebf5f7}.bgruppe.f4{--g:#b8892f;--g-hell:#f8f2e7}
.bgruppe.f5{--g:#8d5a97;--g-hell:#f5eef6}.bgruppe.f6{--g:#5e7186;--g-hell:#f0f2f5}.bgruppe.f7{--g:#2f6f73;--g-hell:#ebf3f3}.bgruppe.f8{--g:#a07850;--g-hell:#f6f0ea}
.bgruppe>.head{background:var(--g-hell);border-bottom:1px solid var(--line);gap:10px;padding:10px 14px}
.bgruppe .gnr{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:var(--g);color:#fff;font-weight:700;font-size:15px}
.bgruppe .gname{flex:1;min-width:0}.bgruppe .gname .h3{line-height:1.2}
.bgruppe .gsumme{display:flex;flex-direction:column;align-items:flex-end;min-width:130px}
.bgruppe .gsumme b{font-size:17px}
.bgruppe .head form{margin:0}
.bgruppe .klappen svg{transition:transform .15s}
.bgruppe.zu .klappen svg{transform:rotate(-90deg)}
.bgruppe.zu .ginhalt{display:none}
.bgruppe.zu>.head{border-bottom:0}
.table.btab{table-layout:fixed}
.btab .c-nr{width:56px}.btab .c-name{width:48%}.btab .c-jahr{width:150px}.btab .c-monat{width:120px}.btab .c-info{width:52%}.btab .c-akt{width:76px}
.btab td.akt{text-align:right;padding:0 6px}
.btab .ellipsis{max-width:none}
.btab td.neu{background:#fff}
@media (max-width:900px){.table.btab{table-layout:auto}.btab .c-info{display:none}.hjahr{grid-template-columns:1fr}.hjahr .bar{grid-template-columns:100px 1fr 100px}}

/* Übersicht „Budgets im Jahresvergleich“: Kostengruppen in ihrer Farbe (14.10.2026) */
.vergleich .vg-zeile td:first-child{box-shadow:inset 4px 0 0 var(--g)}
.vergleich .vg-zeile:hover td{background:var(--g-hell)}
.vergleich .vg-gruppe{display:inline-flex;align-items:center;gap:10px}
.vergleich .vg-gruppe .gnr{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:var(--g);color:#fff;font-weight:700;font-size:12px}
/* Planziel-Zahl blau; Balken im Jahresvergleich höher (Georg 14.10.2026) */
.value.plan,.plan-zahl{color:var(--zahl-plan)}
.hjahr{padding:16px 14px}
.hjahr .bars{gap:12px}
.hjahr .bar{font-size:14px}
.hjahr .bar .t{height:30px;border-radius:6px}
.hjahr .bar .f{border-radius:6px}
.hjahr .bar .v{font-size:15px}
.hjahr .hj{font-size:22px}

/* Startseite (Georg 14.10.2026): vier Boxen oben, Budget-Box mit Lämi wie auf der Budget-Seite */
.start-kopf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:16px}
.start-kopf .stat .value{font-size:28px}
.start-kopf .stat.ergebnis.mit-laemi{flex-direction:row;align-items:center;gap:16px;padding:12px 18px}
.start-kopf .stat.ergebnis img{height:92px;flex:none}
.start-kopf .stat.ergebnis>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.start-kopf .stat.ergebnis .hint b{font-size:14px;font-weight:600;color:var(--ink-2)}
.start-kopf .stat.ergebnis.arm{background:#fbeeec}
@media (max-width:1100px){.start-kopf{grid-template-columns:1fr 1fr}.start-kopf .ergebnis{grid-column:1/-1}}
@media (max-width:600px){.start-kopf{grid-template-columns:1fr}}
/* Tabs als Kacheln: höher, schmaler, Icon mit Abstand zum Rand */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,240px));gap:16px}
.kachel{position:relative;display:flex;flex-direction:column;gap:6px;min-height:190px;padding:24px;color:inherit;text-decoration:none!important;transition:box-shadow .15s,transform .15s}
.kachel:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.kachel .k-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-md);background:var(--blue-light);color:var(--blue);margin-bottom:12px}
.kachel .k-icon svg{width:24px;height:24px}
.kachel .k-titel{font-size:17px;font-weight:700;color:var(--ink)}
.kachel .k-text{font-size:13px;color:var(--muted);line-height:1.4;padding-right:22px}
.kachel .k-pfeil{position:absolute;right:24px;bottom:24px;color:var(--blue)}
.kachel .k-pfeil svg{width:18px;height:18px}
@media (max-width:600px){.kacheln{grid-template-columns:1fr 1fr}}
.gruppen-bars .bar{grid-template-columns:280px 1fr 110px}
@media (max-width:900px){.gruppen-bars .bar{grid-template-columns:140px 1fr 90px}}
/* Summen neben „Ausgaben/Einnahmen nach Kategorie“ größer, fett, rot/grün (Georg 14.10.2026) */
.kopfsumme{font-size:18px;font-weight:700;white-space:nowrap}
/* Startseite: Budget-Grafik kompakt, nur laufendes Jahr (Georg 14.10.2026) */
.start-grafik .bars{gap:10px}
.start-grafik .bar{grid-template-columns:150px 1fr 120px;font-size:13px}
.start-grafik .bar .t{height:14px;background:var(--canvas)}
.start-grafik .bar.plan .f{background:var(--zahl-plan)}.start-grafik .bar.aus .f{background:var(--zahl-minus)}.start-grafik .bar.ein .f{background:var(--zahl-plus)}
.start-grafik .bar.prozent{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.start-grafik .v.plan{color:var(--zahl-plan)}
@media (max-width:900px){.start-grafik .bar{grid-template-columns:110px 1fr 90px}}
/* Budget › Jahresvergleich kompakter (Georg 14.10.2026) */
.hjahr{padding:10px 12px}
.hjahr .bars{gap:6px}
.hjahr .bar{font-size:13px}
.hjahr .bar .t{height:14px;border-radius:4px}
.hjahr .bar .f{border-radius:4px}
.hjahr .bar .v{font-size:13px}
.hjahr .hj{font-size:18px}
.vergleich .hvergleich{gap:8px}
/* Kilometergeld (Georg 14.10.2026) */
.km-kopf{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.km-satz .satz-form{display:flex;gap:8px;align-items:center}
.km-satz .satz-input{max-width:110px;font-size:20px;font-weight:700;color:var(--zahl-plan);height:44px}
.km-satz .einheit{font-weight:600;color:var(--ink-2)}
.km-satz.fehlt{border-color:var(--zahl-minus);background:#fbeeec}
.km-bars .bar{grid-template-columns:90px 1fr 170px}
.km-bars .bar.leer .n{color:var(--muted)}.km-bars .bar.leer .f{display:none}
.table.km-tabelle{table-layout:fixed}
.km-tabelle .c-datum{width:96px}.km-tabelle .c-fahrer{width:16%}.km-tabelle .c-ort{width:20%}.km-tabelle .c-zweck{width:24%}.km-tabelle .c-km{width:80px}.km-tabelle .c-satz{width:70px}.km-tabelle .c-betrag{width:110px}.km-tabelle .c-akt{width:72px}
.km-tabelle .ellipsis{max-width:none}
.km-tabelle td.akt{text-align:right;padding:0 6px}
.km-tabelle tr.monat-kopf td{background:var(--blue-light);height:40px}
.km-tabelle tbody.km-monat+tbody.km-monat tr.monat-kopf td{border-top:8px solid #fff}
.km-tabelle .monat-pdf{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-size:12px;font-weight:600}
.km-tabelle .monat-pdf svg{width:14px;height:14px}
.km-report .toolbar{align-items:flex-end}
.km-report .toolbar .field{flex:1;min-width:180px}
@media (max-width:1100px){.km-kopf{grid-template-columns:1fr 1fr}.km-kopf .km-satz{grid-column:1/-1}}
@media (max-width:900px){.table.km-tabelle{table-layout:auto;min-width:760px}}
/* Reporting: Bericht-Live und Bericht-Export (nach eqon, Georg 14.10.2026) */
.live{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.live-liste{position:sticky;top:76px;padding:10px 0}
.live-liste h4{margin:12px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.live-liste a{display:flex;gap:10px;align-items:baseline;padding:8px 16px;color:var(--ink-2);text-decoration:none!important;border-left:3px solid transparent}
.live-liste a:hover{background:var(--blue-light);color:var(--ink)}
.live-liste a[aria-current]{border-left-color:var(--blue);background:var(--blue-light);color:var(--ink);font-weight:600}
.live-liste .nr,.live-kopf .nr{font-size:12px;color:var(--muted);min-width:28px;font-weight:600}
.live-kopf{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.live-kopf .links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.live-stand{font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.live-stand i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.live-stand.laedt i{background:var(--blue)}
.live-blatt{background:#eef0f3;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.live-blatt iframe{display:block;width:100%;border:0;min-height:700px;background:transparent}
.export-gruppen{display:grid;grid-template-columns:minmax(0,1100px);gap:16px}
.export-gruppen .table td{height:auto;padding:12px}
.export-gruppen .table td:nth-child(2){width:100%}
.export-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.export-form select.input{width:auto}
@media (max-width:900px){.live{grid-template-columns:1fr}.live-liste{position:static}.export-gruppen{grid-template-columns:1fr}}
.stapel .zeile .help.formel-ergebnis{color:var(--zahl-plan);font-size:13px}

/* Lämi überall größer, damit man die Stimmung erkennt (Georg 14.10.2026) */
.lama-box img{height:124px}
.empty img{height:180px}
.toast img{height:150px;margin:-48px 0 -6px}
.login .dark img.lama{height:300px}
.laemi-frage img{height:108px}
.laemi-geld img{height:116px}
.bh-kopf .stat.ergebnis img,.start-kopf .stat.ergebnis img{height:124px}
.bh-kopf .stat.ergebnis.mit-laemi,.start-kopf .stat.ergebnis.mit-laemi{padding:10px 18px}
img.laemi-dialog{height:100px}
img.laemi-gross{height:160px}

/* Kilometergeld: Lämi neben den gefahrenen Kilometern (Georg 14.10.2026) */
.stat.km-weit{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 10px 18px}
.stat.km-weit>div:first-child{display:flex;flex-direction:column;gap:6px;min-width:0}
.km-laemi{display:flex;align-items:flex-end;gap:6px;flex:none}
.km-laemi img{height:112px;flex:none}
.km-laemi .blase{position:relative;background:var(--blue-light);color:var(--ink);font-weight:600;font-size:13px;line-height:1.3;padding:8px 11px;border-radius:12px 12px 4px 12px;max-width:150px;margin-bottom:46px}

/* Reporting: Lämi mit Spruch neben dem Titel (Georg 14.10.2026) */
.titel .laemi-titel{padding:0;margin-left:auto;flex:none}
.titel .laemi-titel .blase{border-radius:14px 14px 4px 14px;margin-bottom:40px;max-width:280px}
@media (max-width:900px){.titel .laemi-titel{display:none}}
.km-kopf:has(.km-weit){grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr)}
.stat.km-weit>div:first-child{flex:1 0 auto}
.stat.km-weit .value,.stat.km-weit .hint{white-space:nowrap}
.km-laemi .blase{max-width:140px}
@media (max-width:1100px){.km-kopf:has(.km-weit){grid-template-columns:1fr 1fr}}

/* Schutz gegen Überschreiben: Hinweis im Formular (Georg 14.10.2026) */
.konflikt{display:flex;gap:16px;align-items:flex-start;background:#fbeeec;border:1px solid #efc9c3;border-radius:var(--radius-md);padding:14px 16px;margin:0 0 14px}
.konflikt img{height:96px;flex:none}
.konflikt .k-text{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.konflikt .k-titel{font-weight:700;font-size:15px;color:var(--ink)}
.konflikt .k-sub{color:var(--ink-2);font-size:13px}
.konflikt .k-tabelle{background:#fff;border-radius:8px;font-size:13px}
.konflikt .k-tabelle td,.konflikt .k-tabelle th{padding:6px 10px}
.konflikt .k-knoepfe{display:flex;gap:8px;flex-wrap:wrap}

/* Live-Hinweis „Lydia hat gerade gespeichert“ (Georg 14.10.2026) */
.live-hinweis{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:14px;align-items:center;background:var(--navy);color:#fff;border-radius:var(--radius-md);padding:10px 14px 10px 12px;box-shadow:var(--shadow-lg);max-width:min(720px,calc(100vw - 32px));border-left:4px solid var(--blue);animation:in .18s cubic-bezier(.2,0,0,1)}
.live-hinweis img{height:84px;flex:none;margin:-22px 0 -8px}
.live-hinweis .lh-text{min-width:0;flex:1}
.live-hinweis .lh-titel{font-weight:700;font-size:15px}
.live-hinweis ul{margin:4px 0 0;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.85)}
.live-hinweis ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-hinweis .lh-knoepfe{display:flex;gap:6px;align-items:center;flex:none}
.live-hinweis .icon-btn{color:#fff;font-size:20px;line-height:1}
.live-warnung{background:#fff6e0;border:1px solid #f0d58a;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;margin-bottom:12px}

/* Verwaltung › Datensicherung (Georg 14.10.2026) */
.ds-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.ds-kopf .stat .value{font-size:24px}
.ds-kopf .stat.ds-warn{background:#fbeeec}
.ds-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.ds-rechts{display:flex;flex-direction:column;gap:16px}
.ds-liste{display:flex;flex-direction:column;gap:8px}
.ds-liste .check{display:flex;gap:8px;align-items:flex-start}
.ds-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ds-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.ds-knoepfe form{margin:0}
@media (max-width:1100px){.ds-kopf,.ds-raster{grid-template-columns:1fr}}
.ds-rechts .note{min-width:0;overflow-wrap:anywhere}.ds-rechts .note p{min-width:0}.ds-rechts code{word-break:break-all;white-space:normal}

/* ---------- Business-Cases (Georg 14.10.2026) ---------- */
.bc-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.bc-kopf .stat .value{font-size:28px}
.bc-kopf .bc-dl{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.bc-kopf .bc-dl.gelb{background:#fbf0d9}
.bc-kopf .bc-dl.rot{background:#f6dedb}
.bc-zahl.rot{color:var(--zahl-minus)}.bc-zahl.gelb{color:var(--warn)}
.bc-laemi{display:flex;align-items:center;gap:10px;flex:none;max-width:55%}
.bc-laemi img{height:108px;flex:none}
.bc-laemi .blase{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:600;font-size:14px;line-height:1.35}
.bc-naechste{font-weight:400;opacity:.8;margin-left:4px}
.bc-aus{display:flex;flex-direction:column;gap:2px}
.bc-aus .check{font-size:13px}
.table.bc-tabelle{table-layout:fixed}
.bc-tabelle .c-nr{width:96px}.bc-tabelle .c-typ{width:118px}.bc-tabelle .c-beschr{width:24%}.bc-tabelle .c-kunde{width:14%}
.bc-tabelle .c-text{width:19%}.bc-tabelle .c-dl{width:112px}.bc-tabelle .c-akt{width:76px}
.bc-tabelle td{vertical-align:top;padding-top:9px;padding-bottom:9px;height:auto}
.bc-tabelle .bc-zeilen{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.bc-tabelle .bc-datum{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.3;margin-bottom:1px}
.bc-tabelle .bc-zeilen+.badge{margin-top:4px}
.bc-tabelle th button.sortieren{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit}
.bc-tabelle th button.sortieren .pfeil{font-size:10px;color:var(--line-strong)}
.bc-tabelle th button.sortieren.aktiv{color:var(--blue)}
.bc-tabelle th button.sortieren.aktiv .pfeil{color:var(--blue)}
.bc-tabelle th button.sortieren:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.table.bc-tabelle tr.bc-gelb td{background:#fbf0d9}
.table.bc-tabelle tr.bc-rot td{background:#f6dedb}
.table.bc-tabelle tbody tr.bc-gelb:hover td{background:#f8e8c6}
.table.bc-tabelle tbody tr.bc-rot:hover td{background:#f1d0cc}
.table.bc-tabelle tr.bc-erledigt td{color:var(--muted)}
.bc-nummer{display:flex;align-items:center;max-width:180px}
.bc-nummer span{height:var(--control-h);display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-strong);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--canvas);font-weight:600;color:var(--ink-2)}
.bc-nummer .input{border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-weight:600}
.bc-form textarea.input{height:auto;min-height:56px;padding-top:8px;resize:vertical}
@media (max-width:1100px){.bc-kopf{grid-template-columns:1fr 1fr}}

/* Lämi erinnert abends ans Schlafengehen (Georg 14.10.2026) */
.toast.bett img{height:150px}

/* Startseite: Lämis Chile-Fakt (Georg 14.10.2026) */
.lama-box .chile-titel{color:var(--blue);margin-bottom:6px}

/* Budget: Suche in den Kostengruppen (Georg 14.10.2026) */
.budget-suche{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.budget-suche .such-input{max-width:560px}
.budget-suche-info{font-size:14px;font-weight:600;color:var(--blue);background:var(--blue-light);border-radius:var(--radius-sm);padding:8px 12px;align-self:flex-start}
.budget-suche-info.leer{color:var(--ink-2);background:var(--canvas)}
.bgruppe.such-leer{opacity:.45}
.bgruppe.such-treffer{box-shadow:0 0 0 2px var(--g)}
.bgruppe .gtreffer{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--g);color:#fff;font-size:12px;font-weight:700;vertical-align:middle;margin-left:6px}
.bgruppe .gtreffer[hidden]{display:none}
.btab mark{background:#fbe7a8;color:inherit;border-radius:3px;padding:0 1px}

/* Business-Cases nach Typ (Georg 14.10.2026) */
.bc-grafik{margin-bottom:16px}
.bc-grafik .head{flex-wrap:wrap;gap:8px 16px}
.bc-legende{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:12px;color:var(--ink-2)}
.bc-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.bc-legende .kopfsumme{margin-left:8px;color:var(--ink)}
.bc-bar{grid-template-columns:200px 1fr 300px}
.bc-bar .t{display:flex;gap:2px;background:var(--canvas)}
.bc-bar .t .f{flex:none}
.bc-bar .t .f{border-radius:0}.bc-bar .t .f:first-child{border-radius:4px 0 0 4px}.bc-bar .t .f:last-child{border-radius:0 4px 4px 0}.bc-bar .t .f:only-child{border-radius:4px}
.bc-bar .v{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.bc-bar .v b{font-size:15px}
.bc-zahlen{font-weight:400;font-size:12px;color:var(--ink-2)}
.bc-zahlen .aktiv{color:var(--blue);font-weight:600}.bc-zahlen .plus{font-weight:600}
.f.aktiv,.bc-legende i.aktiv{background:var(--blue)}
.f.abgeschlossen,.bc-legende i.abgeschlossen{background:var(--zahl-plus)}
.f.abgebrochen,.bc-legende i.abgebrochen{background:var(--line-strong)}
@media (max-width:900px){.bc-bar{grid-template-columns:110px 1fr 150px}.bc-zahlen{display:none}}

/* Buchhaltung: Zweck zweizeilig, Sortierpfeile in den Einträgen (Georg 14.10.2026) */
.stapel textarea.zweck-feld{min-height:0;height:auto;resize:vertical;line-height:1.4}
.bh-tabelle .bh-sortkopf{display:inline-flex;align-items:center;gap:4px;max-width:100%;vertical-align:middle}
.bh-tabelle th.num .bh-sortkopf{justify-content:flex-end;width:100%}
.bh-tabelle .bh-sortkopf>.ellipsis{min-width:0}
.bh-sort{display:inline-flex;flex-direction:column;line-height:1;flex:none}
.bh-sort button{all:unset;cursor:pointer;font-size:8px;line-height:8px;padding:1px 2px;color:var(--line-strong);border-radius:3px}
.bh-sort button:hover{color:var(--ink-2)}
.bh-sort button.aktiv{color:var(--blue)}
.bh-sort button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}


/* CRM – Kunden, Lieferanten, Ansprechpersonen (Georg 15.10.2026) */
.crm-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.crm-kopf.drei{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr)}
.crm-kopf .stat .value{font-size:26px}
.crm-kopf .crm-top{font-size:20px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-laemi-box{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.crm-laemi-box>div:first-child{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.crm-laemi{display:flex;align-items:center;gap:10px;flex:none;max-width:52%}
.crm-laemi img{height:108px;flex:none}
.crm-laemi .blase{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:600;font-size:13.5px;line-height:1.35}
.crm-grafik{margin-bottom:16px}
.crm-grafik .head .kopfsumme{margin-left:auto}
.crm-bar{grid-template-columns:220px 1fr 240px}
.crm-bar .n a{color:var(--ink)}
.crm-bar.ausgabe .f{background:var(--zahl-plan)} /* Lieferanten: neutrales Blau statt Rot (Georg 15.10.2026) */
.crm-bar .v{display:grid;grid-template-columns:1fr 104px;align-items:baseline;gap:10px} /* Betrag rechtsbündig, Rechnungen in fester Spalte – letzte Ziffer steht untereinander (Georg 15.10.2026) */
.crm-bar .v b{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.crm-zahlen{font-weight:400;font-size:12px;color:var(--ink-2);text-align:left;white-space:nowrap}
.table.crm-tabelle,.table.crm-ptabelle{table-layout:fixed}
.crm-tabelle .c-name{width:26%}.crm-tabelle .c-status{width:96px}.crm-tabelle .c-ort{width:14%}.crm-tabelle .c-zahl{width:84px}.crm-tabelle .c-betrag{width:13%}.crm-tabelle .c-datum{width:118px}.crm-tabelle .c-akt{width:76px}
.crm-ptabelle .c-name{width:18%}.crm-ptabelle .c-unt{width:18%}.crm-ptabelle .c-abt{width:14%}.crm-ptabelle .c-kontakt{width:18%}.crm-ptabelle .c-datum{width:112px}.crm-ptabelle .c-gespr{width:22%}.crm-ptabelle .c-akt{width:76px}
.crm-tabelle td,.crm-ptabelle td{vertical-align:top;padding-top:9px;padding-bottom:9px;height:auto}
.crm-tabelle th button.sortieren,.crm-ptabelle th button.sortieren{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit}
.crm-tabelle th button.sortieren .pfeil,.crm-ptabelle th button.sortieren .pfeil{font-size:10px;color:var(--line-strong)}
.crm-tabelle th button.sortieren.aktiv,.crm-ptabelle th button.sortieren.aktiv,.crm-tabelle th button.sortieren.aktiv .pfeil,.crm-ptabelle th button.sortieren.aktiv .pfeil{color:var(--blue)}
.crm-tabelle th.num button.sortieren{justify-content:flex-end;width:100%}
.crm-tabelle .akt,.crm-ptabelle .akt{padding:0 4px;text-align:right}
.crm-tabelle .akt .icon-btn,.crm-ptabelle .akt .icon-btn{width:28px;height:28px}
.crm-name .badge{margin-left:4px;vertical-align:middle}
.crm-klein{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.3}.crm-klein.minus{color:var(--zahl-minus)}
.crm-zeilen{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.crm-kontakt{display:flex;flex-direction:column;gap:2px;font-size:13px}
.crm-kontakt a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-badges{display:flex;align-items:center;gap:10px;margin-top:6px}
.crm-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.crm-stamm{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;font-size:14px}
.crm-stamm .lbl{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.crm-stamm .voll{grid-column:1/-1}
.crm-notiz{white-space:pre-wrap;line-height:1.45}
.crm-personen{display:flex;flex-direction:column}
.crm-person{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line)}
.crm-person:last-child{border-bottom:0}
.crm-person.klick{cursor:pointer}.crm-person.klick:hover{background:#fafbfd}
.crm-person.aus{opacity:.6}
.crm-person .avatar{width:40px;height:40px;border-radius:50%;background:var(--blue-light);color:var(--blue);font-weight:700;display:grid;place-items:center;flex:none;font-size:16px}
.crm-person .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crm-person .k{font-size:13px}
.crm-person .g{margin-top:4px;font-size:13px;color:var(--ink-2)}
.crm-person .d{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px;font-size:13px}
.crm-cases td{vertical-align:top;padding-top:9px;padding-bottom:9px;height:auto}
.crm-cases tr.klick{cursor:pointer}
.table.crm-cases tr.bc-gelb td{background:#fbf0d9}.table.crm-cases tr.bc-rot td{background:#f6dedb}
.crm-form textarea.input{height:auto;min-height:56px;padding-top:8px;resize:vertical}
.crm-art{display:flex;gap:18px;min-height:var(--control-h);align-items:center}
.crm-adresse{display:flex;flex-direction:column;gap:8px}
.crm-plzort{display:grid;grid-template-columns:110px 1fr;gap:8px}
.crm-plzort.iban{grid-template-columns:1fr 160px}
.kat-k{color:var(--blue)}
@media (max-width:1100px){.crm-kopf,.crm-kopf.drei{grid-template-columns:1fr 1fr}.crm-detail{grid-template-columns:1fr}}
@media (max-width:900px){.crm-bar{grid-template-columns:110px 1fr 120px}.crm-bar .v{grid-template-columns:1fr}.crm-zahlen{display:none}.table.crm-tabelle,.table.crm-ptabelle{table-layout:auto}}

/* CRM › Produkte (15.10.2026) */
.table.crm-atabelle{table-layout:fixed}
.crm-atabelle .c-nr{width:150px}.crm-atabelle .c-bez{width:26%}.crm-atabelle .c-gr{width:13%}.crm-atabelle .c-lief{width:16%}.crm-atabelle .c-einh{width:64px}.crm-atabelle .c-preis{width:11%}.crm-atabelle .c-marge{width:72px}.crm-atabelle .c-ust{width:56px}.crm-atabelle .c-akt{width:76px}
.crm-atabelle td{vertical-align:top;padding-top:9px;padding-bottom:9px;height:auto}
.crm-atabelle th button.sortieren{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit}
.crm-atabelle th button.sortieren .pfeil{font-size:10px;color:var(--line-strong)}
.crm-atabelle th button.sortieren.aktiv,.crm-atabelle th button.sortieren.aktiv .pfeil{color:var(--blue)}
.crm-atabelle th.num button.sortieren{justify-content:flex-end;width:100%}
.crm-atabelle .akt{padding:0 4px;text-align:right}.crm-atabelle .akt .icon-btn{width:28px;height:28px}
.crm-atabelle a.crm-klein{display:inline-flex;align-items:center;gap:3px;color:var(--blue)}.crm-atabelle a.crm-klein svg{width:12px;height:12px}
@media (max-width:900px){.table.crm-atabelle{table-layout:auto}}

/* Business-Case-Seite mit Reitern und Kalkulation (Georg 15.10.2026) */
.bc-untertitel{font-size:17px;color:var(--ink-2);margin-top:4px}
.bc-tabs .tab svg{width:16px;height:16px}
.kalk-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.kalk-links{display:flex;flex-direction:column;gap:16px}
.kalk-rechts{position:sticky;top:16px}
.kalk-tabelle td{padding:6px 8px;height:auto;vertical-align:middle}
.kalk-tabelle th{padding:0 8px}
.kalk-tabelle .input.sm{height:32px;font-size:13px}
.kalk-tabelle tfoot td{font-weight:600}
.kalk-tabelle td.num{white-space:nowrap}
.kalk-aufschlag{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line)}
.kalk-aufschlag label{font-size:13px;font-weight:600;color:var(--ink-2)}
.kalk-prozent{display:inline-flex;align-items:center;gap:8px}
.kalk-prozent .input{width:120px}
.kalk-ergebnis{font-size:13.5px}
.kalk-summe .table td{height:auto;padding:8px 14px;font-size:13.5px}
.kalk-summe tr.kalk-zw td{border-top:1px solid var(--line-strong);font-weight:600;background:var(--canvas)}
.kalk-summe tr.kalk-preis td{font-weight:700;font-size:15px;background:var(--blue-light)}
.kalk-summe tr.kalk-gewinn td{font-weight:700;font-size:16px;border-top:2px solid var(--line-strong)}
.kalk-laemi{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.kalk-laemi img{height:108px;flex:none}
.kalk-laemi .blase{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:600;font-size:14px;line-height:1.35}
.value.plan{color:var(--zahl-plan)}
@media (max-width:1100px){.kalk-grid{grid-template-columns:1fr}.kalk-rechts{position:static}}

/* Dokumente aus dem Business-Case – Angebot (15.10.2026) */
.dok-kopf{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.dok-kopf .stapel .zeile{grid-template-columns:130px minmax(0,1fr)}
.dok-pos td{vertical-align:top}
.dok-pos .dok-beschr{margin-top:4px;min-height:0;height:auto;padding:5px 8px;resize:vertical;line-height:1.35;font-size:12.5px}
.dok-pos tfoot td{font-weight:400}.dok-pos tfoot td b{font-weight:700}
.dok-gesperrt{display:flex;gap:10px;align-items:flex-start;background:#fbf0d9;border:1px solid #e3c88a;border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:13.5px}
.dok-gesperrt svg{width:18px;height:18px;flex:none;color:var(--warn)}
.dok-aktionen{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.dok-aktionen .btn{justify-content:center}
.dok-pdf{display:flex;gap:10px;align-items:flex-start;background:var(--blue-light);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;word-break:break-word}
.dok-pdf svg{width:22px;height:22px;flex:none;color:var(--blue)}
/* Etappe 3 (15.10.2026): Lieferschein ohne Preisspalten; Knöpfe im Reiter Dokumente; Folgedokumente */
.dok-pos.ohne-preise .nur-preis{display:none}
.dok-neu-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.dok-neu-knoepfe form{margin:0}
.dok-folge{display:flex;gap:8px;align-items:center;font-size:13.5px}
.dok-folge svg{width:16px;height:16px;color:var(--ink3)}
.dok-tabelle td{vertical-align:top;padding-top:9px;padding-bottom:9px;height:auto}
.dok-tabelle .akt{text-align:right;padding:0 4px}.dok-tabelle .akt .icon-btn{width:28px;height:28px}
@media (max-width:1100px){.dok-kopf{grid-template-columns:1fr}}

/* Ansprechpersonen: Status Neu → Qualifiziert → Kunde (Georg 15.10.2026) */
.crm-ptabelle .c-status{width:112px}
.crm-status-zahlen{font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.5}
.crm-status-zahlen b{font-size:20px;margin-right:2px}
.crm-status-erkl{margin-bottom:16px}
.crm-status-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;font-size:13.5px}
.crm-status-liste>div{display:flex;gap:10px;align-items:flex-start}
.crm-status-liste .badge{flex:none;margin-top:1px}
@media (max-width:900px){.crm-status-liste{grid-template-columns:1fr}}
/* Status-Farben Ansprechperson: Neu = Orange, Qualifiziert = Blau, Kunde = Grün (Georg 15.10.2026) */
.badge.st-neu{background:#fbf0d9;color:#8a5a00}.badge.st-neu::before{background:#d98c1f}
.badge.st-qualifiziert{background:var(--blue-light);color:var(--blue)}.badge.st-qualifiziert::before{background:var(--blue)}
.badge.st-kunde{background:#e3f1e8;color:#1f6b3f}.badge.st-kunde::before{background:var(--zahl-plus)}
.badge.st-lieferant{background:#ece9f6;color:#4b3f8f}.badge.st-lieferant::before{background:#6b5bb5}
.st-t-neu{color:#d98c1f}.st-t-qualifiziert{color:var(--blue)}.st-t-kunde{color:var(--zahl-plus)}.st-t-lieferant{color:#6b5bb5}
.crm-kopf.personen{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.7fr)}
@media (max-width:1100px){.crm-kopf.personen{grid-template-columns:1fr 1fr}}
/* Buchhaltung: Aussteller/Empfänger mit CRM-Verknüpfung (15.10.2026) */
.table .crm-link{color:inherit;text-decoration:underline dotted var(--line-strong);text-underline-offset:3px}.table .crm-link:hover{color:var(--blue)}