/* ==========================================================================
Green Basilisk – Workflow-Demo (.gbwd)
Ersetzt die alte Stats-Section: interaktiver 2D-Mini-Editor, der die
Arbeit mit Green Basilisk in 4 Szenen durchspielt.
State-Hooks (gesetzt von workflow-demo.js):
.gbwd-stage[data-step="1..4"] → aktive Szene
.gbwd-stage.is-act → Sub-Phase 1 („Klick ist passiert“)
.gbwd-stage.is-act2 → Sub-Phase 2 (zweite Aktion der Szene)
.gbwd-demo.is-play/.is-paused → Autoplay-Progressbar an/pausiert
.gbwd.gbwd-anim/.gbwd-in → Scroll-Reveal (nur mit JS aktiv)
.gbwd.gbwd-finale → letzte Szene: KOMPLETTER Inhalt (Header,
Steps, Stage) blendet aus, nur die großen
Pfeile (.gbwd-scroll, Kind der Section)
bleiben — als Scroll-Aufforderung.
Szenen-Dauer: --gbwd-dur inline am — MUSS zu DUR[] in
workflow-demo.js passen (3.2s / 5.4s / 4.6s / 5.8s — zügiges Tempo).
Farben/Schriften NUR über var(--we-*) — Marken-Variablen der Section.
Breakpoints exakt 768 / 480 (Editor-Konvention).
========================================================================== */
/* --- Layout / Kopf ------------------------------------------------------ */
.gbwd-wrap {
max-width: 1200px;
margin: 0 auto;
padding: clamp(72px, 9vw, 120px) 24px;
transition: opacity 0.55s ease;
}
/* Finale: gesamter Section-Inhalt (Header + Steps + Stage) blendet aus,
nur .gbwd-scroll mit den Pfeilen bleibt. */
.gbwd.gbwd-finale .gbwd-wrap {
opacity: 0;
pointer-events: none;
}
.gbwd-head {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.gbwd-kick {
display: inline-block;
font: 600 12px/1 var(--we-font-accent);
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--we-primary-text);
}
.gbwd-title {
margin: 16px 0 0;
font: 700 clamp(30px, 4.6vw, 50px) / 1.08 var(--we-font-heading);
letter-spacing: -0.02em;
color: var(--we-text);
}
.gbwd-lead {
margin: 16px auto 0;
max-width: 540px;
font: 400 16px/1.6 var(--we-font-body);
color: var(--we-muted);
}
/* --- Demo-Grid: Steps links, Stage rechts ------------------------------- */
.gbwd-demo {
display: grid;
grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
margin-top: clamp(40px, 5vw, 64px);
}
/* --- Steps (klickbar) ---------------------------------------------------- */
.gbwd-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.gbwd-step-btn {
appearance: none;
-webkit-appearance: none;
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
width: 100%;
margin: 0;
padding: 15px 18px 17px;
border: 1px solid var(--we-border);
border-radius: var(--we-radius);
background: color-mix(in srgb, var(--we-surface) 55%, transparent);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
position: relative;
overflow: hidden;
opacity: 0.55;
transition:
border-color 0.35s,
background-color 0.35s,
opacity 0.35s,
box-shadow 0.35s;
}
.gbwd-step-btn:hover {
opacity: 0.85;
border-color: color-mix(in srgb, var(--we-primary) 30%, var(--we-border));
}
.gbwd-step-btn:focus-visible {
outline: none;
box-shadow: var(--we-focus);
}
.gbwd-step.is-active .gbwd-step-btn {
opacity: 1;
background: var(--we-surface);
border-color: color-mix(in srgb, var(--we-primary) 55%, var(--we-border));
box-shadow: 0 0 34px -14px var(--we-glow-a);
}
.gbwd-step-num {
font: 700 12px/1.9 var(--we-font-heading);
letter-spacing: 0.08em;
color: var(--we-muted);
transition: color 0.3s, text-shadow 0.3s;
}
.gbwd-step.is-active .gbwd-step-num {
color: var(--we-primary-text);
text-shadow: 0 0 14px var(--we-glow-a);
}
.gbwd-step-txt {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.gbwd-step-txt b {
font: 600 16px/1.3 var(--we-font-heading);
color: var(--we-text);
}
.gbwd-step-txt small {
font: 400 13.5px/1.55 var(--we-font-body);
color: var(--we-muted);
}
/* Autoplay-Progress am unteren Kartenrand — Dauer kommt aus --gbwd-dur
(inline am ) und muss zu DUR[] in workflow-demo.js passen. */
.gbwd-step-bar {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--we-primary), var(--we-primary-2));
transform: scaleX(0);
transform-origin: left;
pointer-events: none;
}
.gbwd-demo.is-play .gbwd-step.is-active .gbwd-step-bar {
animation: gbwdBar var(--gbwd-dur, 6s) linear forwards;
}
.gbwd-demo.is-paused .gbwd-step-bar {
animation-play-state: paused;
}
@keyframes gbwdBar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* --- Stage: Mini-Browser -------------------------------------------------- */
.gbwd-stage {
position: relative;
min-width: 0;
}
.gbwd-browser {
position: relative;
border: 1px solid var(--we-border);
border-radius: var(--we-radius-lg);
background: var(--we-surface);
overflow: hidden;
box-shadow:
0 40px 90px -40px rgba(0, 0, 0, 0.85),
0 0 70px -34px var(--we-glow-a);
transition: box-shadow 0.8s;
}
.gbwd-stage[data-step="4"].is-act .gbwd-browser {
box-shadow:
0 40px 90px -40px rgba(0, 0, 0, 0.85),
0 0 90px -20px var(--we-glow-a);
}
/* Browser-Leiste */
.gbwd-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
background: var(--we-surface-2);
border-bottom: 1px solid var(--we-border);
position: relative;
}
.gbwd-dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: color-mix(in srgb, var(--we-text) 20%, transparent);
}
.gbwd-url {
margin-left: 8px;
flex: 1;
min-width: 0;
position: relative;
height: 24px;
border: 1px solid var(--we-border);
background: var(--we-bg);
overflow: hidden;
}
.gbwd-url span {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 10px;
font: 500 11px/1 var(--we-font-body);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
transition: opacity 0.4s, transform 0.4s;
}
.gbwd-url-draft { color: var(--we-muted); }
.gbwd-url-live {
color: var(--we-primary-text);
opacity: 0;
transform: translateY(8px);
}
.gbwd-stage[data-step="4"].is-act .gbwd-url-draft {
opacity: 0;
transform: translateY(-8px);
transition-delay: 0.75s;
}
.gbwd-stage[data-step="4"].is-act .gbwd-url-live {
opacity: 1;
transform: none;
transition-delay: 0.75s;
}
/* Publish-Button in der Leiste (Szene 4) */
.gbwd-pub {
flex: none;
margin-left: 8px;
display: inline-flex;
align-items: center;
padding: 6px 11px 7px;
border: 1px solid var(--we-border);
font: 600 11px/1 var(--we-font-button);
letter-spacing: 0.04em;
color: var(--we-muted);
transition: color 0.35s, border-color 0.35s, background-color 0.35s, box-shadow 0.35s;
}
.gbwd-stage[data-step="4"] .gbwd-pub {
color: var(--we-text);
border-color: color-mix(in srgb, var(--we-primary) 45%, var(--we-border));
}
.gbwd-stage[data-step="4"].is-act .gbwd-pub {
background: var(--we-primary);
border-color: var(--we-primary);
color: var(--we-on-primary);
box-shadow: 0 0 26px -6px var(--we-glow-a);
animation: gbwdPress 0.3s ease;
}
@keyframes gbwdPress {
40% { transform: scale(0.92); }
}
/* Fortschrittslinie unter der Leiste beim Publish */
.gbwd-pub-line {
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--we-primary), var(--we-primary-2));
transform: scaleX(0);
transform-origin: left;
z-index: 2;
}
.gbwd-stage[data-step="4"].is-act .gbwd-pub-line {
animation: gbwdPubLine 0.7s cubic-bezier(0.6, 0.05, 0.3, 1) 0.05s both;
}
@keyframes gbwdPubLine {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* --- Canvas: Mini-Seite --------------------------------------------------- */
.gbwd-canvas {
position: relative;
aspect-ratio: 16 / 9.6;
padding: 5.5% 6% 6%;
display: flex;
flex-direction: column;
gap: 6%;
background:
radial-gradient(
120% 100% at 50% 0%,
color-mix(in srgb, var(--we-primary) 4%, transparent),
transparent 60%
),
var(--we-bg);
}
/* Bausteine: Ghost-Zustand in Szene 1 (vor dem Klick), danach befüllt */
.gbwd-m {
transition:
opacity 0.55s ease,
transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1),
background-color 0.5s,
background 0.5s,
box-shadow 0.5s,
border-color 0.5s;
}
.gbwd-stage[data-step="1"]:not(.is-act) .gbwd-m {
opacity: 0.13;
transform: translateY(10px);
transition-delay: 0s !important;
}
.gbwd-stage[data-step="1"].is-act .gbwd-m {
transition-delay: calc(var(--i, 0) * 95ms);
}
/* Mini-Navigation */
.gbwd-m-nav {
flex: none;
height: 6.5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.gbwd-m-nav i {
width: 12%;
height: 62%;
background: var(--we-primary);
opacity: 0.9;
}
.gbwd-m-nav span {
display: flex;
gap: 10px;
width: 36%;
justify-content: flex-end;
}
.gbwd-m-nav s {
display: block;
width: 20%;
height: 4px;
background: color-mix(in srgb, var(--we-text) 30%, transparent);
text-decoration: none;
}
/* Hero-Zeile: Textspalte + Bildblock */
.gbwd-cnv-mid {
display: flex;
gap: 6%;
flex: 1;
min-height: 0;
}
.gbwd-cnv-txt {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8%;
}
.gbwd-m-h1 {
position: relative;
height: 15%;
width: 88%;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--we-text) 88%, transparent),
color-mix(in srgb, var(--we-text) 55%, transparent)
);
}
.gbwd-m-h1b {
position: relative;
height: 15%;
width: 64%;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--we-text) 82%, transparent),
color-mix(in srgb, var(--we-text) 48%, transparent)
);
transition:
opacity 0.55s ease,
transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1),
width 0.7s steps(8),
background 0.5s,
box-shadow 0.5s;
}
.gbwd-m-h2 {
height: 7%;
width: 76%;
background: color-mix(in srgb, var(--we-text) 24%, transparent);
}
.gbwd-m-h2b {
height: 7%;
width: 54%;
background: color-mix(in srgb, var(--we-text) 24%, transparent);
}
.gbwd-m-btn {
height: 14%;
width: 36%;
background: var(--we-primary);
box-shadow: 0 0 18px -4px var(--we-glow-a);
}
.gbwd-m-img {
flex: 1;
border: 1px solid var(--we-border);
background:
repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--we-text) 7%, transparent) 0 6px,
transparent 6px 14px
),
var(--we-surface-2);
}
/* Szene 2, Phase 1: Headline übernimmt die Markenfarbe */
.gbwd-stage[data-step="2"].is-act .gbwd-m-h1,
.gbwd-stage[data-step="3"] .gbwd-m-h1,
.gbwd-stage[data-step="4"] .gbwd-m-h1 {
background: linear-gradient(90deg, var(--we-primary), var(--we-primary-2) 70%, var(--we-accent));
box-shadow: 0 0 22px -6px var(--we-glow-a);
}
/* Szene 2, Phase 2a: Text tippen — zweite Headline-Zeile wächst + Caret */
.gbwd-m-h1b::after {
content: "";
position: absolute;
right: -7px;
top: -12%;
width: 2px;
height: 124%;
background: var(--we-primary);
opacity: 0;
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-m-h1b,
.gbwd-stage[data-step="3"] .gbwd-m-h1b,
.gbwd-stage[data-step="4"] .gbwd-m-h1b {
width: 82%;
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-m-h1b {
transition-delay: 0.15s;
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-m-h1b::after {
animation: gbwdBlink 0.9s steps(2) 0.1s 3;
}
@keyframes gbwdBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Szene 2, Phase 2b: Bild einfügen — Panel, fliegendes Thumbnail, „Foto“ */
.gbwd-media {
position: absolute;
right: 5%;
top: 7%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 9px 9px;
background: color-mix(in srgb, var(--we-surface-2) 96%, transparent);
border: 1px solid var(--we-border);
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
z-index: 4;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.35s, transform 0.35s;
pointer-events: none;
}
.gbwd-media-t {
font: 700 9px/1 var(--we-font-body);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--we-muted);
}
.gbwd-media-row {
display: flex;
gap: 6px;
}
.gbwd-media-th {
display: block;
width: 34px;
height: 24px;
border: 1px solid var(--we-border);
background:
radial-gradient(circle at 70% 30%, var(--we-accent) 0 18%, transparent 20%),
linear-gradient(
180deg,
color-mix(in srgb, var(--we-primary) 26%, var(--we-surface)) 0 60%,
color-mix(in srgb, var(--we-primary-2) 40%, var(--we-surface)) 60%
);
}
.gbwd-media-th.m2 {
background:
radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--we-text) 55%, transparent) 0 16%, transparent 18%),
color-mix(in srgb, var(--we-text) 16%, var(--we-surface));
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-media {
opacity: 1;
transform: none;
transition-delay: 0.7s;
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-media .gbwd-fly {
animation: gbwdFly 0.55s cubic-bezier(0.5, 0.05, 0.4, 1) 1.2s both;
}
@keyframes gbwdFly {
0% { transform: none; opacity: 1; }
100% { transform: translate(-46%, 320%) scale(0.75); opacity: 0; }
}
/* Das eingefügte „Foto“: Himmel + Sonne, rein über background */
.gbwd-stage[data-step="2"].is-act2 .gbwd-m-img,
.gbwd-stage[data-step="3"] .gbwd-m-img,
.gbwd-stage[data-step="4"] .gbwd-m-img {
background:
radial-gradient(circle at 72% 26%, var(--we-accent) 0 9%, transparent 11%),
linear-gradient(
180deg,
color-mix(in srgb, var(--we-primary) 22%, var(--we-surface-2)) 0 58%,
color-mix(in srgb, var(--we-primary-2) 38%, var(--we-surface-2)) 58%
);
border-color: color-mix(in srgb, var(--we-primary) 50%, var(--we-border));
box-shadow: 0 0 30px -10px var(--we-glow-a);
}
.gbwd-stage[data-step="2"].is-act2 .gbwd-m-img {
transition-delay: 1.4s;
}
/* Szene 3, Phase 2: Claude tauscht Headline + färbt den Hero */
.gbwd-stage[data-step="3"].is-act2 .gbwd-m-h1,
.gbwd-stage[data-step="4"] .gbwd-m-h1 {
background: linear-gradient(90deg, var(--we-accent), var(--we-primary) 55%, var(--we-primary-2));
box-shadow: 0 0 26px -6px var(--we-glow-a);
}
.gbwd-stage[data-step="3"].is-act2 .gbwd-m-img,
.gbwd-stage[data-step="4"] .gbwd-m-img {
box-shadow:
inset 0 0 0 999px color-mix(in srgb, var(--we-primary) 14%, transparent),
0 0 34px -8px var(--we-glow-a);
}
.gbwd-stage[data-step="3"].is-act2 .gbwd-m-btn,
.gbwd-stage[data-step="4"] .gbwd-m-btn {
background: var(--we-accent);
box-shadow: 0 0 20px -4px var(--we-glow-b);
}
/* Karten-Reihe */
.gbwd-m-grid {
flex: none;
height: 22%;
display: flex;
gap: 4.5%;
}
.gbwd-m-grid i {
flex: 1;
position: relative;
border: 1px solid var(--we-border);
background: var(--we-surface-2);
overflow: hidden;
transition: border-color 0.5s, background-color 0.5s;
}
.gbwd-m-grid i::before {
content: "";
position: absolute;
left: 11%;
top: 16%;
width: 24%;
height: 24%;
background: color-mix(in srgb, var(--we-primary) 55%, transparent);
transition: background-color 0.5s;
}
.gbwd-m-grid i::after {
content: "";
position: absolute;
left: 11%;
bottom: 18%;
width: 62%;
height: 9%;
background: color-mix(in srgb, var(--we-text) 22%, transparent);
}
/* --- Overlays ------------------------------------------------------------- */
/* Szene 1: Template-Picker */
.gbwd-picker {
position: absolute;
left: 4.5%;
top: 12%;
width: 27%;
min-width: 128px;
display: flex;
flex-direction: column;
gap: 7px;
padding: 9px 9px 10px;
background: color-mix(in srgb, var(--we-surface-2) 96%, transparent);
border: 1px solid var(--we-border);
box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.85);
z-index: 4;
opacity: 0;
transform: translateX(-14px);
transition: opacity 0.4s, transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
pointer-events: none;
}
.gbwd-stage[data-step="1"] .gbwd-picker {
opacity: 1;
transform: none;
}
.gbwd-stage[data-step="1"].is-act .gbwd-picker {
opacity: 0;
transform: translateX(-10px);
transition-delay: 0.35s;
}
.gbwd-picker-t {
font: 700 9px/1 var(--we-font-body);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--we-muted);
}
.gbwd-thumb {
display: flex;
flex-direction: column;
gap: 3px;
padding: 7px 8px;
background: var(--we-bg);
border: 1px solid var(--we-border);
transition: border-color 0.25s, box-shadow 0.25s;
}
.gbwd-thumb i {
display: block;
height: 5px;
background: color-mix(in srgb, var(--we-text) 24%, transparent);
}
.gbwd-thumb i:first-child {
width: 55%;
background: color-mix(in srgb, var(--we-primary) 70%, transparent);
}
.gbwd-thumb i:nth-child(2) { width: 85%; }
.gbwd-thumb i:nth-child(3) { width: 70%; }
.gbwd-stage[data-step="1"].is-act .gbwd-thumb.t2 {
border-color: var(--we-primary);
box-shadow:
0 0 0 1px var(--we-primary),
0 0 20px -6px var(--we-glow-a);
}
/* Szene 2: Auswahl-Ring um die Headline + Werkzeug-Chip */
.gbwd-ring {
position: absolute;
inset: -7px;
border: 1.5px solid var(--we-primary);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
font-style: normal;
}
.gbwd-ring::before,
.gbwd-ring::after {
content: "";
position: absolute;
width: 5px;
height: 5px;
background: var(--we-primary);
}
.gbwd-ring::before { left: -3px; top: -3px; }
.gbwd-ring::after { right: -3px; bottom: -3px; }
.gbwd-ring u {
position: absolute;
left: -1.5px;
bottom: calc(100% + 4px);
padding: 3px 6px;
background: var(--we-primary);
color: var(--we-on-primary);
font: 700 8.5px/1 var(--we-font-body);
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.gbwd-stage[data-step="2"] .gbwd-ring {
opacity: 1;
transition-delay: 0.55s;
}
.gbwd-tools {
position: absolute;
left: 36%;
top: 13%;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 9px;
background: color-mix(in srgb, var(--we-surface-2) 94%, transparent);
border: 1px solid var(--we-border);
box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
z-index: 3;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s, transform 0.35s;
pointer-events: none;
}
.gbwd-stage[data-step="2"] .gbwd-tools {
opacity: 1;
transform: none;
transition-delay: 0.8s;
}
.gbwd-sw {
width: 14px;
height: 14px;
border: 1px solid var(--we-border);
}
.gbwd-sw.sw1 { background: color-mix(in srgb, var(--we-text) 80%, transparent); }
.gbwd-sw.sw2 { background: var(--we-primary); }
.gbwd-sw.sw3 { background: var(--we-accent); }
.gbwd-stage[data-step="2"].is-act .gbwd-sw.sw2 {
box-shadow:
0 0 0 2px var(--we-surface-2),
0 0 0 3.5px var(--we-primary);
}
.gbwd-aa {
padding-left: 8px;
border-left: 1px solid var(--we-border);
font: 700 10px/1 var(--we-font-heading);
color: var(--we-muted);
}
/* Szene 3: Chat — Du → Claude, Claude antwortet mit Tool-Call */
.gbwd-chatcol {
position: absolute;
left: 5%;
bottom: 6%;
max-width: 68%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
z-index: 4;
pointer-events: none;
}
.gbwd-chat {
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 13px 11px;
background: color-mix(in srgb, var(--we-bg) 55%, var(--we-surface-2));
border: 1px solid color-mix(in srgb, var(--we-primary) 35%, var(--we-border));
box-shadow:
0 18px 44px -18px rgba(0, 0, 0, 0.8),
0 0 34px -18px var(--we-glow-a);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.4s, transform 0.4s;
}
.gbwd-chat-user {
align-self: flex-end;
border-color: color-mix(in srgb, var(--we-primary) 60%, var(--we-border));
}
.gbwd-stage[data-step="3"] .gbwd-chat-user {
opacity: 1;
transform: none;
transition-delay: 0.15s;
}
.gbwd-stage[data-step="3"] .gbwd-chat-ai {
opacity: 1;
transform: none;
transition-delay: 1.5s;
}
.gbwd-chat-who {
font: 700 9px/1 var(--we-font-body);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--we-primary-text);
}
.gbwd-chat-msg {
font: 500 12.5px/1.45 var(--we-font-body);
color: var(--we-text);
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.gbwd-stage[data-step="3"] .gbwd-chat-msg {
clip-path: inset(0 100% 0 0);
animation: gbwdType 1.05s steps(26) 0.4s forwards;
}
@keyframes gbwdType {
to { clip-path: inset(0 -2% 0 0); }
}
/* Tool-Call-Chip: „edit_page“ läuft, dann Häkchen */
.gbwd-chat-tool {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
align-self: flex-start;
border: 1px solid color-mix(in srgb, var(--we-primary) 40%, var(--we-border));
background: color-mix(in srgb, var(--we-primary) 8%, transparent);
font: 600 10px/1 var(--we-font-body);
letter-spacing: 0.04em;
color: var(--we-primary-text);
}
.gbwd-chat-tool i {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid var(--we-primary);
border-top-color: transparent;
}
.gbwd-stage[data-step="3"] .gbwd-chat-tool i {
animation: gbwdSpin 0.7s linear 1.5s 2;
}
@keyframes gbwdSpin {
to { transform: rotate(360deg); }
}
.gbwd-chat-ok {
font: 600 11px/1 var(--we-font-body);
color: var(--we-primary-text);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.35s, transform 0.35s;
}
.gbwd-stage[data-step="3"].is-act2 .gbwd-chat-ok {
opacity: 1;
transform: none;
transition-delay: 0.55s;
}
/* Szene 4: Live-Badge */
.gbwd-live {
position: absolute;
right: 5%;
top: 6%;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: color-mix(in srgb, var(--we-primary) 16%, var(--we-bg));
border: 1px solid color-mix(in srgb, var(--we-primary) 65%, transparent);
color: var(--we-primary-text);
font: 700 10px/1 var(--we-font-heading);
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 3;
opacity: 0;
transform: scale(0.6);
}
.gbwd-live::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--we-primary);
box-shadow: 0 0 10px var(--we-primary);
}
.gbwd-stage[data-step="4"].is-act .gbwd-live {
animation: gbwdPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.85s both;
}
@keyframes gbwdPop {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
/* Szene 4, Finale: .gbwd-scroll ist KIND der Section und deckt sie ganz ab.
Sichtbar via .gbwd.gbwd-finale — Inhalt (Wrap) blendet aus, nur Pfeile. */
.gbwd-scroll {
position: absolute;
inset: 0;
z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.55s ease, visibility 0.55s;
pointer-events: none;
}
.gbwd.gbwd-finale .gbwd-scroll {
opacity: 1;
visibility: visible;
}
.gbwd-chev {
width: clamp(72px, 15vw, 180px);
height: clamp(72px, 15vw, 180px);
margin-top: -6%;
border-right: clamp(11px, 1.6vw, 20px) solid var(--we-primary);
border-bottom: clamp(11px, 1.6vw, 20px) solid var(--we-primary);
transform: rotate(45deg);
filter: drop-shadow(0 0 26px var(--we-glow-a));
}
.gbwd-chev.c1 { margin-top: 0; }
.gbwd.gbwd-finale .gbwd-chev {
animation: gbwdChev 1.3s ease-in-out infinite;
}
.gbwd-chev.c2 { animation-delay: 0.16s !important; }
.gbwd-chev.c3 { animation-delay: 0.32s !important; }
@keyframes gbwdChev {
0%, 100% { opacity: 0.28; transform: rotate(45deg) translate(0, 0); }
50% { opacity: 1; transform: rotate(45deg) translate(10px, 10px); }
}
/* Cursor (dekorativ) — Positionen in % der Canvas */
.gbwd-cursor {
position: absolute;
left: 16%;
top: 42%;
z-index: 6;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
transition:
left 0.8s cubic-bezier(0.45, 0.05, 0.2, 1),
top 0.8s cubic-bezier(0.45, 0.05, 0.2, 1);
pointer-events: none;
}
.gbwd-cursor svg { display: block; }
.gbwd-cursor::after {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--we-primary);
opacity: 0;
transform: scale(0.3);
}
.gbwd-stage[data-step="1"] .gbwd-cursor { left: 16%; top: 42%; }
.gbwd-stage[data-step="2"] .gbwd-cursor { left: 40%; top: 15.5%; }
.gbwd-stage[data-step="2"].is-act2 .gbwd-cursor {
left: 80%;
top: 13%;
transition-delay: 0.7s;
}
.gbwd-stage[data-step="3"] .gbwd-cursor { left: 72%; top: 74%; }
.gbwd-stage[data-step="4"] .gbwd-cursor { left: 88%; top: -7.5%; }
.gbwd-stage[data-step="1"] .gbwd-cursor::after { animation: gbwdClickA 0.55s ease-out 0.9s both; }
.gbwd-stage[data-step="2"]:not(.is-act2) .gbwd-cursor::after { animation: gbwdClickB 0.55s ease-out 0.9s both; }
.gbwd-stage[data-step="2"].is-act2 .gbwd-cursor::after { animation: gbwdClickD 0.55s ease-out 1.2s both; }
.gbwd-stage[data-step="4"] .gbwd-cursor::after { animation: gbwdClickC 0.55s ease-out 0.9s both; }
@keyframes gbwdClickA {
0% { opacity: 0.9; transform: scale(0.25); }
100% { opacity: 0; transform: scale(1.15); }
}
@keyframes gbwdClickB {
0% { opacity: 0.9; transform: scale(0.25); }
100% { opacity: 0; transform: scale(1.15); }
}
@keyframes gbwdClickC {
0% { opacity: 0.9; transform: scale(0.25); }
100% { opacity: 0; transform: scale(1.15); }
}
@keyframes gbwdClickD {
0% { opacity: 0.9; transform: scale(0.25); }
100% { opacity: 0; transform: scale(1.15); }
}
/* --- Scroll-Reveal (nur aktiv, wenn JS .gbwd-anim setzt) ------------------ */
.gbwd.gbwd-anim .gbwd-head,
.gbwd.gbwd-anim .gbwd-step,
.gbwd.gbwd-anim .gbwd-stage {
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.75s ease,
transform 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.gbwd.gbwd-anim.gbwd-in .gbwd-head,
.gbwd.gbwd-anim.gbwd-in .gbwd-step,
.gbwd.gbwd-anim.gbwd-in .gbwd-stage {
opacity: 1;
transform: none;
}
.gbwd.gbwd-anim.gbwd-in .gbwd-step:nth-child(2) { transition-delay: 0.1s; }
.gbwd.gbwd-anim.gbwd-in .gbwd-step:nth-child(3) { transition-delay: 0.2s; }
.gbwd.gbwd-anim.gbwd-in .gbwd-step:nth-child(4) { transition-delay: 0.3s; }
.gbwd.gbwd-anim.gbwd-in .gbwd-stage { transition-delay: 0.25s; }
/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 768px) {
.gbwd-demo {
grid-template-columns: 1fr;
gap: 26px;
}
.gbwd-stage { order: -1; }
.gbwd-steps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 480px) {
.gbwd-wrap { padding-left: 18px; padding-right: 18px; }
.gbwd-steps { grid-template-columns: 1fr; }
.gbwd-step-btn { padding: 13px 15px 15px; }
.gbwd-step-txt b { font-size: 15px; }
.gbwd-step-txt small { font-size: 12.5px; }
.gbwd-canvas { aspect-ratio: 4 / 3.1; }
.gbwd-chatcol { max-width: 84%; }
.gbwd-chat-msg { font-size: 11px; }
.gbwd-picker { width: 38%; min-width: 0; }
.gbwd-url span { font-size: 10px; padding: 0 8px; }
.gbwd-pub { padding: 5px 9px 6px; font-size: 10px; }
.gbwd-media-th { width: 28px; height: 20px; }
.gbwd-chev {
width: clamp(64px, 26vw, 130px);
height: clamp(64px, 26vw, 130px);
border-right-width: 12px;
border-bottom-width: 12px;
}
}
/* --- Reduced Motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gbwd-cursor { display: none; }
.gbwd-step-bar { display: none; }
.gbwd .gbwd-m,
.gbwd .gbwd-m-h1b,
.gbwd-chat,
.gbwd-picker,
.gbwd-tools,
.gbwd-media,
.gbwd-ring,
.gbwd-url span,
.gbwd-pub,
.gbwd-browser,
.gbwd-scroll,
.gbwd-wrap,
.gbwd-step-btn {
transition: none !important;
}
.gbwd-chat-msg,
.gbwd-chat-tool i,
.gbwd-live,
.gbwd-chev,
.gbwd-fly,
.gbwd-pub-line {
animation: none !important;
clip-path: none !important;
}
.gbwd-stage[data-step="4"].is-act .gbwd-live { opacity: 1; transform: none; }
.gbwd-stage[data-step="4"].is-act .gbwd-pub-line { transform: scaleX(1); }
.gbwd.gbwd-anim .gbwd-head,
.gbwd.gbwd-anim .gbwd-step,
.gbwd.gbwd-anim .gbwd-stage {
opacity: 1;
transform: none;
transition: none;
}
}