/* OLS-Präsentation – Bausteine zusätzlich zu deck.css (gleicher Stil: Seide & Gold) */

/* 01 Opening */
.ols-letters { font-family: "Figtree"; font-weight: 500; font-size: 270px; line-height: 1; letter-spacing: 0.16em; padding-left: 0.16em; white-space: nowrap; }
.ols-letter { display: inline-block; background-image: linear-gradient(180deg, #fff3c4 0%, #f2d675 25%, #d4af37 55%, #a87918 80%, #f2d675 100%); background-size: 100% 220%; filter: drop-shadow(0 0 60px rgba(212, 175, 55, 0.3)); }
.ols-name { font-family: "Inter"; font-weight: 600; font-size: 24px; letter-spacing: 0.5em; padding-left: 0.5em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; }

/* 02 Ausgangslage */
.lever { border-radius: 30px; }
.lever-text { font-family: "Figtree"; font-weight: 600; font-size: 40px; color: var(--text); }
.lever-strike { height: 2px; background: rgba(245, 241, 232, 0.75); transform: scaleX(0); transform-origin: 0 50%; }
.answer-word { font-family: "Figtree"; font-weight: 700; font-size: 150px; line-height: 1; letter-spacing: -0.02em; background-image: linear-gradient(180deg, #fff3c4 0%, #f2d675 30%, #d4af37 60%, #a87918 85%, #f2d675 100%); background-size: 100% 220%; filter: drop-shadow(0 0 50px rgba(212, 175, 55, 0.3)); }

/* 03 Symptome */
.symptom { border-radius: 30px; }
.symptom-n { font-family: "Figtree"; font-weight: 720; font-size: 96px; line-height: 1; letter-spacing: -0.04em; }
.symptom-t { font-family: "Figtree"; font-weight: 640; font-size: 36px; line-height: 1.12; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }
.symptom-line { height: 1px; background: rgba(212, 175, 55, 0.4); }
.symptom-d { font-family: "Inter"; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--text-2); white-space: nowrap; }

/* 04 Folgen */
.source-pill { height: 72px; border-radius: 36px !important; display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 600; font-size: 30px; color: var(--text); }
.kpi-tile { border-radius: 28px; }
.kpi-t { font-family: "Figtree"; font-weight: 650; font-size: 40px; color: var(--text); }
.kpi-arrow { font-family: "Inter"; font-weight: 700; font-size: 26px; color: var(--gold-soft); }
.kpi-d { font-family: "Inter"; font-weight: 500; font-size: 24px; color: var(--text-2); white-space: nowrap; }

/* 05 Übersicht */
.system-frame { border: 2px solid rgba(212, 175, 55, 0.6); border-radius: 44px; box-shadow: 0 0 90px rgba(212, 175, 55, 0.14), inset 0 0 60px rgba(212, 175, 55, 0.05); }
.hub-tile { border-radius: 30px; cursor: pointer; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.hub-tile:hover { border-color: rgba(242, 214, 117, 0.75); box-shadow: 0 30px 90px rgba(212, 175, 55, 0.18); }
.hub-n { font-family: "Figtree"; font-weight: 720; font-size: 92px; line-height: 1; }
.hub-t { font-family: "Figtree"; font-weight: 640; font-size: 42px; letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }
.hub-d { font-family: "Inter"; font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.hub-go { font-family: "Inter"; font-weight: 500; font-size: 30px; color: var(--gold-soft); opacity: 0.7; }
.ols-emblem { width: 180px; height: 180px; border-radius: 90px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #16233b, #060c18 70%); border: 2px solid rgba(242, 214, 117, 0.7); box-shadow: 0 0 60px rgba(212, 175, 55, 0.35), inset 0 0 30px rgba(212, 175, 55, 0.12); pointer-events: none; }
.ols-emblem.big { width: 220px; height: 220px; border-radius: 110px; }
.emblem-txt { font-family: "Figtree"; font-weight: 600; font-size: 52px; letter-spacing: 0.14em; padding-left: 0.14em; }
.ols-emblem.big .emblem-txt { font-size: 62px; }

/* Bausteine */
.b-num { font-family: "Figtree"; font-weight: 720; font-size: 120px; line-height: 1; letter-spacing: -0.04em; }
.chain-node { display: flex; align-items: center; gap: 12px; color: var(--meta); white-space: nowrap; }
.chain-dot { width: 14px; height: 14px; border-radius: 7px; border: 2px solid rgba(201, 195, 181, 0.6); box-sizing: border-box; }
.chain-txt { font-family: "Inter"; font-weight: 650; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; }
.chain-link { height: 2px; background: rgba(245, 241, 232, 0.12); }
.chain-link-fill { height: 2px; background: linear-gradient(90deg, #d4af37, #f2d675); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(242, 214, 117, 0.6); }
.module-item { display: flex; gap: 22px; align-items: flex-start; }
.module-n { width: 52px; height: 52px; border-radius: 26px; flex: none; border: 1.5px solid rgba(212, 175, 55, 0.7); display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 650; font-size: 24px; color: var(--gold-soft); }
.module-t { font-family: "Figtree"; font-weight: 550; font-size: 30px; line-height: 1.25; color: var(--text); white-space: nowrap; padding-top: 4px; }
.cascade-row { border-radius: 38px !important; }
.cascade-term { height: 66px; line-height: 66px; font-family: "Inter"; font-weight: 650; font-size: 24px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); }
.cascade-row.hot .cascade-term { color: var(--gold-hi); }
.cascade-ex { height: 76px; line-height: 76px; font-family: "Figtree"; font-weight: 550; font-size: 28px; color: var(--text); white-space: nowrap; }

/* OLS Cards */
.ols-card { border-radius: 28px; }
.card-head { display: flex; align-items: center; gap: 18px; }
.card-logo { font-family: "Figtree"; font-weight: 700; font-size: 30px; letter-spacing: 0.06em; }
.card-sep { width: 1px; height: 30px; background: rgba(245, 241, 232, 0.25); }
.card-name { font-family: "Figtree"; font-weight: 650; font-size: 32px; color: var(--text); }
.card-badge { height: 34px; padding: 0 16px; border-radius: 17px; display: flex; align-items: center; border: 1px solid rgba(212, 175, 55, 0.5); font-family: "Inter"; font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.card-box { border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(245, 241, 232, 0.09); }
.card-box-label { font-family: "Inter"; font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.card-big-num { font-family: "Figtree"; font-weight: 720; font-size: 76px; line-height: 1; letter-spacing: -0.03em; }
.card-txt { font-family: "Inter"; font-weight: 500; font-size: 22px; color: var(--text); white-space: nowrap; }
.card-txt.strong { font-family: "Figtree"; font-weight: 620; }
.card-meta { font-family: "Inter"; font-weight: 500; font-size: 19px; line-height: 1.4; color: var(--text-2); }
.spark-chip { display: flex; align-items: center; gap: 12px; }
.spark-label { font-family: "Inter"; font-weight: 500; font-size: 19px; color: var(--text-2); white-space: nowrap; min-width: 0; }
.check-row { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.check-box { width: 24px; height: 24px; border-radius: 6px; flex: none; border: 1.5px solid rgba(212, 175, 55, 0.8); color: var(--gold-hi); display: flex; align-items: center; justify-content: center; font: 700 14px "Inter"; }
.check-txt { font-family: "Inter"; font-weight: 500; font-size: 20px; color: var(--text); }
.check-txt.small { font-size: 18px; }
.board-val { font-family: "Figtree"; font-weight: 700; font-size: 52px; line-height: 1; color: var(--text); }
.board-val.small { font-size: 40px; }
.board-val.warn, .board-cell.warn { color: var(--gold-soft); }
.board-pill { height: 26px; padding: 0 12px; border-radius: 13px; display: flex; align-items: center; font-family: "Inter"; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.55); white-space: nowrap; }
.board-pill.ok { color: var(--text-2); border-color: rgba(201, 195, 181, 0.35); }
.board-z { font-family: "Inter"; font-weight: 500; font-size: 15px; color: var(--meta); }
.board-cell { font-family: "Inter"; font-weight: 500; font-size: 21px; color: var(--text-2); white-space: nowrap; }
.board-cell.strong { color: var(--text); font-weight: 600; }

/* Baustein 2 – Diagramm */
.chart-panel { border-radius: 30px; }
.axis { stroke: rgba(245, 241, 232, 0.2); stroke-width: 1.5; }
.threshold { stroke: rgba(231, 199, 96, 0.8); stroke-width: 2; stroke-dasharray: 10 8; }
.chart-area { fill: url(#none); fill: rgba(212, 175, 55, 0.06); }
.chart-line { stroke: #f2d675; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(242, 214, 117, 0.6)); }
.pulse { width: 44px; height: 44px; border-radius: 22px; border: 3px solid var(--gold-hi); box-shadow: 0 0 30px rgba(242, 214, 117, 0.8); }
.event-chip { height: 58px; padding: 0 24px; border-radius: 29px !important; display: flex; align-items: center; white-space: nowrap; font-family: "Figtree"; font-weight: 600; font-size: 24px; color: var(--gold-hi); border-color: rgba(242, 214, 117, 0.6) !important; }
.event-chip.ok { color: var(--text); border-color: rgba(245, 241, 232, 0.3) !important; }

/* Baustein 3 – Ursachenanalyse */
.drill-node { border-radius: 24px; }
.drill-t { font-family: "Figtree"; font-weight: 620; font-size: 28px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.drill-t.small { font-size: 24px; line-height: 1.15; }
.cause-chip { border-radius: 20px; display: flex; align-items: center; padding-left: 26px; font-family: "Inter"; font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--text-2); white-space: nowrap; }
.conn.gold { stroke: rgba(242, 214, 117, 0.85); }

/* Baustein 4 – Fähigkeiten */
.skill-panel { border-radius: 30px; }
.skill-name { font-family: "Figtree"; font-weight: 600; font-size: 34px; color: var(--text); white-space: nowrap; }
.skill-dot { width: 34px; height: 34px; border-radius: 17px; box-sizing: border-box; }
.skill-dot.outline { border: 2px solid rgba(212, 175, 55, 0.7); }
.skill-dot.fill { background: linear-gradient(170deg, #f6dd86, #d4af37 60%, #b8891f); box-shadow: 0 0 14px rgba(242, 214, 117, 0.4); }
.skill-dot.gap { border: 2px dashed rgba(242, 214, 117, 0.8); box-shadow: 0 0 18px rgba(242, 214, 117, 0.25); }
.skill-sep { height: 1px; background: rgba(245, 241, 232, 0.1); }
.contrib-arrow { width: 32px; font: 700 26px "Inter"; color: var(--gold-hi); text-align: center; }
.routine-when { font-family: "Inter"; font-weight: 650; font-size: 18px; letter-spacing: 0.04em; color: var(--gold-soft); white-space: nowrap; }

/* 10 Zusammenspiel */
.orbit { stroke: rgba(212, 175, 55, 0.5); stroke-width: 2; }
.orbit-node { height: 76px; border-radius: 38px !important; display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 600; font-size: 30px; color: var(--text); transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.runner.big { width: 22px; height: 22px; border-radius: 11px; }

/* 11 Zahlen */
.num-tile { border-radius: 30px; }
.num-pre { font-family: "Inter"; font-weight: 600; font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.num-big { font-family: "Figtree"; font-weight: 720; font-size: 170px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.28)); }
.num-unit { font-family: "Figtree"; font-weight: 550; font-size: 32px; color: var(--text); white-space: nowrap; }

/* 12 Ablauf */
.tl-axis { height: 2px; background: rgba(245, 241, 232, 0.35); }
.tl-tick { white-space: nowrap; font-family: "Inter"; font-weight: 600; font-size: 16px; letter-spacing: 0.08em; color: var(--meta); text-align: center; }
.tl-node { width: 28px; height: 28px; border-radius: 14px; background: var(--navy-1); border: 2px solid var(--gold-hi); box-shadow: 0 0 18px rgba(242, 214, 117, 0.6); }
.tl-node.end { width: 36px; height: 36px; border-radius: 18px; background: radial-gradient(circle, #f2d675, #b8891f); }
.tl-label { display: flex; flex-direction: column; gap: 8px; }
.tl-label.right { align-items: flex-end; text-align: right; }
.tl-title { font-family: "Figtree"; font-weight: 650; font-size: 40px; color: var(--text); white-space: nowrap; }
.tl-desc { font-family: "Inter"; font-weight: 500; font-size: 22px; color: var(--text-2); white-space: nowrap; }
.tl-band { border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(212, 175, 55, 0.3); }
.tl-band-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(212, 175, 55, 0.22), rgba(242, 214, 117, 0.08)); transform-origin: 0 50%; }
.tl-band-n { font-family: "Inter"; font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.tl-band-t { font-family: "Figtree"; font-weight: 620; font-size: 30px; color: var(--text); white-space: nowrap; }
.tl-session { width: 18px; height: 18px; border-radius: 9px; background: var(--gold-hi); box-shadow: 0 0 14px rgba(242, 214, 117, 0.8); }
.tl-sessions { font-family: "Figtree"; font-weight: 600; font-size: 28px; color: var(--text); }
.tl-support { height: 0; border-top: 2px dashed rgba(231, 199, 96, 0.7); }

/* 13 Prinzip */
.station { width: 140px; height: 140px; border-radius: 70px !important; display: flex; align-items: center; justify-content: center; }
.station-n { font-family: "Figtree"; font-weight: 700; font-size: 52px; color: var(--gold-soft); }
.station-label { font-family: "Figtree"; font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--text); }
.gate { width: 16px; height: 60px; border-radius: 8px; background: linear-gradient(180deg, #f2d675, #a87918); box-shadow: 0 0 20px rgba(242, 214, 117, 0.5); }
.gate-check { height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-family: "Inter"; font-weight: 650; font-size: 18px; letter-spacing: 0.06em; color: var(--on-gold); background: linear-gradient(170deg, #f6dd86, #d4af37); }

/* 14 Das Besondere */
.v-divider { width: 1px; background: linear-gradient(180deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 0)); }
.cmp-left, .cmp-right { display: flex; align-items: center; gap: 26px; padding: 0 36px; box-sizing: border-box; }
.cmp-right { border-radius: 26px !important; }
.cmp-x { font: 400 34px "Inter"; color: var(--meta); width: 30px; text-align: center; }
.cmp-check { width: 40px; height: 40px; border-radius: 20px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(170deg, #f6dd86, #d4af37); color: var(--on-gold); font: 700 20px "Inter"; }
.cmp-txt { font-family: "Figtree"; font-weight: 600; font-size: 34px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.cmp-left .cmp-txt { color: var(--text-2); font-weight: 500; }
.cmp-strike { position: absolute; left: 90px; right: 36px; top: 50%; height: 2px; background: rgba(201, 195, 181, 0.7); transform-origin: 0 50%; }
.cmp-left { position: absolute; }

/* OLS Cards als Bild von elearneffect.com */
.card-img { border-radius: 22px; border: 1px solid rgba(212, 175, 55, 0.3); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 60px rgba(212, 175, 55, 0.08); object-fit: cover; }
.right-label { text-align: right; }

/* Baustein 4 – Aufgaben am Zielbeitrag ausrichten */
.goal-panel { border-radius: 30px; }
.goal-row { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.goal-arrow { width: 40px; font: 700 34px "Inter"; color: var(--gold-hi); text-align: center; }
.goal-txt { font-family: "Figtree"; font-weight: 620; font-size: 38px; color: var(--text); }
.task-card { border-radius: 24px; display: flex; align-items: center; gap: 26px; padding: 0 36px; box-sizing: border-box; }
.task-n { width: 48px; height: 48px; border-radius: 24px; flex: none; border: 1.5px solid rgba(212, 175, 55, 0.7); display: flex; align-items: center; justify-content: center; font-family: "Figtree"; font-weight: 650; font-size: 22px; color: var(--gold-soft); }
.task-txt { font-family: "Figtree"; font-weight: 560; font-size: 28px; line-height: 1.22; color: var(--text); white-space: nowrap; }

/* One Pager – die vier Module */
.mod-col { border-radius: 28px; }
.mod-title { font-family: "Figtree"; font-weight: 650; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.mod-chain { font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.mod-sep { height: 1px; background: rgba(212, 175, 55, 0.35); }
.mod-item { display: flex; gap: 14px; align-items: flex-start; }
.mod-item .check-box { margin-top: 2px; }
.mod-item-txt { font-family: "Inter"; font-weight: 500; font-size: 20px; line-height: 1.32; color: var(--text); white-space: nowrap; }
.mod-result { border-top: 1px solid rgba(245, 241, 232, 0.1); padding-top: 18px; }
.mod-result-label { font-family: "Inter"; font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.mod-result-txt { margin-top: 8px; font-family: "Figtree"; font-weight: 650; font-size: 26px; color: var(--gold-soft); }

/* 13 Ablauf – Prinzip unter Modul 1 */
.tl-start-row { display: flex; justify-content: center; align-items: center; gap: 44px; }
.tl-sessions-desc { font-family: "Inter"; font-weight: 500; font-size: 24px; color: var(--text-2); }
.tl-next-arrow { position: relative; width: 110px; height: 2px; background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), #f2d675); }
.tl-next-arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border-left: 12px solid #f2d675; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.tl-callout { width: 2px; background: linear-gradient(180deg, #f2d675, rgba(212, 175, 55, 0.3)); box-shadow: 0 0 12px rgba(242, 214, 117, 0.6); }
.tl-principle { border-radius: 30px; border-color: rgba(212, 175, 55, 0.4) !important; }
.tl-p-rail { height: 2px; background: rgba(245, 241, 232, 0.25); }
.tl-p-station { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; background: var(--navy-2); border: 1.5px solid rgba(212, 175, 55, 0.55); font-family: "Figtree"; font-weight: 700; font-size: 30px; color: var(--gold-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.tl-p-station.last { background: linear-gradient(150deg, rgba(242, 214, 117, 0.25), rgba(212, 175, 55, 0.1)); border-color: rgba(242, 214, 117, 0.8); }
.tl-p-label { font-family: "Figtree"; font-weight: 600; font-size: 24px; color: var(--text); white-space: nowrap; }
.gate.small { width: 12px; height: 42px; }

/* Baustein 1 – Zoom vom Werk bis zum Arbeitsplatz */
.zoom-crumbs { display: flex; align-items: center; gap: 14px; }
.zoom-crumb { font-family: "Inter"; font-weight: 650; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); }
.zoom-crumb-sep { font-family: "Inter"; font-size: 18px; color: rgba(159, 167, 184, 0.6); }
.zoom-view { overflow: hidden; border-radius: 30px; }
.zoom-frame { border-radius: 30px; border: 2px solid rgba(212, 175, 55, 0.4); background: linear-gradient(160deg, rgba(30, 44, 70, 0.45), rgba(7, 18, 38, 0.35)); box-shadow: inset 0 1px 0 rgba(242, 214, 117, 0.12); box-sizing: border-box; }
.zoom-level { font-size: 20px; }
.zoom-big { font-family: "Figtree"; font-weight: 650; font-size: 66px; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.zoom-sub { font-family: "Figtree"; font-weight: 500; font-size: 32px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.zoom-num { font-family: "Figtree"; font-weight: 720; font-size: 130px; line-height: 1; letter-spacing: -0.04em; filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.3)); }
.zoom-sep { height: 1px; background: rgba(212, 175, 55, 0.35); }
.zoom-kpi { font-family: "Figtree"; font-weight: 600; font-size: 34px; color: var(--text); white-space: nowrap; }
.zoom-ind { display: flex; align-items: center; gap: 24px; }
.zoom-ind-t { width: 400px; font-family: "Figtree"; font-weight: 600; font-size: 34px; color: var(--text); white-space: nowrap; }
.zoom-ind-spark { filter: drop-shadow(0 0 8px rgba(242, 214, 117, 0.5)); }
.zoom-chips { display: flex; gap: 16px; }
.zoom-chip { height: 58px; padding: 0 26px; border-radius: 29px; display: flex; align-items: center; border: 1.5px solid rgba(212, 175, 55, 0.55); background: rgba(212, 175, 55, 0.07); font-family: "Figtree"; font-weight: 600; font-size: 28px; color: var(--gold-soft); white-space: nowrap; }
.zoom-check { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
.zoom-check-box { width: 44px; height: 44px; border-radius: 12px; flex: none; border: 2px solid rgba(212, 175, 55, 0.7); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.zoom-check-mark { font: 800 24px "Inter"; color: var(--on-gold); }
.zoom-check-t { font-family: "Figtree"; font-weight: 600; font-size: 36px; color: var(--text); }
.zoom-focus { border-radius: 28px; }
.zoom-focus-t { font-family: "Figtree"; font-weight: 650; font-size: 46px; line-height: 1.15; color: var(--text); white-space: nowrap; }
.zoom-day { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 60px; }
.zoom-day-dot { width: 30px; height: 30px; border-radius: 15px; border: 2px solid rgba(212, 175, 55, 0.6); background: var(--navy-1); box-sizing: border-box; }
.zoom-day-t { font-family: "Inter"; font-weight: 600; font-size: 20px; letter-spacing: 0.08em; color: var(--text-2); }
.zoom-day-line { height: 2px; background: linear-gradient(90deg, #d4af37, #f2d675); box-shadow: 0 0 10px rgba(242, 214, 117, 0.6); }

/* Baustein 1 – Wirkungsbaum */
.tree-node { border-radius: 22px; display: flex; align-items: center; gap: 14px; padding: 0 22px; box-sizing: border-box; transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.tree-node.kpi { justify-content: center; text-align: center; }
.tree-node.lit, .tree-goal.lit { border-color: rgba(242, 214, 117, 0.85) !important; box-shadow: 0 0 40px rgba(212, 175, 55, 0.35); }
.tree-txt { font-family: "Figtree"; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.tree-spark { margin-left: auto; flex: none; filter: drop-shadow(0 0 6px rgba(242, 214, 117, 0.45)); }
.tree-check { width: 30px; height: 30px; border-radius: 8px; flex: none; border: 2px solid rgba(212, 175, 55, 0.7); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.tree-check-mark { font: 800 16px "Inter"; color: var(--on-gold); opacity: 0; }
.tree-goal { border-radius: 26px; display: flex; flex-direction: column; justify-content: center; padding-left: 32px; transition: box-shadow 0.3s var(--ease); }
.tree-goal.pulse { box-shadow: 0 0 90px rgba(212, 175, 55, 0.6); }
.tree-goal-v { font-family: "Figtree"; font-weight: 720; font-size: 66px; line-height: 1; letter-spacing: -0.03em; }
.tree-goal-t { margin-top: 10px; font-family: "Figtree"; font-weight: 600; font-size: 26px; color: var(--text); }
.tree-link { stroke: rgba(212, 175, 55, 0.5); stroke-width: 1.8; }
.tree-week { display: flex; align-items: center; gap: 28px; }
.tree-week .label { margin-right: 18px; }
.tree-day { display: flex; align-items: center; gap: 10px; }
.tree-day-dot { width: 22px; height: 22px; border-radius: 11px; border: 2px solid rgba(212, 175, 55, 0.6); box-sizing: border-box; transition: background 0.3s, box-shadow 0.3s; }
.tree-day-dot.on { background: #f2d675; border-color: #f2d675; box-shadow: 0 0 16px rgba(242, 214, 117, 0.8); }
.tree-day-t { font-family: "Inter"; font-weight: 600; font-size: 20px; letter-spacing: 0.06em; color: var(--text-2); }

/* Baustein 1 – Wirkungsfluss (reduzierter Stil) */
.flow-goal { border-radius: 26px; display: flex; align-items: center; gap: 26px; padding: 0 36px; box-sizing: border-box; border: 2px solid rgba(231, 199, 96, 0.85) !important; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.025), 0 30px 90px rgba(0, 0, 0, 0.5); transition: box-shadow 0.35s var(--ease); }
.flow-goal.lit { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.08), 0 0 90px rgba(212, 175, 55, 0.55); }
.flow-goal-icon { flex: none; display: flex; }
.flow-goal-t { font-family: "Figtree"; font-weight: 700; font-size: 48px; line-height: 1; color: var(--text); }
.flow-goal-q { margin-top: 10px; font-family: "Figtree"; font-weight: 500; font-size: 26px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.flow-line { stroke: rgba(201, 195, 181, 0.55); stroke-width: 2; }
.flow-arrow { width: 26px; height: 26px; border-left: 2.5px solid rgba(231, 199, 96, 0.9); border-bottom: 2.5px solid rgba(231, 199, 96, 0.9); transform: rotate(45deg); box-sizing: border-box; }
.flow-circle { width: 30px; height: 30px; border-radius: 15px; border: 3px solid #e7c760; background: var(--navy-1); box-sizing: border-box; transition: background 0.25s, box-shadow 0.25s; }
.flow-circle.lit { background: #f2d675; box-shadow: 0 0 22px rgba(242, 214, 117, 0.9); }
.flow-pill { height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1.5px solid rgba(212, 175, 55, 0.6); background: rgba(212, 175, 55, 0.08); font-family: "Figtree"; font-weight: 650; font-size: 28px; color: var(--gold-soft); }
.flow-q { font-family: "Figtree"; font-weight: 500; font-size: 26px; color: var(--meta); white-space: nowrap; }
.flow-box { border-radius: 22px; display: flex; align-items: center; gap: 22px; padding: 0 30px; box-sizing: border-box; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.flow-box.lit { border-color: rgba(242, 214, 117, 0.85) !important; box-shadow: 0 0 40px rgba(212, 175, 55, 0.35); }
.flow-box-icon { flex: none; display: flex; }
.flow-bar { flex: 1; height: 16px; border-radius: 8px; background: rgba(201, 195, 181, 0.16); }

/* 11 Die OLS Cards */
.card-tile { border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.card-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-tile:hover { border-color: rgba(242, 214, 117, 0.85); box-shadow: 0 30px 90px rgba(212, 175, 55, 0.22); }
.card-tile-name { font-family: "Figtree"; font-weight: 650; font-size: 34px; color: var(--text); white-space: nowrap; }
.card-shade { background: rgba(2, 4, 9, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 20; cursor: pointer; }
.card-big-img { z-index: 21; border-radius: 24px; border: 1px solid rgba(212, 175, 55, 0.45); box-shadow: 0 50px 160px rgba(0, 0, 0, 0.7), 0 0 80px rgba(212, 175, 55, 0.12); cursor: pointer; object-fit: cover; }

/* Baustein 4 – Routinen und Leistungsfähigkeit */
.routine-card { border-radius: 28px; }
.routine-when-big { font-family: "Figtree"; font-weight: 700; font-size: 38px; letter-spacing: -0.01em; white-space: nowrap; }
.routine-what { font-family: "Figtree"; font-weight: 600; font-size: 28px; line-height: 1.25; color: var(--text); white-space: nowrap; }
.routine-sep { height: 1px; background: rgba(212, 175, 55, 0.35); }
.routine-rhythm { display: flex; justify-content: space-between; }
.routine-day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.routine-dot { width: 20px; height: 20px; border-radius: 10px; border: 2px solid rgba(212, 175, 55, 0.7); box-sizing: border-box; }
.routine-dot.off { border-color: rgba(201, 195, 181, 0.2); }
.routine-day-t { margin-top: 4px; font-family: "Inter"; font-weight: 600; font-size: 17px; letter-spacing: 0.06em; color: var(--text-2); }
.skill-dot.grow { box-shadow: 0 0 20px rgba(242, 214, 117, 0.8); }
.dev-caption { font-family: "Figtree"; font-weight: 600; font-size: 30px; color: var(--gold-soft); white-space: nowrap; }