/* =================================================================== EASYBAKUS – DESIGN-TOKENS & BASISKLASSEN (Startpaket S01) ------------------------------------------------------------------- Additive Designsprache aus dem GENEHMIGTEN Mockup docs/issues/tectly-integration/mockups/eingabe-ui-mockup.html. Regeln (verbindlich): - Rein ADDITIV. Verändert keine bestehenden Selektoren/Tokens. Alle Klassen sind `eb-`-präfixiert (kollisionsfrei mit Bootstrap und mit themes.css/app.css). - Alle Folge-Issues (S02–S06, FK01–FK05) stylen AUSSCHLIESSLICH über diese Tokens. - Theme-Konvention wie themes.css: `:root, [data-theme="dark"]` = Dark (Default der App – App ist dark-locked via ThemeService), `[data-theme="light"]` = Light. Die Mockup-Werte sind hierauf REMAPPT: Mockup-Dark → Dark-Block, Mockup-Light → Light-Block. - `prefers-color-scheme` wird bewusst NICHT genutzt: die App setzt `data-theme` hart auf ; ein Media-Query würde die App-Mechanik nur verwirren. =================================================================== */ /* ─── Dark (Default der App) ─────────────────────────────────────────── An das BESTEHENDE App-Theme angeglichen (themes.css / Navbar): Slate- Palette + Corporate-Mint #B0E0B6 statt der ursprünglichen Mockup-Grün- töne. So sitzen alle eb-Bausteine farblich auf demselben Untergrund wie die restliche App (kein zu dunkler Sonder-Hintergrund mehr). */ :root, [data-theme="dark"] { --bg: #0F172A; /* = themes.css --body-bg */ --surface: #1E293B; /* = --bg-light (Karten/Panels) */ --surface2: #334155; /* = --bg-white (erhabene Fläche) */ --ink: #E5E7EB; /* = --text-dark */ --ink2: #94A3B8; /* = --text-light */ --line: #475569; /* = --border-color */ --accent: #B0E0B6; /* = --primary-color (Corporate-Mint) */ --accent-ink: #D4F0D8; /* = --primary-light (Text auf accent-soft) */ --accent-soft: rgba(176, 224, 182, 0.14); --accent-contrast: #0F172A; /* lesbarer Text AUF gefüllter accent-Fläche (blasses Mint) */ --ok: #6FBF85; --ok-soft: rgba(111, 191, 133, 0.15); --def: #8FB0E0; --def-soft: rgba(143, 176, 224, 0.15); --miss: #E0A44E; --miss-soft: rgba(224, 164, 78, 0.15); --man: #94A3B8; --man-soft: rgba(148, 163, 184, 0.15); --zoneA: #B0E0B6; --zoneA-soft: rgba(176, 224, 182, 0.14); --warn-dot: #E0A44E; --ok-dot: #6FBF85; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); } /* ─── Light ───────────────────────────────────────────────────────────── Ebenfalls an das App-Light-Theme (themes.css [data-theme="light"]) angeglichen: neutrale Grautöne + Corporate-Mint. */ [data-theme="light"] { --bg: #F5F5F5; /* = themes.css --body-bg (light) */ --surface: #FFFFFF; /* = --bg-white (light) */ --surface2: #ECECEC; --ink: #333333; /* = --text-dark (light) */ --ink2: #666666; /* = --text-light (light) */ --line: #D0D0D0; /* = --card-border (light) */ --accent: #B0E0B6; /* = --primary-color */ --accent-ink: #2B5E38; /* = --primary-text (lesbares Grün auf hell) */ --accent-soft: rgba(176, 224, 182, 0.25); --accent-contrast: #14432A; /* lesbarer Text AUF gefüllter accent-Fläche */ --ok: #2E7D46; --ok-soft: rgba(46, 125, 70, 0.12); --def: #3563A8; --def-soft: rgba(53, 99, 168, 0.12); --miss: #B26A00; --miss-soft: rgba(178, 106, 0, 0.12); --man: #5A6662; --man-soft: rgba(90, 102, 98, 0.12); --zoneA: #2B5E38; --zoneA-soft: rgba(176, 224, 182, 0.25); --warn-dot: #C97E10; --ok-dot: #2E7D46; --shadow: 0 1px 2px rgba(20,30,27,.06), 0 4px 14px rgba(20,30,27,.07); } /* =================================================================== BASISKLASSEN (Markup-neutral, aus dem Mockup, `eb-`-präfixiert) =================================================================== */ /* Tabellenziffern */ .eb-num { font-variant-numeric: tabular-nums; } /* Abschnitts-Label */ .eb-sect { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); margin: 0 0 6px; } /* ─── Stepper-Pills (.eb-steps > .eb-step) ─── */ .eb-steps { display: flex; gap: 8px; flex-wrap: wrap; } .eb-step { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink2); font-size: 13.5px; } .eb-step b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--ink2); } .eb-step.done { color: var(--ink); } .eb-step.done b { background: var(--ok-soft); color: var(--ok); } .eb-step.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .eb-step.active b { background: rgba(0,0,0,.12); color: var(--accent-contrast); } /* ─── Chip ─── */ .eb-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink2); cursor: pointer; } .eb-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } /* ─── Karte ─── */ .eb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .eb-pcard { padding: 14px 16px; } /* ─── KPI-Kachel (aus bericht-mockup .kpi) ─── */ .eb-kpi { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 9px 11px; background: var(--surface); } .eb-kpi .k { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); display: flex; align-items: center; gap: 6px; } .eb-kpi .k .bi { color: var(--accent); } .eb-kpi .v { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .eb-kpi-unit { font-size: 12px; font-weight: 600; color: var(--ink2); } /* ─── FK02: EbCard-Struktur (Header/Body/Footer/Akzent) ─── */ .eb-card--accent { border-left: 4px solid var(--accent); } .eb-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .eb-card-header.is-collapsible { cursor: pointer; } /* Wie EbPageHeader/EbSectionHeader: Heading-Token statt --ink — dunkelgrün auf hellen Flächen (.mgr/.admin-page), Mint auf dunklen. Hält die Kartentitel im Report farblich identisch zu den bisherigen .card-head (var(--heading)). */ .eb-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--primary-heading, var(--ink)); display: flex; align-items: center; gap: 8px; } .eb-card-title .bi { color: var(--primary-color, var(--accent)); } .eb-card-chevron { margin-left: auto; color: var(--ink2); } .eb-card-body { padding: 14px 16px; } /* Randlos: Inhalt stößt bündig an den Kartenrahmen (Tabellen im Report). overflow/radius sorgen dafür, dass die Tabelle die runden Ecken nicht überragt. */ .eb-card-body.is-flush { padding: 0; overflow: hidden; border-radius: 0 0 12px 12px; } .eb-card-footer { padding: 12px 16px; border-top: 1px solid var(--line); } /* ─── FK02: EbSectionHeader ─── */ .eb-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } /* Wie EbPageHeader: Heading-Token statt --ink, damit die Überschrift auf hellen Container-Flächen (.mgr/.admin-page) nicht hellgrau erscheint. */ .eb-section-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--primary-heading, var(--ink)); display: flex; align-items: center; gap: 8px; } .eb-section-title .bi { color: var(--primary-color, var(--accent)); } .eb-section-desc { margin: 2px 0 0; font-size: 13px; color: var(--text-medium, var(--ink2)); } .eb-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* ─── Quelle-Badges E/D/F/M ─── */ .eb-q { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; border-radius: 4px; padding: 1px 6px; white-space: nowrap; } .eb-qE { background: var(--ok-soft); color: var(--ok); } .eb-qD { background: var(--def-soft); color: var(--def); } .eb-qF { background: var(--miss-soft); color: var(--miss); } .eb-qM { background: var(--man-soft); color: var(--man); } /* ─── Ampelpunkt ─── */ .eb-amp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .eb-amp.ok { background: var(--ok-dot); } .eb-amp.warn { background: var(--warn-dot); } .eb-amp.miss { background: var(--miss); } .eb-ampel { display: inline-flex; align-items: center; gap: 6px; } .eb-ampel-text { font-size: 13px; color: var(--ink2); } /* ─── FK03: Status-Badge (Pill) ─── */ .eb-badge { display: inline-flex; align-items: center; gap: 5px; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .eb-badge--ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .eb-badge--warnung { background: var(--miss-soft); color: var(--miss); border-color: var(--miss); } .eb-badge--fehler { background: rgba(220,53,69,.14); color: #dc3545; border-color: #dc3545; } .eb-badge--info { background: var(--def-soft); color: var(--def); border-color: var(--def); } .eb-badge--neutral { background: var(--man-soft); color: var(--man); border-color: var(--line); } /* ─── FK04: EbModal-Größen (Rahmen/Optik bleibt .modal aus app.css) ─── */ /* Breiten mit der Basis `.modal` (app.css) mitgezogen — dort auf 640px erhöht, weil die inhaltsreichen Kauf-/PDF-Dialoge in 520px unnötig hoch wurden. Scroll-/Höhenverhalten erbt aus `.modal`. */ .modal.eb-modal--s { max-width: 480px; } .modal.eb-modal--m { max-width: 640px; } .modal.eb-modal--l { max-width: 900px; } .modal[role="dialog"]:focus { outline: none; } /* ─── FK03: EbTable (einfache Listen, ohne Paging) ─── */ .eb-table-wrap { overflow-x: auto; } .eb-table { width: 100%; border-collapse: collapse; background: var(--surface); color: var(--ink); font-size: 13.5px; } .eb-table th, .eb-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .eb-table thead th { background: var(--surface2); color: var(--ink); font-weight: 600; font-size: 12.5px; letter-spacing: .03em; white-space: nowrap; } .eb-table tbody tr:last-child td { border-bottom: 0; } .eb-table.is-zebra tbody tr:nth-child(even) { background: var(--surface2); } .eb-table .eb-num, .eb-table td.eb-num { font-variant-numeric: tabular-nums; } .eb-table-empty td { color: var(--ink2); font-style: italic; text-align: center; padding: 14px 10px; } /* ─── Formularzeile (horizontal: Label · Eingabe · Einheit) ─── Feste Spalten: Label : Eingabe = 3 : 1, plus schmale Einheiten-Spalte. Dadurch starten alle Eingaben an derselben x-Position und sind gleich breit („in einer Flucht"); die Zahlenfelder sind bewusst schmal (≈ 6 Ziffern). Selects (Dropdown-Text statt Zahl) reichen bis in die Einheiten-Spalte, bleiben aber linksbündig in derselben Flucht. */ .eb-frow { display: grid; /* Label : Eingabe = 2 : 1 (Label schmaler, bricht bei ganzen Wörtern um), plus feste Einheiten-Spalte. Alle Eingaben (Zahl/Text/Select/Datum) liegen in derselben 1fr-Spalte → EINHEITLICHE Breite und Flucht. */ /* minmax(0, …) fixiert die Spalten auf ihren fr-Anteil, damit ein langes Kompositum im Label die Eingabespalte NICHT verschmälert → alle Eingaben exakt gleich breit. */ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 2.6rem; gap: 8px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); } .eb-frow label { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink2); line-height: 1.25; /* Umbruch bevorzugt an Wortgrenzen; überlange Komposita brechen erst, wenn sie allein die Spalte sprengen würden. */ overflow-wrap: break-word; } .eb-frow .required { color: #dc3545; } .eb-frow .eb-frow-help { margin-left: .1rem; color: var(--ink2); cursor: help; font-size: .85em; } .eb-frow input, .eb-frow select { font: inherit; font-size: 14px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; } /* Alle Eingaben (Zahl/Text/Select/Datum) teilen sich dieselbe 1fr-Spalte → einheitliche Breite; kein Sonder-Span mehr. */ .eb-frow-trailing { display: flex; align-items: center; gap: 6px; justify-self: start; } .eb-frow-unit { font-size: 12px; color: var(--ink2); white-space: nowrap; } /* ─── Element-/Raum-Leiste ─── */ .eb-rail { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; } .eb-rchip { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 13px; font-size: 13px; cursor: pointer; color: var(--ink); } .eb-rchip .dot { width: 8px; height: 8px; border-radius: 50%; } .eb-rchip.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; color: var(--accent-ink); } /* ─── Warn-Banner ─── */ .eb-banner { display: flex; gap: 9px; align-items: center; background: var(--miss-soft); color: var(--miss); border: 1px solid var(--miss); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; } .eb-banner a { color: inherit; font-weight: 700; } /* ─── Einheitlicher Fokus-Ring für interaktive eb-Bausteine ─── */ .eb-chip:focus-visible, .eb-rchip:focus-visible, .eb-frow input:focus-visible, .eb-frow select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }