/* ================================================================ Mini Lager · Design System (mobile-first / responsive) ================================================================ */ /* ── Custom Properties ───────────────────────────────────────── */ :root { /* Brand palette */ --surface: #ffffff; --surface-2: #F4F7F9; --heading: #193441; --body: #334155; --muted: #64748B; --nav-bg: #1C3B4A; --accent: #679533; --accent-hover: #527A28; --accent-soft: rgba(103,149,51,.13); --border: #D6DEE4; --page-bg: #DCE3E8; --row-hover: #f7fafc; /* Semantic status */ --green: #16a34a; --green-bg: #dcfce7; --amber: #d97706; --amber-bg: #fef3c7; --red: #dc2626; --red-bg: #fee2e2; --blue: #0284c7; --blue-bg: #dbeafe; --purple: #7c3aed; --purple-bg:#ede9fe; /* Backwards-compat */ --fg: #334155; --bg: #ffffff; --line: #D6DEE4; --primary: #679533; /* Shadows */ --shadow-xs: 0 1px 2px rgba(25,52,65,.06); --shadow-sm: 0 1px 3px rgba(25,52,65,.10), 0 1px 2px rgba(25,52,65,.06); --shadow: 0 4px 8px rgba(25,52,65,.10), 0 2px 4px rgba(25,52,65,.05); --shadow-lg: 0 12px 24px rgba(25,52,65,.14), 0 4px 8px rgba(25,52,65,.08); /* Geometry */ --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Layout */ --sidebar-w: 228px; --topbar-h: 52px; /* Touch-target */ --tap: 40px; } /* ── Dark Mode ───────────────────────────────────────────────── Aktivierung über data-theme="dark" am -Element. */ html[data-theme="dark"] { --surface: #1f2933; --surface-2: #18212b; --heading: #e2e8f0; --body: #cbd5e1; --muted: #94a3b8; --nav-bg: #0f1620; --accent: #88c252; --accent-hover: #a3d671; --accent-soft: rgba(136,194,82,.18); --border: #2c3a48; --page-bg: #0a121b; --row-hover: #1d2934; --fg: #cbd5e1; --bg: #1f2933; --line: #2c3a48; } html[data-theme="dark"] .flash { background: #2a2519; color: #fde68a; border-color: #b78c1f; } html[data-theme="dark"] .flash.success { background: #14271a; color: #bbf7d0; border-color: #166534; } html[data-theme="dark"] .flash.warning { background: #2a2519; color: #fde68a; border-color: #b78c1f; } html[data-theme="dark"] .flash.error { background: #2a1718; color: #fecaca; border-color: #b91c1c; } html[data-theme="dark"] table tr:nth-child(even) td { background: #1a2330; } html[data-theme="dark"] tbody tr:hover td { background: #243140; } html[data-theme="dark"] .order-card { background: #1d2934; border-color: var(--border); } html[data-theme="dark"] .order-header, html[data-theme="dark"] .order-footer { background: #18212b; } html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #18212b; color: #cbd5e1; border-color: var(--border); } /* ── Reset / Base ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { -webkit-text-size-adjust: 100%; } body { margin: 0; padding-left: var(--sidebar-w); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--body); background: var(--page-bg); min-height: 100vh; overflow-x: hidden; /* niemals horizontal scrollen */ } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4 { color: var(--heading); margin: 0; font-weight: 700; } /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--nav-bg); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; overflow-y: auto; z-index: 200; scrollbar-width: thin; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); } .brand-logo { width: 30px; height: 30px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; } .brand-name { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.2; } .brand-sub { font-size: 10.5px; color: rgba(255,255,255,.4); } .nav-section-label { padding: 14px 18px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(255,255,255,.3); } .nav-item { display: flex; align-items: center; gap: 9px; min-height: var(--tap); padding: 8px 12px 8px 16px; margin: 1px 8px; border-radius: 7px; color: rgba(255,255,255,.68); font-size: 13.5px; font-weight: 500; transition: background .13s, color .13s; cursor: pointer; border: none; background: transparent; width: calc(100% - 16px); text-align: left; font-family: inherit; line-height: 1.4; } .nav-item:hover { background: rgba(255,255,255,.09); color: #fff; } .nav-item.active { background: var(--accent); color: #fff; font-weight: 600; } .nav-icon { font-style: normal; width: 16px; text-align: center; opacity: .75; flex-shrink: 0; font-size: 13px; } .nav-item.active .nav-icon { opacity: 1; } .sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding: 10px 8px 14px; } .sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 2px; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .user-info { min-width: 0; } .user-info .username { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-badge { display: inline-block; font-size: 10px; background: rgba(255,255,255,.12); padding: 1px 7px; border-radius: 10px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .4px; } /* ── Page Wrapper / Main ─────────────────────────────────────── */ .page-wrapper { min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar-title { font-size: 13px; font-weight: 600; color: var(--muted); } .topbar-user { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } main { padding: 22px 28px 32px; max-width: 1440px; width: 100%; } main.wide { max-width: 100%; } /* ── Page Header ─────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .page-title { font-size: 21px; font-weight: 800; color: var(--heading); letter-spacing: -0.3px; margin: 0; } .page-header-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 14px; min-width: 0; /* erlaubt flex/grid-Schrumpfen */ } .card-sm { padding: 12px 14px; } .card-lg { padding: 22px; } .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .card-title { font-size: 14px; font-weight: 700; color: var(--heading); } .card-subtitle { font-size: 12px; color: var(--muted); margin-top: 1px; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--body); font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background .13s, border-color .13s, color .13s, transform .1s; font-family: inherit; text-decoration: none; } .btn:hover { background: var(--surface-2); border-color: #b8c5cc; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.secondary { background: var(--surface-2); color: var(--muted); } .btn.secondary:hover { color: var(--body); } .btn.danger { color: var(--red); border-color: #fca5a5; background: var(--surface); } .btn.danger:hover { background: var(--red-bg); border-color: var(--red); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); border-color: var(--border); } .btn.sm { padding: 4px 10px; font-size: 12px; min-height: 30px; border-radius: 6px; } .btn.lg { padding: 11px 22px; font-size: 15px; min-height: 44px; } .btn.icon { padding: 7px 10px; } .btn.block { width: 100%; justify-content: center; } /* ── Form Controls ───────────────────────────────────────────── */ label, .form-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.45px; } input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--body); background: var(--surface); box-sizing: border-box; font-family: inherit; transition: border-color .13s, box-shadow .13s; max-width: 100%; } input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { min-height: 80px; resize: vertical; line-height: 1.5; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; } select { cursor: pointer; } .form-group { margin-bottom: 16px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .form-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; } /* ── Tables ──────────────────────────────────────────────────── */ .table-wrap, .tbl-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 14px; } /* Standard horizontaler Scroll-Container für Tabellen. Eltern-Element bekommt ein subtiles Schatten-Hint, damit klar wird, dass weiter rechts noch Inhalt liegt. Verwendbar als
…
*/ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: linear-gradient(to right, var(--surface) 30%, transparent), linear-gradient(to right, transparent, var(--surface) 70%) right, linear-gradient(to right, rgba(0,0,0,.08), transparent), linear-gradient(to left, rgba(0,0,0,.08), transparent) right; background-repeat: no-repeat; background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } table { width: 100%; border-collapse: collapse; } th { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.55px; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 1; } td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--body); font-size: 13px; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--row-hover); } /* ── Badges / Status ─────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .1px; } .badge-green { background: var(--green-bg); color: var(--green); } .badge-amber { background: var(--amber-bg); color: var(--amber); } .badge-red { background: var(--red-bg); color: var(--red); } .badge-blue { background: var(--blue-bg); color: var(--blue); } .badge-purple { background: var(--purple-bg); color: var(--purple); } .badge-gray { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* ── Alerts / Flash ──────────────────────────────────────────── */ .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid var(--blue); background: var(--blue-bg); margin-bottom: 16px; font-size: 13.5px; color: #1e40af; } .flash.success { border-color: var(--green); background: var(--green-bg); color: #14532d; } .flash.warning { border-color: var(--amber); background: var(--amber-bg); color: #78350f; } .flash.error { border-color: var(--red); background: var(--red-bg); color: #7f1d1d; } /* ── Filter / Search Bar ─────────────────────────────────────── */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow-xs); } .filter-bar input:not([type=checkbox]), .filter-bar select { width: auto; min-width: 140px; flex: 1; max-width: 320px; } /* ── Status Tabs ─────────────────────────────────────────────── */ .tab-bar { display: flex; gap: 4px; flex-wrap: nowrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 5px; margin-bottom: 16px; box-shadow: var(--shadow-xs); overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; min-height: 34px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: transparent; cursor: pointer; white-space: nowrap; transition: all .13s; font-family: inherit; } .tab:hover { background: var(--surface-2); color: var(--body); } .tab.active { background: var(--heading); color: #fff; font-weight: 600; } .tab .tab-count { font-size: 10px; background: rgba(255,255,255,.2); padding: 1px 6px; border-radius: 10px; } .tab:not(.active) .tab-count { background: var(--border); color: var(--muted); } /* ── KPI Cards (Dashboard) ───────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px 14px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; min-width: 0; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border); } .kpi-card.kpi-green::before { background: var(--green); } .kpi-card.kpi-amber::before { background: var(--amber); } .kpi-card.kpi-red::before { background: var(--red); } .kpi-card.kpi-blue::before { background: var(--blue); } .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.65px; color: var(--muted); margin-bottom: 8px; } .kpi-value { font-size: clamp(20px, 5vw, 28px); font-weight: 800; line-height: 1.15; color: var(--heading); letter-spacing: -0.5px; word-break: break-word; } .kpi-card.kpi-green .kpi-value { color: var(--green); } .kpi-card.kpi-red .kpi-value { color: var(--red); } .kpi-card.kpi-amber .kpi-value { color: var(--amber); } .kpi-card.kpi-blue .kpi-value { color: var(--blue); } .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.4; } /* ── Section Divider ─────────────────────────────────────────── */ .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Utility Classes ─────────────────────────────────────────── */ .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row.nowrap { flex-wrap: nowrap; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .right { margin-left: auto; } .muted { color: var(--muted); } .small { font-size: 12px; } .bold { font-weight: 700; } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-amber { color: var(--amber); } .mono { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .gap-sm { gap: 6px; } .nowrap { white-space: nowrap; } /* Hide-helpers (mobile-first) */ .hide-sm { display: none !important; } .hide-md { display: inline-block; } .hide-lg { display: inline-block; } code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; font-size: 12px; font-family: ui-monospace, "Cascadia Mono", monospace; color: var(--heading); word-break: break-all; } pre { background: var(--surface-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: var(--radius); font-size: 12px; font-family: ui-monospace, "Cascadia Mono", monospace; color: var(--heading); overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Details / Disclosure ────────────────────────────────────── */ details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; margin-bottom: 12px; overflow: hidden; /* verhindert dass aufgeklappte Elemente das Layout sprengen */ } details > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; color: var(--heading); user-select: none; position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--tap); } details > summary::-webkit-details-marker { display: none; } details > summary::after { content: '▾'; margin-left: auto; font-size: 11px; color: var(--muted); transition: transform .15s; } details[open] > summary::after { transform: rotate(180deg); } details > summary:hover { background: var(--surface-2); } details[open] > summary { border-bottom: 1px solid var(--border); } details > *:not(summary) { padding: 14px 18px; } /* Wenn details direkt eine Form enthält, Form-Padding raus */ details > form { padding: 14px 18px; } /* ── Responsive Tabs (horizontal scrollbar) ──────────────────── */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* ── Image Gallery ───────────────────────────────────────────── */ .img-gallery { display: flex; gap: 8px; flex-wrap: wrap; } .img-gallery img { width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: transform .15s, box-shadow .15s; } .img-gallery img:hover { transform: scale(1.04); box-shadow: var(--shadow); } /* ── Mobile: Hamburger Menu ──────────────────────────────────── */ .menu-toggle { display: none; position: fixed; top: 8px; left: 8px; z-index: 300; background: var(--nav-bg); border: none; border-radius: var(--radius); width: 40px; height: 40px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: var(--shadow); } .menu-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: all .2s; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 150; backdrop-filter: blur(2px); } /* ── Inline-Edit Helpers (universal) ─────────────────────────── */ td[data-col]:not([data-col=""]) { cursor: pointer; } td[data-col]:hover { outline: 2px solid var(--accent); outline-offset: -2px; } td.editing { padding: 2px 4px; } td.editing input, td.editing select { font-size: 13px; padding: 5px 7px; width: 100%; min-height: 30px; box-sizing: border-box; border-radius: 6px; } /* ── Form-Stack (mobil-tauglicher Form-Block) ────────────────── */ .form-stack > * + * { margin-top: 12px; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; } /* ── Mobile Action Bar (sticky bottom auf kleinen Screens) ───── */ .mobile-actions { display: none; } /* ════════════════════════════════════════════════════════════════ Responsive Breakpoints ════════════════════════════════════════════════════════════════ */ /* Tablet & small desktop */ @media (max-width: 1100px) { main { padding: 18px 22px 28px; } } /* Mobile: ≤ 960px → Sidebar-Drawer + 1-col Grids */ @media (max-width: 960px) { :root { --topbar-h: 48px; } body { padding-left: 0; } .topbar { padding: 0 14px 0 56px; height: 48px; } .sidebar { transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar.open + .sidebar-overlay { display: block; } main { padding: 14px 14px 24px; } .menu-toggle { display: flex; } .grid2 { grid-template-columns: 1fr; } .grid3 { grid-template-columns: 1fr 1fr; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .page-header { gap: 8px; margin-bottom: 14px; } .page-title { font-size: 19px; } .page-header-actions { width: 100%; margin-left: 0; } .page-header-actions .btn { flex: 1; min-width: 0; justify-content: center; } .card { padding: 14px; border-radius: 10px; } .card-lg { padding: 16px; } th { position: static; padding: 7px 10px; } td { padding: 7px 10px; } } /* Small phone: ≤ 640px → Single-col, Inputs füllen Breite */ @media (max-width: 640px) { main { padding: 12px 12px 20px; } .grid3 { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } .filter-bar { flex-direction: column; align-items: stretch; padding: 10px 12px; } .filter-bar input:not([type=checkbox]), .filter-bar select { max-width: 100%; min-width: 0; flex: 1 1 auto; } .filter-bar form, .filter-bar .row { width: 100%; } .filter-bar .row { flex-wrap: wrap; } .row { gap: 8px; } /* Buttons in einer Aktions-Reihe stacken/skalieren angenehmer */ .actions { gap: 6px; } .actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; } .actions .btn.block { flex-basis: 100%; } /* Form-Footer sticky am unteren Rand für lange Formulare */ .sticky-actions { position: sticky; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--border); margin: 16px -14px -14px; padding: 10px 14px; box-shadow: 0 -4px 10px rgba(0,0,0,.04); display: flex; gap: 8px; flex-wrap: wrap; } .sticky-actions .btn { flex: 1; min-width: 0; justify-content: center; } /* Inline-Forms mit eingebetteten Buttons sollten umbrechen */ .inline-form { flex-wrap: wrap; gap: 6px; } .inline-form > * { min-width: 0; } .inline-form input { flex: 1 1 140px; } /* Kleinere Page-Headers */ .page-title { font-size: 18px; } /* Topbar enger packen */ .topbar { padding: 0 12px 0 52px; } .topbar-user { display: none; } /* Bilder-Galerie-Größe verkleinern */ .img-gallery img { width: 64px; height: 64px; } /* Image-Cards in Grids automatisch anpassen */ .img-gallery { gap: 6px; } /* Helper-Klassen Mobile-Sichtbarkeit */ .hide-md { display: none !important; } /* Audit / Listentabellen lassen wir scrollen, gleichzeitig gibt es eine subtile Schatten-Andeutung (siehe .tbl-scroll) */ /* Tabellen-Aktionen (letzte Spalte) sollen nicht ausufern */ .actions-cell .btn { padding: 4px 8px; font-size: 12px; min-height: 28px; } /* status-chip kompakter auf small-screens */ .status-chip { font-size: 11px; padding: 2px 6px; } /* Toolbar zentriert */ .toolbar { gap: 6px; } /* Tab-bar scroll horizontal */ .tab-bar { padding: 4px; } .tab { font-size: 12.5px; padding: 6px 12px; } /* Order-Card-Header/Footer enger */ .order-card { border-radius: 10px; } .order-header, .order-footer { padding: 10px 12px !important; gap: 6px 12px !important; font-size: 12.5px !important; } .order-body { padding: 10px 12px !important; } } /* Very small / handheld: ≤ 420px */ @media (max-width: 420px) { .page-header-actions { gap: 6px; } .page-header-actions .btn { font-size: 12px; padding: 7px 10px; } .btn.lg { padding: 10px 16px; font-size: 14px; } .kpi-card { padding: 14px; } .kpi-value { font-size: 22px; } .hide-sm { display: none !important; } } /* Druck-Optimierung */ @media print { .sidebar, .topbar, .menu-toggle, .sidebar-overlay, .filter-bar, .tab-bar, .page-header-actions, .actions, .sticky-actions { display: none !important; } body { padding-left: 0; background: #fff; color: #000; } main { max-width: 100%; padding: 0; } .card { box-shadow: none; border-color: #ccc; break-inside: avoid; } }