/* ===========================================================================
OS-UI · layout-unabhängiges Baukasten-CSS für Listen- und Auswertungsseiten
----------------------------------------------------------------------------
Wird global in inc/design/body_top.php eingebunden und definiert AUSSCHLIESSLICH
Selektoren mit dem Präfix .os- (plus :root-Variablen mit --os-).
Es verändert also nichts an bestehenden Seiten, solange diese die Klassen nicht
verwenden.
Akzentfarben (--os-c1/--os-c2) setzt body_top.php je LAYOUT inline.
PHP-Helfer zum Erzeugen des Markups: inc/design/ui.php (os_cards(), os_chips(), ...)
=========================================================================== */
:root {
--os-c1:#1e2a78; /* Akzent dunkel (Fallback, wird je Layout überschrieben) */
--os-c2:#3cd5c9; /* Akzent hell */
--os-ink:#1f2430; /* Haupttext */
--os-mut:#8a8a94; /* Sekundärtext */
--os-brd:#e8e8ec; /* Rahmen */
--os-alt:#f7f8fa; /* Flächen-Hintergrund */
--os-line:#f1f1f4; /* Zeilentrenner */
--os-in:#12805c; /* positiv / Eingang */
--os-out:#b4341f; /* negativ / Ausgang */
/* Schriftgrößen zentral – Listen sollen nicht kleiner sein als der Rest der Seite
(Layout-Basis: body/td = 14px, .tblEdit th = 13px). */
--os-fs:14px; /* Tabellenzellen */
--os-fs-th:12.5px; /* Tabellenköpfe (Versalien + Sperrung wirken größer) */
--os-fs-sm:12.5px; /* Sekundärtext: Codes, Hinweise, Kartenzeile */
--os-fs-lbl:11.5px; /* Kleinkapitälchen-Labels und Tags */
--os-fs-chip:13px; /* Chips, Seitenlinks, Filterfelder */
--os-fs-tab:14px; /* Tabs */
--os-maxw:1100px; /* Lesebreite für .os-wrap.is-narrow */
--os-radius:13px;
--os-shadow:0 3px 12px rgba(20,24,40,0.04);
}
/* --- Seitencontainer ---------------------------------------------------- */
.os { width:100%; text-align:left; font-variant-numeric:tabular-nums; }
.os *, .os *:before, .os *:after { box-sizing:border-box; }
.os h2 { font-size:17px; font-weight:700; color:var(--os-ink); margin:0px 0px 4px 0px; text-align:left; }
.os-head { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:baseline; justify-content:space-between; margin:0px 0px 14px 0px; }
.os-note { font-size:var(--os-fs-sm); color:var(--os-mut); margin:10px 0px 0px 2px; line-height:1.5; text-align:left !important; }
.os-actions { margin:24px 0px 0px 0px; }
.os-actions .button { white-space:nowrap; }
/* Hinweis zu aktiven Zuständen: bewusst KEIN Rahmen (auch kein transparenter) –
ein farbiger Rand liegt auf dem Verlauf als dunkler Ring auf, ein transparenter
erzeugte im Shop-Layout Kanten. Die fehlende Rahmenbreite wird über 1px mehr
Padding ausgeglichen, damit aktive und inaktive Elemente gleich groß bleiben. */
/* --- Tabs --------------------------------------------------------------- */
.os-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0px 18px 0px; }
.os-tab, .os-tab:link, .os-tab:visited, .os-tab:active { display:inline-block; padding:9px 20px; border-radius:999px;
border:1px solid var(--os-brd); background:#fff; color:#55596a !important; font-size:var(--os-fs-tab); font-weight:600;
text-decoration:none !important; line-height:1.3; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.os-tab:hover { border-color:var(--os-c2); color:var(--os-ink) !important; background:var(--os-alt); }
.os-tab.is-on, .os-tab.is-on:link, .os-tab.is-on:visited, .os-tab.is-on:active, .os-tab.is-on:hover {
border:0px; padding:10px 21px; color:#fff !important; background:linear-gradient(to right,var(--os-c1),var(--os-c2)); }
/* --- Filterleiste (Chips + Formularfelder) ------------------------------ */
.os-bars { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin:0px 0px 18px 0px; }
.os-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.os-bar form { margin:0px; display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.os-bar-lbl { font-size:var(--os-fs-lbl); font-weight:700; letter-spacing:.085em; text-transform:uppercase; color:var(--os-mut); margin-right:2px; white-space:nowrap; }
.os-chip, .os-chip:link, .os-chip:visited, .os-chip:active { display:inline-block; padding:4px 13px; border-radius:999px;
border:1px solid var(--os-brd); background:#fff; color:#55596a !important; font-size:var(--os-fs-chip); font-weight:600;
text-decoration:none !important; line-height:1.4; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.os-chip:hover { border-color:var(--os-c2); color:var(--os-ink) !important; background:var(--os-alt); }
.os-chip.is-on, .os-chip.is-on:link, .os-chip.is-on:visited, .os-chip.is-on:active, .os-chip.is-on:hover {
border:0px; padding:5px 14px; color:#fff !important; background:linear-gradient(to right,var(--os-c1),var(--os-c2)); }
/* Variante für abwertende Aktionen (beenden, stornieren) – erst im Hover deutlich */
.os-chip.is-danger:hover { border-color:#e6bdb3; color:var(--os-out) !important; background:#fdf5f3; }
.os-bar input[type=text], .os-bar input[type=search], .os-bar input[type=date], .os-bar input[type=number], .os-bar select {
border:1px solid var(--os-brd) !important; border-radius:8px !important; background:#fff; padding:6px 10px;
font-size:var(--os-fs-chip); color:var(--os-ink); line-height:1.35; height:32px; margin:0px;
-webkit-appearance:none; appearance:none; box-sizing:border-box; }
.os-bar input::placeholder { color:#a9adb8; }
.os-bar select { padding-right:26px; }
.os-bar input[type=text] { min-width:190px; }
.os-bar input:focus, .os-bar select:focus { border-color:var(--os-c2); outline:none; }
.os-bar input.button, .os-bar input[type=submit], .os-bar a.button {
border:none !important; border-radius:999px; font-size:var(--os-fs-chip) !important; font-weight:600;
padding:0px 18px !important; height:32px; line-height:32px; margin:0px; text-transform:none; }
/* Lupen-Knopf der Suche */
.os-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0px;
border:1px solid var(--os-brd) !important; border-radius:8px !important; background:#fff; color:#55596a; cursor:pointer;
box-sizing:border-box;
transition:border-color .15s ease, background .15s ease, color .15s ease; }
.os-iconbtn:hover { border-color:var(--os-c2); background:var(--os-alt); color:var(--os-ink); }
.os-iconbtn svg { width:15px; height:15px; }
/* Kopfbereich: sobald eine Seite die OS-UI-Leiste nutzt, wird der gesamte
$heading_right-Container zur umbrechenden Zeile. Damit stehen auch Schaltflächen und
Selects, die das Modul selbst dort abgelegt hat, neben der Leiste statt darüber.
Über :has() bewusst nur auf diesen Seiten – alle übrigen behalten ihr bisheriges Verhalten. */
.heading_right:has(.os-bars) { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
justify-content:flex-end; float:right; }
.heading_right:has(.os-bars) > * { margin:0px; }
.heading_right:has(.os-bars) > div[style*="float"] { float:none !important; }
.heading_right:has(.os-bars) .os-bars { margin:0px; }
/* Filterleiste im Kopfbereich: eine rechtsbündige Zeile, die sauber umbricht */
.os-bars.is-right { justify-content:flex-end; }
.os-bars.is-right .os-bar { flex:0 0 auto; }
.os-bar > form > * { vertical-align:middle; }
.os-bar .button, .os-bar input.button { margin:0px; }
/* --- Seitenlinks (get_limitsites) --------------------------------------- */
.os-pages { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0px 0px 12px 0px;
font-size:var(--os-fs-lbl); font-weight:700; letter-spacing:.085em; text-transform:uppercase; color:var(--os-mut); }
.os-pages > div { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.os-pages a, .os-pages a.button, .os-pages a.button2,
.os-pages a.button:link, .os-pages a.button:visited, .os-pages a.button:active,
.os-pages a.button2:link, .os-pages a.button2:visited, .os-pages a.button2:active {
display:inline-block; box-sizing:border-box; min-width:28px; padding:4px 9px; border-radius:8px; border:1px solid var(--os-brd) !important;
background:#fff !important; color:#55596a !important; font-size:var(--os-fs-chip) !important; font-weight:600 !important;
letter-spacing:0; text-transform:none; text-align:center; line-height:1.4; text-decoration:none !important;
box-shadow:none !important; transform:none !important; height:auto; }
.os-pages a.button:hover { border-color:var(--os-c2) !important; background:var(--os-alt) !important; color:var(--os-ink) !important; }
.os-pages a.button2, .os-pages a.button2:link, .os-pages a.button2:visited, .os-pages a.button2:active, .os-pages a.button2:hover {
border:0px !important; padding:5px 10px !important; color:#fff !important;
background:linear-gradient(to right,var(--os-c1),var(--os-c2)) !important; }
.os-pages a.button2 strong { font-weight:700; }
.os-pages a.button2:not([href]) { opacity:.35; }
/* --- Kennzahlen-Karten -------------------------------------------------- */
.os-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px; margin:0px 0px 18px 0px; }
.os-card { position:relative; overflow:hidden; padding:16px 18px 15px 18px; border:1px solid var(--os-brd);
border-radius:var(--os-radius); background:#fff; box-shadow:var(--os-shadow); }
.os-card:before { content:''; position:absolute; left:0px; top:0px; right:0px; height:3px;
background:linear-gradient(to right,var(--os-c1),var(--os-c2)); opacity:.5; }
.os-card-label { font-size:var(--os-fs-lbl); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--os-mut); margin:0px 0px 7px 0px; }
.os-card-value { font-size:23px; font-weight:700; line-height:1.15; color:var(--os-ink); word-break:break-word; }
.os-card-value small { font-size:var(--os-fs-sm); font-weight:600; color:var(--os-mut); margin-left:4px; }
.os-card-sub { font-size:var(--os-fs-sm); color:var(--os-mut); margin:6px 0px 0px 0px; line-height:1.45; text-align:left !important; }
.os-card.is-total:before { opacity:1; height:4px; }
.os-card.is-total .os-card-value { background:linear-gradient(to right,var(--os-c1),var(--os-c2));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.os-cards.is-sm { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.os-cards.is-sm .os-card { padding:13px 15px 12px 15px; }
.os-cards.is-sm .os-card-value { font-size:16px; }
.os-cards.is-lg .os-card { padding:20px 20px 18px 20px; border-radius:14px; }
.os-cards.is-lg .os-card-value { font-size:27px; }
.os-cards.is-lg { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
/* --- Tabellen ----------------------------------------------------------- */
.os-wrap { border:1px solid var(--os-brd); border-radius:var(--os-radius); background:#fff; overflow:hidden; box-shadow:var(--os-shadow); }
/* os_table_open(false,'is-narrow'): begrenzt die Breite und zentriert – für Listen,
die über die volle Bildschirmbreite unübersichtlich werden (z.B. Checklisten). */
.os-wrap.is-narrow { max-width:var(--os-maxw); margin-left:auto; margin-right:auto; }
.os-scroll { overflow-x:auto; -ms-overflow-style:-ms-autohiding-scrollbar; }
.os-wrap .table_cont { width:auto; max-width:none; overflow:visible; margin:0px; }
.os table.os-tbl, .os-wrap table.tblEdit, .os-wrap table.os-tbl { width:100%; margin:0px; border-collapse:collapse; }
.os table.os-tbl th, .os-wrap table.tblEdit th, .os-wrap table.os-tbl th {
background:var(--os-alt) !important; border:none !important; border-bottom:1px solid var(--os-brd) !important;
font-size:var(--os-fs-th) !important; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
color:var(--os-mut) !important; text-align:left; padding:11px 12px !important; white-space:nowrap; height:auto; }
.os table.os-tbl td, .os-wrap table.tblEdit td, .os-wrap table.os-tbl td {
border:none !important; border-top:1px solid var(--os-line) !important;
padding:11px 12px !important; font-size:var(--os-fs); color:var(--os-ink); vertical-align:middle; text-align:left; }
/* Hintergrund bewusst OHNE !important: farbige Statuszeilen der Altlisten
(.c4/.c5 aus admin/inc/chg_form_a.php) setzen ihre Farbe mit !important und
sollen sichtbar bleiben. */
.os table.os-tbl td, .os-wrap table.tblEdit td, .os-wrap table.os-tbl td { background:#fff; }
.os table.os-tbl tbody tr:first-child td, .os-wrap table.os-tbl tbody tr:first-child td { border-top:none !important; }
.os table.os-tbl tbody tr:hover td, .os-wrap table.tblEdit tr:hover td, .os-wrap table.os-tbl tbody tr:hover td { background:var(--os-alt) !important; }
.os-wrap table.tblEdit tr.inactive td { background:#f0f0f2 !important; color:var(--os-mut); }
/* Links in übernommenen .tblEdit-Listen an die Optik angleichen.
BEWUSST ohne !important: viele Module geben Schaltflächen als
aus (z.B. "Discs" in inc/mod/shop/admin/schnitt.php). Mit !important würde deren
Textfarbe überschrieben und weiße Schrift auf farbigem Grund unlesbar dunkel. */
.os-wrap table.tblEdit a:link, .os-wrap table.tblEdit a:visited, .os-wrap table.tblEdit a:active {
font-weight:600; color:var(--os-ink); text-decoration:none; }
.os-wrap table.tblEdit a:hover { text-decoration:underline; }
/* Opt-in (os_table_open(false,'is-sumrows')): in manchen Altlisten stehen Summenzeilen
als | im Tabellenkörper. Nicht global aktiv, weil edit_table.php seine Kopfzeile
ohne ausgibt und sonst mit erwischt würde. */
.os-wrap.is-sumrows table.tblEdit tbody th { background:var(--os-alt) !important; border:none !important;
border-top:1px solid var(--os-line) !important; font-size:var(--os-fs) !important; text-transform:none; letter-spacing:0;
color:var(--os-ink) !important; font-weight:700; padding:11px 12px !important; white-space:nowrap; }
/* Icon- und Sortierspalten (admin/inc/chg_form_a.php) brauchen ihr enges Layout:
die "Position"-Schaltfläche floatet links, der Verschiebe-Pfeil rechts, in ~50px Breite.
Mit der normalen Zellpolsterung bricht der Pfeil sonst in die nächste Zeile um. */
.os-wrap table.tblEdit td.os-narrow { padding:4px 2px !important; white-space:nowrap; vertical-align:middle; }
.os-wrap table.tblEdit td.os-narrow img { margin:0px; vertical-align:middle; }
.os-wrap table.tblEdit td.os-narrow a.button, .os-wrap table.tblEdit td.os-narrow a.button:link,
.os-wrap table.tblEdit td.os-narrow a.button:visited, .os-wrap table.tblEdit td.os-narrow a.button:active {
display:inline-block; background:#8a8a94 !important; border:1px solid #8a8a94 !important; border-radius:5px !important;
color:#fff !important; padding:1px 6px !important; font-size:11px !important; font-weight:600 !important;
line-height:1.5 !important; height:auto !important; min-width:0px; text-transform:none;
box-shadow:none !important; transform:none !important; }
.os-wrap table.tblEdit td.os-narrow a.button:hover { background:var(--os-c1) !important; border-color:var(--os-c1) !important; }
/* Ausrichtung, Spaltengruppen, Summenzeile */
.os table.os-tbl .os-r, .os table.os-tbl th.os-r { text-align:right; }
.os table.os-tbl .os-c, .os table.os-tbl th.os-c { text-align:center; }
.os table.os-tbl .os-grp, .os table.os-tbl th.os-grp { border-left:1px solid var(--os-brd) !important; }
.os table.os-tbl th.os-grp-title { text-align:center; color:#4a4e63 !important; letter-spacing:.06em; }
.os table.os-tbl td.os-b { font-weight:700; }
.os table.os-tbl tr.os-sum td { background:var(--os-alt) !important; border-top:2px solid var(--os-brd) !important;
font-weight:700; color:var(--os-ink); white-space:nowrap; }
.os table.os-tbl tr.os-sum:hover td { background:var(--os-alt) !important; }
/* --- Aufgabenliste / Checkliste (z.B. inc/mod/vp/leitfaden.php) ----------
Muss NACH den .tblEdit-Regeln stehen (gleiche Spezifität).
Die Zeilen werden zu Flex-Zeilen aufgelöst: in einer echten Tabelle teilen sich
alle Zeilen die Spaltenbreite, dadurch reserviert eine leere Schaltflächen-Zelle
den Platz der breitesten Schaltfläche und die Knöpfe stehen unterschiedlich weit
rechts. Rein optisch – das Markup der Module bleibt unangetastet. */
.os-wrap table.os-todo, .os-wrap table.os-todo tbody { display:block; width:100%; }
.os-wrap table.os-todo tr { display:flex; align-items:center; width:100%;
border-top:1px solid var(--os-line); }
.os-wrap table.os-todo tr:first-child { border-top:none; }
.os-wrap table.os-todo td { display:block; border:none !important; padding:15px 14px !important;
font-size:var(--os-fs); }
.os-wrap table.os-todo td.os-todo-ico { flex:0 0 auto; width:70px; padding:15px 6px 15px 18px !important; text-align:center; }
.os-wrap table.os-todo td.os-todo-ico img, .os-wrap table.os-todo td.os-todo-ico svg { margin:0px; display:block; }
.os-wrap table.os-todo td.os-todo-txt { flex:1 1 auto; min-width:0px !important; }
.os-wrap table.os-todo td.os-todo-btn { flex:0 0 auto; text-align:right !important; }
.os-wrap table.os-todo td.os-todo-btn:empty { padding:0px !important; }
.os-wrap table.os-todo td.os-todo-btn .button { margin:0px; white-space:nowrap; }
.os-todo-title { margin:0px !important; font-size:15px; font-weight:700; color:var(--os-ink);
line-height:1.35; text-align:left !important; }
.os-todo-desc { margin:5px 0px 0px 0px !important; font-size:var(--os-fs-sm); color:var(--os-mut);
line-height:1.5; text-align:left !important; }
.os-wrap table.os-todo tr.is-done .os-todo-title { color:#5c6070; font-weight:600; }
.os-wrap table.os-todo tr.is-done td.os-todo-ico img { opacity:.9; }
@media all and (max-width:760px)
{
.os-wrap table.os-todo tr { display:block; padding:14px 0px; }
.os-wrap table.os-todo td { display:block; width:100%; text-align:left !important; padding:0px 16px !important; }
.os-wrap table.os-todo td.os-todo-ico { width:auto; padding:0px 16px 8px 16px !important; }
.os-wrap table.os-todo td.os-todo-btn { padding-top:10px !important; text-align:left !important; }
}
/* Deaktivierte / abgelaufene Zeilen (z.B. beendete Abos) gedämpft darstellen */
.os-wrap table.tblEdit tr.is-off td, .os table.os-tbl tr.is-off td { color:var(--os-mut); }
.os-wrap table.tblEdit tr.is-off td a:link, .os-wrap table.tblEdit tr.is-off td a:visited,
.os table.os-tbl tr.is-off td a:link, .os table.os-tbl tr.is-off td a:visited { color:var(--os-mut); }
.os-wrap table.tblEdit tr.is-off td .os-chip, .os table.os-tbl tr.is-off td .os-chip { opacity:.65; }
/* --- Nachrichten-/Textblöcke (Tickets, Verläufe) ------------------------ */
.os-msg { border:1px solid var(--os-brd); border-radius:var(--os-radius); background:#fff;
padding:15px 18px; margin:0px 0px 12px 0px; box-shadow:var(--os-shadow); }
.os-msg-head { font-size:var(--os-fs-lbl); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--os-mut); margin:0px 0px 10px 0px; }
.os-msg-body { font-size:var(--os-fs); color:var(--os-ink); line-height:1.6; }
.os-msg-body p { text-align:left !important; margin:0px 0px 10px 0px; }
.os-msg-body p:last-child { margin-bottom:0px; }
.os-msg-body img { max-width:100%; height:auto; border-radius:8px; }
.os-msg.is-form { background:var(--os-alt); }
.os-msg textarea { border:1px solid var(--os-brd) !important; border-radius:8px !important;
padding:10px 12px; font-size:var(--os-fs); color:var(--os-ink); background:#fff; }
.os-msg textarea:focus { border-color:var(--os-c2) !important; outline:none; }
.os-msg .button { margin:0px; }
/* das Layout zentriert Formulare global – im Nachrichtenblock linksbündig lassen */
.os-msg form { margin:0px; text-align:left; }
.os-msg label { display:inline-block; }
/* Zeilen, die als Ganzes verlinkt sind (onclick auf der Zelle) */
.os-click { cursor:pointer; }
/* eigene Einträge dezent hervorheben (z.B. selbst erstellte Tickets) */
.os-wrap table.tblEdit tr.is-mine td, .os table.os-tbl tr.is-mine td { background:#fff7f4; }
.os-wrap table.tblEdit tr.is-mine:hover td, .os table.os-tbl tr.is-mine:hover td { background:#ffeee8 !important; }
.os-ticket-title { font-weight:600; }
.os-wrap table.tblEdit tr.is-off .os-ticket-title a { text-decoration:line-through; }
/* --- Zellinhalte -------------------------------------------------------- */
.os-date { white-space:nowrap; }
.os-nw { white-space:nowrap; }
.os-mut { color:var(--os-mut); }
.os-cell { display:block; }
.os-pos { display:block; font-weight:600; line-height:1.35; }
.os-code { display:block; font-size:var(--os-fs-sm); color:var(--os-mut); margin-top:2px; letter-spacing:.02em; }
.os-tag { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:999px; background:var(--os-alt);
border:1px solid var(--os-brd); font-size:var(--os-fs-lbl); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:#61657a; white-space:nowrap; }
.os-tag.is-in { color:var(--os-in); border-color:#bfe3d5; background:#f0faf6; }
.os-tag.is-out { color:var(--os-out); border-color:#f0cdc6; background:#fdf5f3; }
.os-mv { font-weight:700; white-space:nowrap; }
.os-mv.is-in { color:var(--os-in); }
.os-mv.is-out { color:var(--os-out); }
.os-ok { color:var(--os-in); font-weight:700; }
.os-no { color:#c8ccd6; font-weight:700; }
.os-lnk, .os-lnk:link, .os-lnk:visited, .os-lnk:active { display:block; font-weight:600; color:var(--os-ink) !important; text-decoration:none !important; }
.os-lnk:hover { text-decoration:underline !important; }
.os-lnk.is-inline, .os-lnk.is-inline:link, .os-lnk.is-inline:visited, .os-lnk.is-inline:active { display:inline; }
.os-key, .os-key:link, .os-key:visited, .os-key:active { font-weight:700; color:var(--os-c1) !important; text-decoration:none !important; }
.os-key:hover { text-decoration:underline !important; }
.os-doc, .os-doc:link, .os-doc:visited, .os-doc:active { display:inline-flex; align-items:center; gap:4px; margin-top:5px;
font-size:var(--os-fs-sm); font-weight:600; color:var(--os-c1) !important; text-decoration:none !important; }
.os-doc:hover { text-decoration:underline !important; }
.os-doc svg { width:12px; height:12px; flex:0 0 auto; }
.os-back, .os-back:link, .os-back:visited, .os-back:active { font-size:var(--os-fs-chip); font-weight:600; color:var(--os-c1) !important; text-decoration:none !important; }
.os-back:hover { text-decoration:underline !important; }
/* --- Leerzustand -------------------------------------------------------- */
.os-empty { padding:46px 24px; text-align:center; border:1px dashed var(--os-brd); border-radius:var(--os-radius); background:var(--os-alt); }
.os-empty svg { width:38px; height:38px; color:#c3c6d2; margin:0px auto 12px auto; display:block; }
.os-empty p { margin:0px; color:var(--os-mut); font-size:14px; text-align:center !important; }
/* --- Mobil -------------------------------------------------------------- */
@media all and (max-width:820px)
{
.os-cards { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }
.os-card { padding:14px; border-radius:11px; }
.os-card-value { font-size:19px; }
.os-cards.is-lg .os-card { padding:16px; border-radius:12px; }
.os-cards.is-lg .os-card-value { font-size:22px; }
.os-tabs { justify-content:flex-start; }
/* .os-tbl.is-stack klappt schmale Tabellen in Karten um (data-lbl je td nötig) */
.os-wrap.is-stack { border:none; border-radius:0px; background:none; box-shadow:none; overflow:visible; }
.os-wrap.is-stack .os-scroll, .os-scroll.is-stack { overflow-x:visible; }
.os table.os-tbl.is-stack thead { display:none; }
.os table.os-tbl.is-stack, .os table.os-tbl.is-stack tbody,
.os table.os-tbl.is-stack tr, .os table.os-tbl.is-stack td { display:block; width:100%; }
.os table.os-tbl.is-stack tr { border:1px solid var(--os-brd); border-radius:12px; background:#fff;
margin:0px 0px 12px 0px; padding:5px 2px; box-shadow:0 3px 10px rgba(20,24,40,0.04); }
.os table.os-tbl.is-stack td, .os table.os-tbl.is-stack tbody tr:first-child td {
display:flex; align-items:flex-start; justify-content:space-between; gap:16px; border:none !important;
border-top:1px solid #f4f4f7 !important; padding:9px 14px !important; text-align:right; }
.os table.os-tbl.is-stack tr td:first-child { border-top:none !important; }
.os table.os-tbl.is-stack tbody tr:hover td { background:#fff !important; }
.os table.os-tbl.is-stack td:before { content:attr(data-lbl); flex:0 0 auto; text-align:left; font-size:var(--os-fs-lbl);
font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--os-mut); padding-top:2px; }
.os table.os-tbl.is-stack td.is-empty { display:none; }
.os table.os-tbl.is-stack .os-code, .os table.os-tbl.is-stack .os-tag { text-align:right; }
}
|