/* =========================================================================
 * shared/demo-banner.css — zentraler Demo-Banner
 *
 * Pro Demo definieren die jeweiligen styles.css drei CSS-Custom-Properties
 * am :root (Beispielwerte siehe Defaults unten):
 *   --demo-banner-bg:     Hintergrund des Banners
 *   --demo-banner-fg:     Textfarbe
 *   --demo-banner-accent: Akzentfarbe (Badge-Hintergrund, Link, Border)
 *
 * Banner-Höhe wird hier definiert und steht den Demos als
 * --demo-banner-h zur Verfügung (für Nav-Offsets etc.).
 * ========================================================================= */

:root {
    /* Fallback-Defaults (falls eine Demo die Properties nicht überschreibt) */
    --demo-banner-bg: #1c1f2a;
    --demo-banner-fg: #f7f8fb;
    --demo-banner-accent: #6c5ce7;
    --demo-banner-h: 46px;
}
@media (max-width: 720px) {
    :root { --demo-banner-h: 64px; }
}

/* Body bekommt Platz für Banner (Höhe). Demos mit fixed-Nav haben
   ihr eigenes body padding-top: var(--nav-h) bereits gesetzt; wir
   addieren den Banner additiv über `var(...)`-Kette, mit 0 als
   Fallback wenn keine Nav-Höhe-Variable existiert (sticky Navs). */
body {
    padding-top: calc(
        var(--demo-banner-h) + var(--nav-h, var(--topbar-h, var(--masthead-h, 0px)))
    ) !important;
}

/* Sticky/Fixed Navs in den Demos werden unter den Banner verschoben,
   damit der Banner sie nicht überdeckt. Beide bleiben oben angeheftet. */
.nav,
header.nav,
.topbar,
.topnav,
.masthead,
.site-header,
header.site-header {
    top: var(--demo-banner-h) !important;
}

/* Sidebar-Navigationen mit voller Viewport-Höhe (z.B. stielglas):
   Höhe um Banner reduzieren und nach unten schieben. */
.sidebar {
    top: var(--demo-banner-h) !important;
    height: calc(100vh - var(--demo-banner-h)) !important;
}

.demo-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
    height: var(--demo-banner-h);
    padding: 0 24px;
    background: var(--demo-banner-bg);
    color: var(--demo-banner-fg);
    border-bottom: 3px solid var(--demo-banner-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
}

.demo-banner__badge {
    background: var(--demo-banner-accent);
    color: var(--demo-banner-bg);
    padding: 4px 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    text-transform: uppercase;
    flex-shrink: 0;
    border-radius: 0;
    font-family: inherit;
}

.demo-banner__text {
    margin: 0;
    flex: 0 1 auto;
}

.demo-banner__text strong {
    color: var(--demo-banner-accent);
    font-weight: 700;
}

.demo-banner__link {
    color: var(--demo-banner-accent);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    white-space: nowrap;
    font-size: 0.84rem;
}
.demo-banner__link:hover { opacity: 0.78; }
.demo-banner__link:focus-visible {
    outline: 2px solid var(--demo-banner-accent);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .demo-banner {
        padding: 0 14px;
        font-size: 0.76rem;
        gap: 10px;
    }
    .demo-banner__badge { padding: 3px 9px; font-size: 0.64rem; }
    .demo-banner__link  { font-size: 0.74rem; }
    .demo-banner__text  { font-size: 0.76rem; }
}