/* ════════════════════════════════════════════════════════════════════
   thesen23 — Personality-Preview V2 (2026-08-29), nur thesen.html
   Das Panel verrät vor dem Klick nichts mehr: Zifferblatt mit drei Stufen-
   Bändern (3 · 5 · 6), darauf die unbeschriftete Form aus den Achsen-
   beträgen, darunter ein Satz. Effekte bei jeder Reaktion: Scheibe atmet
   (verfeinert) oder pendelt ein (verschoben), ein Lichtband zieht darüber,
   der Button pulst. Entwürfe: entwuerfe/profil-preview-final.html.
   Markup: buildPanel()/updatePanel() in thesen.html. Gelb = Markengelb.
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Flecha M"; src:url("../fonts/FlechaM-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}

/* Meta-Zeile: nur noch die Thesenzahl, „Komplett" blau */
.rb-meta b{color:var(--blue); font-weight:700;}

/* ── Zifferblatt ──────────────────────────────────────────────────── */
.rb-disc{position:relative; width:200px; height:200px; margin:14px auto 4px; overflow:visible;}
.rb-disc svg{width:100%; height:100%; overflow:visible; display:block;}
.rbd-band{fill:rgba(0,0,254,.09); stroke:none; transition:d 720ms var(--ease-snap);}
.rbd-band.is-cur{fill:rgba(0,0,254,.17); animation:rbdShimmer 2.4s ease-in-out infinite;}
.rbd-band.is-full{fill:rgba(239,247,70,.72);}
@keyframes rbdShimmer{0%,100%{fill:rgba(0,0,254,.17);}50%{fill:rgba(0,0,254,.30);}}
.rbd-front{fill:var(--blue); opacity:.7; filter:blur(2.5px);}      /* Schweif: leuchtende Sweep-Front */
.rbd-ring{fill:none; stroke:rgba(10,10,10,.16); stroke-width:1;}
.rbd-ring.is-cur{stroke:var(--blue); stroke-width:1.5;}
.rbd-lbl{font-family:var(--font-mono); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--silver);}
.rbd-lbl.is-cur{fill:var(--blue);}
.rbd-spoke{stroke:rgba(10,10,10,.12); stroke-width:1;}
.rbd-shape{fill:var(--blue); stroke:var(--blue); stroke-width:1.5; stroke-linejoin:round;
  transition:points 720ms var(--ease-snap), fill-opacity 620ms var(--ease-out);}
.rbd-soft{fill:var(--blue); filter:blur(9px); opacity:.3;}
.rbd-node{fill:var(--yellow); stroke:var(--blue); stroke-width:1;}   /* dünne blaue Kontur */

/* Lichtband-Overlay (nur während .is-upd sichtbar) */
.rbd-fx{position:absolute; inset:-10px; border-radius:50%; overflow:hidden; pointer-events:none;}
.rbd-fx::before{content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(239,247,70,.75) 48%, rgba(255,255,255,.9) 52%, rgba(239,247,70,.75) 56%, transparent 74%);}

