/* 20251005 ============================================================================= THEME-BRIDGE / BASIS-TOKENS ----------------------------------------------------------------------------- .new-design-theme: - Beschreibung: Wrapper, der alle abgeleiteten Design-Tokens setzt und so das Look&Feel an die globalen Variablen bindet, die dein JS-Toggler ändert. - Einsatz: Einmal möglichst weit außen in deinem Layout (z. B. oder oberstes Layout-Div). Alle Kind-Elemente lesen dann die Tokens. - Optik: Keine sichtbare Optik. Lediglich Variablenbereitstellung. ============================================================================= */ .new-design-theme { /* Primäre Tokens aus Euren JS-umschaltbaren Variablen (NUR diese, keine Def-Werte) */ --nd-fg: var(--global-WebTxtCol); /* Primäre Textfarbe (automatisch Light/Dark) */ --nd-bg: var(--global-WebBGCol); /* Grundhintergrund (automatisch Light/Dark) */ --nd-surface: var(--global-WebBGCol_1); /* Oberflächen-Farbe (Karten, Inputs) */ --nd-surface2: var(--global-WebBGCol_2); /* Zweite Oberfläche / zarte Akzente */ --nd-accent: var(--global-ZwTiBGCol); /* Akzentfarbe (Headerbänder, Primary-Buttons) */ --nd-on-accent: var(--global-ZwTiTxtCol); /* Textfarbe auf Akzentflächen */ /* Abgeleitete Tokens (weich gemischt, keine starren Farben) */ --nd-muted: var(--nd-fg); /* Dezentere Textfarbe */ --nd-border: var(--nd-surface2); /* Zarte Rahmenfarbe */ --nd-shadow-col: rgba(0,0,0,.12); /* Grundschatten */ --nd-shadow-col-strong: rgba(0,0,0,.22); /* Hover/Focus-Schatten */ --nd-hover-overlay: rgba(0,0,0,.06); /* Leichter Hover-Film */ --nd-focus: var(--nd-accent); /* Fokusring */ --nd-radius: 12px; /* Standard-Radius für Ecken */ --nd-pad: 10px; /* Standard-Padding */ --nd-speed: 160ms; /* Standard-Transitiondauer */ } /* ============================================================================= Basis-Div ----------------------------------------------------------------------------- leicht transparent mit ein bissal Box-Shadow ============================================================================= */ .new-design-base-container { width: 100%; margin: 8px auto; /* Kein Opacity am Container – nur ::before ist leicht transparent */ background: transparent; /* Hintergrund kommt über ::before */ position: relative; /* Anker für ::before */ isolation: isolate; /* eigener Stacking-Context */ /* subtiler Hintergrundeffekt – Browser ohne Support ignorieren es */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 6px 24px rgba(0,0,0,0.12); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; z-index: 102; /* optional (empfohlen für saubere Kanten) */ border-radius: 3px; overflow: hidden; } /* Halbtransparenter Flächen-Hintergrund in --nd-surface (nur die Fläche, nicht der Inhalt) */ .new-design-base-container::before { content: ""; position: absolute; inset: 0; /* OPAK + minimal transparent: hell und kaum Durchschein-Effekt */ background-color: var(--global-WebBGCol); /* nimmt deine Theme-Farbe */ opacity: 0.82; /* ~0.8% Durchsicht: „kaum transparent“ */ /* Mini-Aufhellung, damit der Hintergrund HELL bleibt, selbst wenn darunter dunkle Inhalte liegen (kein color-mix, breit unterstützt) */ box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04); border-radius: inherit; /* falls der Container abgerundete Ecken hat */ pointer-events: none; /* keine Klicks blockieren */ z-index: 0; /* hinter dem Container-Inhalt, aber innerhalb des Containers */ } /* Inhalt sicher über dem ::before */ .new-design-base-container > * { position: relative; z-index: 1; } /* ============================================================================= MICRO-INTERAKTIONEN (gemeinsam) ----------------------------------------------------------------------------- .new-design-hoverable: - Beschreibung: Einheitliche Transition + Schatten + leichte Bewegung beim Hover. - Einsatz: Universell als Zusatzklasse auf Card, Button, Input, Badge, usw. - Optik: Sanfte Schatten; beim Hover minimaler Lift (translateY -1px). ============================================================================= */ .new-design-hoverable { transition: background-color var(--nd-speed), box-shadow var(--nd-speed), transform var(--nd-speed), border-color var(--nd-speed), color var(--nd-speed); box-shadow: 0 1px 2px var(--nd-shadow-col), 0 6px 16px var(--nd-shadow-col); } .new-design-hoverable:hover { box-shadow: 0 2px 4px var(--nd-shadow-col), 0 10px 22px var(--nd-shadow-col-strong); transform: translateY(-1px); } /* ============================================================================= TYPOGRAFIE ----------------------------------------------------------------------------- .new-design-text: - Beschreibung: Standard-Textstil (Fließtext). - Einsatz:

,

, , Container mit Textinhalten. - Optik: Primäre Textfarbe, line-height 1.5. .new-design-text--muted: - Beschreibung: Abgedunkelt/dezent für Meta-Infos. - Einsatz: , Labels, Secondary-Infos. - Optik: Gedämpfte Farbe auf Basis von --nd-muted. .new-design-h1 / .new-design-h2: - Beschreibung: Headline-Hierarchie mit responsiven Größen. - Einsatz:

,

oder
. - Optik: Fett, leichtes Letter-Spacing, skaliert responsive. ============================================================================= */ .new-design-text { color: var(--nd-fg); line-height: 1.5; } .new-design-text--muted { color: var(--nd-muted); opacity: .75; } .new-design-h1 { color: var(--nd-fg); font-weight: 800; letter-spacing: .2px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); } .new-design-h2 { color: var(--nd-fg); font-weight: 700; letter-spacing: .2px; font-size: clamp(1.3rem, 1.0rem + .8vw, 1.7rem); } .new-design-label { /* Für Feldbeschriftungen (über Inputs, in Formularzeilen etc.) */ color: var(--nd-muted); opacity: .8; font-weight: 600; font-size: .95rem; } /* ============================================================================= LINKS ----------------------------------------------------------------------------- .new-design-link: - Beschreibung: Markenlink mit dezenter Unterstreichungs-Animation. - Einsatz: , oder