/* ════════════════════════════════════════════════════════════════════
   thesen21 — Typen-Visuals V2: Browser-Montage (thesen.html)
   Container/Ebenen für thesen21-montage.js + Einbindung in Panel-Karte
   (quadratischer Crop, Name bleibt Text darunter) und Overlay Stage 1
   (volles 4:5, Typname als HTML-Text im reservierten Raum unten).
   ════════════════════════════════════════════════════════════════════ */

/* ── Montage-Container: Design-Raum 640×800, per transform skaliert ── */
.cu-mt{position:relative; overflow:hidden; background:#f6f5f1;}
.cu-mt--45{aspect-ratio:4/5;}
/* Panel-Mini: quadratischer Crop — zeigt die oberen 640×640 der Bühne
   (unten liegt nur der für den Typnamen reservierte Papier-Raum) */
.cu-mt--sq{aspect-ratio:1/1;}
.cu-mt__stage{
  position:absolute; left:0; top:0; width:640px; height:800px;
  transform-origin:0 0; background-color:#f6f5f1;
  background-size:cover;
}
/* Feines Punktraster wie im Szenen-Template */
.cu-mt__stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:99;
  background-image:radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.cu-mt__layer{position:absolute;}
.cu-mt__slot img{display:block; width:100%; height:auto;}
/* „Schnittkante": weiße Kontur + leichter Schattenwurf (Tool-Look) */
.cu-mt__edge img{filter:
  drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
  drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
  drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
  drop-shadow(2px 2px 3px rgba(0,0,0,.25));}
.cu-mt__mk path, .cu-mt__mk circle{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:5;}

/* ── Typname-Block im Design-Raum (nur Overlay) ── */
.cu-mt__name{position:absolute; left:36px; bottom:34px; max-width:78%; z-index:50;}
.cu-mt__tn{
  font-family:var(--font-sans-breit, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-weight:700; text-transform:uppercase;
  font-size:42px; letter-spacing:-.02em; line-height:1.02; margin:0;
  color:#111;
  -webkit-text-stroke:6px #fff; paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  text-wrap:balance;
}
.cu-mt__poles{margin-top:12px; display:flex; gap:6px; flex-wrap:wrap;}
.cu-mt__pole{
  font-family:"Söhne Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#111;
  border:1.5px solid #111; padding:3px 8px; border-radius:2px; background:#f6f5f1;
}
.cu-mt__pole--hi{background:var(--yellow, #EFF746);}

/* ── Panel-Karte (gelbe Plakette): Mini-Montage statt 1:1-Collage ── */
.rb-typhead .rb-typvisual--mt{
  flex:0 0 auto; width:clamp(104px, 42%, 136px);
  border:1.5px solid var(--ink);
}

/* ── Overlay Stage 1: Montage-Spalte ───────────────────────────────── */
/* nutzt das Grid von .cu-ov-archgrid--vis (thesen20.css); hier nur Extras */
.cu-ov-archgrid--mt{align-items:center;}
.cu-ov-montage{
  width:100%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 90px -30px rgba(0,0,0,.72);
  transform:rotate(-1.2deg);
}
@media (max-width:760px){
  .cu-ov-montage{width:min(78vw, 360px); margin:0 0 24px; transform:rotate(-1deg);}
}
@media (prefers-reduced-motion:reduce){
  .cu-ov-montage{transform:none;}
}