/* QN Super Slider – Basis-Styles (markenneutral).
   Akzentfarbe im Sitepackage überschreibbar:  .qnss{ --qnss-accent:#7AB51D; }
   Navigation nutzt bewusst eigene Klassen (.qnss__nav) statt .swiper-button-*,
   damit Swipers Bundle-CSS und Fremd-Extensions keine zweiten Pfeile einblenden. */
.qnss{
    --qnss-accent:#2f6f3e;
    --qnss-accent-ink:#ffffff;
    --qnss-card-bg:#ffffff;
    --qnss-text:#1f2729;
    --qnss-muted:#6b7679;
    --qnss-radius:16px;
    --qnss-frame-radius:22px;
    --qnss-padh:0px;
    --qnss-padv:0px;
    --qnss-nav-size:36px;
    --qnss-nav-gap:14px;
    --qnss-shadow:0 10px 30px rgba(31,39,41,.12);
    position:relative;
    padding:var(--qnss-padv) var(--qnss-padh);
    border-radius:var(--qnss-frame-radius);
}

/* Pfeile "aussen": links/rechts (bzw. oben/unten) genug Platz freihalten,
   damit die Buttons neben den Karten stehen und nichts ueberdecken.
   HINWEIS: Bei "Volle Fensterbreite" gibt es seitlich keinen Rahmenbereich mehr -
   dort schaltet das Template automatisch auf "innen" (siehe SuperSlider.html, navPos). */
.qnss--nav-outside.qnss--dir-horizontal{
    padding-left:max(var(--qnss-padh), calc(var(--qnss-nav-size) + var(--qnss-nav-gap)));
    padding-right:max(var(--qnss-padh), calc(var(--qnss-nav-size) + var(--qnss-nav-gap)));
}
.qnss--nav-outside.qnss--dir-vertical{
    padding-top:max(var(--qnss-padv), calc(var(--qnss-nav-size) + var(--qnss-nav-gap)));
    padding-bottom:max(var(--qnss-padv), calc(var(--qnss-nav-size) + var(--qnss-nav-gap)));
}
/* Pagination "aussen": waagerecht unter den Karten, senkrecht rechts daneben.
   Nur die jeweils passende Kante bekommt Platz - so kollidiert es nie mit den
   Pfeil-Regeln oben (horizontal reserviert links/rechts, vertikal oben/unten). */
.qnss--pag-outside.qnss--dir-horizontal{
    padding-bottom:max(var(--qnss-padv), 30px);
}
.qnss--pag-outside.qnss--dir-vertical{
    padding-right:max(var(--qnss-padh), 28px);
}
.qnss *{box-sizing:border-box}
.qnss__swiper{width:100%;padding:6px 4px 8px;position:relative}
/* Senkrechter Slider: die Hoehe setzt das JS als --qnss-vh (gemessen aus der
   hoechsten Karte) oder das Template (fester Redakteurs-Wert). Der Deckel bei
   85vh verhindert, dass ein grosser Pixelwert den Bildschirm sprengt. */
.qnss__swiper.qnss--vertical{height:min(var(--qnss-vh, 560px), 85vh)}
.qnss .swiper-slide{height:auto}

/* ---------------------------------------------------------------
   LIQUID statt ADAPTIVE
   Die Slide-Breite waechst stufenlos mit dem Container, statt an
   Bootstrap-Breakpoints zu springen. Swiper zaehlt per slidesPerView:'auto'
   selbst mit. --qnss-n = gewuenschte Anzahl, --qnss-card-min = Mindestbreite,
   --qnss-gap = aktueller Abstand (beides setzt das JS).
   Einziger echter Umbruch: unter 768 px genau eine ganze Karte.
   --------------------------------------------------------------- */
.qnss__swiper[data-liquid="1"] .swiper-slide{
    width:min(100%, max(
        var(--qnss-card-min, 340px),
        calc((100% - (var(--qnss-n, 1) - 1) * var(--qnss-gap, 24px)) / var(--qnss-n, 1))
    ));
}
@media(max-width:767.98px){
    .qnss__swiper[data-liquid="1"] .swiper-slide{width:100%}
}
/* Senkrecht gibt es keine Liquid-Breite: dort teilt Swiper die Container-HOEHE
   auf "Sichtbare Slides" auf und setzt die Hoehe je Slide selbst. Ohne diese
   Regel bliebe die Breitenrechnung von oben aktiv und die Karten waeren schmal. */
