/* ===========================================================================
tcc-ui.css — der gemeinsame Hausstil der internen TCC-Werkzeuge
Accounting · ModelHub CRM · Max
MASSSTAB IST DAS ACCOUNTING (Entscheidung Mathias, 01.10.2026). Jeder Wert
hier ist dort in der laufenden Seite gemessen bzw. aus seinem CSS übernommen.
Wer etwas ändert, ändert es HIER und verteilt die Datei mit `verteilen.sh`
in alle Module — nie in einer Modul-Kopie.
Einbinden VOR dem modul-eigenen CSS: Das Modul darf überschreiben, was nur
bei ihm anders sein muss.
Was NICHT hineingehört: Rechnungen, PDFs und Mails. Dokumente bleiben
warm-neutral (Rechnungsblatt, PDFs, Mails sind eigene Gestaltung).
SEIT 01.10.2026: Richtung „Espresso" — cremiger Grund, Espresso-Braun als
Schrift, je Geschäftsbereich eine Farbe (Accounting Tannengrün, CRM
Terrakotta, Max Pflaume). Zuordnung alt -> neu: espresso-zuordnung.json.
=========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');
/* ---------- Grundwerte ---------- */
:root{
/* Bereichsfarbe: jedes Modul setzt sie in seinem eigenen CSS neu
(CRM Terrakotta, Max Pflaume). Voreinstellung = Accounting, Tannengrün.
Eigener Name statt --brand, damit keine Seitenpalette sie versehentlich trifft. */
--tcc-bereich:#2f6a4f; --tcc-bereich-dark:#24533d; --tcc-bereich-soft:#e3efe8; --tcc-bereich-ink:#2f6a4f;
--bg:#f8f4ee; --panel:#ffffff; --inset:#f3ece2;
--line:#e8dfd4; --line2:#f2ece4;
--ink:#2a201a; --soft:#6a5d53;
/* Leise Schrift: 5,1 : 1 auf Weiß. Bis 01.10.2026 war das #98a2ba mit 2,6 : 1. */
--faint:#7a6c61; --faint-text:#7a6c61;
--brand:var(--tcc-bereich); --brand-dark:var(--tcc-bereich-dark);
--brand-soft:var(--tcc-bereich-soft); --brand-ink:var(--tcc-bereich-ink);
/* Bedeutungsfarben: Punkt/Balken in der vollen Farbe, Schrift in -text,
Fläche in -dim. „Gut" ist ein Grün-Türkis — bewusst ein anderer Ton als das
Tannengrün des Accounting, sonst sähe ein Statuspunkt aus wie ein Akzent. */
--ok:#2c7d6e; --ok-text:#236458; --ok-dim:#e2f0ec;
--warn:#b8741c; --warn-text:#8a5512; --warn-dim:#f6ead6;
--bad:#c2412d; --bad-text:#a3361f; --bad-dim:#f8e4df;
--info:#3b6aa0; --info-text:#335c8b; --info-dim:#e6edf5;
--violet:#6a3d8f; --violet-dim:#efe7f4;
--off:#b3a698;
--radius:8px;
--shadow:0 1px 2px rgba(60,42,28,.08), 0 1px 3px rgba(60,42,28,.05);
/* Espresso (Entscheidung Mathias/Julia, 01.10.2026): Fraunces nur für große
Überschriften, alles Kleine, Tabellen und Beträge in Source Sans 3
(gleich breite Ziffern). */
--sans:'Source Sans 3',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--head:'Fraunces',Georgia,'Times New Roman',serif;
/* Alte Namen der Module — damit nichts bricht, solange ein Modul sie noch
benutzt. Neue Regeln verwenden NUR die Namen oben. */
--orange:var(--brand); --orange-dark:var(--brand-dark);
--cyan:var(--info); --cyan-dim:var(--info-dim);
--coral:var(--bad); --coral-dim:var(--bad-dim);
--amber-dim:var(--warn-dim);
--text:var(--ink); --line-soft:var(--line2); --panel2:var(--panel);
--accent:var(--brand);
--amber:var(--warn); --red:var(--bad); --green:var(--ok); --blue:var(--info);
}
*{box-sizing:border-box}
/* Grundschrift nur auf App-Seiten MIT Navigation — Dokumentansichten (Beleg,
Rechnung, Ausdrucke) bleiben unberührt. `:where` gibt der Regel die
Gewichtung null: Jede body-Regel einer Seite gewinnt.
Bewusst OHNE line-height: Die Accounting-Seiten arbeiten teils mit 1.5, teils
mit der Voreinstellung — eine Vorgabe hier verschob dort alles. Module setzen
ihre Zeilenhöhe selbst (CRM/Max: 1.5). */
:where(body:has(> .topnav)){
margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
font-size:14px; -webkit-font-smoothing:antialiased;
}
:where(body:has(> .topnav)) a{color:inherit; text-decoration:none}
/* Häkchen, Auswahlpunkte und Schieberegler in der Bereichsfarbe statt im
Browser-Blau. Gewichtung null: Eine Seite mit eigener Farbe gewinnt. */
:where(input[type=checkbox], input[type=radio], input[type=range], progress){accent-color:var(--tcc-bereich)}
/* ===========================================================================
NAVIGATION — die Seitenleiste des Accounting
Markup (in jedem Modul gleich):
Breiter als 820 px: feste Leiste links (232 px, unter 1200 px 196 px).
Schmaler: Kopfzeile mit Burger, die Einträge kommen als Schublade.
=========================================================================== */
.topnav{
/* Feste Werte, keine Verweise auf die allgemeinen Variablen: Seiten mit
eigener :root-Palette dürfen die Leiste nicht verfärben (so seit dem
13.08.2026 im Accounting). Gilt ebenso für Nutzermenü, Burger, Seitenkopf. */
--tn-bg:#f8f4ee; --tn-line:#e8dfd4; --tn-soft:#6a5d53;
--tn-ink:#2a201a; --tn-hover:#f3ece2; --tn-faint:#7a6c61;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px 32px; border-bottom:1px solid var(--tn-line); background:var(--tn-bg);
position:sticky; top:0; z-index:30;
}
.topnav .nav-left{display:flex; align-items:center; gap:14px; min-width:0}
.topnav .brandmark{
display:flex; align-items:baseline; gap:6px; white-space:nowrap;
font-size:15px; letter-spacing:-.01em; text-decoration:none; color:var(--tn-ink);
}
.topnav .brandlogo{display:none}
.topnav .brandlogo img{display:block}
/* Modul ohne Bilddatei: Monogramm in der Markenfarbe. */
.topnav .brandlogo .mono{font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--tcc-bereich)}
.topnav .brandmark b{font-weight:700}
.topnav .brandmark i{font-style:normal; font-weight:400; color:var(--tn-soft)}
@media(max-width:1279px){.topnav .brandmark{display:none}}
.topnav .tabs{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.topnav .tabs a{
display:grid; place-items:center; padding:9px 15px; border-radius:10px;
border:1px solid transparent; font-size:14px; font-weight:500; line-height:1.25;
color:var(--tn-soft); text-decoration:none; white-space:nowrap; cursor:pointer;
}
/* Geister-Beschriftung: hält jeden Reiter auf fetter Breite, sonst springt die
Leiste beim Wechsel. Braucht data-label am und den Text in einem . */
.topnav .tabs a > span{grid-area:1/1}
.topnav .tabs a::after{grid-area:1/1; content:attr(data-label); font-weight:600; visibility:hidden; pointer-events:none}
.topnav .tabs a:hover{background:var(--tn-hover); color:var(--tn-ink)}
.topnav .tabs a.active{
background:#fff; color:var(--tn-ink); font-weight:600;
border-color:var(--tn-line); box-shadow:0 1px 3px rgba(0,0,0,.08);
}
/* Zähler am Eintrag (neue Anfragen usw.). Steht als eigenes Element im ,
damit er in der Leiste rechtsbündig sitzen kann. */
.topnav .tabs a .cnt, .topnav .tabs a .zahl{
margin-left:7px; font-size:11px; font-weight:600; line-height:16px; padding:0 6px;
border-radius:999px; background:var(--tcc-bereich); color:#fff;
}
.topnav .tabs .gruppe{display:none}
.topnav .tabs .trenner{width:1px; height:20px; background:var(--tn-line); margin:0 5px; flex:0 0 auto}
@media(max-width:1400px){.topnav .tabs .trenner{display:none}}
@media(max-width:820px){
.topnav .tabs .trenner{display:none}
.topnav .tabs .gruppe{
display:block; width:100%; margin:14px 0 4px; padding:0 4px; font-size:11px; font-weight:600;
letter-spacing:.07em; text-transform:uppercase; color:var(--tn-faint);
}
.topnav .tabs .gruppe:first-child{margin-top:2px}
}
.topnav .nav-rechts{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.topnav .who{display:flex; align-items:center; gap:10px}
.topnav .who .av{
width:36px; height:36px; border-radius:50%; background:var(--tcc-bereich-soft); color:var(--tcc-bereich-ink);
font-weight:700; display:grid; place-items:center; font-size:13px; flex:0 0 auto;
}
.topnav .who .nm b{display:block; font-size:13px; line-height:1.25; color:var(--tn-ink)}
.topnav .who .nm span{display:block; font-size:12px; line-height:1.25; color:var(--tn-faint)}
.topnav .who a{color:var(--tn-soft); padding:8px; border-radius:8px; text-decoration:none}
/* Abmelde-/Symbolknopf neben dem Namen. Eigene Klasse statt `.who button`:
Im Accounting steckt das ganze Nutzermenü in .who und darf davon nichts erben. */
.topnav .who .who-btn{color:var(--tn-soft); padding:8px; border-radius:8px; background:none; border:0; font:inherit; font-size:13px; cursor:pointer}
.topnav .who a:hover, .topnav .who .who-btn:hover{background:var(--tn-hover); color:var(--tn-ink)}
@media(max-width:1020px){.topnav{padding:12px 16px}}
@media(max-width:1080px){.topnav .who .nm{display:none}}
@media(max-width:820px){.topnav .tabs a{justify-items:stretch; text-align:left}}
/* Ab 821 px: aus der Kopfzeile wird die feste Leiste links.
!important an html body: Seiten mit randlosem Layout setzen eigenes
body-Padding — der Inhalt läge sonst unter der Leiste. `screen`: im Druck
wandert die Navigation nicht mit. Nur wo es eine Leiste GIBT (`:has`):
Login-Seiten ohne Navigation rückten sonst grundlos 232 px ein. */
@media screen and (min-width:821px){
html body:has(> .topnav){padding-left:232px !important}
.topnav{
position:fixed; left:0; top:0; bottom:0; width:232px;
flex-direction:column; align-items:stretch; justify-content:flex-start;
gap:14px; padding:20px 14px 14px;
border-bottom:0; border-right:1px solid var(--tn-line);
overflow-y:auto; overscroll-behavior:contain;
}
.topnav .nav-left{padding:0 0 12px; gap:0}
.topnav .nav-backdrop{display:none}
.topnav .brandmark{display:flex; align-items:center; gap:10px; padding:2px 12px; white-space:normal; line-height:1.25}
.topnav .brandlogo{
display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:9px;
background:#fff; border:1px solid rgba(42,32,26,.08); box-shadow:0 1px 2px rgba(42,32,26,.07);
}
.topnav .brandlogo img{width:22px; height:auto}
.topnav .brandtext{min-width:0}
.topnav .brandmark b{display:block; font-size:14.5px}
.topnav .brandmark i{display:block; font-size:12px}
.topnav .tabs{flex-direction:column; align-items:stretch; gap:2px; flex-wrap:nowrap}
.topnav .tabs a{justify-items:start; text-align:left; padding:9px 12px; display:flex; align-items:center}
.topnav .tabs a::after{display:none}
.topnav .tabs a .cnt, .topnav .tabs a .zahl{margin-left:auto}
.topnav .tabs .trenner{display:none}
.topnav .tabs .gruppe{
display:block; margin:16px 0 4px; padding:0 12px; font-size:10.5px; line-height:16px; font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--tn-faint);
}
.topnav .tabs .gruppe:first-child{margin-top:2px}
.topnav .nav-rechts{
margin-top:auto; padding:12px 6px 0; border-top:1px solid var(--tn-line);
justify-content:flex-start; gap:4px; flex-wrap:wrap;
}
.topnav .who{min-width:0; flex-wrap:nowrap}
.topnav .who .nm{min-width:0}
.topnav .who .nm b{display:block; font-size:13px; line-height:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topnav .who .nm span{display:block; font-size:11px; line-height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topnav .woye-um .woye-um-pop{top:auto; bottom:calc(100% + 8px); right:auto; left:0}
}
@media screen and (min-width:821px) and (max-width:1199px){
html body:has(> .topnav){padding-left:196px !important}
.topnav{width:196px}
.topnav .who .nm{display:none}
}
/* ---------- Burger + Schublade (bis 820 px) ---------- */
.navburger{display:none}
@media (max-width:820px){
html, body{overflow-x:clip; max-width:100%}
.navburger{
display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px;
width:44px; height:44px; padding:12px 11px; border:1px solid #e8dfd4; background:#fff; cursor:pointer;
border-radius:13px; box-shadow:0 1px 2px rgba(40,35,30,.07); position:relative; z-index:210; flex:0 0 auto;
-webkit-tap-highlight-color:transparent; transition:transform .12s, box-shadow .18s;
}
.navburger:active{transform:scale(.93)}
.navburger span{
display:block; height:2.6px; border-radius:3px; background:var(--tcc-bereich);
transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s, width .28s;
}
.navburger span:nth-child(1){width:100%}
.navburger span:nth-child(2){width:62%}
.navburger span:nth-child(3){width:80%}
body.nav-open .navburger{box-shadow:0 2px 10px color-mix(in srgb, var(--tcc-bereich) 22%, transparent)}
body.nav-open .navburger span{width:100%}
body.nav-open .navburger span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
body.nav-open .navburger span:nth-child(2){opacity:0}
body.nav-open .navburger span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
.topnav .tabs{
position:fixed; top:0; left:0; bottom:0; width:min(80vw,290px);
flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:6px; background:#fff;
padding:74px 14px 22px; box-shadow:6px 0 34px rgba(30,25,20,.18);
transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.topnav .tabs a{padding:13px 16px; font-size:15.5px; border-radius:10px; width:100%; display:flex; align-items:center}
.topnav .tabs a::after{display:none}
.topnav .tabs a .cnt, .topnav .tabs a .zahl{margin-left:auto}
body.nav-open .topnav .tabs{transform:translateX(0)}
.nav-backdrop{
position:fixed; inset:0; background:rgba(20,15,10,.42); opacity:0; visibility:hidden;
transition:opacity .22s, visibility .22s; z-index:190;
}
body.nav-open .nav-backdrop{opacity:1; visibility:visible}
body.nav-open{overflow:hidden}
}
/* ---------- Bereichswechsler (tcc-wechsler.js, seit 01.10.2026) ----------
Klick auf die Marke oben links: Startseite + alle Bereiche. Feste Farben wie
die übrige Leiste. Desktop: Menü fest am Bildschirm (die Seitenleiste
scrollt und würde es abschneiden). Handy: Liste oben in der Schublade. */
/* Die Marke sieht aus wie ein Auswahlfeld: weiße Fläche, Rahmen, Chevron in
eigenem Feld — sonst ahnt niemand, dass man dort umschalten kann. */
.topnav .brandmark[aria-haspopup]{
cursor:pointer; background:#fff; border:1px solid #e8dfd4; border-radius:11px;
padding:7px 8px 7px 7px; box-shadow:0 1px 2px rgba(42,32,26,.05);
transition:border-color .15s, box-shadow .15s;
}
.topnav .brandmark[aria-haspopup]:hover{border-color:#d6c8b6; box-shadow:0 2px 6px rgba(42,32,26,.08)}
.topnav .brandmark[aria-haspopup]:focus-visible{outline:2px solid var(--tcc-bereich); outline-offset:2px}
.topnav .brandmark[aria-expanded="true"]{border-color:var(--tcc-bereich); box-shadow:0 0 0 3px color-mix(in srgb, var(--tcc-bereich) 14%, transparent)}
.topnav .brandmark[aria-haspopup] .brandlogo{box-shadow:none; border-color:#efe7dc}
.tcc-wechsel-pfeil{
margin-left:auto; flex:0 0 auto; align-self:center; width:26px; height:26px; border-radius:7px;
display:grid; place-items:center; color:#4a3f37; background:#f3ece2; transition:transform .18s, background .15s;
}
.topnav .brandmark[aria-haspopup]:hover .tcc-wechsel-pfeil{background:#ece2d5}
.topnav .brandmark[aria-expanded="true"] .tcc-wechsel-pfeil{transform:rotate(180deg)}
/* Nie breiter als die Leiste: Text darf schrumpfen und wird notfalls gekürzt. */
.topnav .brandmark[aria-haspopup]{max-width:100%; min-width:0}
.topnav .brandmark[aria-haspopup] .brandtext{min-width:0}
.topnav .brandmark[aria-haspopup] .brandtext b,
.topnav .brandmark[aria-haspopup] .brandtext i{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Schmale Leiste (196 px, Fenster 821–1199 px): kompakter. */
@media screen and (min-width:821px) and (max-width:1199px){
.topnav .brandmark[aria-haspopup]{gap:7px; padding:6px 6px 6px 6px}
.topnav .brandmark[aria-haspopup] .brandtext b{font-size:13px}
.topnav .brandmark[aria-haspopup] .brandlogo{width:30px; height:30px}
.tcc-wechsel-pfeil{width:22px; height:22px}
}
.tcc-wechsel{
position:fixed; top:64px; left:12px; width:276px; background:#fff; border:1px solid #e8dfd4; border-radius:12px;
box-shadow:0 12px 36px rgba(60,42,28,.16); padding:6px; z-index:300;
opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .14s, transform .14s, visibility .14s;
}
.tcc-wechsel.offen{opacity:1; visibility:visible; transform:none}
.tcc-wechsel-kopf{padding:8px 10px 6px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#7a6c61}
.tcc-wechsel-punkt, .topnav .tabs a.tcc-wechsel-mpunkt{
display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:#2a201a; text-decoration:none; font-weight:400;
}
.tcc-wechsel-punkt:hover{background:#f8f4ee}
.tcc-wechsel-punkt.ist-hier{background:#f3ece2}
.tcc-wechsel-logo{width:32px; height:32px; border-radius:8px; background:#f8f4ee; border:1px solid #efe7dc; display:grid; place-items:center; flex:none}
.tcc-wechsel-logo img{width:20px; height:auto; display:block}
.tcc-wechsel-text{min-width:0; flex:1; line-height:1.25}
.tcc-wechsel-text b{display:block; font-size:13.5px; font-weight:600; color:#2a201a}
.tcc-wechsel-text small{display:block; font-size:11.5px; color:#7a6c61}
.tcc-wechsel-hier{color:var(--tcc-bereich); font-weight:700; font-size:13px}
.topnav .tabs .tcc-wechsel-mobil{display:none}
@media (max-width:820px){
.tcc-wechsel{display:none}
.topnav .tabs .tcc-wechsel-mobil{display:block; margin-bottom:4px}
.topnav .tabs a.tcc-wechsel-mpunkt{padding:10px 12px}
.topnav .tabs a.tcc-wechsel-mpunkt.ist-hier{background:#f3ece2}
}
/* ---------- Nutzermenü (Klapp-Menü am Namen) ---------- */
.woye-um{position:relative}
.woye-um-btn{display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:10px; font-family:inherit; font-size:14px; line-height:1.2; color:inherit}
.woye-um-btn:hover{background:rgba(0,0,0,.04)}
.woye-um-btn .nm{text-align:left}
.woye-um-caret{font-size:10px; color:#7a6c61; transition:transform .15s}
.woye-um.open .woye-um-caret{transform:rotate(180deg)}
.woye-um-pop{
position:absolute; top:calc(100% + 8px); right:0; min-width:210px; background:#fff;
border:1px solid #e8dfd4; border-radius:12px; box-shadow:0 10px 34px rgba(40,35,30,.16); padding:6px;
opacity:0; visibility:hidden; transform:translateY(-4px); transition:.14s; z-index:60;
}
.woye-um.open .woye-um-pop{opacity:1; visibility:visible; transform:translateY(0)}
.woye-um-h{padding:10px 12px 8px}
.woye-um-h b{display:block; font-size:13px; color:#2a201a}
.woye-um-h span{font-size:11px; color:#7a6c61}
.woye-um-pop a, .woye-um-pop button{
display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px; font:inherit;
font-size:13.5px; color:#6a5d53; text-decoration:none; background:none; border:0; cursor:pointer;
}
.woye-um-pop a:hover, .woye-um-pop button:hover{background:#f8f4ee; color:#2a201a}
.woye-um-sep{height:1px; background:#e8dfd4; margin:6px 4px}
.woye-um-danger{color:#c2412d !important}
.woye-um-danger:hover{background:#f8e4df !important}
/* ===========================================================================
SEITE
=========================================================================== */
.pagehead{--ph-ink:#2a201a; --ph-faint:#7a6c61; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:0 0 22px}
.pagehead .ph-main{min-width:0}
.pagehead h1{font-family:var(--head); font-size:30px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--ph-ink); margin:0}
.pagehead h1 .ph-accent{font-weight:600; color:var(--ph-faint)}
.pagehead .sub{font-size:13px; color:var(--ph-faint); line-height:1.45; margin:5px 0 0}
.pagehead .ph-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
@media(max-width:820px){
.pagehead{margin-bottom:18px}
.pagehead h1{font-size:24px}
.pagehead .sub{font-size:12.5px}
}
/* ---------- Knöpfe ---------- */
/* Genau wie im Accounting: inline-block, Schrift geerbt, keine Zeilenhöhe.
Wer Symbole im Knopf hat (CRM), setzt dort inline-flex + gap. */
.btn{
font-family:inherit; font-size:13px; font-weight:500; color:var(--ink);
padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
cursor:pointer; text-decoration:none; display:inline-block; transition:.15s;
}
.btn:hover{background:var(--inset)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff}
.btn.danger{color:var(--bad-text)}
.btn.danger:hover{background:var(--bad-dim); border-color:#ecc3b8}
.btn.sm{padding:7px 13px; font-size:12.5px}
.btn.icon{padding:8px 10px}
.btn:disabled{opacity:.5; cursor:not-allowed}
/* Umschalter mit zwei, drei Möglichkeiten, wie die Ansichtswahl im Accounting.
NUR `.ansichten`: `.seg` ist im Accounting (Auswertung) schon anders belegt. */
.ansichten{display:inline-flex; border:1px solid #e8dfd4; border-radius:9px; overflow:hidden; background:#fff}
.ansichten a{font-size:13px; font-weight:500; padding:8px 16px; color:#6a5d53; text-decoration:none; white-space:nowrap; line-height:1.25}
.ansichten a + a{border-left:1px solid #e8dfd4}
.ansichten a:hover{background:#f3ece2; color:#2a201a}
.ansichten a.an{background:var(--tcc-bereich); color:#fff}
/* ---------- Kacheln (Kennzahlen) ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile, .kpi{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
padding:16px 18px; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tc,var(--brand))}
.tile .l{font-size:12px; color:var(--soft); font-weight:500; margin-bottom:8px}
.tile .v{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile .s{font-size:12px; color:var(--faint); margin-top:6px}
/* ---------- Karten ---------- */
.panel{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
box-shadow:var(--shadow);
}
/* Kein Außenabstand: Im Accounting stehen Karten im Raster und der Abstand kommt
aus `gap`. Module mit gestapelten Karten setzen ihn selbst. */
.panel h3{font-size:13px; font-weight:600; margin:0 0 16px}
/* ---------- Tabellen ---------- */
.tbl{width:100%; border-collapse:collapse}
.tbl th{
font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600;
text-align:left; padding:12px 20px; border-bottom:1px solid var(--line); white-space:nowrap; background:none;
}
.tbl td{padding:13px 20px; border-bottom:1px solid var(--line2); vertical-align:middle; font-size:13.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fbf8f3}
.tbl .num, td.num{text-align:right; font-variant-numeric:tabular-nums}
/* ---------- Zustand und Kennzeichnung ----------
Regel: Ein ZUSTAND (bezahlt, offen, kein Termin) ist ein Punkt mit Wort.
Eine AKTION oder KATEGORIE (Budget erhöhen, Kundenname) ist ein Tag. */
.punkt{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--off); flex:0 0 auto; vertical-align:1px}
.punkt.ok{background:var(--ok)} .punkt.warn{background:var(--warn)}
.punkt.bad{background:var(--bad)} .punkt.info{background:var(--info)} .punkt.brand{background:var(--brand)}
.zustand{display:inline-flex; align-items:center; gap:7px}
.tag{font-size:12px; font-weight:600; padding:3px 11px; border-radius:999px; background:var(--inset); color:var(--soft)}
.tag.ok{background:var(--ok-dim); color:var(--ok-text)}
.tag.warn{background:var(--warn-dim); color:var(--warn-text)}
.tag.bad{background:var(--bad-dim); color:var(--bad-text)}
.tag.info{background:var(--info-dim); color:var(--info-text)}
.tag.brand{background:var(--brand-soft); color:var(--brand-ink)}
/* ---------- Formulare ---------- */
.inp, .feld input, .feld select{
font-family:var(--sans); font-size:13.5px; padding:8px 11px; border:1px solid var(--line);
border-radius:var(--radius); background:#fff; color:var(--ink);
}
.inp:focus, .feld input:focus, .feld select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--tcc-bereich) 15%, transparent)}
.feld{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--soft)}