/* ninetyone Hero-Slider — Frontend */

.n91hs {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--n91hs-text, #fff);
    isolation: isolate;
}

/* Höhenvarianten */
.n91hs--h-small  { min-height: 480px; }
.n91hs--h-medium { min-height: 620px; }
.n91hs--h-large  { min-height: 760px; }
.n91hs--h-full   { min-height: 100vh; }
.n91hs--h-custom { min-height: var(--n91hs-h, 80vh); }

.n91hs__viewport {
    position: relative;
    width: 100%;
    min-height: inherit;
}

/* Slides */
.n91hs__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    min-height: inherit;
}
.n91hs--fade .n91hs__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}
.n91hs--fade .n91hs__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.n91hs--slide .n91hs__slide {
    transform: translateX(100%);
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.n91hs--slide .n91hs__slide.is-active { transform: translateX(0); z-index: 1; }
.n91hs--slide .n91hs__slide.is-prev   { transform: translateX(-100%); }

/* Erstes Slide ohne JS sichtbar halten */
.n91hs__slide:first-child { position: relative; }

/* ── Center-Mode / Peek: aktive Folie zentriert, Nachbarn angeschnitten ── */
.n91hs--peek .n91hs__viewport { overflow: visible; }
.n91hs--peek .n91hs__track {
    display: flex;
    align-items: stretch;
    gap: var(--n91hs-peek-gap, 20px);
    min-height: inherit;
    /* Symmetrisches Padding → erste/letzte Folie zentrierbar, auch ohne JS schon mittig. */
    padding: 0 calc((100% - var(--n91hs-peek-w, 76%)) / 2);
    transition: transform .65s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.n91hs--peek .n91hs__slide {
    position: relative;
    inset: auto;
    flex: 0 0 var(--n91hs-peek-w, 76%);
    min-height: inherit;
    opacity: 1;
    transform: none;
    visibility: visible;
    border-radius: var(--n91hs-radius, 16px);
    overflow: hidden;
    transition: opacity .5s ease;
}
/* Nachbar-Folien abdunkeln (optional, Schalter „peek_dim") */
.n91hs--peek-dim .n91hs__slide { opacity: .4; }
.n91hs--peek-dim .n91hs__slide.is-active { opacity: 1; }
@media (max-width: 640px) {
    .n91hs--peek .n91hs__slide { flex-basis: 88%; }
    .n91hs--peek .n91hs__track { padding: 0 6%; }
    /* Eigene Höhe: Mobil-Wert (fällt auf den Desktop-Wert zurück, wenn 0). */
    .n91hs--h-custom { min-height: var(--n91hs-h-mobile, var(--n91hs-h, 80vh)); }
}

/* Hintergrund */
.n91hs__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b1f2d; }
.n91hs__img,
.n91hs__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.n91hs__overlay { position: absolute; inset: 0; background: var(--n91hs-overlay, rgba(11,31,45,.45)); }

/* Inhalt */
.n91hs__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px;
    box-sizing: border-box;
    display: flex;
}
.n91hs--pos-left   .n91hs__inner { justify-content: flex-start; }
.n91hs--pos-center .n91hs__inner { justify-content: center; }
.n91hs--pos-right  .n91hs__inner { justify-content: flex-end; }

/* Vertikale Verankerung des Textblocks (mit content_position = 3×3-Raster). */
.n91hs--valign-top    .n91hs__slide { align-items: flex-start; }
.n91hs--valign-middle .n91hs__slide { align-items: center; }
.n91hs--valign-bottom .n91hs__slide { align-items: flex-end; }

