/* nur auf dieser Seite geladen: Theme-Titel weg, volle Breite statt Lese-Spalte. */
.wp-block-post-title{display:none}
main .tb-container{max-width:none!important;padding-inline:0!important}
main .tb-container>.wp-block-post-content,
.wp-block-post-content{max-width:none!important;margin-inline:0!important;width:auto!important}
.tb-bruno{max-width:none!important;margin-inline:0!important;overflow-x:clip;overflow-y:visible}

/* Tokens: konsumieren ausschliesslich die Theme-Design-Tokens (tokens.css).
   Dark-Mode kommt automatisch, weil die --tb-* Variablen selbst umschalten. */
.tb-bruno{
  --bg:var(--tb-bg);
  --surface:var(--tb-bg-card);
  --surface-2:color-mix(in oklab, var(--tb-bg-card), var(--tb-ink-900) 5%);
  --line:var(--tb-line);
  --ink:var(--tb-ink-900);
  --ink-soft:var(--tb-ink-700);
  --ink-mute:var(--tb-ink-500);
  --accent:var(--tb-primary-700);          /* Marke: Royalblau */
  --accent-2:var(--tb-accent-teal);        /* Sekundaer: Teal */
  --accent-ink:var(--tb-bg);                /* Text auf Akzent-Flaechen, kippt mit Dark-Mode */
  --warn:var(--tb-accent-rose);
  --amber:var(--tb-accent-amber);
  --house:var(--tb-accent-teal);
  --core:var(--tb-accent-emerald);
  --swiss:#D8232A;                          /* echtes Schweizer-Kreuz-Rot */
  --glow:color-mix(in srgb, var(--tb-primary-700) 16%, transparent);
  --shadow:var(--shadow-lg);
  --radius:var(--radius-xl);
}

/* Keyframes */
@keyframes pulse{0%,100%{opacity:.28; r:40} 50%{opacity:.85; r:47}}
@keyframes blink{0%,100%{opacity:.35} 50%{opacity:1}}

