/* ════════════════════════════════════════════════════════════════════
   thesen20 — Aufsatz auf thesen19 (nur thesen2.html)
   A) Status-Zeile + „Profil zurücksetzen" ab „Typ definiert" als dezente
      Fläche UNTER dem Personality-Panel (Desktop-Sidebar; Drawer behält sie innen)
   B) Reaction-Box ohne Kategorie-Schiene (Markup entfernt, s. thesen2.html)
   C) Typen-Visuals: Panel-Karte (klein, quadratisch) + Overlay Stage 1 (groß)
   ════════════════════════════════════════════════════════════════════ */

/* ── A · Sub-Box unter dem Panel ─────────────────────────────────────
   Standard: aus. Sichtbar nur in der Desktop-Sidebar (>1024px) und erst,
   wenn ein Typ feststeht (JS setzt .rb-ready auf .rb-panelwrap). Dann
   verschwinden die Duplikate (Meta-Zeile, Reset) im Panel-Inneren. */
.rb-subpanel{
  display:none;
  margin-top:10px; padding:11px 16px 12px;
  background:var(--paper-pure);
  border:1px solid rgba(10,10,10,.14);
  box-shadow:0 12px 30px -22px rgba(10,10,10,.4);
  text-align:center;
}
.rb-subpanel .rb-meta{padding:0; border-bottom:0;}
.rb-subpanel .rb-reset{margin:7px 0 0; padding:2px 4px;}
@container v6 (min-width:1025px){
  .rb-panelwrap.rb-ready .rb-subpanel{display:block;}
  .rb-panelwrap.rb-ready .rb-panel .rb-meta{display:none;}
  .rb-panelwrap.rb-ready .rb-panel .rb-reset{display:none;}
}

/* ── C · Panel-Karte: Typen-Visual (klein, quadratisch) ──────────────
   Sitzt in der Kopfzeile der gelben Plakette, links; Genus-Selektor
   rückt rechts oben daneben. Ohne Bild (Einzelpol/Manifest fehlt)
   entfällt die Fläche ersatzlos — kein Platzhalter. */
.rb-typhead{align-items:flex-start;}
.rb-typhead .rb-genus{margin-left:auto;}
.rb-typvisual{
  margin:0; flex:0 0 auto;
  width:clamp(96px, 38%, 128px); aspect-ratio:1/1;
}
.rb-typvisual img{
  display:block; width:100%; height:100%; object-fit:cover;
  border:1.5px solid var(--ink);
  background:var(--paper-pure);
}

/* ── C · Overlay Stage 1: Visual neben dem Archetyp-Namen ────────────
   Dunkle Bühne (thesen17). Mit Bild wird der Kopf zweispaltig:
   Collage links (bis ~400px), Name/Du-Zeile/Brücke rechts. Der Name
   bleibt HTML-Text — er steht nicht im Bild. */
.cu-ov-archgrid--vis{
  display:grid;
  grid-template-columns:minmax(0, clamp(200px, 26vw, 400px)) minmax(0, 1fr);
  gap:clamp(22px, 4.5vw, 60px);
  align-items:center;
}
.cu-ov-visual{margin:0; width:100%; aspect-ratio:1/1;}
.cu-ov-visual img{
  display:block; width:100%; height:100%; object-fit:cover;
  background:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 90px -30px rgba(0,0,0,.72);
  transform:rotate(-1.4deg);   /* Collage-Charakter; statisch, kein Filter (WebKit) */
}
/* Neben dem Bild eine Stufe kleiner als die Solo-Bühne (128px) */
.cu-ov-archgrid--vis .cu-ov-arch{font-size:clamp(32px, 6.2vw, 84px);}
.cu-ov-archgrid--vis .cu-ov-arch-desc{max-width:none;}

@media (max-width:760px){
  .cu-ov-archgrid--vis{display:block;}
  .cu-ov-visual{width:min(58vw, 300px); margin:0 0 24px;}
  .cu-ov-visual img{transform:rotate(-1deg);}
}

@media (prefers-reduced-motion:reduce){
  .cu-ov-visual img{transform:none;}
}