/* ============================================================ DryLaunch / CLUSTER-AKT-KIT Die Cluster-Farbe wandert durch den GESAMTEN Funnel. Vier Farbstufen fuer die Etappen der Reise: Stufe 1 Eisblau Eingabe Stufe 2 Coral Commitment Stufe 3 Sand Erkenntnis Stufe 4 Magenta Ergebnis Verwendung: plus dieses Stylesheet. Alle Akzente ziehen ueber --step mit. Eine Variable, ein Ton. Referenz-Muster: idee.html (abgenommen, bleibt unangetastet). ============================================================ */ :root { --c1: #a5d8e8; /* Eisblau */ --c2: #e8b8a5; /* Coral */ --c3: #c5e8a5; /* Sand */ --c4: #d8a5e8; /* Magenta */ } /* Akt-Zuweisung: setzt --step + passenden Glow */ [data-akt="1"] { --step: var(--c1); --step-glow: rgba(165,216,232,0.35); } [data-akt="2"] { --step: var(--c2); --step-glow: rgba(232,184,165,0.35); } [data-akt="3"] { --step: var(--c3); --step-glow: rgba(197,232,165,0.35); } [data-akt="4"] { --step: var(--c4); --step-glow: rgba(216,165,232,0.35); } /* Fallback, falls data-akt fehlt: Marken-Eisblau */ body:not([data-akt]) { --step: var(--c1); --step-glow: rgba(165,216,232,0.35); } /* ------------------------------------------------------------ HEADLINE ZIEHT MIT Alle bestehenden var(--ice-blue)-Akzente einer Akt-Seite folgen der Akt-Farbe. Das Vorbild idee.html laesst --ice-blue fest; dort traegt aber der grosse Wizard die Farbe. Auf den uebrigen Seiten gibt es keinen Wizard, deshalb wandert hier der Seiten-Akzent selbst, sonst verpufft der Effekt. ------------------------------------------------------------ */ body[data-akt] { --ice-blue: var(--step); --ice-blue-soft: var(--step-glow); } /* MARKEN-ANKER: Kopfzeile bleibt IMMER Eisblau. Logo und Navigation duerfen nicht mitwandern, sonst verliert die Marke ihren festen Punkt. Die Variable wird hier lokal zurueckgesetzt und kaskadiert in die gesamte Kopfzeile. */ body[data-akt] nav { --ice-blue: #a5d8e8; --ice-blue-soft: rgba(165,216,232,0.35); } /* Binnen-Wanderung (build.html Phasen, zahlung.html Schritte): JS setzt --step direkt am Container und ueberschreibt den Akt. */ [data-akt] .akt-scope { transition: color 500ms ease, border-color 500ms ease, background 500ms ease; } /* ============================================================ 1 ATMOSPHAERE Grid + Glow hinter dem Inhalt ============================================================ */ .akt-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .akt-bg .grid-lines { position: absolute; inset: -1px; opacity: 0.55; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 28% 12%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 85% 70% at 28% 12%, #000 0%, transparent 78%); } .akt-bg .glow-a { position: absolute; width: 55vw; height: 55vw; left: -8vw; top: -12vw; background: radial-gradient(circle, var(--step-glow) 0%, transparent 62%); opacity: 0.5; transition: background 600ms ease; } /* ============================================================ 2 HUD-TELEMETRIE-STREIFEN ============================================================ */ .sim-hud { display: flex; align-items: center; gap: 0; border: 1px solid var(--gray-line); background: rgba(14,14,14,0.72); backdrop-filter: blur(8px); margin-bottom: 40px; position: relative; overflow: hidden; } .sim-hud::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--step); box-shadow: 0 0 14px var(--step-glow); transition: background 500ms ease; } .sim-hud-scan { position: absolute; top: 0; bottom: 0; width: 130px; left: -160px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: hud-scan 5.5s linear infinite; pointer-events: none; } @keyframes hud-scan { 0% { left: -160px; } 100% { left: 100%; } } .sim-hud-cell { padding: 15px 24px; border-right: 1px solid var(--gray-line); display: flex; flex-direction: column; gap: 5px; } .sim-hud-cell:last-child { border-right: none; margin-left: auto; } .sim-hud-k { font-family: "JetBrains Mono", Menlo, monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--gray-text-soft); text-transform: uppercase; } .sim-hud-v { font-family: "Anton", Impact, sans-serif; font-size: 19px; color: var(--paper); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .sim-hud-v .u { font-family: "JetBrains Mono", Menlo, monospace; font-size: 0.5em; color: var(--step); margin-left: 5px; letter-spacing: 0.06em; transition: color 500ms ease; } .sim-hud-live { display: inline-flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--step); text-transform: uppercase; transition: color 500ms ease; } .sim-hud-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--step); box-shadow: 0 0 12px var(--step), 0 0 24px var(--step-glow); animation: hud-pulse 1.5s ease-in-out infinite; transition: background 500ms ease; } @keyframes hud-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.72); } } @media (max-width: 900px) { .sim-hud { flex-wrap: wrap; } .sim-hud-cell { flex: 1 1 40%; } .sim-hud-cell:last-child { margin-left: 0; } } /* ============================================================ 3 AKT-BAND zeigt die Position im Funnel Vier Segmente, das aktuelle leuchtet in seiner Farbe. ============================================================ */ .akt-band { display: flex; gap: 4px; margin-bottom: 28px; } .akt-band-seg { flex: 1; height: 2px; background: var(--gray-line); position: relative; overflow: hidden; transition: background 500ms ease; } .akt-band-seg[data-seg="1"] { --sc: var(--c1); } .akt-band-seg[data-seg="2"] { --sc: var(--c2); } .akt-band-seg[data-seg="3"] { --sc: var(--c3); } .akt-band-seg[data-seg="4"] { --sc: var(--c4); } .akt-band-seg.is-done { background: color-mix(in srgb, var(--sc) 45%, var(--gray-line)); } .akt-band-seg.is-active { background: var(--sc); box-shadow: 0 0 12px color-mix(in srgb, var(--sc) 55%, transparent); } .akt-band-seg.is-active::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: akt-shimmer 2.2s linear infinite; } @keyframes akt-shimmer { 0% { left: -40%; } 100% { left: 105%; } } /* ============================================================ 4 CORNER-BRACKETS taktile Ecken auf Karten und Feldern ============================================================ */ .akt-bracket { position: relative; } .akt-bracket::before, .akt-bracket::after { content: ""; position: absolute; width: 10px; height: 10px; opacity: 0; transition: opacity 280ms ease, border-color 500ms ease; pointer-events: none; } .akt-bracket::before { left: 0; top: 0; border-left: 1.5px solid var(--step); border-top: 1.5px solid var(--step); } .akt-bracket::after { right: 0; bottom: 0; border-right: 1.5px solid var(--step); border-bottom: 1.5px solid var(--step); } .akt-bracket:hover::before, .akt-bracket:hover::after, .akt-bracket:focus-within::before, .akt-bracket:focus-within::after, .akt-bracket.is-filled::before, .akt-bracket.is-filled::after { opacity: 1; } /* ============================================================ 5 FELDER leuchten beim Ausfuellen in der Akt-Farbe auf ============================================================ */ .field:focus-within .field-label { color: var(--step); } .field:focus-within .field-label::before, .field.is-filled .field-label::before { background: var(--step); box-shadow: 0 0 8px var(--step); } .field-input:focus, .field-textarea:focus, .akt-input:focus { border-color: var(--step); background: color-mix(in srgb, var(--step) 6%, rgba(16,16,16,0.9)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--step) 35%, transparent), 0 10px 34px -14px color-mix(in srgb, var(--step) 45%, transparent); } .field.is-filled .field-input, .field.is-filled .field-textarea, .akt-input.is-filled { border-left: 2px solid var(--step); animation: fill-pulse 620ms ease-out; } @keyframes fill-pulse { 0% { box-shadow: -4px 0 18px -4px var(--step); } 100% { box-shadow: none; } } /* ============================================================ 6 GEIST-NUMMER grosse Outline-Ziffer im Hintergrund ============================================================ */ .akt-ghostnum { position: absolute; right: 12px; bottom: -18px; font-family: "Anton", Impact, sans-serif; font-size: 76px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.045); pointer-events: none; z-index: 0; transition: -webkit-text-stroke-color 360ms ease; } .akt-ghostnum.is-lit { -webkit-text-stroke-color: color-mix(in srgb, var(--step) 40%, transparent); } /* ============================================================ 7 BUTTONS Primaer-CTA traegt die Akt-Farbe ============================================================ */ .btn-ice, .akt-btn { background: var(--step); border: 1px solid var(--step); color: var(--ink); transition: background 500ms ease, border-color 500ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms ease; } .btn-ice:hover, .akt-btn:hover { background: var(--paper); border-color: var(--paper); transform: translateY(-2px); box-shadow: 0 14px 30px -14px var(--step); } /* ============================================================ 8 REVEAL gestaffeltes Einblenden beim Laden ============================================================ */ .akt-reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22,1,0.36,1); } .akt-reveal.is-in { opacity: 1; transform: none; } /* ============================================================ 9 REDUCED MOTION Pflicht-Fallback ============================================================ */ @media (prefers-reduced-motion: reduce) { .sim-hud-scan, .sim-hud-live .dot, .akt-band-seg.is-active::after { animation: none; } .akt-reveal { opacity: 1; transform: none; transition: none; } .btn-ice:hover, .akt-btn:hover { transform: none; } .field.is-filled .field-input, .field.is-filled .field-textarea, .akt-input.is-filled { animation: none; } }