/* ============================================================================
nexus-design.css — Das eine Design-System für alle Nexus-KI-Apps
Stand: 2026-07-20 · Quelle der Markenfarben: ~/Nexus/Logo/LOGO-INFO.md
----------------------------------------------------------------------------
Einbinden als ERSTE Stylesheet-Datei, danach nur noch die App-eigene Datei
mit echten App-Besonderheiten (Karte, Kalender, Zeitstrahl …):
Hell/Dunkel wird über geschaltet.
========================================================================= */
/* ---------------------------------------------------------------- 1 MARKE */
:root{
/* Markenfarben — verbindlich, nie überschreiben */
--nx-blau: #3F7BFF; /* Nexus-Blau: Primäraktion, Fokus, Links */
--nx-blau-hell: #7FA8FF; /* Blau als Text auf dunklem Grund */
--nx-blau-tief: #2F63E8; /* Verlaufsende, gedrückter Knopf */
--nx-petrol: #0E93B0; /* Zweitfarbe: Zierlinien, Ring, Diagramm 2 */
--nx-petrol-hell: #2CB4CE; /* Petrol als Text auf dunklem Grund */
--nx-tinte: #0B1020; /* Textfarbe auf hellem Grund */
--nx-hell: #F5F7FF; /* Textfarbe auf dunklem Grund */
--nx-kachel-1: #141A2E; /* Kachel-/Icon-Verlauf oben */
--nx-kachel-2: #07080D; /* Kachel-/Icon-Verlauf unten */
/* Signalfarben — bedeutungsgebunden, NICHT als Deko benutzen */
--nx-gruen: #1DB954; --nx-gruen-dunkel: #30D158;
--nx-gelb: #C97C00; --nx-gelb-dunkel: #FF9F0A;
--nx-rot: #D33A2C; --nx-rot-dunkel: #FF453A;
/* ------------------------------------------------------------ 2 FLÄCHEN */
/* Hell ist der Standard. Dunkel steht weiter unten. */
/* Als UI-Akzent im Hellmodus NICHT die reine Markenfarbe #3F7BFF — die */
/* erreicht auf weißem Grund nur 3,83:1 (als Text UND als weiße Schrift */
/* auf der Fläche), nötig sind 4,5:1. Der tiefere Marken-Blauton #2F63E8 */
/* schafft 5,16:1 in beiden Rollen. Die reine Marke bleibt --nx-blau */
/* (Logo, Verläufe). Im Dunkelmodus wird der Akzent weiter unten wieder */
/* auf --nx-blau gesetzt (dort trägt er auf dunklem Grund). */
--nx-akzent: var(--nx-blau-tief);
--nx-akzent-2: var(--nx-petrol);
--nx-akzent-weich: color-mix(in srgb, var(--nx-akzent) 14%, transparent);
--nx-grund: #FFFFFF; /* Seitenhintergrund */
--nx-grund-2: #EEF2FB; /* Flächen hinter Karten */
--nx-karte: #FFFFFF; /* Karten-/Panel-Fläche */
--nx-einsatz: rgba(12,20,50,.035); /* Eingabefeld, Zeilen-Zebra */
--nx-linie: rgba(12,20,50,.12); /* 1px-Hairline */
--nx-linie-fein: rgba(12,20,50,.07);
--nx-text: var(--nx-tinte);
--nx-text-2: #5A6478; /* Sekundärtext, Labels */
--nx-text-3: rgba(11,16,32,.45); /* Tertiär, Zeitstempel */
/* Glas (Apple-Look) — EIN Rezept für alle Apps */
--nx-glas: rgba(255,255,255,.62);
--nx-glas-stark: rgba(255,255,255,.78);
--nx-glas-rand: rgba(255,255,255,.70);
--nx-glas-blur: saturate(180%) blur(20px);
/* ---------------------------------------------------------- 3 TYPOGRAFIE */
--nx-schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--nx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
Consolas, monospace;
/* Eine Skala. Keine krummen Zwischenwerte wie 12.5 / 14.5 mehr. */
--nx-t-mini: 11px; /* Badge, Tabellenkopf, Einheiten */
--nx-t-klein: 12px; /* Hilfstext, Meta */
--nx-t-body: 14px; /* Standard-Fließtext, Knöpfe, Felder */
--nx-t-lead: 16px; /* Einleitung, Karten-Untertitel */
--nx-t-h3: 18px; /* Karten-Titel */
--nx-t-h2: 22px; /* Abschnitts-Titel */
--nx-t-h1: 28px; /* Seiten-Titel */
--nx-t-hero: clamp(34px, 5vw, 56px);
--nx-gew-normal: 400;
--nx-gew-mittel: 500;
--nx-gew-halb: 600;
--nx-gew-fett: 700;
--nx-zeile: 1.5; /* Fließtext */
--nx-zeile-eng: 1.25; /* Überschriften */
--nx-sperr-titel: -0.01em;
--nx-sperr-label: 0.10em; /* mono-Großbuchstaben-Labels */
/* ------------------------------------------------------- 4 FORM & RAUM */
--nx-radius: 20px; /* Karten, Panels, Sheets */
--nx-radius-klein: 12px; /* Felder, Knöpfe, kleine Kacheln */
--nx-radius-mini: 8px; /* Badges, Chips, Tabellenzellen */
--nx-radius-pille: 980px;
--nx-abstand-1: 4px;
--nx-abstand-2: 8px;
--nx-abstand-3: 12px;
--nx-abstand-4: 16px; /* Standard-Innenabstand kleiner Karten */
--nx-abstand-5: 22px; /* Standard-Innenabstand großer Karten */
--nx-abstand-6: 32px;
--nx-abstand-7: 48px; /* Abstand zwischen Abschnitten */
--nx-breite: 1080px; /* maximale Inhaltsbreite */
--nx-breite-schmal: 720px;
--nx-schatten-1: 0 1px 2px rgba(12,20,50,.05);
--nx-schatten-2: 0 10px 40px -12px rgba(12,20,50,.18);
--nx-schatten-3: 0 24px 60px -20px rgba(12,20,50,.30);
--nx-schatten-akzent: 0 10px 30px -10px
color-mix(in srgb, var(--nx-akzent) 70%, transparent);
--nx-ease: cubic-bezier(.22,.61,.36,1);
--nx-schnell: .14s var(--nx-ease);
--nx-normal: .22s var(--nx-ease);
}
/* ------------------------------------------------------------- 5 DUNKEL */
html[data-thema="dunkel"]{
color-scheme: dark;
--nx-akzent: var(--nx-blau);
--nx-akzent-2: var(--nx-petrol-hell);
--nx-gruen: var(--nx-gruen-dunkel);
--nx-gelb: var(--nx-gelb-dunkel);
--nx-rot: var(--nx-rot-dunkel);
--nx-grund: #07080D;
--nx-grund-2: #0C0E16;
--nx-karte: #12151F;
--nx-einsatz: rgba(255,255,255,.055);
--nx-linie: rgba(255,255,255,.10);
--nx-linie-fein: rgba(255,255,255,.06);
--nx-text: var(--nx-hell);
--nx-text-2: #C6CDE2;
--nx-text-3: rgba(245,247,255,.45);
--nx-glas: rgba(255,255,255,.055);
--nx-glas-stark: rgba(255,255,255,.09);
--nx-glas-rand: rgba(255,255,255,.12);
--nx-schatten-1: 0 1px 2px rgba(0,0,0,.30);
--nx-schatten-2: 0 18px 44px rgba(0,0,0,.42);
--nx-schatten-3: 0 24px 60px -20px rgba(0,0,0,.70);
}
@media (prefers-color-scheme: dark){
html:not([data-thema="hell"]){ /* gleiche Werte wie oben */
color-scheme: dark;
--nx-akzent-2: var(--nx-petrol-hell);
--nx-gruen: var(--nx-gruen-dunkel);
--nx-gelb: var(--nx-gelb-dunkel);
--nx-rot: var(--nx-rot-dunkel);
--nx-grund:#07080D; --nx-grund-2:#0C0E16; --nx-karte:#12151F;
--nx-einsatz:rgba(255,255,255,.055);
--nx-linie:rgba(255,255,255,.10); --nx-linie-fein:rgba(255,255,255,.06);
--nx-text:var(--nx-hell); --nx-text-2:#C6CDE2; --nx-text-3:rgba(245,247,255,.45);
--nx-glas:rgba(255,255,255,.055); --nx-glas-stark:rgba(255,255,255,.09);
--nx-glas-rand:rgba(255,255,255,.12);
--nx-schatten-1:0 1px 2px rgba(0,0,0,.30);
--nx-schatten-2:0 18px 44px rgba(0,0,0,.42);
--nx-schatten-3:0 24px 60px -20px rgba(0,0,0,.70);
}
}
/* --------------------------------------------------------- 6 GRUNDLAGEN */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
background: var(--nx-grund);
color: var(--nx-text);
font-family: var(--nx-schrift);
font-size: var(--nx-t-body);
line-height: var(--nx-zeile);
-webkit-font-smoothing: antialiased;
}
h1,h2,h3{ margin:0 0 var(--nx-abstand-3);
line-height:var(--nx-zeile-eng); letter-spacing:var(--nx-sperr-titel) }
h1{ font-size:var(--nx-t-h1); font-weight:var(--nx-gew-halb) }
h2{ font-size:var(--nx-t-h2); font-weight:var(--nx-gew-halb) }
h3{ font-size:var(--nx-t-h3); font-weight:var(--nx-gew-halb) }
a{ color:var(--nx-akzent); text-decoration:none }
a:hover{ text-decoration:underline }
::selection{ background: var(--nx-akzent-weich) }
:focus-visible{ outline:2px solid var(--nx-akzent); outline-offset:2px }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}
/* ------------------------------------------------------------ 7 MARKE UI */
/* Bildmarke „Eingehakte Schleife" — exakt aus ~/Nexus/Logo/Nexus KI Logo.svg.
Verwendung: bzw. .nx-marke.gross */
.nx-marke{
display:inline-block; width:26px; height:26px; flex:none;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-width='7.5' stroke-linecap='round'%3E%3Ccircle stroke='%230E93B0' cx='25' cy='39' r='16'/%3E%3Cpath stroke='%233F7BFF' d='M54.45 20.86A16 16 0 1 1 43.14 9.55'/%3E%3Cpath stroke='%230E93B0' d='M40.45 34.86A16 16 0 0 1 38.86 47'/%3E%3C/g%3E%3C/svg%3E");
}
.nx-marke.gross{ width:40px; height:40px }
/* Kachel-Variante für dunkle Seitenleisten (Ringe verschwinden dort sonst) */
.nx-marke.kachel{
border-radius:24%; padding:18%;
background-color: transparent;
background-image: linear-gradient(180deg,var(--nx-kachel-1),var(--nx-kachel-2));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.nx-wortmarke{ font-weight:var(--nx-gew-halb); letter-spacing:-.01em;
font-size:var(--nx-t-lead) }
.nx-wortmarke b{ color:var(--nx-akzent); font-weight:var(--nx-gew-halb) }
/* Nexus KI */
/* ---------------------------------------------------------- 8 BAUSTEINE */
/* Karte / Panel */
.nx-karte{
background: var(--nx-karte);
border: 1px solid var(--nx-linie);
border-radius: var(--nx-radius);
padding: var(--nx-abstand-5);
box-shadow: var(--nx-schatten-1);
}
.nx-karte.glas{
background: var(--nx-glas);
border-color: var(--nx-glas-rand);
-webkit-backdrop-filter: var(--nx-glas-blur);
backdrop-filter: var(--nx-glas-blur);
box-shadow: var(--nx-schatten-2);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
.nx-karte.glas{ background: var(--nx-karte) }
}
.nx-karte-titel{
font-family: var(--nx-mono); font-size: var(--nx-t-mini);
font-weight: var(--nx-gew-fett); text-transform: uppercase;
letter-spacing: var(--nx-sperr-label); color: var(--nx-text-2);
margin: 0 0 var(--nx-abstand-3);
}
/* Knopf */
.nx-knopf{
display:inline-flex; align-items:center; justify-content:center;
gap: var(--nx-abstand-2);
padding: 9px 16px;
border: 1px solid var(--nx-linie);
border-radius: var(--nx-radius-klein);
background: var(--nx-karte); color: var(--nx-text);
font-family: var(--nx-schrift); font-size: var(--nx-t-body);
font-weight: var(--nx-gew-mittel); line-height:1;
cursor: pointer; transition: all var(--nx-schnell);
}
.nx-knopf:hover:not(:disabled){
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--nx-akzent) 40%, var(--nx-linie));
}
.nx-knopf:active:not(:disabled){ transform: translateY(0) }
.nx-knopf:disabled{ opacity:.45; cursor:not-allowed; transform:none }
.nx-knopf.wichtig{
background: linear-gradient(180deg, var(--nx-blau), var(--nx-blau-tief));
border-color: color-mix(in srgb, var(--nx-blau-hell) 55%, transparent);
color:#fff; box-shadow: var(--nx-schatten-akzent);
}
.nx-knopf.gefahr{
color: var(--nx-rot);
border-color: color-mix(in srgb, var(--nx-rot) 35%, var(--nx-linie));
}
.nx-knopf.leise{ background:transparent; border-color:transparent; color:var(--nx-text-2) }
.nx-knopf.klein{ padding:5px 11px; font-size:var(--nx-t-klein) }
.nx-knopf.pille{ border-radius: var(--nx-radius-pille) }
/* Eingabefelder */
.nx-label{
display:block; font-size:var(--nx-t-klein); font-weight:var(--nx-gew-mittel);
color:var(--nx-text-2); margin: var(--nx-abstand-4) 0 var(--nx-abstand-1);
}
.nx-feld, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=date], select, textarea{
width:100%;
background: var(--nx-einsatz); color: var(--nx-text);
border: 1px solid transparent; border-radius: var(--nx-radius-klein);
padding: 9px 12px;
font-family: var(--nx-schrift); font-size: var(--nx-t-body);
transition: border-color var(--nx-schnell), box-shadow var(--nx-schnell);
}
.nx-feld:focus, input:focus, select:focus, textarea:focus{
outline:none; background: var(--nx-karte);
border-color: var(--nx-akzent);
box-shadow: 0 0 0 3.5px var(--nx-akzent-weich);
}
::placeholder{ color: var(--nx-text-3) }
textarea{ resize: vertical; min-height: 96px; line-height: var(--nx-zeile) }
input[type=checkbox], input[type=radio]{ width:auto; accent-color: var(--nx-akzent) }
/* Tabelle */
.nx-tabelle{ width:100%; border-collapse:collapse; font-size:var(--nx-t-body) }
.nx-tabelle th{
text-align:left; padding: var(--nx-abstand-2) var(--nx-abstand-3);
font-size:var(--nx-t-mini); font-weight:var(--nx-gew-mittel);
text-transform:uppercase; letter-spacing:var(--nx-sperr-label);
color:var(--nx-text-2); border-bottom:1px solid var(--nx-linie);
position:sticky; top:0; background:var(--nx-karte);
}
.nx-tabelle td{
padding: var(--nx-abstand-2) var(--nx-abstand-3);
border-bottom: 1px solid var(--nx-linie-fein); vertical-align: middle;
}
.nx-tabelle tr:last-child td{ border-bottom:none }
.nx-tabelle tbody tr:hover{ background: var(--nx-einsatz) }
.nx-tabelle .zahl{ font-family:var(--nx-mono); text-align:right;
font-variant-numeric: tabular-nums }
.nx-tabelle-rahmen{ /* Wrapper: rundet + macht breite Tabellen scrollbar */
border:1px solid var(--nx-linie); border-radius:var(--nx-radius);
overflow:auto hidden; background:var(--nx-karte);
}
/* Badge / Pille */
.nx-badge{
display:inline-flex; align-items:center; gap:5px;
padding: 3px 9px; border-radius: var(--nx-radius-pille);
font-size: var(--nx-t-mini); font-weight: var(--nx-gew-mittel);
background: var(--nx-akzent-weich); color: var(--nx-akzent);
}
.nx-badge.erfolg { background: color-mix(in srgb,var(--nx-gruen) 14%,transparent); color: var(--nx-gruen) }
.nx-badge.warnung{ background: color-mix(in srgb,var(--nx-gelb) 14%,transparent); color: var(--nx-gelb) }
.nx-badge.gefahr { background: color-mix(in srgb,var(--nx-rot) 14%,transparent); color: var(--nx-rot) }
/* Kopfleiste (Glas, klebt oben) */
.nx-kopf{
position:sticky; top:0; z-index:50;
display:flex; align-items:center; gap: var(--nx-abstand-3);
padding: var(--nx-abstand-3) var(--nx-abstand-5);
background: var(--nx-glas); border-bottom:1px solid var(--nx-linie);
-webkit-backdrop-filter: var(--nx-glas-blur);
backdrop-filter: var(--nx-glas-blur);
}
/* Layout-Helfer */
.nx-inhalt{ max-width:var(--nx-breite); margin:0 auto;
padding: var(--nx-abstand-6) var(--nx-abstand-5) }
.nx-raster{ display:grid; gap: var(--nx-abstand-4);
grid-template-columns: repeat(auto-fill, minmax(260px,1fr)) }