/* Handy-Vorschau 1:1: eigene, schlichte Seite ausserhalb der App (deshalb eigene Farben statt Theme-Variablen). */
:root{color-scheme:dark;font-family:'Schibsted Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif}
html,body{height:100%;margin:0}
body{display:grid;grid-template-columns:minmax(260px,320px) 1fr;background:#0e0a08;color:#fbf5ee}
.preview-panel{display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-right:1px solid rgba(255,236,214,.16);overflow-y:auto;box-sizing:border-box}
.preview-panel h1{margin:0;font-size:1.25rem}
.preview-lead,.preview-note{margin:0;font-size:13px;line-height:1.5;color:#c9b8a8}
.preview-field{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#c9b8a8}
.preview-field select,.preview-field input{padding:9px 10px;border:1px solid rgba(255,236,214,.22);border-radius:10px;background:#1c140f;color:#fbf5ee;font:inherit;font-size:14px;letter-spacing:0;text-transform:none}
.preview-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preview-buttons{display:flex;flex-wrap:wrap;gap:8px}
.preview-buttons button{padding:9px 13px;border:1px solid rgba(255,236,214,.22);border-radius:999px;background:#1c140f;color:#fbf5ee;font:inherit;font-size:13px;cursor:pointer}
.preview-buttons button[aria-pressed="true"]{border-color:#ffa45c;background:#3a2414}
.preview-scale{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px;border:1px solid rgba(255,236,214,.16);border-radius:12px;font-size:13px}
.preview-scale legend{padding:0 6px;font-size:12px;color:#c9b8a8}
.preview-info{margin:0;padding:9px 12px;border-radius:10px;background:#1c140f;font-size:13px;font-weight:600;color:#ffa45c}
.preview-panel a{color:#ffa45c}
.preview-stage{display:grid;place-items:center;overflow:auto;background:radial-gradient(80% 70% at 50% 40%,#1d1510,#0a0706)}
.preview-stage[data-scale="real"]{place-items:start center;padding:24px 0}
.preview-phone{flex:none;box-sizing:border-box;padding:14px;border-radius:34px;background:#050403;box-shadow:0 0 0 2px #3a2c22,0 30px 60px rgba(0,0,0,.6);transform-origin:center center}
.preview-stage[data-scale="real"] .preview-phone{transform-origin:top center}
.preview-phone iframe{display:block;border:0;border-radius:20px;background:#0e0a08}
@media (max-width:760px){body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.preview-panel{border-right:0;border-bottom:1px solid rgba(255,236,214,.16)}}