/* ailh-darkmode.css -- Dunkelmodus fuer das oeffentliche Frontend von ailinkhub.de. * * ailh-feat 2026-08-31 (darkmode) * * WARUM ES DIESE DATEI GIBT (nicht offensichtlich, bitte lesen bevor etwas geaendert wird) * --------------------------------------------------------------------------------------- * 1. Das Tailwind-Bundle (public/build/assets/landing-page-*.css) ist VORKOMPILIERT. * Neue Utility-Klassen im Markup erzeugen kein CSS. Alles Eigene muss deshalb als * fertiges CSS hier stehen. * 2. Diese Datei wird BEWUSST NACH dem Vite-Bundle eingebunden (siehe * resources/views/default/layout/app.blade.php und default/blog/app.blade.php). * ailh-layout.css laeuft dagegen VOR dem Bundle -- eine Umdefinition von :root dort * wuerde vom Bundle wieder ueberschrieben. Wer den Link im Blade verschiebt, macht * den halben Dunkelmodus kaputt. * 3. Trotzdem ist fast alles ueber :root[data-ailh-theme="dark"] geschrieben (Spezifitaet * 0,2,0 statt 0,1,0 bei blankem :root). Damit wirkt die Palette selbst dann, wenn * diese Datei irgendwann doch vor dem Bundle landet. !important wird nur dort benutzt, * wo eine Tailwind-Variantenklasse (z. B. [&.lqd-is-sticky]:bg-white) sonst gewinnt. * * WIE DER SCHALTER ARBEITET * ------------------------- * resources/views/default/components/ailh-theme-init.blade.php setzt im VOR dem * Rendern data-ailh-theme="dark|light" auf und zusaetzlich die Klasse * theme-dark/theme-light. Die Klasse ist Absicht: die Teilen-Leiste (.ailh-share) hat in * ailh-layout.css schon .theme-dark-Regeln aus dem Panel-Kontext -- die greifen dadurch * ohne Dopplung. Gespeichert wird in localStorage unter "ailhTheme" (light|dark|system), * gespiegelt nach "lqdDarkMode" (Panel-Schluessel), damit Panel und Frontend EINE * gemeinsame Wahl haben und keine zwei konkurrierenden Mechanismen entstehen. * * PALETTE / KONTRAST (gemessen, WCAG 2.1) * -------------------------------------- * Grund #131520 (hsl 230 24% 10%) -- dunkles Marineblau, bewusst kein Schwarz * Flaeche #1F222E (hsl 228 20% 15%) -- Karten/Kopfleiste * Fliesstext #C1C8D2 auf Grund -- 10,8:1 (AAA), bei opacity-60 noch 4,6:1 * Ueberschr. #EFF1F6 auf Grund -- 16,1:1 (AAA) * Gedaempft #9EA7B3 auf Grund -- 7,5:1 (AAA) * Markenblau #7088FF auf Grund -- 5,8:1 (AA) -- Markenfarbe bleibt unveraendert * Link #8FA9FF auf Grund -- 8,0:1 (AAA) * Rand #5D6479 auf Grund -- 3,1:1 (AA fuer Bedienelemente) */ /* ========================================================================== 1. Palette ========================================================================== */ :root[data-ailh-theme="dark"] { /* Die zehn wirklich farbtragenden Variablen des Themes "modern". Alle anderen der 139 Variablen sind Typografie/Motion und bleiben unangetastet. */ --background: 230 24% 10%; --foreground: 214 16% 79%; --heading-background: 228 20% 15%; --heading-foreground: 220 28% 95%; --primary: 230 100% 72%; /* unveraendert: die Markenfarbe soll erkennbar bleiben */ --primary-foreground: 230 40% 10%; --border: 226 13% 42%; --button-border: 226 13% 42%; /* Verlaeufe aufgehellt: die hellen Originalwerte (57 % / 51 % Helligkeit) wirken auf dunklem Grund matt und schmutzig. */ --gradient-from: 201 45% 68%; --gradient-via: 230 100% 72%; --gradient-to: 176 55% 62%; /* Eigene Hilfsvariablen (im Theme nicht vorhanden) */ --ailh-surface: 228 20% 15%; --ailh-surface-2: 228 18% 21%; --ailh-muted: 214 12% 66%; --ailh-hairline: 228 15% 26%; /* Eigene Linkfarbe. Warum nicht --primary: #7088FF erreicht auf der hellsten Flaeche (#2A2D3C) nur 4,15:1 und faellt damit unter AA. #8FA9FF schafft auf jedem hier vorkommenden Grund mindestens 5,8:1 und bleibt im Markenblau. */ --ailh-link: 226 100% 78%; --ailh-accent-violet: 258 90% 78%; } /* Der Grund haengt am body (Klasse bg-background). Explizit setzen, damit auch Ueberscroll-Bereiche dunkel sind statt weiss aufzublitzen. */ :root[data-ailh-theme="dark"], :root[data-ailh-theme="dark"] body { background-color: hsl(var(--background)); color-scheme: dark; /* faerbt Scrollbalken, Formular-Widgets und Autofill mit */ } /* ========================================================================== 2. Kopfleiste ========================================================================== */ /* Blog/Rechtstexte: die Kopfleiste traegt [&.lqd-is-sticky]:bg-white und [&.lqd-is-sticky]:text-black. Beide Klassen haben Spezifitaet 0,2,0, deshalb hier !important statt eines noch laengeren Selektors. */ :root[data-ailh-theme="dark"] .site-header.lqd-is-sticky { background-color: hsl(var(--ailh-surface)) !important; color: hsl(var(--heading-foreground)) !important; box-shadow: 0 4px 20px rgb(0 0 0 / 0.45) !important; } :root[data-ailh-theme="dark"] .site-header.lqd-is-sticky .site-header-nav, :root[data-ailh-theme="dark"] .site-header.lqd-is-sticky nav { border-color: hsl(var(--ailh-hairline)) !important; } /* ========================================================================== 3. Fest verdrahtete helle Flaechen -------------------------------------------------------------------------- Rund 1180 Farben stehen fest im Bundle. Vollstaendigkeit ist weder moeglich noch noetig -- hier stehen genau die Klassen, die auf Startseite, Blog, Blogbeitrag und Rechtstexten tatsaechlich als helle Flaeche oder dunkle Schrift sichtbar werden. Gesucht per DOM-Scan (Elemente mit Luminanz > 0,45), nicht geraten. Warum [class*="..."] und nicht .bg-\[\#fafafa\]: so werden auch Varianten-Schreibweisen wie [&.lqd-is-active]:bg-[#F8FAFB] miterfasst. Nebenwirkung: ein hover:-Praefix wuerde ebenfalls treffen und dauerhaft gelten. Auf diesen Seiten kommt das nicht vor -- bei neuen Klassen bitte pruefen. ========================================================================== */ :root[data-ailh-theme="dark"] [class*="bg-[#fafafa]"], :root[data-ailh-theme="dark"] [class*="bg-[#FAFBFE]"], :root[data-ailh-theme="dark"] [class*="bg-[#F5F5F5]"], :root[data-ailh-theme="dark"] [class*="bg-[#F5F7F9]"], :root[data-ailh-theme="dark"] [class*="bg-[#F8FAFB]"], :root[data-ailh-theme="dark"] [class*="bg-[#F8FAFC]"] { background-color: hsl(var(--ailh-surface)); color: hsl(var(--foreground)); } /* bg-white bewusst ueber die Tailwind-Mechanik: die Klasse rechnet mit --tw-bg-opacity. Wer hier eine feste Farbe setzt, macht aus dem 10-Prozent-Schleier des mobilen Menue-Knopfes eine deckende Flaeche. */ :root[data-ailh-theme="dark"] .bg-white { background-color: rgb(31 34 46 / var(--tw-bg-opacity, 1)); } /* Weisse Weichzeichner-Schleier im Hero. Auf dunklem Grund wuerde daraus ein grosser milchiger Fleck. Stattdessen ein dezenter Schein in der Markenfarbe. */ :root[data-ailh-theme="dark"] .bg-white\/35 { background-color: hsl(var(--primary) / 0.18); } /* Schwarz-Schleier (Trenner, Hover-Flaechen) kehren sich um, sonst unsichtbar. */ :root[data-ailh-theme="dark"] .bg-black\/10 { background-color: rgb(255 255 255 / 0.10); } :root[data-ailh-theme="dark"] .group:hover .group-hover\:bg-black\/5 { background-color: rgb(255 255 255 / 0.08); } /* Der senkrechte Linienraster im Hero ist reines Weiss. Auf hellem Grund unsichtbar, auf dunklem sonst ein hartes Streifenmuster. */ :root[data-ailh-theme="dark"] .repeating-gradient-lines { opacity: 0.05; } /* Verlauf "nach Weiss" (grosse Deko-Zahl im Blog) auf die Flaechenfarbe ziehen. */ :root[data-ailh-theme="dark"] .to-white { --tw-gradient-to: hsl(var(--ailh-surface-2)) var(--tw-gradient-to-position); } /* ========================================================================== 4. Fest verdrahtete dunkle Schrift und Raender ========================================================================== */ :root[data-ailh-theme="dark"] .text-black, :root[data-ailh-theme="dark"] [class*="text-[#4A4A4A]"], :root[data-ailh-theme="dark"] [class*="text-[#4A5C73]"] { color: hsl(var(--heading-foreground)); } /* text-[#4A5C7380] ist derselbe Farbwert mit 50 % Deckung (Fliesstext zweiter Ordnung). Wird bewusst gedaempft, nicht voll aufgehellt -- die Hierarchie soll erhalten bleiben. */ :root[data-ailh-theme="dark"] [class*="text-[#4A5C7380]"], :root[data-ailh-theme="dark"] [class*="text-[#768793]"], :root[data-ailh-theme="dark"] [class*="text-[#A2B2C9]"] { color: hsl(var(--ailh-muted)); } :root[data-ailh-theme="dark"] .text-black\/30 { color: rgb(255 255 255 / 0.45); } :root[data-ailh-theme="dark"] .border-black { border-color: hsl(var(--ailh-hairline)); } :root[data-ailh-theme="dark"] .border-black\/5, :root[data-ailh-theme="dark"] .border-black.border-opacity-5 { border-color: rgb(255 255 255 / 0.10); } /* Blog-Kopfleiste im Sticky-Zustand: die Klassen sind Varianten mit hoeherer Spezifitaet, deshalb nochmal gezielt. */ :root[data-ailh-theme="dark"] .site-header.lqd-is-sticky .text-black, :root[data-ailh-theme="dark"] .group\/header.lqd-is-sticky .group-\[\.lqd-is-sticky\]\/header\:border-black { color: hsl(var(--heading-foreground)); border-color: hsl(var(--ailh-hairline)); } /* Sprachwahl-Aufklapper: bg-white text-black. Der Text muss mitgezogen werden, sonst schwarz auf dunkel. */ :root[data-ailh-theme="dark"] .bg-white.text-black, :root[data-ailh-theme="dark"] .bg-white .text-black { color: hsl(var(--heading-foreground)); } :root[data-ailh-theme="dark"] .hover\:bg-black.hover\:bg-opacity-5:hover { background-color: rgb(255 255 255 / 0.08); } /* ========================================================================== 4b. Nachgezogene Einzelfarben aus dem Bundle -------------------------------------------------------------------------- Alle Werte unten stammen aus einem Kontrast-Scan der vier Seiten im Dunkelmodus (jedes Textelement gegen seinen tatsaechlichen Hintergrund gerechnet). Es sind genau die Stellen, die unter WCAG AA gefallen sind. ========================================================================== */ /* .text-header-p ist im Bundle fest auf #666 gesetzt (auf Weiss 5,7:1, auf dunkel nur 3,2:1). Betrifft nahezu jeden Einleitungsabsatz der Startseite. */ :root[data-ailh-theme="dark"] .text-header-p { color: hsl(var(--ailh-muted)); } /* Einleitungstext von Blog und Rechtstexten: dunkles Petrol, auf dunkel 1,6:1. */ :root[data-ailh-theme="dark"] [class*="text-[#0E3F58]"] { color: hsl(var(--foreground)); } /* Links in Markenblau/Indigo. text-indigo-600 steht im Panel-Login. */ :root[data-ailh-theme="dark"] [class*="text-[#106AC4]"], :root[data-ailh-theme="dark"] .text-blue-700, :root[data-ailh-theme="dark"] .text-indigo-600 { color: hsl(var(--ailh-link)); } /* Sonderfall: der Hinweiskasten faerbt seine Links ueber die Nachfahren-Variante [&_a]:text-blue-700. Das traegt selbst KEINE Klasse -- die Regel weiter oben greift dort also nicht, es braucht den Elternselektor. */ :root[data-ailh-theme="dark"] [class*="[&_a]:text-blue-700"] a { color: hsl(var(--ailh-link)); } /* Violetter Akzent der Vorlagen-Kacheln: #684AE2 erreicht auf dunkel nur 3,2:1. */ :root[data-ailh-theme="dark"] [class*="text-[#684AE2]"] { color: hsl(var(--ailh-accent-violet)); } :root[data-ailh-theme="dark"] [class*="bg-[#684AE2]/10"] { background-color: hsl(var(--ailh-accent-violet) / 0.16); } /* Haupt-Schaltflaeche mit Farbverlauf (.bg-gradient). Messfalle, die hier gestolpert ist: der Verlauf steckt in background-image, background-color ist rgba(0,0,0,0). Jede Kontrastmessung ueber backgroundColor meldet fuer solche Elemente einen Fantasiewert. Von Hand gegen die Verlaufsstopps gerechnet: weisse Schrift erreicht am hellsten Stopp (#89B8D2) nur 1,8:1 -- im hellen Modus mit den originalen Stopps immerhin auch nur 2,9:1, also schon dort ein Mangel. Im Dunkelmodus steht deshalb dunkle Schrift auf dem Verlauf: gegen den dunkelsten Stopp (#7088FF) sind das 5,5:1, gegen alle helleren mehr. Die .dot-Elemente mit derselben Klasse tragen keinen Text, sie sind nicht betroffen. */ :root[data-ailh-theme="dark"] a.bg-gradient, :root[data-ailh-theme="dark"] button.bg-gradient { color: hsl(230 45% 12%); } /* Abzeichen "Produkt-Updates": heller Lila-Verlauf mit .text-black am Elternelement. Zusammen mit der text-black-Regel weiter oben (schwarz -> fast weiss) ergab das helle Schrift auf hellem Grund. Statt die Regel oben aufzuweichen, wird hier die Flaeche mitgedreht -- so bleibt das Abzeichen ein violetter Akzent. Gemessen: #B394F9 auf der resultierenden Flaeche (#302C47) = 5,6:1. */ :root[data-ailh-theme="dark"] .from-purple-100.via-purple-200.to-slate-200 { background-image: none; background-color: hsl(var(--ailh-accent-violet) / 0.18); color: hsl(var(--ailh-accent-violet)); } /* ========================================================================== 5b. Deko-Rastergrafiken -------------------------------------------------------------------------- decor-1.jpg, decor-2.jpg und bg-marquee.jpg sind fast weisse, seitenbreite Texturbilder. Als Rasterbild lassen sie sich nicht ueber Variablen umfaerben; unveraendert erzeugen sie grosse weisse Flaechen -- unter dem Hero und, besonders stoerend, hinter der Vergleichstabelle und hinter der Umriss-Schrift ("Keine Wasserzeichen"), wo weisse Schrift dann auf weissem Grund stand. invert(1) dreht sie ins Dunkle, brightness/saturate nimmt die Haerte heraus. Der Selektor trifft bewusst NUR die Praefixe decor- und bg- unter /landing-page/. Ein globaler Bildfilter wuerde Produktaufnahmen (banner-img.jpg, *-generator.jpg), die Roboter- und Avatar-PNGs sowie alle Blogbilder verfaelschen. Wer eine neue seitenbreite Deko-Datei hinzufuegt, muss sie decor-* oder bg-* nennen oder hier ergaenzen. ========================================================================== */ /* Kundenlogos im Vertrauensband ("Diese grossartigen Unternehmen vertrauen uns"). Fuenf einfarbig schwarze SVG unter /clientAvatar/. Auf dunklem Grund praktisch unsichtbar. Umkehren statt einfaerben: es sind externe Dateien, an denen wir nichts aendern, und sie sind monochrom -- invert liefert dort ein sauberes Ergebnis. Der Selektor greift bewusst nur diesen Ordner: die Portraits der Erfahrungsberichte liegen unter /themes/.../avatar-*.png und wuerden durch invert entstellt. */ :root[data-ailh-theme="dark"] img[src^="/clientAvatar/"] { filter: invert(1) brightness(0.85); } :root[data-ailh-theme="dark"] img[src*="/landing-page/decor-"], :root[data-ailh-theme="dark"] img[src*="/landing-page/bg-"] { filter: invert(1) brightness(0.28) saturate(0.4); } /* ========================================================================== 5. Bilder und Einbettungen ========================================================================== */ /* Blogbilder und Screenshots bleiben unveraendert -- ein Filter darauf verfaelscht Produktaufnahmen. Nur die Umrandung wird angepasst, damit weisse Bildraender nicht hart abreissen. */ :root[data-ailh-theme="dark"] .blog-post-content img, :root[data-ailh-theme="dark"] article img { border-radius: inherit; } /* ========================================================================== 6. Umschalter -------------------------------------------------------------------------- Bewusst mit currentColor gebaut: die Kopfleiste wechselt ihre Schriftfarbe je Abschnitt (Klasse is-dark am Header). Feste Farben waeren an der Haelfte der Positionen unlesbar. ========================================================================== */ .ailh-tt { position: relative; display: inline-flex; align-items: center; } /* Sichtbarkeit der beiden Platzierungen. Warum hier und nicht per max-lg:hidden im Markup: das Tailwind-Bundle ist vorkompiliert, neue Varianten-Klassen erzeugen kein CSS. Der Umbruchpunkt 1024 px ist NICHT frei gewaehlt: genau dort schaltet die Kopfleiste auf das Klappmenue um (Menue-Knopf hat lg:hidden, .site-nav-container benutzt max-lg:). Wer ihn hier aendert, muss ihn dort mitaendern. */ .ailh-tt--bar { display: none; } /* Der Umschalter steht als Geschwister neben der Menue-Liste, die ihr p-10 selbst mitbringt. Ohne eigenen Innenabstand klebte er am linken Rand und lief rechts aus dem Bild. Werte an den Sprachblock darueber angeglichen (px-10, pt-6, pb-5). */ .ailh-tt--menu { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; width: 100%; box-sizing: border-box; padding: 1.5rem 2.5rem 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.05); } @media (min-width: 1024px) { .ailh-tt--bar { display: inline-flex; } .ailh-tt--menu { display: none; } } /* --- Variante im Klappmenue: drei Knoepfe nebeneinander ------------------- */ .ailh-tt__grouplabel { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .ailh-tt__group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ailh-tt__chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; /* Tastflaeche nach WCAG 2.5.8 / Apple HIG */ padding: 0.5rem 0.875rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 9999px; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .ailh-tt__chip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ailh-tt__chip:hover { border-color: currentColor; background-color: color-mix(in srgb, currentColor 10%, transparent); } .ailh-tt__chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Der aktive Knopf ist nicht nur farblich markiert: aria-checked meldet ihn an Screenreader, zusaetzlich Rahmen und Fettung. */ .ailh-tt__chip[aria-checked="true"] { border-color: currentColor; background-color: color-mix(in srgb, currentColor 16%, transparent); font-weight: 600; } .ailh-tt__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 9999px; border: 2px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); background: transparent; color: inherit; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } /* Tastfeld auf 44x44 vergroessern, ohne den 40er-Kreis zu veraendern (die Nachbarknoepfe in der Kopfleiste sind ebenfalls 40 px). */ .ailh-tt__btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; } .ailh-tt__btn:hover { border-color: currentColor; background-color: color-mix(in srgb, currentColor 8%, transparent); } .ailh-tt__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .ailh-tt__btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Nur das Symbol des aktiven Zustands zeigen. */ .ailh-tt__icon { display: none; } :root[data-ailh-theme-mode="light"] .ailh-tt__icon--light, :root[data-ailh-theme-mode="dark"] .ailh-tt__icon--dark, :root[data-ailh-theme-mode="system"] .ailh-tt__icon--system { display: block; } /* Rueckfall, falls das Kopf-Skript nicht laeuft (JS aus): Sonne zeigen. */ :root:not([data-ailh-theme-mode]) .ailh-tt__icon--light { display: block; } .ailh-tt__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 0.75rem); z-index: 60; min-width: 190px; padding: 6px; border-radius: 14px; border: 1px solid rgb(0 0 0 / 0.08); background-color: #ffffff; box-shadow: 0 18px 40px rgb(16 24 40 / 0.16); color: #2b2b2b; text-align: start; } /* WICHTIG: ohne !important kann eine Display-Utility aus dem Bundle das hidden-Attribut aushebeln -- das Menue waere dann dauerhaft offen. */ .ailh-tt__menu[hidden] { display: none !important; } :root[data-ailh-theme="dark"] .ailh-tt__menu { background-color: hsl(var(--ailh-surface-2)); border-color: hsl(var(--ailh-hairline)); color: hsl(var(--heading-foreground)); box-shadow: 0 18px 40px rgb(0 0 0 / 0.55); } .ailh-tt__item { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1.2; text-align: start; cursor: pointer; transition: background-color 0.15s ease; } .ailh-tt__item svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ailh-tt__item:hover { background-color: rgb(0 0 0 / 0.05); } :root[data-ailh-theme="dark"] .ailh-tt__item:hover { background-color: rgb(255 255 255 / 0.08); } .ailh-tt__item:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; } /* Der Haken ist NICHT der einzige Hinweis auf den aktiven Zustand: aria-checked meldet ihn an Screenreader, zusaetzlich wird die Schrift fetter. */ .ailh-tt__item[aria-checked="true"] { font-weight: 600; } .ailh-tt__check { margin-inline-start: auto; opacity: 0; } .ailh-tt__item[aria-checked="true"] .ailh-tt__check { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ailh-tt__btn, .ailh-tt__item, .ailh-tt__chip { transition: none; } } /* ========================================================================== 7. Teilen-Leiste -------------------------------------------------------------------------- Die .theme-dark-Regeln fuer .ailh-share stehen bereits in ailh-layout.css und greifen, weil das Kopf-Skript theme-dark auf setzt. Hier nur noch die Randfaelle, die dort auf den Panel-Hintergrund gerechnet waren. ========================================================================== */ :root[data-ailh-theme="dark"] .ailh-share__toast { background-color: hsl(var(--ailh-surface-2)); color: hsl(var(--heading-foreground)); } /* ============================================================================ ailh-fix 2026-08-31 (hoverkarten) PROBLEM: Die Karten im Funktionen-Raster tragen die Vendor-Klasse `hover:bg-white`. Auf Geraeten mit Beruehrung bleibt der Hover-Zustand nach einem Antippen haengen, bis woanders hingetippt wird. Im Dunkelmodus wurde die Karte dadurch schlagartig WEISS, waehrend die Schrift hell blieb: hellgrauer Text auf weissem Grund, praktisch unlesbar. Auf einem iPhone reproduziert. ZWEI EINGRIFFE, bewusst getrennt: 1. Grundsaetzlich: Hover-Effekte gelten nur noch auf Geraeten mit echtem Zeiger (`@media (hover: hover)`). Damit klebt auf Mobilgeraeten gar kein Hover-Zustand mehr fest, in BEIDEN Modi. Das ist die eigentliche Ursache und der Grund, warum dieser Block nicht nur den Dunkelmodus repariert. 2. Im Dunkelmodus bekommt die Karte beim Zeigen eine aufgehellte DUNKLE Flaeche statt Weiss. Eine weisse Karte waere im Dunkelmodus ohnehin ein Fremdkoerper, unabhaengig von der Lesbarkeit. Warum diese Regeln hier und nicht in ailh-layout.css: An jener Datei arbeitet parallel die Kontrastkorrektur. Getrennte Dateien vermeiden, dass sich zwei Bearbeitungen gegenseitig ueberschreiben. ========================================================================== */ /* 1. Kein klebender Hover-Zustand auf Beruehrungsgeraeten (beide Modi) */ @media (hover: none) { .lqd-feature-box:hover, .lqd-feature-box:focus-within { background-color: rgba(255, 255, 255, 0.05) !important; border-color: hsl(var(--border)) !important; transform: none !important; box-shadow: none !important; } } /* 2. Im Dunkelmodus: beim Zeigen aufgehelltes Dunkel statt Weiss */ :root[data-ailh-theme="dark"] .lqd-feature-box:hover { background-color: hsl(var(--ailh-surface-2, 228 20% 18%)) !important; border-color: hsl(var(--ailh-hairline, 226 13% 42%)) !important; } /* Beschriftung und Flaechentext der Karte folgen der Flaeche, nicht dem Vendor-Weiss */ :root[data-ailh-theme="dark"] .lqd-feature-box:hover, :root[data-ailh-theme="dark"] .lqd-feature-box:hover * { color: hsl(var(--foreground)) !important; } :root[data-ailh-theme="dark"] .lqd-feature-box:hover h1, :root[data-ailh-theme="dark"] .lqd-feature-box:hover h2, :root[data-ailh-theme="dark"] .lqd-feature-box:hover h3, :root[data-ailh-theme="dark"] .lqd-feature-box:hover h4, :root[data-ailh-theme="dark"] .lqd-feature-box:hover strong, :root[data-ailh-theme="dark"] .lqd-feature-box:hover b { color: hsl(var(--heading-foreground)) !important; } /* ============================================================================ ailh-fix 2026-08-31 (dunkelfix) ---------------------------------------------------------------------------- Drei nachgemessene Lesbarkeitsmaengel im Dunkelmodus. Gemessen wurde auf den vier oeffentlichen Seiten (Startseite, Blog, Blogbeitrag, Rechtstexte) bei 390 px und 1280 px, jeweils die tatsaechliche Vordergrundfarbe inklusive Alpha und geerbter Deckkraft gegen den tatsaechlich darunter liegenden Grund. Die Sektionen der Startseite tragen md:opacity-0 und blenden erst beim echten Scrollen ein, gemessen wurde deshalb nach einem Durchlauf in Scrollschritten. ============================================================================ */ /* --- 1. Handlungsaufruf "Starten Sie Ihre kostenlose Testversion." ---------- Betrifft die Fusszeile von Blog, Blogbeitrag und Rechtstexten. Die Startseite hat eine andere Fusszeilen-Variante und war nie betroffen. URSACHE, und sie steht in dieser Datei selbst: die Ueberschrift ist Verlaufsschrift ohne .text-gradient. Sie benutzt die Tailwind-Mechanik bg-gradient-to-br from-transparent to-white to-50% zusammen mit bg-clip-text und text-transparent. Die Regel weiter oben :root[data-ailh-theme="dark"] .to-white { --tw-gradient-to: hsl(var(--ailh-surface-2)) ... } war fuer FLAECHEN gedacht (Verlauf nach Weiss bei der grossen Deko-Zahl im Blog). Sie trifft aber jedes Element mit der Klasse .to-white, also auch diese SCHRIFT. Aus dem weissen Verlaufsende wurde damit die Flaechenfarbe #2C303F, ein dunkles Blaugrau. Gemessen 1,60:1 gegen den Fusszeilengrund, die linke Haelfte des Verlaufs war ausserdem voellig durchsichtig. Eine Kontrastpruefung, die getComputedStyle(el).color liest, sieht hier nichts: -webkit-text-fill-color steht auf transparent, die eigentliche Farbe steckt in background-image. Genau deshalb ist die Stelle bei zwei frueheren Durchgaengen durchgerutscht. BEHOBEN wird nicht die Farbe allein, sondern der ganze Verlauf fuer den Fall "Verlauf ist Schrift". Beide Stopps sind fest gesetzt, weil ein Stopp auf transparent grundsaetzlich keinen Kontrast erreichen kann. #C2C7D6 am Anfang, Weiss ab 50 Prozent. Der weiche Verlauf der Vorlage bleibt damit erhalten, nur eben zwischen zwei lesbaren Helligkeiten. Gemessen gegen den realen Grund unter der Ueberschrift (etwa #1B0B66): 9,8:1. Gegen den HELLSTEN Punkt des violetten Fusszeilen-Verlaufs (#A12A91, der liegt oberhalb der Ueberschrift ausserhalb des Textbereichs): 3,89:1. Beide Werte liegen ueber den 3:1, die fuer grosse Schrift gelten. Die Schrift ist hier je nach Breite 59 px bis 100 px gross. Warum .bg-clip-text im Selektor und keine Aenderung an der Regel oben: die Flaechenregel soll fuer Flaechen genau so bleiben. Wer spaeter eine weitere Verlaufsschrift mit .to-white anlegt, ist damit automatisch mit abgedeckt. */ :root[data-ailh-theme="dark"] .to-white.bg-clip-text { background-image: linear-gradient(to bottom right, hsl(224 20% 80%), #ffffff 50%); } /* --- 2. Urheberrechtszeile in der Fusszeile der Startseite ------------------ Die Zeile traegt die Vendor-Klasse opacity-55, der Text selbst ist weiss mit 80 Prozent. Zusammen sind das 0,44 Deckung auf #0A0A0E, gemessen 4,35:1 und damit knapp unter AA. Mit 0,66 sind es 5,84:1. Der Fusszeilengrund #0A0A0E ist in beiden Modi derselbe, deshalb ist es derselbe Zahlenwert wie im hellen Modus. Angefasst wird bewusst nur die Vendor-Klasse .opacity-55 innerhalb der Fusszeile. Der Knopf .ailh-a11y-footerlink liegt in einem anderen Teilbaum (.ailh-footer-legal), traegt seine eigene Deckkraft aus ailh-a11y.css und bleibt bei 21:1. */ :root[data-ailh-theme="dark"] .site-footer .opacity-55 { opacity: 0.66; } /* --- 3. Download-Kasten in Blogbeitraegen (.ailh-dl-all) -------------------- Nebenbefund aus dem Scan, kein Rueckschlag aus der Kontrastkorrektur: die Farben stehen unveraendert seit vor jener Korrektur in ailh-layout.css und sind auf hellen Grund hin gewaehlt. Auf #131520 ergaben sie 3,67:1 fuer den Fliesstext (#647184) und 2,99:1 fuer den Link (#4457C9), beide unter AA. Auf die Palette dieser Datei gezogen: 7,5:1 fuer den Text, 8,0:1 fuer den Link. Der helle Modus bleibt unberuehrt. */ :root[data-ailh-theme="dark"] .ailh-dl-all { color: hsl(var(--ailh-muted)); } :root[data-ailh-theme="dark"] .ailh-dl-all a { color: hsl(var(--ailh-link)); } /* ========================================================================== Anwendungsfall-Karten auf der Startseite ========================================================================== ailh-fix 2026-08-31 (anwendungsfaelle) Die Karten im Block "So arbeiten Sie mit AiLinkHub" (Blade: resources/views/modern/landing-page/testimonials/item.blade.php) tragen die Vendor-Klasse bg-background. Im Dunkelmodus zeigt genau die auf den Seitengrund, die Karten verschwanden dadurch im Hintergrund und nur der Trennstrich blieb sichtbar. Der Schlagschatten des Vendors (shadow-[0px_10px_40px_0px_#00000014], also Schwarz mit 8 Prozent) traegt auf dunklem Grund nichts bei. Deshalb hier die Flaechenfarbe und ein tragfaehiger Schatten. Der helle Modus bleibt unberuehrt. Der Selektor greift ueber .testimonials-main-carousel, weil das die einzige Stelle ist, an der Flickity diese Karten ausliefert. Innerhalb des Karussells ist rounded-2xl nur an der Karte selbst gesetzt. */ :root[data-ailh-theme="dark"] .testimonials-main-carousel .rounded-2xl { background-color: hsl(var(--ailh-surface)); box-shadow: 0 10px 40px rgb(0 0 0 / 0.45); } :root[data-ailh-theme="dark"] .testimonials-main-carousel .rounded-2xl .border-b { border-color: hsl(var(--ailh-hairline)); }