/* =========================================================================
   QUADRONET Elemente - Inszenierung (08.11.2026)
   -------------------------------------------------------------------------
   Buehne, Aussage, Laufband, Kapitel, Leistungen, Belege, Ort, Abschluss.
   Zuerst gebaut fuer derfotorabe.de (Entwurf "Lichtschiene", variante-12).

   UNGESCHICHTET wie elemente.css - alles haengt an .qni-* bzw. an den
   Rahmen .frame-type-qnelements_*. Ein Theme passt die Elemente ueber
   --qne-* an, z. B. in seiner Ebene :root { --qne-text-ruhig: #D8D4CC; }:
     --qne-akzent, --qne-akzent-schrift (Text auf Akzent), --qne-grund,
     --qne-text-stark, --qne-text-ruhig, --qne-leise, --qne-linie, --qne-wort-ruhig,
     --qne-display, --qne-sans, --qne-gross-buehne, --qne-gross-kapitel,
     --qne-gross-abschnitt, --qne-gross-abschluss, --qne-gross-band.
   (Die internen --qni-* werden an .qni gesetzt und lesen --qne-* - ein
   :root { --qni-... } im Theme kaeme deshalb NICHT an.)

   Farben und Schriften kommen aus den qn_base-Tokens des Themes:
     Akzent        --qn-flaeche-betont      Text         --qn-schrift
     Grund         --qn-flaeche             leiser Text  --qn-schrift-leise
     Ueberschrift  --qn-schriftfamilie-ueberschrift, Fliesstext --qn-schriftfamilie
   Bewegung nur mit html.qni-bewegt (setzt inszenierung.js, nicht bei
   "Bewegung reduzieren") - ohne Skript steht alles fertig da.
   ========================================================================= */

