/* ==================== Klickfund Design Tokens — Ausgabe "Gold" Gemeinsame Basis fuer index.html und editor.html. Die Vorlagen, nach denen das gebaut ist, leben von Schwarz mit Gold, Geld, Flammen und dicken Rabattbaendern. Uebersetzt heisst das hier: - Gold ist die Marke. Es traegt Balken, Raender, Baender und Zahlen. - Gruen ist das Geld. Nur die Ersparnis steht in Gruen, sonst nichts. - Rot-Orange ist das Feuer. Nur der Rabatt-Anteil ab der Schwelle, sonst nichts. Wenn alles brennt, brennt nichts. EINE Ausgabe: hell, Champagner und Elfenbein. Es gab einmal eine zweite, dunkle Ausgabe ("Bonzen-Modus") samt Umschalter. Beides ist auf Wunsch wieder entfernt worden — die Seite ist immer hell, auch wenn das Geraet auf Dunkel steht. Alle Kontrastwerte in den Kommentaren sind mit der WCAG-Formel ausgerechnet, nicht geschaetzt. ==================== */ :root { color-scheme: light; /* --- Flaechen: hell (Champagner) --- */ --c-bg: #FBF9F4; /* Elfenbein mit warmem Stich */ --c-bg-alt: #F4EDDC; /* abgesetzte Baender, Fuss */ --c-surface: #FFFFFF; /* Karten */ --c-surface-2: #FAF6EC; /* Chips, Eingabefelder */ --c-border: #EBE3D0; --c-border-strong: #D9C89C; /* --- Schrift: hell --- */ --c-text: #16130C; /* 18,5:1 auf Weiss, 17,6:1 auf --c-bg */ --c-text-muted: #5A5140; /* 7,8:1 auf Weiss, 7,3:1 auf --c-surface-2 */ --c-text-subtle: #756A54; /* 5,3:1 auf Weiss, 4,9:1 auf --c-surface-2 */ --c-text-invert: #FFFFFF; /* --- Gold --- Vier Stufen, und es steht dahinter, was jede darf. Die hellen Stufen sind Deko und tragen niemals kleinen Text. */ --c-gold-ink: #8A6412; /* Text/Links in Gold, 5,37:1 auf Weiss */ --c-gold-tief: #6B4C0B; /* Flaeche mit weissem Text, 7,88:1 */ --c-gold: #D4A017; /* Flaeche, mit --c-text 7,8:1 */ --c-gold-hell: #E3B341; /* Deko/Band, mit --c-text 9,5:1 */ --c-gold-blass: #F5D680; /* Glanzpunkt im Verlauf, mit --c-text 13,1:1 */ --c-gold-soft: #FCF3DC; /* zarte Goldflaeche */ /* --- Geld (nur die Ersparnis) --- */ --c-geld-ink: #0F7B4F; /* 5,29:1 auf Weiss */ --c-geld-soft: #E7F7EE; /* --- Feuer (nur der hohe Rabatt) --- */ --c-hot: #B23A0B; /* 5,99:1 auf Weiss */ --c-hot-soft: #FFF0E6; /* --- Alte Namen, damit bestehende Regeln weiterlaufen --- Der Akzent der Seite IST jetzt Gold. Diese Zeilen sind keine zweite Farbwelt, sondern nur andere Namen fuer dieselben Werte. */ --c-accent: var(--c-gold); --c-accent-bright: var(--c-gold-hell); --c-accent-strong: var(--c-gold-ink); --c-accent-deep: var(--c-gold-tief); --c-accent-hover: var(--c-gold-tief); --c-accent-ink: var(--c-gold-ink); --c-accent-soft: var(--c-gold-soft); --c-warm: var(--c-gold-hell); --c-warm-soft: var(--c-gold-soft); --c-warm-ink: var(--c-gold-ink); --c-warm-strong: var(--c-gold-tief); /* --- Verlaeufe --- --grad-gold traegt NIE kleinen hellen Text: darauf steht --c-text (an jedem Punkt ueber 7,8:1). --grad-knopf ist die dunkle Goldschiene fuer weissen Text (an jedem Punkt ueber 5,3:1). --grad-linie und --grad-deko sind reine Zierde ohne Text. */ --grad-gold: linear-gradient(135deg, #F5D680 0%, #E3B341 38%, #D4A017 100%); --grad-knopf: linear-gradient(135deg, #8A6412 0%, #6B4C0B 62%, #55390A 100%); --grad-linie: linear-gradient(90deg, #6B4C0B 0%, #D4A017 30%, #F5D680 50%, #D4A017 70%, #6B4C0B 100%); --grad-deko: linear-gradient(135deg, #F5D680 0%, #D4A017 55%, #8A6412 100%); --grad-warm: var(--grad-gold); --grad-marke: linear-gradient(135deg, #FFFFFF 0%, #FBF9F4 55%, #F4EDDC 100%); --grad-flaeche: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%); /* Feuer traegt weissen Text und ist deshalb bewusst dunkel gehalten: am hellsten Punkt (#C2410C) sind das 5,18:1, am dunkelsten 7,31:1. Ein helleres Orange sah besser aus, hatte aber nur 2,2:1. */ --grad-feuer: linear-gradient(135deg, #C2410C 0%, #B23A0B 55%, #9A3412 100%); /* Schrift auf Flaechen */ --c-on-accent: #FFFFFF; /* auf --grad-knopf */ --c-on-gold: #16130C; /* auf --grad-gold und --c-gold */ --c-on-marke: #16130C; --c-on-marke-mild: #5A5140; --c-ink: #16130C; --c-ink-hover: #000000; --c-focus: #8A6412; /* Glanzstreifen ueber Goldflaechen. Im hellen Schema hell, im dunklen ebenfalls hell — Gold glaenzt in beide Richtungen gleich. */ --c-glanz: rgba(255, 255, 255, 0.55); /* Feiner Fadenriss im Hintergrund grosser Goldflaechen. */ --c-linie-fein: rgba(22, 19, 12, 0.10); /* --- Typografie --- */ --ff-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Die Anzeige-Schrift traegt Ueberschriften und Preise. Serif, weil das in den Vorlagen den Unterschied zwischen "Angebot" und "Luxus" macht. */ --ff-anzeige: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --ff-num: var(--ff-sans); /* Nichtproportional, fuer Zeichenketten, die abgetippt werden muessen (Gutscheincode auf der Deal-Karte). Die Reihenfolge ist nach EINEM Kriterium gewaehlt: grosses I, kleines l und die Eins muessen unterscheidbar sein. Consolas, Cascadia und DejaVu Sans Mono erfuellen das, Courier New nicht — dort ist es nur der Strichstaerke nach zu ahnen. Alle drei sind auf dem jeweiligen System vorhanden; es wird bewusst KEINE Schrift von aussen geladen. */ --ff-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace; --fs-100: 0.75rem; /* 12px Kleinstes Kleingedrucktes */ --fs-200: 0.8125rem; /* 13px Labels, Anzeige-Hinweis */ --fs-300: 0.9375rem; /* 15px Sekundaertext */ --fs-400: 1.0625rem; /* 17px Fliesstext */ --fs-500: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); /* 19 -> 22 */ --fs-600: clamp(1.375rem, 1.20rem + 0.90vw, 1.75rem); /* 22 -> 28 */ --fs-700: clamp(1.75rem, 1.45rem + 1.50vw, 2.50rem); /* 28 -> 40 */ --fs-800: clamp(2.25rem, 1.70rem + 2.80vw, 3.75rem); /* 36 -> 60 Hero */ --fs-900: clamp(2.75rem, 1.90rem + 4.20vw, 5rem); /* 44 -> 80 Zaehler */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7; --ls-tighter: -0.03em; /* --fs-800 */ --ls-tight: -0.02em; /* --fs-700, --fs-600 */ --ls-snug: -0.01em; /* --fs-500 */ --ls-normal: 0em; --ls-wide: 0.04em; /* Overline, Kategorie-Tag */ --ls-weit: 0.18em; /* Kicker in Versalien */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* --- Abstaende (4px-Raster) --- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 2.5rem; /* 40 */ --sp-8: 3rem; /* 48 */ --sp-9: 4rem; /* 64 */ --sp-10: 5rem; /* 80 */ --sp-11: 6.5rem; /* 104 */ --sp-12: 8rem; /* 128 */ /* Vertikaler Sektionsrhythmus, fluide */ --sp-section: clamp(3.5rem, 2.5rem + 5vw, 7rem); --sp-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); /* --- Maße --- */ --w-content: 1180px; /* Hauptcontainer */ --w-narrow: 760px; /* Textsektionen, FAQ */ --w-text: 62ch; /* maximale Zeilenlaenge Fliesstext */ /* --- Radien --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* --- Schatten --- */ --sh-0: none; --sh-1: 0 1px 2px rgba(60, 45, 12, 0.05), 0 1px 3px rgba(60, 45, 12, 0.07); --sh-2: 0 2px 4px rgba(60, 45, 12, 0.05), 0 6px 16px rgba(60, 45, 12, 0.09); --sh-3: 0 4px 8px rgba(60, 45, 12, 0.06), 0 18px 40px rgba(60, 45, 12, 0.14); --sh-gold: 0 6px 22px rgba(180, 130, 20, 0.28); --sh-focus: 0 0 0 3px rgba(138, 100, 18, 0.35); /* Glasschatten: die Lichtkante oben gehoert dazu, sonst ist es kein Glas, sondern eine milchige Flaeche. Deshalb steckt das `inset` mit im Token und nicht in jeder Regel einzeln. */ --sh-glas: inset 0 1px 0 var(--glas-kante-hell), 0 2px 6px rgba(60, 45, 12, 0.05), 0 14px 34px -18px rgba(60, 45, 12, 0.30); /* Die Stufe darueber: die Kachel steht sichtbar VOR der Seite. */ --sh-glas-hoch: inset 0 1px 0 var(--glas-kante-hell), 0 3px 10px rgba(60, 45, 12, 0.07), 0 22px 48px -20px rgba(60, 45, 12, 0.42); /* Goldschein beim Ueberfahren und am gewaehlten Punkt. */ --sh-glas-gold: inset 0 1px 0 var(--glas-kante-hell), 0 0 0 1px rgba(212, 160, 23, 0.22), 0 18px 40px -18px rgba(180, 130, 20, 0.55); /* --- Glas (09.08.2026) -------------------- Fatihs Wunsch: "die Icons von Menue und Kategorie wie beim OIT.One Diagnosesuite in einem Glaseffekt und huebsche Kachel die hervorsteht, aber in Klickfund Farben. Mach allgemein Design mehr Glaseffekt und luxurioeser." Uebernommen ist das PRINZIP der Diagnosesuite, nicht ihre Farbe: dort ist das Glas dunkel und die Kante leuchtet cyan-magenta. Hier ist der Grund Champagner, also ist das Glas hell und die Kante golden. Drei Dichten, und es steht dahinter, was jede tragen darf: --glas-duenn reine Zierde, kein Text. Kacheln ueber einem Bild. --glas Flaechen mit grosser Schrift (Leisten, Kacheln). --glas-dicht Flaechen mit Fliesstext. Ab hier ist der Kontrast auch ueber der dunkelsten Stelle des Untergrunds noch der gerechnete — siehe Kommentare oben bei den Textfarben. Karten und Kaesten nehmen NUR diese. Warum ueberhaupt Glas wirkt: Der Seitengrund traegt ein festes Goldliniennetz (background-attachment: fixed, siehe base.css). Ohne Muster darunter waere `backdrop-filter` unsichtbar und nur teuer. */ --glas-duenn: rgba(255, 253, 247, 0.42); --glas: rgba(255, 253, 247, 0.66); --glas-dicht: rgba(255, 253, 247, 0.88); /* Kanten. Oben faellt Licht ein (weiss), aussen liegt Gold. */ --glas-kante: rgba(217, 200, 156, 0.62); --glas-kante-hell: rgba(255, 255, 255, 0.92); --glas-kante-gold: rgba(212, 160, 23, 0.55); /* Die Unschaerfe. Saettigung leicht hoch, sonst wird das Gold darunter durch die Weissschicht fahl. */ --glas-blur: blur(16px) saturate(1.32); --glas-blur-stark: blur(26px) saturate(1.45); /* --- Motion --- */ --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-reveal: 460ms; --ease-out: cubic-bezier(0.22, 1.00, 0.36, 1.00); --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00); --ease-soft: cubic-bezier(0.33, 0.00, 0.20, 1.00); --stagger-step: 60ms; /* Verzoegerung je Karte beim Reveal */ /* --- Ebenen --- */ --z-base: 0; --z-sticky: 50; --z-overlay: 100; --z-toast: 200; } /* --- Kein Glas: zwei Faelle, eine Antwort -------------------- 1. Der Browser kann `backdrop-filter` nicht. Dann bliebe eine halb durchsichtige Flaeche OHNE Unschaerfe stehen — das Goldliniennetz liefe scharf durch die Schrift. Das ist kein "etwas anderer Look", das ist unlesbar. 2. Der Nutzer hat "Transparenz reduzieren" eingestellt (Windows und macOS haben den Schalter, Safari und Chrome geben ihn weiter). Wer das setzt, will keine durchscheinenden Flaechen — und meint es so. In beiden Faellen werden dieselben drei Tokens undurchsichtig. Kein Umbau, keine zweite Regelwelt: Die Flaechen bleiben genau dieselben, nur dass nichts mehr durchscheint. Die Unschaerfe wird auf `none` gesetzt, damit ein Browser sie nicht doch noch berechnet. -------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glas-duenn: rgba(255, 253, 247, 0.94); --glas: #FFFDF7; --glas-dicht: #FFFFFF; --glas-blur: none; --glas-blur-stark: none; } } @media (prefers-reduced-transparency: reduce) { :root { --glas-duenn: rgba(255, 253, 247, 0.94); --glas: #FFFDF7; --glas-dicht: #FFFFFF; --glas-blur: none; --glas-blur-stark: none; } } /* --- Bewegung reduzieren: global und ohne Ausnahme --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Breakpoints (480 / 760 / 1024 / 1280) sind in Bauplan Kapitel 6 dokumentiert. Custom Properties wirken in @media nicht, die Pixelwerte stehen deshalb literal in den Stylesheets. */