/* Gemeinsamer Rahmen der Labor-Demos von nextweb.design: Kopfleiste (nur im Vollbild), Fuß mit Impressum/Datenschutz, Grundwerte.
   Jede Demo bringt ihre eigene Gestaltung mit; hier steht nur, was alle teilen. Schriften: /assets/fonts/fonts.css (eigener Server). */
@import url("/assets/fonts/fonts.css");
:root { --lab-night: #05050f; --lab-ink: #f6f1ff; --lab-muted: #9d97bd; --lab-line: rgba(255,255,255,.12); --lab-peach: #ffb08a; --lab-sun: #ffc46b; --lab-lilac: #b9a6ff; --lab-mint: #7ff2cf; --lab-gut: clamp(16px, 4vw, 48px); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lab-peach); outline-offset: 3px; }

/* Kopfleiste */
.lab-bar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--lab-gut);
  background: var(--lab-bar-bg, rgba(5,5,15,.72)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--lab-bar-ink, var(--lab-ink)); border-bottom: 1px solid var(--lab-bar-line, var(--lab-line));
  font: 500 14px/1.2 "Space Grotesk", system-ui, sans-serif; }
.lab-bar a { text-decoration: none; }
.lab-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.lab-crumbs .lab-logo { font-weight: 600; font-size: 16px; letter-spacing: -.01em; display: inline-flex; align-items: baseline; }
.lab-crumbs .lab-logo i { display: inline-block; width: .55em; height: .55em; margin: 0 .08em; border-radius: 50%; transform: translateY(.02em);
  background: radial-gradient(circle at 36% 30%, #fff2df, #ffb08a 35%, #c2410c 80%); box-shadow: 0 0 10px rgba(255,160,100,.6); }
.lab-crumbs span { color: var(--lab-bar-muted, var(--lab-muted)); }
.lab-crumbs b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.lab-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lab-actions a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lab-bar-border, rgba(255,255,255,.2)); }
.lab-actions a.lab-primary { background: var(--lab-peach); border-color: var(--lab-peach); color: #0a0a1c; font-weight: 600; }
@media (max-width: 640px) { .lab-crumbs span, .lab-crumbs .lab-sep, .lab-crumbs b { display: none; } .lab-actions a:not(.lab-primary) { display: none; } }
.lab-framed .lab-bar { display: none; }

/* Fuß */
.lab-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 22px var(--lab-gut) 28px; border-top: 1px solid var(--lab-line);
  font: 400 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: var(--lab-muted); background: var(--lab-night); }
.lab-foot a { color: var(--lab-ink); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }