/*!
 * ninetyone Hinweisleiste — Frontend
 * Version: 1.11.1
 */

/* ───── Wrap (hält CSS-Variablen, umschließt Leiste + Nav) ───── */

.n91h-wrap {
    --n91h-bg: #0a0a0a;
    --n91h-text: #ffffff;
    --n91h-accent: #ffffff;
    --n91h-arrow-color: #0a0a0a;
    --n91h-pad-x: 24px;
    --n91h-pad-y: 16px;
    --n91h-margin-y: 0px;
    --n91h-border-w: 0px;
    --n91h-border-c: #000;
    --n91h-radius: 0px;

    box-sizing: border-box;
    width: 100%;
    margin: var(--n91h-margin-y) 0;
}

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

.n91h-wrap.n91h-dismissed {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
}

/* ───── Leiste (visueller Block, sitzt im Wrap) ───── */

.n91h-leiste {
    position: relative;
    padding: var(--n91h-pad-y) var(--n91h-pad-x);
    background: var(--n91h-bg);
    color: var(--n91h-text);
    border: var(--n91h-border-w) solid var(--n91h-border-c);
    border-radius: var(--n91h-radius);
    line-height: 1.45;
    overflow: hidden;
}

/* font-family wird mit !important auf Leiste UND alle Kind-Elemente gesetzt,
   damit Theme-CSS (insb. Divi 5 Variablen-Manager) unsere Wahl nicht überschreibt.
   Wenn keine Schrift konfiguriert ist, wirkt der Fallback "inherit" — die Leiste
   übernimmt dann die Theme-Schrift wie zuvor. */
.n91h-wrap .n91h-leiste,
.n91h-wrap .n91h-leiste * {
    font-family: var(--n91h-font-family, inherit) !important;
}

/* Globale Schriften (Master „Globale Farben, Schriften & Maße übernehmen" → Klasse .n91cs-fonts).
   Zieht die zentralen Suite-Tokens; höhere Spezifität als die Basisregel oben, daher Vorrang.
   Headings nutzen die Heading-Schrift, alles übrige die Body-Schrift. */
.n91h-wrap .n91h-leiste.n91cs-fonts,
.n91h-wrap .n91h-leiste.n91cs-fonts * {
    font-family: var(--n91cs-font-body, inherit) !important;
}
.n91h-wrap .n91h-leiste.n91cs-fonts .n91h-heading {
    font-family: var(--n91cs-font-heading, var(--n91cs-font-body, inherit)) !important;
}

.n91h-leiste.is-dismissible {
    padding-right: calc(var(--n91h-pad-x) + 32px);
}

/* ───── Slides / Slider ───── */

.n91h-track {
    position: relative;
}

.n91h-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}

.n91h-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Wenn nur ein Slide vorhanden ist (statisch): */
.n91h-track:has(> .n91h-slide:only-child) > .n91h-slide,
.n91h-leiste:not([data-slider="1"]) .n91h-slide {
    opacity: 1;
    visibility: visible;
    position: static;
}

.n91h-leiste[data-slider="1"] .n91h-slide {
    position: absolute;
    inset: 0;
}

.n91h-leiste[data-slider="1"] .n91h-slide.is-active {
    position: relative;
}

/* ───── Pfeil-Navigation (außerhalb der Leiste) ───── */

.n91h-nav {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    color: var(--n91h-arrow-color);
}
.n91h-wrap--arrows-left   .n91h-nav { justify-content: flex-start; }
.n91h-wrap--arrows-center .n91h-nav { justify-content: center; }
.n91h-wrap--arrows-right  .n91h-nav { justify-content: flex-end; }

.n91h-nav-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.n91h-nav-btn:hover  { opacity: 1; background-color: rgba(0,0,0,.06); }
.n91h-nav-btn:active { transform: scale(.94); }

/* ───── Dismiss-Button ───── */

.n91h-dismiss {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--n91h-text);
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    opacity: .7;
    transition: opacity .15s ease;
    z-index: 3;
}
.n91h-dismiss:hover { opacity: 1; }

/* ───── Buttons ───── */

