/* ThalassA Designsystem — Palette 2026-09. Seit D1 (12.09.2026) die Werte * des Konzepts docs/konzept/2026-09-11-konzept.html, der einzigen Wahrheit * fuer das Aussehen. * * Ladeposition unveraendert: nach tokens/*, vor kompat.css. Sie ersetzt * `thalassa-0831-palette.css` an derselben Stelle; die alte Datei liegt noch * auf der Platte, wird aber von keiner Seite mehr geladen. * * DIE 20 WERTE DES KONZEPTS stehen oben im :root WOERTLICH — Name und Wert * wie in der Quelle, Kleinschreibung und Leerzeichen eingeschlossen. * tests/test_konzept_fundament.py liest das :root der Quelle und vergleicht * jeden Wert; eine Abweichung ist rot, mit Nennung des Tokens. (Der Auftrag zaehlt * 21 — die Datei hat 20; die Datei ist die Quelle.) Vier der 20 * (--radius-sm, --radius-lg, --shadow-md, --shadow-lg) fuehren radius.css und * elevation.css mit demselben Wert; derselbe Test haelt beide zusammen. * * EISERNE REGEL (W1) gilt weiter: Jeder Token-Name der alten Datei steht * auch hier — faellt ein Name weg, bricht eine Bestandsseite STILL, weil * eine Variable ohne Wert in CSS nichts meldet. tests/test_website_kontrast.py * §1 vergleicht die Namensmengen. Deshalb folgen unter den 20 Werten alle * bisherigen Namen, UMGELEGT auf die 20 (der Bericht D1 begruendet jede Zeile): * * Primaerrampe 50, 100 -> --emerald-pale 300 -> --knopf-gruen-hover * 400 -> --knopf-gruen 500 -> --emerald * 600 -> --knopf-gruen-hover 700 -> --emerald-dark * 800, deep -> --ink-3 900 -> --ink * Neutralrampe 100, 200 -> --paper 300 -> --mist * 400 -> --line 500, steel -> --muted-2 * 600 -> --muted 700 -> --ink-2 * 800 -> --ink * Sand 100 -> --paper 200 -> --mist 300 -> --line * * ZWEI WERTE AUSSERHALB DES :root, beide aus dem Konzept: --knopf-gruen * #3ee0ad und --knopf-gruen-hover #6aebc4 sind Grund und Hover von * `.btn--primary` dort. Sie tragen die Rollen, fuer die die 20 keinen hellen * Gruenton haben: Hover und Druck der Handlungsflaeche — mit Tinte darauf, * denn --emerald-dark laege bei 3,34:1 — und die hellen Akzente auf dunklem * Grund (Vorzeilen, Punkte, Fokusring). Das Konzept hellt den Knopf beim * Ueberfahren AUF, es dunkelt ihn nicht ab; die Rampe folgt dem, auch wenn * 600 damit heller ist als 500. * * WAS WEGFAELLT. Die Sandwerte (W1, aus einem Sandton des Style Guide * hergeleitet): Die Namen bleiben, ihre Werte sind Paper, Mist und Line. * Und das W1-Verbot des Schwarzgruens: D1 hat den Widerspruch zwischen Tibis * Vorgaben und dem Konzept entschieden, das Konzept gewinnt bei Schrift und * Farbe. --ink ist die dunkelste Flaeche, --color-primary-900 zeigt darauf, * und tests/test_website_kontrast.py §4 haelt weiter fest, dass keine * Flaeche dunkler ist. Das Teal und das Lime der alten Kampagnenseite kommen * hier weiter nicht vor, auch nicht im Kommentar. * * GERECHNET AM 12.09.2026 (WCAG 2.1, relative Leuchtdichte, dieselben * Formeln wie tests/test_website_kontrast.py): * * --text-body #071b17 auf #ffffff --surface-page 17.82:1 * --text-body #071b17 auf #f7f8f4 --surface-warm 16.71:1 * --text-body #071b17 auf #edf2ed --surface-warm-card 15.72:1 * --text-muted #586861 auf #ffffff --surface-page 5.89:1 * --text-muted #586861 auf #f7f8f4 --surface-warm 5.52:1 * --text-muted #586861 auf #edf2ed --surface-muted 5.19:1 * --text-subtle #78867f auf #ffffff --surface-page 3.81:1 * --text-link #067a58 auf #ffffff --surface-page 5.34:1 * --text-link #067a58 auf #f7f8f4 --surface-warm 5.01:1 * --text-on-accent #071b17 auf #10b981 --accent 7.03:1 * --text-on-accent #071b17 auf #6aebc4 --accent-hover 12.13:1 * --text-on-accent #071b17 auf #3ee0ad --accent-active 10.58:1 * #ffffff #ffffff auf #071b17 --surface-inverse 17.82:1 * #ffffff #ffffff auf #17483c --surface-deep 10.35:1 * --border-default #d8e0da auf #ffffff --surface-page 1.35:1 * --border-control #586861 auf #ffffff --surface-page 5.89:1 * --border-control #586861 auf #edf2ed --surface-warm-card 5.19:1 * --focus-ring #067a58 auf #ffffff --surface-page 5.34:1 * --focus-ring #067a58 auf #f7f8f4 --surface-warm 5.01:1 * --focus-ring #067a58 auf #edf2ed --surface-warm-card 4.71:1 * --focus-ring-on-dark #6aebc4 auf #071b17 --surface-inverse 12.13:1 * --focus-ring-on-dark #6aebc4 auf #17483c --surface-deep 7.05:1 * --status-danger #d84b3e auf #ffffff --surface-page 4.20:1 UNTER 4.5 * (Hover waere) #067a58 auf #071b17 --text-on-accent 3.34:1 UNTER 4.5 * * Zwei Befunde daraus, beide im Bericht D1: --status-danger (--danger des * Konzepts) traegt als Text auf Weiss nur 4,20:1 — das Konzept selbst setzt * --danger nirgends ein; und --text-subtle (--muted-2) ist mit 3,81:1 keine * Textfarbe, nur Beschriftung von Nebensachen. * * Die Trennung dekorativ / bedeutungstragend bleibt: --border-default ist * --line (1,35:1 auf Weiss) und nur Kartenkante; --border-control ist --muted * und traegt Bedeutung — Eingabefelder, Umrisse, Zustandsanzeigen. * * DER FOKUSRING ist seit W1 eine FARBE, hier --emerald-dark; auf dunklem * Grund --focus-ring-on-dark. --focus-glow ist reine Dekoration. Wer * --focus-ring als box-shadow liest, bekommt eine ungueltige Deklaration und * damit GAR KEINEN Ring; die Regel lautet ueberall: * :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--focus-glow); } * * SCHATTEN: nur --shadow-md und --shadow-lg, die zwei des Konzepts. xs und * sm sind `none`, xl faellt mit lg zusammen; elevation.css genauso. */ :root{ /* --- Das :root des Konzepts, woertlich (20 Werte) --- */ --ink: #071b17; --ink-2: #0d2c25; --ink-3: #17483c; --paper: #f7f8f4; --white: #ffffff; --mist: #edf2ed; --line: #d8e0da; --muted: #586861; --muted-2: #78867f; --emerald: #10b981; --emerald-dark: #067a58; --emerald-pale: #d9f8eb; --gold: #d4af37; --danger: #d84b3e; --shadow-lg: 0 34px 90px rgba(7, 27, 23, .18); --shadow-md: 0 18px 50px rgba(7, 27, 23, .12); --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --max: 1240px; /* --- A.1 (19.09.2026): die Flaechenfarben des dunklen Gruens --------- Der Auftrag will das schwere Dunkelgruen weicher, moderner, zugaenglicher. Die Farbfamilie bleibt — Entscheidung Arpad, 19.09.2026: "mach es richtung dunkle gruen". WARUM ZWEI NEUE NAMEN UND NICHT EIN NEUER WERT FUER --ink: Weil --ink ZUGLEICH die dunkelste Flaeche UND die Textfarbe war. Wer den einen Wert aufhellt, um die Baender weicher zu machen, hellt den Fließtext auf Weiß mit auf — auf jeder Seite, unbemerkt, weil 17,82:1 auf 12:1 zu fallen keine Schwelle reißt und trotzdem schlechter liest. Die beiden sind deshalb getrennt: --ink bleibt Schrift, diese zwei sind Flaeche. GEMESSEN, nicht gegriffen (Weiß / Fokusring #6aebc4 / Akzent #10b981): #071b17 alt, Flaeche und Schrift 17,82 / 12,13 / 7,03 #0d3227 neu, --flaeche-dunkel 13,98 / 9,51 / 5,51 #17483c alt, --surface-deep 10,35 / 7,05 / 4,08 #1c5646 neu, --flaeche-tief 8,51 / 5,79 / 3,35 Der Helligkeitsabstand der zwei Ebenen bleibt erhalten (1,64 gegen vorher 1,72) — die Schichtung ist weiter zu sehen. Alle Werte liegen weit ueber ihren Schwellen; tests/test_website_kontrast.py misst sie. */ --flaeche-dunkel: #0d3227; --flaeche-tief: #1c5646; /* AKZENTTEXT AUF DUNKEL. --accent (#10b981) ist eine FLAECHEN- und Randfarbe, keine Schriftfarbe: auf Weiß misst sie 2,54:1, auf der neuen dunklen Flaeche 5,51:1 und auf dem Hero-Verlauf 4,40:1 — unter der Schwelle. Das Konzept hat das immer gewusst und dafuer eigene Werte gefuehrt (.hero .eyebrow #78e8c4, .product-section .eyebrow #7ce9c7); einen NAMEN hatte es nie, und deshalb ist beim Neubau viermal `color: var(--accent)` entstanden. Hier ist der Name. Gemessen: 9,54:1 auf --flaeche-dunkel, 7,62:1 auf dem Hero-Verlauf. */ --akzent-auf-dunkel: #7ce9c7; /* --- Der Knopf des Konzepts (.btn--primary): Grund und Hover --- */ --knopf-gruen:#3ee0ad; --knopf-gruen-hover:#6aebc4; /* --- Primaerrampe (Namen aus dem Style Guide, Werte aus dem Konzept) --- */ --color-primary-50:var(--emerald-pale); --color-primary-100:var(--emerald-pale); --color-primary-300:var(--knopf-gruen-hover); --color-primary-400:var(--knopf-gruen); --color-primary-500:var(--emerald); --color-primary-600:var(--knopf-gruen-hover); --color-primary-700:var(--emerald-dark); --color-primary-800:var(--ink-3); --color-primary-900:var(--ink); --color-primary-deep:var(--ink-3); /* --- Neutral --- */ --color-neutral-100:var(--paper); --color-neutral-200:var(--paper); --color-neutral-300:var(--mist); --color-neutral-400:var(--line); --color-neutral-500:var(--muted-2); --color-neutral-600:var(--muted); --color-neutral-700:var(--ink-2); --color-neutral-800:var(--ink); --color-steel:var(--muted-2); /* --- Sand: Namen bleiben (eiserne Regel), Werte sind Paper, Mist, Line --- */ --color-sand-100:var(--paper); --color-sand-200:var(--mist); --color-sand-300:var(--line); /* --- Alte Namen, umbelegt — unveraendert aus thalassa-0831-palette.css --- */ --teal-900:var(--color-primary-900); --cyan-200:var(--color-primary-300); --cyan-400:var(--color-primary-500); --cyan-500:var(--color-primary-500); --cyan-600:var(--color-primary-600); --cyan-800:var(--color-primary-700); --orange-500:var(--color-primary-500); --peach-100:var(--color-primary-100); --peach-300:var(--color-primary-300); --blue-50:var(--color-neutral-200); --blue-100:var(--color-neutral-300); --blue-300:var(--color-neutral-400); --blue-500:var(--color-neutral-600); --neutral-50:var(--color-neutral-300); --neutral-200:var(--color-neutral-400); --neutral-400:var(--color-neutral-500); --neutral-500:var(--color-neutral-600); --neutral-600:var(--color-neutral-700); --neutral-800:var(--color-neutral-700); --neutral-900:var(--color-neutral-800); /* --- Flaechen --- */ --surface-page:var(--white); --surface-muted:var(--mist); --surface-sunken:var(--paper); --surface-card:var(--white); --surface-warm:var(--paper); --surface-warm-card:var(--mist); --surface-inverse:var(--flaeche-dunkel); --surface-deep:var(--flaeche-tief); --surface-accent:var(--emerald); --surface-action:var(--emerald); --surface-hover:rgba(7,27,23,.06); --surface-selected:rgba(16,185,129,.14); --surface-scrim:rgba(3,16,13,.62); /* --- Text --- */ --text-heading:var(--ink); --text-body:var(--ink); --text-muted:var(--muted); --text-subtle:var(--muted-2); --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-on-dark:var(--white); --text-on-accent:var(--ink); --text-on-action:var(--ink); --text-link:var(--emerald-dark); --text-link-hover:var(--ink-3); /* --- Kanten: dekorativ oben, bedeutungstragend unten --- */ --border-subtle:var(--line); --border-default:var(--line); --border-warm:var(--line); --border-strong:var(--muted-2); --border-control:var(--muted); --border-accent:var(--emerald); --border-focus:var(--focus-ring); /* --- Fokus --- */ --focus-ring:var(--emerald-dark); --focus-ring-on-dark:var(--knopf-gruen-hover); --focus-glow:0 0 0 5px rgba(16,185,129,.28); /* --- Akzent --- */ --accent:var(--emerald); --accent-hover:var(--knopf-gruen-hover); --accent-active:var(--knopf-gruen); /* --- Zustaende: bewusst in der Primaerreihe, keine Ampel — bis auf --danger, das das Konzept selbst fuehrt --- */ --status-info:var(--muted); --status-info-surface:var(--mist); --status-success:var(--emerald-dark); --status-success-surface:var(--emerald-pale); --status-warning:var(--emerald-dark); --status-warning-surface:var(--emerald-pale); --status-danger:var(--danger); --status-danger-surface:var(--mist); /* --- Verlaeufe: der Hero-Verlauf woertlich aus .hero des Konzepts, die anderen aus den 20 Werten --- */ /* Mit der Flaeche angehoben, gleiche Schrittweite, gleiche Richtung. */ --gradient-sea:linear-gradient(138deg,#0d3227 0%,#14402f 56%,#1c5646 100%); --gradient-surf:linear-gradient(180deg,#f7f8f4 0%,#ffffff 100%); --gradient-sunset:linear-gradient(120deg,#10b981 0%,#d9f8eb 100%); --gradient-protection:linear-gradient(180deg,rgba(7,27,23,0) 0%,rgba(7,27,23,.78) 100%); /* --- Schatten: die zwei oben; die kleinen Stufen tragen keinen --- */ --shadow-xs:none; --shadow-sm:none; --shadow-xl:var(--shadow-lg); --shadow-inset-sunken:none; --glass-fill:rgba(255,255,255,.72); --glass-fill-dark:rgba(7,27,23,.55); } /* Design refinement, 21.09.2026. Semantic pairs for both language editions. The original palette names remain available to older page components. */ :root { --brand-light: #a7f3d0; --brand-dark: #067a58; --gold-light: #f5e9b8; --gold-dark: #5b490e; --surface-hero: #051a12; --surface-hero-mid: #07231a; --surface-cta: #17483c; --surface-footer: #202625; --text-on-dark-muted: #c1dbd0; --text-stat: #000000; --akzent-auf-dunkel: var(--brand-light); --text-subtle: var(--muted); --button-primary-bg: var(--brand-dark); --button-primary-hover: var(--surface-cta); --button-primary-text: var(--white); --button-primary-border: var(--brand-light); --button-shadow: 0 4px 12px rgba(5, 26, 18, .12); --button-shadow-hover: 0 7px 18px rgba(5, 26, 18, .18); --chip-bg: var(--mist); --chip-text: var(--surface-cta); --chip-border: var(--line); --chip-radius: var(--radius-pill); --chip-font-size: 11px; --chip-padding: 6px 10px; --device-bg: var(--mist); --device-radius: var(--radius-lg); --device-shadow: 0 18px 50px rgba(7, 27, 23, .12); --nav-glass: rgba(255, 255, 255, .94); --glass-border: rgba(167, 243, 208, .35); --glass-chat: rgba(5, 26, 18, .88); /* Nur der Chat-Knopf: durchsichtiger als --glass-chat, das auch Knoepfe und Sprechblasen mit Mint-Schrift im Chatfenster traegt. 65 Prozent lassen dem Mint-Zeichen ueber reinem Weiss gemessen mindestens 3,5 : 1. */ --glass-chat-launcher: rgba(5, 26, 18, .65); --gradient-hero: linear-gradient(180deg, var(--surface-hero) 0%, var(--surface-hero-mid) 52%, var(--surface-hero) 100%); }