/* ========================================================================= design-system.css — Fundament des Design-Overhauls (v3.8.0, Phase 1) ========================================================================= Vanilla CSS, kein Framework. Quelle der Tokens: PLAN.md (1:1 aus dem Bestand übernommen). Dieses Stylesheet liefert: 1. Tokens — :root-Variablen (Farben, Spacing, Radien, Typo) 2. Reset + Base — moderner Minimal-Reset, Basis-Typografie 3. Layout — App-Shell (Header / Content / Bottom-Nav) 4. Komponenten — Header, Navigation, Buttons, Cards, Formulare, Tabellen (inkl. mobil-Hybrid), Badges Naming: knüpft bewusst an die bestehenden Klassennamen an (.header, .footer, .nav-item, .container, .main-content, .card …), damit die Seiten-Migration in Phase 2+ überwiegend „altes Seiten-CSS raus, dieses Stylesheet rein" ist. Neue Komponenten (.btn, .field, .data-table, .badge) ersetzen die bisherigen ID-/Ad-hoc-Styles. Breakpoints (mobile-first, feste Zahlen — Media Queries können keine CSS-Variablen nutzen): 600 / 768 / 1024 / 1280. ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS Semantisch benannt, damit ein späterer Dark-Mode NUR denselben Variablensatz überschreiben muss (siehe [data-theme="dark"] unten). ------------------------------------------------------------------------- */ :root { /* Brand & Akzent */ --brand: #75bd48; --brand-dark: #65a23f; --match-green: #5ac138; /* QR-Treffer-Feedback */ --accent: #ffaa00; /* Info / Warnung */ --danger: #d23b3b; /* destruktive Aktionen (Löschen) */ /* Text & Flächen */ --text: #333333; --text-muted: #777777; --text-on-brand:#ffffff; --bg: #f9f9f9; --surface: #ffffff; --surface-alt: #f2f2f2; --header-bg: #e0e0e0; --border: #cccccc; /* Brand-Tints (Badges, Hover-Flächen) */ --brand-tint: #75bd4822; --accent-tint: #ffaa0022; --muted-tint: #99999933; /* Schatten */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1); --shadow-md: 0 2px 8px rgba(0, 0, 0, .2); --shadow-lg: 0 4px 16px rgba(0, 0, 0, .3); /* Spacing (4er-Raster) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Radien */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Typografie */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --fs-sm: .85rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fw-normal: 400; --fw-semibold: 600; --fw-bold: 700; /* Maße (Layout-Konstanten) */ --header-h: 56px; --nav-h: 64px; --content-max: 1200px; /* Inhaltsbreite auf großen Screens */ --tap-target: 48px; /* Mindest-Touch-Größe (iPhone-first) */ } /* Dark-Mode — VORBEREITET, aber dormant. Aktiviert sich nur, wenn jemand setzt. Inhalte bleiben unangetastet; nur die semantischen Flächen-/Text-Tokens kippen. Auto-Umschaltung per System lässt sich später durch Entkommentieren des prefers-color-scheme-Blocks ergänzen. Erst in einer späteren Version final ausgestalten (Tokens-Tür steht offen). */ :root[data-theme="dark"] { --text: #e8e8e8; --text-muted: #a0a0a0; --bg: #1a1a1a; --surface: #242424; --surface-alt: #2e2e2e; --header-bg: #2a2a2a; --border: #3a3a3a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --shadow-md: 0 2px 8px rgba(0, 0, 0, .5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, .6); } /* @media (prefers-color-scheme: dark) { :root { … gleiche Overrides … } } */ /* ------------------------------------------------------------------------- 2. RESET + BASE ------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* iOS: kein Auto-Zoom der Schrift */ -webkit-tap-highlight-color: transparent; } body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.45; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } h1, h2, h3 { line-height: 1.2; } h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); } /* FOUC-Guard — einheitliche Konvention. Seiten setzen + ein Inline-Script, das nach DOMContentLoaded die Klasse entfernt. Vereinheitlicht den bisher nur teilweise vorhandenen `body{display:none}`-Guard (index ja, add nein). */ body.preload { visibility: hidden; } /* Hilfsklasse: visuell verstecken, für Screenreader sichtbar */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Komplett ausblenden (Layout + a11y) — Toggle-Utility für JS (z. B. custom-item-add #result, korrektur #correction-section). */ .hidden { display: none !important; } /* ------------------------------------------------------------------------- 3. LAYOUT — App-Shell Volle Höhe: Header oben (fix), Content scrollt, Bottom-Nav unten (fix). ------------------------------------------------------------------------- */ .container { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; /* dynamische Viewport-Höhe (iOS-Adressleiste) */ } .main-content { flex: 1 1 auto; width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } /* Vertikaler Stapel mit Token-Gap — generischer Helfer */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--tight { gap: var(--space-2); } .stack--loose { gap: var(--space-6); } /* ------------------------------------------------------------------------- 4a. HEADER Markup (Phase-2-Ziel, siehe header.html): Logo/Wortmarke links, Aktionen rechts (Admin-Schild rollenabhängig + Info). Toleriert auch die bisherige zentrierte Logo-Variante (.header-middle). ------------------------------------------------------------------------- */ .header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--header-h); padding-inline: var(--space-5); background-color: var(--header-bg); } .header-brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); } .logo-image { height: 36px; width: auto; } /* Logo + Wortmarke gruppiert links (Aktionen bleiben rechts) */ .header-brand-group { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } /* Branding-Logik (White-Label-ready): - Kein Logo hinterlegt → nur Wortmarke (Fallback). - Logo hinterlegt (`header--has-logo`) → Logo UND Wortmarke nebeneinander ab großen Phones/Tablet/Desktop; auf dem iPhone hochkant (<600px) nur das Logo (Platz). */ .header .logo-image { display: none; } .header--has-logo .logo-image { display: block; } @media (max-width: 599px) { .header--has-logo .header-brand { display: none; } } /* zentrierte Logo-Variante (bestehendes Markup) */ .header-middle { position: absolute; left: 50%; transform: translateX(-50%); } .header-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; } .header-action { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); color: var(--text-muted); } .header-action--info { color: var(--accent); } /* Admin-Schild nur für Staff: standardmäßig versteckt, eingeblendet wenn include-layout.js .header--is-staff setzt (Rolle admin/supervisor). */ .header-action--admin { color: var(--brand); display: none; } .header--is-staff .header-action--admin { display: inline-flex; } /* ------------------------------------------------------------------------- 4b. BOTTOM-NAVIGATION 5 Items: Icon + Label. Aktiver Eintrag in Brand. Markup unverändert (.footer > .nav-item > a.custom-icon-link > .icon + span). ------------------------------------------------------------------------- */ .footer { flex: 0 0 auto; display: flex; justify-content: space-around; align-items: stretch; min-height: var(--nav-h); background-color: var(--header-bg); border-top: 1px solid var(--border); /* Normaler Fluss am unteren Rand des Shells. iOS standalone blendet (ohne viewport-fit=cover) den Home-Bar-Bereich automatisch aus; max() gibt zusätzlich etwas Luft. Always-visible-Nav bei langen Listen kommt in Phase 3 über internes Scrollen von .main-content — nicht über sticky (das überlappte in der iOS-PWA die Home-Bar). */ padding-bottom: max(10px, env(safe-area-inset-bottom)); } .nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2); font-size: var(--fs-sm); color: #555; /* dunkleres Grau für besseren Kontrast */ transition: color .12s ease; } .nav-item .icon { font-size: var(--fs-lg); color: inherit; } .custom-icon-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: inherit; } .nav-item:hover, .nav-item.active, .nav-item.active .custom-icon-link { color: var(--brand); } /* iPhone hochkant: nur Icons im Footer. Bei 5 Einträgen passen die Labels nicht nebeneinander (würden an den Rändern abgeschnitten) — daher hier ausblenden und die Icons etwas größer. Ab 600px (Phone quer / Tablet / Desktop) ist genug Platz, dann mit Labels. */ @media (max-width: 599px) { .nav-item span { display: none; } .nav-item .icon { font-size: 1.4rem; } } /* ------------------------------------------------------------------------- 4c. BUTTONS Basis .btn + Varianten. Touch-Höhe 48px. Ablöse für #update-button & Co. ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); padding: 0 var(--space-5); border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1; transition: background-color .12s ease, border-color .12s ease, color .12s ease; white-space: nowrap; } .btn--primary { background-color: var(--brand); color: var(--text-on-brand); } .btn--primary:hover { background-color: var(--brand-dark); } .btn--outline { background-color: var(--surface); border: 1px solid var(--border); color: var(--brand); } .btn--outline:hover { border-color: var(--brand); } .btn--outline.btn--danger:hover { border-color: var(--danger); } .btn--text { padding-inline: var(--space-2); color: var(--brand); } .btn--text:hover { color: var(--brand-dark); } .btn--danger { color: var(--danger); } .btn--danger.btn--primary { background-color: var(--danger); color: #fff; } .btn--block { display: flex; width: 100%; } /* kompakte Variante für Inline-Aktionen (z. B. Tabellen-Zeilen) */ .btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--fs-sm); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Zurück-Link für Sub-Seiten (Admin, Info, Lizenzen) — dezent, Brand on hover. Beide Namen erlaubt; .admin-back ist der Bestand. */ .back-link, .admin-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .back-link:hover, .admin-back:hover { color: var(--brand); } /* ------------------------------------------------------------------------- 4d. CARDS Ablöse für .product-info-card / .input-section-card. ------------------------------------------------------------------------- */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); } .card__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .card__row:last-child { border-bottom: none; } .card__label { color: var(--text-muted); font-weight: var(--fw-semibold); } .card__value { color: var(--text); text-align: right; } /* ------------------------------------------------------------------------- 4e. FORMULARE ------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); } .input, .field input, .field select, .field textarea { width: 100%; min-height: var(--tap-target); padding: 0 var(--space-3); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } .field textarea { padding: var(--space-3); min-height: 96px; resize: vertical; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } /* ------------------------------------------------------------------------- 4f. TABELLEN — Hybrid Desktop/iPad (>=768): klassische Tabelle. iPhone (<768): jede Zeile wird zu einer Karte; Spaltenüberschrift kommt per data-label vor den Wert. Markup: mit und je

in
ein data-label="…"-Attribut für den Karten-Modus. ------------------------------------------------------------------------- / .data-table { width: 100%; border-collapse: collapse; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .data-table thead { background-color: var(--surface-alt); } .data-table th { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-muted); padding: var(--space-3) var(--space-4); } .data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--text); } / iPhone: Karten-Stack / @media (max-width: 767px) { .data-table--stack thead { display: none; } .data-table--stack, .data-table--stack tbody, .data-table--stack tr, .data-table--stack td { display: block; width: 100%; } .data-table--stack { border: none; background: none; } .data-table--stack tr { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4); } .data-table--stack td { display: flex; align-items: center; gap: var(--space-3); border-top: none; padding: var(--space-2) 0; } / Label links, Wert(e) rechts in einer Flucht — auch bei mehreren Elementen in der Zelle (z. B. mehrere Aktions-Buttons). / .data-table--stack td::before { content: attr(data-label); margin-right: auto; font-weight: var(--fw-semibold); color: var(--text-muted); } } / ------------------------------------------------------------------------- 4g. BADGES (z. B. Rollen in der Benutzerverwaltung) ------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-bold); background-color: var(--muted-tint); color: var(--text-muted); } .badge--admin { background-color: var(--brand-tint); color: var(--brand); } .badge--supervisor { background-color: var(--accent-tint); color: #b97e00; }