/* Libretto · Online-Demo: Leiste, Vorschau, Hinweis für kleine Bildschirme · © 2026 theis */
:root{--demoH:40px}
.demoBar{position:sticky;top:0;z-index:40;height:var(--demoH);display:flex;align-items:center;gap:12px;padding:0 16px;font-size:13px;line-height:1.2;color:#fff;background:#2F5BEA;white-space:nowrap}
.demoBar .demoTag{flex:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.2)}
.demoBar .demoTxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.demoBar .demoBtns{flex:none;display:flex;align-items:center;gap:6px}
.demoBar a,.demoBar button{font:inherit;font-weight:600;color:#fff;text-decoration:none;border:0;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;cursor:pointer}
.demoBar a:hover,.demoBar button:hover{background:rgba(255,255,255,.28)}
.demoBar a.demoGo{background:#fff;color:#1F45C4}
.demoBar a.demoGo:hover{background:#eef2ff}
.demoBar a:focus-visible,.demoBar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.toolbar{top:var(--demoH)}
.gate{min-height:calc(100vh - var(--demoH))}
.demoLockHint{margin:14px 0 0}
dialog.demoPrevDlg{width:min(900px,96vw)}
dialog.demoPrevDlg .hint a{color:var(--blue,#0071E3)}
.demoPrev{display:block;width:100%;height:min(68vh,760px);border:.5px solid var(--hairline,#c9cdd5);border-radius:12px;background:#e7e9ee}
/* Kleine Bildschirme: Libretto ist für Computer gedacht (Fensterbreite ab 960 px) */
.demoSmall{display:none}
@media (max-width:899px){
  body:not(.demoForce) .demoSmall{display:grid;position:fixed;inset:var(--demoH) 0 0 0;z-index:35;place-items:center;padding:24px 20px;background:var(--canvas,#EDEEF2);overflow:auto}
  body:not(.demoForce) #appRoot,body:not(.demoForce) #gate{display:none}
  .demoBar .demoTxt{display:none}
  .demoBar{justify-content:space-between}
}
@media (max-width:560px){
  .demoBar{padding:0 10px;gap:8px}
  .demoBar #demoReset,.demoBar a:not(.demoGo){display:none}
}
.demoSmall .card{max-width:420px;text-align:center}
.demoSmall h2{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}
.demoSmall p{margin:0 0 16px;color:var(--label-2,#555)}
.demoSmall .btns{display:flex;flex-direction:column;gap:8px}
.demoSmall a,.demoSmall button{font:inherit;font-weight:600;border-radius:12px;padding:12px 16px;text-decoration:none;border:0;cursor:pointer}
.demoSmall a.pri{background:#2F5BEA;color:#fff}
.demoSmall a.sec,.demoSmall button{background:rgba(120,125,140,.16);color:inherit}
@media (prefers-color-scheme:dark){ .demoPrev{background:#3a3c42} }