/* ── Update-Effekt (JS setzt .is-upd / .is-shift für 1,5 s) ─────────── */
.rb-disc.is-upd{animation:rbdBreath 650ms var(--ease-out);}                 /* verfeinert: einmal atmen */
.rb-disc.is-upd.is-shift{animation:rbdSettle 800ms var(--ease-snap);}       /* verschoben: einpendeln  */
.rb-disc.is-upd .rbd-fx::before{animation:rbdSweep 850ms var(--ease-out);}  /* Lichtband, beide Fälle  */
@keyframes rbdBreath{0%{transform:scale(1);}40%{transform:scale(1.045);}100%{transform:scale(1);}}
@keyframes rbdSettle{0%{transform:rotate(0);}25%{transform:rotate(-4deg);}55%{transform:rotate(2.5deg);}80%{transform:rotate(-1deg);}100%{transform:rotate(0);}}
@keyframes rbdSweep{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
/* Button: ein Schatten-Puls nach außen — der Dauer-Glow/Sweep aus thesen15 bleibt darunter */
.rb-cta.is-upd{animation:rbdCtaPulse 900ms var(--ease-out), rbCtaGlow 3.6s ease-in-out infinite, rbCtaSweep 4.6s var(--ease-out) infinite;}
@keyframes rbdCtaPulse{0%{box-shadow:0 0 0 0 rgba(0,0,254,.55);}100%{box-shadow:0 0 0 14px rgba(0,0,254,0);}}

/* ── Statussatz (S5) ──────────────────────────────────────────────── */
/* .rb-panel-Präfix: der Scope-Reset .v6-fx-drift p{margin:0} (0,1,1) schlägt sonst
   die Einzelklasse — deshalb Innenabstand als Padding statt Margin. */
.rb-panel .rb-status{font-family:var(--font-display); font-weight:500; font-size:22.5px; line-height:1.5; letter-spacing:-.012em;
  color:var(--ink); margin:0; padding:12px 18px 14px; text-wrap:balance;}   /* 2026-08-30: +25 % Größe, +15 % ZAB, dickerer Schnitt */
.rb-status__u{position:relative; white-space:nowrap;}
.rb-status__u svg{position:absolute; left:-2px; right:-2px; bottom:-5px; width:calc(100% + 4px); height:9px; pointer-events:none;}
.rb-status__u svg path{fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round;}

/* ── Overlay-Zwischenschritt „Als was verstehst Du Dich?" ─────────── */
.cu-ov-gate{max-width:760px; margin:0 auto; padding:clamp(96px,16vh,160px) clamp(22px,6vw,56px) 80px; text-align:center; color:var(--ov-fg);}
.cu-ov-gate__eyebrow{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ov-eyebrow); margin-bottom:18px;}
.cu-ov-gate__q{font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4.2vw,40px); line-height:1.1; letter-spacing:-.015em; margin:0 0 30px;}
.cu-ov-gate .cu-ov-genus{border-width:1.5px; border-color:var(--ov-fg);}
.cu-ov-gate .cu-ov-genus-opt{font-size:10px; letter-spacing:.12em; padding:9px 17px; color:var(--ov-muted);}   /* ≈65 % des großen Entwurfs */
.cu-ov-gate .cu-ov-genus-opt:hover{color:var(--ov-fg); background:rgba(255,255,255,.08);}
.cu-ov__inner[hidden]{display:none;}

/* ── Reset-Dialog: drei Optionen untereinander ────────────────────── */
.v12-modal__actions--stack{flex-direction:column; align-items:stretch; gap:8px;}
.v12-modal__actions--stack .v12-modal__btn{width:100%; text-align:left;}
.v12-modal__actions--stack .v12-modal__btn--ghost{margin-top:6px; text-align:center;}
.v12-modal__btn small{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:3px;}

/* ── Overlay (nur thesen.html): Kopf prominenter, Visual größer, Fläche leicht transparent ── */
.cu-ov{--ov-scrim:rgba(24,25,34,.93); --ov-dark:linear-gradient(170deg, rgba(36,37,46,.93) 0%, rgba(26,27,34,.93) 100%);}
.cu-ov-eyebrow--title{font-family:var(--font-wide); font-weight:700; font-size:clamp(22px,3.4vw,38px); line-height:1; letter-spacing:-.015em; text-transform:uppercase; margin-bottom:22px;}
.cu-ov-typename{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(24px,4.6vw,56px); line-height:1.02; letter-spacing:-.02em; margin:0 0 22px; color:var(--ov-fg); text-wrap:balance;}
.cu-ov-archgrid--vis{grid-template-columns:minmax(0, clamp(280px, 40vw, 540px)) minmax(0, 1fr);}
@media (max-width:760px){ .cu-ov-montage, .cu-ov-visual{width:min(88vw, 440px);} }

/* ── Drawer (Tablet/Mobile): Scheibe etwas kleiner, Satz kompakter ─── */
@container v6 (max-width:600px){
  .rb-disc{width:168px; height:168px; margin-top:10px;}
  .rb-panel .rb-status{font-size:20px; padding:8px 18px 12px;}
}

@media (prefers-reduced-motion:reduce){
  .rb-disc, .rb-disc .rbd-fx::before, .rbd-band.is-cur, .rb-cta.is-upd{animation:none !important;}
  .rbd-shape, .rbd-band{transition:none !important;}
}