/* ============================================================= Light-Theme — greift nur bei . Wird auf allen Seiten geladen; ohne das Attribut passiert nichts, die dunkle Gestaltung bleibt also unangetastet der Standard. Farblogik (Vorgabe): Flächen und Fließtext in neutralen Grauwerten, Headlines in Dunkellila, Gold bleibt Markenakzent (als Bronze, damit es auf Weiß lesbar ist). ============================================================= */ html[data-theme="light"] { /* ---------- Semantik ---------- */ --bg: #f6f6f7; --text: #1c1c20; --text-strong: #101013; --text-muted: #4c4c54; --text-faint: #7d7d86; --hairline: rgba(0, 0, 0, .12); --hairline-soft: rgba(0, 0, 0, .07); --card-bg: linear-gradient(158deg, rgba(255,255,255,.95), rgba(246,246,247,.78)); --card-border: rgba(0, 0, 0, .12); --field-bg: rgba(255,255,255,.9); --field-border: rgba(0, 0, 0, .16); --shadow-card: 0 30px 70px -34px rgba(0, 0, 0, .22), 0 1px 0 0 rgba(255,255,255,.9) inset; --shadow-soft: 0 18px 46px -26px rgba(0, 0, 0, .18); /* Headlines: Schwarz (minimaler Verlauf, damit die H1 nicht flach wirkt) */ --headline-1: #0c0c0f; --headline-2: #131317; --headline-3: #26262b; } /* Der Gold-Akzent wird seitenlokal auf `body.portrait` gesetzt und ist damit spezifischer als :root. Auf Weiß braucht er eine dunklere Bronze. */ html[data-theme="light"] body.portrait { --accent: #9c7a22; --accent-strong: #856618; } /* ---------- Grundfläche ---------- */ html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* Punkt-Mesh: invertiert zu dunklen Punkten, entsättigt zu neutralem Grau. */ html[data-theme="light"] #mesh, html[data-theme="light"] #mesh-footer { filter: invert(1) grayscale(1); opacity: .42; } /* Verlaufs-Schleier über dem Mesh, helle Entsprechung der dunklen Vorlage */ html[data-theme="light"] .backdrop { background: radial-gradient(120% 90% at 78% 18%, rgba(0, 0, 0, .05), transparent 55%), radial-gradient(80% 70% at 12% 90%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(90deg, rgba(246,246,247,.94) 0%, rgba(246,246,247,.66) 32%, rgba(246,246,247,.12) 60%, transparent 78%), linear-gradient(180deg, rgba(246,246,247,.6) 0%, transparent 22%, transparent 72%, rgba(246,246,247,.88) 100%); } html[data-theme="light"] body.portrait .backdrop { background: radial-gradient(110% 75% at 50% 0%, rgba(0, 0, 0, .045), transparent 60%), linear-gradient(180deg, rgba(246,246,247,.66) 0%, rgba(246,246,247,.32) 26%, rgba(246,246,247,.5) 68%, rgba(246,246,247,.94) 100%); } /* ---------- Wortmarke ---------- */ html[data-theme="light"] .brand-tld { color: rgba(0, 0, 0, .45); } /* ---------- Headlines: Dunkellila ---------- */ html[data-theme="light"] .pt-headline { background: linear-gradient(176deg, var(--headline-1) 0%, var(--headline-2) 55%, var(--headline-3) 100%); -webkit-background-clip: text; background-clip: text; /* Eine Stufe kraeftiger: dunkle Schrift auf hellem Grund wirkt sonst duenner als helle Schrift auf dunklem (optische Taeuschung). */ font-weight: 400; } html[data-theme="light"] .pt-text h2, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 { color: var(--headline-2); } html[data-theme="light"] .pt-headline { color: transparent; } /* ---------- Fließtext: Grauwerte ---------- */ html[data-theme="light"] .pt-sub { color: var(--text-muted); } /* Kleine Labels ueber den Headlines: Grau statt Gold-Akzent. */ html[data-theme="light"] .pt-eyebrow, html[data-theme="light"] .pt-kicker { color: var(--text-faint); } html[data-theme="light"] .pt-text { color: var(--text-muted); } html[data-theme="light"] .pt-text a { color: inherit; text-decoration-color: rgba(0, 0, 0, .32); } html[data-theme="light"] .pt-text a:hover { text-decoration-color: var(--accent); } html[data-theme="light"] .pt-quote { color: var(--text-strong); border-left-color: var(--accent); } html[data-theme="light"] .pt-quote cite { color: var(--text-faint); } /* ---------- Bild-Slider ---------- */ html[data-theme="light"] .pt-image-row img { border-color: rgba(0, 0, 0, .14); filter: saturate(.9) contrast(1.02); } html[data-theme="light"] .pt-image-row figure:hover img { filter: saturate(1) contrast(1.03); } /* Die Website-Screenshots sind selbst dunkel: dunkler Bildkasten bleibt gewollt. */ html[data-theme="light"] .pt-image-row img.fit-contain { background: #0f0f11; border-color: rgba(0, 0, 0, .18); } html[data-theme="light"] .pt-image-row figcaption { color: rgba(0, 0, 0, .5); } html[data-theme="light"] .pt-hero-media img { border-color: #c9c9ce; } html[data-theme="light"] .pt-author-avatar { filter: none; border-color: rgba(0, 0, 0, .18); } html[data-theme="light"] .pt-slider-btn { border-color: rgba(0, 0, 0, .16); background: rgba(255, 255, 255, .72); color: rgba(0, 0, 0, .72); box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .4); } html[data-theme="light"] .pt-slider-btn:hover { border-color: rgba(0, 0, 0, .3); background: rgba(255, 255, 255, .94); } /* ---------- Referenzliste / Footer ---------- */ html[data-theme="light"] .pt-reference-list { border-top-color: var(--hairline); color: var(--text-faint); } html[data-theme="light"] .pt-reference-list a { text-decoration-color: rgba(0, 0, 0, .28); } html[data-theme="light"] .pt-cta-bg { background: radial-gradient(95% 95% at 50% 122%, rgba(0, 0, 0, .07), transparent 60%), linear-gradient(180deg, rgba(246,246,247,.6) 0%, rgba(246,246,247,.26) 42%, rgba(246,246,247,.05) 100%); } html[data-theme="light"] .pt-cta-text { color: var(--text-muted); } html[data-theme="light"] .pt-cta-legal { color: var(--text-faint); opacity: .8; } /* ---------- Rechtsseiten ---------- */ html[data-theme="light"] body.legal { background: var(--bg); color: var(--text); } html[data-theme="light"] .legal-wrap a { color: var(--headline-2); } /* ============================================================= Decision-Stage (Chart): Papierkarte in neutralen Grauwerten ============================================================= */ html[data-theme="light"] .decision-stage { /* Champagne-Gold leuchtet auf Schwarz, verschwindet auf Weiß: für Light ein satteres Gold, damit die Wachstumskurve trägt. */ --c-accent: #c19a30; --c-ink-soft: rgba(0, 0, 0, 0.62); --c-ink-faint: rgba(0, 0, 0, 0.34); } html[data-theme="light"] .dc-ghost { background: linear-gradient(180deg, #ffffff, #ececed); box-shadow: 0 1px 0 rgba(0,0,0,.05) inset; } html[data-theme="light"] .dc-card { background: radial-gradient(130% 120% at 50% -15%, #ffffff 0%, #f3f3f4 48%, #d9d9db 100%); box-shadow: 0 46px 100px -60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.9); } html[data-theme="light"] .dc-title { color: #101013; } html[data-theme="light"] .dc-title-ico { background: #17171a; color: var(--gold-400); } html[data-theme="light"] .dc-gl-v, html[data-theme="light"] .dc-gl-h { stroke: rgba(0, 0, 0, 0.10); } html[data-theme="light"] .dc-gl-vs, html[data-theme="light"] .dc-gl-hs { stroke: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .dc-line--old { stroke: rgba(0, 0, 0, 0.42); } html[data-theme="light"] .dc-dots--old circle { fill: rgba(0, 0, 0, 0.36); } html[data-theme="light"] .dc-callout--new { color: #1a1400; box-shadow: 0 20px 42px -28px rgba(150, 118, 30, .6); } html[data-theme="light"] .dc-callout--new .dc-co-label { color: rgba(26, 20, 0, .78); } html[data-theme="light"] .dc-callout--old { color: rgba(255,255,255,.86); background: #1c1c20; border-color: rgba(255,255,255,.1); } html[data-theme="light"] .dc-callout--old::before { border-bottom-color: #1c1c20; } html[data-theme="light"] .dc-axis span { color: rgba(0, 0, 0, 0.42); } html[data-theme="light"] .dc-source { color: rgba(0, 0, 0, .5); } html[data-theme="light"] .dc-source strong { color: rgba(0, 0, 0, .72); } /* ============================================================= Startseite: Hero-Wortmarke, Glas-Karten, Formular ============================================================= */ html[data-theme="light"] .hero-display { background: linear-gradient(176deg, var(--headline-1) 0%, var(--headline-2) 52%, var(--headline-3) 100%); -webkit-background-clip: text; background-clip: text; font-weight: 400; } html[data-theme="light"] .hero-display .ic-accent { color: #9c7a22; -webkit-text-fill-color: #9c7a22; } html[data-theme="light"] .hero-title { color: var(--headline-2); } html[data-theme="light"] .hero-sub { color: var(--text-muted); } html[data-theme="light"] .hero-badge { background: rgba(0, 0, 0, .03); border-color: var(--hairline); color: var(--text-muted); } /* Glas-Karten: von dunklem Rauch auf helles Milchglas */ html[data-theme="light"] .join-card { background: rgba(255, 255, 255, .72); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .22); } html[data-theme="light"] .benefit-card { background: linear-gradient(158deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); border-color: var(--hairline); } html[data-theme="light"] .benefit-card:hover { background: rgba(255, 255, 255, .96); } /* Formularfelder */ html[data-theme="light"] .join-card input, html[data-theme="light"] .join-card textarea, html[data-theme="light"] .join-card select { color: var(--text); } html[data-theme="light"] .join-card input::placeholder { color: rgba(0, 0, 0, .38); }