@scope (.tb-bruno) {
*{box-sizing:border-box}
:scope{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1080px,92vw); margin-inline:auto}
section{padding:clamp(48px,7vw,96px) 0}
h1,h2,h3{font-family:Geist, "Inter Tight", Inter, system-ui, sans-serif; text-wrap:balance; line-height:1.15; margin:0; font-weight:700}
h1{font-size:clamp(2.1rem,4.5vw,3rem); letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,3vw,1.95rem); letter-spacing:-.01em}
h3{font-size:1.375rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.06rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:62ch}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.55em; margin-bottom:1rem}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block; border-radius:2px}
.measure{max-width:64ch}
strong{color:var(--ink)}
a{color:var(--accent); text-underline-offset:3px}
.hero{position:relative; padding:clamp(12px,2.5vw,36px) 0 clamp(28px,5vw,60px)}
.hero::before{content:""; position:absolute; inset:-10% -20% auto -20%; height:520px; z-index:-1; background:radial-gradient(60% 80% at 30% 20%, var(--glow), transparent 70%)}
.brandline{display:flex; align-items:center; gap:.6rem; font-weight:700; margin-bottom:2.4rem}
.brandline .dot{width:12px;height:12px;border-radius:4px;background:conic-gradient(from 210deg,var(--accent),var(--accent-2))}
.hero h1 span{color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:600; font-size:.95rem; color:var(--ink-soft); box-shadow:var(--shadow)}
.chip svg{width:18px;height:18px;color:var(--accent)}
.nameplate{display:inline-flex;align-items:center;gap:.7rem;margin:1.3rem 0 .3rem;padding:.4rem .4rem .4rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.nameplate strong{font-family:Geist,"Inter Tight",Inter,system-ui,sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.4rem .75rem;border-radius:999px}
.tag svg{width:14px;height:14px}
.grid{display:grid; gap:1.1rem}
@media(min-width:720px){ .grid.two{grid-template-columns:1fr 1fr} .grid.four{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);margin-bottom:1rem}
.card .ic svg{width:26px;height:26px}
.card h3{margin-bottom:.4rem}
.card p{color:var(--ink-soft); margin:0; font-size:1rem}
.split{display:grid; gap:clamp(1.4rem,4vw,3rem); align-items:center}
@media(min-width:860px){ .split{grid-template-columns:1.05fr .95fr} .split.rev>*:first-child{order:2} }
figure{margin:0}
.figpanel{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
figcaption{color:var(--ink-mute); font-size:.92rem; margin-top:.7rem; text-align:center}
svg .lbl{font-family:Inter,system-ui,sans-serif; font-weight:600; fill:var(--ink)}
svg .lbl.sm{font-weight:600; font-size:12px; fill:var(--ink-soft)}
svg .wall{fill:none; stroke:var(--house); stroke-width:2.4}
svg .soft{fill:var(--surface-2)}
svg .flow{fill:none; stroke:var(--ink-mute); stroke-width:2.2}
svg .warn{stroke:var(--warn)}
.note{display:flex; gap:1.1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:16px; padding:1.4rem 1.5rem; box-shadow:var(--shadow)}
.note .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.note .ic svg{width:24px;height:24px}
.note h3{margin-bottom:.35rem}
.note p{margin:0;color:var(--ink-soft);font-size:1rem}
.note p+p{margin-top:.6rem}
.steps{display:grid; gap:1rem}
@media(min-width:760px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1.2rem; box-shadow:var(--shadow)}
.step .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;background:var(--accent); color:var(--accent-ink); margin-bottom:.8rem}
.step h3{font-size:1.08rem;margin-bottom:.3rem}
.step p{margin:0;color:var(--ink-soft);font-size:.98rem}
.step .arrow{display:none}
@media(min-width:760px){ .step:not(:last-child) .arrow{display:block; position:absolute; right:-14px; top:34px; color:var(--ink-mute); z-index:2} .step:not(:last-child) .arrow svg{width:24px;height:24px} }
.lab{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:26px; padding:clamp(1.1rem,2.5vw,1.9rem); box-shadow:var(--shadow)}
.lab-top{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.2rem}
.qpick{display:flex;flex-direction:column;gap:.6rem}
.qpick .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.qbtns{display:flex;flex-wrap:wrap;gap:.55rem}
.q{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:.5rem .85rem; border-radius:999px; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.q:hover{border-color:var(--accent); color:var(--ink)}
.q[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.q:focus-visible, .toggle button:focus-visible, .play:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.toggle{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px}
.toggle button{border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:600; font-size:.9rem; padding:.5rem .95rem; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:.45rem}
.toggle button svg{width:16px;height:16px}
.toggle button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.toggle button.warnmode[aria-pressed="true"]{color:var(--warn)}
.stage-wrap{border-radius:18px; overflow:hidden; background:var(--surface); border:1px solid var(--line)}
.stage-wrap svg{display:block;width:100%;height:auto}
#packet{transition:transform .85s cubic-bezier(.45,.02,.18,1)}
#answerPacket{transition:transform .85s cubic-bezier(.45,.02,.18,1); opacity:0}
#answerPacket.show{opacity:1}
.ring{transform-origin:center; transform-box:fill-box}
.thinking #placeCoreRing{animation:pulse 1.15s ease-in-out infinite}
.mode-cloud.thinking #onlookers circle{animation:blink 1s ease-in-out infinite}
#placeCloud{opacity:0; transition:opacity .35s}
.mode-cloud #placeCloud{opacity:1}
#placePrivate{opacity:1; transition:opacity .35s}
.mode-cloud #placePrivate{opacity:0}
.mode-cloud #placeCoreRing{stroke:var(--warn)}
.mode-cloud #placeCore{stroke:var(--warn)}
.core-glyph{stroke:var(--core); transition:stroke .35s}
.mode-cloud .core-glyph{stroke:var(--warn)}
#onlookers{opacity:0; transition:opacity .35s}
.mode-cloud #onlookers{opacity:1}
#roadLabel tspan{fill:var(--ink-mute)}
.readout{display:flex; gap:1rem; align-items:flex-start; margin-top:1.1rem; flex-wrap:wrap}
.caption{flex:1 1 340px; min-height:3.4rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; display:flex; gap:.7rem; align-items:flex-start}
.caption .pip{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);margin-top:2px}
.caption .pip svg{width:16px;height:16px}
.caption span.t{color:var(--ink-soft); font-size:.98rem}
.answer{flex:1 1 260px; background:var(--surface-2); border:1px dashed var(--accent); border-radius:14px; padding:.85rem 1rem; color:var(--ink); font-size:.98rem; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s}
.answer.show{opacity:1; transform:none}
.answer .who{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:.25rem}
.play{margin-top:1.1rem; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; background:var(--accent); color:var(--accent-ink); border:0; border-radius:12px; padding:.8rem 1.3rem; font:inherit; font-weight:700; box-shadow:var(--shadow); transition:transform .15s, filter .2s}
.play:hover{transform:translateY(-1px); filter:brightness(1.05)}
.play svg{width:18px;height:18px}
.hint{color:var(--ink-mute); font-size:.9rem; margin-top:.7rem}
.ptimer{max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:opacity .25s ease, max-height .25s ease, margin-top .25s ease}
.ptimer.on{max-height:30px; opacity:1; margin-top:.9rem}
.ptimer-track{height:8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden}
.ptimer-fill{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.benefit{display:flex; gap:1rem; align-items:flex-start}
.benefit .ic{flex:none}
.cta{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); border-radius:26px; padding:clamp(1.8rem,4vw,3rem); text-align:center; box-shadow:var(--shadow)}
.cta h2{color:var(--accent-ink)}
.cta p{color:var(--accent-ink); opacity:.85; max-width:52ch; margin-inline:auto}
.cta .btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;background:#0E0E2A;color:#fff;padding:.85rem 1.4rem;border-radius:var(--radius-md);font-weight:700;text-decoration:none}
footer{border-top:1px solid var(--line); color:var(--ink-mute); font-size:.92rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; padding:2rem 0}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  #packet,#answerPacket{transition:none !important}
  .thinking #placeCoreRing,.mode-cloud.thinking #onlookers circle{animation:none !important}
}
}