/* Optionaler Kennzahl-Block (je Slide, feste Ecke). */
.n91hs__stat {
    position: absolute; z-index: 2;
    max-width: min(260px, 42%);
    display: flex; flex-direction: column; gap: 8px;
    color: var(--n91hs-text, #fff);
}
.n91hs__stat--top-left     { top: 40px; left: 40px; }
.n91hs__stat--top-right    { top: 40px; right: 40px; text-align: right; align-items: flex-end; }
.n91hs__stat--bottom-left  { bottom: 40px; left: 40px; }
.n91hs__stat--bottom-right { bottom: 40px; right: 40px; text-align: right; align-items: flex-end; }
.n91hs__stat-num  { font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.1; }
.n91hs__stat-text { font-size: 15px; line-height: 1.5; opacity: .9; }

.n91hs__content { max-width: var(--n91hs-cw, 620px); }
.n91hs--pos-center .n91hs__content { text-align: center; }

.n91hs__eyebrow {
    display: inline-block;
    font-size: var(--n91hs-esize, 13px);
    font-family: var(--n91hs-eyebrow-font, inherit);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: var(--n91hs-eyebrow-transform, uppercase);
    opacity: .9;
    margin-bottom: 14px;
}
.n91hs__heading {
    font-size: clamp(28px, 4.4vw, 56px);
    line-height: 1.08;
    margin: 0 0 18px;
    font-weight: 700;
    text-transform: var(--n91hs-heading-transform, none);
    color: var(--n91hs-text, #fff);
}
.n91hs__subline {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.55;
    margin: 0 0 28px;
    opacity: .95;
}

/* CTAs */
.n91hs__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.n91hs--pos-center .n91hs__ctas { justify-content: center; }
.n91hs__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
/* Primär = gefüllt (Normal), Ghost = Outline — Optik (Farben/Rahmen/Radius/Padding/Hover)
   kommt aus dem zentralen .n91cs-btn-System. Hero ergänzt nur Schatten + Lift-Effekt. */
.n91hs__cta--primary { box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.n91hs__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.n91hs__cta--ghost:hover { transform: translateY(-2px); }

/* Pfeile */
/* Abgerundete Hero-Fläche */
.n91hs--rounded { border-radius: var(--n91hs-radius, 0); overflow: hidden; }

/* ── Bedien-Buttons (Pfeile + Video) – einheitliche Optik & Größe ── */
.n91hs__ctrlbtn {
    z-index: 3;
    width: var(--n91hs-ctrl-size, 48px);
    height: var(--n91hs-ctrl-size, 48px);
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.n91hs__ctrlbtn svg { transition: transform .15s ease; }

/* Button-Stile (gelten für Pfeil- UND Video-Buttons) */
.n91hs--arr-circle .n91hs__ctrlbtn      { border: 2px solid currentColor; border-radius: 50%; }
.n91hs--arr-circle-fill .n91hs__ctrlbtn { background: rgba(0, 0, 0, .32); border-radius: 50%; backdrop-filter: blur(2px); }
.n91hs--arr-square .n91hs__ctrlbtn      { background: rgba(0, 0, 0, .32); border-radius: 10px; backdrop-filter: blur(2px); }

/* Hover */
.n91hs--arrhover-fill  .n91hs__ctrlbtn:hover { background: rgba(0, 0, 0, .5); }
.n91hs--arrhover-scale .n91hs__ctrlbtn:hover svg { transform: scale(1.28); }
.n91hs--arrhover-nudge .n91hs__nav--prev:hover svg { transform: translateX(-4px); }
.n91hs--arrhover-nudge .n91hs__nav--next:hover svg { transform: translateX(4px); }
.n91hs__vidbtn:hover { background: rgba(0, 0, 0, .5); }

/* Sides-Pfeile: absolut vertikal mittig (außerhalb der Bar) */
.n91hs--arrpos-sides .n91hs__nav-group { display: contents; }
.n91hs--arrpos-sides .n91hs__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.n91hs--arrpos-sides .n91hs__nav--prev { left: 18px; }
.n91hs--arrpos-sides .n91hs__nav--next { right: 18px; }

/* ── Controls-Bar: 3 Zonen (links / mitte / rechts) – nichts überlappt ── */
.n91hs__controls {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    pointer-events: none;
}
.n91hs__czone { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.n91hs__czone--left   { justify-self: start; }
.n91hs__czone--center { justify-self: center; }
.n91hs__czone--right  { justify-self: end; }

/* Video-Button Icon-Umschaltung (play/pause, mute/unmute) */
.n91hs__vidbtn--play .n91hs__ic-play  { display: none; }
.n91hs__vidbtn--play.is-paused .n91hs__ic-pause { display: none; }
.n91hs__vidbtn--play.is-paused .n91hs__ic-play  { display: block; }
.n91hs__vidbtn--mute .n91hs__ic-sound { display: none; }
.n91hs__vidbtn--mute.is-unmuted .n91hs__ic-muted { display: none; }
.n91hs__vidbtn--mute.is-unmuted .n91hs__ic-sound { display: block; }

/* ── Punkte / Striche / Zähler / Fortschritt (in der Bar) ── */
.n91hs__dots { display: flex; gap: 10px; }
.n91hs__dot {
    width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255, 255, 255, .45); cursor: pointer;
    transition: background .15s ease, transform .15s ease, width .15s ease;
}
.n91hs__dot:hover { background: rgba(255, 255, 255, .7); }
.n91hs__dot.is-active { background: #fff; transform: scale(1.25); }
.n91hs--dots-lines .n91hs__dot { width: 24px; height: 4px; border-radius: 2px; }
.n91hs--dots-lines .n91hs__dot.is-active { transform: none; width: 36px; }
.n91hs__counter { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.n91hs__counter-cur { font-size: 18px; }
.n91hs__counter-sep, .n91hs__counter-total { opacity: .65; }
.n91hs__progress { width: min(220px, 30vw); height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.n91hs__progress-bar { display: block; height: 100%; background: #fff; border-radius: 2px; transition: width .45s cubic-bezier(.22,1,.36,1); }

/* ── Punkte/Zahlen seitlich (vertikal, mittig) ── */
.n91hs__sidedots {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    pointer-events: auto;
}
.n91hs--dotspos-left  .n91hs__sidedots { left: 22px; }
.n91hs--dotspos-right .n91hs__sidedots { right: 22px; }
/* Striche stehen seitlich hochkant */
.n91hs--dots-lines .n91hs__sidedots .n91hs__dot { width: 4px; height: 24px; border-radius: 2px; }
.n91hs--dots-lines .n91hs__sidedots .n91hs__dot.is-active { transform: none; width: 4px; height: 36px; }
/* Zahlen-Liste (1 … n von oben nach unten) */
.n91hs__sidedots--num { gap: 9px; }
.n91hs__sidedots--num .n91hs__dot {
    width: auto; height: auto; border-radius: 0; background: none;
    color: rgba(255, 255, 255, .55); font-weight: 700; font-size: 15px; line-height: 1;
    font-variant-numeric: tabular-nums; transition: color .15s ease;
}
.n91hs__sidedots--num .n91hs__dot:hover { background: none; color: rgba(255, 255, 255, .85); }
.n91hs__sidedots--num .n91hs__dot.is-active { background: none; transform: none; color: #fff; }

/* ── „Pille" um die Punkte (seitlich + unten) ── */
.n91hs--dotsbox .n91hs__sidedots { padding: 14px 10px; background: rgba(0, 0, 0, .28); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.n91hs--dotsbox .n91hs__dots { padding: 10px 14px; background: rgba(0, 0, 0, .28); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@media (max-width: 782px) {
    /* Seitliche Punkte klappen unten mittig zurück, damit nichts überlappt. */
    .n91hs__sidedots { top: auto; bottom: 14px; left: 50% !important; right: auto !important; transform: translateX(-50%); flex-direction: row; }
    .n91hs--dots-lines .n91hs__sidedots .n91hs__dot { width: 24px; height: 4px; }
    .n91hs--dots-lines .n91hs__sidedots .n91hs__dot.is-active { width: 36px; height: 4px; }
    .n91hs__inner { padding: 48px 18px; }
    .n91hs--pos-right .n91hs__inner,
    .n91hs--pos-left  .n91hs__inner { justify-content: center; }
    .n91hs__content { text-align: center; }
    /* Kennzahl-Block auf Mobil ausblenden – Ecken-Platzierung würde mit dem
       zentrierten Text überlappen. Der eigentliche Textblock bleibt vollständig. */
    .n91hs__stat { display: none; }
    .n91hs__ctas { justify-content: center; }
    .n91hs__ctrlbtn { width: 40px; height: 40px; }
    .n91hs__controls { padding: 0 12px; bottom: 14px; }
    .n91hs--arrpos-sides .n91hs__nav--prev { left: 8px; }
    .n91hs--arrpos-sides .n91hs__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .n91hs--fade .n91hs__slide,
    .n91hs--slide .n91hs__slide { transition: none; }
}

/* Globale Schriften (nur wenn Master-Schalter aktiv → .n91cs-fonts) */
.n91hs.n91cs-fonts { font-family: var(--n91cs-font-body, inherit); }
.n91hs.n91cs-fonts .n91hs__heading { font-family: var(--n91cs-font-heading, inherit) !important; }
/* Eyebrow darf eine eigene (dritte) Schrift bekommen; sonst wie gehabt die Body-Schrift. */
.n91hs.n91cs-fonts .n91hs__eyebrow { font-family: var(--n91hs-eyebrow-font, var(--n91cs-font-body, inherit)) !important; }

/* Layout-Presets */
/* Split: Overlay bleibt AUS (Panel behält seine Farbe); erst mobil wieder AN (s. u.). */
.n91hs--preset-split .n91hs__overlay { display: none; }
.n91hs--preset-split { background: var(--n91hs-panel, #0b1f2d); }
.n91hs--preset-split .n91hs__inner { max-width: 100%; }
/* Bild-Anteil aus der Einstellung; Panel-Textblock nimmt den Rest. */
.n91hs--preset-split .n91hs__bg { width: var(--n91hs-split-img, 50%); }
.n91hs--preset-split .n91hs__content { max-width: var(--n91hs-split-content, 48%); }
/* Bildseite + Panel-Seite (Textblock sitzt gegenüber dem Bild). */
.n91hs--preset-split.n91hs--split-img-right .n91hs__bg { left: auto; right: 0; }
.n91hs--preset-split.n91hs--split-img-right .n91hs__inner { justify-content: flex-start; }
.n91hs--preset-split.n91hs--split-img-left .n91hs__bg { left: 0; right: auto; }
.n91hs--preset-split.n91hs--split-img-left .n91hs__inner { justify-content: flex-end; }
@media (max-width: 782px) {
    /* Mobil: Bild füllt die Fläche, Panel-Farbe entfällt → Overlay wieder AN für Lesbarkeit. */
    .n91hs--preset-split .n91hs__bg { width: 100%; left: 0; right: 0; }
    .n91hs--preset-split .n91hs__overlay { display: block; }
    .n91hs--preset-split .n91hs__content { max-width: 100%; }
}

/* Preset: centered — großer, mittiger Textblock */
.n91hs--preset-centered .n91hs__inner { justify-content: center; }
.n91hs--preset-centered .n91hs__content { max-width: min(var(--n91hs-cw, 760px), 860px); margin: 0 auto; text-align: center; }
.n91hs--preset-centered .n91hs__ctas { justify-content: center; }
.n91hs--preset-centered .n91hs__heading { font-size: clamp(36px, 5.5vw, 66px); }

/* Preset: boxed — Inhalt in einer farbigen Fläche (Panel-Farbe) */
.n91hs--preset-boxed .n91hs__content {
    background: var(--n91hs-panel, #0b1f2d);
    padding: clamp(24px, 4vw, 40px);
    border-radius: 16px;
}

/* ─────────────────────────────────────────────
   Preset: video — Vollbild-Clip, minimaler mittiger Text
   ───────────────────────────────────────────── */
/* Video-Preset: nur dezente Eyebrow-Sperrung; Position & Größen folgen den Einstellungen. */
.n91hs--preset-video .n91hs__eyebrow { letter-spacing: .18em; }

/* ── Typografie-Größen (Überschrift / Text) ── */
.n91hs--hsize-sm .n91hs__heading { font-size: clamp(22px, 3.2vw, 38px); }
.n91hs--hsize-md .n91hs__heading { font-size: clamp(28px, 4.4vw, 56px); }
.n91hs--hsize-lg .n91hs__heading { font-size: clamp(34px, 5.4vw, 68px); }
.n91hs--hsize-xl .n91hs__heading { font-size: clamp(40px, 6.6vw, 88px); }
.n91hs--tsize-sm .n91hs__subline { font-size: clamp(14px, 1.2vw, 16px); }
.n91hs--tsize-md .n91hs__subline { font-size: clamp(16px, 1.5vw, 20px); }
.n91hs--tsize-lg .n91hs__subline { font-size: clamp(18px, 1.9vw, 24px); }
/* px-Overrides (Feinjustierung) – schlagen die Preset-Klassen; Mobil-Presets schlagen sie zurück. */
.n91hs--hpx .n91hs__heading { font-size: var(--n91hs-hsize) !important; }
.n91hs--tpx .n91hs__subline { font-size: var(--n91hs-tsize) !important; }

/* ── Button-Größe & -Anordnung ── */
.n91hs--bsize-sm .n91hs__cta { font-size: 13px; }
.n91hs--bsize-lg .n91hs__cta { font-size: 17px; }
.n91hs--blayout-stack .n91hs__ctas { flex-direction: column; align-items: flex-start; }
.n91hs--pos-center.n91hs--blayout-stack .n91hs__ctas { align-items: center; }
.n91hs--pos-right.n91hs--blayout-stack .n91hs__ctas { align-items: flex-end; }

/* Ken-Burns-Zoom (nur Bild-Hintergrund) */
@keyframes n91hs-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.n91hs--kenburns .n91hs__img { animation: n91hs-kenburns 14s ease-out both; transform-origin: center; }

/* Scroll-Hinweis */
.n91hs__scrollcue {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 3; color: #fff; opacity: .85;
    animation: n91hs-bounce 1.8s ease-in-out infinite;
}
@keyframes n91hs-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* Scroll-Hinweis aktiv → Controls-Bar rückt hoch, damit nichts überlappt. */
.n91hs--has-cue .n91hs__controls { bottom: 50px; }

/* ───── Mobil-Overrides (≤ 767 px) — Modifier-Klassen greifen nur, wenn im Backend gesetzt ───── */
@media (max-width: 767px) {
    /* Textausrichtung (überschreibt die generische Mobil-Zentrierung oben, wenn gesetzt) */
    .n91hs--m-pos-left   .n91hs__inner { justify-content: flex-start; }
    .n91hs--m-pos-center .n91hs__inner { justify-content: center; }
    .n91hs--m-pos-right  .n91hs__inner { justify-content: flex-end; }
    .n91hs--m-pos-left   .n91hs__content { text-align: left; }
    .n91hs--m-pos-center .n91hs__content { text-align: center; }
    .n91hs--m-pos-right  .n91hs__content { text-align: right; }
    .n91hs--m-pos-center .n91hs__ctas { justify-content: center; }
    .n91hs--m-pos-right  .n91hs__ctas { justify-content: flex-end; }

    /* Überschrift-Größe (mobil) */
    .n91hs--m-hsize-sm .n91hs__heading { font-size: clamp(20px, 6vw, 30px) !important; }
    .n91hs--m-hsize-md .n91hs__heading { font-size: clamp(24px, 7vw, 38px) !important; }
    .n91hs--m-hsize-lg .n91hs__heading { font-size: clamp(28px, 8vw, 46px) !important; }
    .n91hs--m-hsize-xl .n91hs__heading { font-size: clamp(32px, 9vw, 54px) !important; }

    /* Text-Größe (mobil) */
    .n91hs--m-tsize-sm .n91hs__subline { font-size: 14px !important; }
    .n91hs--m-tsize-md .n91hs__subline { font-size: 16px !important; }
    .n91hs--m-tsize-lg .n91hs__subline { font-size: 18px !important; }

    /* Pfeile & Punkte ausblenden (Wischen bleibt möglich) */
    .n91hs--m-nocontrols .n91hs__controls,
    .n91hs--m-nocontrols .n91hs__sidedots,
    .n91hs--m-nocontrols .n91hs__nav { display: none; }
}