.qnss__swiper.qnss--vertical[data-liquid="1"] .swiper-slide{width:100%}

/* ---------------------------------------------------------------
   Breite des Sliders im Seitenlayout - in drei Geraetestufen.

   "wide" und "full" brechen fliessend aus dem Bootstrap-Container aus
   (.frame-container-default hat feste max-width-Stufen je Breakpoint).

   Die Grundregeln ohne Zusatz gelten UEBERALL - sie sind der Wert vom
   Schreibtisch und zugleich der Rueckfall. Die beiden Media-Bloecke
   darunter ueberschreiben ihn nur dort, wo im Backend bewusst eine
   Ausnahme gesetzt wurde (dann steht zusaetzlich -t- bzw. -m- in der
   Klasse). Gleiche Spezifitaet, also entscheidet die Reihenfolge:
   die Media-Bloecke muessen NACH den Grundregeln stehen.
   --------------------------------------------------------------- */
.qnss--width-container{width:auto;margin-inline:0}
.qnss--width-wide,
.qnss--width-full{width:auto}
.qnss--width-wide{margin-inline:calc(50% - 45vw)}
.qnss--width-full{margin-inline:calc(50% - 50vw)}

/* Tablet: 768 bis 1199,98 px */
@media(min-width:768px) and (max-width:1199.98px){
    .qnss--width-t-container{width:auto;margin-inline:0}
    .qnss--width-t-wide{width:auto;margin-inline:calc(50% - 45vw)}
    .qnss--width-t-full{width:auto;margin-inline:calc(50% - 50vw)}
}
/* Handy: bis 767,98 px */
@media(max-width:767.98px){
    .qnss--width-m-container{width:auto;margin-inline:0}
    .qnss--width-m-wide{width:auto;margin-inline:calc(50% - 45vw)}
    .qnss--width-m-full{width:auto;margin-inline:calc(50% - 50vw)}
}

/* Verhindert waagerechtes Scrollen durch die Scrollbar-Breite in vw.
   Bewusst OHNE Media Query: die Regel schadet nicht, wenn die Stufe gerade
   nicht aktiv ist - overflow-x:clip greift nur bei tatsaechlicher
   Ueberbreite. Ein :has() in drei Media-Bloecke zu wiederholen waere
   teurer als der eine harmlose Fall. */
.frame:has(.qnss--width-wide),
.frame:has(.qnss--width-full),
.frame:has(.qnss--width-t-wide),
.frame:has(.qnss--width-t-full),
.frame:has(.qnss--width-m-wide),
.frame:has(.qnss--width-m-full){overflow-x:clip}

/* Coverflow arbeitet mit slidesPerView:auto -> Slide-Breite kommt aus dem JS (--qnss-cf-w) */
.qnss__swiper[data-effect="coverflow"] .swiper-slide{width:var(--qnss-cf-w,60%);max-width:520px;min-width:220px}

/* ---------------------------------------------------------------
   Endlos-Fluss / Lauftext-Band als CSS-Marquee (ohne Swiper)
   Laeuft im Compositor: ruckelfrei, kein JS-Timer, Pause per :hover.
   --qnss-mq-size / --qnss-mq-shift / --qnss-mq-dur setzt das JS.
   --------------------------------------------------------------- */
.qnss--marquee{overflow:hidden;cursor:default}

/* Ziehen mit der Maus / dem Finger.
   touch-action gibt die Achse des Bandes an uns ab und laesst die andere beim
   Browser - so scrollt die Seite auf dem Handy weiter ganz normal weiter. */
.qnss--marquee.qnss--grab{cursor:grab;touch-action:pan-y}
.qnss--marquee-v.qnss--grab{touch-action:pan-x}
/* touch-action:none WAEHREND des Ziehens.
   Im Ruhezustand steht oben pan-y - die Seite soll senkrecht scrollbar
   bleiben. Sobald aber wirklich gezogen wird, muss der Browser die Geste
   vollstaendig abgeben: Chrome auf Android entscheidet noch mitten in der
   Bewegung neu, ob er sie selbst als Scroll verwertet, und schickt dann
   pointercancel - der Zug brach genau dort ab. Mit none waehrend des
   Ziehens gibt es nichts mehr zu entscheiden. */