.n91h-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--n91h-btn-size, 14px);
    font-weight: var(--n91h-buttons-weight, 600);
    text-transform: var(--n91h-buttons-transform, none);
    font-style: var(--n91h-buttons-fstyle, normal);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
}
.n91h-btn:active { transform: translateY(1px); }

.n91h-btn--normal {
    color: var(--n91h-normal-color);
    background: var(--n91h-normal-bg);
    border: var(--n91h-normal-border-w) solid var(--n91h-normal-border-c);
    border-radius: var(--n91h-normal-radius);
    padding: var(--n91h-normal-pad-v) var(--n91h-normal-pad-h);
}
.n91h-btn--normal:hover {
    color: var(--n91h-normal-color-h);
    background: var(--n91h-normal-bg-h);
    border-color: var(--n91h-normal-border-c-h);
}

.n91h-btn--outline {
    color: var(--n91h-outline-color);
    background: var(--n91h-outline-bg);
    border: var(--n91h-outline-border-w) solid var(--n91h-outline-border-c);
    border-radius: var(--n91h-outline-radius);
    padding: var(--n91h-outline-pad-v) var(--n91h-outline-pad-h);
}
.n91h-btn--outline:hover {
    color: var(--n91h-outline-color-h);
    background: var(--n91h-outline-bg-h);
    border-color: var(--n91h-outline-border-c-h);
}

/* ═════════════════════════════════════════
   GRÖSSE S — Einzeilig
   ═════════════════════════════════════════ */

.n91h-size-s {
    font-size: var(--n91h-text-size, 14px);
}
.n91h-size-s .n91h-text {
    font-weight: var(--n91h-text-weight, 400);
    text-transform: var(--n91h-text-transform, none);
    font-style: var(--n91h-text-fstyle, normal);
}

.n91h-s-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
}

.n91h-s-inner .n91h-text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.n91h-size-s .n91h-link {
    color: var(--n91h-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    font-weight: 600;
}

.n91h-size-s .n91h-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--n91h-accent);
}

.n91h-size-s.n91h-variant-1 .n91h-s-inner { justify-content: center; }
.n91h-size-s.n91h-variant-1 .n91h-s-inner .n91h-text { white-space: normal; text-align: center; }

.n91h-size-s.n91h-variant-2 .n91h-s-inner { justify-content: flex-start; }
.n91h-size-s.n91h-variant-2 .n91h-link {
    margin-left: auto;
    text-decoration: none;
}
.n91h-size-s.n91h-variant-2 .n91h-arrow {
    margin-left: 4px;
    transition: transform .2s ease;
}
.n91h-size-s.n91h-variant-2 .n91h-link:hover .n91h-arrow {
    transform: translateX(3px);
}

.n91h-size-s.n91h-variant-3 .n91h-s-inner { justify-content: flex-start; }
.n91h-size-s.n91h-variant-3 .n91h-text { white-space: normal; }

/* ═════════════════════════════════════════
   GRÖSSE M — Heading + Text + Buttons
   ═════════════════════════════════════════ */

.n91h-size-m .n91h-heading {
    margin: 0 0 4px;
    font-size: var(--n91h-heading-size, 18px);
    font-weight: var(--n91h-heading-weight, 700);
    text-transform: var(--n91h-heading-transform, none);
    font-style: var(--n91h-heading-fstyle, normal);
    line-height: 1.3;
    color: inherit;
}
.n91h-size-m .n91h-heading--s { font-size: var(--n91h-heading-size, 14px); }
.n91h-size-m .n91h-heading--m { font-size: var(--n91h-heading-size, 18px); }
.n91h-size-m .n91h-heading--l { font-size: var(--n91h-heading-size, 24px); }

.n91h-size-m .n91h-text {
    font-size: var(--n91h-text-size, 14px);
    font-weight: var(--n91h-text-weight, 400);
    text-transform: var(--n91h-text-transform, none);
    font-style: var(--n91h-text-fstyle, normal);
    opacity: .92;
}

.n91h-size-m .n91h-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Variante 1: Heading + Text links, CTA rechts */
.n91h-size-m.n91h-variant-1 .n91h-m-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.n91h-size-m.n91h-variant-1 .n91h-content { flex: 1 1 280px; min-width: 0; }

