/* ============================================================
   ELANUM Gerätevorschau · Darstellung
   Rahmen für die App-Screens im Atlas und in der Übersicht.
   Nicht Teil des Pakets.
   ============================================================ */
.vorschau{container-type:inline-size;display:grid;gap:20px;min-width:0}
/* Eine Zeile wie im Atlas: Screens als Segmentleiste, rechts die Ansicht.
   Zwischen den Kosmen nur etwas mehr Abstand, keine Linie. */
.vorschau__bar{display:grid;gap:12px;justify-items:start;min-width:0}
.vorschau__screens{justify-self:start;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vorschau__screens::-webkit-scrollbar{display:none}
.vorschau__screens button{flex:none;white-space:nowrap}
.vorschau__gap{flex:none;width:10px}
.vorschau__mode{flex-wrap:nowrap}
.vorschau__mode button{white-space:nowrap}
@container (min-width:760px){.vorschau__bar{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.vorschau__hint{display:grid;gap:2px;min-height:44px;align-content:center;font:var(--type-label);color:var(--ink-2)}
.vorschau__hint span:first-child{color:var(--ink)}
.vorschau__hint strong{color:var(--ink);font-weight:600}

.vorschau__width{display:grid;gap:12px;max-width:640px}
.vorschau__width-head{display:flex;justify-content:space-between;gap:12px;font:var(--type-label);font-weight:600}
.vorschau__width output{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vorschau__width input[type=range]{color:var(--ink)}
.vorschau__width input[type=range]::-webkit-slider-runnable-track{background:var(--ink-2)}
.vorschau__width input[type=range]::-webkit-slider-thumb{border-color:var(--canvas)}
.vorschau__width input[type=range]::-moz-range-track{background:var(--ink-2)}
.vorschau__width input[type=range]::-moz-range-thumb{border-color:var(--canvas)}
.vorschau__presets{display:flex;flex-wrap:wrap;gap:6px}
.vorschau__presets button{min-height:44px;padding:0 12px;border:0;border-radius:var(--radius-control);background:transparent;font:var(--type-label);color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.vorschau__presets button:hover{background:var(--paper);color:var(--ink)}}

.vorschau__stage{display:grid;gap:40px;justify-items:center;align-items:start;min-width:0}
.vorschau__stage.is-side{grid-template-columns:auto auto;justify-content:center;align-items:end;column-gap:48px}
.device{display:grid;gap:14px;justify-items:center;margin:0;min-width:0}
.device__frame{position:relative;overflow:hidden;background:var(--canvas)}
.device__frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:var(--canvas)}
.device--phone .device__frame,.device--free .device__frame{border-radius:34px;box-shadow:0 0 0 8px #FAF6ED,0 0 0 9px var(--line),16px 20px 40px -14px #A39B8AA6,-10px -10px 28px #FFFFFFB3}
.device--desktop .device__frame{border-radius:16px;box-shadow:0 0 0 1px var(--line),0 0 0 7px #FAF6ED,0 0 0 8px var(--line),16px 22px 44px -18px #A39B8AA6,-10px -10px 28px #FFFFFFB3}
.device figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;font:var(--type-label);color:var(--ink-2);text-align:center}
.vorschau__open{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--radius-control);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){.vorschau__open:hover{background:var(--paper);color:var(--sterne-tief)}}