.qnss--marquee.qnss--grab.qnss--dragging{cursor:grabbing;user-select:none;touch-action:none}
.qnss--marquee .swiper-wrapper{
    display:flex;flex-wrap:nowrap;width:max-content;
    /* ACHTUNG: hier niemals "transform: ... !important" setzen -
       !important schlaegt CSS-Keyframes, die Animation steht dann still. */
    transition:none;
}
/* Animation erst, wenn das JS Strecke und Dauer gemessen hat -
   schlaegt die Messung fehl, bleibt der Slider wenigstens statisch lesbar. */
.qnss--marquee.qnss--mq-ready .swiper-wrapper{
    animation:qnss-mq var(--qnss-mq-dur,30s) linear infinite;
    /* will-change steht bewusst HIER und nicht auf der Grundregel darueber:
       nach dem Klonen ist das Band ein Mehrfaches der Fensterbreite breit.
       Dauerhaft gesetzt haelt der Browser dafuer die ganze Zeit eine
       Compositor-Ebene in voller Bandbreite vor - Speicher, den ein Slider
       weiter unten auf der Seite ohne jeden Nutzen belegt. So entsteht die
       Ebene erst, wenn wirklich etwas laeuft. */
    will-change:transform;
}
.qnss--marquee .swiper-slide{flex:0 0 auto;width:var(--qnss-mq-size,auto);height:auto}
/* Pause beim Ueberfahren - NUR auf Geraeten mit echtem Zeiger.
   Auf dem Handy gibt es kein "wieder verlassen": Chrome und Safari halten
   den :hover-Zustand nach dem Antippen fest. Das Band blieb dadurch beim
   ersten Beruehren stehen und wirkte kaputt - und weil es stand, sah es
   aus, als reagiere die Ziehgeste nicht.
   focus-within bleibt fuer alle Geraete: das ist der Tastaturweg und
   loest sich beim Weitertabben von selbst wieder. */
@media (hover: hover) and (pointer: fine){
    .qnss--marquee.qnss--mq-pause:hover .swiper-wrapper{animation-play-state:paused}
}
.qnss--marquee.qnss--mq-pause:focus-within .swiper-wrapper{animation-play-state:paused}
@keyframes qnss-mq{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-1 * var(--qnss-mq-shift,0px)),0,0)}
}

/* Vertikale Variante */
.qnss--marquee-v .swiper-wrapper{flex-direction:column;width:100%;height:max-content}
.qnss--marquee-v.qnss--mq-ready .swiper-wrapper{animation-name:qnss-mq-v}
.qnss--marquee-v .swiper-slide{width:100%;height:auto}
@keyframes qnss-mq-v{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(0,calc(-1 * var(--qnss-mq-shift,0px)),0)}
}

/* Bewegung reduzieren (WCAG 2.2.2 "Pause, Stoppen, Ausblenden").
   Ein endlos laufendes Band ist genau die Art Bewegung, die dort gemeint ist:
   automatisch, laenger als fuenf Sekunden, parallel zu anderem Inhalt.

   Bewusst NUR die Animation abschalten, nicht das Klonen im JS: die Klone
   bleiben im DOM, das Band bleibt also ziehbar und der ganze Inhalt
   erreichbar. Wer Bewegung abgeschaltet hat, bekommt ein stehendes Band,
   das er selbst bewegen kann - nicht einen abgeschnittenen Rest.

   STELLUNG: vor .qnss--dragging (gleiche Spezifitaet, Reihenfolge entscheidet). */
@media (prefers-reduced-motion: reduce){
    .qnss--marquee.qnss--mq-ready .swiper-wrapper{animation:none}
}

/* Waehrend des Ziehens muss die Animation WIRKLICH aus sein, nicht nur pausiert:
   eine laufende CSS-Animation schlaegt jeden Inline-transform (Animationen stehen in
   einer hoeheren Kaskaden-Stufe als der Author-Origin) - das Band liesse sich sonst
   keinen Pixel bewegen. Nebeneffekt, den wir brauchen: beim Entfernen der Klasse
   startet die Animation neu und liest dabei das negative animation-delay.
   STELLUNG BEACHTEN: Diese Regel muss NACH allen animation-Regeln des Marquee stehen
   (auch nach der vertikalen Variante, die animation-name setzt) - gleiche Spezifitaet,
   also entscheidet die Reihenfolge. Weiter oben eingehaengt wirkt sie nur waagerecht. */