/* Variante 2: Alles zentriert untereinander */
.n91h-size-m.n91h-variant-2 .n91h-m-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.n91h-size-m.n91h-variant-2 .n91h-actions { justify-content: center; }

/* Variante 3: Kompakt — Heading inline mit Text, Button rechts */
.n91h-size-m.n91h-variant-3 .n91h-m-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.n91h-size-m.n91h-variant-3 .n91h-content {
    flex: 1 1 240px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.n91h-size-m.n91h-variant-3 .n91h-heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Variante 3 hat eine eigene, kompaktere Skala für die Heading-Größen */
.n91h-size-m.n91h-variant-3 .n91h-heading.n91h-heading--s { font-size: var(--n91h-heading-size, 12px); }
.n91h-size-m.n91h-variant-3 .n91h-heading.n91h-heading--m { font-size: var(--n91h-heading-size, 15px); }
.n91h-size-m.n91h-variant-3 .n91h-heading.n91h-heading--l { font-size: var(--n91h-heading-size, 20px); }
.n91h-size-m.n91h-variant-3 .n91h-text {
    margin: 0;
    font-size: 14px;
}

/* ═════════════════════════════════════════
   GRÖSSE L — Bild + Heading + Text + Buttons
   ═════════════════════════════════════════ */

.n91h-size-l .n91h-heading {
    margin: 0 0 8px;
    font-size: var(--n91h-heading-size, 22px);
    font-weight: var(--n91h-heading-weight, 700);
    text-transform: var(--n91h-heading-transform, none);
    font-style: var(--n91h-heading-fstyle, normal);
    line-height: 1.25;
    color: inherit;
}
.n91h-size-l .n91h-heading--s { font-size: var(--n91h-heading-size, 18px); }
.n91h-size-l .n91h-heading--m { font-size: var(--n91h-heading-size, 22px); }
.n91h-size-l .n91h-heading--l { font-size: var(--n91h-heading-size, 30px); }

.n91h-size-l .n91h-text {
    font-size: var(--n91h-text-size, 15px);
    font-weight: var(--n91h-text-weight, 400);
    text-transform: var(--n91h-text-transform, none);
    font-style: var(--n91h-text-fstyle, normal);
    margin-bottom: 12px;
    opacity: .92;
}

.n91h-size-l .n91h-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.n91h-size-l .n91h-image {
    background-size: cover;
    background-position: center;
    min-height: 180px;
    overflow: hidden;
}

/* Video-Slot: Video-Element füllt den .n91h-image-Container vollständig */
.n91h-size-l .n91h-image.n91h-media--video {
    background: #000;
}
.n91h-size-l .n91h-image.n91h-media--video > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.n91h-size-l.n91h-variant-3 .n91h-image--bg.n91h-media--video > video {
    position: absolute;
    inset: 0;
}

/* Variante 1: Bild links, Inhalt rechts */
.n91h-size-l.n91h-variant-1 .n91h-l-inner {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    gap: 24px;
    align-items: center;
}
/* TL TR BR BL — außen links folgt der Leiste, rechts (Innenkanten) frei wählbar */
.n91h-size-l.n91h-variant-1 .n91h-image {
    border-radius: var(--n91h-img-outer) var(--n91h-img-inner) var(--n91h-img-inner) var(--n91h-img-outer);
}

/* Variante 2: Bild rechts, Inhalt links */
.n91h-size-l.n91h-variant-2 .n91h-l-inner {
    display: grid;
    grid-template-columns: 2fr minmax(160px, 1fr);
    gap: 24px;
    align-items: center;
}
.n91h-size-l.n91h-variant-2 .n91h-image { order: 2; }
.n91h-size-l.n91h-variant-2 .n91h-content { order: 1; }
/* TL TR BR BL — außen rechts folgt der Leiste, links (Innenkanten) frei wählbar */
.n91h-size-l.n91h-variant-2 .n91h-image {
    border-radius: var(--n91h-img-inner) var(--n91h-img-outer) var(--n91h-img-outer) var(--n91h-img-inner);
}

/* Bild ohne Innenabstand — negative Margins ziehen das Bild aus dem Padding-Bereich
   der Leiste heraus, sodass es bündig an der Außenkante sitzt. Inhalt rechts/links
   bleibt vom Padding unberührt. */
.n91h-wrap.is-image-flush .n91h-size-l.n91h-variant-1 .n91h-image,
.n91h-wrap.is-image-flush .n91h-size-l.n91h-variant-2 .n91h-image {
    align-self: stretch;
    margin-top: calc(-1 * var(--n91h-pad-y));
    margin-bottom: calc(-1 * var(--n91h-pad-y));
    min-height: 0;
}
.n91h-wrap.is-image-flush .n91h-size-l.n91h-variant-1 .n91h-image {
    margin-left: calc(-1 * var(--n91h-pad-x));
}
.n91h-wrap.is-image-flush .n91h-size-l.n91h-variant-2 .n91h-image {
    margin-right: calc(-1 * var(--n91h-pad-x));
}

/* Variante 3: Bild als Hintergrund, Inhalt zentriert mit Overlay */
.n91h-size-l.n91h-variant-3 .n91h-l-inner {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.n91h-size-l.n91h-variant-3 .n91h-image--bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--n91h-img-outer);
    min-height: 0;
}
.n91h-size-l.n91h-variant-3 .n91h-overlay {
    position: absolute;
    inset: 0;
    background: var(--n91h-bg);
    opacity: .55;
    z-index: 1;
    border-radius: var(--n91h-img-outer);
}
.n91h-size-l.n91h-variant-3 .n91h-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
}
.n91h-size-l.n91h-variant-3 .n91h-actions { justify-content: center; }

