/* ===================================================================== Ziesing Consulting · CORAL-THEME (Preview-Variante) -------------------------------------------------------------------- Aktiviert über oder ?theme=coral. Überschreibt ausschließlich die Akzent-Tokens — keine Layouts, keine Komponenten-Strukturen. Sicheres A/B-Test-Setup. ===================================================================== */ html[data-theme="coral"] { /* Primärer Akzent: Abendsonne-Coral statt Corporate-Blau #e0552f statt #ee6c4d: eine Spur tiefer fuer WCAG-Lesbarkeit (3.53:1 auf --bg statt 2.83:1) — grosse Headline-Akzente + Buttons werden AA-konform, Coral-Charakter bleibt. */ --accent: #e0552f; --accent-dark: #c94f2c; --accent-soft: #fff3ee; --accent-tint: #ffd9cc; --flow-hub: #16335f; /* Diagramm-Erfolg-Hub im Coral-Theme: Tiefsee-Navy (nicht schwarz), Weisstext 12.5:1 */ --accent-light: #f2a07f; /* helle Coral-Variante (Resilienz-Kurve, heller Kurvenanfang) */ /* Akzent-Rotation — c1 wird Coral, c2-c4 bleiben für Kontrast */ --c1: #e0552f; /* Coral (Primary) */ --c2: #0a1628; /* Tiefsee-Navy (statt Violett — passt zum nautischen Thema) */ --c3: #0d9488; /* Teal (Meereswasser) */ --c4: #f4a261; /* warmes Sand-Amber */ } /* Hero-Gradient: von Coral nach Tiefsee-Navy — Sonnenaufgang-Metapher */ html[data-theme="coral"] .hero h1 .gradient { background: linear-gradient(115deg, var(--c1) 0%, var(--c2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hero-Hintergrund-Schimmer ebenfalls warm tönen */ html[data-theme="coral"] .hero::before { background: radial-gradient(48% 60% at 1% 0%, rgba(224, 85, 47, 0.22), transparent 70%), radial-gradient(40% 55% at 100% 100%, rgba(10, 22, 40, 0.10), transparent 70%); } /* Primary-Button bleibt Navy, Hover wechselt zu Coral — fühlbar wärmer */ html[data-theme="coral"] .btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(224, 85, 47, 0.5); } /* Live-Pulse, Eyebrow-Pill, Akzent-Links bekommen warmen Ton */ html[data-theme="coral"] ::selection { background: var(--accent); color: #fff; } /* Floating-Badges + Stats Akzent-Farben subtil wärmen */ html[data-theme="coral"] .stats-row .stat:nth-child(1) .num span { color: var(--c1); } html[data-theme="coral"] .stats-row .stat:nth-child(2) .num span { color: var(--c2); } html[data-theme="coral"] .stats-row .stat:nth-child(3) .num span { color: var(--c3); } html[data-theme="coral"] .stats-row .stat:nth-child(4) .num span { color: var(--c4); } /* === SITE-WEITE FARB-BELEBUNG (Coral-Theme) === */ /* Section-Hintergründe: dezente farbige Schimmer brechen die Off-White-Eintönigkeit */ html[data-theme="coral"] .section-alt { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--c1) 8%, transparent), transparent 70%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--c3) 7%, transparent), transparent 70%), var(--bg-alt); } html[data-theme="coral"] .section-soft { background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--c4) 6%, transparent), transparent 65%), var(--bg-soft); } /* Eyebrow-Pill (Hero) bekommt einen warmen Hauch. Wichtig: NICHT auf .section-eyebrow anwenden — die ist reiner Text ohne Padding/Radius, ein Hintergrund klebt dort als nacktes Rechteck an der Schrift. */ html[data-theme="coral"] .hero-eyebrow { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 14%, var(--accent-soft)), color-mix(in srgb, var(--c4) 10%, var(--accent-soft))); border-color: color-mix(in srgb, var(--c1) 26%, transparent); color: color-mix(in srgb, var(--c1) 70%, var(--ink)); } html[data-theme="coral"] .hero-eyebrow .pulse { background: var(--c1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1) 50%, transparent); } /* Live-Pill (Resilienz-Karte): warmer Akzent + sanftes Pulsieren */ html[data-theme="coral"] .dash-pill { color: color-mix(in srgb, var(--c1) 80%, var(--ink)); } html[data-theme="coral"] .dash-pill .live { background: var(--c1); } /* Primary-Button mit prägnanterem Hover */ html[data-theme="coral"] .btn-primary:hover { background: var(--c1); border-color: var(--c1); transform: translateY(-2px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--c1) 60%, transparent); } html[data-theme="coral"] .btn-accent { background: var(--c1); border-color: var(--c1); } html[data-theme="coral"] .btn-accent:hover { background: color-mix(in srgb, var(--c1) 85%, #000); border-color: color-mix(in srgb, var(--c1) 85%, #000); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--c1) 70%, transparent); } /* Section-Title em-Akzent in warmer Coral */ html[data-theme="coral"] .section-title em, html[data-theme="coral"] .hero h1 em { color: var(--c1); } /* News-Karten + Testimonial-Sterne: subtile Coral-Highlights */ html[data-theme="coral"] .testimonial-stars { color: var(--c4); } /* Theme-Switcher-UI (klein, dezent, unten-rechts fixed) */ .theme-switcher { position: fixed; bottom: 18px; right: 18px; z-index: 1000; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; padding: 6px; box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.18); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .theme-switcher button { background: transparent; border: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--muted); font: inherit; transition: all .2s; } .theme-switcher button:hover { color: var(--ink); } .theme-switcher button[aria-pressed="true"] { background: var(--ink); color: #fff; } html[data-theme="coral"] .theme-switcher button[aria-pressed="true"] { background: var(--accent); } @media print { .theme-switcher { display: none; } }