/* Nodeium Rahmen-Mockup: Galeriewand, schwarzer Rahmen 270 mm (Leiste ~5 %), schwarzes Passepartout,
   Bildfenster 135 mm = 50 %, Wandtext frei darunter. Von nodeium.art und den Art-Node-Fenstern geteilt. */
.wand { position: relative; aspect-ratio: 1 / 1.02; display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 55% at 50% 18%, #2A2A26 0%, #1A1A17 45%, #121310 100%); }
.wand::before { content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wand-lab { position: absolute; left: 24px; bottom: 16px; font: 11px var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.wand-lab.r { left: auto; right: 24px; }
.rahmen { --w: min(70%, 460px); width: var(--w); aspect-ratio: 1; position: relative; padding: calc(var(--w) * .05); margin-top: -13%;
  background: linear-gradient(145deg, #222 0%, #141414 38%, #0B0B0B 100%); border-radius: 1px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(0, 0, 0, .95), inset 0 0 0 3px rgba(0, 0, 0, .35),
    0 42px 70px rgba(0, 0, 0, .66), 0 14px 26px rgba(0, 0, 0, .5), 0 0 0 1px #040404; }
.rahmen::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6  0 0 0 0 .6  0 0 0 0 .6  0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); }
.rahmen::after { content: ''; position: absolute; inset: calc(var(--w) * .05 - 4px); pointer-events: none;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .85), inset -1px -1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 255, 255, .04); }
.pp { width: 100%; height: 100%; background: #0F0F0F; padding: 21.3%; position: relative;
  box-shadow: inset 0 10px 16px -4px rgba(0, 0, 0, .85), inset 8px 0 14px -6px rgba(0, 0, 0, .7), inset 0 0 0 1px #000; }
.pp::before { content: ''; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.bevel { width: 100%; height: 100%; padding: 1.6%; position: relative;
  background: linear-gradient(135deg, #3A3A3A 0%, #262626 30%, #151515 70%, #0B0B0B 100%); }
.fenster { width: 100%; height: 100%; position: relative; background: #000; overflow: hidden; box-shadow: inset 0 0 0 1px #000; }
.fenster .werk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.fenster .werk.an { opacity: 1; }
.glas { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(128deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 32%, transparent 44%, transparent 72%, rgba(255, 255, 255, .025) 100%); }
.schild { position: absolute; left: 12%; right: 12%; bottom: 8%; display: grid; gap: 4px; justify-items: center; text-align: center; }
.schild b { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.schild span { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 520px) { .wand-lab.r { display: none; } .rahmen { --w: 62%; margin-top: -16%; } }