/* * Zentrale Design-Grundwerte der Plattform Main-Appstudio ("Werksnorm"). * * Diese Datei wird auf jeder Seite als LETZTE Stil-Datei eingebunden und * überschreibt damit abweichende lokale Farbwerte der einzelnen Apps. * Abgeleitet aus den Referenz-Designs: Website, Q8D, ECR, Kundenportal. * * Regel: Neue Oberflächen verwenden ausschließlich diese Variablen. * Keine neuen Einzelfarbwerte in App-Stildateien anlegen. */ :root { color-scheme: light; /* Markenfarben */ --navy: #071b36; --navy-soft: #123050; --navy-2: var(--navy-soft); --aqua: #17c3c8; --aqua-text: #08777b; --aqua-dark: var(--aqua-text); --aqua-light: #9cf0e8; --aqua-soft: #e7f7f4; /* Text und Flächen */ --ink: #102135; --muted: #607083; --paper: #f5f8f7; --white: #ffffff; --line: rgba(7, 27, 54, .14); /* Statusfarben (Ampel) */ /* Ampelfarben Variante C (Beschluss 12.09.2026): zwei Ebenen je Farbe. Text-/Randtoene (--green, --amber, --red) bleiben dunkel und lesbar auf Weiss (Plaketten, Warntexte, Knoepfe). Flaechentoene (--*-flaeche) sind hell und frisch wie die Fensterknoepfe von macOS - NUR fuer reine Flaechen ohne Schrift: Ampelpunkte, Balken, Legendenkaestchen. Fuer solche Flaechen immer --ampel-gruen/--ampel-gelb/--ampel-rot verwenden. */ --green: #1f8b66; --green-text: #166a4d; --green-flaeche: #34c759; --success: var(--green); --amber: #8a6300; --amber-flaeche: #f5b73b; --warning: var(--amber); --red: #c23b3b; --red-text: #963030; --red-flaeche: #f25f5a; --danger: var(--red); --ampel-gruen: var(--green-flaeche); --ampel-gelb: var(--amber-flaeche); --ampel-rot: var(--red-flaeche); --blue: #275f8f; /* Form und Tiefe */ --radius: 28px; --shadow: 0 24px 70px rgba(7, 27, 54, .12); /* Schrift */ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Farbverlauf für dunkle Navigations-Panels (Vorbild: Kundenportal) */ --nav-verlauf: radial-gradient(circle at top right, rgba(23, 195, 200, .32), transparent 42%); /* Maß-Norm für kompakte Daten-/Adminformulare (Vorbild: Aufgaben/Kalkulation). Eine einzige Feldhöhe, ein Kartenmaß, ein Raster – damit Karten gleich breit und Felder gleich hoch sind und fluchten, ohne Nacharbeit je App. */ --ma-control-height: 48px; /* Höhe aller Felder UND Knöpfe im kompakten Formular */ --ma-field-radius: 12px; --ma-form-gap: 16px; /* Abstand zwischen Feldern im Raster */ --ma-card-radius: 16px; --ma-card-padding: 22px; --ma-field-min: 180px; /* Mindestbreite einer Rasterspalte, bevor umgebrochen wird */ } /* * Gemeinsame Interaktionsregeln. * * Dunkle Seitenmenüs erhalten den Kundenportal-Farbverlauf, und weiße * Schrift auf dunklen Knöpfen wird beim Daraufzeigen hell-türkis. * Gilt nur für dunkle Flächen — auf weißen Knöpfen bleibt die Schrift * marineblau, weil helles Türkis dort nicht lesbar wäre. */ .side-nav { background: var(--nav-verlauf), var(--navy); } .demo-sidebar .profile-card { background: var(--nav-verlauf), rgba(255, 255, 255, .08); } .nav-button:not(.is-active):hover, .nav-button:not(.is-active):focus-visible, .portal-nav button:not([aria-current="page"]):hover, .portal-nav button:not([aria-current="page"]):focus-visible, .role-switcher button:not([aria-pressed="true"]):hover, .role-switcher button:not([aria-pressed="true"]):focus-visible, .primary-action:hover, .primary-action:focus-visible, .success-action:hover, .success-action:focus-visible, .button-primary:hover, .button-primary:focus-visible { color: var(--aqua-light); } .mainapp-login-required-gate__primary:hover, .mainapp-login-required-gate__primary:focus-visible { color: var(--aqua-light) !important; } /* * =================================================================== * Maß-Norm für kompakte Formulare (opt-in) – SO SPAREN WIR NACHARBEIT * =================================================================== * * Ziel: gleiche Kartenbreite, gleiche Feldhöhe, saubere Flucht – einmal * festgelegt, überall gleich. Diese Regeln greifen NUR, wenn eine App sie * bewusst ansteuert (Klassen unten). Bestehende Oberflächen bleiben * unverändert, bis sie umgestellt werden. * * ANLEITUNG für neue (und umzustellende) Formulare: * 1) Dem
bzw. der Karte die Klasse ma-compact-form geben. * -> Alle Felder, Auswahlfelder und Knöpfe darin bekommen automatisch * dieselbe Höhe (--ma-control-height) und dasselbe Aussehen. * 2) Eine Reihe nebeneinander stehender Felder in einen Container mit * Klasse ma-form-grid legen. * -> Die Felder teilen sich die Breite gleichmäßig, brechen bei * Platzmangel um und fluchten oben (align-items: start). * 3) Für einheitliche Karten optional ma-card verwenden. * * Diese Datei lädt als LETZTE – deshalb übersteuert sie mit der höheren * Spezifität der Klassen sogar die "!important"-Feldregeln der Apps. */ .ma-card { border: 1px solid var(--line); border-radius: var(--ma-card-radius); background: var(--white); padding: var(--ma-card-padding); } .ma-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ma-field-min), 1fr)); gap: var(--ma-form-gap); align-items: start; /* Felder fluchten oben, auch wenn eines einen Hilfetext hat */ } /* Einheitliche Feldhöhe für Eingabe- und Auswahlfelder (Checkboxen/Radios ausgenommen). !important, um app-eigene Feldhöhen sicher zu übersteuern. */ .ma-compact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .ma-compact-form select { height: var(--ma-control-height) !important; min-height: var(--ma-control-height) !important; padding: 8px 14px; border-radius: var(--ma-field-radius); font-size: 15px; -webkit-appearance: none; appearance: none; } .ma-compact-form select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, #8d9aad 50%), linear-gradient(135deg, #8d9aad 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%; background-size: 9px 9px, 9px 9px; background-repeat: no-repeat; } /* Safari/macOS: Datums-/Uhrzeitfelder ohne native Systemhöhe, damit sie die Norm-Höhe einhalten (sonst rendern sie höher als die Nachbarfelder). */ .ma-compact-form input[type="date"]::-webkit-datetime-edit, .ma-compact-form input[type="time"]::-webkit-datetime-edit { padding: 0; } .ma-compact-form input[type="date"]::-webkit-date-and-time-value, .ma-compact-form input[type="time"]::-webkit-date-and-time-value { margin: 0; } .ma-compact-form input[type="date"]::-webkit-calendar-picker-indicator, .ma-compact-form input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; } .ma-compact-form textarea { min-height: var(--ma-control-height); padding: 10px 14px; border-radius: var(--ma-field-radius); font-size: 15px; } .ma-compact-form .backend-actions button, .ma-compact-form > button { min-height: var(--ma-control-height); } /* * =================================================================== * Reiter-Navigation im Kopfband (opt-in) – Vorbild: Absatzplanung * =================================================================== * * Aufbau: *
* … Titelzeile der App … * *
* * Die Reiter sitzen IM dunklen Kopfband; der aktive Reiter wird zur hellen * Karteikarte und geht nahtlos in den Seiteninhalt über. Deshalb hat das * Kopfband unten kein Innenpolster, und der Seitenhintergrund muss * var(--paper) sein (Plattform-Standard). Funktioniert für