/* Hinweisleiste und Steuerung, nur wenn eine Demo direkt aufgerufen wird (siehe kontext.js).
   Ohne JavaScript blendet ohne-js.css die Leiste ein. */
.demo-kontext{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;padding:10px 16px;background:#fff;border-top:1px solid #E1E8ED;font:14px/1.5 'DM Sans',system-ui,sans-serif;color:#22292F;text-align:center}
.demo-kontext a{display:inline-block;margin-left:14px;color:#3D5F7A;text-decoration:underline;text-underline-offset:3px}
/* Funktionsdemos direkt aufgerufen: Titel und Abspielsteuerung wieder zeigen, Platz für die Leiste lassen */
html.demo-direkt:has(.page),.demo-direkt body:has(.page){height:auto;overflow:auto}
.demo-direkt .page{max-width:820px;margin:0 auto;padding:28px 16px 96px;gap:16px}
.demo-direkt .page>div:first-child{display:block}
.demo-direkt .ctrl{display:flex}
.demo-direkt #viewport{border-radius:clamp(12px,2.4vw,24px);box-shadow:0 18px 50px rgba(34,56,75,.12),0 0 0 1px var(--line)}
/* Vorher/Nachher direkt aufgerufen: eigener Knopf zum Anhalten der Schleife */
.loop-btn{position:fixed;top:12px;right:12px;z-index:60;padding:8px 14px;border:1px solid #E1E8ED;border-radius:999px;background:#fff;color:#3D5F7A;font:600 14px/1.2 'DM Sans',system-ui,sans-serif;cursor:pointer}
.loop-btn:focus-visible{outline:2px solid #3D5F7A;outline-offset:2px}
/* Dekorativer Hintergrund: Leiste ohne JavaScript nicht einblenden, eingebettet ist er nicht bedienbar */
.demo-deko .demo-kontext[hidden]{display:none}