/* ───── Mobile ───── */

@media (max-width: 640px) {
    .n91h-size-m.n91h-variant-1 .n91h-m-inner,
    .n91h-size-m.n91h-variant-3 .n91h-m-inner {
        align-items: flex-start;
    }
    .n91h-size-l.n91h-variant-1 .n91h-l-inner,
    .n91h-size-l.n91h-variant-2 .n91h-l-inner {
        grid-template-columns: 1fr;
    }
    .n91h-size-l.n91h-variant-2 .n91h-image { order: 0; }
    .n91h-size-l .n91h-image { min-height: 140px; }
    .n91h-size-s .n91h-s-inner .n91h-text { white-space: normal; }
    .n91h-size-s.n91h-variant-2 .n91h-link { margin-left: 0; }
}

/* ─────────────────────────────────────────────
   Position: oben/unten am Viewport fixiert (Sticky-Bar)
   ───────────────────────────────────────────── */
.n91h-wrap.n91h--pos-top,
.n91h-wrap.n91h--pos-bottom {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99990;
    width: 100%;
}
.n91h-wrap.n91h--pos-top    { top: 0; }
.n91h-wrap.n91h--pos-bottom { bottom: 0; }

/* ─────────────────────────────────────────────
   Einblend-Animation (beim Erscheinen) — via JS-Klasse .is-in
   ───────────────────────────────────────────── */
.n91h-wrap.n91h--anim-fade,
.n91h-wrap.n91h--anim-slide-down,
.n91h-wrap.n91h--anim-slide-up {
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.n91h-wrap.n91h--anim-fade:not(.is-in)       { opacity: 0; }
.n91h-wrap.n91h--anim-slide-down:not(.is-in) { opacity: 0; transform: translateY(-100%); }
.n91h-wrap.n91h--anim-slide-up:not(.is-in)   { opacity: 0; transform: translateY(100%); }

/* ─────────────────────────────────────────────
   Slide-Transition fürs Meldungs-Rotieren (Schieben statt Faden)
   ───────────────────────────────────────────── */
.n91h--trans-slide .n91h-leiste[data-slider="1"] .n91h-slide {
    transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
    transform: translateX(24px);
}
.n91h--trans-slide .n91h-leiste[data-slider="1"] .n91h-slide.is-active {
    transform: translateX(0);
}

/* Countdown-Timer (Live, JS-gefüllt) */
.n91h-countdown {
    display: inline-block;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
}
.n91h-countdown.is-ended { opacity: .6; }