.qnss--marquee.qnss--dragging .swiper-wrapper{animation:none}

/* Card */
.qnss__card{background:var(--qnss-card-bg);border-radius:var(--qnss-radius);overflow:hidden;box-shadow:var(--qnss-shadow);height:100%;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease}
.qnss__card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(31,39,41,.2)}
.qnss__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e3e6e6}
/* -webkit-user-drag unterdrueckt zusaetzlich das kurze "Geisterbild" beim Ziehen
   (WebKit/Blink). Die eigentliche Abschaltung macht das JS ueber dragstart. */
.qnss__img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.qnss--kenburns .qnss__img{animation:qnss-kb 12s ease-in-out infinite alternate}
@keyframes qnss-kb{from{transform:scale(1)}to{transform:scale(1.12)}}
.qnss__cat{position:absolute;top:12px;left:12px;background:var(--qnss-accent);color:var(--qnss-accent-ink);font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.qnss__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.qnss__date{font-size:13px;color:var(--qnss-muted);display:flex;align-items:center;gap:7px}
.qnss__date::before{content:"";width:14px;height:2px;background:var(--qnss-accent)}
.qnss__title{font-size:clamp(17px,.6vw + 14px,22px);line-height:1.2;margin:0;font-weight:700;hyphens:auto}
.qnss__text{color:var(--qnss-muted);font-size:clamp(14px,.3vw + 13px,16px);line-height:1.5;hyphens:auto}
/* Die Typografie des Sitepackages setzt p/li direkt an und wuerde sonst die
   Kartengroessen ueberschreiben - Karten sind schmaler als der Fliesstext der Seite. */
.qnss__text p,.qnss__text li{margin:0 0 .5em;font-size:inherit;line-height:inherit}
.qnss__text p:last-child,.qnss__text ul:last-child,.qnss__text ol:last-child{margin-bottom:0}
.qnss__text ul,.qnss__text ol{margin:0 0 .5em;padding-left:1.2em}
.qnss__btn{align-self:flex-start;margin-top:auto;background:var(--qnss-accent);color:var(--qnss-accent-ink);font-weight:700;text-decoration:none;padding:10px 18px;border-radius:10px;font-size:14px;transition:background .2s,transform .2s}
.qnss__btn:hover,.qnss__btn:focus-visible{transform:translateX(3px);filter:brightness(.94);color:var(--qnss-accent-ink)}

/* Skin: Overlay */
.qnss--skin-overlay .qnss__card{background:none;position:relative;box-shadow:none}
.qnss--skin-overlay .qnss__media{aspect-ratio:3/4;border-radius:var(--qnss-radius)}
.qnss--skin-overlay .qnss__body{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(to top,rgba(20,26,27,.92),rgba(20,26,27,.5) 55%,transparent);color:#fff;border-radius:0 0 var(--qnss-radius) var(--qnss-radius)}
.qnss--skin-overlay .qnss__title,.qnss--skin-overlay .qnss__text,.qnss--skin-overlay .qnss__date{color:#fff}
.qnss--skin-overlay .qnss__date::before{background:#fff}

/* Skin: Split */
.qnss--skin-split .qnss__card{flex-direction:row}
.qnss--skin-split .qnss__media{aspect-ratio:auto;width:46%;min-height:230px}
.qnss--skin-split .qnss__body{width:54%}
@media(max-width:640px){.qnss--skin-split .qnss__card{flex-direction:column}.qnss--skin-split .qnss__media{width:100%;aspect-ratio:16/9}.qnss--skin-split .qnss__body{width:100%}}

/* Lauftext-Band (Ticker) */
.qnss--display-ticker .qnss__card{flex-direction:row;align-items:center;background:none;box-shadow:none;gap:12px;padding:6px 26px 6px 0;white-space:nowrap;transform:none}
.qnss--display-ticker .qnss__card:hover{transform:none;box-shadow:none}
.qnss--display-ticker .qnss__media,.qnss--display-ticker .qnss__btn,.qnss--display-ticker .qnss__text{display:none}
.qnss--display-ticker .qnss__body{flex-direction:row;align-items:center;gap:12px;padding:0}
.qnss--display-ticker .qnss__title{font-size:16px}
.qnss--display-ticker .swiper-slide{width:auto}

/* ---------------------------------------------------------------
   Navigation – eigene, kompakte Buttons (kein swiper-button-* CSS)
   --------------------------------------------------------------- */
.qnss__nav{
    position:absolute;
    z-index:10;
    top:50%;
    left:auto;right:auto;
    transform:translateY(-50%);
    width:var(--qnss-nav-size);
    height:var(--qnss-nav-size);
    margin:0;padding:0;border:0;
    background:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
    transition:opacity .2s ease,background .2s ease,transform .2s ease;
}
/* Glyph = SVG aus Resources/Public/Icons/Arrows/ als Maske -> einfaerbbar */
.qnss__nav::before{
    content:"";
    display:block;
    width:56%;height:56%;
    /* Reihenfolge: Redakteurs-Farbe > Vorgabe der Hintergrund-Variante > Akzentfarbe */
    background:var(--qnss-nav-ink-user,var(--qnss-nav-ink,var(--qnss-accent)));
    -webkit-mask:var(--qnss-arrow-glyph) center/contain no-repeat;
    mask:var(--qnss-arrow-glyph) center/contain no-repeat;
}
.qnss__nav::after{content:none !important}
.qnss__nav:focus-visible{outline:3px solid var(--qnss-accent);outline-offset:2px}
.qnss__nav--disabled{opacity:.3;pointer-events:none}
.qnss__nav--lock{display:none}

/* Richtung: die Grafiken zeigen nach rechts, alles Weitere per Transform */
.qnss__nav--prev::before{transform:scaleX(-1)}
.qnss--dir-vertical .qnss__nav--next::before{transform:rotate(90deg)}
.qnss--dir-vertical .qnss__nav--prev::before{transform:rotate(-90deg)}

/* Hintergrund-Varianten.
   Der Hover wechselt bewusst NICHT die Hintergrundfarbe, sondern verstaerkt nur
   den Schatten - sonst wuerde er eine selbst gewaehlte (ggf. transparente) Farbe
   ueberschreiben. */
.qnss--navbg-circle .qnss__nav{background:var(--qnss-nav-bg-user,rgba(255,255,255,.94));border-radius:50%;box-shadow:0 4px 14px rgba(31,39,41,.22)}
.qnss--navbg-solid .qnss__nav{background:var(--qnss-nav-bg-user,var(--qnss-accent));border-radius:50%;box-shadow:0 4px 14px rgba(31,39,41,.22);--qnss-nav-ink:var(--qnss-accent-ink)}
.qnss--navbg-square .qnss__nav{background:var(--qnss-nav-bg-user,rgba(255,255,255,.94));border-radius:calc(var(--qnss-nav-size) / 4);box-shadow:0 4px 14px rgba(31,39,41,.22)}
.qnss--navbg-circle .qnss__nav:hover,
.qnss--navbg-solid .qnss__nav:hover,
.qnss--navbg-square .qnss__nav:hover{box-shadow:0 7px 20px rgba(31,39,41,.34)}
.qnss--navbg-none .qnss__nav{background:none;box-shadow:none}
.qnss--navbg-none .qnss__nav::before{width:100%;height:100%}
.qnss--navbg-none .qnss__nav:hover::before{opacity:.75}

/* Eigener hochgeladener Pfeil: als Bild, damit Farben erhalten bleiben */
.qnss--nav-img .qnss__nav::before{display:none}
.qnss__nav-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.qnss__nav--prev .qnss__nav-img{transform:scaleX(-1)}
.qnss--dir-vertical .qnss__nav--next .qnss__nav-img{transform:rotate(90deg)}
.qnss--dir-vertical .qnss__nav--prev .qnss__nav-img{transform:rotate(-90deg)}

/* Position innen: ueber dem Rand der Karten (Bezug ist .qnss inkl. Innenabstand) */
.qnss--nav-inside.qnss--dir-horizontal .qnss__nav--prev{left:calc(var(--qnss-padh) + 8px)}
.qnss--nav-inside.qnss--dir-horizontal .qnss__nav--next{right:calc(var(--qnss-padh) + 8px)}
/* Position aussen: im Rahmenbereich neben den Karten */
.qnss--nav-outside.qnss--dir-horizontal .qnss__nav--prev{left:7px}
.qnss--nav-outside.qnss--dir-horizontal .qnss__nav--next{right:7px}

/* Vertikal: Pfeile oben/unten mittig.
   ACHTUNG: Hier NIEMALS wieder ein transform auf ::before setzen - die Drehung
   der Pfeil-Grafik steht weiter oben (rotate 90/-90). Eine zweite Regel an dieser
   Stelle gewinnt durch die spaetere Position und kippt die Icons schief
   (Relikt aus der Zeit, als die Pfeile aus zwei Rahmenlinien im 45-Grad-Winkel bestanden). */
.qnss--dir-vertical .qnss__nav{top:auto;bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
.qnss--nav-inside.qnss--dir-vertical .qnss__nav--prev{top:calc(var(--qnss-padv) + 10px)}
.qnss--nav-inside.qnss--dir-vertical .qnss__nav--next{bottom:calc(var(--qnss-padv) + 10px)}
.qnss--nav-outside.qnss--dir-vertical .qnss__nav--prev{top:7px}
.qnss--nav-outside.qnss--dir-vertical .qnss__nav--next{bottom:7px}

/* ---------------------------------------------------------------
   Pagination
   Der Pager haengt wie die Pfeile AUSSERHALB von .swiper (overflow:hidden),
   damit die Position "aussen" nicht abgeschnitten wird. Dadurch greifen Swipers
   Regeln mit Kind-Kombinator (.swiper-horizontal > .swiper-pagination-...)
   nicht mehr - die Positionierung machen wir vollstaendig selbst.
   --------------------------------------------------------------- */
/* FALLSTRICK: Swipers eigene Regeln (.swiper-pagination-bullets.swiper-pagination-horizontal,
   .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-pagination-fraction)
   kommen OHNE Kind-Kombinator aus und greifen deshalb auch am ausgelagerten Pager.
   Sie setzen left:0 / width:100% / top:0. Darum hier bewusst mit .qnss davor (hoehere
   Spezifitaet) und mit ALLEN betroffenen Kanten explizit - sonst haengt der Pager schief. */
.qnss__pager{position:absolute;z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1}
.qnss.qnss--dir-horizontal .qnss__pager{left:var(--qnss-padh);right:var(--qnss-padh);top:auto;width:auto;height:auto;flex-flow:row wrap}
.qnss.qnss--dir-vertical .qnss__pager{top:var(--qnss-padv);bottom:var(--qnss-padv);left:auto;width:auto;height:auto;flex-flow:column nowrap}
.qnss.qnss--pag-inside.qnss--dir-horizontal .qnss__pager{bottom:calc(var(--qnss-padv) + 12px)}
.qnss.qnss--pag-outside.qnss--dir-horizontal .qnss__pager{bottom:6px}
.qnss.qnss--pag-inside.qnss--dir-vertical .qnss__pager{right:calc(var(--qnss-padh) + 12px)}
.qnss.qnss--pag-outside.qnss--dir-vertical .qnss__pager{right:6px}

/* Punkte in Akzentfarbe; Swipers eigene Abstaende weichen dem flex-gap. */
.qnss .swiper-pagination-bullet{background:var(--qnss-text);opacity:.28;margin:0 !important;flex:0 0 auto}
.qnss .swiper-pagination-bullet-active{background:var(--qnss-accent);opacity:1}
.qnss .swiper-pagination-fraction{color:var(--qnss-text);font-size:13px}

/* Fortschrittsbalken: schlank und abgerundet (Swiper setzt ihn sonst dick nach oben).
   Er fuellt die ganze Kante, deshalb hier die flex-Ausrichtung zuruecknehmen. */
.qnss .qnss__pager.swiper-pagination-progressbar{display:block;border-radius:999px;background:rgba(31,39,41,.12)}
.qnss.qnss--dir-horizontal .qnss__pager.swiper-pagination-progressbar{height:4px}
.qnss.qnss--dir-vertical .qnss__pager.swiper-pagination-progressbar{width:4px}
.qnss .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--qnss-accent);border-radius:999px}

@media(prefers-reduced-motion:reduce){
    .qnss--kenburns .qnss__img{animation:none}
    .qnss__card{transition:none}
    .qnss__card:hover{transform:none}
    .qnss--marquee .swiper-wrapper{animation:none}
}