.qni,
.qni-folgebild,
.qni-ring,
.frame[class*="frame-type-qnelements_"] {
  --qni-akzent: var(--qne-akzent, var(--qn-flaeche-betont, #E8651A));
  --qni-akzent-schrift: var(--qne-akzent-schrift, #000);
  --qni-grund: var(--qne-grund, var(--qn-flaeche, #0A0A0A));
  --qni-text-stark: var(--qne-text-stark, #fff);
  --qni-text-ruhig: var(--qne-text-ruhig, var(--qn-schrift-leise, #C9C5BE));
  --qni-leise: var(--qne-leise, var(--qn-schrift-leise, #A9A59E));
  --qni-wort-ruhig: var(--qne-wort-ruhig, #808080);
  --qni-linie: var(--qne-linie, var(--qn-linie-fein, rgba(243, 240, 234, .16)));
  --qni-display: var(--qne-display, var(--qn-schriftfamilie-ueberschrift, system-ui, sans-serif));
  --qni-sans: var(--qne-sans, var(--qn-schriftfamilie, system-ui, sans-serif));
  --qni-ease: var(--qn-verlauf, cubic-bezier(.16, 1, .3, 1));
  --qni-breite: var(--qn-breite, 87.5rem);
  --qni-rand: var(--qn-rand, clamp(20px, 4.4vw, 72px));
  --qni-kopf: var(--qn-ankerabstand, 88px);
  --qni-gx: clamp(16px, 2vw, 32px);
}

/* ----- Einbau in die Seite ------------------------------------------------- */
/* Randlos: Buehne, Kapitel, Laufband und Ort laufen bis an den Fensterrand.
   Steht das Element in einem Breitenrahmen (.qn-breite aus qn_base), bricht
   es heraus; ein Theme-Template ohne Rahmen braucht das nicht. */
.qn-breite .frame-type-qnelements_buehne,
.qn-breite .frame-type-qnelements_kapitel,
.qn-breite .frame-type-qnelements_laufband,
.qn-breite .frame-type-qnelements_ort {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}
/* Die Buehne liegt als erstes Element unter einem durchsichtigen Kopf -
   der Abstand des Inhaltsbereichs nach oben entfaellt dann. */
.qn-inhalt:has(.frame-type-qnelements_buehne:first-child) { padding-top: 0; }
.qn-inhalt:has(.frame-type-qnelements_buehne:first-child) .qn-breite { padding-top: 0; }
.frame-type-qnelements_buehne:first-child { margin-top: 0; }
/* Die Abschnitte schliessen ohne Abstand aneinander an - sie bringen ihren
   Innenabstand selbst mit. Wichtig fuer die Kapitel: durch eine Luecke
   zwischen zwei Elementen saehe man die festgeklebten Kapitel durchscheinen. */
.frame.frame-type-qnelements_buehne,
.frame.frame-type-qnelements_aussage,
.frame.frame-type-qnelements_laufband,
.frame.frame-type-qnelements_kapitel,
.frame.frame-type-qnelements_leistungen,
.frame.frame-type-qnelements_belege,
.frame.frame-type-qnelements_ort,
.frame.frame-type-qnelements_abschluss { margin-block: 0; }
.frame-type-qnelements_kapitel ~ .frame { margin-block: 0; }

/* Kapitel-Zaehler: je Inhaltsbereich neu */
.qn-inhalt { counter-reset: qni-kapitel; }

/* ----- Grundlagen ------------------------------------------------------ */
.qni h1, .qni h2, .qni h3, .qni-belege__gross, .qni-band__zeile {
  font-family: var(--qni-display);
  font-weight: 400;
  letter-spacing: .012em;
  margin: 0;
}
.qni p { text-wrap: pretty; }
.qni-buehne { color: #fff; }

/* ----- Bausteine ------------------------------------------------------- */
.qni-wrap { max-width: var(--qni-breite); margin-inline: auto; padding-inline: var(--qni-rand); }

.qni-etikett {
  font-family: var(--qni-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qni-leise);
}
.qni-etikett b { color: var(--qni-akzent); font-weight: 400; }

.qni-knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--qni-display);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--qni-akzent);
  color: var(--qni-akzent-schrift);
  border: 1px solid var(--qni-akzent);
  transition: background .3s, color .3s;
}
.qni-knopf:hover, .qni-knopf:focus-visible { background: transparent; color: var(--qni-akzent); }

.qni-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-family: var(--qni-display);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--qni-text-stark);
}
.qni-pfeil::after { content: ""; width: 46px; height: 1px; background: currentColor; transition: width .4s var(--qni-ease); }
.qni-pfeil:hover, .qni-pfeil:focus-visible { color: var(--qni-akzent); }
.qni-pfeil:hover::after, .qni-pfeil:focus-visible::after { width: 78px; }

.qni-punkt { color: var(--qni-akzent); }

/* Zeilen fahren aus einer Maske hoch */
.qni-z { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.qni-z > span { display: block; }
.qni-bewegt .qni-z > span { transform: translateY(105%); transition: transform 1.2s var(--qni-ease); }
.qni-bewegt .geladen .qni-z > span,
.qni-bewegt .sichtbar .qni-z > span { transform: none; }
.qni-bewegt .qni-z:nth-child(2) > span { transition-delay: .12s; }
.qni-bewegt .qni-z:nth-child(3) > span { transition-delay: .24s; }
.qni-bewegt .qni-z:nth-child(4) > span { transition-delay: .36s; }
.qni-bewegt .qni-einblenden { opacity: 0; transition: opacity 1.2s .6s; }
.qni-bewegt .geladen .qni-einblenden,
.qni-bewegt .sichtbar .qni-einblenden { opacity: 1; }

/* ----- Buehne ---------------------------------------------------------- */
.qni-buehne {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: calc(var(--qni-kopf) + 42px) 0 clamp(40px, 7vh, 80px);
}
.qni-buehne__dias { position: absolute; inset: 0; margin: 0; }
.qni-buehne__dias::after { content: ""; position: absolute; inset: 0; background: rgba(4, 4, 4, .5); }
.qni-buehne__dia { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s; }
.qni-buehne__dia.an { opacity: 1; }
.qni-buehne__dia img { width: 100%; height: 100%; object-fit: cover; }
/* "raus" = das Bild, das gerade ausblendet. Es behaelt die Animation, bis es
   unsichtbar ist - sonst springt es beim Wechsel auf scale(1) zurueck (Ruck).
   Gleicher animation-name an einer anderen Regel: die Animation laeuft weiter. */
.qni-bewegt .qni-buehne__dia.an img,
.qni-bewegt .qni-buehne__dia.raus img { animation: qni-kenburns 9s linear both; }
@keyframes qni-kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
/* Hochkant (Telefon): das Bild ist dort schon ein eigener 9:16-Ausschnitt
   (BildBreit "hoch") - kraeftiger Zoom wuerde wieder nur die Mitte zeigen. */
@media (orientation: portrait) {
  @keyframes qni-kenburns { from { transform: scale(1.05); } to { transform: scale(1); } }
}
/* <picture> aus BildBreit: nimmt am Layout nicht teil, das <img> bleibt
   direktes Kind fuer Groesse und object-fit. */
.qni-bild { display: contents; }

.qni-buehne__wrap {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--qni-gx);
  row-gap: 30px;
  align-items: end;
}
.qni-buehne h1 {
  grid-column: 1 / span 8;
  color: #fff;
  font-size: var(--qne-gross-buehne, clamp(4.2rem, 13.4vw, 14.5rem));
  line-height: .84;
  text-transform: uppercase;
}
.qni-buehne__unten { grid-column: 1 / span 5; }
.qni-buehne__unten .qni-etikett { margin: 0 0 16px; }
.qni-buehne__unten p:not(.qni-etikett) { color: #E6E2DA; margin: 0 0 24px; max-width: 60ch; }

.qni-buehne__steuer { grid-column: 8 / span 5; justify-self: end; display: flex; align-items: center; gap: 12px; }
.qni-buehne__titel {
  font-family: var(--qni-display);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  min-width: 15ch;
  text-align: right;
}
.qni-buehne__titel b { color: var(--qni-akzent); font-weight: 400; }
.qni-buehne__punkte { display: flex; gap: 8px; }
.qni-buehne__punkte button {
  position: relative;
  width: clamp(40px, 4vw, 64px);
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.qni-buehne__punkte button::before { content: ""; position: absolute; inset: 14px 0 auto 0; height: 2px; background: rgba(255, 255, 255, .3); }
.qni-buehne__punkte i {
  position: absolute;
  left: 0;
  top: 14px;
  height: 2px;
  width: 0;
  background: var(--qni-akzent);
  box-shadow: 0 0 10px 1px var(--qni-akzent);
}
.qni-buehne__punkte button.an i { width: 100%; }
.qni-bewegt .qni-buehne.laeuft .qni-buehne__punkte button.an i { width: 0; animation: qni-fuellen 6.5s linear forwards; }
@keyframes qni-fuellen { to { width: 100%; } }
.qni-buehne__pause {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.qni-buehne__pause[hidden] { display: none; }
@media (max-width: 900px) {
  .qni-buehne h1, .qni-buehne__unten { grid-column: 1 / -1; }
  .qni-buehne__steuer { grid-column: 1 / -1; justify-self: start; }
  .qni-buehne__titel { text-align: left; }
}

/* ----- Aussage --------------------------------------------------------- */
.qni-aussage { padding: clamp(110px, 16vw, 240px) 0 clamp(80px, 10vw, 150px); }
.qni-aussage .qni-etikett { display: block; margin-bottom: 34px; }
.qni-aussage__text > * {
  font-family: var(--qni-sans);
  font-weight: 300;
  font-size: clamp(1.55rem, 3.3vw, 3.2rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--qni-text-stark);
  max-width: 30ch;
  margin: 0;
}
.qni-aussage__text > * + * { margin-top: .6em; }
.qni-aussage__text em, .qni-aussage__text i { font-style: normal; color: var(--qni-akzent); }
/* Woerter leuchten beim Scrollen auf. Vorher grau statt durchsichtig:
   Deckkraft .2 ergab 1,6:1 Kontrast (Lighthouse/WCAG 1.4.3 rot). Das
   Grau --qni-wort-ruhig (#808080) hat 5:1 auf #0A0A0A, der Wechsel nach
   Weiss bzw. Akzentfarbe bleibt deutlich sichtbar. API: --qne-wort-ruhig.
   (08.11.2026, vorher opacity - Rueckweg: inszenierung.css.vor-kontrast) */
.qni-aussage__text .w { transition: color .3s linear; }
.qni-bewegt .qni-aussage__text .w { color: var(--qni-wort-ruhig); }
.qni-bewegt .qni-aussage__text .w.an { color: inherit; }

/* ----- Laufband -------------------------------------------------------- */
.qni-band { padding: 10px 0 clamp(70px, 9vw, 140px); overflow: hidden; }
.qni-band__zeile {
  display: flex;
  white-space: nowrap;
  font-family: var(--qni-display);
  font-size: var(--qne-gross-band, clamp(4.8rem, 15.5vw, 16rem));
  line-height: 1;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(243, 240, 234, .32);
  will-change: transform;
}
.qni-band__zeile span { padding-right: .5em; }
.qni-band__zeile i { font-style: normal; color: var(--qni-akzent); -webkit-text-stroke: 0; padding-right: .5em; font-size: .38em; align-self: center; }
.qni-band__zeile + .qni-band__zeile { margin-top: -.08em; }

/* ----- Kapitel --------------------------------------------------------- */
/* Sticky am RAHMEN (.frame), nicht an der section: nur der Rahmen ist
   ein Kind des Inhaltsbereichs, an dem das Kleben haengt. */
.frame-type-qnelements_kapitel { position: sticky; top: 0; counter-increment: qni-kapitel; }
.frame-type-qnelements_kapitel ~ .frame:not(.frame-type-qnelements_kapitel) { position: relative; z-index: 2; background: var(--qn-flaeche, #0A0A0A); }

.qni-kapitel {
  height: max(620px, 100svh);
  background: var(--qni-grund);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-top: 1px solid var(--qni-linie);
}
.qni-kapitel__oben { display: flex; justify-content: space-between; gap: 20px; padding: 22px var(--qni-rand); }
.qni-kapitel__nr::before { content: counter(qni-kapitel, decimal-leading-zero); }
.qni-kapitel__von:not(:empty)::before { content: " / "; }
.qni-kapitel__leinwand { position: relative; margin: 0; overflow: hidden; min-height: 0; }
.qni-kapitel__leinwand img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.qni-kapitel__unten {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--qni-gx);
  row-gap: 14px;
  align-items: end;
  padding: 22px var(--qni-rand) clamp(24px, 4vh, 46px);
}
.qni-kapitel h2 { grid-column: 1 / span 7; font-size: var(--qne-gross-kapitel, clamp(3.4rem, 10.4vw, 11rem)); line-height: .84; text-transform: uppercase; }
.qni-kapitel__text { grid-column: 9 / span 4; font-size: .98rem; color: var(--qni-text-ruhig); }
.qni-kapitel__text p { margin: 0 0 14px; }
@media (max-width: 900px) {
  .qni-kapitel h2, .qni-kapitel__text { grid-column: 1 / -1; }
  .qni-kapitel__text p { font-size: .95rem; }
}

/* ----- Leistungen ------------------------------------------------------ */
.qni-leistungen { padding: clamp(100px, 13vw, 200px) 0 clamp(80px, 10vw, 150px); }
.qni-leistungen__kopf {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--qni-gx);
  row-gap: 20px;
  margin-bottom: clamp(40px, 5vw, 70px);
  align-items: end;
}
.qni-leistungen__kopf h2 { grid-column: 1 / span 7; font-size: var(--qne-gross-abschnitt, clamp(3.2rem, 7.4vw, 7.8rem)); line-height: .86; text-transform: uppercase; }
.qni-leistungen__kopf p { grid-column: 9 / span 4; color: var(--qni-text-ruhig); margin: 0; }
.qni-zeilen { border-top: 1px solid var(--qni-linie); }
.qni-zeile {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.3fr) minmax(0, 1fr) 3rem;
  column-gap: var(--qni-gx);
  align-items: center;
  padding: clamp(22px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--qni-linie);
  color: var(--qni-text-stark);
  text-decoration: none;
}
.qni-zeile__nr { font-family: var(--qni-display); font-size: 1rem; letter-spacing: .12em; color: var(--qni-leise); }
.qni-zeile h3 { font-size: clamp(2rem, 3.8vw, 3.9rem); line-height: .92; text-transform: uppercase; transition: color .4s, transform .6s var(--qni-ease); }
.qni-zeile p { margin: 0; font-size: .95rem; color: var(--qni-text-ruhig); }
.qni-zeile__daumen { display: none; }
.qni-zeile svg { justify-self: end; transition: transform .5s var(--qni-ease); }
a.qni-zeile:hover h3, a.qni-zeile:focus-visible h3 { color: var(--qni-akzent); transform: translateX(14px); }
a.qni-zeile:hover svg, a.qni-zeile:focus-visible svg { transform: rotate(-45deg); }
div.qni-zeile svg { display: none; }
@media (max-width: 900px) {
  .qni-leistungen__kopf h2, .qni-leistungen__kopf p { grid-column: 1 / -1; }
  .qni-zeile { grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: 10px; }
  .qni-zeile__nr, .qni-zeile svg { display: none; }
  .qni-zeile__daumen { display: block; grid-row: span 2; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
}
.qni-folgebild {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(240px, 22vw, 360px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .35s;
  display: none;
}
.qni-zeiger .qni-folgebild { display: block; }
.qni-folgebild.an { opacity: 1; }
.qni-folgebild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.qni-folgebild img.an { opacity: 1; }

/* ----- Belege ---------------------------------------------------------- */
.qni-belege { padding: 0 0 clamp(90px, 12vw, 180px); }
.qni-belege ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--qni-linie);
}
.qni-belege li { padding: 34px var(--qni-gx) 0 0; display: flex; flex-direction: column; gap: 12px; }
.qni-belege li + li { border-left: 1px solid var(--qni-linie); padding-left: var(--qni-gx); }
.qni-belege__gross {
  font-family: var(--qni-display);
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: .012em;
  color: var(--qni-text-stark);
  text-transform: uppercase;
}
.qni-belege__gross.zitat {
  font-family: var(--qni-sans);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.qni-belege p { margin: 0; color: var(--qni-text-ruhig); font-size: .95rem; }
@media (max-width: 860px) {
  .qni-belege li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--qni-linie); margin-top: 30px; }
}

/* ----- Studio ---------------------------------------------------------- */
.qni-ort { padding: 0 0 clamp(100px, 13vw, 200px); }
.qni-ort__rahmen { margin: 0 0 clamp(50px, 6vw, 90px); overflow: hidden; height: clamp(320px, 44vw, 680px); }
.qni-ort__rahmen img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.qni-bewegt [data-blende] { clip-path: inset(var(--b, 12%)); }
.qni-ort__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--qni-gx);
  row-gap: 40px;
  align-items: start;
}
.qni-ort h2 { grid-column: 1 / span 6; font-size: var(--qne-gross-abschnitt, clamp(3.2rem, 7.4vw, 7.8rem)); line-height: .86; text-transform: uppercase; hyphens: manual; }
.qni-ort__text { grid-column: 8 / span 5; color: var(--qni-text-ruhig); }
.qni-ort__text > p { margin: 0 0 1rem; }
.qni-ort address { font-style: normal; color: var(--qni-text-stark); margin: 22px 0 26px; font-weight: 400; }
.qni-ort__person {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--qni-linie);
}
.qni-ort__person img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); border-radius: 50%; }
.qni-ort__person p { font-size: .95rem; color: var(--qni-text-ruhig); margin: 0; }
@media (max-width: 900px) {
  .qni-ort h2, .qni-ort__text, .qni-ort__person { grid-column: 1 / -1; }
}

/* ----- Abschluss ------------------------------------------------------- */
.qni-abschluss { padding: clamp(90px, 12vw, 190px) 0 clamp(70px, 8vw, 120px); text-align: center; border-top: 1px solid var(--qni-linie); }
.qni-abschluss h2 { font-size: var(--qne-gross-abschluss, clamp(5.4rem, 21vw, 23rem)); line-height: .82; text-transform: uppercase; }
.qni-abschluss p { margin: 28px auto 34px; color: var(--qni-text-ruhig); max-width: 60ch; }
.qni-magnet {
  display: inline-grid;
  place-items: center;
  width: clamp(150px, 14vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--qni-akzent);
  color: var(--qni-akzent-schrift);
  text-decoration: none;
  font-family: var(--qni-display);
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .5s var(--qni-ease), background .3s;
}
.qni-magnet:hover, .qni-magnet:focus-visible { background: #fff; color: var(--qni-akzent-schrift); }
.qni-abschluss address {
  font-style: normal;
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 34px;
  color: var(--qni-text-ruhig);
}
.qni-abschluss address a { color: var(--qni-text-stark); text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
.qni-abschluss address a:hover, .qni-abschluss address a:focus-visible { color: var(--qni-akzent); }

/* ----- Ring am Mauszeiger (nur Maus, nur mit Bewegung) ----------------- */
.qni-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 71;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: width .4s var(--qni-ease), height .4s var(--qni-ease), margin .4s var(--qni-ease), background .3s, border-color .3s, opacity .3s;
}
.qni-zeiger .qni-ring { opacity: 1; }
.qni-ring span { font-family: var(--qni-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qni-akzent-schrift); opacity: 0; transition: opacity .2s; }
.qni-ring.gross { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--qni-akzent); border-color: var(--qni-akzent); }
.qni-ring.gross span { opacity: 1; }

/* Text unter dem Zeiger: Overflow der Band-Zeilen nicht in die Seite tragen */
.frame-type-qnelements_laufband { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .qni-buehne__dia.an img, .qni-band__zeile { animation: none !important; transform: none !important; }
}