/* ==========================================================================
   Bildflächen, Projektkarten und Abschnittsköpfe: gemeinsame Bauteile der
   Gestaltung «Glanz» (seit 01.11.2026). Gebraucht auf der Startseite, der
   Projektübersicht und den Projektseiten. Farben aus rahmen.css, Verhalten
   in monitor.js.

   Die Klassennamen stammen aus der verworfenen Fassung «Regie» (.mon, .platz,
   .wand, .klappe). Sie bleiben, weil Generator und Skripte sie nutzen; die
   Regie-Teile (Tally-Rahmen, Beschriftungsbalken, Pegel) sind ausgeblendet.
   ========================================================================== */

/* ---------- Bildfläche ---------- */
.mon{position:relative;display:block;aspect-ratio:16/10;background:var(--bg3);overflow:hidden;text-decoration:none;
     border-radius:calc(var(--rund) - 6px);color:#fff;isolation:isolate}
.mon img,.mon video,.mon > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
     transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.mon::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;z-index:2}
.mon .tally,.mon .meter{display:none}
/* Kennung als Glas-Chip oben links (nur auf grossen Flächen sichtbar) */
.mon .umd-zeile{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);
     padding:6px 12px 6px 10px;border-radius:999px;background:rgba(12,14,20,.42);backdrop-filter:blur(14px) saturate(160%);
     -webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.16);
     font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1.2;color:#fff}
.mon .umd-zeile > span:first-child{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon .umd-zeile .kanal{display:none}
.mon .umd-zeile .punkt{width:6px;height:6px;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.mon .chip{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;background:rgba(12,14,20,.5);color:#fff;
     padding:5px 10px;border-radius:999px;backdrop-filter:blur(10px)}
.mon .testbild{position:absolute;inset:0;width:100%;height:100%}
.mon .hover-video{opacity:0}
.mon .hover-video.an{opacity:1}
.mon.gross{aspect-ratio:16/10;border-radius:var(--rund)}

/* ---------- Projektkarten (Wand) ---------- */
.wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(14px,1.6vw,22px)}
.platz{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--bg2);text-decoration:none;color:var(--ink);
       min-width:0;border-radius:var(--rund);border:1px solid var(--line);box-shadow:var(--schatten);
       transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.platz::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--verlauf);opacity:0;
       -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
       transition:opacity .4s var(--ease);pointer-events:none}
.platz:hover,.platz:focus-visible{transform:translateY(-4px);box-shadow:var(--schatten-gross)}
.platz:hover::before,.platz:focus-visible::before{opacity:1}
.platz .mon .umd-zeile{display:none}
.platz:hover .mon img,.platz:focus-visible .mon img{transform:scale(1.045)}
.platz .txt{display:flex;flex-direction:column;gap:7px;padding:14px 12px 12px;flex:1}
.platz .titel{font-size:19px;letter-spacing:-.025em;font-weight:600;line-height:1.22}
.platz .satz{font-size:14.5px;line-height:1.55;color:var(--mut)}
.platz .fakt{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
       background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent-ink);font-size:12.5px;font-weight:500;letter-spacing:0}
.platz .fakt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verlauf);flex:none}
.platz .satz + .fakt{margin-top:auto}
.gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:6px 18px;margin:0 0 18px;flex-wrap:wrap}
.gruppe-kopf h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.03em;font-weight:600}
.gruppe-kopf p{font-size:15px;color:var(--soft);max-width:44em}
.wand + .gruppe-kopf{margin-top:clamp(44px,5vw,72px)}

/* ---------- Abschnittskopf ---------- */
.klappe{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr nr" "h rechts";align-items:end;
        gap:14px 24px;margin-bottom:clamp(18px,2.4vw,28px)}
.klappe .nr{grid-area:nr;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;
        border:1px solid var(--line);background:var(--glas);font-size:12.5px;font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
.klappe .nr::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--verlauf)}
.klappe h2{grid-area:h;font-size:clamp(34px,4.8vw,68px);line-height:1;letter-spacing:-.05em;font-weight:600;margin:0;text-wrap:balance}
.klappe .rechts{grid-area:rechts;font-size:14px;color:var(--soft);padding-bottom:8px;white-space:nowrap}
@media (max-width:760px){.klappe{grid-template-columns:1fr;grid-template-areas:"nr" "h"}.klappe .rechts{display:none}}

/* ---------- Schaltbild ---------- */
.schaltbild{display:block;width:100%;height:auto}
.schaltbild .fluss{stroke-dasharray:4 8;animation:fluss 1.6s linear infinite}
@keyframes fluss{to{stroke-dashoffset:-24}}

@media (prefers-reduced-motion:reduce){
  .mon img,.mon video,.mon > svg,.platz,.platz::before{transition:none}
  .platz:hover{transform:none}
  .schaltbild .fluss{animation:none}
}