/* ==========================================================================
   Demo sites (W6a): shared frame
   Loaded first on every page under /beispiele/ (includes/beispiele.php); each demo
   brings its own css/beispiele/<key>.css for its identity. This file styles only
   what includes/beispiele.php writes: the skip link, the label banner and the Uhl
   strip with the operator's legal links, plus a minimal reset and the scroll padding that keeps keyboard focus
   clear of the banner.

   The frame stays neutral (ink and white) so it never looks like part of the
   invented business. Its font family has its own name so a demo's @font-face
   rules cannot change it.

   For the demo stylesheets:
   - No overflow other than visible on html or body: it would stop the banner
     from sticking. Where a section must cut something off, use overflow: clip.
   - The demo's own header is not sticky or fixed; only the banner sticks.
   - z-index below 900 (banner 1000, skip link 1001).
   - Do not restyle .bsp-sprung, .bsp-banner or .bsp-uhl.
   ========================================================================== */

@font-face { font-family: 'Bsp Rahmen'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Bsp Rahmen'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Bsp Rahmen'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }

:root {
    --bsp-r-tinte: #0B0E18;      /* banner and strip background */
    --bsp-r-text: #FFFFFF;       /* 19.3:1 on the ink */
    --bsp-r-fokus: #C4B5FD;      /* focus ring on the ink, 10.4:1 */
    --bsp-r-kante: #A78BFA;      /* edge line between frame and demo, decorative */
    --bsp-r-schrift: 'Bsp Rahmen', 'IBM Plex Sans', system-ui, sans-serif;
    /* Banner height, rounded up; used only for the scroll padding, never for layout */
    --bsp-banner-hoehe: 6rem;
}


/* Minimal reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Focus and jump targets land below the sticky banner (WCAG 2.4.11) */
    scroll-padding-top: calc(var(--bsp-banner-hoehe) + 0.75rem);
}

body { margin: 0; }

img, svg { max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }

/* Fallback focus ring in the text colour, so it contrasts with every surface the text does;
   the demos may replace it with their own (at least 2 px, 3:1 against the background) */
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}


/* Skip link ---------------------------------------------------------------- */

.bsp-sprung {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    background: #FFFFFF;
    color: var(--bsp-r-tinte);
    font-family: var(--bsp-r-schrift);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    border-radius: 4px;
    transform: translateY(-200%);
}
.bsp-sprung:focus { transform: none; }
/* The ring sits inside the white skip link (ink on white, 19.3:1), so it never depends on what lies
   around the link: the banner, or a demo's own header below a short banner (the dark blue verein
   header left an outside violet ring at 2.5:1). Inset 6 px stays clear of the text, which starts
   8 px in. */
.bsp-sprung:focus-visible { outline: 3px solid var(--bsp-r-tinte); outline-offset: -6px; }


/* Label banner --------------------------------------------------------------
   Sticky, cannot be dismissed. Sentence left, link right in every width; on
   phones the link breaks into two short lines so the sentence keeps most of
   the width and the banner stays at three to five lines of small text. */

.bsp-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bsp-r-tinte);
    color: var(--bsp-r-text);
    border-bottom: 3px solid var(--bsp-r-kante);
    font-family: var(--bsp-r-schrift);
    font-size: 0.8125rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.bsp-banner__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0.25rem 1rem;
}

.bsp-banner__text {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.bsp-banner__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    max-width: 7.5em;
    margin: 0;
    padding: 0.25rem 0.625rem;
    color: var(--bsp-r-text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-family: var(--bsp-r-schrift);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.bsp-banner__link:hover { background: rgba(255, 255, 255, 0.12); text-decoration-thickness: 2px; }
.bsp-banner__link:focus-visible { outline: 3px solid var(--bsp-r-fokus); outline-offset: 2px; }

/* "uhl-it.at" must not break at its hyphen */
.bsp-ganz { white-space: nowrap; }

@media (min-width: 24em) {
    :root { --bsp-banner-hoehe: 4.75rem; }
}

@media (min-width: 40em) {
    :root { --bsp-banner-hoehe: 4rem; }

    .bsp-banner__innen { column-gap: 1rem; padding-block: 0.375rem; }
    .bsp-banner__link { max-width: none; white-space: nowrap; }
}


/* Uhl strip after the demo's footer ----------------------------------------- */

.bsp-uhl {
    padding: 0.75rem 1rem;
    background: var(--bsp-r-tinte);
    color: var(--bsp-r-text);
    border-top: 3px solid var(--bsp-r-kante);
    font-family: var(--bsp-r-schrift);
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}

/* Sentence and the operator's legal links on one line where they fit, centred; on phones the
   two legal links wrap below the sentence */
.bsp-uhl__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    max-width: 75rem;
    margin: 0 auto;
}

.bsp-uhl__text {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

/* Margin, padding and list style set here, so element rules in a demo stylesheet cannot reach it */
.bsp-uhl__recht {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bsp-uhl__recht li { margin: 0; padding: 0; }

.bsp-uhl__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    color: var(--bsp-r-text);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.bsp-uhl__link:hover { text-decoration-thickness: 2px; }
.bsp-uhl__link:focus-visible { outline: 3px solid var(--bsp-r-fokus); outline-offset: 2px; }


/* Windows contrast themes: keep the frame's edges and the link box visible */
@media (forced-colors: active) {
    .bsp-banner { border-bottom-color: CanvasText; }
    .bsp-uhl { border-top-color: CanvasText; }
    .bsp-banner__link { border-color: LinkText; }
}

/* Print: the label stays on paper, but only once at the top */
@media print {
    .bsp-banner { position: static; }
    .bsp-sprung { display: none; }
}