/* ===================================================================== nxtlvlorg.com · Hell / Dunkel · gemeinsames Fundament (Prototyp) Jede Regel hängt an html[data-theme="light"] oder html[data-theme="dark"]. Neutral (kein Attribut) = heutiges Design, hier greift nichts. Ausnahme: der Modus-Umschalter im Header (Abschnitt 2), der in allen Modi sichtbar sein muss und im Neutral-Modus die heutige Leiste nachbildet. ===================================================================== */ /* --------------------------------------------------------------------- 1 · TOKENS --------------------------------------------------------------------- */ html[data-theme="light"] { --page-bg: #f6f3fa; --ink: #141a22; --text: #1f2a36; --text-muted: #2f3945; --text-subtle: #3a4552; --link: #5e1d96; --highlight-gradient: linear-gradient(135deg, #6c28b0 0%, #5e1d96 100%); --hairline: rgba(20, 26, 40, .12); --accent-line: rgba(94, 29, 150, .35); --accent-soft: rgba(94, 29, 150, .08); --panel-rgb: 255 255 255; --tile-line: rgba(20, 26, 40, .10); --shadow: 0 1px 2px rgba(30, 20, 60, .06), 0 16px 40px -20px rgba(30, 20, 60, .28); --canvas-node-rgb: 94, 29, 150; --photo-filter: brightness(1.06) contrast(.94) saturate(.82); --veil: linear-gradient(rgba(248, 244, 246, .36), transparent 22%), radial-gradient(120% 90% at 58% 42%, transparent 40%, rgba(248, 244, 246, .52) 100%); --nav-bg: rgba(246, 243, 250, .78); --nav-ink: #2f3945; --nav-ink-hover: #141a22; --band-bg: #f6f3fa; --footer-bg: #efeaf3; --mode-track: rgba(20, 26, 40, .06); --mode-on: rgba(20, 26, 40, .10); } html[data-theme="dark"] { --page-bg: #0b141c; --ink: #ffffff; --text: #dae3ef; --text-muted: #cfc2d3; --text-subtle: #bec7d3; --link: #e1b6ff; --highlight-gradient: linear-gradient(135deg, #e1b6ff 0%, #c988fa 100%); --hairline: rgba(207, 194, 211, .16); --accent-line: rgba(225, 182, 255, .35); --accent-soft: rgba(225, 182, 255, .08); --panel-rgb: 11 20 28; --tile-line: rgba(255, 255, 255, .08); --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 16px 40px -20px rgba(0, 0, 0, .60); --canvas-node-rgb: 255, 255, 255; --photo-filter: brightness(.66) contrast(1.05) saturate(.82); --veil: radial-gradient(60% 50% at 18% 8%, rgba(201, 136, 250, .08), transparent 70%), radial-gradient(120% 90% at 55% 45%, transparent 42%, rgba(11, 20, 28, .60) 100%); --nav-bg: rgba(11, 20, 28, .60); --nav-ink: #94a3b8; --nav-ink-hover: #ffffff; --band-bg: #0b141c; --footer-bg: #0b141c; --mode-track: rgba(255, 255, 255, .06); --mode-on: rgba(255, 255, 255, .14); } html[data-theme] { background: var(--page-bg); } html[data-theme] body { background: transparent; color: var(--text); } html[data-theme] { --bg-pos: 56% 24%; } @media (max-width: 767px) { html[data-theme] { --bg-pos: 52% 0%; } } /* --------------------------------------------------------------------- 2 · HEADER · Modus-Umschalter (alle Modi) + Hell-Leiste --------------------------------------------------------------------- */ .lg-mode { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--mode-track, rgba(255, 255, 255, .06)); } .lg-mode button { appearance: none; border: 0; cursor: pointer; width: 32px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--nav-ink, #94a3b8); background: transparent; transition: background-color .25s ease, color .25s ease; } .lg-mode button:hover { color: var(--nav-ink-hover, #fff); } .lg-mode button[aria-checked="true"] { background: var(--mode-on, rgba(255, 255, 255, .14)); color: var(--nav-ink-hover, #fff); } .lg-mode button:focus-visible { outline: 2px solid #c988fa; outline-offset: 1px; } .lg-mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } #mobile-nav .lg-mode { margin-top: .85rem; } /* Hell: Leiste hell, Text dunkelgrau, Logo schwarz. Geometrie unverändert. */ html[data-theme="light"] body > nav.fixed { background: var(--nav-bg); border-bottom-color: var(--hairline); } html[data-theme="light"] body > nav.fixed img[src*="NxtLvlOrg-nav"] { filter: brightness(0); } html[data-theme="light"] body > nav.fixed .font-manrope { color: var(--nav-ink); } html[data-theme="light"] body > nav.fixed .font-manrope:hover { color: var(--nav-ink-hover); } html[data-theme="light"] .nav-dd { background: rgba(246, 243, 250, .96); border-color: var(--hairline); } html[data-theme="light"] .nav-dd-link { color: var(--text-muted); } html[data-theme="light"] .nav-dd-link:hover { color: var(--link); background: var(--accent-soft); } html[data-theme="light"] #mobile-nav { background: rgba(246, 243, 250, .97); border-top-color: var(--hairline); } html[data-theme="light"] .mobile-nav-link { color: var(--text-muted); border-color: var(--hairline); } html[data-theme="light"] .burger-line { background: var(--ink); } /* Scroll-Kante unter der Leiste (kein Blur, nur Verlauf) */ html[data-theme] body > nav.fixed::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; background: linear-gradient(rgb(var(--panel-rgb) / .55), transparent); opacity: 0; transition: opacity .3s ease; } html[data-theme][data-lg-scrolled] body > nav.fixed::after { opacity: 1; } /* --------------------------------------------------------------------- 3 · FOTOEBENE + CANVAS --------------------------------------------------------------------- */ .nxt-bg, .nxt-bg__ai { display: none; } html[data-theme] .nxt-bg { display: block; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -2; overflow: hidden; background: var(--page-bg); transform: translateZ(0); } html[data-theme] .nxt-bg__img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: var(--bg-pos); filter: var(--photo-filter); opacity: 0; transition: opacity .6s ease; } html[data-theme] .nxt-bg__img.is-loaded { opacity: 1; } html[data-theme] .nxt-bg::after { content: ''; position: absolute; inset: 0; background: var(--veil); pointer-events: none; } html[data-theme] .nxt-bg__ai { display: inline-block; position: fixed; z-index: 30; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 4px 9px; border-radius: 999px; pointer-events: none; font: 500 12px/1.3 'Inter', 'Inter-Fallback', sans-serif; color: #fff; background: rgba(0, 0, 0, .60); } html[data-theme="light"] .nxt-bg__ai { background: rgba(20, 26, 34, .55); } .nxt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Canvas wird transparent (das Skript löscht statt zu füllen) */ html[data-theme] #canvas-container { background: transparent; } /* --------------------------------------------------------------------- 4 · SEKTIONEN · Grundregel: transparent, Trennlinien bleiben (schwach grau) --------------------------------------------------------------------- */ html[data-theme] .glass-section { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme] :is([class~="border-white/5"], [class~="border-white/10"], [class~="border-outline-variant/20"]) { border-color: var(--hairline); } html[data-theme] main > [data-lg="kicheck"] { border-color: var(--hairline); } /* Hero: die zwei Lila-Glows bleiben, in Hell etwas schwächer */ html[data-theme="light"] [data-lg="hero"] > .absolute { opacity: .5; } /* Werdegang: die einzige deckende Bahn, kein Foto */ html[data-theme] #karriere-stationen { background: var(--band-bg); } html[data-theme="light"] #karriere-stationen .career-item { background: rgba(255, 255, 255, .9); border-color: var(--tile-line); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="light"] #karriere-stationen .career-item.ticker-active { background: #fff; border-color: var(--accent-line); } html[data-theme="light"] .career-ticker-outer::before, html[data-theme="light"] .career-ticker-outer::after { display: none; } html[data-theme="light"] #career-overlay { background: #fff; color: var(--text); border-color: var(--tile-line); } /* Footer: deckend wie heute, kein Foto */ html[data-theme] footer.glass-section { background: var(--footer-bg); } html[data-theme="light"] footer img[src*="NxtLvlOrg-nav"] { filter: brightness(0); } /* Der Hebel: eigenes Foto bleibt, Verläufe entfallen, nur der Textblock wird Tafel */ html[data-theme] [data-lg="hebel"] .man-overlay-lr, html[data-theme] [data-lg="hebel"] .man-overlay-tb { display: none; } html[data-theme] [data-lg="hebel"] .man-image-bg { filter: var(--photo-filter); } html[data-theme="light"] [data-lg="hebel"] .man-image-bg { filter: brightness(1.15) contrast(.92) saturate(.85); } /* Karten-Grundmaterial (Details je Variante) */ html[data-theme] :is(.glass-card, .testi-card, .career-item, .kw-quote, .accordion-card) { -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="light"] .testi-body { color: var(--text-muted); } html[data-theme="light"] .testi-name { color: var(--ink); } html[data-theme="light"] .testi-role { color: var(--text-subtle); } html[data-theme="light"] .ebit-letter { color: rgba(20, 26, 40, .14); } html[data-theme="light"] .kw-quote { border-color: var(--accent-line); } html[data-theme="light"] .faq-acc { border-color: var(--hairline); } html[data-theme] [data-lg="cta"] .glass-card { box-shadow: var(--shadow); } html[data-theme="light"] [data-lg="cta"] a.bg-white { background: var(--ink); color: #fff; } html[data-theme="light"] [data-lg="cta"] a.bg-white:hover { background: #e1b6ff; color: #4c007b; } /* --------------------------------------------------------------------- 5 · FARBBRÜCKE (Hell) · Tailwind-Klassen → Tokens · Buttons bleiben unberührt --------------------------------------------------------------------- */ :where(html[data-theme="light"]) :is([class~="text-white"], [class~="text-slate-300"], [class~="text-on-surface"]) { color: var(--ink); } :where(html[data-theme="light"]) :is([class~="text-slate-400"], [class~="text-on-surface-variant"], [class~="text-gray-300"]) { color: var(--text-muted); } :where(html[data-theme="light"]) :is([class~="text-slate-500"], [class~="text-slate-600"], [class~="text-tertiary"]) { color: var(--text-subtle); } :where(html[data-theme="light"]) :is([class~="text-primary"], [class~="text-primary/80"], [class~="text-[#e1b6ff]"], [class~="text-[#c988fa]"]) { color: var(--link); } :where(html[data-theme="light"]) [class~="text-white/10"] { color: rgba(20, 26, 34, .12); } :where(html[data-theme="light"]) :is([class~="hover:text-[#e1b6ff]"], [class~="hover:text-primary"]):hover { color: var(--link); } :where(html[data-theme="light"]) [class~="hover:text-white"]:hover { color: var(--ink); } :where(html[data-theme="light"]) .group:hover :is([class~="group-hover:text-[#e1b6ff]"], [class~="group-hover:text-primary"]) { color: var(--link); } :where(html[data-theme="light"]) .group:hover [class~="group-hover:text-white"] { color: var(--ink); } :where(html[data-theme="light"]) [class~="bg-clip-text"][class~="monolith-gradient"] { background-image: var(--highlight-gradient); } :where(html[data-theme="light"]) :is([class~="border-white/5"], [class~="border-white/10"], [class~="border-white/20"], [class~="divide-white/5"], [class~="border-outline-variant/20"], [class~="border-outline-variant"]) { border-color: var(--hairline); } :where(html[data-theme="light"]) :is([class~="border-primary"], [class~="border-primary/20"], [class~="border-primary/30"], [class~="border-[#e1b6ff]"], [class~="border-[#e1b6ff]/20"], [class~="border-[#e1b6ff]/30"]) { border-color: var(--accent-line); } :where(html[data-theme="light"]) :is([class~="hover:border-primary"], [class~="hover:border-primary/40"], [class~="hover:border-secondary/40"], [class~="hover:border-[#e1b6ff]"]):hover { border-color: var(--link); } :where(html[data-theme="light"]) :is([class~="bg-white/5"], [class~="bg-primary/10"], [class~="bg-[#e1b6ff]/10"]) { background-color: var(--accent-soft); } :where(html[data-theme="light"]) :is([class~="hover:bg-surface-bright/50"], [class~="hover:bg-surface-bright/30"], [class~="hover:bg-[#e1b6ff]/10"]):hover { background-color: var(--accent-soft); } :where(html[data-theme="light"]) :is([style*="color:#e1b6ff"], [style*="color: #e1b6ff"], [style*="color:#c988fa"], [style*="color: #c988fa"]) { color: var(--link) !important; } :where(html[data-theme="light"]) [style*="border-bottom:1px solid rgba(225,182,255"] { border-bottom-color: var(--accent-line) !important; } /* Dunkel: nur der zu schwache Grauton wird angehoben */ :where(html[data-theme="dark"]) [class~="text-slate-500"] { color: #94a3b8; } /* --------------------------------------------------------------------- 6 · SYSTEMEINSTELLUNGEN · DRUCK --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html[data-theme] .nxt-bg__img, .lg-mode button { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @media (prefers-reduced-transparency: reduce) { html[data-theme] { --panel-a: .97; --panel-blur: 0px; --tile-a: .97; } } @media (prefers-contrast: more) { html[data-theme] { --panel-a: 1; --tile-a: 1; --panel-blur: 0px; } } @media print { .nxt-bg, .nxt-bg__ai, #canvas-container, .lg-mode { display: none !important; } html { background: #fff; } } /* ===================================================================== VARIANTE A · „Sheets“ (Apple-pur) Wenige, scharf begrenzte Glas-Blätter mit Blur je Textgruppe (Radius 28), Karten als reine Füllung ohne Blur. Hero: Scrim hinter der Headline, ein Sheet für Subline. Kein Canvas in Hell/Dunkel (Canvas = Neutral). ===================================================================== */ html[data-theme="light"] { --panel-a: .62; --tile-a: .82; --panel-blur: 20px; --panel-sat: 1.3; --panel-bright: 1.05; --gloss: rgba(255,255,255,.70); } html[data-theme="dark"] { --panel-a: .72; --tile-a: .80; --panel-blur: 20px; --panel-sat: 1.1; --panel-bright: .85; --gloss: rgba(255,255,255,.14); } @media (max-width: 767px) { html[data-theme] { --panel-blur: 14px; } } @media (min-width: 1024px) { html[data-theme] .nxt-bg__img { width: 150%; object-position: 0 12%; } } html[data-theme] #canvas-container { display: none; } /* Sheet */ html[data-theme] .lg-sheet { position: relative; isolation: isolate; background: rgb(var(--panel-rgb) / var(--panel-a)); -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) brightness(var(--panel-bright)); backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) brightness(var(--panel-bright)); border-radius: 28px; padding: 40px 44px; box-shadow: inset 0 0 0 .5px var(--tile-line), inset 0 1px 0 var(--gloss), var(--shadow); transform: translateZ(0); } html[data-theme] .lg-sheet--fit { width: fit-content; max-width: 100%; } html[data-theme] .lg-sheet--center { margin-inline: auto; } @media (max-width: 767px) { html[data-theme] .lg-sheet { border-radius: 22px; padding: 28px 24px; } } /* Tile: Füllung ohne Blur, Radius 16 */ html[data-theme] .lg-tile { background: rgb(var(--panel-rgb) / var(--tile-a)); border-color: var(--tile-line); border-radius: 16px; } html[data-theme] .lg-tile--strong { background: rgb(var(--panel-rgb) / calc(var(--tile-a) + .10)); } /* Hero: Scrim hinter der Headline, Sheet für die Subline */ html[data-theme] [data-lg="hero"]::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 62% at 50% 55%, rgb(var(--panel-rgb) / .74), transparent 72%); } html[data-theme] [data-lg="hero"] > .relative > p { --panel-blur: 14px; } /* Kicheck-Block (Inline-Style) */ html[data-theme] [data-lg="kicheck"] div[style*="max-width:52rem"] { background: rgb(var(--panel-rgb) / var(--panel-a)) !important; border-radius: 28px !important; box-shadow: inset 0 0 0 .5px var(--tile-line), var(--shadow); -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur)); } html[data-theme] [data-lg="kicheck"] a.glass-card { background: rgb(var(--panel-rgb) / var(--tile-a)); border-radius: 14px; } /* Team-Karte (Michael Urban): nur hell leicht lila getönt statt grau; dunkel unverändert */ html[data-theme="light"] [data-lg="team"] .lg-tile--strong { background: linear-gradient(135deg, rgba(232, 214, 250, .95) 0%, rgba(241, 231, 252, .95) 55%, rgba(249, 244, 255, .95) 100%); border-color: rgba(94, 29, 150, .22); } /* Einheitliche Radien der Karten */ html[data-theme] :is(.ebit-card, .accordion-card, .testi-card, [data-lg="szenarien"] a.glass-card, [data-lg="praxis"] .glass-card, [data-lg="team"] .max-w-7xl > .border) { border-radius: 16px; } html[data-theme] [data-lg="ebit"] .grid { border-radius: 16px; gap: 12px; } /* ===================================================================== SITE-WEITE REGELN (Unterseiten, Blog, Rechtstexte) · Variante A Greift nur auf Seiten mit body[data-lg-generic]; die Startseite trägt ihre Tafeln als Klassen im Markup. Alles unter html[data-theme]. ===================================================================== */ /* Sheet-Ziele auf generischen Seiten: Sektions-Container, Header, Artikel */ html[data-theme] body[data-lg-generic] :is( main > section:not(.page-hero) > [class*="max-w-"], main > header > [class*="max-w-"], main > article[class*="max-w-"], main > div:not(.w-full):not(.border-t) > [class*="max-w-"], main > [class*="max-w-"]:not(article) ) { position: relative; isolation: isolate; background: rgb(var(--panel-rgb) / var(--panel-a)); -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) brightness(var(--panel-bright)); backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-sat)) brightness(var(--panel-bright)); border-radius: 28px; padding: 40px 44px; box-shadow: inset 0 0 0 .5px var(--tile-line), inset 0 1px 0 var(--gloss), var(--shadow); transform: translateZ(0); } @media (max-width: 767px) { html[data-theme] body[data-lg-generic] :is( main > section:not(.page-hero) > [class*="max-w-"], main > header > [class*="max-w-"], main > article[class*="max-w-"], main > div:not(.w-full):not(.border-t) > [class*="max-w-"], main > [class*="max-w-"]:not(article) ) { border-radius: 22px; padding: 28px 22px; } } /* Blog-Bild-Kasten (max-w-4xl mit Inline-Box) braucht keine eigene Tafel */ html[data-theme] body[data-lg-generic] main > div.mb-12[class*="max-w-4xl"] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0 2rem; } /* Breadcrumb-Zeile: kleine Tafel um den Text */ html[data-theme] body[data-lg-generic] main > div.w-full > [class*="max-w-"] > * { display: inline-block; width: fit-content; max-width: 100%; background: rgb(var(--panel-rgb) / var(--panel-a)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; padding: 6px 14px; box-shadow: inset 0 0 0 .5px var(--tile-line); } /* Unterseiten-Hero: Scrim hinter der Headline, Sheet für die Subline */ html[data-theme] body[data-lg-generic] section.page-hero { position: relative; } html[data-theme] body[data-lg-generic] section.page-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 62% at 50% 52%, rgb(var(--panel-rgb) / .74), transparent 72%); } html[data-theme] body[data-lg-generic] section.page-hero > .relative > p { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; background: rgb(var(--panel-rgb) / var(--panel-a)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 22px; padding: 18px 26px; box-shadow: inset 0 0 0 .5px var(--tile-line), var(--shadow); } html[data-theme="light"] body[data-lg-generic] section.page-hero > .absolute { opacity: .5; } /* Lese-Seiten (Blog-Artikel, Rechtstexte): dichtere Tafeln, weniger Blur */ html[data-theme="light"] body[data-lg-read] { --panel-a: .90; --panel-blur: 12px; } html[data-theme="dark"] body[data-lg-read] { --panel-a: .86; --panel-blur: 12px; } /* Kacheln auf generischen Seiten */ html[data-theme] body[data-lg-generic] :is(.glass-card, .kw-quote, .stat-card, .persona-card, .service-card, .usecase-card, .approach-card, .format-item, .story-block, .section-card, .img-gallery-row, #posts-grid > div, .blog-card) { background: rgb(var(--panel-rgb) / var(--tile-a)); border-color: var(--tile-line); border-radius: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme] body[data-lg-generic] .glass-card table { color: inherit; } /* Kicheck-/CTA-Blöcke mit Inline-Style (auf vielen Seiten) */ html[data-theme] div[style*="max-width:52rem"][style*="rgba(255,255,255,0.03)"] { background: rgb(var(--panel-rgb) / var(--panel-a)) !important; border-radius: 28px !important; -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur)); box-shadow: inset 0 0 0 .5px var(--tile-line), var(--shadow); } html[data-theme] div[style*="max-width:52rem"] a.glass-card { background: rgb(var(--panel-rgb) / var(--tile-a)); border-radius: 14px; } html[data-theme] main > div.border-t { border-color: var(--hairline); } /* --------------------------------------------------------------------- Inline-Farbbrücke (nur hell): dunkle Inline-Boxen und -Texte --------------------------------------------------------------------- */ :where(html[data-theme="light"]) :is([style*="background:rgba(24,32,41"], [style*="background: rgba(24,32,41"]) { background: rgb(255 255 255 / .78) !important; } :where(html[data-theme="light"]) [style*="border:1px solid rgba(255,255,255"] { border-color: var(--hairline) !important; } :where(html[data-theme="light"]) [style*="border-top:1px solid rgba(255,255,255"] { border-top-color: var(--hairline) !important; } :where(html[data-theme="light"]) :is([style*="color:#e2e8f0"], [style*="color: #e2e8f0"], [style*="color:#cfc2d3"]) { color: var(--ink) !important; } :where(html[data-theme="light"]) :is([style*="color:#475569"], [style*="color: #475569"], [style*="color:#64748b"], [style*="color:#334155"]) { color: var(--text-subtle) !important; } :where(html[data-theme="light"]) :is([style*="color:#94a3b8"], [style*="color: #94a3b8"]) { color: var(--text-muted) !important; } :where(html[data-theme="light"]) [style*="color:#fff"]:not([style*="background"]):not([class*="bg-"]) { color: var(--ink) !important; } :where(html[data-theme="light"]) :is([style*="color:rgba(225,182,255"], [style*="color: rgba(225,182,255"]) { color: var(--link) !important; } :where(html[data-theme="light"]) .prose :is(p, li, blockquote, td, th, figcaption) { color: var(--text); } :where(html[data-theme="light"]) .prose :is(h1, h2, h3, h4, strong) { color: var(--ink); } :where(html[data-theme="light"]) .prose a { color: var(--link); } :where(html[data-theme="light"]) :is(.blog-tag, .blog-card-body, .blog-meta) { color: var(--text-muted); } :where(html[data-theme="light"]) .highlight-box { background: rgb(255 255 255 / .85); border-color: var(--accent-line); color: var(--text); } /* Dunkel: nur der zu schwache Inline-Grauton wird angehoben */ :where(html[data-theme="dark"]) :is([style*="color:#475569"], [style*="color: #475569"]) { color: #94a3b8 !important; }