/* RAUMRISS · Roadie-Demo · nur das, was die Mac-App um die Oberfläche legt.
   In der App liegt die Seite (html.native) auf echtem Liquid Glass über dem Schreibtisch.
   Hier: Roadies eigener Hintergrund (mac-app/background.swift) als Schreibtisch, Fensterknöpfe oben links, Hinweis „Beispieldaten“. */
html.demo{background:#cdbca8 url(/demo/roady/schreibtisch.jpg) center/cover no-repeat}
@media (prefers-color-scheme:dark){html.demo{background-color:#2a221c;background-image:linear-gradient(rgba(16,12,10,.62),rgba(16,12,10,.62)),url(/demo/roady/schreibtisch.jpg)}}
/* Fensterknöpfe wie bei macOS */
html.demo::before{content:"";position:fixed;left:20px;top:13px;width:12px;height:12px;border-radius:50%;z-index:40;pointer-events:none;
  background:#ff5f57;box-shadow:20px 0 0 #febc2e,40px 0 0 #28c840,inset 0 0 0 .5px rgba(0,0,0,.18)}
/* Hinweis: Demo mit Beispieldaten */
html.demo::after{content:"Demo · Beispieldaten";position:fixed;right:18px;top:9px;z-index:40;pointer-events:none;
  font:600 10.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:.02em;
  padding:5px 10px;border-radius:99px;color:var(--fg);background:var(--card2);border:1px solid var(--edge)}
/* Einstellungsfenster (?settings=…): Platz für die Fensterknöpfe, Hinweis in die Titelzeile */
html.demo.settings #view{padding-top:40px}
html.demo.settings::after{top:8px}
@media (max-width:820px){html.demo::before{display:none}html.demo::after{top:auto;bottom:80px;right:50%;transform:translateX(50%)}}
html.demo.settings::after{top:8px!important;bottom:auto!important;right:14px!important;transform:none!important}