/* ============================================================ Ventega Darstellungs- & Theme-System Steuerung über Attribute/Klassen auf : - data-theme="dark" | "light" (ohne Attribut: System) - .contrast-high .text-large .motion-reduce .links-underline Einstellungen werden nur lokal (localStorage) gespeichert. ============================================================ */ /* ---------- A11y-Grundlagen (immer aktiv) ---------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--violet,#8B5CF6);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-family:'Inter',sans-serif;font-size:14px;text-decoration:none} .skip-link:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--violet-bright,#A78BFA);outline-offset:2px;border-radius:4px} /* ---------- Helles Ventega-Design (eigene Palette, keine Invertierung) ---------- */ html[data-theme="light"]{color-scheme:light} html[data-theme="light"] body{ --bg:#f7f6fb; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f1eefa; --text:#26262e; --muted:#4c4c58; --faint:#6d6d7a; --border:rgba(30,25,60,.18); --border-soft:rgba(30,25,60,.12); --violet:#6D3FE0; --violet-bright:#7c4fe6; --violet-deep:#5a2fd0; --magenta:#b41fd6; background:var(--bg); color:var(--text); } html[data-theme="light"] nav{background:rgba(255,255,255,.85);border-bottom:1px solid var(--border-soft);backdrop-filter:blur(10px)} html[data-theme="light"] .nav-links a{color:var(--muted)} html[data-theme="light"] .nav-links a:hover{color:var(--text)} html[data-theme="light"] .wordmark{color:var(--text)} html[data-theme="light"] .card, html[data-theme="light"] .glass, html[data-theme="light"] .panel, html[data-theme="light"] .prob-card, html[data-theme="light"] .founder, html[data-theme="light"] .kpi, html[data-theme="light"] .page-intro{background:var(--surface);border-color:var(--border-soft);box-shadow:0 8px 26px rgba(40,25,90,.08)} html[data-theme="light"] .chip, html[data-theme="light"] .uc-chip{background:var(--surface-2);border-color:var(--border-soft);color:var(--muted)} html[data-theme="light"] footer{color:var(--faint);border-top:1px solid var(--border-soft)} html[data-theme="light"] .btn-ghost{border-color:var(--border);color:var(--text)} html[data-theme="light"] .eyebrow{color:var(--violet)} html[data-theme="light"] input[type=range]{accent-color:var(--violet)} html[data-theme="light"] input[type=text]{background:#fff;color:var(--text);border-color:var(--border)} /* Hinweis: Produkt-Mockups (Dashboards, Ampeln, Chat-Demos) bleiben bewusst dunkle „Bildschirme" – sie stellen die Software dar und behalten so ihren Kontrast. */ /* ---------- Hoher Kontrast ---------- */ html.contrast-high body{--text:#ffffff;--muted:#e6e2f5;--faint:#cfc9e8;--border:rgba(255,255,255,.45);--border-soft:rgba(255,255,255,.3)} html.contrast-high[data-theme="light"] body{--text:#111116;--muted:#26262e;--faint:#33333d;--border:rgba(15,10,40,.55);--border-soft:rgba(15,10,40,.4)} html.contrast-high a{text-decoration:underline;text-underline-offset:2px} /* ---------- Größere Textdarstellung ---------- */ html.text-large body{zoom:1.15} /* ---------- Reduzierte Bewegung: kurze Fades bleiben bewusst erhalten ---------- */ html.motion-reduce{scroll-behavior:auto!important} html.motion-reduce .card,html.motion-reduce .stage-card,html.motion-reduce .step, html.motion-reduce .founder,html.motion-reduce .founder-clean,html.motion-reduce .btn{ transition-duration:.12s!important; } /* ---------- Links hervorheben ---------- */ html.links-underline main a,html.links-underline footer a{text-decoration:underline!important;text-underline-offset:3px} /* ---------- Darstellung-Dialog ---------- */ .vt-display-btn{background:none;border:1px solid var(--border,rgba(255,255,255,.16));border-radius:9px;color:inherit;font:inherit;font-size:13.5px;padding:6px 12px;cursor:pointer} .vt-display-btn:hover{border-color:var(--violet,#8B5CF6)} .vt-display-dialog{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(5,2,9,.6)} .vt-display-dialog.open{display:flex} .vt-display-panel{background:var(--surface,#150E22);color:var(--text,#EFEAFA);border:1px solid var(--border,rgba(255,255,255,.16));border-radius:16px;padding:22px 24px;width:min(92vw,430px);max-height:88vh;overflow:auto;font-family:'Inter',sans-serif} .vt-display-panel h2{font-size:18px;margin:0 0 14px;font-family:'Sora',sans-serif} .vt-display-group{margin-bottom:14px} .vt-display-group legend,.vt-display-group .vt-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint,#8f86ab);margin-bottom:6px;display:block} .vt-display-group fieldset{border:0;padding:0;margin:0} .vt-opts{display:flex;gap:8px;flex-wrap:wrap} .vt-opts label{border:1px solid var(--border-soft,rgba(255,255,255,.1));border-radius:8px;padding:6px 12px;font-size:13.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center} .vt-opts input{accent-color:var(--violet,#8B5CF6)} .vt-opts label:has(input:checked){border-color:var(--violet,#8B5CF6);background:rgba(139,92,246,.12)} .vt-display-close{margin-top:6px;width:100%;padding:9px;border-radius:9px;border:1px solid var(--border-soft,rgba(255,255,255,.12));background:none;color:inherit;font:inherit;cursor:pointer} .vt-display-close:hover{border-color:var(--violet,#8B5CF6)} /* ============================================================ Linkfarben im Ventega-Stil (kein Browser-Standardblau) Gilt für normale Textlinks in Inhalt & Footer. Buttons (.btn/.btn-ghost), Karten (a.card), Chips, Service-Links und die Navigation behalten ihre bestehende Gestaltung. ============================================================ */ main a:not(.btn):not(.btn-ghost):not(.card):not(.chip):not(.svc):not(.vt-display-btn), footer a:not(.btn){ color:var(--text,#EFEAFA); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--violet,#8B5CF6) 55%, transparent); text-underline-offset:3px; transition:color .15s ease; } main a:visited:not(.btn):not(.btn-ghost):not(.card):not(.chip):not(.svc):not(.vt-display-btn), footer a:visited:not(.btn){color:var(--text,#EFEAFA)} main a:hover:not(.btn):not(.btn-ghost):not(.card):not(.chip):not(.svc):not(.vt-display-btn), main a:focus-visible:not(.btn):not(.btn-ghost):not(.card):not(.chip):not(.svc):not(.vt-display-btn), footer a:hover:not(.btn), footer a:focus-visible:not(.btn){color:var(--violet-bright,#A78BFA)} html[data-theme="light"] main a:hover:not(.btn):not(.btn-ghost):not(.card):not(.chip):not(.svc):not(.vt-display-btn), html[data-theme="light"] footer a:hover:not(.btn){color:var(--violet,#6D3FE0)} /* Dialog: keine Standardfarben */ .vt-display-panel a{color:var(--text,#EFEAFA)} .vt-display-panel input[type=radio]{accent-color:var(--violet,#8B5CF6)} /* Darstellung-Button: in beiden Themes klar sichtbar */ .vt-display-btn{color:var(--text,#EFEAFA);background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.45)} .vt-display-btn:hover,.vt-display-btn:focus-visible{border-color:var(--violet-bright,#A78BFA);background:rgba(139,92,246,.18)} html[data-theme="light"] .vt-display-btn{background:rgba(109,63,224,.08);border-color:rgba(109,63,224,.45);color:var(--text,#26262e)} /* Einmaliger, barrierefreier Hinweis bei systemweit reduzierter Bewegung. */ .vt-motion-notice{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,2,9,.72)} .vt-motion-notice-panel{width:min(100%,560px);padding:28px;border:1px solid var(--border,rgba(255,255,255,.18));border-radius:18px;background:var(--surface,#150E22);color:var(--text,#EFEAFA);box-shadow:0 22px 70px rgba(0,0,0,.35);font-family:'Inter',sans-serif} .vt-motion-notice-panel h2{margin:0 0 12px;font:700 clamp(21px,3vw,28px)/1.2 'Sora',sans-serif} .vt-motion-notice-panel p{margin:0;color:var(--muted,#9C90BE);font-size:15px;line-height:1.7} .vt-motion-notice-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .vt-motion-notice-actions .btn{border:0;cursor:pointer} .vt-motion-notice-actions .btn-ghost{border:1px solid var(--border,rgba(255,255,255,.18))} html[data-theme="light"] .vt-motion-notice{background:rgba(53,39,14,.28)} html[data-theme="light"] .vt-motion-notice-panel{background:#fffdf8;box-shadow:0 22px 70px rgba(79,55,14,.16)} @media(max-width:560px){.vt-motion-notice-actions{display:grid}.vt-motion-notice-actions .btn{width:100%}} /* ============================================================ v7: Zentrale Variablen für Diagramme, Mockups & Grafiken Dunkel = bisherige Werte; Hell = Weiß/Champagner/Gold + Anthrazit. Die HTML-/SVG-Vorkommen referenzieren diese Variablen mit Fallback. ============================================================ */ :root{ --mockup-bg:#150E22; --mockup-bg-rgb:21,14,34; --mockup-panel:#1D1430; --mockup-panel-rgb:29,20,48; --mockup-deep:#0B0712; --mockup-text:#EFEAFA; --mockup-muted:#9C90BE; --diagram-border:#2E2247; --diagram-line:#8B5CF6; --diagram-accent:#A78BFA; --diagram-center-bg:url(#lg); --flow-card-bg:#1D1430; --flow-card-text:#EFEAFA; } html[data-theme="light"]{ --mockup-bg:#fbf8f1; --mockup-bg-rgb:251,248,241; --mockup-panel:#ffffff; --mockup-panel-rgb:255,255,255; --mockup-deep:#f3ecdc; --mockup-text:#26262e; --mockup-muted:#5a5a66; --diagram-border:#d8c48e; --diagram-line:#b08d3e; --diagram-accent:#7c4fe6; --diagram-center-bg:#F3E8CC; --flow-card-bg:#ffffff; --flow-card-text:#26262e; } /* Diagramm-Flächen/Schrift im hellen Modus zusätzlich absichern */ html[data-theme="light"] svg [stroke="#8B5CF6"]{stroke:var(--diagram-line)} html[data-theme="light"] .layer{background:linear-gradient(148deg,#fff,#F3E8CC)!important;border-color:rgba(159,122,46,.4)!important;color:var(--text)!important} html[data-theme="light"] .layer b,html[data-theme="light"] .layer span{color:var(--text)!important}