/* Gemeinsame Basis aller Demo-Websites */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: "Geist", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Hinweis-Leiste: macht klar, dass es ein fiktiver Beispielbetrieb ist */
.demo-bar { position: fixed; left: 16px; bottom: 16px; z-index: 1000; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(8, 9, 12, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #eef0f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px rgba(0, 0, 0, .35); font-family: "Geist", system-ui, sans-serif; font-size: 13px; }
.demo-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; background: #fff; color: #0b0c10; font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform .25s, box-shadow .25s; }
.demo-back:hover { transform: translateX(-2px); box-shadow: 0 6px 18px rgba(255, 255, 255, .18); }
.demo-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-note { display: flex; align-items: center; gap: 8px; color: rgba(238, 240, 242, .78); white-space: nowrap; }
.demo-note i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #3ff5e6, #9b5cff, #ff3fb4); }
@media (max-width: 560px) { .demo-bar { left: 12px; bottom: 12px; padding: 5px; } .demo-note { display: none; } }
.framed .demo-bar { display: none; }

/* Bild-Großansicht */
.lightbox { position: fixed; inset: 0; z-index: 1002; display: grid; place-items: center; padding: 4vw; background: rgba(10, 8, 6, .9); opacity: 0; transition: opacity .4s; cursor: zoom-out; }
.lightbox.open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 14px; transform: scale(.96); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.lightbox.open img { transform: none; }
.demo-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1001; padding: 12px 18px; border-radius: 12px; background: #061214; color: #f3f2ee; font-size: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); transform: translate(-50%, 140%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.demo-toast.show { transform: translate(-50%, 0); }
.demo-toast:not(.show) { visibility: hidden; transition: transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s .5s; }

/* Sanftes Einblenden */
.js [data-in] { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.js [data-in].in { opacity: 1; transform: none; }
.framed [data-in] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-in] { opacity: 1; transform: none; }
}