/* Webinar-Seite (/webinar). Grundlage: site.css
   Gegenpol-Regel: ein Objekt hebt sich immer deutlich vom Untergrund ab.
   Terminkarte und Bonus sind Schlüsselkarten (immer hell), der Beispiel-Workflow
   ist auf dunkler Seite hell und auf heller Seite dunkel. */

/* ---- Einstieg ---- */
.wb-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wb-hero h1 { font-size: clamp(2.7rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -.03em; }
.wb-hero__lede { margin-top: 28px; font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); max-width: 50ch; }
.wb-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.wb-hero__trust { font-size: .98rem; line-height: 1.45; color: var(--ink-mute); max-width: 28ch; }
.wb-hero { position: relative; isolation: isolate; }
/* Rechte Spalte: Terminkarte, darunter Gesichter aus der Community */
.wb-hero__side { display: grid; gap: 30px; justify-items: start; width: 100%; max-width: 460px; }
@media (max-width: 900px) { .wb-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .wb-hero__actions .btn { width: 100%; } }


/* ---- Beispiel-Workflow ---- */
/* Dunkle Seite: helles Objekt aus Kreide mit weißen Knoten und Ink-Rahmen */
.wb-canvas {
  --c-ground: #ece4d6; --c-bar: #ddd2c0; --c-edge: #cdc1ad; --c-text: #1e1a17; --c-soft: #524a43;
  --c-dots: rgba(30, 26, 23, .09); --c-dash: #a89c8a; --c-done-line: #1e1a17;
  border-radius: 22px; overflow: hidden; background: var(--c-ground); color: var(--c-text);
}
.wb-canvas__top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 22px; background: var(--c-bar); border-bottom: 1px solid var(--c-edge); }
.wb-canvas__top::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red-cta); }
.wb-canvas__top b { font-weight: 700; font-size: 1.05rem; }
.wb-canvas__sub { color: var(--c-soft); }
.wb-canvas__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem; white-space: nowrap; background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.wb-canvas__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-dash); }
.wb-canvas__status[data-state="running"]::before { background: var(--red-cta); animation: wb-pulse 1s ease-in-out infinite; }
.wb-canvas__status[data-state="done"]::before { background: #3d7a49; }
.wb-canvas__run { --bg: #1e1a17; color: #f3ede4; }
.wb-canvas__run:hover { --bg: #000000; color: #f3ede4; }
.wb-canvas__body { padding: clamp(40px, 6vw, 76px) clamp(20px, 4vw, 56px); background: radial-gradient(var(--c-dots) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--c-ground); }
.wb-canvas__foot { padding: 14px 22px; background: var(--c-bar); border-top: 1px solid var(--c-edge); color: var(--c-soft); font-size: .96rem; }

.wb-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.wb-node { position: relative; background: #fffdf9; color: #1e1a17; border: 1.5px solid #1e1a17; border-radius: 14px; padding: 20px 18px 22px; box-shadow: 4px 4px 0 #1e1a17; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease); }
.wb-node__icon { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; background: #fbe9e7; color: var(--red); box-shadow: inset 0 0 0 1px #e7cfca; transition: background .35s, color .35s; }
.wb-node__icon svg { width: 23px; height: 23px; }
.wb-node__tool { font-size: .9rem; font-weight: 600; color: #524a43; }
.wb-node__title { font-size: 1.16rem; line-height: 1.3; margin-top: 4px; font-weight: 700; letter-spacing: -.01em; }
.wb-node__state { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed #a89c8a; display: grid; place-items: center; color: transparent; transition: background .3s, border-color .3s, color .3s; }
.wb-node__state svg { width: 14px; height: 14px; }
.wb-node::after { content: ""; position: absolute; top: 50%; right: -41.5px; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--c-dash) 0 6px, transparent 6px 11px); }
.wb-node:last-child::after { display: none; }
.wb-node.is-done::after { background: var(--c-done-line); }
.wb-node.is-done .wb-node__state { border: 0; background: #3d7a49; color: #ffffff; }
.wb-node.is-running { background: #fbe9e7; border-color: var(--red); box-shadow: 4px 4px 0 var(--red); transform: translateY(-5px); }
.wb-node.is-running .wb-node__icon { background: var(--red); color: #ffffff; box-shadow: none; }
.wb-node.is-running .wb-node__state { border: 2px solid #e7cfca; border-top-color: var(--red); animation: wb-spin .9s linear infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
@keyframes wb-pulse { 50% { opacity: .35; } }

/* Helle Seite: das Objekt wird dunkel, die Knoten bleiben hell */
:root[data-theme="light"] .wb-canvas {
  --c-ground: #1e1a17; --c-bar: #2a2420; --c-edge: #3d342d; --c-text: #f3ede4; --c-soft: #c4b9ab;
  --c-dots: rgba(243, 237, 228, .08); --c-dash: rgba(243, 237, 228, .35); --c-done-line: #ece4d6;
  box-shadow: 0 30px 60px -36px rgba(30, 26, 23, .6);
}
:root[data-theme="light"] .wb-canvas__status[data-state="done"]::before { background: #8fcb98; }
:root[data-theme="light"] .wb-canvas__run { --bg: #ece4d6; color: var(--red); }
:root[data-theme="light"] .wb-canvas__run:hover { --bg: #ffffff; color: var(--red); }
:root[data-theme="light"] .wb-node { border-color: transparent; box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .95); }
:root[data-theme="light"] .wb-node.is-running { border-color: var(--red-cta); box-shadow: 5px 5px 0 var(--red-cta); }

@media (max-width: 900px) {
  .wb-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .wb-node::after { top: auto; bottom: -27.5px; right: auto; left: 40px; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--c-dash) 0 6px, transparent 6px 11px); }
  .wb-node.is-done::after { background: var(--c-done-line); }
}
@media (max-width: 640px) {
  .wb-canvas__sub { display: none; }
  .wb-canvas__top { flex-wrap: wrap; padding: 12px 14px; }
}



/* ---- Bonus (Schlüsselkarte) ---- */
.wb-bonus { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding: clamp(28px, 5vw, 60px); }
.wb-bonus h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.06; letter-spacing: -.025em; }
.wb-bonus__kicker { color: var(--red); }
.wb-bonus__lede { margin-top: 18px; font-size: 1.22rem; color: var(--ink); }
.wb-bonus__list { margin-top: 26px; gap: 14px; }
.wb-bonus__list li { font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.wb-bonus .cb-icon { width: 28px; height: 28px; background: var(--red); color: #ffffff; box-shadow: none; }
.wb-bonus__note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 1.02rem; color: var(--ink-soft); }
.wb-bonus__visual { position: relative; }
/* Aufkleber auf der Vorlage */
.wb-bonus__stamp { position: absolute; z-index: 2; top: -30px; right: -14px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--red); color: #f7f1e8; font: 800 1.45rem/1 var(--sans); letter-spacing: -.01em; transform: rotate(-12deg); box-shadow: 0 0 0 4px #fffdf9, 0 14px 26px -12px rgba(30, 26, 23, .6); }
.wb-bonus__stamp small { display: block; margin-top: 4px; font: 600 .74rem/1.15 var(--sans); letter-spacing: 0; color: #f0dcd8; }
.wb-bonus__cover { width: 100%; border-radius: 14px; border: 1.5px solid var(--ink); }
.wb-bonus__cover--empty { display: grid; gap: 6px; align-content: center; min-height: 260px; padding: 28px; border: 1.5px dashed var(--line-strong); color: var(--ink-soft); }
.wb-bonus__cover--empty strong { color: var(--ink); }
/* Ohne Cover zeigt die Karte eine gezeichnete Vorlage statt des Platzhalters */
.wb-file { display: none; }
.wb-bonus__visual:has(.wb-bonus__cover--empty) .wb-bonus__cover--empty { display: none; }
.wb-bonus__visual:has(.wb-bonus__cover--empty) .wb-file { display: block; }
.wb-file { border-radius: 14px; overflow: hidden; background: #1e1a17; color: #e9e4dc; transform: rotate(1.2deg); box-shadow: 0 30px 50px -28px rgba(30, 26, 23, .75); }
.wb-file__tab { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #2a2420; }
.wb-file__tab span { width: 10px; height: 10px; border-radius: 50%; background: #4f453d; }
.wb-file__tab span:first-child { background: var(--red-cta); }
.wb-file__tab em { margin-left: 10px; font: 400 .9rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; font-style: normal; color: #c4b9ab; }
.wb-file__code { margin: 0; padding: 24px 22px 28px; font: 400 .98rem/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #e9e4dc; white-space: pre; overflow: hidden; }
.wb-file__code i { font-style: normal; color: #b8ad9f; }
.wb-file__code u { text-decoration: none; color: #ef5350; }
.wb-file__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #3d342d; font-size: .92rem; color: #c4b9ab; }
.wb-file__foot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8fcb98; }
@media (max-width: 860px) { .wb-bonus { grid-template-columns: minmax(0, 1fr); } .wb-file { transform: none; } }

/* ---- Eigene Untergründe für Bonus und Stimmen, damit jeder Abschnitt für sich steht ---- */
:root[data-theme="light"] .wb-bonus-sec { background: #e3d6c2; }



/* ---- Abschluss (das eine rote Band) ---- */
.wb-final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.wb-final h2 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.03em; }
.wb-final__date { margin-top: 18px; font-size: 1.2rem; color: var(--ink-soft); }
.wb-final__date strong { color: var(--ink); }
.wb-final__side { display: grid; gap: 16px; justify-items: start; }
.wb-final .wb-cd__unit { min-width: 72px; padding: 12px 8px 10px; border-radius: 11px; background: rgba(20, 6, 6, .34); }
.wb-final .wb-cd__unit strong { font-size: 2.3rem; }
.wb-final__note { font-size: .95rem; color: var(--ink-mute); }
@media (max-width: 860px) { .wb-final { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .wb-final .wb-cd { gap: 6px; } .wb-final .wb-cd__unit { min-width: 0; flex: 1; } .wb-final__side .btn { width: 100%; } .wb-final__side { justify-items: stretch; } }

/* ---- Anmelde-Fenster ---- */
.wb-modal {
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 32px 28px 28px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--sheet); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
}
.wb-modal::backdrop { background: rgba(14, 10, 8, .66); backdrop-filter: blur(3px); }
.wb-modal[open] { animation: wb-modal-in .35s var(--ease); }
@keyframes wb-modal-in { from { opacity: 0; transform: translateY(12px); } }
.wb-modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); cursor: pointer; }
.wb-modal__close:hover { color: var(--ink); border-color: var(--accent); }
.wb-modal__title { font-size: 1.9rem; padding-right: 44px; }
.wb-modal__sub { margin: 8px 0 24px; color: var(--ink-soft); }
.wb-modal .notice .tq-calendar { margin-top: 6px; }