/* ============================================================================ STYLE: Papier / Report — ruhige, flache DOKUMENT-/REPORT-Anmutung für die EF-Web-DOM (Portal index.html + nve/hub styles.css + hub/dashboard.html). Signatur (CHARAKTER, KEINE feste Palette): flach (Schatten weg / auf hauch- dünne 1px-Hairlines reduziert), keine Verläufe/Glows; dünne, dezente Theme-Border als klare Trennlinien zwischen Sektionen; fast eckige Kanten (kleiner Radius ~3–4px) für seriösen Druck-Look; Überschriften in SERIFE (Georgia/Times) wie ein gesetzter Geschäftsbericht, Fließtext/Daten bleiben sans/inherit; ruhige Report-Tabellen mit dezentem Zebra (color-mix aus --fg), 1px-Kopf-Trennlinie unter thead, kompakt-lesbares Padding, KEINE App-Hover- Hervorhebung; großzügiger Whitespace; Labels normal (nicht UPPERCASE). Akzent kommt aus dem Theme, aber dezent eingesetzt (Links/Buttons). FARB-ORTHOGONALITÄT: alle Farben über Theme-Variablen / color-mix daraus — NIE hart „weiß" erzwingen. So wirkt Papier auf hellen Themes wie Druck und bleibt auf dunklen Themes konsistent (flaches dunkles Papier). Aktiv NUR bei . JEDE Regel ist gescoped. ============================================================================ */ /* ---- Serifen-Token + flacher Grundcharakter ---- */ html[data-style="papier"] { --paper-serif: Georgia, "Times New Roman", "Times", serif; /* dezent abgesetzte Flächen für Zebra/Trennlinien, theme-adaptiv */ --paper-zebra: color-mix(in srgb, var(--fg, var(--text)) 4%, transparent); --paper-line: color-mix(in srgb, var(--fg, var(--text)) 14%, transparent); } /* Überschriften (Portal + NVE/HUB) in Serife — Report-Gefühl. Fließtext bleibt sans (kein font-family-Reset auf body). */ html[data-style="papier"] h1, html[data-style="papier"] h2, html[data-style="papier"] h3, html[data-style="papier"] .card > h2, html[data-style="papier"] .ct, html[data-style="papier"] .menu-title, html[data-style="papier"] .dp-title, html[data-style="papier"] .gate-box h2, html[data-style="papier"] .fb-modal h2 { font-family: var(--paper-serif); font-weight: 700; letter-spacing: 0; } html[data-style="papier"] h1 { font-weight: 700; } /* Labels normal (nicht versal-schreierisch) — Druck-Look statt App-Caps. */ html[data-style="papier"] label, html[data-style="papier"] .stat-card .label, html[data-style="papier"] th { text-transform: none; letter-spacing: 0.2px; font-weight: 600; } /* =========================================================================== PORTAL (index.html) — Variablen: --card --card-h --text --muted --border --nve --hub --page-bg =========================================================================== */ /* Topbar als flache Dokument-Kopfzeile: nur 1px-Unterlinie, kein Schatten. */ html[data-style="papier"] .topbar { background: var(--card, var(--bg-card)); border-bottom: 1px solid var(--border); box-shadow: none; } html[data-style="papier"] .brand { font-family: var(--paper-serif); letter-spacing: 0; } html[data-style="papier"] .brand .dot { color: var(--nve); } html[data-style="papier"] .theme-sel, html[data-style="papier"] .fb-btn { background: var(--card); border: 1px solid var(--border); border-radius: 3px; box-shadow: none; } html[data-style="papier"] .fb-btn:hover { border-color: var(--nve); background: var(--card-h); } /* Portal-Bereichskarten (.grid > .card): flache Dokument-Kacheln, Hairline- Rahmen, eckig, kein Lift/Schatten. Akzent-Topstrich dezent (1px). */ html[data-style="papier"] .grid > .card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } html[data-style="papier"] .grid > .card:hover { transform: none; background: var(--card); border-color: var(--paper-line); } html[data-style="papier"] .card.nve:hover { border-color: color-mix(in srgb, var(--nve) 50%, var(--border)); } html[data-style="papier"] .card.hub:hover { border-color: color-mix(in srgb, var(--hub) 50%, var(--border)); } html[data-style="papier"] .card::before { height: 1px; } html[data-style="papier"] .card.nve::before { background: var(--nve); } html[data-style="papier"] .card.hub::before { background: var(--hub); } html[data-style="papier"] .ic { border-radius: 4px; background: color-mix(in srgb, var(--fg, var(--text)) 5%, transparent); } html[data-style="papier"] .card.nve .ic { background: color-mix(in srgb, var(--nve) 10%, transparent); } html[data-style="papier"] .card.hub .ic { background: color-mix(in srgb, var(--hub) 10%, transparent); } html[data-style="papier"] .card.nve .go { color: var(--nve); } html[data-style="papier"] .card.hub .go { color: var(--hub); } /* Feedback-Modal + Login-Gate: flache, eckigere Boxen mit Hairline. */ html[data-style="papier"] .fb-modal, html[data-style="papier"] .gate-box { background: var(--card); border: 1px solid var(--border); border-radius: 5px; box-shadow: none; } html[data-style="papier"] .fb-modal input, html[data-style="papier"] .fb-modal textarea, html[data-style="papier"] .gate-box input { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; } html[data-style="papier"] .fb-modal input:focus, html[data-style="papier"] .fb-modal textarea:focus, html[data-style="papier"] .gate-box input:focus { border-color: var(--nve); } html[data-style="papier"] .fb-row button, html[data-style="papier"] .gate-box button { border-radius: 3px; } html[data-style="papier"] .fb-cancel { border-radius: 3px; } /* =========================================================================== NVE / HUB (nve/styles.css + hub/styles.css) — Variablen: --bg --bg-card --bg-card-hover --fg --fg-muted --accent --accent-hover --accent-fg --success --warning --error --border --radius --shadow =========================================================================== */ /* Topbar (nve/hub): flache Kopfzeile, 1px-Unterlinie, kein Schatten. */ html[data-style="papier"] .topbar { box-shadow: none; border-bottom: 1px solid var(--border); } html[data-style="papier"] .topbar .home, html[data-style="papier"] .topbar .back { border-radius: 3px; } html[data-style="papier"] .topbar .home:hover { border-color: var(--accent); } /* Karten / Sektionen: flach an den Rand, Hairline-Rahmen, kein Schatten. */ html[data-style="papier"] .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } /* Stat-Karten: ruhige Report-Kacheln, flach, eckig. */ html[data-style="papier"] .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } html[data-style="papier"] .stat-card .value { color: var(--fg); } html[data-style="papier"] .stat-card .label, html[data-style="papier"] .stat-card .sub { color: var(--fg-muted); } /* Menü-Karten (NVE-Startseite): flache Dokument-Kacheln, kein Lift. */ html[data-style="papier"] .menu-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } html[data-style="papier"] .menu-card:hover { background: var(--bg-card-hover); } /* primary als dezent getönte Karte mit Akzent-Rand (statt knalliger Vollfläche), Text bleibt --fg → in jedem Theme lesbar. */ html[data-style="papier"] .menu-card.primary { background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--fg); } html[data-style="papier"] .menu-card.primary:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card-hover)); } html[data-style="papier"] .menu-card.primary .menu-title, html[data-style="papier"] .menu-card.primary .menu-icon { color: var(--fg); } html[data-style="papier"] .menu-card.primary .menu-sub { color: var(--fg-muted); } /* Buttons: dezenter Akzent, eckig, flach (kein Schatten). */ html[data-style="papier"] .btn { background: var(--accent); color: var(--accent-fg, #fff); border: 1px solid var(--accent); border-radius: 3px; box-shadow: none; font-weight: 600; } html[data-style="papier"] .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } html[data-style="papier"] .btn-secondary { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); } html[data-style="papier"] .btn-secondary:hover { background: var(--bg-card-hover); } html[data-style="papier"] .btn-danger { background: var(--error); border-color: var(--error); } /* Formularfelder: flach, eckig, 1px-Hairline. */ html[data-style="papier"] input, html[data-style="papier"] select, html[data-style="papier"] textarea { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; } html[data-style="papier"] input:focus, html[data-style="papier"] select:focus, html[data-style="papier"] textarea:focus { border-color: var(--accent); } /* Chips: ruhige, fast eckige Tags. */ html[data-style="papier"] .chip { background: color-mix(in srgb, var(--fg, var(--text)) 6%, transparent); border: 1px solid var(--border); border-radius: 3px; } html[data-style="papier"] .chip.standort { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: color-mix(in srgb, var(--accent) 45%, var(--fg)); } /* Alerts: flacher Hairline-Block, kein Verlauf. */ html[data-style="papier"] .alert { background: color-mix(in srgb, var(--error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--error) 45%, var(--border)); border-radius: 4px; } html[data-style="papier"] .alert.success { background: color-mix(in srgb, var(--success) 8%, transparent); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); } html[data-style="papier"] .alert.info { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* ---- Report-Tabellen: ruhig, dezentes Zebra, klare Kopf-Trennlinie ---- */ html[data-style="papier"] .table-wrap { border: 1px solid var(--border); border-radius: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-style="papier"] table { width: 100%; border-collapse: collapse; } html[data-style="papier"] th, html[data-style="papier"] td { text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--fg, var(--text)) 8%, transparent); } html[data-style="papier"] th { background: transparent; color: var(--fg-muted); font-weight: 600; /* klare 1px-Kopf-Trennlinie unter thead */ border-bottom: 1px solid var(--paper-line); } /* dezenter Zebra-Streifen (theme-adaptiv via color-mix) */ html[data-style="papier"] tbody tr:nth-child(even) td { background: var(--paper-zebra); } /* sehr dezenter Hover (kein App-Highlight) */ html[data-style="papier"] tr:hover td { background: color-mix(in srgb, var(--fg, var(--text)) 6%, transparent); } html[data-style="papier"] td .row-actions button { border-radius: 3px; box-shadow: none; } /* Toolbar: flacher Strip, kein Schatten. */ html[data-style="papier"] .toolbar { box-shadow: none; } html[data-style="papier"] .tb-actions .btn { border-radius: 3px; } /* Empty-State: ruhiger, gedämpfter Report-Block. */ html[data-style="papier"] .empty-state, html[data-style="papier"] td.empty-state { color: var(--fg-muted); } /* Recent-Scans / Timeline / Scan-Result: flache Hairline-Listen. */ html[data-style="papier"] .scan-item, html[data-style="papier"] .timeline-item, html[data-style="papier"] .scan-result { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; } html[data-style="papier"] .timeline::before { background: var(--border); } /* =========================================================================== HUB-DASHBOARD-EIGENER danach. Daher gewinnt der Seiten-